/* ============================================================================ Stream Circle PBA — "Nova" Futuristic Theme A deep-space command center aesthetic with glassmorphism, neon accents, and cyan-to-purple gradient energy lines. Activated via: data-bs-theme="nova" on element ============================================================================ */ /* --------------------------------------------------------------------------- 1. CSS CUSTOM PROPERTIES (Color Tokens) --------------------------------------------------------------------------- */ [data-bs-theme="nova"] { color-scheme: dark; /* — Core backgrounds — */ --sc-bg: #020810; --sc-surface: #081428; --sc-surface-elevated: #0c1e3a; --sc-glass-bg: rgba(8, 20, 40, 0.65); --sc-glass-border: rgba(0, 180, 216, 0.10); /* — Text — */ --sc-text: #d0e8ff; --sc-text-heading: #e8f4ff; --sc-muted: #4a6e90; /* — Borders — */ --sc-border: #143252; /* — Accents — */ --sc-accent: #00b4d8; --sc-accent-rgb: 0, 180, 216; --sc-accent-secondary: #7b2fff; --sc-accent-secondary-rgb: 123, 47, 255; --sc-accent-glow: rgba(0, 180, 216, 0.15); --sc-gradient-accent: linear-gradient(135deg, #00b4d8, #7b2fff); /* — Bootstrap variable overrides — */ --bs-body-bg: #020810; --bs-body-bg-rgb: 2, 8, 16; --bs-body-color: #d0e8ff; --bs-body-color-rgb: 208, 232, 255; --bs-emphasis-color: #e8f4ff; --bs-emphasis-color-rgb: 232, 244, 255; --bs-secondary-color: rgba(208, 232, 255, 0.7); --bs-secondary-color-rgb: 208, 232, 255; --bs-tertiary-color: rgba(208, 232, 255, 0.45); --bs-tertiary-color-rgb: 208, 232, 255; --bs-secondary-bg: #0a1830; --bs-secondary-bg-rgb: 10, 24, 48; --bs-tertiary-bg: #0c1e3a; --bs-tertiary-bg-rgb: 12, 30, 58; --bs-heading-color: #e8f4ff; --bs-link-color: #00b4d8; --bs-link-color-rgb: 0, 180, 216; --bs-link-hover-color: #33d4f0; --bs-link-hover-color-rgb: 51, 212, 240; --bs-code-color: #c084fc; --bs-highlight-color: #d0e8ff; --bs-highlight-bg: rgba(255, 170, 0, 0.15); --bs-border-color: #143252; --bs-border-color-translucent: rgba(0, 180, 216, 0.08); --bs-component-bg: #081428; --bs-component-bg-rgb: 8, 20, 40; --bs-component-color: #d0e8ff; --bs-component-color-rgb: 208, 232, 255; /* — Semantic colors — */ --bs-primary: #00b4d8; --bs-primary-rgb: 0, 180, 216; --bs-success: #00ff88; --bs-success-rgb: 0, 255, 136; --bs-warning: #ffaa00; --bs-warning-rgb: 255, 170, 0; --bs-danger: #ff3366; --bs-danger-rgb: 255, 51, 102; --bs-info: #00d4ff; --bs-info-rgb: 0, 212, 255; --bs-primary-text-emphasis: #00b4d8; --bs-secondary-text-emphasis: #8899aa; --bs-success-text-emphasis: #00ff88; --bs-info-text-emphasis: #00d4ff; --bs-warning-text-emphasis: #ffaa00; --bs-danger-text-emphasis: #ff3366; --bs-light-text-emphasis: #d0e8ff; --bs-dark-text-emphasis: #8899aa; --bs-primary-bg-subtle: rgba(0, 180, 216, 0.08); --bs-secondary-bg-subtle: rgba(74, 110, 144, 0.08); --bs-success-bg-subtle: rgba(0, 255, 136, 0.06); --bs-info-bg-subtle: rgba(0, 212, 255, 0.06); --bs-warning-bg-subtle: rgba(255, 170, 0, 0.06); --bs-danger-bg-subtle: rgba(255, 51, 102, 0.06); --bs-light-bg-subtle: #0a1830; --bs-dark-bg-subtle: #040c18; --bs-primary-border-subtle: rgba(0, 180, 216, 0.25); --bs-secondary-border-subtle: #1a2d44; --bs-success-border-subtle: rgba(0, 255, 136, 0.2); --bs-info-border-subtle: rgba(0, 212, 255, 0.2); --bs-warning-border-subtle: rgba(255, 170, 0, 0.2); --bs-danger-border-subtle: rgba(255, 51, 102, 0.2); --bs-light-border-subtle: #1a2d44; --bs-dark-border-subtle: #0a1830; /* — Gray scale (deep navy progression) — */ --bs-gray-100: #1a2a3e; --bs-gray-200: #1a3550; --bs-gray-300: #2a4a6c; --bs-gray-400: #3a5a7c; --bs-gray-500: #4a6e90; --bs-gray-600: #6a8eaa; --bs-gray-700: #8aaecc; --bs-gray-800: #b0d0f0; --bs-gray-900: #d0e8ff; /* — App-specific tokens — */ --bs-app-header-bg: rgba(8, 20, 40, 0.85); --bs-app-header-color: #e8f4ff; --bs-app-header-border-color: rgba(0, 180, 216, 0.08); --bs-app-sidebar-link-color: #8aaecc; --bs-app-sidebar-link-hover-color: #d0e8ff; --bs-app-sidebar-link-hover-bg: rgba(0, 180, 216, 0.06); --bs-app-sidebar-link-active-color: #00b4d8; --bs-app-sidebar-link-active-bg: rgba(0, 180, 216, 0.10); --bs-app-sidebar-mobile-bg: rgba(8, 20, 40, 0.98); /* — Form colors — */ --bs-form-valid-color: #00ff88; --bs-form-valid-border-color: #00ff88; --bs-form-invalid-color: #ff3366; --bs-form-invalid-border-color: #ff3366; } /* --------------------------------------------------------------------------- 2. GLOBAL / BODY --------------------------------------------------------------------------- */ [data-bs-theme="nova"] body { background-color: var(--sc-bg); color: var(--sc-text); font-family: "Inter", system-ui, -apple-system, sans-serif; font-weight: 400; letter-spacing: 0.01em; } /* Ambient background mesh */ [data-bs-theme="nova"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 60% 50% at 15% 5%, rgba(0, 180, 216, 0.05) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 85% 85%, rgba(123, 47, 255, 0.035) 0%, transparent 60%); } /* Ensure content stacks above the mesh */ [data-bs-theme="nova"] #app { position: relative; z-index: 1; } /* --------------------------------------------------------------------------- 3. TYPOGRAPHY --------------------------------------------------------------------------- */ [data-bs-theme="nova"] h1, [data-bs-theme="nova"] h2, [data-bs-theme="nova"] h3, [data-bs-theme="nova"] h4, [data-bs-theme="nova"] h5, [data-bs-theme="nova"] h6, [data-bs-theme="nova"] .h1, [data-bs-theme="nova"] .h2, [data-bs-theme="nova"] .h3, [data-bs-theme="nova"] .h4, [data-bs-theme="nova"] .h5, [data-bs-theme="nova"] .h6 { color: var(--sc-text-heading); font-weight: 600; letter-spacing: -0.02em; } [data-bs-theme="nova"] small, [data-bs-theme="nova"] .small { color: var(--sc-muted); } [data-bs-theme="nova"] code { font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace; color: var(--bs-code-color); } /* Pre-formatted / code blocks (API view, JSON output, etc.) */ [data-bs-theme="nova"] pre { background-color: rgba(4, 12, 24, 0.7) !important; color: #8aaecc !important; border: 1px solid rgba(0, 180, 216, 0.08); border-radius: 10px; padding: 12px 16px; font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace; font-size: 0.8rem; } [data-bs-theme="nova"] pre code { color: #8aaecc !important; background: transparent !important; } /* Inline code within text */ [data-bs-theme="nova"] :not(pre) > code { background-color: rgba(0, 180, 216, 0.08) !important; color: var(--bs-code-color) !important; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(0, 180, 216, 0.06); } /* Textarea code inputs (API POST data) */ [data-bs-theme="nova"] textarea.form-control { font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace; } /* Pre-scrollable */ [data-bs-theme="nova"] .pre-scrollable { background-color: rgba(4, 12, 24, 0.7) !important; border-color: rgba(0, 180, 216, 0.08) !important; } /* --------------------------------------------------------------------------- 4. SCROLLBARS --------------------------------------------------------------------------- */ [data-bs-theme="nova"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-bs-theme="nova"] ::-webkit-scrollbar-track { background: transparent; } [data-bs-theme="nova"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(0, 180, 216, 0.25), rgba(123, 47, 255, 0.18)); border-radius: 3px; } [data-bs-theme="nova"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(0, 180, 216, 0.5), rgba(123, 47, 255, 0.35)); } [data-bs-theme="nova"] ::-webkit-scrollbar-corner { background: transparent; } /* --------------------------------------------------------------------------- 5. APP HEADER (Glassmorphism) --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .app-header { background: var(--bs-app-header-bg) !important; -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border-bottom: none !important; box-shadow: none; } /* Gradient accent line at bottom of header */ [data-bs-theme="nova"] .app-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(0, 180, 216, 0.4) 30%, rgba(123, 47, 255, 0.3) 70%, transparent 100%); pointer-events: none; } [data-bs-theme="nova"] .app-header .navbar-nav > .nav-item > .nav-link { color: var(--sc-muted); } [data-bs-theme="nova"] .app-header .navbar-nav > .nav-item > .nav-link:hover { color: var(--sc-accent); } /* --------------------------------------------------------------------------- 6. APP SIDEBAR (Glassmorphism) --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .app-sidebar { background: rgba(8, 20, 40, 0.6) !important; -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); border-right: 1px solid rgba(0, 180, 216, 0.06) !important; box-shadow: none !important; } /* Sidebar menu items */ [data-bs-theme="nova"] .app-sidebar .menu > .menu-item > .menu-link { color: var(--bs-app-sidebar-link-color); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-left: 2px solid transparent; } [data-bs-theme="nova"] .app-sidebar .menu > .menu-item > .menu-link:hover { color: var(--bs-app-sidebar-link-hover-color); background: var(--bs-app-sidebar-link-hover-bg); transform: translateX(2px); } /* Active sidebar item — gradient left border */ [data-bs-theme="nova"] .app-sidebar .menu > .menu-item.active > .menu-link { color: var(--bs-app-sidebar-link-active-color) !important; background: var(--bs-app-sidebar-link-active-bg) !important; border-left: 2px solid; border-image: linear-gradient(to bottom, var(--sc-accent), var(--sc-accent-secondary)) 1; box-shadow: inset 4px 0 12px rgba(0, 180, 216, 0.06); } /* Submenu items */ [data-bs-theme="nova"] .app-sidebar .menu .menu-submenu > .menu-item > .menu-link { color: var(--sc-muted); transition: all 0.2s ease; } [data-bs-theme="nova"] .app-sidebar .menu .menu-submenu > .menu-item > .menu-link:hover { color: var(--sc-text); } [data-bs-theme="nova"] .app-sidebar .menu .menu-submenu > .menu-item.active > .menu-link { color: var(--sc-accent) !important; } /* Sidebar menu icons */ [data-bs-theme="nova"] .app-sidebar .menu > .menu-item > .menu-link .menu-icon { opacity: 0.6; transition: opacity 0.2s ease; } [data-bs-theme="nova"] .app-sidebar .menu > .menu-item > .menu-link:hover .menu-icon, [data-bs-theme="nova"] .app-sidebar .menu > .menu-item.active > .menu-link .menu-icon { opacity: 1; } /* Sidebar profile/brand section */ [data-bs-theme="nova"] .app-sidebar .menu-profile, [data-bs-theme="nova"] .app-sidebar .menu-header { color: var(--sc-muted); letter-spacing: 0.1em; font-size: 0.7rem; text-transform: uppercase; } /* --------------------------------------------------------------------------- 7. CARDS & PANELS (Glass) --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .card { background: var(--sc-glass-bg) !important; -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); border: 1px solid var(--sc-glass-border) !important; border-radius: 12px !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); overflow: hidden; position: relative; } /* Top-edge gradient accent line */ [data-bs-theme="nova"] .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 180, 216, 0.25), transparent); pointer-events: none; z-index: 1; } [data-bs-theme="nova"] .card-header { background: rgba(0, 180, 216, 0.04) !important; border-bottom: 1px solid rgba(0, 180, 216, 0.06) !important; color: var(--sc-text-heading); } [data-bs-theme="nova"] .card-body { color: var(--sc-text); } [data-bs-theme="nova"] .card-footer { background: transparent !important; border-top: 1px solid rgba(0, 180, 216, 0.06) !important; } /* --------------------------------------------------------------------------- 8. BUTTONS --------------------------------------------------------------------------- */ /* Primary button — gradient glass */ [data-bs-theme="nova"] .btn-primary, [data-bs-theme="nova"] .btn-theme { background: linear-gradient(135deg, rgba(0, 180, 216, 0.15), rgba(123, 47, 255, 0.08)) !important; border: 1px solid rgba(0, 180, 216, 0.3) !important; color: var(--sc-accent) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } [data-bs-theme="nova"] .btn-primary:hover, [data-bs-theme="nova"] .btn-theme:hover { background: linear-gradient(135deg, rgba(0, 180, 216, 0.25), rgba(123, 47, 255, 0.15)) !important; border-color: rgba(0, 180, 216, 0.5) !important; box-shadow: 0 0 20px rgba(0, 180, 216, 0.3), 0 0 60px rgba(0, 180, 216, 0.08); color: #33d4f0 !important; } [data-bs-theme="nova"] .btn-primary:active, [data-bs-theme="nova"] .btn-theme:active { background: linear-gradient(135deg, rgba(0, 180, 216, 0.30), rgba(123, 47, 255, 0.18)) !important; box-shadow: 0 0 12px rgba(0, 180, 216, 0.4), inset 0 0 8px rgba(0, 180, 216, 0.1); } /* Success button */ [data-bs-theme="nova"] .btn-success { background: rgba(0, 255, 136, 0.10) !important; border: 1px solid rgba(0, 255, 136, 0.3) !important; color: #00ff88 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } [data-bs-theme="nova"] .btn-success:hover { background: rgba(0, 255, 136, 0.18) !important; border-color: rgba(0, 255, 136, 0.5) !important; box-shadow: 0 0 16px rgba(0, 255, 136, 0.25); color: #33ffaa !important; } /* Danger button */ [data-bs-theme="nova"] .btn-danger { background: rgba(255, 51, 102, 0.10) !important; border: 1px solid rgba(255, 51, 102, 0.3) !important; color: #ff3366 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } [data-bs-theme="nova"] .btn-danger:hover { background: rgba(255, 51, 102, 0.18) !important; border-color: rgba(255, 51, 102, 0.5) !important; box-shadow: 0 0 16px rgba(255, 51, 102, 0.3); color: #ff6688 !important; } /* Warning button */ [data-bs-theme="nova"] .btn-warning { background: rgba(255, 170, 0, 0.10) !important; border: 1px solid rgba(255, 170, 0, 0.3) !important; color: #ffaa00 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } [data-bs-theme="nova"] .btn-warning:hover { background: rgba(255, 170, 0, 0.18) !important; border-color: rgba(255, 170, 0, 0.5) !important; box-shadow: 0 0 16px rgba(255, 170, 0, 0.25); color: #ffcc44 !important; } /* Info button */ [data-bs-theme="nova"] .btn-info { background: rgba(0, 212, 255, 0.10) !important; border: 1px solid rgba(0, 212, 255, 0.3) !important; color: #00d4ff !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } [data-bs-theme="nova"] .btn-info:hover { background: rgba(0, 212, 255, 0.18) !important; border-color: rgba(0, 212, 255, 0.5) !important; box-shadow: 0 0 16px rgba(0, 212, 255, 0.25); color: #44e0ff !important; } /* Secondary / Default / Outline buttons */ [data-bs-theme="nova"] .btn-secondary, [data-bs-theme="nova"] .btn-default, [data-bs-theme="nova"] .btn-outline-secondary, [data-bs-theme="nova"] .btn-outline-default { background: transparent !important; border: 1px solid var(--sc-border) !important; color: #8aaecc !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } [data-bs-theme="nova"] .btn-secondary:hover, [data-bs-theme="nova"] .btn-default:hover, [data-bs-theme="nova"] .btn-outline-secondary:hover, [data-bs-theme="nova"] .btn-outline-default:hover { background: var(--sc-surface-elevated) !important; border-color: rgba(0, 180, 216, 0.3) !important; color: var(--sc-text) !important; box-shadow: 0 0 12px rgba(0, 180, 216, 0.08); color: var(--sc-accent) !important; } /* Dark / Light outline buttons */ [data-bs-theme="nova"] .btn-outline-primary { border-color: rgba(0, 180, 216, 0.4) !important; color: var(--sc-accent) !important; } [data-bs-theme="nova"] .btn-outline-primary:hover { background: rgba(0, 180, 216, 0.12) !important; box-shadow: 0 0 16px rgba(0, 180, 216, 0.2); } /* Button group */ [data-bs-theme="nova"] .btn-group > .btn { border-color: var(--sc-border) !important; } /* Disabled state — nova-consistent muted appearance */ [data-bs-theme="nova"] .btn:disabled, [data-bs-theme="nova"] .btn.disabled { opacity: 0.6; box-shadow: none !important; background-color: rgba(20, 50, 82, 0.3) !important; border-color: rgba(20, 50, 82, 0.4) !important; color: #4a6e90 !important; } /* --------------------------------------------------------------------------- 9. FORM CONTROLS --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .form-control, [data-bs-theme="nova"] .form-select { background-color: rgba(8, 20, 40, 0.4) !important; border: 1px solid var(--sc-border) !important; border-radius: 8px !important; color: var(--sc-text) !important; transition: all 0.25s ease; } [data-bs-theme="nova"] .form-control:focus, [data-bs-theme="nova"] .form-select:focus { border-color: rgba(0, 180, 216, 0.4) !important; box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.1), 0 0 16px rgba(0, 180, 216, 0.06) !important; background-color: rgba(8, 20, 40, 0.6) !important; } [data-bs-theme="nova"] .form-control::placeholder { color: var(--sc-muted); opacity: 1; } [data-bs-theme="nova"] .form-select option { background-color: var(--sc-surface); color: var(--sc-text); } /* Form labels */ [data-bs-theme="nova"] .form-label, [data-bs-theme="nova"] label { color: var(--sc-text); } /* Input groups */ [data-bs-theme="nova"] .input-group-text { background-color: var(--sc-surface) !important; border: 1px solid var(--sc-border) !important; color: var(--sc-muted); border-radius: 8px; } /* Checkboxes & radio */ [data-bs-theme="nova"] .form-check-input { background-color: var(--sc-surface) !important; border-color: var(--sc-border) !important; transition: all 0.2s ease; } [data-bs-theme="nova"] .form-check-input:checked { background-color: var(--sc-accent) !important; border-color: var(--sc-accent) !important; box-shadow: 0 0 8px rgba(0, 180, 216, 0.4); } [data-bs-theme="nova"] .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(0, 180, 216, 0.2) !important; } /* Form switch */ [data-bs-theme="nova"] .form-switch .form-check-input { background-color: var(--sc-surface) !important; border-color: var(--sc-border) !important; } [data-bs-theme="nova"] .form-switch .form-check-input:checked { background-color: var(--sc-accent) !important; border-color: var(--sc-accent) !important; box-shadow: 0 0 8px rgba(0, 180, 216, 0.35); } /* Disabled / readonly controls — readable but visually distinct from editable */ [data-bs-theme="nova"] .form-control:disabled, [data-bs-theme="nova"] .form-control[readonly], [data-bs-theme="nova"] .form-select:disabled, [data-bs-theme="nova"] .form-select[readonly], [data-bs-theme="nova"] input:disabled, [data-bs-theme="nova"] textarea:disabled, [data-bs-theme="nova"] select:disabled { background-color: rgba(8, 20, 40, 0.35) !important; color: #6a8eaa !important; opacity: 0.85; border-color: rgba(20, 50, 82, 0.4) !important; } /* Disabled checkboxes & switches */ [data-bs-theme="nova"] .form-check-input:disabled { opacity: 0.6; } /* Disabled labels next to disabled inputs */ [data-bs-theme="nova"] .form-check-input:disabled ~ .form-check-label, [data-bs-theme="nova"] label.disabled, [data-bs-theme="nova"] .form-label.disabled { color: #6a8eaa !important; opacity: 0.85; } /* Fieldset disabled */ [data-bs-theme="nova"] fieldset:disabled .form-control, [data-bs-theme="nova"] fieldset:disabled .form-select, [data-bs-theme="nova"] fieldset:disabled .btn { color: #6a8eaa !important; opacity: 0.85; } /* --------------------------------------------------------------------------- 10. TABLES --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .table { --bs-table-bg: transparent; --bs-table-color: #a0c0dd; --bs-table-border-color: rgba(20, 50, 82, 0.5); --bs-table-striped-bg: rgba(8, 20, 40, 0.4); --bs-table-hover-bg: rgba(0, 180, 216, 0.04); --bs-table-active-bg: rgba(0, 180, 216, 0.08); color: #a0c0dd; font-variant-numeric: tabular-nums; } /* Time/duration directives and clock elements — monospace for alignment */ [data-bs-theme="nova"] pba-time-class, [data-bs-theme="nova"] pba-duration-clock, [data-bs-theme="nova"] .pba-time, [data-bs-theme="nova"] .pba-duration, [data-bs-theme="nova"] .pba-clock { font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace; font-size: 0.85em; letter-spacing: -0.02em; } /* Table body cells — softer than headings/labels */ [data-bs-theme="nova"] .table > tbody > tr > td { color: #a0c0dd; } /* Table header */ [data-bs-theme="nova"] .table > thead > tr > th { color: var(--sc-muted) !important; text-transform: uppercase; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; border-bottom-width: 1px !important; border-image: linear-gradient(90deg, transparent, rgba(0, 180, 216, 0.2), transparent) 1; } /* Table rows — base */ [data-bs-theme="nova"] .table > tbody > tr { transition: background-color 0.2s ease; } [data-bs-theme="nova"] .table > tbody > tr:hover { --bs-table-hover-bg: rgba(0, 180, 216, 0.04) !important; --bs-table-hover-color: inherit !important; background-color: rgba(0, 180, 216, 0.04) !important; box-shadow: inset 0 0 30px rgba(0, 180, 216, 0.015); } /* Prevent state-colored cells from brightening on row hover */ [data-bs-theme="nova"] .table-hover > tbody > tr:hover > .table-success, [data-bs-theme="nova"] .table > tbody > tr:hover > td.table-success { --bs-table-hover-bg: transparent !important; --bs-table-bg-state: rgba(0, 255, 136, 0.08) !important; --bs-table-accent-bg: rgba(0, 255, 136, 0.08) !important; background-color: rgba(0, 255, 136, 0.08) !important; background: rgba(0, 255, 136, 0.08) !important; color: #a0c0dd !important; } [data-bs-theme="nova"] .table-hover > tbody > tr:hover > .table-danger, [data-bs-theme="nova"] .table > tbody > tr:hover > td.table-danger, [data-bs-theme="nova"] .table-hover > tbody > tr:hover > .danger, [data-bs-theme="nova"] .table > tbody > tr:hover > td.danger { --bs-table-hover-bg: transparent !important; --bs-table-bg-state: rgba(255, 51, 102, 0.08) !important; --bs-table-accent-bg: rgba(255, 51, 102, 0.08) !important; background-color: rgba(255, 51, 102, 0.08) !important; background: rgba(255, 51, 102, 0.08) !important; color: #a0c0dd !important; } [data-bs-theme="nova"] .table-hover > tbody > tr:hover > .table-warning, [data-bs-theme="nova"] .table > tbody > tr:hover > td.table-warning { --bs-table-hover-bg: transparent !important; --bs-table-bg-state: rgba(255, 170, 0, 0.08) !important; --bs-table-accent-bg: rgba(255, 170, 0, 0.08) !important; background-color: rgba(255, 170, 0, 0.08) !important; background: rgba(255, 170, 0, 0.08) !important; color: #a0c0dd !important; } [data-bs-theme="nova"] .table-hover > tbody > tr:hover > .table-info, [data-bs-theme="nova"] .table > tbody > tr:hover > td.table-info { --bs-table-hover-bg: transparent !important; --bs-table-bg-state: rgba(0, 180, 216, 0.08) !important; --bs-table-accent-bg: rgba(0, 180, 216, 0.08) !important; background-color: rgba(0, 180, 216, 0.08) !important; background: rgba(0, 180, 216, 0.08) !important; color: #a0c0dd !important; } [data-bs-theme="nova"] .table-hover > tbody > tr:hover > .table-secondary, [data-bs-theme="nova"] .table > tbody > tr:hover > td.table-secondary { --bs-table-hover-bg: transparent !important; --bs-table-bg-state: rgba(74, 110, 144, 0.08) !important; --bs-table-accent-bg: rgba(74, 110, 144, 0.08) !important; background-color: rgba(74, 110, 144, 0.08) !important; background: rgba(74, 110, 144, 0.08) !important; color: #8899aa !important; } /* ---------- Bootstrap table-* state classes (deep navy compatible) ---------- */ /* table-success: Running, alive, current, playing */ [data-bs-theme="nova"] .table-success, [data-bs-theme="nova"] .table > tbody > tr.table-success, [data-bs-theme="nova"] .table > tbody > tr > td.table-success { --bs-table-bg: rgba(0, 255, 136, 0.08) !important; --bs-table-color: #e0fff0 !important; --bs-table-border-color: rgba(0, 255, 136, 0.10) !important; background-color: rgba(0, 255, 136, 0.08) !important; color: #ffffff !important; border-left: 3px solid rgba(0, 255, 136, 0.5); font-weight: 500; } [data-bs-theme="nova"] .table > tbody > tr.table-success > td { color: #ffffff !important; } /* table-danger: Error, missing file, failed, unconfigured */ [data-bs-theme="nova"] .table-danger, [data-bs-theme="nova"] .table > tbody > tr.table-danger, [data-bs-theme="nova"] .table > tbody > tr > td.table-danger { --bs-table-bg: rgba(255, 51, 102, 0.08) !important; --bs-table-color: #ffb0c4 !important; --bs-table-border-color: rgba(255, 51, 102, 0.10) !important; background-color: rgba(255, 51, 102, 0.08) !important; color: var(--sc-text) !important; border-left: 3px solid rgba(255, 51, 102, 0.5); } /* table-warning: Warning, selected, locked, offline, expiring */ [data-bs-theme="nova"] .table-warning, [data-bs-theme="nova"] .table > tbody > tr.table-warning, [data-bs-theme="nova"] .table > tbody > tr > td.table-warning { --bs-table-bg: rgba(255, 170, 0, 0.08) !important; --bs-table-color: #ffe0a0 !important; --bs-table-border-color: rgba(255, 170, 0, 0.10) !important; background-color: rgba(255, 170, 0, 0.08) !important; color: var(--sc-text) !important; border-left: 3px solid rgba(255, 170, 0, 0.5); } /* table-info: Selected, marked, edited, current focus */ [data-bs-theme="nova"] .table-info, [data-bs-theme="nova"] .table > tbody > tr.table-info, [data-bs-theme="nova"] .table > tbody > tr > td.table-info { --bs-table-bg: rgba(0, 180, 216, 0.08) !important; --bs-table-color: #a0e8ff !important; --bs-table-border-color: rgba(0, 180, 216, 0.10) !important; background-color: rgba(0, 180, 216, 0.08) !important; color: var(--sc-text) !important; border-left: 3px solid rgba(0, 180, 216, 0.5); } /* table-secondary: Disabled, external, deleted, finished, inactive */ [data-bs-theme="nova"] .table-secondary, [data-bs-theme="nova"] .table > tbody > tr.table-secondary, [data-bs-theme="nova"] .table > tbody > tr > td.table-secondary { --bs-table-bg: rgba(74, 110, 144, 0.08) !important; --bs-table-color: #8899aa !important; --bs-table-border-color: rgba(74, 110, 144, 0.10) !important; background-color: rgba(74, 110, 144, 0.08) !important; color: #8899aa !important; border-left: 3px solid rgba(74, 110, 144, 0.35); } /* table-primary: Current user, marked item, selected reference */ [data-bs-theme="nova"] .table-primary, [data-bs-theme="nova"] .table > tbody > tr.table-primary, [data-bs-theme="nova"] .table > tbody > tr > td.table-primary { --bs-table-bg: rgba(0, 180, 216, 0.10) !important; --bs-table-color: #00b4d8 !important; --bs-table-border-color: rgba(0, 180, 216, 0.12) !important; background-color: rgba(0, 180, 216, 0.10) !important; color: var(--sc-text) !important; border-left: 3px solid rgba(0, 180, 216, 0.6); } /* table-active: Fixed start time, active highlight */ [data-bs-theme="nova"] .table-active, [data-bs-theme="nova"] .table > tbody > tr.table-active, [data-bs-theme="nova"] .table > tbody > tr > td.table-active { --bs-table-bg: rgba(208, 232, 255, 0.06) !important; --bs-table-color: var(--sc-text) !important; --bs-table-border-color: rgba(208, 232, 255, 0.08) !important; background-color: rgba(208, 232, 255, 0.06) !important; color: var(--sc-text) !important; border-left: 3px solid rgba(208, 232, 255, 0.3); } /* ---------- Bootstrap table-* hover states (don't brighten too much) ---------- */ [data-bs-theme="nova"] .table-hover > tbody > tr.table-success:hover { --bs-table-hover-bg: rgba(0, 255, 136, 0.12) !important; background-color: rgba(0, 255, 136, 0.12) !important; } [data-bs-theme="nova"] .table-hover > tbody > tr.table-danger:hover { --bs-table-hover-bg: rgba(255, 51, 102, 0.12) !important; background-color: rgba(255, 51, 102, 0.12) !important; } [data-bs-theme="nova"] .table-hover > tbody > tr.table-warning:hover { --bs-table-hover-bg: rgba(255, 170, 0, 0.12) !important; background-color: rgba(255, 170, 0, 0.12) !important; } [data-bs-theme="nova"] .table-hover > tbody > tr.table-info:hover { --bs-table-hover-bg: rgba(0, 180, 216, 0.12) !important; background-color: rgba(0, 180, 216, 0.12) !important; } [data-bs-theme="nova"] .table-hover > tbody > tr.table-secondary:hover { --bs-table-hover-bg: rgba(74, 110, 144, 0.12) !important; background-color: rgba(74, 110, 144, 0.12) !important; } [data-bs-theme="nova"] .table-hover > tbody > tr.table-primary:hover { --bs-table-hover-bg: rgba(0, 180, 216, 0.14) !important; background-color: rgba(0, 180, 216, 0.14) !important; } /* ---------- Custom row-* and tr.* state classes ---------- */ [data-bs-theme="nova"] .table .row-running, [data-bs-theme="nova"] .table tr.running { background-color: rgba(0, 255, 136, 0.08) !important; border-left: 3px solid rgba(0, 255, 136, 0.5); } [data-bs-theme="nova"] .table .row-warning, [data-bs-theme="nova"] .table tr.warning { background-color: rgba(255, 170, 0, 0.08) !important; border-left: 3px solid rgba(255, 170, 0, 0.5); } [data-bs-theme="nova"] .table .row-error, [data-bs-theme="nova"] .table tr.error { background-color: rgba(255, 51, 102, 0.08) !important; border-left: 3px solid rgba(255, 51, 102, 0.5); } [data-bs-theme="nova"] .table .row-paused, [data-bs-theme="nova"] .table tr.paused { background-color: rgba(0, 212, 255, 0.08) !important; border-left: 3px solid rgba(0, 212, 255, 0.5); } /* ---------- Bootstrap bg-* utility classes on rows/cells ---------- */ [data-bs-theme="nova"] .table tr.bg-success, [data-bs-theme="nova"] .table td.bg-success { background-color: rgba(0, 255, 136, 0.08) !important; } [data-bs-theme="nova"] .table tr.bg-danger, [data-bs-theme="nova"] .table td.bg-danger { background-color: rgba(255, 51, 102, 0.08) !important; } [data-bs-theme="nova"] .table tr.bg-warning, [data-bs-theme="nova"] .table td.bg-warning { background-color: rgba(255, 170, 0, 0.08) !important; } [data-bs-theme="nova"] .table tr.bg-info, [data-bs-theme="nova"] .table td.bg-info { background-color: rgba(0, 180, 216, 0.08) !important; } [data-bs-theme="nova"] .table tr.bg-secondary, [data-bs-theme="nova"] .table td.bg-secondary { background-color: rgba(74, 110, 144, 0.08) !important; } [data-bs-theme="nova"] .table tr.bg-primary, [data-bs-theme="nova"] .table td.bg-primary { background-color: rgba(0, 180, 216, 0.10) !important; } /* ---------- Danger/Success class used standalone (without table- prefix) ---------- */ [data-bs-theme="nova"] tr.danger, [data-bs-theme="nova"] td.danger { background-color: rgba(255, 51, 102, 0.08) !important; color: var(--sc-text) !important; } [data-bs-theme="nova"] tr.success, [data-bs-theme="nova"] td.success { background-color: rgba(0, 255, 136, 0.08) !important; color: var(--sc-text) !important; } /* ---------- State rows — ensure , , inherit row color ---------- */ [data-bs-theme="nova"] .table > tbody > tr.table-success > td small, [data-bs-theme="nova"] .table > tbody > tr.table-success > td a, [data-bs-theme="nova"] .table > tbody > tr.table-success > td span { color: inherit !important; } [data-bs-theme="nova"] .table > tbody > tr.table-info > td small, [data-bs-theme="nova"] .table > tbody > tr.table-info > td a, [data-bs-theme="nova"] .table > tbody > tr.table-info > td span { color: inherit !important; } [data-bs-theme="nova"] .table > tbody > tr.table-warning > td small, [data-bs-theme="nova"] .table > tbody > tr.table-warning > td a, [data-bs-theme="nova"] .table > tbody > tr.table-warning > td span { color: inherit !important; } [data-bs-theme="nova"] .table > tbody > tr.table-danger > td small, [data-bs-theme="nova"] .table > tbody > tr.table-danger > td a, [data-bs-theme="nova"] .table > tbody > tr.table-danger > td span { color: inherit !important; } [data-bs-theme="nova"] .table > tbody > tr.table-primary > td small, [data-bs-theme="nova"] .table > tbody > tr.table-primary > td a, [data-bs-theme="nova"] .table > tbody > tr.table-primary > td span { color: inherit !important; } [data-bs-theme="nova"] .table > tbody > tr.table-secondary > td small, [data-bs-theme="nova"] .table > tbody > tr.table-secondary > td a, [data-bs-theme="nova"] .table > tbody > tr.table-secondary > td span { color: inherit !important; } /* ---------- Striped table override ---------- */ [data-bs-theme="nova"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-striped-bg: rgba(8, 20, 40, 0.35) !important; background-color: rgba(8, 20, 40, 0.35) !important; color: var(--sc-text); } /* Table container with glass treatment */ [data-bs-theme="nova"] .table-responsive { background: rgba(8, 20, 40, 0.3); border-radius: 12px; border: 1px solid rgba(0, 180, 216, 0.06); overflow: hidden; } /* --------------------------------------------------------------------------- 11. MODALS (Glass) --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .modal-content { background: rgba(8, 20, 40, 0.92) !important; -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); border: 1px solid rgba(0, 180, 216, 0.10) !important; border-radius: 16px !important; box-shadow: 0 0 60px rgba(0, 180, 216, 0.06), 0 24px 48px rgba(0, 0, 0, 0.4); } [data-bs-theme="nova"] .modal-header { border-bottom: 1px solid rgba(0, 180, 216, 0.08) !important; color: var(--sc-text-heading); } [data-bs-theme="nova"] .modal-footer { border-top: 1px solid rgba(0, 180, 216, 0.08) !important; } [data-bs-theme="nova"] .modal-title { color: var(--sc-text-heading); font-weight: 600; } [data-bs-theme="nova"] .modal-backdrop { background-color: rgba(2, 8, 16, 0.75); } [data-bs-theme="nova"] .modal-backdrop.show { opacity: 1; } /* --------------------------------------------------------------------------- 12. NAVIGATION TABS (Pill-style glass) --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .nav-tabs { border-bottom-color: var(--sc-border); } [data-bs-theme="nova"] .nav-tabs .nav-link, [data-bs-theme="nova"] .nav-tabs > li > a { color: #5a7a9a !important; border: 1px solid transparent; border-radius: 8px; padding: 6px 18px !important; margin: 0 2px; transition: all 0.25s ease; text-decoration: none; } [data-bs-theme="nova"] .nav-tabs .nav-link:hover, [data-bs-theme="nova"] .nav-tabs > li > a:hover { color: var(--sc-text) !important; border-color: transparent; background: rgba(0, 180, 216, 0.04); } [data-bs-theme="nova"] .nav-tabs .nav-link.active, [data-bs-theme="nova"] .nav-tabs > li.active > a { color: var(--sc-accent) !important; background: rgba(0, 180, 216, 0.08) !important; border-color: transparent !important; box-shadow: inset 0 0 0 1px rgba(0, 180, 216, 0.15), 0 0 12px rgba(0, 180, 216, 0.06); } /* Pills variation */ [data-bs-theme="nova"] .nav-pills .nav-link { color: var(--sc-muted); border-radius: 8px; transition: all 0.25s ease; } [data-bs-theme="nova"] .nav-pills .nav-link.active { color: var(--sc-accent) !important; background: rgba(0, 180, 216, 0.12) !important; box-shadow: 0 0 10px rgba(0, 180, 216, 0.1); } /* --------------------------------------------------------------------------- 13. DROPDOWNS (Glass) --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .dropdown-menu { background: rgba(8, 20, 40, 0.95) !important; -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); border: 1px solid rgba(0, 180, 216, 0.10) !important; border-radius: 10px !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 180, 216, 0.04); } [data-bs-theme="nova"] .dropdown-item { color: var(--sc-text); transition: all 0.15s ease; } [data-bs-theme="nova"] .dropdown-item:hover, [data-bs-theme="nova"] .dropdown-item:focus { background: rgba(0, 180, 216, 0.08) !important; color: var(--sc-accent); } [data-bs-theme="nova"] .dropdown-item.active, [data-bs-theme="nova"] .dropdown-item:active { background: rgba(0, 180, 216, 0.14) !important; color: var(--sc-accent); } [data-bs-theme="nova"] .dropdown-divider { border-color: var(--sc-border); } /* Tag color dropdown — match displayed tag appearance */ [data-bs-theme="nova"] .dropdown-item[style*="color:black"], [data-bs-theme="nova"] .dropdown-item[style*="color: black"] { color: inherit !important; } [data-bs-theme="nova"] .dropdown-item.text-bg-default { background: rgba(74, 110, 144, 0.12) !important; color: #8aaecc !important; } [data-bs-theme="nova"] .dropdown-item.text-bg-primary { background: rgba(0, 180, 216, 0.14) !important; color: #00b4d8 !important; } [data-bs-theme="nova"] .dropdown-item.text-bg-success { background: rgba(0, 255, 136, 0.12) !important; color: #00ff88 !important; } [data-bs-theme="nova"] .dropdown-item.text-bg-danger { background: rgba(255, 51, 102, 0.14) !important; color: #ff3366 !important; } [data-bs-theme="nova"] .dropdown-item.text-bg-warning { background: rgba(255, 170, 0, 0.14) !important; color: #ffaa00 !important; } [data-bs-theme="nova"] .dropdown-item.text-bg-secondary { background: rgba(74, 110, 144, 0.14) !important; color: #6a8eaa !important; } [data-bs-theme="nova"] .dropdown-item.text-bg-indigo { background: rgba(102, 16, 242, 0.18) !important; color: #a78bfa !important; } [data-bs-theme="nova"] .dropdown-item.text-bg-green { background: rgba(25, 135, 84, 0.18) !important; color: #4ade80 !important; } [data-bs-theme="nova"] .dropdown-item.text-bg-purple { background: rgba(123, 47, 255, 0.18) !important; color: #c084fc !important; } /* --------------------------------------------------------------------------- 14. BADGES & TAGS --------------------------------------------------------------------------- */ /* ---------- Standard badge semantic colors ---------- */ [data-bs-theme="nova"] .badge.bg-primary, [data-bs-theme="nova"] .badge.text-bg-primary { background: rgba(0, 180, 216, 0.18) !important; color: #00b4d8 !important; } [data-bs-theme="nova"] .badge.bg-success, [data-bs-theme="nova"] .badge.text-bg-success { background: rgba(0, 255, 136, 0.14) !important; color: #00ff88 !important; } [data-bs-theme="nova"] .badge.bg-danger, [data-bs-theme="nova"] .badge.text-bg-danger { background: rgba(255, 51, 102, 0.16) !important; color: #ff3366 !important; } [data-bs-theme="nova"] .badge.bg-warning, [data-bs-theme="nova"] .badge.text-bg-warning { background: rgba(255, 170, 0, 0.16) !important; color: #ffaa00 !important; } [data-bs-theme="nova"] .badge.bg-info, [data-bs-theme="nova"] .badge.text-bg-info { background: rgba(0, 212, 255, 0.16) !important; color: #00d4ff !important; } [data-bs-theme="nova"] .badge.bg-secondary, [data-bs-theme="nova"] .badge.text-bg-secondary { background: rgba(74, 110, 144, 0.18) !important; color: #6a8eaa !important; } /* ---------- Theme / Dark / Default badge colors ---------- */ [data-bs-theme="nova"] .badge.bg-theme, [data-bs-theme="nova"] .badge.text-bg-theme { background: rgba(0, 180, 216, 0.20) !important; color: #00b4d8 !important; } [data-bs-theme="nova"] .badge.bg-dark, [data-bs-theme="nova"] .badge.text-bg-dark { background: rgba(8, 20, 40, 0.6) !important; color: #8aaecc !important; border: 1px solid rgba(0, 180, 216, 0.08); } [data-bs-theme="nova"] .badge.text-bg-default, [data-bs-theme="nova"] .badge.bg-default { background: rgba(74, 110, 144, 0.15) !important; color: #8aaecc !important; } /* ---------- Extended color badges (tag colors) ---------- */ [data-bs-theme="nova"] .badge.bg-indigo, [data-bs-theme="nova"] .badge.text-bg-indigo, [data-bs-theme="nova"] .tag.text-bg-indigo { background: rgba(102, 16, 242, 0.18) !important; color: #a78bfa !important; } [data-bs-theme="nova"] .badge.bg-green, [data-bs-theme="nova"] .badge.text-bg-green, [data-bs-theme="nova"] .tag.text-bg-green { background: rgba(25, 135, 84, 0.18) !important; color: #4ade80 !important; } [data-bs-theme="nova"] .badge.bg-purple, [data-bs-theme="nova"] .badge.text-bg-purple, [data-bs-theme="nova"] .tag.text-bg-purple { background: rgba(123, 47, 255, 0.18) !important; color: #c084fc !important; } /* ---------- Inverse/light badge for dark mode override ---------- */ [data-bs-theme="nova"] .badge.bg-light, [data-bs-theme="nova"] .badge.text-bg-light { background: rgba(208, 232, 255, 0.10) !important; color: #8aaecc !important; } /* ---------- Badge text-dark override (e.g., "badge bg-warning text-dark") ---------- */ [data-bs-theme="nova"] .badge.text-dark { color: var(--sc-text) !important; } /* ---------- Non-badge bg-* utilities (standalone span/div elements) ---------- */ [data-bs-theme="nova"] span.bg-theme, [data-bs-theme="nova"] div.bg-theme { background: rgba(0, 180, 216, 0.20) !important; color: #00b4d8 !important; } [data-bs-theme="nova"] span.bg-dark:not(.badge), [data-bs-theme="nova"] div.bg-dark:not(.badge) { background: rgba(8, 20, 40, 0.5) !important; } /* ---------- Danger/Warning intensity variants (contentInventory) ---------- */ [data-bs-theme="nova"] .bg-danger-300 { background-color: rgba(255, 51, 102, 0.12) !important; color: #ff6688 !important; } [data-bs-theme="nova"] .bg-warning-300 { background-color: rgba(255, 170, 0, 0.12) !important; color: #ffcc44 !important; } /* ---------- bg-gray-* badge/utility overrides ---------- */ [data-bs-theme="nova"] .bg-gray-200 { background-color: rgba(74, 110, 144, 0.15) !important; } [data-bs-theme="nova"] .bg-gray-300 { background-color: rgba(74, 110, 144, 0.18) !important; } [data-bs-theme="nova"] .bg-gray-500 { background-color: rgba(74, 110, 144, 0.22) !important; } [data-bs-theme="nova"] .text-default { color: #6a8eaa !important; } [data-bs-theme="nova"] .text-light { color: #d0e8ff !important; } /* ---------- Tag component styling ---------- */ [data-bs-theme="nova"] .tag { border-radius: 6px; padding: 3px 8px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; transition: all 0.2s ease; border: 1px solid transparent; } [data-bs-theme="nova"] .tag.text-bg-default { background: rgba(74, 110, 144, 0.12) !important; color: #8aaecc !important; border-color: rgba(74, 110, 144, 0.15); } [data-bs-theme="nova"] .tag.text-bg-primary { background: rgba(0, 180, 216, 0.14) !important; color: #00b4d8 !important; border-color: rgba(0, 180, 216, 0.18); } [data-bs-theme="nova"] .tag.text-bg-success { background: rgba(0, 255, 136, 0.12) !important; color: #00ff88 !important; border-color: rgba(0, 255, 136, 0.16); } [data-bs-theme="nova"] .tag.text-bg-danger { background: rgba(255, 51, 102, 0.14) !important; color: #ff3366 !important; border-color: rgba(255, 51, 102, 0.18); } [data-bs-theme="nova"] .tag.text-bg-warning { background: rgba(255, 170, 0, 0.14) !important; color: #ffaa00 !important; border-color: rgba(255, 170, 0, 0.18); } [data-bs-theme="nova"] .tag.text-bg-secondary { background: rgba(74, 110, 144, 0.14) !important; color: #6a8eaa !important; border-color: rgba(74, 110, 144, 0.18); } [data-bs-theme="nova"] .tag.text-bg-indigo { border-color: rgba(102, 16, 242, 0.18); } [data-bs-theme="nova"] .tag.text-bg-green { border-color: rgba(25, 135, 84, 0.18); } [data-bs-theme="nova"] .tag.text-bg-purple { border-color: rgba(123, 47, 255, 0.18); } /* Tag hover glow */ [data-bs-theme="nova"] .tag.clickable:hover { box-shadow: 0 0 8px rgba(0, 180, 216, 0.15); filter: brightness(1.15); } /* Tag remove button */ [data-bs-theme="nova"] .tag .btn-close, [data-bs-theme="nova"] .tag [ng-click*="remove"] { filter: invert(1) brightness(2); opacity: 0.5; } [data-bs-theme="nova"] .tag .btn-close:hover, [data-bs-theme="nova"] .tag [ng-click*="remove"]:hover { opacity: 1; } /* --------------------------------------------------------------------------- 15. ALERTS --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .alert { border-radius: 10px; border-width: 1px; border-left-width: 3px; color: var(--sc-text) !important; } [data-bs-theme="nova"] .alert-info { background: rgba(0, 180, 216, 0.06) !important; border-color: rgba(0, 180, 216, 0.15) !important; border-left-color: var(--sc-accent) !important; } [data-bs-theme="nova"] .alert-success { background: rgba(0, 255, 136, 0.05) !important; border-color: rgba(0, 255, 136, 0.12) !important; border-left-color: #00ff88 !important; } [data-bs-theme="nova"] .alert-warning { background: rgba(255, 170, 0, 0.05) !important; border-color: rgba(255, 170, 0, 0.12) !important; border-left-color: #ffaa00 !important; } [data-bs-theme="nova"] .alert-danger { background: rgba(255, 51, 102, 0.05) !important; border-color: rgba(255, 51, 102, 0.12) !important; border-left-color: #ff3366 !important; } /* --------------------------------------------------------------------------- 16. PROGRESS BARS --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .progress { background-color: var(--sc-surface) !important; border: 1px solid var(--sc-border); border-radius: 6px; overflow: hidden; } [data-bs-theme="nova"] .progress-bar { background: linear-gradient(90deg, var(--sc-accent), var(--sc-accent-secondary)) !important; box-shadow: 0 0 10px rgba(0, 180, 216, 0.35); } /* --------------------------------------------------------------------------- 17. ACCORDIONS --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .accordion-item { background: var(--sc-surface) !important; border-color: var(--sc-border) !important; } [data-bs-theme="nova"] .accordion-button { background: var(--sc-surface-elevated) !important; color: var(--sc-text) !important; } [data-bs-theme="nova"] .accordion-button:not(.collapsed) { background: rgba(0, 180, 216, 0.06) !important; color: var(--sc-accent) !important; box-shadow: none; } [data-bs-theme="nova"] .accordion-body { background: var(--sc-surface) !important; } /* --------------------------------------------------------------------------- 18. LIST GROUPS --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .list-group-item { background: var(--sc-surface) !important; border-color: var(--sc-border) !important; color: var(--sc-text); } [data-bs-theme="nova"] .list-group-item:hover { background: var(--sc-surface-elevated) !important; } [data-bs-theme="nova"] .list-group-item.active { background: rgba(0, 180, 216, 0.10) !important; border-color: rgba(0, 180, 216, 0.2) !important; color: var(--sc-accent) !important; } /* --------------------------------------------------------------------------- 19. TOOLTIPS & POPOVERS --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .tooltip-inner { background: var(--sc-surface-elevated) !important; border: 1px solid var(--sc-border); color: var(--sc-text); } [data-bs-theme="nova"] .popover { background: var(--sc-surface) !important; border-color: var(--sc-border) !important; } [data-bs-theme="nova"] .popover-header { background: var(--sc-surface-elevated) !important; border-bottom-color: var(--sc-border) !important; color: var(--sc-text-heading); } [data-bs-theme="nova"] .popover-body { color: var(--sc-text); } /* --------------------------------------------------------------------------- 20. PAGINATION --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .page-link { background: transparent !important; border-color: var(--sc-border) !important; color: var(--sc-muted) !important; transition: all 0.2s ease; } [data-bs-theme="nova"] .page-link:hover { background: var(--sc-surface-elevated) !important; border-color: rgba(0, 180, 216, 0.25) !important; color: var(--sc-accent) !important; } [data-bs-theme="nova"] .page-item.active .page-link { background: rgba(0, 180, 216, 0.12) !important; border-color: rgba(0, 180, 216, 0.3) !important; color: var(--sc-accent) !important; box-shadow: 0 0 10px rgba(0, 180, 216, 0.15); } [data-bs-theme="nova"] .page-item.disabled .page-link { background: transparent !important; border-color: rgba(20, 50, 82, 0.4) !important; color: rgba(74, 110, 144, 0.5) !important; } /* --------------------------------------------------------------------------- 21. TOASTR NOTIFICATIONS --------------------------------------------------------------------------- */ /* Toastr base — glass with more opacity */ [data-bs-theme="nova"] #toast-container > div { -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } [data-bs-theme="nova"] .toast-success { background-color: rgba(4, 18, 30, 0.88) !important; border-left: 3px solid #00ff88 !important; color: var(--sc-text) !important; } [data-bs-theme="nova"] .toast-error { background-color: rgba(4, 18, 30, 0.88) !important; border-left: 3px solid #ff3366 !important; color: var(--sc-text) !important; } [data-bs-theme="nova"] .toast-warning { background-color: rgba(4, 18, 30, 0.88) !important; border-left: 3px solid #ffaa00 !important; color: var(--sc-text) !important; } [data-bs-theme="nova"] .toast-info { background-color: rgba(4, 18, 30, 0.88) !important; border-left: 3px solid var(--sc-accent) !important; color: var(--sc-text) !important; } /* --------------------------------------------------------------------------- 22. CLOSE BUTTON --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.5; } [data-bs-theme="nova"] .btn-close:hover { opacity: 1; } /* --------------------------------------------------------------------------- 23. BREADCRUMBS --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .breadcrumb { background: transparent; } [data-bs-theme="nova"] .breadcrumb-item a { color: var(--sc-accent); } [data-bs-theme="nova"] .breadcrumb-item.active { color: var(--sc-muted); } /* --------------------------------------------------------------------------- 24. STATUS INDICATORS (Pulsing Glow) --------------------------------------------------------------------------- */ @keyframes nova-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes nova-glow-pulse { 0%, 100% { box-shadow: 0 0 6px rgba(0, 180, 216, 0.4); } 50% { box-shadow: 0 0 12px rgba(0, 180, 216, 0.6); } } [data-bs-theme="nova"] .status-running, [data-bs-theme="nova"] .badge-running { box-shadow: 0 0 8px rgba(0, 255, 136, 0.5); animation: nova-pulse 2s infinite; } [data-bs-theme="nova"] .status-error, [data-bs-theme="nova"] .badge-error { box-shadow: 0 0 8px rgba(255, 51, 102, 0.5); animation: nova-pulse 1.5s infinite; } /* ---------- Nova current playing row (playout) — bright white text ---------- */ [data-bs-theme="nova"] .nova-current-row, [data-bs-theme="nova"] .nova-current-row > td, [data-bs-theme="nova"] .nova-current-row > td small, [data-bs-theme="nova"] .nova-current-row > td .small, [data-bs-theme="nova"] .nova-current-row > td a, [data-bs-theme="nova"] .nova-current-row > td span { color: #ffffff !important; font-weight: 500; } /* ---------- Text color utilities — toned down from neon for readability ---------- */ [data-bs-theme="nova"] .text-success { color: #44cc88 !important; } [data-bs-theme="nova"] .text-danger { color: #cc4466 !important; } [data-bs-theme="nova"] .text-warning { color: #cc9933 !important; } [data-bs-theme="nova"] .text-info { color: #44aacc !important; } [data-bs-theme="nova"] .text-primary { color: #0099bb !important; } [data-bs-theme="nova"] .text-secondary { color: #6a8eaa !important; } /* --------------------------------------------------------------------------- 25. FOCUS RING (Global) --------------------------------------------------------------------------- */ [data-bs-theme="nova"] *:focus-visible { outline: none !important; box-shadow: 0 0 0 2px rgba(0, 180, 216, 0.25), 0 0 16px rgba(0, 180, 216, 0.06) !important; } /* --------------------------------------------------------------------------- 26. UTILITY OVERRIDES (prevent light mode bleed) --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .bg-white { background-color: var(--sc-surface) !important; } [data-bs-theme="nova"] .bg-light { background-color: var(--sc-surface) !important; } [data-bs-theme="nova"] .bg-body { background-color: var(--sc-bg) !important; } [data-bs-theme="nova"] .text-dark { color: var(--sc-text) !important; } [data-bs-theme="nova"] .text-muted { color: var(--sc-muted) !important; } [data-bs-theme="nova"] .text-body { color: var(--sc-text) !important; } [data-bs-theme="nova"] .border { border-color: var(--sc-border) !important; } [data-bs-theme="nova"] hr { color: var(--sc-border); opacity: 0.5; } /* --------------------------------------------------------------------------- 27. THEME PANEL (Self-styling) --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .app-theme-panel { background: rgba(8, 20, 40, 0.95); border: 1px solid rgba(0, 180, 216, 0.10); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } [data-bs-theme="nova"] .app-theme-toggle-btn { background: rgba(0, 180, 216, 0.12) !important; border-color: rgba(0, 180, 216, 0.2) !important; color: var(--sc-accent) !important; } /* --------------------------------------------------------------------------- 28. CODEMIRROR (Code editors) --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .CodeMirror { background: var(--sc-bg) !important; color: var(--sc-text) !important; } [data-bs-theme="nova"] .CodeMirror-gutters { background: var(--sc-surface) !important; border-right-color: var(--sc-border) !important; } /* ---------- Side panel divider lines — override inline #e5e6e7 ---------- */ [data-bs-theme="nova"] [style*="border-left-color"] { border-left-color: var(--sc-border) !important; } /* ---------- Side panels / content panels — softer text ---------- */ [data-bs-theme="nova"] .panel-body { color: #a0c0dd; } [data-bs-theme="nova"] .panel-body span.fw-600, [data-bs-theme="nova"] .panel-body span.fw-bold, [data-bs-theme="nova"] .panel-body .fw-600, [data-bs-theme="nova"] .panel-body .fw-bold { color: #a0c0dd; } /* --------------------------------------------------------------------------- 29. CONTEXT MENU --------------------------------------------------------------------------- */ [data-bs-theme="nova"] .context-menu, [data-bs-theme="nova"] .dropdown-context { background: rgba(8, 20, 40, 0.95) !important; border: 1px solid rgba(0, 180, 216, 0.10) !important; border-radius: 10px !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } /* --------------------------------------------------------------------------- 30. TIMELINE / TIMESLIDER (Dimmed lines, glass items) --------------------------------------------------------------------------- */ /* Outer border — subtle deep blue */ [data-bs-theme="nova"] .time-slider .ruler .bg { border-color: rgba(0, 180, 216, 0.10); background-color: transparent; } /* Graduation lines — dimmed to near-invisible */ [data-bs-theme="nova"] .time-slider .ruler .graduation { background-color: rgba(0, 180, 216, 0.12); } [data-bs-theme="nova"] .time-slider .ruler .graduation.middle { background-color: rgba(0, 180, 216, 0.15); } [data-bs-theme="nova"] .time-slider .ruler .graduation.big { background-color: rgba(0, 180, 216, 0.18); } /* Graduation labels */ [data-bs-theme="nova"] .time-slider .ruler .graduation-title { color: var(--sc-muted); } /* Current time caret — keep red but less glaring */ [data-bs-theme="nova"] .time-slider .ruler .current-time-caret { background-color: rgba(255, 51, 102, 0.75); box-shadow: 0 0 6px rgba(255, 51, 102, 0.35); } /* Timecell items — glass style */ [data-bs-theme="nova"] .time-slider .ruler .timecell { background-color: rgba(8, 20, 40, 0.65); border: 1px solid rgba(0, 180, 216, 0.12); color: var(--sc-text); opacity: 0.95; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* Current playing item — accent glow */ [data-bs-theme="nova"] .time-slider .ruler .timecell.current { background-color: rgba(0, 255, 136, 0.15); border-color: rgba(0, 255, 136, 0.3); box-shadow: 0 0 10px rgba(0, 255, 136, 0.12); } /* Timecell hover */ [data-bs-theme="nova"] .time-slider .ruler .timecell-event.hover { border-color: rgba(0, 180, 216, 0.35); } /* Timecell moving/drag */ [data-bs-theme="nova"] .time-slider .ruler .timecell-event.moving { border-color: rgba(255, 51, 102, 0.5); } /* Prompt tooltip — glass */ [data-bs-theme="nova"] .time-slider .prompts .prompt .body { background-color: rgba(8, 20, 40, 0.9); border: 1px solid rgba(0, 180, 216, 0.10); color: var(--sc-text); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } [data-bs-theme="nova"] .time-slider .prompts .prompt .triangle-up { border-bottom-color: rgba(8, 20, 40, 0.9); } [data-bs-theme="nova"] .time-slider .prompts .prompt .triangle-down { border-top-color: rgba(8, 20, 40, 0.9); } /* --------------------------------------------------------------------------- 31. C3.JS CHARTS (Gauges, line charts, bar charts) --------------------------------------------------------------------------- */ /* General strokes and lines */ [data-bs-theme="nova"] .c3 path, [data-bs-theme="nova"] .c3 line { stroke: rgba(0, 180, 216, 0.15); } [data-bs-theme="nova"] .c3 text { fill: var(--sc-muted); } /* Grid lines */ [data-bs-theme="nova"] .c3-grid line { stroke: rgba(0, 180, 216, 0.10); } [data-bs-theme="nova"] .c3-grid text { fill: var(--sc-muted); } /* Axis lines & ticks */ [data-bs-theme="nova"] .c3 .c3-axis path, [data-bs-theme="nova"] .c3 .c3-axis line { stroke: rgba(0, 180, 216, 0.15); } [data-bs-theme="nova"] .c3 .c3-axis text, [data-bs-theme="nova"] .c3 .tick text { fill: var(--sc-muted); } /* Gauge background arc — deep navy instead of light gray */ [data-bs-theme="nova"] .c3-chart-arcs .c3-chart-arcs-background { fill: rgba(20, 50, 82, 0.35); stroke: none; } /* Gauge arc segment separators — thin dark gap between arcs */ [data-bs-theme="nova"] .c3-chart-arc path { stroke: var(--sc-bg); stroke-width: 2; } /* Gauge arc targets — semi-transparent for glass consistency */ [data-bs-theme="nova"] .c3-chart-arc.c3-target g path { opacity: 0.6; } [data-bs-theme="nova"] .c3-chart-arc.c3-target.c3-focused g path { opacity: 0.75; } /* Gauge value text */ [data-bs-theme="nova"] .c3-chart-arc .c3-gauge-value { fill: var(--sc-text) !important; } /* Gauge unit text */ [data-bs-theme="nova"] .c3-chart-arcs .c3-chart-arcs-gauge-unit { fill: var(--sc-muted); } /* Gauge min/max labels */ [data-bs-theme="nova"] .c3-chart-arcs .c3-chart-arcs-gauge-max, [data-bs-theme="nova"] .c3-chart-arcs .c3-chart-arcs-gauge-min { fill: var(--sc-muted); } /* Arc title (donut center text) */ [data-bs-theme="nova"] .c3-chart-arcs-title { fill: var(--sc-text); } /* Legend */ [data-bs-theme="nova"] .c3-legend-background { fill: var(--sc-surface); stroke: var(--sc-border); opacity: 0.85; } [data-bs-theme="nova"] .c3-legend-item text { fill: #8aaecc; } /* Tooltip — glass style */ [data-bs-theme="nova"] .c3-tooltip { background-color: rgba(8, 20, 40, 0.92); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); border-radius: 8px; overflow: hidden; } [data-bs-theme="nova"] .c3-tooltip tr { border-color: var(--sc-border); } [data-bs-theme="nova"] .c3-tooltip th { background-color: rgba(0, 180, 216, 0.12); color: var(--sc-text); } [data-bs-theme="nova"] .c3-tooltip td { background-color: rgba(8, 20, 40, 0.95); color: var(--sc-text); border-left-color: var(--sc-border); } /* Empty text */ [data-bs-theme="nova"] .c3-text.c3-empty { fill: var(--sc-muted); } /* Line chart lines — slightly brighter for visibility */ [data-bs-theme="nova"] .c3-line { stroke-width: 1.5px; } /* Point expanded state */ [data-bs-theme="nova"] .c3-circle._expanded_ { stroke: var(--sc-surface); } [data-bs-theme="nova"] .c3-selected-circle { fill: var(--sc-accent); } /* Bar chart bars — semi-transparent */ [data-bs-theme="nova"] .c3-bar { opacity: 0.7; } [data-bs-theme="nova"] .c3-bar._expanded_ { opacity: 0.85; } /* Area chart fills — more transparent */ [data-bs-theme="nova"] .c3-area { opacity: 0.12; } /* --------------------------------------------------------------------------- 32. GRACEFUL DEGRADATION (No backdrop-filter) --------------------------------------------------------------------------- */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { [data-bs-theme="nova"] .app-header { background: #081428 !important; } [data-bs-theme="nova"] .app-sidebar { background: #081428 !important; } [data-bs-theme="nova"] .card { background: #081428 !important; } [data-bs-theme="nova"] .modal-content { background: #06101e !important; } [data-bs-theme="nova"] .dropdown-menu { background: #081428 !important; } }