/* ============================================================================= BlueLine Backflow CRM — Theme System (v1.15.0) 6 named palettes applied via data-theme="" on . When no data-theme is set, the existing main.css colors apply unchanged. ============================================================================= */ /* Each theme defines the same set of variables. The variables are then consumed by the per-theme override rules below. Keeping variables here means any new piece of UI that consumes var(--blf-*) gets themed too. */ :root { --blf-bg: #f5f7fa; --blf-bg-card: #ffffff; --blf-bg-topbar: #1B3A6B; --blf-bg-sidebar: #ffffff; --blf-text: #2d3748; --blf-text-muted: #718096; --blf-text-heading: #1B3A6B; --blf-border: #e2e8f0; --blf-primary: #2E6DA4; --blf-primary-dark: #1B3A6B; --blf-accent: #4299e1; --blf-success: #276749; --blf-danger: #c53030; --blf-warning: #c05621; } /* ---- Ocean: bright sky blue / teal -------------------------------------- */ html[data-theme="ocean"] { --blf-bg: #f0f9ff; --blf-bg-card: #ffffff; --blf-bg-topbar: #0c4a6e; --blf-bg-sidebar: #e0f2fe; --blf-text: #0f172a; --blf-text-muted: #475569; --blf-text-heading: #0c4a6e; --blf-border: #bae6fd; --blf-primary: #0284c7; --blf-primary-dark: #075985; --blf-accent: #06b6d4; --blf-success: #059669; --blf-danger: #dc2626; --blf-warning: #d97706; } /* ---- Sunset: warm orange / peach ---------------------------------------- */ html[data-theme="sunset"] { --blf-bg: #fff7ed; --blf-bg-card: #ffffff; --blf-bg-topbar: #9a3412; --blf-bg-sidebar: #ffedd5; --blf-text: #431407; --blf-text-muted: #92400e; --blf-text-heading: #9a3412; --blf-border: #fed7aa; --blf-primary: #ea580c; --blf-primary-dark: #c2410c; --blf-accent: #f97316; --blf-success: #15803d; --blf-danger: #b91c1c; --blf-warning: #a16207; } /* ---- Forest: sage / cream ---------------------------------------------- */ html[data-theme="forest"] { --blf-bg: #f7faf5; --blf-bg-card: #ffffff; --blf-bg-topbar: #14532d; --blf-bg-sidebar: #ecfccb; --blf-text: #1a2e05; --blf-text-muted: #4d7c0f; --blf-text-heading: #14532d; --blf-border: #d9f99d; --blf-primary: #16a34a; --blf-primary-dark: #166534; --blf-accent: #84cc16; --blf-success: #166534; --blf-danger: #b91c1c; --blf-warning: #a16207; } /* ---- Slate: cool monochrome -------------------------------------------- */ html[data-theme="slate"] { --blf-bg: #f8fafc; --blf-bg-card: #ffffff; --blf-bg-topbar: #1e293b; --blf-bg-sidebar: #f1f5f9; --blf-text: #0f172a; --blf-text-muted: #475569; --blf-text-heading: #1e293b; --blf-border: #cbd5e1; --blf-primary: #475569; --blf-primary-dark: #334155; --blf-accent: #64748b; --blf-success: #166534; --blf-danger: #991b1b; --blf-warning: #92400e; } /* ---- Midnight: premium dark with cool blues ---------------------------- */ html[data-theme="midnight"] { --blf-bg: #0f172a; --blf-bg-card: #1e293b; --blf-bg-topbar: #020617; --blf-bg-sidebar: #020617; --blf-text: #e2e8f0; --blf-text-muted: #94a3b8; --blf-text-heading: #f1f5f9; --blf-border: #334155; --blf-primary: #38bdf8; --blf-primary-dark: #0284c7; --blf-accent: #818cf8; --blf-success: #4ade80; --blf-danger: #f87171; --blf-warning: #fbbf24; } /* ============================================================================= Per-theme overrides. Apply variables to actual selectors used by main.css. We use the [data-theme] attribute selector with high specificity so existing rules don't fight us. The default (classic) theme uses no data-theme so the original CSS still wins; these blocks only activate for non-default themes. ============================================================================= */ html[data-theme]:not([data-theme="classic"]) body { background: var(--blf-bg) !important; color: var(--blf-text) !important; } html[data-theme]:not([data-theme="classic"]) .topbar { background: var(--blf-bg-topbar) !important; } html[data-theme]:not([data-theme="classic"]) .sidebar { background: var(--blf-bg-sidebar) !important; border-right-color: var(--blf-border) !important; } html[data-theme]:not([data-theme="classic"]) .sidebar .nav-item { color: var(--blf-text-muted) !important; } html[data-theme]:not([data-theme="classic"]) .sidebar .nav-item:hover { background: rgba(0,0,0,.05) !important; color: var(--blf-text) !important; } html[data-theme="midnight"] .sidebar .nav-item:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; } html[data-theme]:not([data-theme="classic"]) .sidebar .nav-item.active{ background: var(--blf-primary) !important; color: #fff !important; } html[data-theme]:not([data-theme="classic"]) .sidebar .nav-group-label{ color: var(--blf-text-muted) !important; } html[data-theme]:not([data-theme="classic"]) .card, html[data-theme]:not([data-theme="classic"]) .doc-section { background: var(--blf-bg-card) !important; border-color: var(--blf-border) !important; color: var(--blf-text) !important; } html[data-theme]:not([data-theme="classic"]) .card-header { background: var(--blf-bg-card) !important; border-bottom-color: var(--blf-border) !important; color: var(--blf-text-heading) !important; } html[data-theme]:not([data-theme="classic"]) h1, html[data-theme]:not([data-theme="classic"]) h2, html[data-theme]:not([data-theme="classic"]) h3, html[data-theme]:not([data-theme="classic"]) h4 { color: var(--blf-text-heading) !important; } html[data-theme]:not([data-theme="classic"]) a { color: var(--blf-primary); } html[data-theme]:not([data-theme="classic"]) a:hover { color: var(--blf-primary-dark); } html[data-theme]:not([data-theme="classic"]) table th { background: var(--blf-primary-dark) !important; color: #fff !important; } html[data-theme]:not([data-theme="classic"]) table td { border-bottom-color: var(--blf-border) !important; color: var(--blf-text) !important; } html[data-theme="midnight"] table tr:hover td { background: rgba(255,255,255,.04) !important; } html[data-theme]:not([data-theme="classic"]):not([data-theme="midnight"]) table tr:hover td { background: rgba(0,0,0,.025) !important; } html[data-theme]:not([data-theme="classic"]) input, html[data-theme]:not([data-theme="classic"]) select, html[data-theme]:not([data-theme="classic"]) textarea { background: var(--blf-bg-card) !important; border-color: var(--blf-border) !important; color: var(--blf-text) !important; } html[data-theme="midnight"] input, html[data-theme="midnight"] select, html[data-theme="midnight"] textarea { background: #0f172a !important; } html[data-theme]:not([data-theme="classic"]) .btn-primary { background: var(--blf-primary) !important; border-color: var(--blf-primary-dark) !important; } html[data-theme]:not([data-theme="classic"]) .btn-secondary { background: var(--blf-bg-card) !important; border-color: var(--blf-border) !important; color: var(--blf-text) !important; } html[data-theme="midnight"] .btn-secondary { background: #1e293b !important; color: var(--blf-text) !important; } html[data-theme]:not([data-theme="classic"]) .dropdown-menu { background: var(--blf-bg-card) !important; border-color: var(--blf-border) !important; } html[data-theme]:not([data-theme="classic"]) .dropdown-item { color: var(--blf-text) !important; } html[data-theme]:not([data-theme="classic"]) .dropdown-item:hover { background: rgba(0,0,0,.05) !important; } html[data-theme="midnight"] .dropdown-item:hover { background: rgba(255,255,255,.06) !important; } html[data-theme]:not([data-theme="classic"]) .alert-success { background: color-mix(in srgb, var(--blf-success) 15%, var(--blf-bg-card)) !important; border-color: var(--blf-success) !important; color: var(--blf-success) !important; } html[data-theme]:not([data-theme="classic"]) .alert-danger { background: color-mix(in srgb, var(--blf-danger) 15%, var(--blf-bg-card)) !important; border-color: var(--blf-danger) !important; color: var(--blf-danger) !important; } /* Smooth color transitions when switching themes */ html, body, .topbar, .sidebar, .card, .nav-item, table, .btn, .dropdown-menu, input, select, textarea { transition: background-color .22s ease, color .22s ease, border-color .22s ease; } /* ============================================================================ v1.16.2: theme polish Fixes for: invisible primary button text, low-contrast secondary buttons, and inline-styled light backgrounds inheriting dark body text in dark themes. ============================================================================ */ /* -- Button text colors -- */ html[data-theme]:not([data-theme="classic"]) .btn-primary, html[data-theme]:not([data-theme="classic"]) .btn-primary:link, html[data-theme]:not([data-theme="classic"]) .btn-primary:visited { color: #ffffff !important; } html[data-theme]:not([data-theme="classic"]) .btn-secondary, html[data-theme]:not([data-theme="classic"]) .btn-secondary:link, html[data-theme]:not([data-theme="classic"]) .btn-secondary:visited { color: var(--blf-text) !important; } html[data-theme="midnight"] .btn-secondary, html[data-theme="midnight"] .btn-secondary:link, html[data-theme="midnight"] .btn-secondary:visited { background: var(--blf-bg-card) !important; color: var(--blf-text) !important; } html[data-theme]:not([data-theme="classic"]) .btn-danger, html[data-theme]:not([data-theme="classic"]) .btn-danger:link, html[data-theme]:not([data-theme="classic"]) .btn-danger:visited { color: #ffffff !important; } html[data-theme]:not([data-theme="classic"]) .btn-success, html[data-theme]:not([data-theme="classic"]) .btn-success:link, html[data-theme]:not([data-theme="classic"]) .btn-success:visited { color: #ffffff !important; } /* Hover states for buttons */ html[data-theme]:not([data-theme="classic"]) .btn-primary:hover { color: #ffffff !important; filter: brightness(0.92); } html[data-theme]:not([data-theme="classic"]) .btn-secondary:hover { color: var(--blf-text) !important; filter: brightness(0.92); } /* -- Inline-styled white/light card backgrounds become theme-aware in dark mode -- */ /* These selectors match common inline "background:#fff" or "background: #fff" patterns. */ html[data-theme="midnight"] [style*="background:#fff"]:not(.topbar):not(.sidebar):not(.dropdown-menu), html[data-theme="midnight"] [style*="background: #fff"]:not(.topbar):not(.sidebar):not(.dropdown-menu), html[data-theme="midnight"] [style*="background:#FFF"]:not(.topbar):not(.sidebar):not(.dropdown-menu), html[data-theme="midnight"] [style*="background:#ffffff"]:not(.topbar):not(.sidebar):not(.dropdown-menu), html[data-theme="midnight"] [style*="background: #ffffff"]:not(.topbar):not(.sidebar):not(.dropdown-menu) { background-color: var(--blf-bg-card) !important; color: var(--blf-text) !important; } /* light gray bg variants commonly used for stat tiles */ html[data-theme="midnight"] [style*="background:#F7FAFC"], html[data-theme="midnight"] [style*="background:#f7fafc"], html[data-theme="midnight"] [style*="background: #F7FAFC"], html[data-theme="midnight"] [style*="background: #f7fafc"], html[data-theme="midnight"] [style*="background:#f5f7fa"], html[data-theme="midnight"] [style*="background:#edf2f7"] { background-color: var(--blf-bg-card) !important; color: var(--blf-text) !important; } /* CSS var fallback pattern used by Invoices index */ html[data-theme="midnight"] [style*="background:var(--bg-secondary"] { background-color: var(--blf-bg-card) !important; color: var(--blf-text) !important; } /* warm-tinted alert banners (Action Required, etc.) need readable text in dark themes */ html[data-theme="midnight"] [style*="background:#fff8ed"], html[data-theme="midnight"] [style*="background:#FFFBEB"], html[data-theme="midnight"] [style*="background:#fffaf0"] { background-color: rgba(251, 191, 36, 0.10) !important; color: var(--blf-text) !important; border-color: rgba(251, 191, 36, 0.45) !important; } /* Cascade text color into descendants of these themed boxes so children inherit readable color even if parent has inline color. We have to be careful with !important to not break specifically-colored badges/pills inside. */ html[data-theme="midnight"] [style*="background:#fff"]:not(.topbar):not(.sidebar):not(.dropdown-menu) p, html[data-theme="midnight"] [style*="background:#fff"]:not(.topbar):not(.sidebar):not(.dropdown-menu) li, html[data-theme="midnight"] [style*="background:#fff"]:not(.topbar):not(.sidebar):not(.dropdown-menu) span:not([style*="color:"]), html[data-theme="midnight"] [style*="background:#fff"]:not(.topbar):not(.sidebar):not(.dropdown-menu) div:not([style*="color:"]), html[data-theme="midnight"] [style*="background:#fff8ed"] p, html[data-theme="midnight"] [style*="background:#fff8ed"] span:not([style*="color:"]), html[data-theme="midnight"] [style*="background:#F7FAFC"] *:not([style*="color:"]), html[data-theme="midnight"] [style*="background:#f7fafc"] *:not([style*="color:"]) { color: var(--blf-text) !important; } /* For LIGHT non-classic themes (ocean, sunset, forest, slate), the inline #fff backgrounds are still fine, but stat tiles using #F7FAFC etc. should pick up the theme's softer card background to look cohesive. */ html[data-theme="ocean"] [style*="background:#F7FAFC"], html[data-theme="ocean"] [style*="background:#f7fafc"], html[data-theme="sunset"] [style*="background:#F7FAFC"], html[data-theme="sunset"] [style*="background:#f7fafc"], html[data-theme="forest"] [style*="background:#F7FAFC"], html[data-theme="forest"] [style*="background:#f7fafc"], html[data-theme="slate"] [style*="background:#F7FAFC"], html[data-theme="slate"] [style*="background:#f7fafc"] { background-color: var(--blf-bg-card) !important; } /* topbar New Quote / New Customer dropdown items need to stay readable in all themes */ html[data-theme]:not([data-theme="classic"]) .dropdown-menu .dropdown-item { color: var(--blf-text) !important; } /* Inputs and selects inside themed cards */ html[data-theme="midnight"] [style*="background:#fff"]:not(.topbar) input, html[data-theme="midnight"] [style*="background:#fff"]:not(.topbar) select, html[data-theme="midnight"] [style*="background:#fff"]:not(.topbar) textarea { background-color: var(--blf-bg) !important; color: var(--blf-text) !important; border-color: var(--blf-border) !important; } /* end v1.16.2 */ /* ============================================================================ v1.16.6: actreq_fontsize Action Required banner per-theme colors + --blf-font-size variable. ============================================================================ */ :root { --blf-font-size: 16px; } html { font-size: var(--blf-font-size, 16px); } html[data-theme="ocean"] [style*="background:#fff8ed"] { background-color: #e0f2fe !important; border-color: #38bdf8 !important; color: #075985 !important; } html[data-theme="sunset"] [style*="background:#fff8ed"] { background-color: #ffedd5 !important; border-color: #ea580c !important; color: #9a3412 !important; } html[data-theme="forest"] [style*="background:#fff8ed"] { background-color: #ecfccb !important; border-color: #16a34a !important; color: #14532d !important; } html[data-theme="slate"] [style*="background:#fff8ed"] { background-color: #e2e8f0 !important; border-color: #475569 !important; color: #1e293b !important; } html[data-theme="midnight"] [style*="background:#fff8ed"] { background-color: rgba(251, 191, 36, 0.10) !important; border-color: rgba(251, 191, 36, 0.45) !important; color: #fbbf24 !important; } html[data-theme]:not([data-theme="classic"]) [style*="background:#fff8ed"] a:not([style*="color"]), html[data-theme]:not([data-theme="classic"]) [style*="background:#fff8ed"] span:not([style*="color"]), html[data-theme]:not([data-theme="classic"]) [style*="background:#fff8ed"] div:not([style*="color"]) { color: inherit !important; } /* end v1.16.6 */ /* ============================================================================ v1.17.0: appearance_prefs UI Density — three step sizes for padding/heights via data-density on . Default (no attribute) == comfortable. ============================================================================ */ html[data-density="compact"] .card { padding: 0; } html[data-density="compact"] .card-header { padding: 10px 14px; } html[data-density="compact"] .card > div:not(.card-header):not(.table-wrap) { padding: 12px 14px; } html[data-density="compact"] table td, html[data-density="compact"] table th { padding: 6px 10px; font-size: 0.82rem; } html[data-density="compact"] .nav-item { padding: 7px 14px; font-size: 0.85rem; } html[data-density="compact"] .nav-group-label { padding: 12px 14px 4px; } html[data-density="compact"] .btn { padding: 6px 12px; font-size: 0.85rem; } html[data-density="compact"] .btn-sm { padding: 4px 8px; font-size: 0.78rem; } html[data-density="compact"] .form-group { margin-bottom: 8px; } html[data-density="compact"] h1 { font-size: 1.4rem; } html[data-density="compact"] h2 { font-size: 1.15rem; } html[data-density="compact"] h3 { font-size: 1.0rem; } html[data-density="spacious"] .card { padding: 0; } html[data-density="spacious"] .card-header { padding: 22px 28px; } html[data-density="spacious"] .card > div:not(.card-header):not(.table-wrap) { padding: 28px 32px; } html[data-density="spacious"] table td, html[data-density="spacious"] table th { padding: 18px 22px; font-size: 1.0rem; } html[data-density="spacious"] .nav-item { padding: 16px 24px; font-size: 1.0rem; } html[data-density="spacious"] .nav-group-label { padding: 22px 24px 8px; } html[data-density="spacious"] .btn { padding: 14px 22px; font-size: 1.0rem; } html[data-density="spacious"] .btn-sm { padding: 10px 16px; font-size: 0.9rem; } html[data-density="spacious"] .form-group { margin-bottom: 18px; } html[data-density="spacious"] h1 { font-size: 1.85rem; } html[data-density="spacious"] h2 { font-size: 1.5rem; } html[data-density="spacious"] h3 { font-size: 1.25rem; } /* Smooth density transitions */ .card, table td, table th, .nav-item, .btn, .form-group, h1, h2, h3 { transition: padding .15s ease, font-size .15s ease; } /* end v1.17.0 */ /* ============================================================================ v1.17.1: appearance_adv - Reduce motion - High contrast - Compact sidebar - Custom accent color override (via inline style on ) ============================================================================ */ /* Reduce motion: disable all transitions and animations app-wide */ html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } /* High contrast: bolder borders, stronger text, less subtle grays */ html[data-contrast="high"] { --blf-border: #000000; --blf-text-muted: #1a202c; } html[data-contrast="high"] body { color: #000000 !important; } html[data-contrast="high"][data-theme="midnight"] body { color: #ffffff !important; } html[data-contrast="high"] .card, html[data-contrast="high"] .card-header, html[data-contrast="high"] input, html[data-contrast="high"] select, html[data-contrast="high"] textarea, html[data-contrast="high"] table th, html[data-contrast="high"] table td { border-width: 2px !important; } html[data-contrast="high"] .btn { border-width: 2px !important; font-weight: 700 !important; } html[data-contrast="high"] .nav-item.active { outline: 2px solid currentColor !important; } html[data-contrast="high"] a { text-decoration: underline !important; } /* Compact sidebar: icons only, labels hidden, hover tooltips */ html[data-sidebar-mode="compact"] .sidebar { width: 56px !important; overflow: visible; } html[data-sidebar-mode="compact"] .sidebar .nav-label { display: none !important; } html[data-sidebar-mode="compact"] .sidebar .nav-group-label { font-size: 0; height: 8px; padding: 4px 0; border-top: 1px solid var(--blf-border, #e2e8f0); margin: 4px 8px; } html[data-sidebar-mode="compact"] .sidebar .nav-group-label::after { display: none; } html[data-sidebar-mode="compact"] .sidebar .nav-item { justify-content: center; padding: 12px 4px; position: relative; } html[data-sidebar-mode="compact"] .sidebar .nav-icon { font-size: 1.4rem; margin: 0; } html[data-sidebar-mode="compact"] .sidebar .nav-badge { position: absolute; top: 6px; right: 6px; font-size: 9px; padding: 1px 5px; } html[data-sidebar-mode="compact"] .sidebar .nav-item:hover::after { content: attr(data-label); position: absolute; left: 60px; top: 50%; transform: translateY(-50%); background: var(--blf-bg-topbar, #1B3A6B); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 0.82rem; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.2); z-index: 10000; pointer-events: none; } html[data-sidebar-mode="compact"] .main-content { margin-left: 56px !important; } /* Custom accent color: takes effect when --blf-custom-accent is set inline. Use a fallback so removing the inline style restores theme color. */ html[style*="--blf-custom-accent"] { --blf-primary: var(--blf-custom-accent, var(--blf-primary)); } html[style*="--blf-custom-accent"] .btn-primary { background-color: var(--blf-custom-accent) !important; } html[style*="--blf-custom-accent"] a:not(.btn):not(.nav-item):not(.dropdown-item) { color: var(--blf-custom-accent) !important; } html[style*="--blf-custom-accent"] .sidebar .nav-item.active { background-color: var(--blf-custom-accent) !important; } /* end v1.17.1 */ /* ============================================================================ v1.17.2: three_more_themes Three additional palettes (Carbon, Lavender, Coffee). ============================================================================ */ /* ---- Carbon: true dark gray/black with cyan accent --------------------- */ html[data-theme="carbon"] { --blf-bg: #0a0a0a; --blf-bg-card: #1a1a1a; --blf-bg-topbar: #000000; --blf-bg-sidebar: #000000; --blf-text: #e5e5e5; --blf-text-muted: #999999; --blf-text-heading: #ffffff; --blf-border: #2a2a2a; --blf-primary: #06b6d4; --blf-primary-dark: #0891b2; --blf-accent: #22d3ee; --blf-success: #10b981; --blf-danger: #f43f5e; --blf-warning: #f59e0b; } /* ---- Lavender: soft purple/violet -------------------------------------- */ html[data-theme="lavender"] { --blf-bg: #faf5ff; --blf-bg-card: #ffffff; --blf-bg-topbar: #6b21a8; --blf-bg-sidebar: #ede9fe; --blf-text: #2e1065; --blf-text-muted: #6d28d9; --blf-text-heading: #581c87; --blf-border: #ddd6fe; --blf-primary: #8b5cf6; --blf-primary-dark: #7c3aed; --blf-accent: #a78bfa; --blf-success: #16a34a; --blf-danger: #dc2626; --blf-warning: #d97706; } /* ---- Coffee: warm browns + cream --------------------------------------- */ html[data-theme="coffee"] { --blf-bg: #fdf8f3; --blf-bg-card: #ffffff; --blf-bg-topbar: #44291a; --blf-bg-sidebar: #f5ebe0; --blf-text: #3b2412; --blf-text-muted: #8b6f53; --blf-text-heading: #44291a; --blf-border: #e0c9b3; --blf-primary: #92400e; --blf-primary-dark: #78350f; --blf-accent: #b45309; --blf-success: #15803d; --blf-danger: #b91c1c; --blf-warning: #a16207; } /* Per-theme overrides for Carbon dark mode (similar treatment to Midnight) */ html[data-theme="carbon"] .sidebar .nav-item:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; } html[data-theme="carbon"] table tr:hover td { background: rgba(255,255,255,.04) !important; } html[data-theme="carbon"] input, html[data-theme="carbon"] select, html[data-theme="carbon"] textarea { background: #0a0a0a !important; color: var(--blf-text) !important; border-color: var(--blf-border) !important; } html[data-theme="carbon"] .btn-secondary { background: #1a1a1a !important; color: var(--blf-text) !important; } html[data-theme="carbon"] .dropdown-item:hover { background: rgba(255,255,255,.06) !important; } /* Action Required banner colors for the new themes */ html[data-theme="carbon"] [style*="background:#fff8ed"] { background-color: rgba(6, 182, 212, 0.10) !important; border-color: rgba(6, 182, 212, 0.45) !important; color: #22d3ee !important; } html[data-theme="lavender"] [style*="background:#fff8ed"] { background-color: #ede9fe !important; border-color: #8b5cf6 !important; color: #4c1d95 !important; } html[data-theme="coffee"] [style*="background:#fff8ed"] { background-color: #f5ebe0 !important; border-color: #92400e !important; color: #44291a !important; } /* end v1.17.2 */ /* ============================================================================ v1.17.3: statcard_polish Theme overrides for class-based components (stat tiles, alerts) that have hardcoded colors in main.css. Classic theme stays untouched. ============================================================================ */ /* Dashboard stat tiles */ html[data-theme]:not([data-theme="classic"]) .stat-card { background: var(--blf-bg-card) !important; border-color: var(--blf-border) !important; color: var(--blf-text) !important; } html[data-theme]:not([data-theme="classic"]) .stat-label { color: var(--blf-text-muted) !important; } html[data-theme]:not([data-theme="classic"]) .stat-value { color: var(--blf-text-heading) !important; } html[data-theme]:not([data-theme="classic"]) .stat-sub { color: var(--blf-text-muted) !important; } /* Alert variants — preserve semantic color (red/green/blue/orange) but darken bg/border for dark themes so text stays readable. */ html[data-theme="midnight"] .alert-danger, html[data-theme="carbon"] .alert-danger { background: rgba(244, 63, 94, 0.12) !important; border-color: rgba(244, 63, 94, 0.45) !important; color: #fda4af !important; } html[data-theme="midnight"] .alert-success, html[data-theme="carbon"] .alert-success { background: rgba(74, 222, 128, 0.12) !important; border-color: rgba(74, 222, 128, 0.45) !important; color: #86efac !important; } html[data-theme="midnight"] .alert-info, html[data-theme="carbon"] .alert-info { background: rgba(56, 189, 248, 0.12) !important; border-color: rgba(56, 189, 248, 0.45) !important; color: #7dd3fc !important; } html[data-theme="midnight"] .alert-warning, html[data-theme="carbon"] .alert-warning { background: rgba(251, 191, 36, 0.12) !important; border-color: rgba(251, 191, 36, 0.45) !important; color: #fcd34d !important; } /* For LIGHT non-classic themes, alert bg-tints can stay -- they already contrast OK on light backgrounds -- but if anyone wants stronger themed alerts, override here later. */ /* end v1.17.3 */ /* ============================================================================ v1.17.4: zebra_theme tbody tr:nth-child(2n) currently has hardcoded rgb(249,250,251) which clashes with non-classic themes. Use a subtle theme-aware overlay instead: - Light themes: 4% black overlay (slight darken of card bg) - Dark themes: 4% white overlay (slight lighten of card bg) ============================================================================ */ /* Light themes: subtle darken */ html[data-theme="ocean"] tbody tr:nth-child(2n), html[data-theme="sunset"] tbody tr:nth-child(2n), html[data-theme="forest"] tbody tr:nth-child(2n), html[data-theme="slate"] tbody tr:nth-child(2n), html[data-theme="lavender"] tbody tr:nth-child(2n), html[data-theme="coffee"] tbody tr:nth-child(2n) { background: rgba(0, 0, 0, 0.035) !important; } html[data-theme="ocean"] tbody tr:nth-child(2n):hover, html[data-theme="sunset"] tbody tr:nth-child(2n):hover, html[data-theme="forest"] tbody tr:nth-child(2n):hover, html[data-theme="slate"] tbody tr:nth-child(2n):hover, html[data-theme="lavender"] tbody tr:nth-child(2n):hover, html[data-theme="coffee"] tbody tr:nth-child(2n):hover { background: rgba(0, 0, 0, 0.075) !important; } html[data-theme="ocean"] tbody tr:not(:nth-child(2n)):hover, html[data-theme="sunset"] tbody tr:not(:nth-child(2n)):hover, html[data-theme="forest"] tbody tr:not(:nth-child(2n)):hover, html[data-theme="slate"] tbody tr:not(:nth-child(2n)):hover, html[data-theme="lavender"] tbody tr:not(:nth-child(2n)):hover, html[data-theme="coffee"] tbody tr:not(:nth-child(2n)):hover { background: rgba(0, 0, 0, 0.045) !important; } /* Dark themes: subtle lighten */ html[data-theme="midnight"] tbody tr:nth-child(2n), html[data-theme="carbon"] tbody tr:nth-child(2n) { background: rgba(255, 255, 255, 0.04) !important; } html[data-theme="midnight"] tbody tr:nth-child(2n):hover, html[data-theme="carbon"] tbody tr:nth-child(2n):hover { background: rgba(255, 255, 255, 0.08) !important; } html[data-theme="midnight"] tbody tr:not(:nth-child(2n)):hover, html[data-theme="carbon"] tbody tr:not(:nth-child(2n)):hover { background: rgba(255, 255, 255, 0.05) !important; } /* end v1.17.4 */ /* === v1.30.0 semantic overrides === */ /* Per-theme overrides for status colors (success/warning/danger/info). */ /* v1.30.5: distinct tints per theme so theme switching is visibly impactful. */ /* Lavender: rose-tinted warning, fuchsia danger, lavender info */ /* Ocean: teal success, warm-orange warning, cyan info */ /* Sunset: coral/peach across the board */ /* Forest: saturated green, golden-olive warning */ /* Coffee: caramel warning, sage success, warm-brown info */ /* Slate: desaturated neutrals */ /* Dark themes (Midnight/Carbon): dark bg, bright text */ [data-theme="classic"] { --blf-success: #16a34a; --blf-success-bg: #dcfce7; --blf-success-border: #86efac; --blf-success-text: #14532d; --blf-warning: #ca8a04; --blf-warning-bg: #fef9c3; --blf-warning-border: #fde047; --blf-warning-text: #713f12; --blf-danger: #dc2626; --blf-danger-bg: #fee2e2; --blf-danger-border: #fca5a5; --blf-danger-text: #7f1d1d; --blf-info: #2563eb; --blf-info-bg: #dbeafe; --blf-info-border: #93c5fd; --blf-info-text: #1e3a8a; } [data-theme="ocean"] { --blf-success: #0d9488; --blf-success-bg: #ccfbf1; --blf-success-border: #5eead4; --blf-success-text: #134e4a; --blf-warning: #ea580c; --blf-warning-bg: #fff7ed; --blf-warning-border: #fdba74; --blf-warning-text: #7c2d12; --blf-danger: #dc2626; --blf-danger-bg: #fee2e2; --blf-danger-border: #fca5a5; --blf-danger-text: #7f1d1d; --blf-info: #0891b2; --blf-info-bg: #cffafe; --blf-info-border: #67e8f9; --blf-info-text: #155e75; } [data-theme="sunset"] { --blf-success: #16a34a; --blf-success-bg: #dcfce7; --blf-success-border: #86efac; --blf-success-text: #14532d; --blf-warning: #c2410c; --blf-warning-bg: #fed7aa; --blf-warning-border: #fb923c; --blf-warning-text: #7c2d12; --blf-danger: #b91c1c; --blf-danger-bg: #fecaca; --blf-danger-border: #f87171; --blf-danger-text: #7f1d1d; --blf-info: #ea580c; --blf-info-bg: #ffedd5; --blf-info-border: #fdba74; --blf-info-text: #7c2d12; } [data-theme="forest"] { --blf-success: #16a34a; --blf-success-bg: #bbf7d0; --blf-success-border: #4ade80; --blf-success-text: #14532d; --blf-warning: #a16207; --blf-warning-bg: #fef9c3; --blf-warning-border: #facc15; --blf-warning-text: #422006; --blf-danger: #b91c1c; --blf-danger-bg: #fee2e2; --blf-danger-border: #f87171; --blf-danger-text: #7f1d1d; --blf-info: #0d9488; --blf-info-bg: #ccfbf1; --blf-info-border: #5eead4; --blf-info-text: #134e4a; } [data-theme="slate"] { --blf-success: #059669; --blf-success-bg: #ecfdf5; --blf-success-border: #a7f3d0; --blf-success-text: #064e3b; --blf-warning: #b45309; --blf-warning-bg: #fffbeb; --blf-warning-border: #fde68a; --blf-warning-text: #78350f; --blf-danger: #dc2626; --blf-danger-bg: #fef2f2; --blf-danger-border: #fecaca; --blf-danger-text: #991b1b; --blf-info: #475569; --blf-info-bg: #f1f5f9; --blf-info-border: #cbd5e1; --blf-info-text: #1e293b; } [data-theme="midnight"] { --blf-success: #22c55e; --blf-success-bg: #052e16; --blf-success-border: #16a34a; --blf-success-text: #86efac; --blf-warning: #f59e0b; --blf-warning-bg: #451a03; --blf-warning-border: #b45309; --blf-warning-text: #fde047; --blf-danger: #ef4444; --blf-danger-bg: #450a0a; --blf-danger-border: #dc2626; --blf-danger-text: #fca5a5; --blf-info: #3b82f6; --blf-info-bg: #172554; --blf-info-border: #2563eb; --blf-info-text: #93c5fd; } [data-theme="carbon"] { --blf-success: #22c55e; --blf-success-bg: #022c22; --blf-success-border: #15803d; --blf-success-text: #4ade80; --blf-warning: #f59e0b; --blf-warning-bg: #1c1006; --blf-warning-border: #92400e; --blf-warning-text: #fcd34d; --blf-danger: #ef4444; --blf-danger-bg: #1a0606; --blf-danger-border: #991b1b; --blf-danger-text: #fca5a5; --blf-info: #3b82f6; --blf-info-bg: #0c0a3e; --blf-info-border: #1d4ed8; --blf-info-text: #93c5fd; } [data-theme="lavender"] { --blf-success: #10b981; --blf-success-bg: #ecfdf5; --blf-success-border: #86efac; --blf-success-text: #14532d; --blf-warning: #d97706; --blf-warning-bg: #fff1f2; --blf-warning-border: #fbbf24; --blf-warning-text: #7c2d12; --blf-danger: #be185d; --blf-danger-bg: #fdf2f8; --blf-danger-border: #f9a8d4; --blf-danger-text: #831843; --blf-info: #7c3aed; --blf-info-bg: #faf5ff; --blf-info-border: #c4b5fd; --blf-info-text: #581c87; } [data-theme="coffee"] { --blf-success: #059669; --blf-success-bg: #ecfdf5; --blf-success-border: #86efac; --blf-success-text: #14532d; --blf-warning: #92400e; --blf-warning-bg: #fef3c7; --blf-warning-border: #d97706; --blf-warning-text: #451a03; --blf-danger: #b91c1c; --blf-danger-bg: #fef2f2; --blf-danger-border: #fca5a5; --blf-danger-text: #7f1d1d; --blf-info: #57534e; --blf-info-bg: #f5f5f4; --blf-info-border: #a8a29e; --blf-info-text: #1c1917; } /* === end v1.30.0 === */