/** * LightSkai Global Theme Styles * * This file provides consistent light and dark theme support across all pages. * Include this CSS file in all authenticated pages after navbar.css. * * Theme is controlled by the .dark-theme class on the element, * which is managed by theme-manager.js */ /* ===================================== */ /* 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); } /* ===================================== */ /* 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; }