/* * Sidenivå-stilark for presentasjoner i slides/ - lastes i tillegg til * rot-`styles.css` (design-tokens) på hver presentasjons-side. Håndterer * tema-variabler, nullstilling av rot-sidens standard sidebredde for * presentasjons-sider, og utskrift/PDF-oppsett. */ @layer side-spesifikt { :root { /* Støtter både lyst og mørkt skjema. Uten eksplisitt `data-tema` følger `light-dark()` dermed brukerens systemvalg via den brukte color-scheme-en på dokumentet. */ color-scheme: light dark; /* Standardmekanismen er automatisk systemtema. En eksplisitt color-scheme på låser `light-dark()` til tilsvarende gren uten å endre selve fargeverdiene. */ --slide-bg: light-dark(var(--color-surface, canvas), #111827); --slide-text: light-dark(var(--color-surface-text, canvasText), #f9fafb); /* Nøytral standard - ingen påtvunget fargeaksent. Alle bruksstedene nedover (tittel-strek, overskrift-understreker, fokusringer, knapper, filmstripe-indikator) er skrevet som `var(--slide-accent, currentColor)`, men siden variabelen faktisk er satt her, er det *denne* verdien - ikke fallbacken - som gjelder. En forfatter som vil ha en farget aksent kan sette `--slide-accent: ` i sin egen decks stilark for å overstyre - se "Style din egen presentasjon" i README.md. */ --slide-accent: currentColor; /* Eksponerte layout-/typografi-tokens for slides-komponentene. Holdt samlet her, slik at én deck kan overstyre dem lokalt uten å røre de innkapslede komponent-stilarkene. Standardverdiene matcher dagens standardutseende. */ --slide-flate-padding-compact: 5cqi; --slide-flate-padding: clamp(var(--space-large, 1.5rem), 5cqi, 5rem); --slide-flate-font-size-compact: 2cqi; --slide-flate-font-size: clamp(1rem, 2cqi, 1.6rem); --slide-klikksone-bredde: 12%; --slide-gap-tett: var(--space-small, 0.6em); --slide-gap-normal: var(--space-medium, 1em); --slide-gap-romslig: var(--space-large, 1.5rem); --slide-innhold-padding: var(--space-medium, 1em); --slide-overskrift-font-size: 1.4em; --slide-overskrift-strek-tykkelse: 0.1em; --slide-overskrift-strek-avstand: 0.3em; --slide-liste-innrykk: var(--space-medium, 1em); --slide-liste-linjehoyde: var(--line-height-relaxed, 1.6); --slide-agenda-liste-innrykk: 1.2em; --slide-agenda-linjehoyde: 2.2; --slide-agenda-liste-font-size: 1.15em; --slide-tittel-gap: var(--slide-gap-tett); --slide-tittel-font-size: 2em; --slide-tittel-undertittel-font-size: 0.6em; --slide-tittel-strek-bredde: 4em; --slide-tittel-strek-tykkelse: 0.15em; --slide-seksjon-tittel-font-size: 1.8em; --slide-agenda-gap: var(--slide-gap-normal); --slide-punktliste-gap: var(--slide-gap-normal); --slide-kode-gap: var(--slide-gap-tett); --slide-kode-tittel-font-size: 1.2em; --slide-kode-padding: var(--slide-innhold-padding); --slide-kode-font-size: 0.7em; --slide-kode-linjehoyde: var(--line-height-relaxed, 1.6); --slide-kode-radius: var(--radius-small, 0.4em); --slide-bilde-gap: var(--slide-gap-tett); --slide-bilde-radius: var(--radius-small, 0.4em); --slide-bildetekst-font-size: 0.6em; --slide-sitat-gap: 0.5lh; --slide-sitat-font-size: 1.4em; --slide-sitat-linjehoyde: var(--line-height-relaxed, 1.6); --slide-sitat-maksbredde: 24ch; --slide-kilde-font-size: 0.7em; --slide-prototype-overgang-varighet: 400ms; --slide-prototype-radius: var(--radius-small, 0.4em); --slide-prototype-mobil-maks-hoyde: 42em; --slide-info-maksbredde: 60rem; --slide-info-padding: clamp(var(--space-large, 1.5rem), 5vw, 3rem); --slide-info-tittel-margin-block-end: 0.3em; --slide-info-beskrivelse-maksbredde: 60ch; --slide-info-fakta-gap: var(--slide-gap-romslig); --slide-info-fakta-margin-block: var(--space-large, 1.5rem); --slide-info-fakta-rad-gap: var(--space-2xs, 0.2em); --slide-info-handlinger-gap: 0.75rem; --slide-info-handlinger-margin-block-end: 2rem; --slide-info-knapp-padding: var(--space-small, 0.6em) var(--space-medium, 1em); --slide-info-knapp-radius: var(--radius-small, 0.4em); --slide-info-ressurser-tittel-margin-block-end: 0.5em; --slide-info-ressurs-gap: var(--space-xs, 0.4em); --slide-info-ressurs-innrykk: 1.2em; --slide-utskrift-maksbredde: 40rem; --slide-utskrift-margin: 3rem auto; --slide-utskrift-padding: clamp(var(--space-large, 1.5rem), 5vw, 2.5rem); --slide-utskrift-gap: var(--space-medium, 1rem); --slide-utskrift-knapp-padding: var(--space-small, 0.6em) var(--space-large, 1.5em); --slide-utskrift-knapp-radius: var(--radius-small, 0.4em); /* Satt direkte på :root (ikke bak en :has(lm-slide)-sjekk) med vilje: :has() krever at faktisk er satt inn i DOM-treet før den kan matche, noe som ikke skjer før HTML-parseren når forbi . :root derimot finnes og matcher øyeblikkelig så snart stilarket i det hele tatt er lastet - før i det hele tatt er parset. Dette lukker igjen det aller første, korteste flash-vinduet (det rene, hvite standard-bakgrunnsøyeblikket før noe av finnes), i tillegg til lm-slide:not(:defined)-regelen lenger ned som dekker vinduet etter at finnes, men ikke er ferdig oppgradert. */ background: var(--slide-bg); /* Felles tilgjengelighets-tokens for fokus-/nåværende-indikatorer i slide-komponentene. Holdes samlet her slik at prefers-contrast kan forsterke dem ett sted, uten at hver komponent finner opp egne bredder. */ --slide-focus-ring-width: 2px; --slide-current-indicator-width: 2px; --slide-current-step-underline-thickness: 0.08em; } /* Eksplisitt mørkt tema overstyrer systemvalget ved å tvinge dokumentets color-scheme til mørk, som igjen låser `light-dark()` til mørk gren. */ [data-tema="mork"] { color-scheme: dark; } /* Nummerering + "der vi er nå"-fremheving for - vanlig lys-DOM-stil (::slotted() i komponentens eget stilark treffer kun selve
    -en, ikke
  1. -ene inni den). @scope avgrenser regelen til nøyaktig dette komponent-treet, uten en egen klasse bare for å skru opp spesifisiteten (se "Bruk moderne CSS-syntaks" i .github/copilot-instructions.md). */ @scope (lm-slide-agenda) { li::marker { color: var(--slide-accent, currentColor); font-weight: bold; } /* Forfatteren markerer selv hvilket punkt en agenda-gjenvisning (f.eks. midt i foredraget, mellom seksjoner) gjelder - med det standard tilgjengelighets-attributtet aria-current="step", ikke en oppdiktet klasse. Se slide-agenda/README.md for bruk. */ li[aria-current="step"] { font-weight: bold; color: var(--slide-accent, currentColor); } } @media (prefers-contrast: more) { :root { --slide-focus-ring-width: 3px; --slide-current-indicator-width: 3px; --slide-current-step-underline-thickness: 0.14em; } @scope (lm-slide-agenda) { li[aria-current="step"] { text-decoration: underline; text-decoration-thickness: var(--slide-current-step-underline-thickness); text-underline-offset: 0.14em; } } } @media (forced-colors: active) { @scope (lm-slide-agenda) { li[aria-current="step"] { color: Highlight; text-decoration: underline; text-decoration-thickness: var(--slide-current-step-underline-thickness); text-underline-offset: 0.14em; } } } /* Rot-`styles.css` legger en lesevennlig maks-bredde og luft rundt hele siden - det passer for `slides/index.html`, men ikke for en presentasjon (som skal fylle hele vinduet). :has() lar oss nullstille dette kun på sider som faktisk inneholder en presentasjon (har minst én ), uten at hver presentasjons-side trenger en egen klasse. */ body:has(lm-slide) { max-inline-size: none; margin: 0; padding: 0; overflow: hidden; /* Rot-`styles.css` setter `color-scheme: light dark` direkte på `body` (ikke bare :root), som ellers ville vunnet over presentasjonens tema-valgte verdi på :root - descendanten sin egen spesifiserte verdi slår igjennom uansett hva forfedrene arver. Nullstilles derfor her, til `inherit`, slik at faktisk arver :root sin tema-bestemte color-scheme (lys/mørk) videre til alt inni presentasjonen, inkludert