/* ============================================================================ SGUJ Wiki — Zentrales Design-System (v2.12.0) ============================================================================ Eine Quelle für Farben, Typografie, Radien und Schatten aller Seiten (wiki_production, notebooks, admin_*, login). Dark ist Default; Light wird über die bestehende Klasse `light-mode` auf aktiviert (localStorage- Key 'theme' — siehe /static/theme.js). Regeln: - Seiten-CSS nutzt AUSSCHLIESSLICH diese Tokens für Farben/Radien/Schatten. - Neue Komponenten orientieren sich an den Basisklassen unten. - Kundenspezifisch ist nur das Logo (logo_url) — die Palette ist fix. ========================================================================== */ :root { /* Typografie */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace; /* Markenfarben (fix für alle Mandanten; Logo ist der White-Label-Anteil) */ --accent: #3b82f6; --accent-dark: #1e40af; --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%); --accent-soft: rgba(59, 130, 246, 0.15); /* Flächen (Dark-Default) */ --bg-page: #0f172a; --bg-page-2: #1e293b; --surface: #1e293b; /* Karten, Chat-Flächen, Modals */ --surface-2: #26334d; /* abgesetzte Flächen (Tabellen-Header, Wells) */ --surface-card: rgba(30, 41, 59, 0.85); /* halbtransparente Karten */ --surface-glass: rgba(255, 255, 255, 0.08); /* Glassmorphism-Header */ /* Text */ --text-primary: #f1f5f9; --text-secondary: #cbd5e0; --text-muted: #94a3b8; --text-on-accent: #ffffff; /* Linien & Fokus */ --border: rgba(148, 163, 184, 0.18); --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.18); /* Statusfarben (einheitlich; ersetzt die alte Zweitpalette #48bb78/#f56565/#ed8936) */ --success: #22c55e; --success-bg: rgba(34, 197, 94, 0.12); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.12); --danger: #ef4444; --danger-strong: #dc2626; --danger-bg: rgba(239, 68, 68, 0.12); --gradient-danger: linear-gradient(135deg, #f87171 0%, #ef4444 100%); /* Radien (Skala statt Wildwuchs 4–25px) */ --radius-sm: 8px; /* Buttons, Inputs, kleine Elemente (ersetzt 5/6/8px) */ --radius-md: 12px; /* Karten, Panels, Badges (ersetzt 10/12px) */ --radius-lg: 15px; /* Header, Main-Cards, Modals (Bestandswert) */ --radius-xl: 20px; /* große Overlays/Wizards */ --radius-pill: 999px;/* Pill-Buttons (ersetzt 25px), runde Badges */ /* Schatten */ --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.2); --shadow-pop: 0 10px 40px rgba(0, 0, 0, 0.3); --shadow-accent: 0 8px 20px rgba(59, 130, 246, 0.3); --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.06); /* Effekte */ --blur-glass: blur(10px); color-scheme: dark; } html.light-mode { --bg-page: #f1f5f9; --bg-page-2: #ffffff; --surface: #ffffff; --surface-2: #f8f9fa; --surface-card: rgba(255, 255, 255, 0.95); --surface-glass: rgba(255, 255, 255, 0.85); --text-primary: #1a202c; --text-secondary: #2d3748; --text-muted: #718096; --border: rgba(15, 23, 42, 0.08); --success-bg: #f0fff4; --warning-bg: #fffaf0; --danger-bg: #fff5f5; --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.12); --shadow-pop: 0 10px 40px rgba(0, 0, 0, 0.18); color-scheme: light; } /* ============================================================================ Gemeinsame Basiskomponenten (Header-Aktionen — auf allen Seiten identisch) Seiten dürfen Feinheiten überschreiben, aber nicht die Grundform. ========================================================================== */ .theme-toggle { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-glass); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.15s ease, background 0.15s ease; padding: 0; } .theme-toggle:hover { transform: scale(1.08); } .theme-toggle .icon-sun { color: #fbbf24; display: none; } .theme-toggle .icon-moon { color: #475569; display: none; } html:not(.light-mode) .theme-toggle .icon-sun { display: block; } html.light-mode .theme-toggle .icon-moon { display: block; } .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: none; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; text-decoration: none; } .ds-btn-primary { background: var(--gradient-primary); color: var(--text-on-accent); } .ds-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent); } .ds-btn-secondary { background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); } .ds-btn-danger { background: var(--gradient-danger); color: var(--text-on-accent); }