80 lines
1.3 KiB
SCSS
80 lines
1.3 KiB
SCSS
#speaker-detail {
|
|
/*
|
|
* Speaker Background
|
|
*/
|
|
|
|
ion-toolbar {
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
--background: transparent;
|
|
--color: white;
|
|
}
|
|
|
|
ion-toolbar ion-back-button,
|
|
ion-toolbar ion-button,
|
|
ion-toolbar ion-menu-button {
|
|
--color: white;
|
|
}
|
|
|
|
.speaker-background {
|
|
position: relative;
|
|
|
|
display: flex;
|
|
|
|
padding-top: var(--ion-safe-area-top);
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
flex-direction: column;
|
|
|
|
height: calc(250px + var(--ion-safe-area-top));
|
|
|
|
background: center / cover url("/assets/img/speaker-background.png")
|
|
no-repeat;
|
|
}
|
|
|
|
.speaker-background img {
|
|
width: 70px;
|
|
border-radius: 50%;
|
|
margin-top: calc(-1 * var(--ion-safe-area-top));
|
|
}
|
|
|
|
.speaker-background h2 {
|
|
position: absolute;
|
|
|
|
bottom: 10px;
|
|
|
|
color: white;
|
|
}
|
|
|
|
.md .speaker-background {
|
|
box-shadow: rgba(0, 0, 0, 0.2) 0 3px 1px -2px,
|
|
rgba(0, 0, 0, 0.14) 0 2px 2px 0px, rgba(0, 0, 0, 0.12) 0 1px 5px 0;
|
|
}
|
|
|
|
.ios .speaker-background {
|
|
box-shadow: rgba(0, 0, 0, 0.12) 0 4px 16px;
|
|
}
|
|
|
|
/*
|
|
* Speaker Details
|
|
*/
|
|
|
|
.speaker-detail p {
|
|
margin-left: 6px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.speaker-detail hr {
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
|
|
background: var(--ion-color-step-150, #d7d8da);
|
|
}
|
|
}
|