/* :filename: wexa_statics/css/extras/slides.css :author: Brigitte Bigi :contact: contact@sppas.org :summary: Style to be used with the slides module. ------------------------------------------------------------------------- This file is part of Whakerexa: https://github.com/brigitte-bigi/Whakerexa Copyright (C) 2023-2026 Brigitte Bigi, CNRS Laboratoire Parole et Langage, Aix-en-Provence, France This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see . This banner notice must not be removed. ------------------------------------------------------------------------- Architecture: - Unlayered rules: structural invariants that must always win (layout, sizing, transitions, opacity). These cannot be overridden by themes. - @layer theme block at the bottom: visual defaults (colors, gradients, font decoration). Theme files injected later in override these within the same layer by source order. */ /* ======================================================================= Responsive slides ======================================================================= */ :root { --slides-size-divisor: 1; --slides-fontsize-divisor: 1; } @media screen and (max-width: 540px) { :root { --slides-size-divisor: 2.75; --slides-fontsize-divisor: 3.5 /* 1.5;*/ } } @media screen and (min-width: 540px) { :root { --slides-size-divisor: 2.5; --slides-fontsize-divisor: 3; /*1.25;*/ } } @media screen and (min-width: 620px) { :root { --slides-size-divisor: 1.75; --slides-fontsize-divisor: 2.25; /*1.18;*/ } } @media screen and (min-width: 768px) { :root { --slides-size-divisor: 1.5; --slides-fontsize-divisor: 1.75; /*1.1;*/ } } @media screen and (min-width: 896px) { :root { --slides-size-divisor: 1.25; --slides-fontsize-divisor: 1.5; } } @media screen and (min-width: 1100px) { :root { --slides-size-divisor: 1; --slides-fontsize-divisor: 1.15; } } @media screen and (min-width: 1200px) { :root { --slides-size-divisor: 0.9; --slides-fontsize-divisor: 1.05; } } @media screen and (min-width: 1400px) { :root { --slides-size-divisor: 0.8; --slides-fontsize-divisor: 0.9; } } @media screen and (min-width: 1600px) { :root { --slides-size-divisor: 0.75; --slides-fontsize-divisor: 0.85; } } /* ======================================================================= STRUCTURAL INVARIANTS (unlayered) ======================================================================= */ /* Structural slide variables */ :root { --footer-text: ""; --footer-margin-left: calc((var(--screen-width) / 2) - var(--font-size)); } /* Page header/footer are hidden in slide mode */ body > header, body > footer { display: none; } /* Page counter: position/counter logic. Color and font are in @layer theme. */ .slide:before { z-index: 1; counter-increment: slides; font-size: 40%; content: var(--footer-text) counter(slides); position: absolute; left: 0; width: 100%; bottom: 0; text-align: center; line-height: var(--font-size); } .slide[aria-selected="true"]:first-of-type:before { content: ""; } /* Heading padding: consistent across all slide levels */ .slide > h1, .slide > h2, .slide > h3, .slide > h4, .slide > h5, .slide > h6 { padding-top: calc(var(--font-size) * 0.5); padding-bottom: calc(var(--font-size) * 0.5); padding-right: 0; padding-left: calc(var(--font-size) * 0.5); margin-left: 0; margin-right: 0; } /* h1: structural layout (decoration in @layer theme) */ .slide > h1 { margin-top: calc((var(--height) * 0.35)); width: 100%; } .slide > h1.title { line-height: calc(var(--font-size) * 1.5); margin: auto; padding-top: var(--font-size); padding-bottom: var(--font-size); } .slide > h1.sub-title { line-height: calc(var(--font-size) * 1.5); margin: auto; padding-top: var(--font-size); padding-bottom: var(--font-size); } /* h2/h3: size invariants (decoration in @layer theme) */ .slide > h2 { margin-top: 0; font-size: calc(var(--font-size) * 1.2); } .slide > h3 { margin-top: 0; font-size: calc(var(--font-size) * 1.1); } /* Content margins */ .slide > * { margin-top: calc(var(--font-size) * 0.5); margin-bottom: calc(var(--font-size) * 0.5); margin-right: calc(var(--font-size) * 0.5); margin-left: calc(var(--font-size) * 2); } .slide table *, .sortatable, .slide details, .slide code { font-size: calc(var(--font-size) * 0.8); } .slide pre * { font-size: calc(var(--font-size) * 0.6); } /* Tables and details: centered regardless of depth */ .slide table, .slide details { margin: auto; max-width: 95%; } .slide li, .slide li p { font-size: 100%; } .slide li li, .slide li li p { font-size: 90%; } .slide li li li, .slide li li li p { font-size: 85%; } /* inline-block prevents the hover/focus outline from spanning the full line width */ .slide a { display: inline-block; } .slide details > *:not(summary) { max-height: 60vh; overflow: auto; display: block; } /* Full-page figure only when direct child of .slide */ .slide > figure { display: block; text-align: center; margin: 0 auto; max-width: 90%; max-height: 90%; } /* Nested figures: normal document flow */ .slide figure { text-align: initial; max-width: initial; max-height: initial; } /* figcaption: layout only. Color is in @layer theme. */ .slide figcaption { position: relative; font-size: 60%; padding-bottom: calc(var(--font-size) * 0.6); background-color: transparent; } .slide > img, .slide > video, .slide > audio { background-color: transparent; border-width: 0; border-style: none; margin: 0 auto; max-width: 90%; max-height: 90%; position: relative; } .slide [role="note"] { display: none; } /* ======================================================================= SHARED property for all view modes ======================================================================= */ .slide { border: max(var(--border-width), 2px) solid var(--border-color); border-radius: var(--border-radius); } /* ======================================================================= SHARED VARIABLES (all view modes) ======================================================================= */ body.presentation-view, body.handout-view, body.note-view { --screen-width: calc(1024px / var(--slides-size-divisor)); --height: calc(var(--screen-width) * 9 / 16); --font-size: calc(30px / var(--slides-fontsize-divisor)); --slides-nav-font-size: calc(var(--font-size) * 0.5); counter-reset: slides; } body.note-view { --height: calc(var(--screen-width) * 0.65 * 9 / 16); } /* ======================================================================= THE PRESENTATION VIEW ======================================================================= */ body.presentation-view { box-sizing: border-box; height: var(--height); margin-top: calc(var(--height) / -2); position: absolute; top: 50%; border-radius: var(--border-radius); /*box-shadow: 0 0 var(--border-width) var(--border-width) var(--border-color);*/ counter-reset: slides; left: 50%; right: auto; margin-left: calc(var(--screen-width) / -2); margin-right: auto; } .presentation-view .slide { position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; } .presentation-view .slide[aria-selected] { pointer-events: auto; } /* Transition effect when changing slide */ .presentation-view .slide { transition: left 250ms linear 0s; } /* ======================================================================= THE HANDOUT VIEW ======================================================================= */ body.handout-view { width: var(--screen-width); margin-left: auto; margin-right: auto; } body.handout-view .slide, body.handout-view .slide[aria-selected] ~ .slide { position: relative; left: 0; width: var(--screen-width); height: var(--height); margin-bottom: calc(var(--font-size) * 2); overflow: hidden; } @media print { body.handout-view .slide { break-after: page; margin-bottom: 0; } } /* ======================================================================= THE NOTE VIEW (MEMO) ======================================================================= */ body.note-view { width: var(--screen-width); margin-left: auto; margin-right: auto; } body.note-view .note-container { display: grid; grid-template-columns: calc(var(--screen-width) * 0.65) 1fr; height: var(--height); margin-bottom: calc(var(--font-size) * 2); overflow: hidden; } body.note-view .slide, body.note-view .slide[aria-selected] ~ .slide { position: relative; left: 0; width: var(--screen-width); height: calc(var(--screen-width) * 9 / 16); transform: scale(0.65); transform-origin: top left; } aside[for] { display: none; } body.note-view aside[for] { display: block; float: none; width: auto; padding: var(--font-size); padding-left: calc(var(--font-size) * 1.5); overflow-y: auto; font-size: calc(var(--font-size) * 0.85); } @media print { body.note-view .note-container { break-after: page; margin-bottom: 0; } } /* ======================================================================= THE OVERVIEW VIEW ======================================================================= */ #overview-container { overflow-y: auto; padding: calc(var(--font-size) * 2); padding-top: calc(var(--nav-min-height) + var(--font-size)); display: flex; flex-wrap: wrap; gap: var(--font-size); align-content: flex-start; justify-content: center; } .overview-btn { display: flex; flex-direction: column; align-items: center; gap: calc(var(--font-size) * 0.5); width: calc(var(--font-size) * 12); min-height: calc(var(--font-size) * 4); padding: calc(var(--font-size) * 0.75) var(--font-size); cursor: pointer; border-radius: var(--border-radius); border: var(--border-width) solid var(--border-color); } .overview-num { font-size: 75%; opacity: 0.6; background-color: transparent; color: inherit; } .overview-title { font-size: 90%; text-align: center; word-break: break-word; background-color: transparent; color: inherit; } /* ======================================================================= CONTAINERS ======================================================================= */ #progress-container { position: absolute; bottom: 0; left: 0; width: 100%; height: var(--progress-height); background-color: var(--progress-bg-color); } #progress-bar { height: 100%; width: 0; background-color: var(--progress-fg-color); } #progress-bar::-webkit-progress-bar { background: var(--progress-bg-color); border-radius: var(--border-radius); } #progress-bar::-webkit-progress-value { background: var(--progress-fg-color); border-radius: var(--border-radius); } #progress-bar::-moz-progress-bar { background: var(--progress-fg-color); border-radius: var(--border-radius); } #logo-container { position: fixed; pointer-events: none; z-index: 100; } #logo-container .img-logo { width: calc(var(--font-size) * 2); height: auto; } #logo-container.top { top: 0; bottom: auto; } #logo-container.bottom { bottom: 0; top: auto; } #logo-container.left { left: var(--typography-spacing-horizontal); right: auto; } #logo-container.right { right: var(--typography-spacing-horizontal); left: auto; } /* ======================================================================= SLIDE TRANSITIONS ======================================================================= */ /* Before */ .slide { left: -150%; } /* Current */ .slide[aria-selected] { left: 0; } /* After */ .slide[aria-selected] ~ .slide { left: +150%; } /* ======================================================================= INCREMENTAL ELEMENTS ======================================================================= */ /* @layer base sets background-color: var(--bg-color) on ALL elements (*). Transparent backgrounds prevent a solid block behind dimmed items. */ body.presentation-view .incremental { opacity: 0.15; background-color: transparent; } body.presentation-view .incremental[active] { opacity: 1; background-color: transparent; } body.presentation-view .incremental > * { opacity: 1; background-color: transparent; } body.presentation-view .incremental > *[aria-selected] { color: var(--fg-color); opacity: 1; background-color: transparent; } body.presentation-view .incremental > *[aria-selected] ~ * { opacity: 0.2; background-color: transparent; } body.presentation-view .incremental-invisible { opacity: 0.05; background-color: transparent; } body.presentation-view .incremental-invisible > *[aria-selected] ~ * { opacity: 0.05; background-color: transparent; } /* ======================================================================= CONTROLS ======================================================================= */ #accessibility-controls { position: fixed; top: 0; left: 0; display: flex; gap: calc(var(--font-size) * 0.5); z-index: 2000; } #accessibility-controls button { width: calc(var(--nav-min-height) * 0.65); height: calc(var(--nav-min-height) * 0.65); padding: calc(var(--font-size) * 0.2); } /* nav.nav-wexa.bottom adds padding-bottom to body — irrelevant in presentation mode */ body.presentation-view { padding-bottom: 0; } #nav-content .menuitem, #nav-content [role=menuitem], #slides-controls-view .menuitem, #slides-controls-view [role=menuitem] { font-size: var(--slides-nav-font-size, var(--font-size)); font-weight: normal; } /* Radio inputs are state-only — visually hidden, kept accessible */ #slides-controls-view input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Active view-mode label — unlayered to beat menu.css .menuitem rules */ #slides-controls-view label:has(input[type="radio"]:checked) { background: var(--custom-color2); color: var(--custom-color1); } #accessibility-controls.controls-hidden, #nav-content.controls-hidden, #slides-controls-view.controls-hidden { display: none; } /* ======================================================================= VISUAL DEFAULTS — @layer theme, overrideable by theme files Theme files injected by ThemeManager are appended to after this stylesheet. Within @layer theme, later source order wins, so any theme file that defines the same selectors will automatically override these defaults without specificity tricks. ======================================================================= */ @layer theme { /* Slide accent colors: themes override these to match their palette */ :root { --custom-color1: rgb(41, 35, 92); --custom-color2: rgb(29, 113, 184); } /* Outer area (viewport) background in presentation mode */ html:has(body.presentation-view) { background-color: var(--body-bg-color); } /* Slide background */ .slide { background-color: var(--bg-color); } /* Page counter */ .slide:before { color: var(--fg-color-alt); font-family: var(--font-family-pre), cursive; } /* Heading font family */ .slide > h1, .slide > h2, .slide > h3, .slide > h4, .slide > h5, .slide > h6 { font-family: var(--font-family-sans), sans-serif; } /* h1: decoration */ .slide > h1 { font-weight: bold; font-style: normal; font-variant: normal; font-size: calc(var(--font-size) * 1.25); text-align: left; letter-spacing: 2px; border-bottom: calc(var(--font-size) * 0.35) solid transparent; border-image: linear-gradient(0.25turn, var(--custom-color2), rgb(210, 210, 210), var(--custom-color1)); border-image-slice: 1; } /* Title slide heading */ .slide > h1.title { text-align: center; border-bottom: none; color: var(--custom-color1); background: var(--custom-color2); } /* Sub-title slide heading */ .slide > h1.sub-title { text-align: center; border-bottom: none; color: var(--custom-color1); background: var(--custom-color2); } /* Section heading */ .slide > h2 { background: var(--custom-color1); color: var(--custom-color2); font-weight: var(--font-weight-bold); font-style: normal; font-variant: normal; text-align: left; letter-spacing: 1px; border-bottom: var(--border-width) solid var(--border-color); } /* Sub-section heading */ .slide > h3 { font-weight: var(--font-weight-semibold); font-style: normal; font-variant: normal; text-align: left; letter-spacing: 1px; border-bottom: var(--border-width) solid var(--border-color); } /* Inline quotes */ .slide q { quotes: "\201C" "\201D" "\2018" "\2019"; } /* Figure caption */ .slide figcaption { color: var(--custom-color1); background: var(--custom-color2); } /* Overview panel background */ #overview-container { background: var(--bg-color); color: var(--fg-color); } /* Overview buttons */ .overview-btn { background: var(--bg-color-alt); color: var(--fg-color); border-color: var(--border-color); } .overview-btn:has(input[type="radio"]:checked), .overview-btn:hover, .overview-btn:focus-visible { background: var(--custom-color2); color: var(--custom-color1); border-color: var(--custom-color2); } /* Notes column */ body.note-view aside[for] { border-left: max(var(--border-width), 2px) solid var(--border-color); color: var(--fg-color); } } ul > li, ol > li { line-height: calc(1.4 * var(--line-height)); }