/* * Ordtrener — mørk modus (følger systemet, som iOS-appen; ingen manuell toggle) * * Lastes av Ordtrener-sidene OG av app-skalet (/tysk/, /spansk/, /fransk/, * /international/ — altså fanene Leksjoner, Fremgang, Rangliste, Profil). * ⚠️ LEKSJONSSIDENE (vg1-*.html, us-*.html) laster den ALDRI, og er fortsatt * lyse. Fila er selve scopet: det finnes ingen toggle og ingen media-query * utenfor den. Utvidelsen til app-skalet kom 09.09.2026 — eleven som gikk fra * en mørk Ordtrener til en hvit Fremgang-fane fikk et blaff i ansiktet hver * gang. Prisen er at blaffet nå ligger ett steg senere: fra en mørk * kapittelliste inn i en lys leksjon. Det er en bevisst avveining; å mørklegge * 160 genererte leksjonssider er en annen jobb. ⚠️ Språksidene mangla lenka til 05.09.2026 (paritet * 2.24) og stod kvite i mørk modus; tests/unit/ordtrener-dark-mode-css * held alle fem sidene på lista. * * Strategi: remap eksisterende Tailwind-klasser under prefers-color-scheme, * samme mønster som språk-tema-overridene i på /ordtrener/index.html. * Trener-modulene (vocab-trainer-multi) bygger DOM med hardkodede klasser i * JS-strenger — remapping her betyr null endringer i delte moduler, og ingen * nye klasser som Tailwind-globene måtte fange (rå CSS, ikke kompilert). * * Palett: modellert på iOS-appens semantiske systemfarger — * grunn #000/#101012, hevet flate #1C1C1E, knapp/celle #2C2C2E, * trykket #3A3A3C, tekst hvit → rgba(235,235,245,…)-trappa. * Aksenter: lysere varianter (à la Apples dark-systemfarger) for tekst, * gjennomskinnelige tinter for -50/-100-bakgrunner; mettede knappefarger * (bg-sky-600, bg-amber-500 osv.) beholdes — de leser godt på mørkt. * * !important trengs for å vinne over språk-overridene (som selv bruker * !important) — og språkspesifikke mørkregler ([data-language=…]) ligger * sist i denne fila med høyere spesifisitet, så de vinner over de generiske. */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --ot-bg: #000000; /* dypeste grunn (html/overscroll) */ --ot-inset: #101012; /* nedsenket flate (trener-grunn, chips) */ --ot-surface: #1C1C1E; /* hevet flate (header, main, kort) */ --ot-raised: #2C2C2E; /* knapper/celler på hevet flate */ --ot-pressed: #3A3A3C; /* trykket/hover-tilstand */ --ot-border: #38383A; --ot-border-strong: #48484A; --ot-text: #FFFFFF; --ot-text-2: #F2F2F7; --ot-text-3: #E5E5EA; --ot-text-muted: rgba(235, 235, 245, 0.62); --ot-text-faint: rgba(235, 235, 245, 0.45); --ot-text-ghost: rgba(235, 235, 245, 0.28); } html { background-color: var(--ot-bg) !important; } /* Tailwind-preflight setter lys default-kantfarge på alt (bare «border»- klassen uten -farge). Universal selektor taper for enhver eksplisitt border-*-klasse, så dette treffer kun default-tilfellene. */ *, ::before, ::after { border-color: var(--ot-border); } /* ===== Nøytrale flater ===== */ .bg-white { background-color: var(--ot-surface) !important; } .bg-stone-50 { background-color: var(--ot-raised) !important; } .bg-stone-100 { background-color: var(--ot-inset) !important; } .bg-stone-200 { background-color: var(--ot-pressed) !important; } .bg-stone-300 { background-color: var(--ot-border-strong) !important; } .bg-gray-50 { background-color: var(--ot-raised) !important; } .bg-white\/80 { background-color: rgba(28, 28, 30, 0.85) !important; } /* Velgersida bruker bg-stone-50 som SIDE-grunn (ikke celle) */ body.bg-stone-50 { background-color: var(--ot-bg) !important; } /* Trykket/hover på nøytrale flater — lysere, ikke mørkere, i mørk modus */ .active\:bg-stone-100:active, .hover\:bg-stone-100:hover { background-color: var(--ot-pressed) !important; } .hover\:bg-stone-50:hover { background-color: var(--ot-raised) !important; } .hover\:bg-stone-200:hover { background-color: var(--ot-border-strong) !important; } .hover\:bg-stone-300:hover { background-color: #545456 !important; } .hover\:bg-gray-50:hover { background-color: var(--ot-pressed) !important; } /* ===== Nøytral tekst ===== */ .text-stone-900 { color: var(--ot-text) !important; } .text-stone-800 { color: var(--ot-text-2) !important; } .text-stone-700 { color: var(--ot-text-3) !important; } .text-stone-600 { color: var(--ot-text-muted) !important; } .text-stone-500 { color: var(--ot-text-muted) !important; } .text-stone-400 { color: var(--ot-text-faint) !important; } .text-stone-300 { color: var(--ot-text-ghost) !important; } .hover\:text-stone-600:hover { color: var(--ot-text-3) !important; } .hover\:text-stone-700:hover { color: var(--ot-text-2) !important; } /* ===== Nøytrale kanter ===== */ .border-stone-100 { border-color: var(--ot-border) !important; } .border-stone-200 { border-color: var(--ot-border) !important; } .border-stone-300 { border-color: var(--ot-border-strong) !important; } .border-gray-300 { border-color: var(--ot-border-strong) !important; } .hover\:border-gray-300:hover { border-color: #545456 !important; } .divide-stone-100 > :not([hidden]) ~ :not([hidden]), .divide-stone-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ot-border) !important; } /* ===== Sky (tysk-tema; remappes videre per språk nederst) ===== */ .text-sky-400 { color: #38BDF8 !important; } .text-sky-500 { color: #38BDF8 !important; } .text-sky-600 { color: #38BDF8 !important; } .text-sky-700 { color: #7DD3FC !important; } .text-sky-800 { color: #BAE6FD !important; } .text-sky-300 { color: rgba(56, 189, 248, 0.5) !important; } .bg-sky-50 { background-color: rgba(14, 165, 233, 0.14) !important; } .bg-sky-100 { background-color: rgba(14, 165, 233, 0.24) !important; } .active\:bg-sky-100:active, .hover\:bg-sky-50:hover { background-color: rgba(14, 165, 233, 0.24) !important; } .border-sky-100 { border-color: rgba(56, 189, 248, 0.25) !important; } .border-sky-200 { border-color: rgba(56, 189, 248, 0.38) !important; } .hover\:border-sky-200:hover { border-color: rgba(56, 189, 248, 0.55) !important; } /* ===== Grønn (riktig-feedback) ===== */ .text-green-300 { color: rgba(74, 222, 128, 0.5) !important; } .text-green-500 { color: #4ADE80 !important; } .text-green-600 { color: #4ADE80 !important; } .text-green-700 { color: #86EFAC !important; } .text-green-800 { color: #BBF7D0 !important; } .text-emerald-600 { color: #34D399 !important; } .text-emerald-700 { color: #6EE7B7 !important; } .bg-green-50 { background-color: rgba(34, 197, 94, 0.14) !important; } .bg-green-100 { background-color: rgba(34, 197, 94, 0.24) !important; } .bg-green-200\/30 { background-color: rgba(34, 197, 94, 0.18) !important; } .bg-green-300 { background-color: rgba(34, 197, 94, 0.4) !important; } .bg-emerald-100 { background-color: rgba(52, 211, 153, 0.22) !important; } .hover\:bg-green-50:hover { background-color: rgba(34, 197, 94, 0.22) !important; } .hover\:bg-green-100:hover { background-color: rgba(34, 197, 94, 0.32) !important; } .border-green-100 { border-color: rgba(74, 222, 128, 0.25) !important; } .border-green-200 { border-color: rgba(74, 222, 128, 0.38) !important; } .border-green-300 { border-color: rgba(74, 222, 128, 0.5) !important; } .border-emerald-200 { border-color: rgba(52, 211, 153, 0.38) !important; } .hover\:border-green-200:hover, .hover\:border-green-300:hover { border-color: rgba(74, 222, 128, 0.6) !important; } /* ===== Rød (feil-feedback) ===== */ .text-red-400 { color: #F87171 !important; } .text-red-600 { color: #F87171 !important; } .text-red-700 { color: #FCA5A5 !important; } .text-red-800 { color: #FECACA !important; } .text-rose-700 { color: #FDA4AF !important; } .bg-red-50 { background-color: rgba(239, 68, 68, 0.14) !important; } .bg-red-100 { background-color: rgba(239, 68, 68, 0.24) !important; } .bg-rose-100 { background-color: rgba(251, 113, 133, 0.22) !important; } .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.22) !important; } .hover\:bg-red-100:hover { background-color: rgba(239, 68, 68, 0.32) !important; } .border-red-100 { border-color: rgba(248, 113, 113, 0.25) !important; } .border-red-200 { border-color: rgba(248, 113, 113, 0.38) !important; } .border-red-300 { border-color: rgba(248, 113, 113, 0.5) !important; } .border-rose-200 { border-color: rgba(251, 113, 133, 0.38) !important; } .hover\:border-red-300:hover, .hover\:border-red-500:hover { border-color: rgba(248, 113, 113, 0.65) !important; } /* ===== Amber (spansk-tema + advarsler) ===== */ .text-amber-300 { color: rgba(251, 191, 36, 0.5) !important; } .text-amber-400 { color: #F59E0B !important; } .text-amber-500 { color: #FBBF24 !important; } .text-amber-600 { color: #FBBF24 !important; } .text-amber-700 { color: #FCD34D !important; } .text-amber-800 { color: #FDE68A !important; } .text-amber-900\/40 { color: rgba(253, 230, 138, 0.5) !important; } .hover\:text-amber-600:hover { color: #FCD34D !important; } .hover\:text-amber-700:hover { color: #FDE68A !important; } .bg-amber-50 { background-color: rgba(245, 158, 11, 0.14) !important; } .bg-amber-100 { background-color: rgba(245, 158, 11, 0.24) !important; } .bg-amber-200 { background-color: rgba(245, 158, 11, 0.32) !important; } .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, 0.2) !important; } .hover\:bg-amber-100:hover { background-color: rgba(245, 158, 11, 0.32) !important; } .hover\:bg-amber-200:hover { background-color: rgba(245, 158, 11, 0.4) !important; } .border-amber-100 { border-color: rgba(251, 191, 36, 0.25) !important; } .border-amber-200 { border-color: rgba(251, 191, 36, 0.38) !important; } .border-amber-300 { border-color: rgba(251, 191, 36, 0.5) !important; } .hover\:border-amber-400:hover { border-color: rgba(251, 191, 36, 0.65) !important; } /* ===== Oransje ===== */ .text-orange-600 { color: #FB923C !important; } .text-orange-700 { color: #FDBA74 !important; } .text-orange-800 { color: #FED7AA !important; } .bg-orange-50 { background-color: rgba(249, 115, 22, 0.14) !important; } .bg-orange-100 { background-color: rgba(249, 115, 22, 0.24) !important; } .bg-orange-200\/30 { background-color: rgba(249, 115, 22, 0.18) !important; } .bg-orange-300 { background-color: rgba(249, 115, 22, 0.4) !important; } .hover\:bg-orange-50:hover { background-color: rgba(249, 115, 22, 0.22) !important; } .hover\:bg-orange-100:hover { background-color: rgba(249, 115, 22, 0.32) !important; } .border-orange-200 { border-color: rgba(251, 146, 60, 0.38) !important; } .border-orange-300 { border-color: rgba(251, 146, 60, 0.5) !important; } /* ===== Blå (fransk-tema + diverse) ===== */ .text-blue-500 { color: #60A5FA !important; } .text-blue-600 { color: #60A5FA !important; } .text-blue-700 { color: #93C5FD !important; } .text-blue-800 { color: #BFDBFE !important; } .bg-blue-50 { background-color: rgba(59, 130, 246, 0.14) !important; } .bg-blue-100 { background-color: rgba(59, 130, 246, 0.24) !important; } .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.22) !important; } .border-blue-100 { border-color: rgba(96, 165, 250, 0.25) !important; } .border-blue-200 { border-color: rgba(96, 165, 250, 0.38) !important; } .border-blue-300 { border-color: rgba(96, 165, 250, 0.5) !important; } .hover\:border-blue-300:hover, .hover\:border-blue-400:hover { border-color: rgba(96, 165, 250, 0.65) !important; } /* ===== Lilla / indigo ===== */ .text-purple-500 { color: #C084FC !important; } .text-purple-600 { color: #C084FC !important; } .text-purple-700 { color: #D8B4FE !important; } .text-indigo-600 { color: #A5B4FC !important; } .text-indigo-700 { color: #C7D2FE !important; } .text-indigo-800 { color: #E0E7FF !important; } .bg-purple-100 { background-color: rgba(168, 85, 247, 0.22) !important; } .bg-purple-200 { background-color: rgba(168, 85, 247, 0.3) !important; } .bg-purple-300 { background-color: rgba(168, 85, 247, 0.42) !important; } .hover\:bg-purple-200:hover { background-color: rgba(168, 85, 247, 0.38) !important; } .bg-indigo-100 { background-color: rgba(129, 140, 248, 0.22) !important; } .border-purple-200 { border-color: rgba(192, 132, 252, 0.38) !important; } .border-indigo-200 { border-color: rgba(165, 180, 252, 0.38) !important; } /* ===== Småbrukte tinter (badges i statistikk o.l.) ===== */ .text-teal-600 { color: #5EEAD4 !important; } .text-teal-700 { color: #5EEAD4 !important; } .text-cyan-700 { color: #67E8F9 !important; } .text-lime-700 { color: #BEF264 !important; } .text-pink-700 { color: #F9A8D4 !important; } .bg-teal-100 { background-color: rgba(45, 212, 191, 0.22) !important; } .bg-cyan-100 { background-color: rgba(34, 211, 238, 0.22) !important; } .bg-lime-100 { background-color: rgba(163, 230, 53, 0.22) !important; } .bg-pink-100 { background-color: rgba(244, 114, 182, 0.22) !important; } .border-teal-200 { border-color: rgba(94, 234, 212, 0.38) !important; } .border-cyan-200 { border-color: rgba(103, 232, 249, 0.38) !important; } .border-lime-200 { border-color: rgba(190, 242, 100, 0.38) !important; } .border-pink-200 { border-color: rgba(249, 168, 212, 0.38) !important; } /* ===== Gradienter (velgersida + intro-kort) ===== */ .from-white { --tw-gradient-from: var(--ot-surface) !important; --tw-gradient-to: rgba(28, 28, 30, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } .from-sky-50 { --tw-gradient-from: #0E2230 !important; --tw-gradient-to: rgba(14, 34, 48, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } .from-sky-100 { --tw-gradient-from: #123043 !important; --tw-gradient-to: rgba(18, 48, 67, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } .from-amber-50 { --tw-gradient-from: #2B1F08 !important; --tw-gradient-to: rgba(43, 31, 8, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } .from-orange-50 { --tw-gradient-from: #2A1707 !important; --tw-gradient-to: rgba(42, 23, 7, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } .from-blue-50 { --tw-gradient-from: #101B33 !important; --tw-gradient-to: rgba(16, 27, 51, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } .from-indigo-50 { --tw-gradient-from: #16162E !important; --tw-gradient-to: rgba(22, 22, 46, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } .to-sky-200 { --tw-gradient-to: #123043 !important; } .to-blue-50 { --tw-gradient-to: #101B33 !important; } .to-indigo-50 { --tw-gradient-to: #16162E !important; } .to-purple-50 { --tw-gradient-to: #1E1430 !important; } .to-orange-50 { --tw-gradient-to: #2A1707 !important; } .to-amber-50 { --tw-gradient-to: #2B1F08 !important; } .to-red-50 { --tw-gradient-to: #2A0F0F !important; } /* * ===== Mettede tilstandsfarger må vinne over nøytral-remappene ===== * Test-modusen LEGGER TIL bg-green-500/bg-red-500 på knapper som * beholder bg-white — remappen vår av .bg-white (!important) ville * ellers skjult riktig/galt-feedbacken. Samme verdier som i lys modus, * bare med !important og senere i kaskaden. */ .bg-green-500 { background-color: #22C55E !important; } .bg-red-500 { background-color: #EF4444 !important; } .bg-amber-400 { background-color: #FBBF24 !important; } .bg-amber-500 { background-color: #F59E0B !important; } .bg-sky-500 { background-color: #0EA5E9 !important; } /* * ===== Kombiner-fliser (match.js) ===== * Tilstandene settes med INLINE styles i JS (amber-100/green-200/red-200 * + mørk tekst). Remappen vår av .bg-white har !important og ville slått * inline-stilen — flisa ville sett uvalgt ut. ID-selektor + !important * vinner over både inline-stilen og de generiske remappene, så * tilstandene får mørke motstykker her i stedet. */ #kombiner-grid button.selected { background-color: rgba(245, 158, 11, 0.32) !important; border-color: #FBBF24 !important; color: var(--ot-text) !important; } #kombiner-grid button.matched { background-color: rgba(34, 197, 94, 0.28) !important; border-color: #22C55E !important; color: #BBF7D0 !important; } #kombiner-grid button.incorrect { background-color: rgba(239, 68, 68, 0.3) !important; border-color: #EF4444 !important; color: #FECACA !important; } /* ===== Fokusringer og fargede skygger ===== */ .focus\:ring-sky-200:focus { --tw-ring-color: rgba(56, 189, 248, 0.4) !important; } .ring-sky-200 { --tw-ring-color: rgba(56, 189, 248, 0.4) !important; } /* Aktiv kapittelboble: lys glorie blir dempet glød på mørkt */ .shadow-sky-200 { --tw-shadow-color: rgba(14, 165, 233, 0.35) !important; } /* * ===== Språkspesifikke mørkregler ===== * Språk-overridene i remapper sky→amber (spansk) / marineblå * (fransk) med !important. Reglene her har høyere spesifisitet * ([data-language] + klasse) og ligger senere i kaskaden, så de vinner * i mørk modus. Mettede knapper (bg-sky-600 o.l.) får beholde * språk-overridens farge — de leser godt på mørkt. */ /* Spansk: amber-aksent i mørk drakt */ [data-language="spanish"] .text-sky-300 { color: rgba(251, 191, 36, 0.5) !important; } [data-language="spanish"] .text-sky-400, [data-language="spanish"] .text-sky-500, [data-language="spanish"] .text-sky-600 { color: #FBBF24 !important; } [data-language="spanish"] .text-sky-700 { color: #FCD34D !important; } [data-language="spanish"] .text-sky-800 { color: #FDE68A !important; } [data-language="spanish"] .bg-sky-50 { background-color: rgba(245, 158, 11, 0.14) !important; } [data-language="spanish"] .bg-sky-100 { background-color: rgba(245, 158, 11, 0.24) !important; } [data-language="spanish"] .active\:bg-sky-100:active { background-color: rgba(245, 158, 11, 0.24) !important; } [data-language="spanish"] .border-sky-100 { border-color: rgba(251, 191, 36, 0.25) !important; } [data-language="spanish"] .border-sky-200 { border-color: rgba(251, 191, 36, 0.38) !important; } /* keep-regelen for .bg-sky-500 over må ikke overstyre spansk amber */ [data-language="spanish"] .bg-sky-500 { background-color: #F59E0B !important; } /* Fransk: marineblå blir lysere blå på mørkt (marine drukner) */ [data-language="french"] .text-sky-300 { color: rgba(143, 166, 255, 0.5) !important; } [data-language="french"] .text-sky-400, [data-language="french"] .text-sky-500, [data-language="french"] .text-sky-600 { color: #8FA6FF !important; } [data-language="french"] .text-sky-700 { color: #B3C2FF !important; } [data-language="french"] .text-sky-800 { color: #CDD7FF !important; } [data-language="french"] .bg-sky-50 { background-color: rgba(96, 130, 255, 0.14) !important; } [data-language="french"] .bg-sky-100 { background-color: rgba(96, 130, 255, 0.24) !important; } [data-language="french"] .active\:bg-sky-100:active { background-color: rgba(96, 130, 255, 0.24) !important; } [data-language="french"] .border-sky-100 { border-color: rgba(143, 166, 255, 0.25) !important; } [data-language="french"] .border-sky-200 { border-color: rgba(143, 166, 255, 0.38) !important; } /* Fransk knappefarge #002395 er for mørk mot mørk grunn — løft den litt */ [data-language="french"] .bg-sky-600 { background-color: #2946CC !important; } /* fransk remapper text-sky-500 (lys: marine) — bg-sky-500 remappes ikke av fransk-overriden, så keep-regelen over gjelder som den skal */ }