/* ============================================================================ Color Themes — Bravo Voice ============================================================================ Default is Midnight (the current blue dark theme). No overrides needed. Applied via data-theme attribute on . ============================================================================ */ /* ─── Daylight (Light Theme) ───────────────────────────────────────────────── Clean light backgrounds + teal accent. Best for: bright environments. ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daylight"] { --brand: #26B99A; --brand-dim: #169F85; --brand-bright: #1ABB9C; --brand-glow: rgba(38, 185, 154, 0.12); --brand-gradient: linear-gradient(135deg, #26B99A 0%, #1ABB9C 100%); --sidebar-bg: #2A3F54; --sidebar-border: #243748; --sidebar-text: rgba(255,255,255,0.55); --sidebar-hover-bg: rgba(255,255,255,0.08); --sidebar-active-bg: rgba(26, 187, 156, 0.18); --sidebar-active-txt: #ffffff; --navbar-bg: #EDEDED; --body-bg: #F7F7F7; --body-bg-alt: #EDEDED; --card-bg: #ffffff; --card-border: #E6E9ED; --text-primary: #2A3F54; --text-secondary: #73879C; --text-muted-soft: #BAB8B8; --border-soft: #E6E9ED; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 6px rgba(0,0,0,0.1); } [data-theme="daylight"] body { background: #F7F7F7; color: #2A3F54; } [data-theme="daylight"] h1, [data-theme="daylight"] h2, [data-theme="daylight"] h3, [data-theme="daylight"] h4, [data-theme="daylight"] h5, [data-theme="daylight"] h6 { color: #2A3F54; } [data-theme="daylight"] .text-muted { color: #73879C !important; } [data-theme="daylight"] .sidebar { background-color: #2A3F54 !important; border-right-color: #243748; } [data-theme="daylight"] .sidebar-brand { border-bottom-color: rgba(255,255,255,0.1) !important; } [data-theme="daylight"] .sidebar-footer { border-top-color: rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.35); } [data-theme="daylight"] .navbar { background: #EDEDED !important; color: #2A3F54; } [data-theme="daylight"] .navbar-brand { color: #2A3F54 !important; } [data-theme="daylight"] .username-badge { color: #2A3F54; } [data-theme="daylight"] .btn-logout { color: #73879C; border-color: #D9DEE4; } [data-theme="daylight"] .btn-logout:hover { background: #E74C3C; border-color: #E74C3C; color: #fff; } [data-theme="daylight"] .card { background: #ffffff; border-color: #E6E9ED; } [data-theme="daylight"] .card-header { background: #F7F7F7; border-bottom-color: #E6E9ED; color: #2A3F54; } [data-theme="daylight"] .form-control, [data-theme="daylight"] .form-select { background-color: #ffffff; border-color: #D9DEE4; color: #2A3F54; } [data-theme="daylight"] .form-control:focus, [data-theme="daylight"] .form-select:focus { border-color: #26B99A; box-shadow: 0 0 0 0.2rem rgba(38, 185, 154, 0.15); } [data-theme="daylight"] .form-label { color: #5A738E; } [data-theme="daylight"] .form-text { color: #73879C !important; } [data-theme="daylight"] .form-check-label { color: #2A3F54; } [data-theme="daylight"] .table { color: #2A3F54; --bs-table-bg: #fff; --bs-table-border-color: #E6E9ED; --bs-table-striped-bg: #F7F7F7; --bs-table-hover-bg: #EDEDED; } [data-theme="daylight"] .btn-brand { background: #26B99A; border-color: #26B99A; color: #fff; } [data-theme="daylight"] .btn-brand:hover { background: #169F85; border-color: #169F85; } [data-theme="daylight"] .btn-outline-dark { color: #5A738E; border-color: #D9DEE4; } [data-theme="daylight"] .btn-outline-dark:hover { background: #2A3F54; color: #fff; } [data-theme="daylight"] .api-key-display { background: #EDEDED; color: #2A3F54; border-color: #E6E9ED; } [data-theme="daylight"] .badge.bg-info { background-color: #3498DB !important; } [data-theme="daylight"] .badge.bg-success { background-color: #26B99A !important; } [data-theme="daylight"] .sync-indicator span:last-child { color: #2A3F54; } [data-theme="daylight"] .meta-text { color: #73879C; } [data-theme="daylight"] .page-title { color: #2A3F54; } [data-theme="daylight"] .alert-success { background: #d4edda; border-color: #c3e6cb; color: #155724; } [data-theme="daylight"] .alert-danger { background: #f8d7da; border-color: #f5c6cb; color: #721c24; } /* ─── Night Forest (Bravo Style) ───────────────────────────────────────────── Deep dark greens + emerald accent. Best for: dark rooms. ───────────────────────────────────────────────────────────────────────────── */ [data-theme="night-forest"] { --brand: #10B981; --brand-dim: #059669; --brand-bright: #34D399; --brand-glow: rgba(16, 185, 129, 0.15); --brand-gradient: linear-gradient(135deg, #10B981 0%, #06B6D4 100%); --sidebar-bg: #0B1210; --sidebar-border: #1E2D24; --sidebar-text: #6B9078; --sidebar-hover-bg: rgba(16, 185, 129, 0.09); --sidebar-active-bg: rgba(16, 185, 129, 0.18); --sidebar-active-txt: #D1FAE5; --navbar-bg: #0B1210; --body-bg: #0F1915; --body-bg-alt: #131F19; --card-bg: #162019; --card-border: #1E2D24; --text-primary: #E4F0E8; --text-secondary: #6B9078; --text-muted-soft: #3D5E48; --border-soft: #1E2D24; --shadow-sm: 0 1px 4px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3); --shadow-md: 0 4px 20px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35); } [data-theme="night-forest"] .sidebar { background-color: #0B1210 !important; border-right-color: #1E2D24; } [data-theme="night-forest"] .sidebar-brand { border-bottom-color: #1E2D24 !important; } [data-theme="night-forest"] .sidebar-footer { border-top-color: #1E2D24 !important; } [data-theme="night-forest"] .card-header { background: #0F1915; border-bottom-color: #1E2D24; color: #E4F0E8; } [data-theme="night-forest"] .api-key-display { background: #0F1915; border-color: #1E2D24; color: #E4F0E8; } [data-theme="night-forest"] .form-control, [data-theme="night-forest"] .form-select { background-color: #0F1915; border-color: #1E2D24; color: #E4F0E8; } [data-theme="night-forest"] .form-control:focus, [data-theme="night-forest"] .form-select:focus { border-color: #10B981; box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.15); } [data-theme="night-forest"] .btn-brand { background: #10B981; border-color: #10B981; } [data-theme="night-forest"] .btn-brand:hover { background: #059669; border-color: #059669; } [data-theme="night-forest"] .btn-outline-dark { color: #8AAB96; border-color: #2A3D30; } [data-theme="night-forest"] .btn-outline-dark:hover { background: #1E2D24; color: #E4F0E8; border-color: #1E2D24; } /* ─── Warm Dusk (Amber / Low Blue Light) ───────────────────────────────────── Warm dark tones + amber/gold accent. Best for: evening, eye comfort. ───────────────────────────────────────────────────────────────────────────── */ [data-theme="warm-dusk"] { --brand: #E89B3A; --brand-dim: #D08530; --brand-bright: #F0B860; --brand-glow: rgba(232, 155, 58, 0.15); --brand-gradient: linear-gradient(135deg, #E89B3A 0%, #F0B860 100%); --sidebar-bg: #12100C; --sidebar-border: #2A2420; --sidebar-text: #8A7E6E; --sidebar-hover-bg: rgba(232, 155, 58, 0.09); --sidebar-active-bg: rgba(232, 155, 58, 0.18); --sidebar-active-txt: #FDE68A; --navbar-bg: #12100C; --body-bg: #141110; --body-bg-alt: #1A1610; --card-bg: #1C1816; --card-border: #2A2420; --text-primary: #E8DFD4; --text-secondary: #8A7E6E; --text-muted-soft: #4A4238; --border-soft: #2A2420; --shadow-sm: 0 1px 4px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3); --shadow-md: 0 4px 20px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35); } [data-theme="warm-dusk"] .sidebar { background-color: #12100C !important; border-right-color: #2A2420; } [data-theme="warm-dusk"] .sidebar-brand { border-bottom-color: #2A2420 !important; } [data-theme="warm-dusk"] .sidebar-footer { border-top-color: #2A2420 !important; } [data-theme="warm-dusk"] .card-header { background: #141110; border-bottom-color: #2A2420; color: #E8DFD4; } [data-theme="warm-dusk"] .api-key-display { background: #141110; border-color: #2A2420; color: #E8DFD4; } [data-theme="warm-dusk"] .form-control, [data-theme="warm-dusk"] .form-select { background-color: #141110; border-color: #2A2420; color: #E8DFD4; } [data-theme="warm-dusk"] .form-control:focus, [data-theme="warm-dusk"] .form-select:focus { border-color: #E89B3A; box-shadow: 0 0 0 0.2rem rgba(232, 155, 58, 0.15); } [data-theme="warm-dusk"] .btn-brand { background: #E89B3A; border-color: #E89B3A; color: #12100C; } [data-theme="warm-dusk"] .btn-brand:hover { background: #D08530; border-color: #D08530; color: #12100C; } [data-theme="warm-dusk"] .btn-outline-dark { color: #A89C8A; border-color: #3A3228; } [data-theme="warm-dusk"] .btn-outline-dark:hover { background: #2A2420; color: #E8DFD4; border-color: #2A2420; } /* ============================================================================ Theme Selector Card Styles (shared) ============================================================================ */ .theme-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 12px; } .theme-card { position: relative; border: 2px solid var(--card-border, #151518); border-radius: 12px; padding: 16px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; background: var(--card-bg, #111118); } .theme-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .theme-card.active { border-color: var(--brand, #2563EB); box-shadow: 0 0 0 3px var(--brand-glow, rgba(37, 99, 235, 0.2)); } .theme-card .theme-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand, #2563EB); display: none; align-items: center; justify-content: center; } .theme-card.active .theme-check { display: flex; } .theme-card .theme-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; color: var(--text-primary, #E8E8F0); } .theme-card .theme-desc { font-size: 0.78rem; color: var(--text-secondary, #6B6B8A); margin-bottom: 12px; line-height: 1.4; } .theme-preview { height: 48px; border-radius: 8px; display: flex; overflow: hidden; border: 1px solid rgba(128, 128, 128, 0.15); margin-bottom: 10px; } .theme-preview-sidebar { width: 28%; display: flex; flex-direction: column; justify-content: center; padding: 4px 6px; gap: 3px; } .theme-preview-sidebar span { display: block; height: 3px; border-radius: 2px; opacity: 0.5; } .theme-preview-content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 6px 8px; gap: 4px; } .theme-preview-content span { display: block; height: 3px; border-radius: 2px; opacity: 0.4; } .theme-preview-content span:first-child { width: 60%; height: 4px; opacity: 0.7; } .theme-best-for { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary, #6B6B8A); display: flex; align-items: center; gap: 4px; } .theme-best-for svg { opacity: 0.6; }