/* =========================================================================== dunkel.css - dunkle Fassung --------------------------------------------------------------------------- Überschreibt ausschliesslich Farben, nie den Aufbau. Wird als letzte Datei geladen. Zwei Fälle, absichtlich getrennt: 1. ausdrücklich gewählt 2. kein data-farbe und das Gerät steht auf dunkel Wer ausdrücklich "hell" gewählt hat, bekommt nie die dunkle Fassung, auch wenn das Gerät dunkel eingestellt ist. Deshalb die Bedingung :root:not([data-farbe="hell"]) im zweiten Fall. Ausgenommen bleiben: die GHS-Raute (amtliches Rot auf Weiss), der QR-Code (muss schwarz auf weiss bleiben, sonst lesen ihn manche Geräte nicht) und der Ausdruck. ========================================================================= */ :root[data-farbe="dunkel"] { --hg:#14121c; --flaeche:#1c1a27; --flaeche2:#252233; /* feste-farbe-ok: definiert die Farbwelt selbst */ --rand:#343044; --rand-fein:#2a2737; /* feste-farbe-ok: definiert die Farbwelt selbst */ --text:#ece9f5; --schwach:#a29cba; /* feste-farbe-ok: definiert die Farbwelt selbst */ --akzent:#a98bff; --akzent-text:#14121c; /* feste-farbe-ok: definiert die Farbwelt selbst */ --dunkel:#0f0d17; --dunkel-flaeche:#1c1a27; --dunkel-text:#ffffff; --dunkel-schwach:#a29cba; /* feste-farbe-ok: definiert die Farbwelt selbst */ --erfolg:#4bbd7c; --warn:#e0a23a; --fehler:#f0705f; /* feste-farbe-ok: definiert die Farbwelt selbst */ --schatten:0 3px 14px rgba(0,0,0,.45); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-farbe="hell"]) { --hg:#14121c; --flaeche:#1c1a27; --flaeche2:#252233; /* feste-farbe-ok: definiert die Farbwelt selbst */ --rand:#343044; --rand-fein:#2a2737; /* feste-farbe-ok: definiert die Farbwelt selbst */ --text:#ece9f5; --schwach:#a29cba; /* feste-farbe-ok: definiert die Farbwelt selbst */ --akzent:#a98bff; --akzent-text:#14121c; /* feste-farbe-ok: definiert die Farbwelt selbst */ --dunkel:#0f0d17; --dunkel-flaeche:#1c1a27; --dunkel-text:#ffffff; --dunkel-schwach:#a29cba; /* feste-farbe-ok: definiert die Farbwelt selbst */ --erfolg:#4bbd7c; --warn:#e0a23a; --fehler:#f0705f; /* feste-farbe-ok: definiert die Farbwelt selbst */ --schatten:0 3px 14px rgba(0,0,0,.45); color-scheme: dark; } } /* Die zarten Zustandstöne werden in der dunklen Fassung kräftiger gemischt, sonst sind sie auf dunklem Grund nicht zu sehen. */ :root[data-farbe="dunkel"] { --ton-akzent: color-mix(in srgb, var(--akzent) 18%, var(--flaeche)); --ton-fehler: color-mix(in srgb, var(--fehler) 18%, var(--flaeche)); --ton-warn: color-mix(in srgb, var(--warn) 20%, var(--flaeche)); --ton-ok: color-mix(in srgb, var(--erfolg) 18%, var(--flaeche)); } @media (prefers-color-scheme: dark) { :root:not([data-farbe="hell"]) { --ton-akzent: color-mix(in srgb, var(--akzent) 18%, var(--flaeche)); --ton-fehler: color-mix(in srgb, var(--fehler) 18%, var(--flaeche)); --ton-warn: color-mix(in srgb, var(--warn) 20%, var(--flaeche)); --ton-ok: color-mix(in srgb, var(--erfolg) 18%, var(--flaeche)); } } /* --- Was dunkel NICHT wird ------------------------------------------------ */ /* Die GHS-Raute ist amtlich rot auf weiss. Sie bleibt es. */ :root[data-farbe="dunkel"] .raute--leer, :root[data-farbe="dunkel"] .g-karte__zeichen img { background: #fff; } /* feste-farbe-ok: GHS und QR bleiben weiss */ /* QR-Codes brauchen schwarz auf weiss, sonst scheitern manche Leser. */ :root[data-farbe="dunkel"] .g-etikett, :root[data-farbe="dunkel"] .tablet__qr { background: #fff; } /* feste-farbe-ok: GHS und QR bleiben weiss */ :root[data-farbe="dunkel"] .g-etikett b, :root[data-farbe="dunkel"] .g-etikett small { color: #1a1a1a; } /* feste-farbe-ok: Text auf weissem Etikett */ @media (prefers-color-scheme: dark) { :root:not([data-farbe="hell"]) .raute--leer, :root:not([data-farbe="hell"]) .g-karte__zeichen img { background: #fff; } /* feste-farbe-ok: GHS und QR bleiben weiss */ :root:not([data-farbe="hell"]) .g-etikett, :root:not([data-farbe="hell"]) .tablet__qr { background: #fff; } /* feste-farbe-ok: GHS und QR bleiben weiss */ :root:not([data-farbe="hell"]) .g-etikett b, :root:not([data-farbe="hell"]) .g-etikett small { color: #1a1a1a; } /* feste-farbe-ok: Text auf weissem Etikett */ } /* Gedruckt wird immer hell: sonst ist die Patrone nach zwei Blättern leer. */ @media print { :root, :root[data-farbe="dunkel"] { --hg:#ffffff; --flaeche:#ffffff; --flaeche2:#ffffff; /* feste-farbe-ok: definiert die Farbwelt selbst */ --text:#000000; --schwach:#444444; /* feste-farbe-ok: definiert die Farbwelt selbst */ --rand:#999999; --rand-fein:#cccccc; /* feste-farbe-ok: definiert die Farbwelt selbst */ } }