/** * LightSkai Global Theme Styles * * @version 1.1.0 * * This file provides consistent light and dark theme support across all pages. * Include this CSS file in all authenticated pages after navbar.css and after * styles.css (it must load last so the legacy-variable bridge can take effect). * * Theme is controlled by the `dark-theme` class, which theme-manager.js applies * to BOTH and . * * SINGLE SOURCE OF TRUTH: * This file owns all theme variables. styles.css historically shipped its own * parallel dark theme (.dark-theme scope, --bg-primary / --color-primary / * --text-secondary family). Those two systems used different variable names * and could not agree, which caused dark mode to render inconsistently. * The "LEGACY VARIABLE BRIDGE" block below re-points styles.css's * differently-named variables to this file's dark values under * body.dark-theme, so the whole app themes from one place. Variables that * already share a name resolve from this file's own body.dark-theme block. * styles.css's light defaults are intentionally left alone. * * Changelog: * 1.1.0 — Added legacy-variable bridge so styles.css consumers theme correctly * in dark mode. No light-mode behaviour changed. */ /* ===================================== */ /* LAYOUT CONTRACT - SHARED WIDTH */ /* ===================================== */ /* Use this class on navbar-inner, page-header-content, and container to ensure pixel-perfect left-edge alignment across all components */ .app-width { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } /* ===================================== */ /* CSS VARIABLES - LIGHT THEME (DEFAULT) */ /* ===================================== */ :root { /* Brand Colors (overridden by branding-colors.js) */ --brand-primary: #0EA5E9; --brand-primary-rgb: 14, 165, 233; --brand-secondary: #0EA5E9; --brand-secondary-rgb: 14, 165, 233; /* Background Colors */ --bg-body: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); --bg-body-solid: #f8fafc; --bg-card: #ffffff; --bg-card-hover: #f8fafc; --bg-input: #ffffff; --bg-input-focus: #ffffff; --bg-secondary: #f1f5f9; --bg-tertiary: #e2e8f0; /* Text Colors */ --text-primary: #1e293b; --text-secondary: #475569; --text-tertiary: #64748b; --text-muted: #94a3b8; --text-inverse: #ffffff; /* Border Colors */ --border-primary: #e2e8f0; --border-secondary: #cbd5e1; --border-focus: var(--brand-primary); /* Shadow */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08); /* Component-specific */ --header-bg: #ffffff; --page-icon-bg: linear-gradient(135deg, #f0f9ff, #e0f2fe); --storage-bar-bg: #bae6fd; --storage-bar-fill: linear-gradient(90deg, #0EA5E9, #2563EB); } /* ===================================== */ /* CSS VARIABLES - DARK THEME */ /* ===================================== */ body.dark-theme { /* Background Colors */ --bg-body: #0f172a; --bg-body-solid: #0f172a; --bg-card: #1e293b; --bg-card-hover: #334155; --bg-input: #0f172a; --bg-input-focus: #1e293b; --bg-secondary: #1e293b; --bg-tertiary: #334155; /* Text Colors */ --text-primary: #f1f5f9; --text-secondary: #e2e8f0; --text-tertiary: #94a3b8; --text-muted: #64748b; --text-inverse: #0f172a; /* Border Colors */ --border-primary: #334155; --border-secondary: #475569; --border-focus: var(--brand-primary); /* Shadow */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3); /* Component-specific */ --header-bg: #1e293b; --page-icon-bg: linear-gradient(135deg, #1e3a5f, #1e293b); --storage-bar-bg: #334155; --storage-bar-fill: linear-gradient(90deg, #0EA5E9, #38bdf8); } /* ===================================== */ /* LEGACY VARIABLE BRIDGE (styles.css) */ /* ===================================== */ /* * styles.css ships its own dark theme using a different variable family. * To keep ONE source of truth, we re-point styles.css's *differently-named* * variables to this file's dark values whenever dark mode is active. * * Only variables whose NAME differs from theme.css are remapped here. * Variables that share a name (--bg-card, --bg-input, --bg-secondary, * --text-primary, --text-muted, --text-inverse) are already set correctly * by the body.dark-theme block above and must NOT be redeclared — a CSS * variable that references itself (e.g. `--bg-card: var(--bg-card)`) * resolves to invalid, not to the inherited value. * * Specificity note: styles.css defines its dark values on `.dark-theme` * (0,1,0). This block uses `body.dark-theme` (0,1,1) AND theme.css loads * after styles.css — so this wins reliably without !important. * * styles.css's light defaults (:root, .light-theme) are deliberately NOT * touched here, so light mode behaves exactly as before. */ body.dark-theme { /* Backgrounds — styles.css-only names → theme.css dark values */ --bg-primary: var(--bg-body-solid); --bg-overlay: #0f172a; --bg-hover: var(--bg-card-hover); /* Note on --text-secondary: it exists in BOTH files but with different * meanings (styles.css = muted gray, theme.css = near-primary). It is * intentionally NOT remapped — theme.css is the source of truth, so its * own body.dark-theme value (#e2e8f0) stands for all consumers. */ /* Borders — styles.css-only names → theme.css dark values */ --border-color: var(--border-primary); --border-light: var(--border-primary); --border-medium: var(--border-secondary); /* Primary colour — styles.css uses --color-primary; map to brand */ --color-primary: var(--brand-primary); --color-primary-hover: var(--brand-secondary); --color-primary-light: var(--brand-primary); --color-secondary: var(--brand-secondary); /* Shadows — only styles.css-EXCLUSIVE names are set here. * --shadow-sm / --shadow-md are owned by theme.css's own dark block * above and are intentionally NOT redeclared (avoids clobbering). * --shadow-lg differs in value; --shadow-xl does not exist in theme.css. */ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6); } /* ===================================== */ /* BASE STYLES */ /* ===================================== */ body { background: var(--bg-body); color: var(--text-primary); transition: background-color 0.2s ease, color 0.2s ease; } /* Dark theme solid background (no gradient) */ body.dark-theme { background: var(--bg-body-solid); } /* ===================================== */ /* COMMON PAGE ELEMENTS */ /* ===================================== */ /* Page Header */ .page-header { background: var(--header-bg); border-bottom: 1px solid var(--border-primary); } .page-title { color: var(--text-primary); } .page-subtitle, .page-description { color: var(--text-tertiary); } .page-icon { background: var(--page-icon-bg); } /* ===================================== */ /* CARDS */ /* ===================================== */ .card, .wl-card, .link-card, .insight-card, .documents-section { background: var(--bg-card); border: 1px solid var(--border-primary); box-shadow: var(--shadow-card); } .card:hover, .link-card:hover, .insight-card:hover { border-color: var(--brand-primary); } .card-title, .link-card-title { color: var(--text-primary); } .card-description, .card-subtitle, .link-card-description { color: var(--text-tertiary); } .card-header { border-bottom-color: var(--border-primary); } /* ===================================== */ /* FORMS */ /* ===================================== */ .form-label { color: var(--text-secondary); } .form-input, .form-select, textarea.form-input { background: var(--bg-input); border: 1px solid var(--border-primary); color: var(--text-primary); } .form-input:focus, .form-select:focus, textarea.form-input:focus { background: var(--bg-input-focus); border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1); } .form-input::placeholder { color: var(--text-muted); } .form-hint { color: var(--text-muted); } .form-input:disabled { background: var(--bg-tertiary); color: var(--text-muted); } /* ===================================== */ /* BUTTONS */ /* ===================================== */ .btn-primary { background: var(--brand-secondary); color: white; } .btn-secondary { background: var(--bg-secondary); border: 1px solid var(--border-primary); color: var(--text-secondary); } .btn-secondary:hover { background: var(--bg-tertiary); } /* ===================================== */ /* TABS */ /* ===================================== */ .secondary-tab, .upload-tab { background: var(--bg-card); border: 1px solid var(--border-primary); color: var(--text-tertiary); } .secondary-tab:hover, .upload-tab:hover { border-color: var(--brand-primary); color: var(--brand-primary); } .secondary-tab.active, .upload-tab.active { background: var(--brand-primary); border-color: var(--brand-primary); color: white; } .secondary-tabs { background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); } /* ===================================== */ /* DOCUMENT ITEMS */ /* ===================================== */ .doc-item { background: var(--bg-card); border: 1px solid var(--border-primary); } .doc-item:hover { border-color: var(--brand-primary); } .doc-item-name { color: var(--text-primary); } .doc-item-meta { color: var(--text-muted); } .doc-item-icon { background: var(--bg-secondary); } .doc-action-btn { background: var(--bg-card); border: 1px solid var(--border-primary); color: var(--text-tertiary); } .doc-action-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); } /* ===================================== */ /* INFO CARDS & EMPTY STATES */ /* ===================================== */ .info-card { background: var(--bg-secondary); border: 1px solid var(--border-primary); } .info-card-text { color: var(--text-tertiary); } /* ===================================== */ /* FILE UPLOAD */ /* ===================================== */ .file-upload-area { background: var(--bg-secondary); border: 2px dashed var(--border-primary); } .file-upload-area:hover { border-color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.05); } .file-upload-primary { color: var(--text-primary); } .file-upload-secondary { color: var(--text-muted); } /* ===================================== */ /* STORAGE BAR */ /* ===================================== */ .storage-card { background: var(--page-icon-bg); border: 1px solid var(--border-primary); } .storage-bar-bg { background: var(--storage-bar-bg); } .storage-bar-fill { background: var(--storage-bar-fill); } /* ===================================== */ /* LOGO & PREVIEW */ /* ===================================== */ .logo-preview, .banner-item { background: var(--bg-secondary); border: 1px solid var(--border-primary); } .logo-preview-box { background: var(--bg-card); border: 1px solid var(--border-primary); } .logo-preview-name { color: var(--text-primary); } .banner-preview-box, .banner-item-preview { border-color: var(--border-primary); } /* ===================================== */ /* COLOR INPUTS */ /* ===================================== */ .color-picker-input { background: var(--bg-card); border-color: var(--border-primary); } .color-preview-panel { background: var(--bg-secondary); border: 1px solid var(--border-primary); } /* ===================================== */ /* DIVIDERS */ /* ===================================== */ .divider, hr, .docs-list-header { border-color: var(--border-primary); } /* ===================================== */ /* LOADING STATES */ /* ===================================== */ .loading-spinner::before { border-color: var(--border-primary); border-top-color: var(--brand-primary); } .loading-text { color: var(--text-tertiary); } /* ===================================== */ /* ACCESS DENIED */ /* ===================================== */ .access-denied-container { background: var(--bg-card); } .access-denied-title { color: var(--text-primary); } .access-denied-message { color: var(--text-tertiary); } /* ===================================== */ /* SUB PANELS */ /* ===================================== */ .sub-panel { background: var(--bg-card); } .add-doc-section { background: var(--bg-secondary); border: 1px solid var(--border-primary); } .add-doc-title { color: var(--text-primary); } /* ===================================== */ /* CATEGORY BADGES */ /* ===================================== */ .category-info-badge { background: var(--bg-card); border: 1px solid var(--border-primary); } .category-badge-name { color: var(--text-primary); } .category-badge-maps { color: var(--text-muted); } /* ===================================== */ /* SECTION HEADERS */ /* ===================================== */ .section-title, .docs-list-title { color: var(--text-primary); } .section-description { color: var(--text-tertiary); } .section-icon { background: var(--page-icon-bg); } .docs-count { background: var(--bg-tertiary); color: var(--text-muted); } /* ===================================== */ /* BANNER UPLOAD */ /* ===================================== */ .banner-upload { background: var(--bg-secondary); border: 1px solid var(--border-primary); } .banner-item-subtitle { color: var(--text-muted); } /* ===================================== */ /* QUICK STATS */ /* ===================================== */ .quick-stats { background: var(--bg-card); border: 1px solid var(--border-primary); } .stats-title { color: var(--text-primary); } .stat-value { color: var(--text-primary); } .stat-label { color: var(--text-muted); } /* ===================================== */ /* LINK CARD ICONS */ /* ===================================== */ .link-card-icon { background: var(--page-icon-bg); } .link-card-arrow { color: var(--text-muted); } .link-card:hover .link-card-arrow { color: var(--brand-primary); } /* ===================================== */ /* TOAST NOTIFICATIONS */ /* ===================================== */ .toast { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-lg); } .toast.success { background: #059669; color: white; } .toast.error { background: #dc2626; color: white; }