/* * theme-dachtraffic.css — die drei Paletten von DACHTraffic * * Nur Werte, kein Aufbau. Die Grundfassung ist das DUNKLE Theme; hell und * barrierearm ueberschreiben, was sich unterscheidet. * * Umgeschaltet wird ueber das Attribut data-theme am -Element, gesetzt * von templates/layout.php aus der Nutzereinstellung. Das wirkt sofort, ohne * Neuladen — deshalb bleibt dieses Verfahren, statt auf den Dateitausch der * uebrigen Domains umgestellt zu werden. * * Die Namen sind dieselben wie in theme-4diget.css und theme-review.css. * Was darueber hinaus steht, ist Werkzeug-Bedarf einer Anwendung: Warn- und * Infotoene, Ueberdeckung, Feldhintergruende. Ein Inhaltsblatt braucht das * nicht, eine Oberflaeche mit Tabellen und Formularen schon. * * ------------------------------- * Autor: Martin Kornmüller * Projekt: 4digEt * Version: 1.0.0 */ :root { /* Farb-Palette */ --color-primary: #6366f1; --color-primary-dark: #4f46e5; --primary-light: rgba(99, 102, 241, 0.15); --color-success: #22c55e; --success-hover: #16a34a; --success-light: rgba(34, 197, 94, 0.15); --color-danger: #ef4444; --danger-hover: #dc2626; --danger-light: rgba(239, 68, 68, 0.15); --warning: #f59e0b; --warning-light: rgba(245, 158, 11, 0.15); --info: #38bdf8; --info-light: rgba(56, 189, 248, 0.15); /* Hintergründe */ --color-page-bg: #0d0d1a; --color-surface: #161625; --bg-card-hover: #1c1c30; --bg-input: #1e1e30; --color-surface-alt: #12121f; --bg-overlay: rgba(13, 13, 26, 0.85); /* Text */ --color-text: #e2e8f0; --color-muted: #64748b; --text-dim: #94a3b8; /* Rahmen */ --color-border: #2a2a42; --border-focus: #6366f1; /* Radien & Schatten */ --radius: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.5); /* Abstände */ --gap: 1.5rem; --gap-sm: 0.75rem; --container-max: 68.75rem; /* Übergänge */ --transition: 0.18s ease; /* ── Nur in diesem Layout gebraucht ─────────────────────────── */ --color-on-primary: #fff; /* Text auf Knopfflaeche */ --primary-border: rgba(99,102,241,0.3); /* Rahmen in Primaerton */ --primary-ring: rgba(99, 102, 241, 0.2); /* Fokusring an Feldern */ --bg-tint: rgba(255,255,255,0.03); /* Tabellenkopf */ --border-soft: rgba(42,42,66,0.6); /* Zeilentrenner */ --muted-tint: rgba(100,116,139,0.2); /* neutrale Plakette */ --overlay-strong: rgba(5, 5, 18, 0.93); /* Ueberdeckung Surf */ /* Text in den Hinweisboxen. Bewusst heller als --color-success und Geschwister: der Kasten liegt auf einem 15-%-Farbschleier ueber dunklem Grund. ACHTUNG — im hellen und im barrierearmen Theme fehlt bisher eine Entsprechung, dort steht dieser helle Ton auf hellem Grund. Siehe _dokus/basic/theme-variablen.md, Schritt 4. */ --success-text: #86efac; --danger-text: #fca5a5; --warning-text: #fcd34d; --info-text: #7dd3fc; } :root[data-theme="light"] { /* Hinweistext: im hellen Theme lag hier bisher der helle Ton des dunklen Themes auf hellem Grund — 1,28:1 bis 1,55:1, faktisch unlesbar. Diese Werte erreichen 6,4:1 bis 6,8:1. */ --success-text: #166534; --danger-text: #991b1b; --warning-text: #92400e; --info-text: #075985; --primary-border: rgba(79, 70, 229, 0.3); --bg-tint: rgba(0, 0, 0, 0.04); --border-soft: rgba(226, 232, 240, 0.8); --overlay-strong: rgba(15, 23, 42, 0.80); --color-primary: #4f46e5; --color-primary-dark: #4338ca; --primary-light: #ede9fe; --color-success: #16a34a; --success-hover: #15803d; --success-light: #dcfce7; --color-danger: #dc2626; --danger-hover: #b91c1c; --danger-light: #fee2e2; --warning: #d97706; --warning-light: #fef3c7; --info: #0284c7; --info-light: #e0f2fe; --color-page-bg: #f8fafc; --color-surface: #ffffff; --bg-card-hover: #f1f5f9; --bg-input: #ffffff; --color-surface-alt: #ffffff; --bg-overlay: rgba(248, 250, 252, 0.92); --color-text: #0f172a; --color-muted: #64748b; --text-dim: #475569; --color-border: #e2e8f0; --border-focus: #4f46e5; --shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.10); } :root[data-theme="accessible"] { /* Hinweistext, hier auf AAA gerechnet: 7,6:1 bis 9,9:1. */ --success-text: #004d00; --danger-text: #8f0000; --warning-text: #734000; --info-text: #003a5f; --bg-tint: #dddddd; --border-soft: #cccccc; --color-primary: #0055cc; --color-primary-dark: #003fa3; --primary-light: #dce8ff; --color-success: #006600; --success-hover: #004d00; --success-light: #d4f8d4; --color-danger: #bb0000; --danger-hover: #8f0000; --danger-light: #ffd4d4; --warning: #a65e00; --warning-light: #fff0d0; --info: #004f82; --info-light: #d4eeff; --color-page-bg: #ffffff; --color-surface: #f5f5f5; --bg-card-hover: #e8e8e8; --bg-input: #ffffff; --color-surface-alt: #f0f0f0; --bg-overlay: rgba(255, 255, 255, 0.96); --color-text: #000000; --color-muted: #333333; --text-dim: #1a1a1a; --color-border: #555555; --border-focus: #0055cc; --radius: 0.375rem; --shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.22); }