/* ============================================================ Color Themes — 6 Palettes (App-Wide) Usage: Default (no attribute or indigo) = Indigo palette Loaded on login pages AND app pages via app-theme-loader.js ============================================================ */ /* --- Default / Indigo --- */ /* :root only used when NO data-color-theme is set (fallback) */ :root:not([data-color-theme]) { --lp-primary: #6366f1; --lp-hover: #4f46e5; --lp-dark: #3730a3; --lp-light: #eef2ff; --lp-lighter: #e0e7ff; --lp-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --lp-gradient-bg: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%); --lp-gradient-bg-light: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #c7d2fe 100%); --lp-dark-bg: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%); --lp-focus-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25); --lp-shape-color: rgba(99, 102, 241, 0.15); --lp-btn-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); --lp-btn-shadow-hover: 0 6px 20px rgba(99, 102, 241, 0.5); --lp-sidebar-bg: linear-gradient(180deg, #6366f1 0%, #4f46e5 50%, #3730a3 100%); --lp-section-header-bg: linear-gradient(135deg, #6366f1, #8b5cf6); } [data-color-theme="indigo"] { --lp-primary: #6366f1; --lp-hover: #4f46e5; --lp-dark: #3730a3; --lp-light: #eef2ff; --lp-lighter: #e0e7ff; --lp-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --lp-gradient-bg: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #4338ca 100%); --lp-gradient-bg-light: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #c7d2fe 100%); --lp-dark-bg: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%); --lp-focus-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25); --lp-shape-color: rgba(99, 102, 241, 0.15); --lp-btn-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); --lp-btn-shadow-hover: 0 6px 20px rgba(99, 102, 241, 0.5); --lp-sidebar-bg: linear-gradient(180deg, #6366f1 0%, #4f46e5 50%, #3730a3 100%); --lp-section-header-bg: linear-gradient(135deg, #6366f1, #8b5cf6); } /* --- Emerald --- */ [data-color-theme="emerald"] { --lp-primary: #10b981; --lp-hover: #059669; --lp-dark: #047857; --lp-light: #ecfdf5; --lp-lighter: #d1fae5; --lp-gradient: linear-gradient(135deg, #10b981 0%, #34d399 100%); --lp-gradient-bg: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%); --lp-gradient-bg-light: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%); --lp-dark-bg: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #065f46 100%); --lp-focus-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25); --lp-shape-color: rgba(16, 185, 129, 0.15); --lp-btn-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); --lp-btn-shadow-hover: 0 6px 20px rgba(16, 185, 129, 0.5); --lp-sidebar-bg: linear-gradient(180deg, #10b981 0%, #059669 50%, #047857 100%); --lp-section-header-bg: linear-gradient(135deg, #10b981, #34d399); } /* --- Rose --- */ [data-color-theme="rose"] { --lp-primary: #f43f5e; --lp-hover: #e11d48; --lp-dark: #be123c; --lp-light: #fff1f2; --lp-lighter: #ffe4e6; --lp-gradient: linear-gradient(135deg, #f43f5e 0%, #fb7185 100%); --lp-gradient-bg: linear-gradient(135deg, #f43f5e 0%, #e11d48 50%, #be123c 100%); --lp-gradient-bg-light: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 50%, #fecdd3 100%); --lp-dark-bg: linear-gradient(135deg, #1c0a0e 0%, #4c0519 50%, #881337 100%); --lp-focus-shadow: 0 0 0 0.2rem rgba(244, 63, 94, 0.25); --lp-shape-color: rgba(244, 63, 94, 0.15); --lp-btn-shadow: 0 4px 15px rgba(244, 63, 94, 0.4); --lp-btn-shadow-hover: 0 6px 20px rgba(244, 63, 94, 0.5); --lp-sidebar-bg: linear-gradient(180deg, #f43f5e 0%, #e11d48 50%, #be123c 100%); --lp-section-header-bg: linear-gradient(135deg, #f43f5e, #fb7185); } /* --- Amber --- */ [data-color-theme="amber"] { --lp-primary: #f59e0b; --lp-hover: #d97706; --lp-dark: #b45309; --lp-light: #fffbeb; --lp-lighter: #fef3c7; --lp-gradient: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); --lp-gradient-bg: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%); --lp-gradient-bg-light: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%); --lp-dark-bg: linear-gradient(135deg, #1c1004 0%, #451a03 50%, #78350f 100%); --lp-focus-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25); --lp-shape-color: rgba(245, 158, 11, 0.15); --lp-btn-shadow: 0 4px 15px rgba(245, 158, 11, 0.4); --lp-btn-shadow-hover: 0 6px 20px rgba(245, 158, 11, 0.5); --lp-sidebar-bg: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%); --lp-section-header-bg: linear-gradient(135deg, #f59e0b, #fbbf24); } /* --- Ocean Blue --- */ [data-color-theme="ocean"] { --lp-primary: #0ea5e9; --lp-hover: #0284c7; --lp-dark: #0369a1; --lp-light: #f0f9ff; --lp-lighter: #e0f2fe; --lp-gradient: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%); --lp-gradient-bg: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%); --lp-gradient-bg-light: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%); --lp-dark-bg: linear-gradient(135deg, #0c1929 0%, #0c4a6e 50%, #075985 100%); --lp-focus-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.25); --lp-shape-color: rgba(14, 165, 233, 0.15); --lp-btn-shadow: 0 4px 15px rgba(14, 165, 233, 0.4); --lp-btn-shadow-hover: 0 6px 20px rgba(14, 165, 233, 0.5); --lp-sidebar-bg: linear-gradient(180deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%); --lp-section-header-bg: linear-gradient(135deg, #0ea5e9, #38bdf8); } /* --- Classic Blue (Royal Blue) --- */ [data-color-theme="classic"] { --lp-primary: #2563eb; --lp-hover: #1d4ed8; --lp-dark: #1e40af; --lp-light: #eff6ff; --lp-lighter: #dbeafe; --lp-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); --lp-gradient-bg: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%); --lp-gradient-bg-light: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%); --lp-dark-bg: linear-gradient(135deg, #0a1628 0%, #1e3a5f 50%, #1e40af 100%); --lp-focus-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25); --lp-shape-color: rgba(37, 99, 235, 0.15); --lp-btn-shadow: 0 4px 15px rgba(37, 99, 235, 0.4); --lp-btn-shadow-hover: 0 6px 20px rgba(37, 99, 235, 0.5); --lp-sidebar-bg: linear-gradient(180deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%); --lp-section-header-bg: linear-gradient(135deg, #2563eb, #3b82f6); } /* ============================================================ Theme Picker UI — colored circles below login form ============================================================ */ .login-theme-picker { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.08); } .theme-picker-label { font-size: 0.8rem; color: #94a3b8; font-weight: 500; letter-spacing: 0.3px; } .theme-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all 0.25s ease; outline: none; padding: 0; position: relative; } .theme-dot:hover { transform: scale(1.2); box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .theme-dot.active { border-color: #1e293b; transform: scale(1.15); box-shadow: 0 0 0 3px rgba(255,255,255,0.8), 0 2px 8px rgba(0,0,0,0.2); } /* Dark mode adjustments */ [data-theme="dark"] .theme-picker-label { color: #64748b; } [data-theme="dark"] .theme-dot.active { border-color: #f1f5f9; box-shadow: 0 0 0 3px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3); } [data-theme="dark"] .login-theme-picker { border-top-color: rgba(255,255,255,0.1); }