/* ============================================================ theme.css — Die Farben der Plattform, an einer Stelle. Wird als LETZTES im geladen, damit die Werte hier die Farbdefinitionen der einzelnen Seiten überschreiben. Die Kennzeichnung html[data-theme="…"] hat höhere Spezifität als das :root der Seiten — deshalb gewinnt sie zuverlässig. Was jede Seite selbst behalten darf: --acc, --acc2 und eigene Sonderfarben (Tomatenrot, Blattgrün …) Was von hier kommt: Hintergründe, Flächen, Linien, Schrift — also alles, wovon abhängt, ob eine Seite in beiden Modi lesbar ist. ============================================================ */ /* ============ Dunkel ============ */ :root, html[data-theme="dark"] { --bg: #0b0f0e; --bg2: #101614; --card: rgba(255, 255, 255, .048); --card2: #151c1a; --panel: rgba(255, 255, 255, .04); --panel2: #171f1c; --line: rgba(255, 255, 255, .105); --line2: rgba(255, 255, 255, .16); --txt: #e8efec; --muted: #94a49e; --ok: #34d399; --bad: #fb7185; --warn: #f0b429; --shadow: 0 18px 44px -22px rgba(0, 0, 0, .8); --ring: rgba(20, 184, 166, .30); /* Schrift auf farbigen Flächen — in beiden Modi weiß, weil die Akzentfarben dunkel genug sind */ --onacc: #ffffff; color-scheme: dark; } /* ============ Hell ============ */ html[data-theme="light"] { --bg: #f3f6f5; --bg2: #e9efed; --card: #ffffff; --card2: #ffffff; --panel: #ffffff; --panel2: #ffffff; --line: rgba(16, 42, 36, .13); --line2: rgba(16, 42, 36, .22); --txt: #0f1c19; --muted: #566860; --ok: #15803d; --bad: #dc2626; --warn: #b45309; --shadow: 0 12px 30px -18px rgba(16, 42, 36, .34); --ring: rgba(14, 148, 136, .22); --onacc: #ffffff; color-scheme: light; } /* ============ Grundlagen ============ */ html[data-theme] body { background: var(--bg); color: var(--txt); } /* Sanft umschalten, aber nichts anderes verlangsamen */ html[data-theme] body, html[data-theme] :where(.card, .panel, .kpi, .tile, .scard, .mod, .ex, .abo, .op, .tx) { transition: background-color .22s ease, border-color .22s ease, color .22s ease; } @media (prefers-reduced-motion: reduce) { html[data-theme] * { transition: none !important; } } /* ============ Eigener Farbstich je Modul ============ Jede Seite hat ihre Akzentfarbe (--acc). Ein winziger Anteil davon wandert in die Flächen — so behält Pomodoro seinen warmen Ton und der Planer seinen kühlen, ohne dass ein Modus unlesbar wird. Browser ohne color-mix bekommen einfach die neutralen Flächen. */ @supports (background: color-mix(in srgb, red 5%, blue)) { html[data-theme="dark"] { --card: color-mix(in srgb, var(--acc, #14b8a6) 6%, rgba(255, 255, 255, .045)); --card2: color-mix(in srgb, var(--acc, #14b8a6) 5%, #151c1a); --bg: color-mix(in srgb, var(--acc, #14b8a6) 3%, #0b0f0e); --bg2: color-mix(in srgb, var(--acc, #14b8a6) 4%, #101614); } html[data-theme="light"] { --card2: color-mix(in srgb, var(--acc, #0e9488) 2%, #ffffff); --card: color-mix(in srgb, var(--acc, #0e9488) 2%, #ffffff); --bg: color-mix(in srgb, var(--acc, #0e9488) 4%, #f3f6f5); --bg2: color-mix(in srgb, var(--acc, #0e9488) 6%, #e9efed); } } /* ============ Flächen ============ */ html[data-theme] :where( .card, .panel, .kpi, .tile, .scard, .mod, .ex, .abo, .op, .box, .modal .box, .gate .box, .lib-folder, .msheet .sh, .accrow, .bk-box, .pl-box, .sk-box, .pn-box, #rcFloat, .tutor-panel, .lpx-panel ) { background: var(--card2); border-color: var(--line); color: var(--txt); } html[data-theme] :where(.card, .panel, .kpi, .tile) { box-shadow: var(--shadow); } /* Halbtransparente Flächen über dem Hintergrund */ html[data-theme] :where(.app, .ht-card, .catrow, .bud, .rc-k, .pl2-stage) { border-color: var(--line); } html[data-theme="dark"] :where(.app, .ht-card, .rc-k, .pl2-stage) { background: var(--card); } html[data-theme="light"] :where(.app, .ht-card, .rc-k, .pl2-stage) { background: #fff; } /* Trennlinien */ html[data-theme] :where(hr, .catrow, .tx, .abo, .op, .divider:before, .divider:after) { border-color: var(--line); } /* ============ Schrift ============ */ html[data-theme] :where(h1, h2, h3, h4, b, strong) { color: var(--txt); } html[data-theme] :where(.muted, .sub, .hint, small, .z, .s, .l, .lbl, .empty, .tipp) { color: var(--muted); } /* Verläufe in Überschriften abschalten — die sehen nur in einem Modus gut aus */ html[data-theme] :where(h1, h2) { -webkit-text-fill-color: currentColor; } /* Auswahl und Fokus */ html[data-theme] ::selection { background: var(--ring); color: var(--txt); } html[data-theme] :where(input, select, textarea, button, a, [tabindex]):focus-visible { outline: 2px solid var(--acc, #0e9488); outline-offset: 2px; } /* ============ Eingabefelder ============ */ html[data-theme] :where(input, select, textarea) { color: var(--txt); border-color: var(--line); font-family: inherit; } html[data-theme="dark"] :where(input, select, textarea) { background: rgba(255, 255, 255, .05); } html[data-theme="light"] :where(input, select, textarea) { background: #fff; } html[data-theme] :where(input, select, textarea):focus { border-color: var(--acc, #0e9488); box-shadow: 0 0 0 3px var(--ring); outline: none; } html[data-theme="dark"] ::placeholder { color: rgba(255, 255, 255, .34); } html[data-theme="light"] ::placeholder { color: rgba(16, 42, 36, .38); } /* Datum- und Zeitfelder: das Kalendersymbol muss sichtbar bleiben */ html[data-theme="dark"] :where(input[type="date"], input[type="time"], input[type="month"])::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.65); } /* ============ Knöpfe und Pillen ============ */ html[data-theme] :where(.pill, .back, .tag, .chip, .ghost, .tab, .seg button, .filter button, .tbtn) { color: var(--txt); border-color: var(--line); } html[data-theme="dark"] :where(.pill, .back, .tag, .chip, .ghost, .tbtn) { background: rgba(255, 255, 255, .055); } html[data-theme="light"] :where(.pill, .back, .tag, .chip, .ghost, .tbtn) { background: #fff; } /* Aktive/gefüllte Knöpfe: Schrift immer gut lesbar auf der Akzentfarbe */ html[data-theme] :where(.back.pri, .add, .go, .btn.prim, .save, .tabs button.on, .rc-tab.on, .pl2-tools button.on, .lp-tabbar .on) { color: #fff; } html[data-theme="light"] :where(.add, .go, .btn.prim, .save) { color: #fff; } /* ============ Bildschirmhintergrund ============ */ /* Die Farbverläufe hinter dem Inhalt sind im Hellmodus zu bunt */ html[data-theme="light"] .bgfx { opacity: .55; } html[data-theme="light"] :where(.aurora, .grain) { opacity: .35; } html[data-theme="dark"] .bgfx { opacity: 1; } /* ============ Bildlaufleisten ============ */ html[data-theme] :where(*)::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme] :where(*)::-webkit-scrollbar-track { background: transparent; } html[data-theme] :where(*)::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } html[data-theme="dark"] :where(*)::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .16); } html[data-theme="light"] :where(*)::-webkit-scrollbar-thumb { background-color: rgba(16, 42, 36, .20); } html[data-theme] :where(*)::-webkit-scrollbar-thumb:hover { background-color: var(--acc, #0e9488); } /* ============ Einzelfälle, die sonst umkippen ============ */ /* Der Notch-/Fokus-Bereich im Pomodoro ist absichtlich immer dunkel */ html[data-theme="light"] :where(.zen, .zen *) { color: #fff; } /* Diagramme: Balken und Gitter brauchen in beiden Modi Kontrast */ html[data-theme] :where(.bars .b, .bud .track i, .catrow .bar i) { opacity: 1; } html[data-theme="light"] :where(.bars .lbl) { color: var(--muted); } /* Umschalt-Knopf */ html[data-theme] .lp-theme-float { background: var(--card2); color: var(--txt); border-color: var(--line); box-shadow: var(--shadow); } /* Untere Leiste auf dem Handy */ html[data-theme] .lp-tabbar { background: var(--card2); border-top-color: var(--line); } /* Rechner und Plotter */ html[data-theme] :where(.rc-out, .pl2-read, .pl2-tab th) { border-color: var(--line); } html[data-theme="dark"] .rc-out { background: rgba(255, 255, 255, .04); } html[data-theme="light"] .rc-out { background: #f7faf9; } /* Marken-Schriftzug */ html[data-theme] :where(.brandline, .lp-lockup .lp-nm) { color: var(--txt); } html[data-theme] :where(.brandclaim, .lp-lockup .lp-cl) { color: var(--muted); } /* Weißer Text auf hellem Grund verhindern (häufigste Ursache für „unlesbar im Hellmodus") */ html[data-theme="light"] :where(.tx .p, .op .p, .abo .p, .kpi .v, .mnav .m, .rc-st, .pl2-h, .sk-t, .ht-big) { color: var(--txt); } /* … und umgekehrt im Dunkelmodus */ html[data-theme="dark"] :where(.tx .p, .op .p, .abo .p, .kpi .v, .mnav .m, .rc-st, .pl2-h, .sk-t, .ht-big) { color: var(--txt); }