/* theme.css — einzige Quelle fuer die Farbrollen von hatetime (Hell und Dunkel). Werte kommen aus design-tokens.md: erst dort eintragen, dann hier. Umschaltung: - ohne data-theme folgt die Seite dem System (prefers-color-scheme) - data-theme="hell" bzw. "dunkel" auf erzwingt eine Seite theme.js setzt das Attribut noch im , also vor dem ersten Paint. Ohne JS bleibt der System-Pfad — deshalb steht der Dunkel-Block zweimal. */ :root{ color-scheme:light; --paper:#F4F5F2; --card:#FFFFFF; --ink:#1D2733; --muted:#63707E; --line:#DCE1E6; --accent:#2C4BDB; --accent-dunkel:#20389F; --auf-akzent:#FFFFFF; --gruen:#217A46; --gelb:#B27A0D; --rot:#BE2F24; --gruen-bg:#E4F2E9; --gelb-bg:#F7EDD8; --rot-bg:#F8E4E2; --neutral-bg:#ECEEF0; --e1:0 1px 2px rgba(29,39,51,.04), 0 8px 24px rgba(29,39,51,.05); --mono:ui-monospace,"Cascadia Mono",Consolas,monospace; /* Deckkraft, mit der eine Kundenfarbe als Blockflaeche eingemischt wird. Dunkel braucht mehr, sonst verschwindet der Farbton im Hintergrund. */ --kunde-tint:15%; } @media (prefers-color-scheme: dark){ :root:not([data-theme="hell"]){ color-scheme:dark; --paper:#14181D; --card:#1C222A; --ink:#E4E9EF; --muted:#94A2B1; --line:#2E3742; --accent:#7C97F7; --accent-dunkel:#9BB0FA; --auf-akzent:#0F1420; --gruen:#5FCB8E; --gelb:#E2B054; --rot:#F0736A; --gruen-bg:#172C23; --gelb-bg:#2E2718; --rot-bg:#341F1E; --neutral-bg:#242B34; --e1:0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.38); --kunde-tint:24%; } } :root[data-theme="dunkel"]{ color-scheme:dark; --paper:#14181D; --card:#1C222A; --ink:#E4E9EF; --muted:#94A2B1; --line:#2E3742; --accent:#7C97F7; --accent-dunkel:#9BB0FA; --auf-akzent:#0F1420; --gruen:#5FCB8E; --gelb:#E2B054; --rot:#F0736A; --gruen-bg:#172C23; --gelb-bg:#2E2718; --rot-bg:#341F1E; --neutral-bg:#242B34; --e1:0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.38); --kunde-tint:24%; } /* Autofill: Chrome malt ein vom Passwortmanager gefuelltes Feld hellblau (UA-Farbe, schlaegt sogar die eigene background-Angabe) - color-scheme deckt das NICHT ab. Ueberschreiben geht nicht, verdecken schon: uebergrosser Inset-Schatten. -webkit-text-fill-color, weil color im Autofill-Zustand ebenfalls ersetzt wird; caret-color, sonst ist der Cursor unsichtbar. Steht hier und nicht in den Seiten, obwohl es eine Komponentenregel ist: es ist dieselbe Aufgabe wie color-scheme - browsereigene Malerei den Rollen unterwerfen - und in zwei Dateien kopiert waere es genau die Drift, die theme.css beendet. Sichtbar wird der Fall erst auf der deployten Seite: fuer 127.0.0.1 hat der Passwortmanager keinen Eintrag, der Zustand entsteht lokal nie. */ input:-webkit-autofill, input:-webkit-autofill:hover{ -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 1000px var(--paper) inset; box-shadow:0 0 0 1000px var(--paper) inset; caret-color:var(--ink); } input:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px var(--card) inset; /* wie input:focus */ box-shadow:0 0 0 1000px var(--card) inset; }