/* ============================================================================ werkflow.css — das gemeinsame Fundament fuer ALLE Seiten und Module. WARUM ES DAS GIBT Vorher brachte fast jede Seite ihre eigenen Farben mit: 26 von 39 Seiten hatten einen eigenen :root-Block, 58 verschiedene Variablennamen waren im Umlauf, 25 davon mit mehreren Werten - --border allein in acht Fassungen. Folge: Jede Aenderung am Aussehen musste in jeder Datei einzeln gemacht werden, und regelmaessig blieb eine Flaeche dunkel, weil irgendwo ein Name fehlte. WIE ES WIRKT 1. :root setzt ALLE Namen mit den Werten, die sich im Bestand durchgesetzt haben. Damit hat jede Seite eine vollstaendige Grundlage - auch fuer Namen, die sie selbst nicht definiert. 2. html[data-theme="light"] ist ein Attributselektor und damit staerker als jedes :root - auch als das einer einzelnen Seite. Deshalb wirkt das helle Schema ueberall, ohne dass eine Seite angefasst werden muss. 3. Umschalten heisst nur noch: das Attribut aendern. Kein Einspritzen von Inline-Werten, kein Neuladen. WEG DAHIN Seiten duerfen ihren eigenen :root vorerst behalten - sie ueberschreiben dann nur die Namen, die sie selbst nennen. Nach und nach werden diese Bloecke entfernt, jede Seite einzeln geprueft. Kein grosser Wurf auf einmal. ========================================================================== */ :root { /* ── Flaechen ─────────────────────────────────────────────────── */ --bg: #0a0a14; /* Seitenhintergrund */ --bg2: #12121f; /* Karten, Kopfzeilen */ --bg3: #16162a; /* hervorgehobene Flaechen */ --surface: #13131f; --surface2: #181826; --card: #12121f; --panel: #12121f; --panel2: #1a1a2e; --input-bg: #0d0d1a; /* Eingabefelder */ /* ── Schrift ──────────────────────────────────────────────────── */ --text: #e8e8f0; --txt: #e8e8f0; /* gleicher Zweck, anderer Name im Bestand */ --white: #f9fafb; /* wird als Schriftfarbe benutzt, nicht als Flaeche */ --muted: #8888a0; --text-muted: #8888a0; --amber: #ffb700; /* gleicher Zweck, anderer Name im Bestand */ --muted2: #6b7280; --dim: #6b7280; --faint: rgba(255,255,255,.28); /* ── Linien ───────────────────────────────────────────────────── */ --border: #1e1e2e; --line: #1d1d2e; /* ── Bedeutungsfarben (in beiden Modi gleich) ─────────────────── */ --cyan: #00f5ff; --accent: #00f5ff; --teal: #00f5ff; --green: #00ff88; --success: #00cc88; --yellow: #ffe033; --orange: #ff8c00; --red: #ff4466; --error: #ff4466; --danger: #ef4444; --purple: #a371f7; /* ── Masse ────────────────────────────────────────────────────── */ --r: 12px; --r-sm: 8px; --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', 'IBM Plex Mono', monospace; } /* ============================================================================ HELLES SCHEMA Attributselektor am : staerker als jedes :root, auch als das einer einzelnen Seite. Deshalb greift es ueberall, ohne Eingriff in die Seiten. Die Bedeutungsfarben bleiben unveraendert - Gruen heisst in beiden Modi erledigt, Rot heisst Fehler. ========================================================================== */ html[data-theme="light"], html[data-theme="clean-light"] { --bg: #f5f6f8; --bg2: #ffffff; --bg3: #eceef1; --surface: #ffffff; --surface2: #eceef1; --card: #ffffff; --panel: #ffffff; --panel2: #eceef1; --input-bg: #ffffff; --text: #191b21; --txt: #191b21; --white: #191b21; --muted: rgba(0,0,0,.62); --text-muted: rgba(0,0,0,.62); --amber: #b06f00; /* dunkler, damit es auf hellem Grund lesbar bleibt */ --muted2: rgba(0,0,0,.60); --dim: #5b6472; --faint: rgba(0,0,0,.28); --border: rgba(0,0,0,.10); --line: rgba(0,0,0,.08); color-scheme: light; } html[data-theme="werkflow-dark"], html[data-theme="dark"] { color-scheme: dark; } /* ============================================================================ WIEDERKEHRENDE BAUSTEINE Damit eine Aenderung an einem Knopf kuenftig EINE Aenderung ist und nicht 137 Inline-Angaben in 19 Modulen. ========================================================================== */ /* Zurueck-Knopf: volle Tuerkisflaeche, schwarze Schrift, sichere Trefferflaeche. Beide Namen, weil im Bestand zwei Klassen nebeneinander existieren. */ .wf-back, .back { display: inline-flex; align-items: center; gap: 6px; background: var(--cyan); color: #000; text-decoration: none; font-size: 14px; font-weight: 700; line-height: 1; padding: 12px 18px; min-height: 44px; /* uebliche Mindestgroesse fuer Finger */ border: none; border-radius: var(--r-sm); white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .wf-back:hover, .back:hover { filter: brightness(1.08); } .wf-back:active, .back:active { filter: brightness(.92); }