/** * Gemeinsame Farb-Token der web-net tools — hell und dunkel. * * Reihenfolge ist wichtig: * 1. :root -> Dunkel als Grundlage * 2. @media (prefers-color-scheme: light) auf :root:not([data-theme]) * -> folgt dem System, solange nichts gewählt ist * 3. [data-theme="light"|"dark"] -> überschreibt die Systemvorgabe * * assets/js/theme.js setzt data-theme am -Element, bevor gerendert wird. * Ohne Attribut gilt die Systemeinstellung — das ist der Auslieferungszustand. */ :root { color-scheme: dark; --os-bg: #050505; /* Seitenhintergrund */ --os-panel: #0f1012; /* Karten und Panels */ --os-field: #16181d; /* Eingabefelder, abgesetzte Flächen */ --os-elev: #0a0a0a; /* Startfarbe der Kopfverläufe */ --os-border: #1f2229; --os-text: #a1a1aa; /* Fließtext */ --os-heading: #ffffff; /* Überschriften, Werte, aktive Eingaben */ --os-muted: #8a91a0; /* Hinweise, Nebensätze (>=4.5:1 auf Panel) */ --os-accent: #00f3ff; --os-accent-soft: rgba(0, 243, 255, 0.12); --os-accent-glow: rgba(0, 243, 255, 0.15); --os-grid: rgba(0, 243, 255, 0.03); /* Rasterlinien im Hintergrund */ --os-error: #ff4d4d; --os-success: #00ff00; --os-warning: #ff9d00; --os-checker: repeating-conic-gradient(#2a2d34 0% 25%, #16181d 0% 50%) 50% / 16px 16px; --logo-filter: invert(1) brightness(2); /* Altname: die Seiten sprechen den Hintergrund noch als --os-black an. */ --os-black: var(--os-bg); /* Tokens der übergeordneten msecurity-Stylesheets mitziehen, damit Fremdregeln (Modal, Footer) nicht im alten Farbschema hängen bleiben. */ --bg2: var(--os-field); --bg3: var(--os-panel); --text: var(--os-text); --text-muted: var(--os-muted); --border: var(--os-border); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --os-bg: #f4f5f7; --os-panel: #ffffff; --os-field: #eef0f4; --os-elev: #e7eaef; --os-border: #d3d7de; --os-text: #4a5568; --os-heading: #0b1220; --os-muted: #667085; --os-accent: #0b6e85; --os-accent-soft: rgba(11, 110, 133, 0.10); --os-accent-glow: rgba(11, 110, 133, 0.22); --os-grid: rgba(11, 110, 133, 0.07); --os-error: #c0392b; --os-success: #0a7d33; --os-warning: #b26a00; --os-checker: repeating-conic-gradient(#dfe3e9 0% 25%, #f6f7f9 0% 50%) 50% / 16px 16px; --logo-filter: none; } } :root[data-theme="light"] { color-scheme: light; --os-bg: #f4f5f7; --os-panel: #ffffff; --os-field: #eef0f4; --os-elev: #e7eaef; --os-border: #d3d7de; --os-text: #4a5568; --os-heading: #0b1220; --os-muted: #667085; --os-accent: #0b6e85; --os-accent-soft: rgba(11, 110, 133, 0.10); --os-accent-glow: rgba(11, 110, 133, 0.22); --os-grid: rgba(11, 110, 133, 0.07); --os-error: #c0392b; --os-success: #0a7d33; --os-warning: #b26a00; --os-checker: repeating-conic-gradient(#dfe3e9 0% 25%, #f6f7f9 0% 50%) 50% / 16px 16px; --logo-filter: none; } :root[data-theme="dark"] { color-scheme: dark; /* entspricht der Grundlage in :root — hier nur der Vollständigkeit halber, damit eine erzwungene Dunkelwahl die Systemvorgabe sicher schlägt. */ } /* --- Umschalter ------------------------------------------------------- */ .themeToggle { /* width/height/margin ausdrücklich zurücksetzen: die Login- und MFA-Seiten setzen `button { width: 100% }`, was den Schalter sonst über die ganze Breite zieht. */ width: auto; height: auto; margin: 0; background: transparent; border: 1px solid var(--os-accent); color: var(--os-accent); font-family: inherit; font-weight: 400; font-size: 0.75rem; padding: 6px 14px; cursor: pointer; line-height: 1.4; transition: box-shadow 0.3s ease, background 0.2s ease, color 0.2s ease; white-space: nowrap; } .themeToggle:hover { box-shadow: 0 0 15px var(--os-accent-glow); } /* Seiten ohne Navigationsleiste (Login, MFA) bekommen den Schalter frei schwebend in die Ecke gesetzt. */ .themeToggle.floating { position: fixed; top: 16px; right: 16px; z-index: 999; background: var(--os-panel); } @media (prefers-reduced-motion: reduce) { .themeToggle { transition: none; } } /* --- Nachbesserungen an Fremd-Stylesheets ------------------------------ Die Fußzeilen-Links kommen aus dem msecurity-Stylesheet und lagen im dunklen Schema bei 2.4:1. */ .footer-copy a { color: var(--os-accent); }