/** * Cronmanager Web UI – Brand CSS (v2 · Light + Dark Mode) * * Defines the Cronmanager design system: CSS custom properties, base styles, * Tailwind utility-class overrides, and brand-specific component helpers. * Both modes use the same gradient brand — only the context changes. * * Rules use !important throughout to beat Tailwind's generated specificity. * * @author Christian Schulz * @license GNU General Public License version 3 or later */ /* ── Google Fonts ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap'); /* ══════════════════════════════════════════════════════════════════════════ 1. MARKENFARBEN — modusunabhängig, niemals überschreiben ══════════════════════════════════════════════════════════════════════════ */ :root { --cm-violet: #c084fc; --cm-indigo: #818cf8; --cm-sky: #38bdf8; --cm-grad: linear-gradient(135deg, #c084fc, #818cf8, #38bdf8); --cm-success: #34d399; --cm-danger: #f87171; --cm-warning: #fbbf24; --cm-info: #38bdf8; } /* ══════════════════════════════════════════════════════════════════════════ 2. DARK MODE — Standard/Fallback (dark ist der primäre Modus) ══════════════════════════════════════════════════════════════════════════ */ :root, .theme-dark { --cm-bg-deep: #080812; --cm-bg-dark: #0d0d1f; --cm-bg-card: #12122a; --cm-bg-elevated: #17173a; --cm-border: #1e1e40; --cm-border-focus: #818cf8; --cm-text: #f0f0ff; --cm-muted: #8888bb; --cm-faint: #44446a; } /* ══════════════════════════════════════════════════════════════════════════ 3. LIGHT MODE — OS-Präferenz (ohne manuellen Override) ══════════════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: light) { :root:not(.theme-dark) { --cm-bg-deep: #f4f4fb; --cm-bg-dark: #ffffff; --cm-bg-card: #ffffff; --cm-bg-elevated: #f0f2ff; --cm-border: #ddddf0; --cm-border-focus: #818cf8; --cm-text: #1a1a2e; --cm-muted: #5a5a80; --cm-faint: #9090b8; } } /* ══════════════════════════════════════════════════════════════════════════ 4. LIGHT MODE — manueller Toggle (.theme-light auf ) ══════════════════════════════════════════════════════════════════════════ */ .theme-light { --cm-bg-deep: #f4f4fb; --cm-bg-dark: #ffffff; --cm-bg-card: #ffffff; --cm-bg-elevated: #f0f2ff; --cm-border: #ddddf0; --cm-border-focus: #818cf8; --cm-text: #1a1a2e; --cm-muted: #5a5a80; --cm-faint: #9090b8; } /* ══════════════════════════════════════════════════════════════════════════ 5. BASIS ══════════════════════════════════════════════════════════════════════════ */ html, body { background-color: var(--cm-bg-deep) !important; color: var(--cm-text) !important; font-family: 'Outfit', system-ui, sans-serif !important; transition: background-color .25s ease, color .25s ease; } code, pre, .font-mono, kbd, samp { font-family: 'JetBrains Mono', monospace !important; color: var(--cm-sky) !important; } /* ══════════════════════════════════════════════════════════════════════════ 6. TAILWIND BACKGROUND-KLASSEN ÜBERSCHREIBEN (keine dark:-Präfixe mehr — alles über CSS-Variablen) ══════════════════════════════════════════════════════════════════════════ */ /* Strukturelle Hintergründe */ body.bg-gray-100 { background-color: var(--cm-bg-deep) !important; } .bg-gray-900 { background-color: var(--cm-bg-deep) !important; } .bg-gray-800 { background-color: var(--cm-bg-dark) !important; } .bg-gray-950 { background-color: var(--cm-bg-dark) !important; } .bg-gray-700 { background-color: var(--cm-bg-elevated) !important; } .bg-gray-50 { background-color: var(--cm-bg-dark) !important; } .bg-white { background-color: var(--cm-bg-card) !important; } /* Light-Mode: Karten mit leichtem Schatten für Tiefe */ .theme-light .bg-white, .theme-light .bg-gray-800 { box-shadow: 0 1px 4px rgba(129,140,248,.07) !important; } /* Status-Hintergründe */ .bg-green-100 { background-color: rgba(52,211,153,.12) !important; } .bg-red-100 { background-color: rgba(248,113,113,.12) !important; } .bg-red-50 { background-color: rgba(248,113,113,.08) !important; } .bg-yellow-100 { background-color: rgba(251,191,36,.12) !important; } .bg-purple-100 { background-color: rgba(192,132,252,.12) !important; } .bg-blue-100 { background-color: rgba(129,140,248,.12) !important; } .bg-blue-50 { background-color: rgba(129,140,248,.08) !important; } .bg-indigo-50 { background-color: rgba(129,140,248,.08) !important; } /* Primary-Button-Hintergrund */ .bg-blue-600 { background: var(--cm-grad) !important; border: none !important; } .hover\:bg-blue-700:hover { background: var(--cm-violet) !important; } /* Gray-Interactive */ .bg-gray-600 { background-color: rgba(136,136,187,.15) !important; } .hover\:bg-gray-700:hover { background-color: rgba(129,140,248,.08) !important; } .hover\:bg-gray-800:hover { background-color: rgba(129,140,248,.12) !important; } /* Indigo-Hover */ .hover\:bg-indigo-100:hover { background-color: rgba(129,140,248,.14) !important; } .hover\:bg-indigo-100 { background-color: rgba(129,140,248,.08) !important; } /* Red-Interactive */ .hover\:bg-red-100:hover { background-color: rgba(248,113,113,.14) !important; } .hover\:bg-red-100 { background-color: rgba(248,113,113,.08) !important; } /* ══════════════════════════════════════════════════════════════════════════ 7. TAILWIND TEXT-KLASSEN ÜBERSCHREIBEN ══════════════════════════════════════════════════════════════════════════ */ .text-gray-900 { color: var(--cm-text) !important; } .text-gray-800 { color: var(--cm-text) !important; } .text-gray-700 { color: var(--cm-muted) !important; } .text-gray-600 { color: var(--cm-muted) !important; } .text-gray-500 { color: var(--cm-faint) !important; } .text-gray-400 { color: var(--cm-faint) !important; } .text-gray-300 { color: var(--cm-muted) !important; } .text-blue-600 { color: var(--cm-indigo) !important; } .text-blue-500 { color: var(--cm-indigo) !important; } .text-blue-800 { color: var(--cm-indigo) !important; } .text-green-600 { color: var(--cm-success) !important; } .text-green-800 { color: var(--cm-success) !important; } .text-red-700 { color: var(--cm-danger) !important; } .text-red-800 { color: var(--cm-danger) !important; } .text-red-600 { color: var(--cm-danger) !important; } .text-yellow-800 { color: var(--cm-warning) !important; } .text-yellow-600 { color: var(--cm-warning) !important; } .text-purple-800 { color: var(--cm-violet) !important; } .text-purple-700 { color: var(--cm-violet) !important; } .text-indigo-700 { color: var(--cm-indigo) !important; } .hover\:text-blue-800:hover { color: var(--cm-violet) !important; } .hover\:text-white:hover { color: var(--cm-text) !important; } /* ══════════════════════════════════════════════════════════════════════════ 8. TAILWIND BORDER-KLASSEN ÜBERSCHREIBEN ══════════════════════════════════════════════════════════════════════════ */ .border-gray-200 { border-color: var(--cm-border) !important; } .border-gray-300 { border-color: var(--cm-border) !important; } .border-gray-600 { border-color: var(--cm-border) !important; } .border-gray-700 { border-color: var(--cm-border) !important; } .border-gray-800 { border-color: var(--cm-border) !important; } .border-red-300 { border-color: rgba(248,113,113,.25) !important; } .border-red-200 { border-color: rgba(248,113,113,.2) !important; } .border-blue-200 { border-color: rgba(129,140,248,.2) !important; } .border-indigo-200 { border-color: rgba(129,140,248,.2) !important; } .divide-gray-100 > * + * { border-color: var(--cm-border) !important; } /* ══════════════════════════════════════════════════════════════════════════ 9. FOCUS-RING ══════════════════════════════════════════════════════════════════════════ */ .focus\:ring-blue-500:focus { --tw-ring-color: var(--cm-border-focus) !important; } .focus\:ring-gray-500:focus { --tw-ring-color: var(--cm-border) !important; } .focus\:ring-indigo-400:focus { --tw-ring-color: var(--cm-border-focus) !important; } /* ══════════════════════════════════════════════════════════════════════════ 10. SELECT / DROPDOWN — Lesbarkeit in beiden Modi ══════════════════════════════════════════════════════════════════════════ */ /* * Inputs und Selects: im Dark-Mode dunkler Hintergrund, im Light-Mode * leicht abgehobener Hintergrund für Tiefe (var(--cm-bg-deep) = #f4f4fb). * Browser-native