/** * AccidentOS Portal — Light Theme Overrides * Applied when is set by theme.js * * html.light-theme specificity (0,1,1) beats :root (0,1,0) so these * variables override all inline :root declarations on portal pages. */ /* ── CSS Variables ── */ html.light-theme { --bg: #f8fafc; --bg-2: #f1f5f9; --surface: #ffffff; --surface-2: #f8fafc; --surface-hover: #f1f5f9; --border: rgba(0,0,0,0.09); --border-light: rgba(0,0,0,0.05); --border-active: rgba(0,0,0,0.22); --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --text-faint: #94a3b8; /* Keep green accents identical */ --primary: #10b981; --primary-light: rgba(16,185,129,0.12); --primary-hover: #059669; --green: #10b981; --green-light: rgba(16,185,129,0.12); --green-dark: #059669; --blue: #3b82f6; --blue-light: rgba(59,130,246,0.12); --amber: #d97706; --amber-light: rgba(217,119,6,0.1); --red: #dc2626; --red-light: rgba(220,38,38,0.1); --purple: #7c3aed; --purple-light: rgba(124,58,237,0.1); --orange: #ea580c; --orange-light: rgba(234,88,12,0.1); --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.1); } /* ── Body ── */ html.light-theme body { background: var(--bg); color: var(--text-primary); } /* ── Topnav (most portal pages) ── */ html.light-theme .topnav, html.light-theme nav.topnav { background: rgba(255,255,255,0.97) !important; border-bottom-color: rgba(0,0,0,0.09) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; } /* ── Nav (portal-profile style) ── */ html.light-theme nav { background: rgba(255,255,255,0.97) !important; border-bottom-color: rgba(0,0,0,0.09) !important; } /* ── Brand text ── */ html.light-theme .nav-brand, html.light-theme .logo { color: #0f172a !important; } /* ── Nav links ── */ html.light-theme .nav-links a, html.light-theme .nav-right a { color: #475569; } html.light-theme .nav-links a:hover, html.light-theme .nav-right a:hover { color: #0f172a; background: rgba(0,0,0,0.05) !important; } html.light-theme .nav-links a.active, html.light-theme .nav-right a.active { color: #059669; background: rgba(16,185,129,0.1) !important; } /* ── Nav user text ── */ html.light-theme .nav-user .name { color: #475569; } /* ── Logout button ── */ html.light-theme .btn-logout { border-color: rgba(0,0,0,0.15); color: #64748b; } html.light-theme .btn-logout:hover { border-color: rgba(0,0,0,0.28); color: #0f172a; } /* ── Theme toggle button — make it pop ── */ #themeToggle { font-size: 1rem; padding: 0.3rem 0.5rem; border-radius: 8px; cursor: pointer; line-height: 1; } /* ── Skeleton shimmer ── */ html.light-theme .skeleton { background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%) !important; background-size: 200px 100% !important; } /* ── Sticky/tab bars ── */ html.light-theme .tab-bar-wrap, html.light-theme .tab-bar-sticky { background: rgba(255,255,255,0.97) !important; border-bottom-color: rgba(0,0,0,0.09) !important; } /* ── Mobile nav drawer ── */ html.light-theme .mobile-nav { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; } html.light-theme .mobile-nav a { color: #475569 !important; } html.light-theme .mobile-nav a:hover, html.light-theme .mobile-nav a.active { color: #059669 !important; background: rgba(16,185,129,0.08) !important; }