/* ============================================================================ * suite-look.css – Postfach-Design für die ganze Suite (Umbau Schritt 6, Stufe 1 „Überzug“). * Kanonische Quelle: cockpit/core/js/suite-look.css -> public/js/_core/. * Einbinden NACH tailwind.css und theme-v2.css. * * Legt Farben, Flächen und Linien des Postfachs (Stile „Hell“ und „Mitternacht“) * über die Tailwind-Klassen einer App – ohne eine einzige Ansicht anzufassen. * Hängt an – seit 14.10.2026 fest in jeder index.html (look.js), * das frühere Aussehen gibt es nicht mehr. * * Regeln: * - Gleiche Spezifität wie die Tailwind-Grundklasse (über :where), damit * hover:/focus:-Klassen der Apps weiter gewinnen. * - Schwebendes (absolute/fixed/sticky, Dialoge in #modal-root, Menüs) bleibt * DECKEND – sonst scheint Text darunter durch. * - Kein backdrop-filter auf vielen kleinen Flächen (Kalenderzellen) – das * ruckelt am Handy; Glas-Unschärfe nur an den Leisten. * - Nichts wird ausgeblendet: nur Farben, Linien, Schatten. * ========================================================================== */ :root[data-look="suite"] { --sl-bg: #f4f6f9; --sl-surface: #ffffff; --sl-surface-2: #f8fafc; --sl-surface-3: #eef2f7; --sl-solid: #ffffff; --sl-line: #e4e8ee; --sl-line-strong: #d5dbe4; --sl-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 20px rgba(15, 23, 42, .05); --sl-bar: rgba(255, 255, 255, .92); } :root.dark[data-look="suite"] { --sl-bg: radial-gradient(1200px 700px at 10% -10%, rgba(99, 102, 241, .25), transparent 60%), radial-gradient(900px 600px at 110% 10%, rgba(14, 165, 233, .18), transparent 60%), #070b16; --sl-surface: rgba(17, 24, 43, .62); --sl-surface-2: rgba(255, 255, 255, .04); --sl-surface-3: rgba(255, 255, 255, .07); --sl-solid: #0f172a; --sl-line: rgba(255, 255, 255, .08); --sl-line-strong: rgba(255, 255, 255, .14); --sl-shadow: 0 1px 2px rgba(0, 0, 0, .35); --sl-bar: rgba(9, 13, 26, .9); } /* ---- Kontrast nach WCAG AA (30.10.2026): Schriftfarben je Stil ------------- * Tailwind-Textklassen zeigen über core/tailwind-contrast.cjs auf diese Werte (RGB ohne Komma, wegen /). * Hell: Grau- und Farbschrift eine Stufe dunkler; Dunkel: blasses Grau heller. Jeder Wert schafft auf allen Flächen * der Suite mindestens 4,5:1 (gemessen mit axe, Bericht scratchpad contrast_audit.txt). */ :root { --tx-s300: 91 106 128; --tx-s400: 86 101 122; --tx-s500: 82 97 119; --tx-s600: 71 85 105; --tx-blue: var(--acc-700, 29 78 216); --tx-em: 4 120 87; --tx-green: 22 101 52; --tx-amb: 161 74 7; --tx-ora: 154 52 18; --tx-yel: 133 77 14; --tx-red: 185 28 28; --tx-rose: 190 18 60; --tx-pink: 190 24 93; --tx-ind: 67 56 202; --tx-vio: 109 40 217; --tx-sky: 3 105 161; --tx-teal: 15 118 110; } /* dunkle Fläche im hellen Stil (z. B. Prognose-Kasten der Zeiterfassung): Klasse tx-dark */ :root.dark, .tx-dark { --tx-s300: 203 213 225; --tx-s400: 148 163 184; --tx-s500: 148 163 184; --tx-s600: 148 163 184; --tx-blue: var(--acc-400, 96 165 250); --tx-em: 52 211 153; --tx-green: 74 222 128; --tx-amb: 251 191 36; --tx-ora: 251 146 60; --tx-yel: 250 204 21; --tx-red: 248 113 113; --tx-rose: 251 113 133; --tx-pink: 244 114 182; --tx-ind: 129 140 248; --tx-vio: 167 139 250; --tx-sky: 56 189 248; --tx-teal: 45 212 191; } /* ---- Grund: Farbverlauf wie im Postfach ---------------------------------- */ :root[data-look="suite"] body { background: var(--sl-bg) !important; background-attachment: fixed !important; } /* ---- Flächen (nur liegende; Schwebendes ist per :where(:not(…)) ausgenommen) ---- */ :where(:root[data-look="suite"]).dark .dark\:bg-slate-900:where(:not(.absolute, .fixed, .sticky, #modal-root *, [role="dialog"], [role="menu"], [role="listbox"])), :where(:root[data-look="suite"]).dark .dark\:bg-slate-950:where(:not(.absolute, .fixed, .sticky, #modal-root *)) { background-color: var(--sl-surface); } :where(:root[data-look="suite"]).dark .dark\:bg-slate-800:where(:not(.absolute, .fixed, .sticky, #modal-root *, [role="menu"], [role="listbox"])) { background-color: var(--sl-surface-3); } :where(:root[data-look="suite"]).dark :is(.dark\:bg-slate-800\/60, .dark\:bg-slate-800\/50, .dark\:bg-slate-800\/40, .dark\:bg-slate-800\/30):where(:not(.absolute, .fixed, .sticky, #modal-root *)) { background-color: var(--sl-surface-2); } :where(:root[data-look="suite"]:not(.dark)) .bg-slate-50:where(:not(body, .absolute, .fixed, .sticky, #modal-root *)) { background-color: var(--sl-surface-2); } /* ---- Linien und Schatten (theme-v2 hat :root.dark-Gewicht → hier gleich, aber später) ---- */ :where(:root[data-look="suite"]:not(.dark)) :is(.border-slate-200, .border-slate-100) { border-color: var(--sl-line); } :root.dark:where([data-look="suite"]) :is(.dark\:border-slate-700, .dark\:border-slate-800, .border-slate-700, .border-slate-800) { border-color: var(--sl-line); } :root.dark:where([data-look="suite"]) :is(.dark\:border-slate-800\/70, .dark\:border-slate-700\/80) { border-color: var(--sl-line); } :root.dark:where([data-look="suite"]) :is(.dark\:divide-slate-800, .dark\:divide-slate-700) > * + * { border-color: var(--sl-line); } :root.dark:where([data-look="suite"]) :is(.dark\:border-slate-600, .border-slate-600) { border-color: var(--sl-line-strong); } :where(:root[data-look="suite"]) :is(.rounded-2xl, .rounded-3xl):is(.bg-white, .dark\:bg-slate-900):where(:not(.absolute, .fixed, #modal-root *)) { box-shadow: var(--sl-shadow); } /* ---- Leisten: Glas wie die Postfach-Kopfzeile ----------------------------- */ :root[data-look="suite"] :is(#cockpit-bottom-nav, #cockpit-nav-rail) nav { /* nur die Leiste selbst – das Vollbild-Menü „Mehr“ bleibt deckend */ background: var(--sl-bar) !important; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-color: var(--sl-line) !important; } /* ========================================================================== * Rahmen 2026 (12.10.): Modulleiste links mit Beschriftung auch am PC. Eine App markiert ihren * Seiteninhalt mit [data-suite-main] (Platz für die Leiste). Die früheren Reiter oben sind seit 14.10. entfernt. * ========================================================================== */ @media (min-width: 640px) { /* über klebenden Seitenköpfen (z-30), unter Dialogen (ab z-40). view-transition-name (theme-v2.css) macht den Halter zur eigenen Ebene – deshalb den Halter selbst anheben. */ :root[data-look="suite"] #cockpit-nav-rail { position: relative; z-index: 31; } :root[data-look="suite"] #cockpit-nav-rail > nav { width: 84px; gap: 2px; z-index: 31; } :root[data-look="suite"] #cockpit-nav-rail > nav button > span:not(.absolute) { font-size: 10.5px; line-height: 1.2; font-weight: 600; } :root[data-look="suite"] #cockpit-nav-rail > nav button svg { width: 21px; height: 21px; } } @media (min-width: 1024px) { :root[data-look="suite"] #cockpit-nav-rail > nav { display: flex !important; } :root[data-look="suite"] [data-suite-main] { padding-left: 112px !important; max-width: 1440px !important; } } /* Karten-Kopf wie in der Vorschau: kleine Überschrift in Monospace, Großbuchstaben */ :root[data-look="suite"] .s26-card { border-radius: 16px; border: 1px solid var(--sl-line); background: var(--sl-surface); box-shadow: var(--sl-shadow); overflow: hidden; min-width: 0; } :root[data-look="suite"] .s26-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 8px; font: 700 10.5px/1 var(--f-body, Inter), system-ui, sans-serif; text-transform: uppercase; letter-spacing: .07em; color: #56657a; } :root[data-look="suite"] .s26-card-h a, :root[data-look="suite"] .s26-card-h button { font: 600 12.5px/1 Inter, system-ui, sans-serif; text-transform: none; letter-spacing: 0; color: #2563eb; } :root.dark[data-look="suite"] .s26-card-h { color: #94a3b8; } :root.dark[data-look="suite"] .s26-card-h a, :root.dark[data-look="suite"] .s26-card-h button { color: #93b9ff; }