wehub-resource-sync
070959e133
landing-page-staging / Deploy landing page to staging (push) Has been skipped
landing-page-ci / Validate landing page (push) Failing after 4s
visual-baseline / Capture visual baselines (push) Has been cancelled
bake-plugin-previews / Bake plugin previews (push) Has been cancelled
134 lines
2.7 KiB
CSS
134 lines
2.7 KiB
CSS
/* ===========================================
|
||
FIXED 16:9 STAGE: MANDATORY BASE STYLES
|
||
Include this ENTIRE file in every presentation.
|
||
Slides are authored at 1920×1080 and scaled as a whole.
|
||
=========================================== */
|
||
|
||
/* 1. Lock the browser viewport */
|
||
html,
|
||
body {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
overflow: hidden;
|
||
background: var(--stage-bg, #000);
|
||
}
|
||
|
||
/* 2. Full-window deck viewport */
|
||
.deck-viewport {
|
||
position: fixed;
|
||
inset: 0;
|
||
overflow: hidden;
|
||
background: var(--stage-bg, #000);
|
||
}
|
||
|
||
/* 3. Fixed 16:9 design canvas.
|
||
JavaScript sets transform: translate(...) scale(...). */
|
||
.deck-stage {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 1920px;
|
||
height: 1080px;
|
||
overflow: hidden;
|
||
transform-origin: 0 0;
|
||
background: var(--slide-bg, #fff);
|
||
}
|
||
|
||
/* 4. Slides stack inside the fixed stage.
|
||
Content must be laid out at 1920×1080, not reflowed per device. */
|
||
.slide {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 1920px;
|
||
height: 1080px;
|
||
overflow: hidden;
|
||
display: block;
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
background: var(--slide-bg, #fff);
|
||
}
|
||
|
||
.slide.active,
|
||
.slide.visible {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 5. Keep media inside authored slide bounds */
|
||
img,
|
||
video,
|
||
canvas,
|
||
svg {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
}
|
||
|
||
/* 6. Presentation chrome stays outside the slide design system */
|
||
.deck-controls {
|
||
position: fixed;
|
||
left: 50%;
|
||
bottom: 22px;
|
||
transform: translateX(-50%);
|
||
z-index: 1000;
|
||
}
|
||
|
||
/* 7. Print one fixed-size slide per page */
|
||
@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;
|
||
}
|
||
}
|
||
|
||
/* 8. Reduced motion */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
transition-duration: 0.2s !important;
|
||
}
|
||
}
|