/* Farben fuer helle und dunkle Ansicht - eine Stelle fuer alle Seiten. Die Seiten selbst nennen keine Farbwerte mehr, sondern nur diese Namen. Umgeschaltet wird ueber data-thema am -Element (siehe thema.js); ohne Angabe folgt die Seite der Einstellung des Systems. */ :root { color-scheme: light; --bg:#f4f5f6; /* Seitenhintergrund */ --flaeche:#ffffff; /* Karten, Kopf, Fuss, Tabellen */ --flaeche2:#fafafa; /* leicht abgesetzt: Kartenkopf, Knoepfe */ --linie:#dcdcdc; --linie-leicht:#eeeeee; --text:#1e1e1e; --muted:#666666; --gedimmt:#555555; --blass:#888888; --feld:#ffffff; /* Eingabefelder */ --feld-linie:#bbbbbb; --knopf:#fafafa; --knopf-linie:#9a9a9a; --hover:#eeeeee; --hover-blau:#f2f7ff; --buehne:#e9eaec; /* Flaeche hinter dem Bild im Editor */ --balken:#e3e3e3; --schatten:rgba(0,0,0,.25); --akzent:#1e6fd9; --akzent-rand:#1a5fb8; --akzent-hover:#195fc0; --akzent-text:#14509c; /* Akzent als Schrift auf hellem Grund */ --gruen:#16a34a; --gruen-rand:#128a3c; --grau-bg:#f1f1f1; --grau-text:#555555; --gelb-bg:#fff3cd; --gelb-text:#8a6100; --gruen-bg:#d9f2e0; --gruen-text:#1c6b3a; --blau-bg:#d7e7ff; --blau-text:#14509c; --rot-bg:#fadada; --rot-text:#8a1c1c; --warn-bg:#fff8e5; --warn-linie:#f0d999; --warn-rand:#e0a800; --warn-text:#5f4906; } :root[data-thema="dunkel"] { color-scheme: dark; --bg:#15181b; --flaeche:#1e2226; --flaeche2:#252a2f; --linie:#3a4046; --linie-leicht:#2c3237; --text:#e6e8ea; --muted:#9aa3ab; --gedimmt:#a7b0b7; --blass:#7f888f; --feld:#14171a; --feld-linie:#4a5157; --knopf:#2a3035; --knopf-linie:#4a5157; --hover:#343b41; --hover-blau:#1d2a38; --buehne:#0e1113; --balken:#333a40; --schatten:rgba(0,0,0,.65); --akzent:#3b82f6; --akzent-rand:#2f6fd0; --akzent-hover:#2f6fd0; --akzent-text:#9cc4ff; --gruen:#22a55a; --gruen-rand:#1b8a4b; --grau-bg:#2c3237; --grau-text:#b9c0c6; --gelb-bg:#43350f; --gelb-text:#f0c976; --gruen-bg:#13341f; --gruen-text:#7fdca0; --blau-bg:#162c47; --blau-text:#9cc4ff; --rot-bg:#3d1b1b; --rot-text:#f0a3a3; --warn-bg:#332a0f; --warn-linie:#5c4a15; --warn-rand:#c69700; --warn-text:#e8cf90; } /* Der Umschalter selbst - auf jeder Seite oben links */ button#thema { padding:6px 9px; line-height:1; font-size:15px; min-width:34px; background:var(--knopf); border:1px solid var(--knopf-linie); border-radius:5px; cursor:pointer; color:var(--text); flex:none; } button#thema:hover { background:var(--hover); } /* Firmenzeichen oben links. Die weissen Anteile des Logos sind durchsichtig, darum nehmen sie in der dunklen Ansicht die Farbe des Kopfes an und stechen nicht heraus; das Orange bleibt unveraendert. */ a.logo { display:flex; flex:none; line-height:0; margin-right:2px; } a.logo img { height:22px; width:auto; display:block; } /* Wortmarke cernota.net, transparent - passt zu hell und dunkel */