/** * theme.css — Zentrale Design-Tokens (Single Source of Truth) * ============================================================= * Diese Datei MUSS auf jeder Seite als ERSTES Stylesheet geladen * werden (vor style.css und allen Modul-CSS). style.css importiert * sie automatisch via @import; Standalone-/Public-Seiten binden sie * mit einer eigenen -Zeile ein. * * 3-Schichten-Modell: * 1. PRIMITIVE — rohe Farbwerte, themen-unabhängig * 2. SEMANTISCH — rollen-basiert; NUR diese werden im Dark Mode * überschrieben * 3. ALIASE — Alt-Namen einzelner Module -> globale Tokens * * Dark Mode: (Toggle = Phase 4) */ /* ============================================================ SCHICHT 1 — PRIMITIVE (rohe Werte, themen-UNABHÄNGIG) Niemals direkt in Komponenten verwenden -> immer die semantischen Tokens (Schicht 2) nutzen. ============================================================ */ :root { /* Marken-Grün (eine Familie statt 40 Varianten) */ --green-50: #ecfdf5; /* sehr helle Fläche */ --green-100: #e8f5e9; /* Status-Erfolg Hintergrund (hell) */ --green-400: #2ff0b4; /* Akzent hell (Hover auf Dunkel) */ --green-500: #00E8A2; /* MARKE — primärer Akzent */ --green-600: #00c98d; /* Akzent dunkel */ --green-700: #00916b; /* Akzent tiefer */ --green-800: #006a4a; /* tiefes Grün */ --green-900: #002d2d; /* Deep Teal (dunkle Flächen/Footer) */ /* Graustufen (neutral) */ --gray-50: #fafafa; --gray-100: #f5f5f5; --gray-200: #f0f0f0; --gray-300: #e0e0e0; --gray-400: #cccccc; --gray-500: #999999; --gray-600: #666666; --gray-700: #333333; --gray-800: #1E1E1E; --gray-900: #000000; /* Status-Primitive */ --red-100: #fee2e2; --red-500: #e53935; --red-600: #dc2626; --red-700: #c62828; --amber-100: #fff3e0; --amber-500: #ffaa00; --amber-600: #f59e0b; --amber-700: #e65100; --blue-100: #e3f2fd; --blue-500: #0088ff; --blue-600: #2563eb; --success-500: #4caf50; --success-700: #2e7d32; /* dunkler Erfolgs-Text (Light) */ --link-500: #4976F4; --link-600: #3361d8; /* Absolut (theme-UNABHÄNGIG) — für Text/Flächen auf Farbe */ --white: #ffffff; --black: #000000; /* Erweiterte Kategorie-Palette (Badges, Charts, Deko) */ --blue-700: #1565c0; --purple-500: #7b1fa2; --purple-400: #8b5cf6; --purple-100: #f3e5f5; --amber-400: #ffc107; /* ============================================================ SCHICHT 2 — SEMANTISCH (rollen-basiert) NUR diese Tokens werden im Dark Mode überschrieben. Komponenten verwenden AUSSCHLIESSLICH diese Schicht. ============================================================ */ /* Flächen */ --color-background: #f9f9f9; /* App-Hintergrund (unverändert) */ --color-surface: #ffffff; /* Karten/Panels */ --color-surface-2: var(--gray-100); /* eingelassene Flächen */ --color-hover: #f0f0f0; /* Hover-Fläche (Nav/Icon-Buttons) */ --color-input-bg: #ffffff; /* Formularfelder */ --badge-ink: #0a0a0a; /* Soft-Badge Text-Mix (JS color-mix) */ --badge-mix-bg: 18%; /* Soft-Badge Tint-Stärke (Light) */ --color-modal: #ffffff; /* Modal-Fläche */ --glass-bg: rgba(255,255,255,.8); /* Glass: Sidebar/Header/Logo */ --color-white: #ffffff; /* echtes Weiß (Inhalt) */ /* Text — Light: title == text (#1E1E1E), getrennt erst im Dark Mode */ --color-title: var(--gray-800); /* Überschriften */ --color-text: var(--gray-800); /* Haupttext (unverändert) */ --color-text-secondary: var(--gray-600); /* Sekundärtext */ --color-text-muted: var(--gray-500); /* gedämpft */ /* Linien & Rahmen */ --color-line: var(--gray-200); /* Trennlinien (subtil) */ --color-border: var(--gray-300); /* Eingabefelder/Karten */ --color-border-light: var(--gray-200); /* Marke / Akzent */ --color-primary: #000000; --color-accent: var(--green-500); --color-accent-dark: var(--green-600); --color-link: var(--link-500); /* Text/Inhalt auf Akzent- oder Farbflächen (bleibt hell) */ --color-on-accent: var(--white); /* Semantische Status-Farben (allgemein: Buttons/Icons/Borders) */ --color-success: var(--success-500); --color-error: var(--red-500); --color-danger: var(--red-500); --color-warning: var(--amber-500); --color-info: var(--blue-500); /* Soft-Badge-Paare (Tailwind/Radix-Look) — Text + Hintergrund je Hue. Light: dunkler Text (700/800) auf hellem Tint (100). */ --color-success-bg: #dcfce7; --color-success-text: #166534; /* green */ --color-error-bg: #fee2e2; --color-error-text: #991b1b; /* red */ --color-warning-bg: #ffedd5; --color-warning-text: #9a3412; /* orange*/ --color-info-bg: #dbeafe; --color-info-text: #1e40af; /* blue */ --color-accent-bg: #ccfbf1; --color-accent-text: #115e59; /* teal */ --color-neutral-bg: #f3f4f6; --color-neutral-text: #374151; /* gray */ --color-purple-bg: #f3e8ff; --color-purple-text: #6b21a8; /* purple*/ /* Sidebar aktiv = Teal-Pill */ --nav-active-bg: #ccfbf1; --nav-active-text: #0f766e; /* Typografie */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 20px; --fs-3xl: 24px; --fs-4xl: 32px; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 10px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 30px; /* Border Radius */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 50%; --radius-pill: 16px; /* Schatten */ --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.15); --shadow-focus: 0 0 0 3px rgba(0, 232, 162, 0.2); /* Layout */ --sidebar-width: 250px; --header-height: 65px; /* Aliase fuer extern referenzierte Variablen */ --primary-color: var(--color-primary); --secondary-color: var(--color-accent); --text-dark: var(--color-text); /* ---------------------------------------------------------- SCHICHT 3 — KOMPONENTEN-ALIASE (Rückwärtskompatibilität) Alt-Namen aus einzelnen Modulen zeigen jetzt auf globale Tokens, damit Dark Mode automatisch greift. Konkurrierende :root-Blöcke in anderen Dateien werden dadurch obsolet. ---------------------------------------------------------- */ /* owner-portal.css (--op-*) */ --op-bg: var(--color-background); --op-card: var(--color-surface); --op-text: var(--color-title); --op-text-2: var(--color-text); --op-muted: var(--color-text-muted); --op-border: var(--color-border); --op-border-light: var(--color-border-light); --op-primary: var(--color-primary); --op-accent: var(--color-accent); --op-accent-dark: var(--color-accent-dark); --op-success: var(--color-success); --op-danger: var(--color-danger); --op-warning: var(--color-warning); /* board-links (az-board / rechnungen-board) */ --az-link-color: var(--color-link); --az-link-hover: var(--link-600); --re-link-color: var(--color-link); --re-link-hover: var(--link-600); } /* ============================================================ DARK MODE — überschreibt NUR die semantische Schicht (2) Aktivierung: (Phase 4: Toggle). Primitive (Schicht 1) bleiben unverändert. ============================================================ */ :root[data-theme="dark"] { /* Neutral-Skala INVERTIERT: damit direkte var(--gray-*)-Nutzungen (Flächen/Borders/Text) automatisch dark-adaptiv werden. 50 = hellste Fläche (Light) -> dunkelste Fläche (Dark); 900 umgekehrt. 50–400 = Flächen/Linien (dunkel), 500–900 = Text (hell). */ --gray-50: #0d0d0d; --gray-100: #121212; --gray-200: #1a1a1a; --gray-300: #2a2a2a; --gray-400: #3d3d3d; --gray-500: #8a8a8a; --gray-600: #a8a8a8; --gray-700: #c8c8c8; --gray-800: #e0e0e0; --gray-900: #f2f2f2; /* Flächen */ --color-background: #050505; --color-surface: #0a0a0a; --color-surface-2: #111111; --color-hover: #242424; /* klar sichtbarer Hover auf dunklem Grund */ --color-input-bg: #141414; /* Formularfelder, leicht abgesetzt */ --badge-ink: #ffffff; /* Soft-Badge Text-Mix hell auf Dunkel */ --badge-mix-bg: 80%; /* Soft-Badge Tint kräftig auf Dunkel */ --color-modal: #1a1a1a; /* Modal-Fläche, elevated über Cards (#0a0a0a) */ --glass-bg: rgba(10,10,10,.8); /* Glass dunkel */ --color-white: #0a0a0a; /* "weiße" Karten werden dunkel */ /* Text */ --color-title: #ededed; --color-text: #cbcbcb; --color-text-secondary: #cbcbcb; --color-text-muted: #8a8a8a; /* Linien & Rahmen */ --color-line: #161616; --color-border: #242424; --color-border-light: #161616; /* Marke bleibt #00E8A2 — auf Dunkel gut lesbar. Hover nutzt die hellere Stufe. */ --color-accent-dark: var(--green-400); --color-primary: #ededed; /* primär=schwarz im Light wird hell */ /* Status-Hintergründe gedämpft (statt heller Pastelltöne) */ /* Soft-Badge-Paare Dark: heller Text (300) auf tiefem Tint (900/950) */ --color-success-bg: #14532d; --color-success-text: #86efac; /* green */ --color-error-bg: #450a0a; --color-error-text: #fca5a5; /* red */ --color-warning-bg: #431407; --color-warning-text: #ffb86a; /* orange*/ --color-info-bg: #172554; --color-info-text: #93c5fd; /* blue */ --color-accent-bg: #134e4a; --color-accent-text: #5eead4; /* teal */ --color-neutral-bg: #1f2937; --color-neutral-text: #d1d5db; /* gray */ --color-purple-bg: #3b0764; --color-purple-text: #d8b4fe; /* purple*/ /* Sidebar aktiv = Teal-Pill (teal-400 auf teal-950) */ --nav-active-bg: #042f2e; --nav-active-text: #2dd4bf; /* Kategorie-Palette auf Dunkel etwas aufgehellt (Lesbarkeit) */ --blue-700: #5b9bd5; --purple-500: #c084e8; --purple-400: #a78bfa; --purple-100: #2a1f3d; /* Schatten dunkel: tiefer + per Rahmen sichtbar */ --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.6); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.55); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.7); --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.75); } /* Sanfter Übergang beim Theme-Wechsel (nur Farben) */ :root[data-theme] body, :root[data-theme] .card, :root[data-theme] .panel { transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* Dark-Mode-Toggle: Mond (Light) <-> Sonne (Dark) */ .theme-toggle .theme-icon-sun { display: none; } .theme-toggle .theme-icon-moon { display: inline-block; } :root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: inline-block; } /* Formularfelder dark-tauglich — Browser-Default ist sonst weiß/schwarz. Niedrige Spezifität: explizit gestylte Felder überschreiben weiterhin. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]), select, textarea { background-color: var(--color-input-bg); color: var(--color-text); border-color: var(--color-border); } input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 1; } /* Native Controls (Checkbox/Radio/Datepicker-Icons) im Dark korrekt tönen */ :root[data-theme="dark"] input[type="checkbox"], :root[data-theme="dark"] input[type="radio"] { accent-color: var(--color-accent); } :root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, :root[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator, :root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); } /* Logo-Breite begrenzen (max 160px) */ .logo .logo-full { max-width: 160px; height: auto; } /* Modals: im Dark elevated Fläche (#1a1a1a), damit sie sich klar von Hintergrund (#050505) und Cards (#0a0a0a) abheben. :root[data-theme] gibt genug Spezifität, um spätere Modul-Regeln (.modal-content{...}) zu schlagen. */ :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .modal-container, :root[data-theme="dark"] .modal-panel, :root[data-theme="dark"] .modal-box, :root[data-theme="dark"] .modal-dialog, :root[data-theme="dark"] .modal-compose-content, :root[data-theme="dark"] .modal-wide, :root[data-theme="dark"] .modal-large { background-color: var(--color-modal); } /* Menü-/Dropdown-Icons, die per filter:brightness(0) schwarz gemacht werden, im Dark aufhellen (sonst unsichtbar). Danger-Items behalten ihr Rot. */ :root[data-theme="dark"] .property-dropdown-item:not(.property-dropdown-item-danger) img, :root[data-theme="dark"] .property-dropdown-item:not(.property-dropdown-item-danger) .icon, :root[data-theme="dark"] .board-header .dropdown-item:not(.danger) img, :root[data-theme="dark"] .board-header .dropdown-item:not(.danger) .icon, :root[data-theme="dark"] .batch-actions .btn img, :root[data-theme="dark"] .property-dropdown-item:not(.property-dropdown-item-danger):hover img, :root[data-theme="dark"] .property-dropdown-item:not(.property-dropdown-item-danger):hover .icon { filter: brightness(0) invert(1); } /* Logo im Dark Mode hell rendern (Sprite/SVG sind schwarz-monochrom, nutzen kein currentColor -> sonst unsichtbar auf dunklem Grund). */ :root[data-theme="dark"] .logo .logo-full, :root[data-theme="dark"] .logo .logo-small, :root[data-theme="dark"] .logo-link svg, :root[data-theme="dark"] .logo-link img, :root[data-theme="dark"] .op-logo, :root[data-theme="dark"] .login-logo img { filter: brightness(0) invert(1); }