2022-12-17 07:09:43 +00:00
|
|
|
@import "./overlay-common";
|
|
|
|
|
2019-10-08 05:43:49 +00:00
|
|
|
.overlay {
|
2020-07-21 23:26:34 +00:00
|
|
|
background: black;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
position: fixed;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
2022-12-15 17:30:46 +00:00
|
|
|
z-index: 1200;
|
2020-07-21 23:26:34 +00:00
|
|
|
overflow: hidden;
|
|
|
|
color: white;
|
|
|
|
display: flex;
|
2022-12-17 07:09:43 +00:00
|
|
|
justify-content: flex-start;
|
2020-07-21 23:26:34 +00:00
|
|
|
flex-direction: row;
|
2022-12-17 07:09:43 +00:00
|
|
|
|
2022-12-21 19:51:50 +00:00
|
|
|
.active-slide-img {
|
|
|
|
/* properly size current slide thumbnail */
|
|
|
|
/* relative sizes might not work in real world */
|
|
|
|
/* If we get larger thumbnail sizes, we want to limit their size */
|
|
|
|
max-height: 75%;
|
|
|
|
min-height: 250px;
|
|
|
|
}
|
|
|
|
.active-slide-img-text {
|
|
|
|
font-size: 1.8rem;
|
|
|
|
}
|
|
|
|
.next-slides-img {
|
|
|
|
/* properly size thumbnail displayed in 2nd and subsequent slides */
|
|
|
|
/* If we get larger thumbnail sizes, we want to limit their size */
|
|
|
|
max-height: 20%;
|
|
|
|
min-height: 100px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.next-slides-text {
|
|
|
|
font-size: 1.4rem;
|
|
|
|
}
|
|
|
|
|
2022-12-17 07:09:43 +00:00
|
|
|
&-content {
|
|
|
|
width: 100%;
|
|
|
|
max-width: 100%;
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
@media (orientation: portrait) {
|
|
|
|
overflow: hidden;
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tags {
|
|
|
|
margin-top: 0.5rem;
|
|
|
|
margin-bottom: 0.5rem;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: flex-start;
|
|
|
|
color: green;
|
|
|
|
align-items: center;
|
|
|
|
@include slide-font-size(1);
|
|
|
|
|
|
|
|
@media screen and (min-width: $mobile-breakpoint) {
|
|
|
|
margin-top: 1rem;
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
font-size: 3rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
span {
|
|
|
|
margin-left: 1rem;
|
|
|
|
&.active {
|
|
|
|
color: lightgreen;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.sidebar {
|
|
|
|
padding: 0.8rem;
|
|
|
|
max-width: 30%;
|
|
|
|
margin-top: 1em;
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
|
|
.notes {
|
|
|
|
@include slide-font-size(0.9);
|
|
|
|
line-height: 1;
|
|
|
|
|
|
|
|
color: salmon;
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width: $mobile-breakpoint) {
|
|
|
|
margin-top: 4rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (orientation: portrait) {
|
|
|
|
max-width: none;
|
|
|
|
max-height: 20%;
|
|
|
|
margin-bottom: 3.75rem;
|
|
|
|
background-color: rgb(64, 64, 64);
|
|
|
|
|
|
|
|
.notes {
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (orientation: portrait) {
|
|
|
|
flex-direction: column;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
|
|
|
|
|
|
.slide {
|
|
|
|
line-height: 1.2;
|
|
|
|
white-space: pre-line;
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
&.first {
|
|
|
|
margin-top: 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
@include slide-font-size();
|
|
|
|
}
|
|
|
|
|
2019-10-08 05:43:49 +00:00
|
|
|
}
|
|
|
|
|
2022-12-17 07:09:43 +00:00
|
|
|
.toolbar {
|
|
|
|
padding: 0.8rem;
|
2020-07-21 23:26:34 +00:00
|
|
|
display: flex;
|
2022-12-17 07:09:43 +00:00
|
|
|
justify-content: flex-start;
|
|
|
|
align-items: center;
|
|
|
|
width: auto;
|
|
|
|
gap: 1.5rem;
|
2019-10-08 05:43:49 +00:00
|
|
|
|
2022-12-17 07:09:43 +00:00
|
|
|
.back-button {
|
|
|
|
background: #fff;
|
|
|
|
}
|
2020-07-21 23:26:34 +00:00
|
|
|
|
2022-12-17 07:09:43 +00:00
|
|
|
@media screen and (max-width: ($mobile-breakpoint - 0.125px)){
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
background: rgba(64, 64, 64, 0.5);
|
|
|
|
backdrop-filter: blur(2px);
|
|
|
|
padding: 0.6rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width: $mobile-breakpoint) {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: ($mobile-breakpoint - 0.125px)) and (orientation: landscape) {
|
|
|
|
left: auto;
|
|
|
|
border-top-left-radius: 0.5rem;
|
|
|
|
}
|
2020-07-21 23:26:34 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.close {
|
|
|
|
text-align: right;
|
2019-10-08 05:43:49 +00:00
|
|
|
}
|
|
|
|
|
2022-12-17 07:09:43 +00:00
|
|
|
.time {
|
|
|
|
color: yellow;
|
|
|
|
text-align: right;
|
|
|
|
white-space: nowrap;
|
|
|
|
flex: 1;
|
2020-07-21 23:26:34 +00:00
|
|
|
display: flex;
|
2022-12-17 07:09:43 +00:00
|
|
|
justify-content: flex-end;
|
|
|
|
align-items: center;
|
|
|
|
padding-right: 0.8rem;
|
|
|
|
font-size: 2rem;
|
2019-10-08 05:43:49 +00:00
|
|
|
|
2022-12-17 07:09:43 +00:00
|
|
|
@media screen and (min-width: $mobile-breakpoint) {
|
|
|
|
font-size: 3rem;
|
2020-07-21 23:26:34 +00:00
|
|
|
}
|
2019-10-08 05:43:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.container {
|
2022-12-17 07:09:43 +00:00
|
|
|
margin: 0 1rem;
|
2019-10-08 05:43:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.nextSlides {
|
2020-07-21 23:26:34 +00:00
|
|
|
margin-top: 1rem;
|
|
|
|
color: grey;
|
2022-12-17 07:09:43 +00:00
|
|
|
|
2020-07-21 23:26:34 +00:00
|
|
|
.slide {
|
2022-12-17 07:09:43 +00:00
|
|
|
@include slide-font-size(0.75);
|
2020-07-21 23:26:34 +00:00
|
|
|
}
|
|
|
|
}
|