/** * Qafzeh Universal Theme System v10.7.0 — Stylesheet * * Provides: * 1. Universal CSS variables for both themes (--qafzeh-* tokens) * 2. Compatible aliases for existing admin tokens (--adm-*) * 3. Generic dark-mode overrides for common HTML elements * 4. Dark overrides for common Qafzeh UI patterns (.card, .topbar, .sidebar, .btn, etc) * 5. Theme toggle button styling (mounted + floating variants) * 6. Smooth transitions during theme switch * * Activated by: * (set by /js/qafzeh-theme.js) */ /* ═══════════════════════════════════════════════ 1. Universal Tokens (Light = default, no need to redeclare) ═══════════════════════════════════════════════ */ :root { /* Qafzeh brand */ --qafzeh-primary: #8B5CF6; --qafzeh-primary-dark: #6D28D9; --qafzeh-primary-soft: #F5F3FF; /* Semantic */ --qafzeh-success: #10B981; --qafzeh-success-soft: #D1FAE5; --qafzeh-warning: #F59E0B; --qafzeh-warning-soft: #FEF3C7; --qafzeh-danger: #EF4444; --qafzeh-danger-soft: #FEE2E2; --qafzeh-info: #3B82F6; --qafzeh-info-soft: #DBEAFE; /* Surfaces */ --qafzeh-bg: #F8FAFC; --qafzeh-bg-elevated: #FFFFFF; --qafzeh-bg-secondary: #F1F5F9; /* Text */ --qafzeh-text: #0F172A; --qafzeh-text-secondary: #475569; --qafzeh-text-muted: #94A3B8; /* Borders */ --qafzeh-border: #E2E8F0; --qafzeh-border-soft: #F1F5F9; /* Shadows */ --qafzeh-shadow-sm: 0 1px 2px rgba(15,23,42,.04); --qafzeh-shadow: 0 4px 12px rgba(15,23,42,.06); --qafzeh-shadow-lg: 0 12px 32px rgba(15,23,42,.10); } /* ═══════════════════════════════════════════════ 2. DARK THEME — Token overrides ═══════════════════════════════════════════════ */ [data-theme="dark"] { /* Brand: lighter purple for dark backgrounds */ --qafzeh-primary: #A78BFA; --qafzeh-primary-dark: #8B5CF6; --qafzeh-primary-soft: #1E1B3B; /* Semantic: brighter for visibility */ --qafzeh-success: #34D399; --qafzeh-success-soft: #064E3B; --qafzeh-warning: #FBBF24; --qafzeh-warning-soft: #451A03; --qafzeh-danger: #F87171; --qafzeh-danger-soft: #450A0A; --qafzeh-info: #60A5FA; --qafzeh-info-soft: #1E3A8A; /* Surfaces: slate scale */ --qafzeh-bg: #0F172A; --qafzeh-bg-elevated: #1E293B; --qafzeh-bg-secondary: #0F172A; /* Text: high contrast */ --qafzeh-text: #F1F5F9; --qafzeh-text-secondary: #CBD5E1; --qafzeh-text-muted: #94A3B8; /* Borders */ --qafzeh-border: #334155; --qafzeh-border-soft: #1E293B; /* Shadows: deeper */ --qafzeh-shadow-sm: 0 1px 2px rgba(0,0,0,.3); --qafzeh-shadow: 0 4px 12px rgba(0,0,0,.4); --qafzeh-shadow-lg: 0 12px 32px rgba(0,0,0,.5); /* Also override --adm-* tokens for backward compat with admin-v10.css (in case admin-v10.css doesn't load alongside) */ --adm-primary: #A78BFA; --adm-primary-dark: #8B5CF6; --adm-primary-soft: #1E1B3B; --adm-danger: #F87171; --adm-success: #34D399; --adm-warning: #FBBF24; --adm-info: #60A5FA; --adm-bg-page: #0F172A; --adm-bg-surface: #1E293B; --adm-bg-secondary: #0F172A; --adm-text: #F1F5F9; --adm-text-secondary: #CBD5E1; --adm-text-muted: #94A3B8; --adm-border: #334155; --adm-divider: #1E293B; /* Override --gray-* tokens used by dashboard.html */ --gray-50: #1E293B; --gray-100: #334155; --gray-200: #475569; --gray-300: #64748B; --gray-400: #94A3B8; --gray-500: #CBD5E1; --gray-600: #E2E8F0; --gray-700: #F1F5F9; --gray-800: #F8FAFC; --gray-900: #FFFFFF; } /* ═══════════════════════════════════════════════ 3. Smooth Transitions ═══════════════════════════════════════════════ */ html, body, header, nav, aside, main, section, article, footer, .card, .panel, .topbar, .sidebar, .modal, .modal-card, .mw, .md, .btn, button, input, select, textarea, table, td, th, tr, .adm-header, .adm-sidebar, .adm-main, .adm-card, .dash-card, .dash-sidebar, .dash-topbar, .hd, .sb, .fg { transition: background-color .25s ease, color .2s ease, border-color .25s ease, box-shadow .25s ease; } /* Disable transitions during theme switch to prevent flashing colors mid-animation */ html.qafzeh-theme-switching, html.qafzeh-theme-switching * { transition: none !important; } /* ═══════════════════════════════════════════════ 4. DARK MODE — Generic HTML element overrides ═══════════════════════════════════════════════ */ [data-theme="dark"] body { background-color: var(--qafzeh-bg); color: var(--qafzeh-text); } [data-theme="dark"] a { color: var(--qafzeh-primary); } /* Forms */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--qafzeh-bg-elevated); color: var(--qafzeh-text); border-color: var(--qafzeh-border); } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--qafzeh-primary); outline-color: var(--qafzeh-primary); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--qafzeh-text-muted); opacity: 0.7; } [data-theme="dark"] label { color: var(--qafzeh-text); } [data-theme="dark"] hr { border-color: var(--qafzeh-border); } /* Tables */ [data-theme="dark"] table { color: var(--qafzeh-text); } [data-theme="dark"] th { background-color: var(--qafzeh-bg-secondary); color: var(--qafzeh-text-muted); } [data-theme="dark"] td { border-color: var(--qafzeh-border-soft); } [data-theme="dark"] tr:hover { background-color: var(--qafzeh-bg-secondary); } /* Code */ [data-theme="dark"] code, [data-theme="dark"] pre { background-color: var(--qafzeh-bg-secondary); color: var(--qafzeh-text); border-color: var(--qafzeh-border); } /* Scrollbars (Firefox) */ [data-theme="dark"] * { scrollbar-color: #475569 #1E293B; } /* ═══════════════════════════════════════════════ 5. DARK MODE — Common Qafzeh UI patterns ═══════════════════════════════════════════════ */ /* Cards (multiple naming conventions used across the platform) */ [data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] .dash-card, [data-theme="dark"] .stat-card, [data-theme="dark"] .info-card, [data-theme="dark"] .feature-card, [data-theme="dark"] .pnl, [data-theme="dark"] .v30-card { background-color: var(--qafzeh-bg-elevated); color: var(--qafzeh-text); border-color: var(--qafzeh-border); box-shadow: var(--qafzeh-shadow-sm); } /* Topbar / Header */ [data-theme="dark"] .topbar, [data-theme="dark"] .dash-topbar, [data-theme="dark"] .header-bar, [data-theme="dark"] header.hd, [data-theme="dark"] .hd { background-color: var(--qafzeh-bg-elevated); border-color: var(--qafzeh-border); } /* Sidebar */ [data-theme="dark"] .sidebar, [data-theme="dark"] .dash-sidebar, [data-theme="dark"] aside.sb, [data-theme="dark"] .sb { background-color: var(--qafzeh-bg-elevated); border-color: var(--qafzeh-border); } [data-theme="dark"] .sidebar a, [data-theme="dark"] .dash-sidebar a, [data-theme="dark"] .sb a { color: var(--qafzeh-text-secondary); } [data-theme="dark"] .sidebar a:hover, [data-theme="dark"] .sb a:hover { background-color: var(--qafzeh-bg-secondary); color: var(--qafzeh-text); } [data-theme="dark"] .sidebar a.active, [data-theme="dark"] .sb a.active { background-color: var(--qafzeh-primary-soft); color: var(--qafzeh-primary); } /* Buttons (light/secondary variants) */ [data-theme="dark"] .btn, [data-theme="dark"] button.btn-secondary, [data-theme="dark"] button.btn-light { background-color: var(--qafzeh-bg-elevated); color: var(--qafzeh-text); border-color: var(--qafzeh-border); } [data-theme="dark"] .btn:hover { background-color: var(--qafzeh-bg-secondary); } /* Modals (multiple conventions) */ [data-theme="dark"] .modal-overlay, [data-theme="dark"] .mw { background-color: rgba(0, 0, 0, .65); } [data-theme="dark"] .modal-card, [data-theme="dark"] .md, [data-theme="dark"] .modal-body { background-color: var(--qafzeh-bg-elevated); color: var(--qafzeh-text); border-color: var(--qafzeh-border); } [data-theme="dark"] .md-hd, [data-theme="dark"] .modal-head { border-color: var(--qafzeh-border); } [data-theme="dark"] .cls, [data-theme="dark"] .modal-close { color: var(--qafzeh-text-muted); } /* Form groups */ [data-theme="dark"] .fg label, [data-theme="dark"] .field label { color: var(--qafzeh-text); } /* Toast (used by dashboard.html) */ [data-theme="dark"] #toast, [data-theme="dark"] .toast { background-color: var(--qafzeh-bg-elevated); color: var(--qafzeh-text); border-color: var(--qafzeh-border); box-shadow: var(--qafzeh-shadow); } /* Alerts */ [data-theme="dark"] .alert, [data-theme="dark"] .alert-info { background-color: var(--qafzeh-info-soft); color: var(--qafzeh-info); border-color: var(--qafzeh-info); } [data-theme="dark"] .alert-success { background-color: var(--qafzeh-success-soft); color: var(--qafzeh-success); border-color: var(--qafzeh-success); } [data-theme="dark"] .alert-warning { background-color: var(--qafzeh-warning-soft); color: var(--qafzeh-warning); border-color: var(--qafzeh-warning); } [data-theme="dark"] .alert-danger, [data-theme="dark"] .alert-error { background-color: var(--qafzeh-danger-soft); color: var(--qafzeh-danger); border-color: var(--qafzeh-danger); } /* Badges */ [data-theme="dark"] .badge, [data-theme="dark"] .pill, [data-theme="dark"] .role-pill, [data-theme="dark"] .role-tag { background-color: var(--qafzeh-bg-secondary); color: var(--qafzeh-text); border-color: var(--qafzeh-border); } /* Login/register specific */ [data-theme="dark"] .container { background-color: var(--qafzeh-bg); } [data-theme="dark"] .hero { background-color: var(--qafzeh-bg); } [data-theme="dark"] .brand-name { color: var(--qafzeh-text); } [data-theme="dark"] .subtitle { color: var(--qafzeh-text-secondary); } [data-theme="dark"] .divider { border-color: var(--qafzeh-border); } [data-theme="dark"] .row { color: var(--qafzeh-text-secondary); } /* Dashboard-specific cards */ [data-theme="dark"] .qa-card, [data-theme="dark"] .otl-step, [data-theme="dark"] .deal-progress-bar { background-color: var(--qafzeh-bg-elevated); color: var(--qafzeh-text); border-color: var(--qafzeh-border); } /* Hardcoded white backgrounds (catch-all for elements that explicitly set background:#fff) */ [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background-color:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background-color: #fff"], [data-theme="dark"] [style*="background:white"], [data-theme="dark"] [style*="background-color:white"] { background-color: var(--qafzeh-bg-elevated) !important; } /* ═══════════════════════════════════════════════ 6. THEME TOGGLE BUTTON ═══════════════════════════════════════════════ */ .qafzeh-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: transparent; border: 1px solid var(--qafzeh-border); color: var(--qafzeh-text-secondary); cursor: pointer; font-size: 1rem; transition: all .2s ease; font-family: inherit; } .qafzeh-theme-btn:hover { background-color: var(--qafzeh-bg-secondary); color: var(--qafzeh-primary); transform: translateY(-1px); } .qafzeh-theme-btn:active { transform: translateY(0); } .qafzeh-theme-btn .qafzeh-theme-ic { transition: transform .3s ease; } .qafzeh-theme-btn:hover .qafzeh-theme-ic { transform: rotate(20deg); } /* Floating variant — bottom-right of viewport */ .qafzeh-theme-btn.qafzeh-theme-fab { position: fixed; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background-color: var(--qafzeh-bg-elevated); border: 1px solid var(--qafzeh-border); box-shadow: var(--qafzeh-shadow); z-index: 50; font-size: 1.05rem; } .qafzeh-theme-btn.qafzeh-theme-fab:hover { box-shadow: var(--qafzeh-shadow-lg); transform: translateY(-2px); } /* ═══════════════════════════════════════════════ 7. Polish — body baseline color migration (helps when body has hardcoded color on a dashboard page) ═══════════════════════════════════════════════ */ [data-theme="dark"] body { color-scheme: dark; } [data-theme="light"] body, html:not([data-theme="dark"]) body { color-scheme: light; }