/** * THEME: Glassmorphism (V2) * Halbtransparente Oberflaechen mit Blur-Effekt auf dunklem Gradient-Hintergrund. * * Aktivierung: data-theme="glass" auf * Alle V2-Variablen werden ueberschrieben - keine Spezial-Klassen noetig. * * @file assets/css/theme-glass.css * @version 2.0.0 * @date 2026-02-01 */ /* ===================================================== 1. CSS-VARIABLEN (Glass Mode) ===================================================== */ [data-theme="glass"] { /* Primaerfarben - heller fuer dunklen Hintergrund */ --color-primary: #818cf8; --color-primary-hover: #a5b4fc; --color-primary-light: rgba(129, 140, 248, 0.15); --accent-color: #818cf8; /* Status-Farben - heller/leuchtender fuer Glass */ --color-success: #34d399; --color-warning: #fbbf24; --color-error: #f87171; --color-info: #60a5fa; --color-accent: #c084fc; /* Semantische Hintergruende - halbtransparent */ --color-success-bg: rgba(52, 211, 153, 0.15); --color-warning-bg: rgba(251, 191, 36, 0.15); --color-error-bg: rgba(248, 113, 113, 0.15); --color-info-bg: rgba(96, 165, 250, 0.15); --color-accent-bg: rgba(192, 132, 252, 0.15); /* Alert-Farben - Glass-angepasst */ --alert-success-bg: rgba(52, 211, 153, 0.12); --alert-success-border: rgba(52, 211, 153, 0.3); --alert-success-text: #a7f3d0; --alert-error-bg: rgba(248, 113, 113, 0.12); --alert-error-border: rgba(248, 113, 113, 0.3); --alert-error-text: #fecaca; --alert-warning-bg: rgba(251, 191, 36, 0.12); --alert-warning-border: rgba(251, 191, 36, 0.3); --alert-warning-text: #fde68a; --alert-info-bg: rgba(96, 165, 250, 0.12); --alert-info-border: rgba(96, 165, 250, 0.3); --alert-info-text: #bfdbfe; /* Text - weiss auf Glass */ --text-primary: #f3f4f6; --text-secondary: rgba(255, 255, 255, 0.85); --text-muted: rgba(255, 255, 255, 0.6); --text-inverted: #1f2937; /* Hintergruende - halbtransparent */ --bg-body: #0f172a; --bg-card: rgba(255, 255, 255, 0.08); --bg-sidebar: rgba(255, 255, 255, 0.06); --bg-header: rgba(255, 255, 255, 0.08); --bg-hover: rgba(255, 255, 255, 0.12); --bg-active: rgba(255, 255, 255, 0.18); --bg-tertiary: rgba(255, 255, 255, 0.05); /* Header Icons */ --header-icon-color: rgba(255, 255, 255, 0.7); --header-icon-hover: #ffffff; /* Borders - subtil auf Glass */ --border-color: rgba(255, 255, 255, 0.12); --border-color-strong: rgba(255, 255, 255, 0.2); /* Shadows - weicher fuer Glass */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.2); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.25); } /* ===================================================== 2. BODY-HINTERGRUND (Gradient) ===================================================== */ [data-theme="glass"] body { background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); background-attachment: fixed; } /* ===================================================== 3. GLASSMORPHISM-EFFEKTE (backdrop-filter) ===================================================== */ /* Sidebar */ [data-theme="glass"] .app-sidebar { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-right: 1px solid var(--border-color); } /* Header */ [data-theme="glass"] .app-header, [data-theme="glass"] header { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-color); } /* Panels, Cards */ [data-theme="glass"] .v2-panel, [data-theme="glass"] .card, [data-theme="glass"] .themenfeld-card { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-color); } /* Toolbar */ [data-theme="glass"] .toolbar { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Modals */ [data-theme="glass"] .modal { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } [data-theme="glass"] .modal-overlay, [data-theme="glass"] .task-modal-overlay, [data-theme="glass"] .persona-modal-overlay { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="glass"] .task-modal, [data-theme="glass"] .persona-modal { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border-color); } /* Inputs */ [data-theme="glass"] input, [data-theme="glass"] select, [data-theme="glass"] textarea, [data-theme="glass"] .form-control { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, 0.2); color: var(--text-primary); } [data-theme="glass"] input::placeholder, [data-theme="glass"] textarea::placeholder { color: var(--text-muted); } [data-theme="glass"] input:focus, [data-theme="glass"] select:focus, [data-theme="glass"] textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25); } /* ===================================================== 4. BUTTONS ===================================================== */ [data-theme="glass"] .btn-secondary { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: var(--text-primary); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="glass"] .btn-secondary:hover { background: rgba(255, 255, 255, 0.2); } /* ===================================================== 5. SCROLLBAR ===================================================== */ [data-theme="glass"] ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } [data-theme="glass"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } [data-theme="glass"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* ===================================================== 6. LINKS ===================================================== */ [data-theme="glass"] a:not(.btn) { color: var(--color-primary); } [data-theme="glass"] a:not(.btn):hover { color: var(--color-primary-hover); } /* ===================================================== 7. STAT-CARDS / BADGES ===================================================== */ [data-theme="glass"] .stat-icon-primary { background: rgba(129, 140, 248, 0.15); color: var(--color-primary); } [data-theme="glass"] .stat-icon-success { background: var(--color-success-bg); color: var(--color-success); } [data-theme="glass"] .stat-icon-error { background: var(--color-error-bg); color: var(--color-error); } [data-theme="glass"] .stat-icon-ai { background: var(--color-accent-bg); color: var(--color-accent); } /* ===================================================== 8. VIEW-HEADER auf Glass ===================================================== */ [data-theme="glass"] .view-header { border-bottom-color: var(--border-color); } /* ===================================================== 9. FOOTER ===================================================== */ [data-theme="glass"] .app-footer { color: var(--text-muted); } [data-theme="glass"] .app-footer a { color: var(--text-secondary); } /* ===================================================== 10. SCROLLBAR - GLASS ANPASSUNGEN ===================================================== */ /* Sidebar Scrollbar - besser sichtbar */ [data-theme="glass"] .v2-sidebar-left .v2-sidebar-content::-webkit-scrollbar-thumb, [data-theme="glass"] .v2-sidebar-left-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); } [data-theme="glass"] .v2-sidebar-left .v2-sidebar-content::-webkit-scrollbar-thumb:hover, [data-theme="glass"] .v2-sidebar-left-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); } [data-theme="glass"] .v2-sidebar-left .v2-sidebar-content::-webkit-scrollbar-track, [data-theme="glass"] .v2-sidebar-left-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } /* Canvas Scrollbar */ [data-theme="glass"] .v2-canvas::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); } [data-theme="glass"] .v2-canvas::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); } [data-theme="glass"] .v2-canvas::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); } /* ===================================================== 11. HEADER & LOGO - GLASS KONTRAST ===================================================== */ /* Tenant-Titel besser lesbar */ [data-theme="glass"] .v2-logo-text { color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } [data-theme="glass"] .v2-logo i { color: #ffffff; } /* Header-Icons besser sichtbar */ [data-theme="glass"] .v2-header-icon, [data-theme="glass"] .v2-header-btn { color: rgba(255, 255, 255, 0.85); } [data-theme="glass"] .v2-header-icon:hover, [data-theme="glass"] .v2-header-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.15); } /* V1/V2 Layout Toggle Button - besser sichtbar */ [data-theme="glass"] .v2-layout-toggle, [data-theme="glass"] button.v2-layout-toggle { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-theme="glass"] .v2-layout-toggle-label { color: #ffffff; } [data-theme="glass"] .v2-layout-toggle:hover, [data-theme="glass"] button.v2-layout-toggle:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.4); } /* ===================================================== 12. NAVIGATION - GLASS KONTRAST ===================================================== */ /* Nav Section Titles */ [data-theme="glass"] .v2-nav-section-title { color: rgba(255, 255, 255, 0.7); } /* Nav Items - besserer Kontrast */ [data-theme="glass"] .v2-nav-item, [data-theme="glass"] .v2-nav-link { color: rgba(255, 255, 255, 0.9); } [data-theme="glass"] .v2-nav-item:hover, [data-theme="glass"] .v2-nav-link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.12); } /* Aktiver Nav-Link - hell und deutlich */ [data-theme="glass"] .v2-nav-item.active, [data-theme="glass"] .v2-nav-link.active { color: #ffffff; background: rgba(129, 140, 248, 0.25); } [data-theme="glass"] .v2-nav-item.active::before, [data-theme="glass"] .v2-nav-link.active::before { background: var(--color-primary); } /* Nav Counts */ [data-theme="glass"] .v2-nav-count, [data-theme="glass"] .v2-nav-item .counter { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.9); } /* Admin Section */ [data-theme="glass"] .v2-nav-section-admin .v2-nav-section-title { color: #f87171; } /* Favoriten Section */ [data-theme="glass"] .v2-favorites-section .v2-nav-section-title { color: #fbbf24; } /* ===================================================== 13. SIDEBAR FOOTER - GLASS ===================================================== */ [data-theme="glass"] .v2-sidebar-footer { border-top-color: rgba(255, 255, 255, 0.15); } [data-theme="glass"] .v2-user-footer { color: rgba(255, 255, 255, 0.9); } [data-theme="glass"] .v2-user-footer:hover { background: rgba(255, 255, 255, 0.1); } [data-theme="glass"] .v2-user-name { color: #ffffff; } [data-theme="glass"] .v2-logout-btn { color: rgba(255, 255, 255, 0.7); } [data-theme="glass"] .v2-logout-btn:hover { color: #f87171; background: rgba(248, 113, 113, 0.2); } /* ===================================================== 14. TOOLBAR - GLASS KONTRAST ===================================================== */ [data-theme="glass"] .v2-toolbar { border-bottom-color: rgba(255, 255, 255, 0.1); } [data-theme="glass"] .v2-sidebar-toggle { color: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.2); } [data-theme="glass"] .v2-sidebar-toggle:hover { color: #ffffff; background: rgba(255, 255, 255, 0.15); } [data-theme="glass"] .v2-tab, [data-theme="glass"] .v2-view-tab { color: rgba(255, 255, 255, 0.8); } [data-theme="glass"] .v2-tab:hover, [data-theme="glass"] .v2-view-tab:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); } [data-theme="glass"] .v2-tab.active, [data-theme="glass"] .v2-view-tab.active { color: #ffffff; background: var(--color-primary); } [data-theme="glass"] .v2-favorite-toggle { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.2); } [data-theme="glass"] .v2-favorite-toggle:hover { color: #fbbf24; background: rgba(251, 191, 36, 0.15); } /* ===================================================== 15. USER DROPDOWN - GLASS ===================================================== */ [data-theme="glass"] .user-dropdown { background: rgba(30, 30, 50, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: rgba(255, 255, 255, 0.15); } [data-theme="glass"] .user-dropdown-info strong { color: #ffffff; } [data-theme="glass"] .user-dropdown-info small { color: rgba(255, 255, 255, 0.7); } [data-theme="glass"] .user-dropdown-link { color: rgba(255, 255, 255, 0.9); } [data-theme="glass"] .user-dropdown-link:hover { background: rgba(255, 255, 255, 0.1); } /* ===================================================== 16. DASHBOARD KARTEN - GLASS KONTRAST ===================================================== */ /* Karten-Header Text */ [data-theme="glass"] .v2-panel-header, [data-theme="glass"] .card-header { color: rgba(255, 255, 255, 0.95); } /* card-action: "Letzte 30 Tage", "vs. Vormonat", "Alle anzeigen" */ [data-theme="glass"] .card-action { color: rgba(255, 255, 255, 0.75) !important; } [data-theme="glass"] a.card-action { color: var(--color-primary) !important; } [data-theme="glass"] a.card-action:hover { color: var(--color-primary-hover) !important; } /* text-muted Override für Glass */ [data-theme="glass"] .text-muted, [data-theme="glass"] [style*="color: var(--text-muted)"] { color: rgba(255, 255, 255, 0.7) !important; } /* Panel-Titel */ [data-theme="glass"] .v2-panel-title { color: #ffffff; } /* Info-Buttons */ [data-theme="glass"] .info-btn { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.2); } [data-theme="glass"] .info-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); } /* Widget-Info Tooltip */ [data-theme="glass"] .widget-info { background: rgba(30, 30, 50, 0.95); color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.2); } /* ===================================================== 17. CHART LEGENDEN - GLASS KONTRAST ===================================================== */ /* Chart.js Legenden */ [data-theme="glass"] .chart-legend, [data-theme="glass"] .chartjs-legend, [data-theme="glass"] canvas + div, [data-theme="glass"] .legend-item, [data-theme="glass"] .legend-label { color: rgba(255, 255, 255, 0.9) !important; } /* Chart.js native legend text */ [data-theme="glass"] .chartjs-legend li span, [data-theme="glass"] .chartjs-legend li { color: rgba(255, 255, 255, 0.85) !important; } /* Dashboard-spezifische Legenden */ [data-theme="glass"] #engagementLegend, [data-theme="glass"] #performanceLegend, [data-theme="glass"] .chart-legend-inline, [data-theme="glass"] .chart-legend span, [data-theme="glass"] [class*="legend"] span { color: rgba(255, 255, 255, 0.9) !important; } /* ===================================================== 18. RADAR & POLAR CHARTS - LABELS ===================================================== */ /* Radar/Polar Chart Labels müssen hell sein */ [data-theme="glass"] .radar-label, [data-theme="glass"] .polar-label, [data-theme="glass"] .chart-axis-label { fill: rgba(255, 255, 255, 0.9) !important; color: rgba(255, 255, 255, 0.9) !important; } /* ===================================================== 19. V1 ZURÜCK-BUTTON - GLASS KONTRAST ===================================================== */ /* Zurück zu V1 Button - besser sichtbar */ [data-theme="glass"] .v1-back-btn, [data-theme="glass"] .btn-back-v1, [data-theme="glass"] a[href*="v1"], [data-theme="glass"] .v2-sidebar-footer a { color: rgba(255, 255, 255, 0.8); } [data-theme="glass"] .v1-back-btn:hover, [data-theme="glass"] .btn-back-v1:hover, [data-theme="glass"] .v2-sidebar-footer a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); } /* ===================================================== 20. STATISTIK-KARTEN (0, 120, etc.) ===================================================== */ [data-theme="glass"] .stat-value, [data-theme="glass"] .stat-number, [data-theme="glass"] .kpi-value, [data-theme="glass"] .metric-value { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } [data-theme="glass"] .stat-label, [data-theme="glass"] .stat-subtitle, [data-theme="glass"] .kpi-label, [data-theme="glass"] .metric-label { color: rgba(255, 255, 255, 0.8); } /* ===================================================== 21. LISTEN-ITEMS (Meine Aufgaben, Aktive Stories) ===================================================== */ [data-theme="glass"] .task-item, [data-theme="glass"] .story-item, [data-theme="glass"] .list-item, [data-theme="glass"] .dashboard-list-item { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.1); } [data-theme="glass"] .task-item:hover, [data-theme="glass"] .story-item:hover, [data-theme="glass"] .list-item:hover, [data-theme="glass"] .dashboard-list-item:hover { background: rgba(255, 255, 255, 0.08); } [data-theme="glass"] .task-item .task-title, [data-theme="glass"] .story-item .story-title { color: #ffffff; } [data-theme="glass"] .task-item .task-meta, [data-theme="glass"] .story-item .story-meta { color: rgba(255, 255, 255, 0.7); } /* ===================================================== 22. SIDEBAR-V2 (Layout V2 Views) - GLASS KONTRAST ===================================================== */ /* Tenant-Name im Sidebar-Header */ [data-theme="glass"] .sidebar-logo-text { color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } [data-theme="glass"] .sidebar-logo { color: #ffffff; } /* Sidebar Header (mit Logo/Tenant) */ [data-theme="glass"] .sidebar-header { border-bottom-color: rgba(255, 255, 255, 0.15); } /* Navigation Links (Dashboard, Kommunen-Netzwerk, etc.) */ [data-theme="glass"] .nav-link { color: rgba(255, 255, 255, 0.9); } [data-theme="glass"] .nav-link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.12); } [data-theme="glass"] .nav-link.active, [data-theme="glass"] .nav-link[aria-current="page"] { color: #ffffff; background: rgba(129, 140, 248, 0.25); } /* Navigation Labels */ [data-theme="glass"] .nav-label { color: inherit; } /* Navigation Icons */ [data-theme="glass"] .nav-icon { color: rgba(255, 255, 255, 0.8); } [data-theme="glass"] .nav-link:hover .nav-icon, [data-theme="glass"] .nav-link.active .nav-icon { color: #ffffff; } /* Chevron für aufklappbare Sektionen */ [data-theme="glass"] .nav-chevron { color: rgba(255, 255, 255, 0.6); } [data-theme="glass"] .nav-link:hover .nav-chevron { color: rgba(255, 255, 255, 0.9); } /* Subnavigation Links */ [data-theme="glass"] .nav-sublink { color: rgba(255, 255, 255, 0.85); } [data-theme="glass"] .nav-sublink:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); } [data-theme="glass"] .nav-sublink.active { color: #ffffff; background: rgba(129, 140, 248, 0.2); } /* Sidebar Footer (Tutorials, Tour starten) */ [data-theme="glass"] .sidebar-footer { border-top-color: rgba(255, 255, 255, 0.15); } [data-theme="glass"] .sidebar-footer-link { color: rgba(255, 255, 255, 0.8); } [data-theme="glass"] .sidebar-footer-link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); } /* Collapse Button */ [data-theme="glass"] .sidebar-collapse-btn { color: rgba(255, 255, 255, 0.7); } [data-theme="glass"] .sidebar-collapse-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); } /* App-Sidebar selbst */ [data-theme="glass"] .app-sidebar { background: rgba(30, 30, 50, 0.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-right-color: rgba(255, 255, 255, 0.1); }