/* ═══════════════════════════════════════════════════════ Nordweb — jaettu teemakerros ═══════════════════════════════════════════════════════ Yksi lähde tumman teeman sävyille ja semanttisille väritokeneille. Oli aiemmin dashboard.css:ssä, jota vain oma-tili lataa. Kun kori ja /ohjeet saivat tumman teeman, vaihtoehdot olivat kolme kopiota rampista tai yksi jaettu tiedosto. Tämä on se jaettu tiedosto. Lataa tämä JOKAISELLA sivulla joka käyttää teemaa, ennen sivun omaa CSS:ää: Tiedostosta EI ole min-versiota tarkoituksella: style.min.css ja pages.min.css regeneroidaan käsin regexillä, ja tämä tiedosto on pieni ja muuttuu usein. Teeman kytkin: . Attribuutin asettaa partials/theme-boot.php ennen ensimmäistä maalausta, arvo localStoragen avaimesta nw_theme. Sivukohtainen oletus on boot-funktion parametri. Kolme kerrosta: 1. body — semanttiset tokenit vaalealle 2. body[data-theme="dark"] — samat tokenit tummalle + --db-* ramppi 3. .nw-theme — geneeristen sivutokenien uudelleenkartoitus Kerros 3 on scope-luokka, EI body-tason ohitus. Syy: navi ja footer käyttävät --navy:ta ja --white:ta TAUSTANA ja ne pysyvät brändinavyinä kaikissa teemoissa. Jos ne käännettäisiin body-tasolla, footerista tulisi vaalea laatikko tumman sivun alle. Siksi jokainen teemattu sivu kääräisee oman sisältönsä .nw-theme-elementtiin ja jättää navin ja footerin ulkopuolelle. Kontrastivahti scripts/check-contrast.php lukee arvot suoraan tästä tiedostosta ja kaatuu jos jokin tekstipari jää alle WCAG AA:n. Aja se aina kun kosket väreihin. ═══════════════════════════════════════════════════════ */ /* Vierityspalkin tila varataan aina. Ilman tätä sivu jonka sisältö kutistuu suodattaessa (esim. /ohjeet-haku) menettää pystyvierityspalkin, viewport levenee ~15 px ja koko keskitetty palsta hyppää — hakukenttä näyttää muuttavan kokoaan joka näppäimenpainalluksella. */ html { scrollbar-gutter: stable; } /* ── Semanttiset väritokenit ─────────────────────────── * Status- ja linkkivärit ovat oma kerroksensa, jotta tumma teema ei tarvitse * erillistä ohitussääntöä joka kutsupaikalle. Nämä saa määritellä body-tasolla * (toisin kuin --navy / --white, ks. Dark mode -kommentti alempana), koska * nimet ovat uusia eikä sivuston navi tai footer käytä niitä. * * Teksti ja täyttö eivät ole sama token: --ok / --warn / --danger on aina * TEKSTIVÄRI tummalla pinnalla. Umpinaiset napit pitävät oman kylläisen * täyttönsä ja valkoisen tekstinsä. */ body { /* Latausskeletonin savyt. Nama olivat kovakoodattuina .db-skeletonin * gradientissa, joten skeleton loisti tummassa teemassa lahes valkoisena * vaikka se on .db-layoutin sisalla ja tokenit olisivat olleet tarjolla. */ --skel-base: #eef1f6; --skel-shine: #e2e8f0; --link: #3B6CF4; --ok: #047857; --ok-bg: rgba(16, 185, 129, 0.10); --ok-bg-hover: rgba(16, 185, 129, 0.20); --ok-line: #6ee7b7; --warn: #a1500a; --warn-bg: rgba(245, 158, 11, 0.10); --warn-bg-hover: rgba(245, 158, 11, 0.20); --warn-line: #fcd34d; --danger: #b91c1c; --danger-bg: rgba(239, 68, 68, 0.10); --danger-bg-hover: rgba(239, 68, 68, 0.20); --danger-line: #fca5a5; --violet: #8b5cf6; /* Umpinaiset taytot joissa on valkoinen teksti. Kirkas #10B981 / #ef4444 * jaa valkoisella 2.5-3.8:1, joten nappien ja toastien pohja on tummempi. * Kirkkaat savyt jaavat tilapisteisiin ja mittaripalkkeihin, joissa ei ole tekstia. */ --ok-solid: #0d7a59; --ok-solid-hover: #0a6349; --danger-solid: #c62828; --danger-solid-hover: #a81f1f; /* Umpinainen navy-pinta valkoiselle tekstille. Erillinen --navystä, joka * kääntyy .db-layoutin sisällä VAALEAKSI tekstiväriksi tummassa teemassa. */ --navy-solid: #0B1D35; } body[data-theme="dark"] { /* Skeleton nayttaa silta pinnalta jonka se korvaa: kortin savy pohjana, * kohotettu savy shimmerina. */ --skel-base: var(--db-surface); --skel-shine: var(--db-raised); /* Ramppi vaaleni, ja #7FA6FF jai kohotetulla pinnalla 3.90:1 (min 4.5). * #96B6FF on 4.63 / 5.74 / 7.17 (kohotettu / kortti / sivu). */ --link: #96B6FF; --ok: #4ADE80; --ok-bg: rgba(74, 222, 128, 0.12); --ok-bg-hover: rgba(74, 222, 128, 0.22); --ok-line: #1E6F45; --warn: #FBBF24; --warn-bg: rgba(251, 191, 36, 0.12); --warn-bg-hover: rgba(251, 191, 36, 0.22); --warn-line: #7A4E11; --danger: #FCA5A5; --danger-bg: rgba(252, 165, 165, 0.11); --danger-bg-hover: rgba(252, 165, 165, 0.20); --danger-line: #7F1D1D; --violet: #A78BFA; --ok-solid: #0d7a59; --ok-solid-hover: #0a6349; --danger-solid: #c62828; --danger-solid-hover: #a81f1f; --navy-solid: #23496F; /* Tumman teeman ramppi. Nama ovat AINOAT paikat joissa ramppi on kirjoitettu * hexina - kaikki muut saannot viittaavat naihin. Sivu on oma-tilin oman * hero-gradientin sinista (#122a4a, gradientin keskisavy), EI julkisen * sivuston navynavya #0B1D35: hero sailyttaa gradienttinsa ja sivu jatkaa * samaa savya, joten heron alle ei jaa tummempaa kuoppaa. * scripts/check-contrast.php resolvoi nama var()-viittausten lapi. */ --db-page: #122a4a; --db-surface: #1A3A60; --db-raised: #23496F; --db-line: #3C669C; --db-ink: #E7EEF9; --db-ink-dim: #C6D5EA; --db-ink-mute: #B7C9E2; } /* Natiivikontrollien (select, checkbox, vierityspalkki, autofill) oletusvarit * tulevat selaimelta, eivat CSS:sta. Ilman tata select-elementin teksti jai * mustaksi tummalla pinnalla (~1,5:1) ja alasvetovalikko renderoityi vaaleana. * color-scheme kertoo selaimelle mita savya kayttaa. */ body[data-theme="dark"] { color-scheme: dark; } /* Sivun pohjavari. on .nw-theme-scopen ULKOPUOLELLA (nav ja footer ovat * sen sisalla), joten se ei peri kartoitettua --bg-pagea vaan jaisi vaaleaksi * siina kohtaa mihin sisalto ei ylety. Sivu saa ylikirjoittaa taman: oma-tili * kayttaa omaa gradienttiaan (dashboard.css ladataan taman jalkeen). */ body[data-theme="dark"] { background: var(--db-page); } /* ── Geneeristen sivutokenien kartoitus tummalle ─────── * Sivuston --white / --navy / --muted / --border tulevat style.css:n :root- * lohkosta ja niitä käyttää myös navi ja footer TAUSTANA. Siksi niitä ei * käännetä body-tasolla vaan tässä scopessa. Huomaa että --navy muuttuu * scopen sisällä taustaväristä TEKSTIVÄRIKSI: jos jokin sääntö käyttää * background: var(--navy), se tarvitsee oman tumman ohituksensa. */ /* Oma-tilin omat scopet ovat mukana samassa listassa, jotta kartta on yhdessä * paikassa. Ne EIVÄT saa .nw-theme-luokkaa markupissa, koska .db-modal-overlay * luodaan kuudessa eri kohdassa dashboard.js:ää — luokan lisääminen jokaiseen * olisi kuusi mahdollisuutta unohtaa se. .nw-theme on listan VIIMEISENÄ, koska * scripts/check-contrast.php etsii lohkon tekstillä " {". */ body[data-theme="dark"] .db-layout, body[data-theme="dark"] .db-modal-overlay, body[data-theme="dark"] .edit-overlay, body[data-theme="dark"] .nw-theme { --white: var(--db-surface); --bg-page: var(--db-page); --bg-light: var(--db-raised); --text: var(--db-ink); --navy: var(--db-ink); --navy-mid: var(--db-ink-dim); --muted: var(--db-ink-mute); --border: var(--db-line); --shadow: 0 4px 24px rgba(0, 0, 0, 0.35); color: var(--db-ink); } /* ── Jaetut komponentit tummalla ─────────────────────── * Kaksi ansaa toistuu sivuston omassa CSS:ssa, ja molemmat rikkoutuvat vasta * scopen sisalla: * 1. --white TEKSTIVARINA. Scopessa se on tumma pinta, joten valkoinen teksti * kylläisella napilla muuttuu tummaksi tummalla (esim. .btn-submit 1,6:1). * 2. --navy TAUSTANA. Scopessa se on vaalea muste, joten napista tulee * valkoinen ja teksti katoaa. * Nama korjataan tassa eika style.css:ssa, koska sivut lataavat style.min.css:n. */ body[data-theme="dark"] .nw-theme .btn-submit { color: #fff; } body[data-theme="dark"] .nw-theme .btn-submit:hover { background: var(--blue); } /* Sivuston globaali a { color: var(--blue-dark) } on #2B4FBF, joka jaa tummalla * 2:1:een. Vain luokattomat linkit korjataan: luokalliset (napit, kortit, CTA) * kantavat oman varinsa eika niita saa ylikirjoittaa. */ body[data-theme="dark"] .nw-theme a:not([class]) { color: var(--link); } /* Luokalliset tekstilinkit jotka kantavat saman --blue-darkin. Nama on lueteltava * erikseen, koska CSS ei osaa valita elementteja lasketun varin perusteella. */ body[data-theme="dark"] .nw-theme .blog-card-link { color: var(--link); } /* ── Navi ja footer ──────────────────────────────────── * Navi ja footer ovat brändinavyä myös tummassa teemassa, eli tasan samaa * sävyä kuin tumman sivun tausta. Ilman erotinviivaa navin alareuna sulautuu * sivuun ja footerin yläreuna katoaa. Väri säilyy, raja tulee viivasta. */ body[data-theme="dark"] .site-nav { border-bottom: 1px solid var(--db-line); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); } body[data-theme="dark"] .site-footer { border-top: 1px solid var(--db-line); }