124 lines
2.0 KiB
CSS
124 lines
2.0 KiB
CSS
/*
|
|
* Fixed 16:9 stage. Include this whole file in every generated deck.
|
|
* Slides are authored at 1920x1080 and scaled as one unit.
|
|
*/
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: var(--stage-bg, #f4f7f5);
|
|
}
|
|
|
|
.deck-viewport {
|
|
position: fixed;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
background: var(--stage-bg, #f4f7f5);
|
|
}
|
|
|
|
.deck-stage {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
transform-origin: 0 0;
|
|
background: var(--slide-bg, #fffdf7);
|
|
}
|
|
|
|
.slide {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
display: block;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
background: var(--slide-bg, #fffdf7);
|
|
}
|
|
|
|
.slide.active,
|
|
.slide.visible {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
z-index: 1;
|
|
}
|
|
|
|
img,
|
|
video,
|
|
canvas,
|
|
svg {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.deck-controls {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 22px;
|
|
transform: translateX(-50%);
|
|
z-index: 1000;
|
|
}
|
|
|
|
@media print {
|
|
html,
|
|
body {
|
|
width: 1920px;
|
|
height: auto;
|
|
overflow: visible;
|
|
background: #fff;
|
|
}
|
|
|
|
.deck-viewport {
|
|
position: static;
|
|
overflow: visible;
|
|
background: #fff;
|
|
}
|
|
|
|
.deck-stage {
|
|
position: static;
|
|
width: auto;
|
|
height: auto;
|
|
transform: none !important;
|
|
background: none;
|
|
}
|
|
|
|
.slide {
|
|
position: relative;
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
pointer-events: auto !important;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
break-after: page;
|
|
page-break-after: always;
|
|
}
|
|
|
|
.slide:last-child {
|
|
break-after: auto;
|
|
page-break-after: auto;
|
|
}
|
|
|
|
.deck-controls {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|