/* ============================================================================ Stream Circle PBA — "StreamLight" Light Theme A clean, professional light theme inspired by the Stream Circle corporate website design. Flat surfaces, blue-tinted grays, branded accents. Activated via: data-bs-theme="streamlight" on element ============================================================================ */ /* --------------------------------------------------------------------------- 1. CSS CUSTOM PROPERTIES (Color Tokens) --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] { color-scheme: light; /* — Strictly rectangular design (streamcircle.com style) — */ --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-xxl: 0; --bs-border-radius-2xl: 0; --bs-border-radius-pill: 0; /* — Core tokens — */ --sl-brand: #264293; --sl-brand-light: #B5DFF2; --sl-brand-bg: #e4f4fa; --sl-surface: #E4F4FA; --sl-surface-alt: #E4F4FA; --sl-shadow: rgba(38, 66, 147, 0.08); /* — Text — */ --sl-text: #1a2a3e; --sl-text-heading: #142240; --sl-muted: #6b7d92; /* — Borders — */ --sl-border: #c8dce8; /* — Bootstrap variable overrides — */ --bs-body-bg: #E4F4FA; --bs-body-bg-rgb: 228, 244, 250; --bs-body-color: #1a2a3e; --bs-body-color-rgb: 26, 42, 62; --bs-emphasis-color: #142240; --bs-emphasis-color-rgb: 20, 34, 64; --bs-secondary-color: rgba(26, 42, 62, 0.7); --bs-secondary-color-rgb: 26, 42, 62; --bs-tertiary-color: rgba(26, 42, 62, 0.45); --bs-tertiary-color-rgb: 26, 42, 62; --bs-secondary-bg: #eef6fb; --bs-secondary-bg-rgb: 238, 246, 251; --bs-tertiary-bg: #e4f4fa; --bs-tertiary-bg-rgb: 228, 244, 250; --bs-heading-color: #142240; --bs-link-color: #264293; --bs-link-color-rgb: 38, 66, 147; --bs-link-hover-color: #1a3070; --bs-link-hover-color-rgb: 26, 48, 112; --bs-code-color: #6f42c1; --bs-highlight-color: #1a2a3e; --bs-highlight-bg: rgba(224, 149, 32, 0.15); --bs-border-color: #c8dce8; --bs-border-color-translucent: rgba(38, 66, 147, 0.08); --bs-component-bg: #E4F4FA; --bs-component-bg-rgb: 255, 255, 255; --bs-component-color: #1a2a3e; --bs-component-color-rgb: 26, 42, 62; /* — Semantic colors — */ --bs-primary: #264293; --bs-primary-rgb: 38, 66, 147; --bs-success: #198754; --bs-success-rgb: 25, 135, 84; --bs-warning: #e09520; --bs-warning-rgb: 224, 149, 32; --bs-danger: #dc3545; --bs-danger-rgb: 220, 53, 69; --bs-info: #2680c2; --bs-info-rgb: 38, 128, 194; --bs-primary-text-emphasis: #264293; --bs-secondary-text-emphasis: #4a5d72; --bs-success-text-emphasis: #146c43; --bs-info-text-emphasis: #1d6098; --bs-warning-text-emphasis: #a06e18; --bs-danger-text-emphasis: #b02a37; --bs-light-text-emphasis: #344a60; --bs-dark-text-emphasis: #1a2a3e; --bs-primary-bg-subtle: rgba(38, 66, 147, 0.06); --bs-secondary-bg-subtle: rgba(107, 125, 146, 0.06); --bs-success-bg-subtle: rgba(25, 135, 84, 0.06); --bs-info-bg-subtle: rgba(38, 128, 194, 0.06); --bs-warning-bg-subtle: rgba(224, 149, 32, 0.06); --bs-danger-bg-subtle: rgba(220, 53, 69, 0.06); --bs-light-bg-subtle: #E4F4FA; --bs-dark-bg-subtle: #e4f0f8; --bs-primary-border-subtle: rgba(38, 66, 147, 0.20); --bs-secondary-border-subtle: #c8dce8; --bs-success-border-subtle: rgba(25, 135, 84, 0.20); --bs-info-border-subtle: rgba(38, 128, 194, 0.20); --bs-warning-border-subtle: rgba(224, 149, 32, 0.20); --bs-danger-border-subtle: rgba(220, 53, 69, 0.20); --bs-light-border-subtle: #c8dce8; --bs-dark-border-subtle: #a8bfd0; /* — Gray scale (blue-tinted progression) — */ --bs-gray-100: #E4F4FA; --bs-gray-200: #e4f0f8; --bs-gray-300: #c8dce8; --bs-gray-400: #a8bfd0; --bs-gray-500: #6b7d92; --bs-gray-600: #4a5d72; --bs-gray-700: #344a60; --bs-gray-800: #1a2a3e; --bs-gray-900: #142240; /* — App-specific tokens — */ --bs-app-header-bg: #1e3570; --bs-app-header-color: #ffffff; --bs-app-header-border-color: rgba(255, 255, 255, 0.1); --bs-app-sidebar-link-color: rgba(255, 255, 255, 0.7); --bs-app-sidebar-link-hover-color: #ffffff; --bs-app-sidebar-link-hover-bg: rgba(255, 255, 255, 0.08); --bs-app-sidebar-link-active-color: #ffffff; --bs-app-sidebar-link-active-bg: rgba(255, 255, 255, 0.12); --bs-app-sidebar-mobile-bg: #1e3570; /* — Action button accent (orange from SC website "Book demo") — */ --sl-action: #f59e42; --sl-action-hover: #e88a2a; /* — Form colors — */ --bs-form-valid-color: #198754; --bs-form-valid-border-color: #198754; --bs-form-invalid-color: #dc3545; --bs-form-invalid-border-color: #dc3545; } /* --------------------------------------------------------------------------- 2. GLOBAL / BODY --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] body { background-color: #E4F4FA; color: var(--sl-text); font-family: "Inter", system-ui, -apple-system, sans-serif; font-weight: 400; letter-spacing: 0.01em; } /* Ensure content stacks normally */ [data-bs-theme="streamlight"] #app { position: relative; z-index: 1; } /* --------------------------------------------------------------------------- 3. TYPOGRAPHY --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] h1, [data-bs-theme="streamlight"] h2, [data-bs-theme="streamlight"] h3, [data-bs-theme="streamlight"] h4, [data-bs-theme="streamlight"] h5, [data-bs-theme="streamlight"] h6, [data-bs-theme="streamlight"] .h1, [data-bs-theme="streamlight"] .h2, [data-bs-theme="streamlight"] .h3, [data-bs-theme="streamlight"] .h4, [data-bs-theme="streamlight"] .h5, [data-bs-theme="streamlight"] .h6 { color: var(--sl-text-heading); font-weight: 600; letter-spacing: -0.02em; } [data-bs-theme="streamlight"] small, [data-bs-theme="streamlight"] .small { color: var(--sl-muted); } [data-bs-theme="streamlight"] 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="streamlight"] pre { background-color: #E4F4FA !important; color: #344a60 !important; border: 1px solid #c8dce8; border-radius: 0; padding: 12px 16px; font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace; font-size: 0.8rem; } [data-bs-theme="streamlight"] pre code { color: #344a60 !important; background: transparent !important; } /* Inline code within text */ [data-bs-theme="streamlight"] :not(pre) > code { background-color: rgba(38, 66, 147, 0.06) !important; color: var(--bs-code-color) !important; padding: 2px 6px; border-radius: 0; border: 1px solid rgba(38, 66, 147, 0.08); } /* Textarea code inputs (API POST data) */ [data-bs-theme="streamlight"] textarea.form-control { font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace; } /* Pre-scrollable */ [data-bs-theme="streamlight"] .pre-scrollable { background-color: #E4F4FA !important; border-color: #c8dce8 !important; } /* --------------------------------------------------------------------------- 4. SCROLLBARS --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-bs-theme="streamlight"] ::-webkit-scrollbar-track { background: #E4F4FA; } [data-bs-theme="streamlight"] ::-webkit-scrollbar-thumb { background: #c8dce8; border-radius: 0; } [data-bs-theme="streamlight"] ::-webkit-scrollbar-thumb:hover { background: #264293; } [data-bs-theme="streamlight"] ::-webkit-scrollbar-corner { background: #E4F4FA; } /* --------------------------------------------------------------------------- 5. APP HEADER (Clean, flat) --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .app-header { background: #1e3570 !important; border-bottom: none !important; box-shadow: 0 2px 8px rgba(14, 25, 60, 0.15); color: #ffffff; } [data-bs-theme="streamlight"] .app-header .brand-logo, [data-bs-theme="streamlight"] .app-header .brand { color: #ffffff !important; } [data-bs-theme="streamlight"] .app-header .navbar-nav > .nav-item > .nav-link { color: rgba(255, 255, 255, 0.7); } [data-bs-theme="streamlight"] .app-header .navbar-nav > .nav-item > .nav-link:hover { color: #ffffff; } /* Header icons, toggles, and buttons — ensure light on dark */ [data-bs-theme="streamlight"] .app-header .menu-icon, [data-bs-theme="streamlight"] .app-header .menu-text, [data-bs-theme="streamlight"] .app-header i, [data-bs-theme="streamlight"] .app-header .fa, [data-bs-theme="streamlight"] .app-header .bi, [data-bs-theme="streamlight"] .app-header [class*="fa-"], [data-bs-theme="streamlight"] .app-header a, [data-bs-theme="streamlight"] .app-header .text-body { color: rgba(255, 255, 255, 0.8) !important; } [data-bs-theme="streamlight"] .app-header .text-body.text-opacity-25 { color: rgba(255, 255, 255, 0.4) !important; } /* Sidebar icons — light */ [data-bs-theme="streamlight"] .app-sidebar .menu-icon, [data-bs-theme="streamlight"] .app-sidebar i, [data-bs-theme="streamlight"] .app-sidebar .fa, [data-bs-theme="streamlight"] .app-sidebar .bi, [data-bs-theme="streamlight"] .app-sidebar [class*="fa-"], [data-bs-theme="streamlight"] .app-sidebar .text-body { color: rgba(255, 255, 255, 0.7) !important; } [data-bs-theme="streamlight"] .app-sidebar .menu > .menu-item.active .menu-icon, [data-bs-theme="streamlight"] .app-sidebar .menu > .menu-item.active i { color: #ffffff !important; } /* Sidebar menu section headers */ [data-bs-theme="streamlight"] .app-sidebar .menu-header, [data-bs-theme="streamlight"] .app-sidebar .menu-divider { color: rgba(255, 255, 255, 0.35) !important; } /* Sidebar profile/brand area — all text light */ [data-bs-theme="streamlight"] .app-sidebar .menu-profile *, [data-bs-theme="streamlight"] .app-sidebar .menu-profile h6, [data-bs-theme="streamlight"] .app-sidebar .menu-profile span, [data-bs-theme="streamlight"] .app-sidebar .menu-profile a, [data-bs-theme="streamlight"] .app-sidebar .menu-profile-link, [data-bs-theme="streamlight"] .app-sidebar .menu-profile-img h6 { color: rgba(255, 255, 255, 0.85) !important; } [data-bs-theme="streamlight"] .app-sidebar .menu-profile-img span { color: rgba(255, 255, 255, 0.5) !important; } /* Header — clock, toggle buttons, all remaining dark elements */ [data-bs-theme="streamlight"] .app-header *, [data-bs-theme="streamlight"] .app-header span, [data-bs-theme="streamlight"] .app-header small, [data-bs-theme="streamlight"] .app-header b, [data-bs-theme="streamlight"] .app-header label, [data-bs-theme="streamlight"] .app-header .form-check-label, [data-bs-theme="streamlight"] .app-header pba-clock, [data-bs-theme="streamlight"] .app-header pba-clock * { color: rgba(255, 255, 255, 0.8) !important; } /* Header buttons (Alerts, Refreshing toggles) — light on dark */ [data-bs-theme="streamlight"] .app-header .btn { color: rgba(255, 255, 255, 0.8) !important; border-color: rgba(255, 255, 255, 0.2) !important; background: transparent !important; } [data-bs-theme="streamlight"] .app-header .btn:hover { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.4) !important; background: rgba(255, 255, 255, 0.08) !important; } [data-bs-theme="streamlight"] .app-header .btn.btn-warning { color: #ffaa00 !important; border-color: rgba(255, 170, 0, 0.4) !important; background: rgba(255, 170, 0, 0.1) !important; } /* Header toggle icons */ [data-bs-theme="streamlight"] .app-header .btn i, [data-bs-theme="streamlight"] .app-header .btn .fa, [data-bs-theme="streamlight"] .app-header .btn .bi { color: inherit !important; } /* Header hamburger/menu toggler */ [data-bs-theme="streamlight"] .app-header .menu-toggler { color: rgba(255, 255, 255, 0.7) !important; } [data-bs-theme="streamlight"] .app-header .menu-toggler .bar, [data-bs-theme="streamlight"] .app-header .menu-toggler:before, [data-bs-theme="streamlight"] .app-header .menu-toggler:after { background-color: rgba(255, 255, 255, 0.7) !important; } /* Form switches in header (if any) */ [data-bs-theme="streamlight"] .app-header .form-check-input, [data-bs-theme="streamlight"] .app-header .form-switch .form-check-input { background-color: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.3) !important; } [data-bs-theme="streamlight"] .app-header .form-check-input:checked { background-color: var(--sl-action, #f59e42) !important; border-color: var(--sl-action, #f59e42) !important; } /* Sidebar — all remaining dark text */ [data-bs-theme="streamlight"] .app-sidebar .menu-text { color: rgba(255, 255, 255, 0.7) !important; } [data-bs-theme="streamlight"] .app-sidebar .menu > .menu-item.active .menu-text { color: #ffffff !important; } /* --------------------------------------------------------------------------- 6. APP SIDEBAR (Dark blue branded) --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .app-sidebar { background: #264293 !important; border-right: none !important; box-shadow: 2px 0 8px rgba(14, 25, 60, 0.15) !important; } /* Sidebar menu items */ [data-bs-theme="streamlight"] .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="streamlight"] .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 — white text, orange left border */ [data-bs-theme="streamlight"] .app-sidebar .menu > .menu-item.active > .menu-link { color: #ffffff !important; background: rgba(255, 255, 255, 0.12) !important; border-left: 2px solid var(--sl-action, #f59e42); } /* Submenu items */ [data-bs-theme="streamlight"] .app-sidebar .menu .menu-submenu > .menu-item > .menu-link { color: rgba(255, 255, 255, 0.55); transition: all 0.2s ease; } [data-bs-theme="streamlight"] .app-sidebar .menu .menu-submenu > .menu-item > .menu-link:hover { color: rgba(255, 255, 255, 0.85); } [data-bs-theme="streamlight"] .app-sidebar .menu .menu-submenu > .menu-item.active > .menu-link { color: #ffffff !important; } /* Sidebar menu icons */ [data-bs-theme="streamlight"] .app-sidebar .menu > .menu-item > .menu-link .menu-icon { opacity: 0.6; transition: opacity 0.2s ease; } [data-bs-theme="streamlight"] .app-sidebar .menu > .menu-item > .menu-link:hover .menu-icon, [data-bs-theme="streamlight"] .app-sidebar .menu > .menu-item.active > .menu-link .menu-icon { opacity: 1; } /* Sidebar profile/brand section */ [data-bs-theme="streamlight"] .app-sidebar .menu-profile, [data-bs-theme="streamlight"] .app-sidebar .menu-header { color: rgba(255, 255, 255, 0.45); letter-spacing: 0.1em; font-size: 0.7rem; text-transform: uppercase; } /* --------------------------------------------------------------------------- 7. CARDS & PANELS --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .card { background: #E4F4FA !important; border: 1px solid #c8dce8 !important; box-shadow: 0 1px 4px rgba(38, 66, 147, 0.06); overflow: hidden; position: relative; } /* Top-edge accent line */ [data-bs-theme="streamlight"] .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(38, 66, 147, 0.08); pointer-events: none; z-index: 1; } [data-bs-theme="streamlight"] .card-header { background: #E4F4FA !important; border-bottom: 1px solid #c8dce8 !important; color: var(--sl-text-heading); } [data-bs-theme="streamlight"] .card-body { color: var(--sl-text); } [data-bs-theme="streamlight"] .card-footer { background: transparent !important; border-top: 1px solid #c8dce8 !important; } /* --------------------------------------------------------------------------- 8. BUTTONS --------------------------------------------------------------------------- */ /* Primary button — turquoise blue */ [data-bs-theme="streamlight"] .btn-primary, [data-bs-theme="streamlight"] .btn-theme { background: #00b4d8 !important; border: 1px solid #00b4d8 !important; color: #ffffff !important; border-radius: 0 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } [data-bs-theme="streamlight"] .btn-primary:hover, [data-bs-theme="streamlight"] .btn-theme:hover { background: #0096b4 !important; border-color: #0096b4 !important; box-shadow: 0 4px 12px rgba(0, 180, 216, 0.25); color: #ffffff !important; } [data-bs-theme="streamlight"] .btn-primary:active, [data-bs-theme="streamlight"] .btn-theme:active { background: #007a96 !important; box-shadow: 0 2px 6px rgba(0, 180, 216, 0.3); } /* Success button */ [data-bs-theme="streamlight"] .btn-success { background: #198754 !important; border: 1px solid #198754 !important; color: #ffffff !important; border-radius: 0 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } [data-bs-theme="streamlight"] .btn-success:hover { background: #146c43 !important; border-color: #146c43 !important; box-shadow: 0 4px 12px rgba(25, 135, 84, 0.25); color: #ffffff !important; } /* Danger button */ [data-bs-theme="streamlight"] .btn-danger { background: #dc3545 !important; border: 1px solid #dc3545 !important; color: #ffffff !important; border-radius: 0 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } [data-bs-theme="streamlight"] .btn-danger:hover { background: #b02a37 !important; border-color: #b02a37 !important; box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25); color: #ffffff !important; } /* Warning button */ [data-bs-theme="streamlight"] .btn-warning { background: #e09520 !important; border: 1px solid #e09520 !important; color: #ffffff !important; border-radius: 0 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } [data-bs-theme="streamlight"] .btn-warning:hover { background: #c07e18 !important; border-color: #c07e18 !important; box-shadow: 0 4px 12px rgba(224, 149, 32, 0.25); color: #ffffff !important; } /* Info button */ [data-bs-theme="streamlight"] .btn-info { background: #2680c2 !important; border: 1px solid #2680c2 !important; color: #ffffff !important; border-radius: 0 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } [data-bs-theme="streamlight"] .btn-info:hover { background: #1d6098 !important; border-color: #1d6098 !important; box-shadow: 0 4px 12px rgba(38, 128, 194, 0.25); color: #ffffff !important; } /* Secondary / Default buttons — SC website "Read more" style (white bg, dark blue text) */ [data-bs-theme="streamlight"] .btn-secondary, [data-bs-theme="streamlight"] .btn-default, [data-bs-theme="streamlight"] .btn-outline-secondary, [data-bs-theme="streamlight"] .btn-outline-default { background: #ffffff !important; border: 1px solid #c8dce8 !important; color: #264293 !important; border-radius: 0 !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } [data-bs-theme="streamlight"] .btn-secondary:hover, [data-bs-theme="streamlight"] .btn-default:hover, [data-bs-theme="streamlight"] .btn-outline-secondary:hover, [data-bs-theme="streamlight"] .btn-outline-default:hover { background: #B5DFF2 !important; border-color: #B5DFF2 !important; color: #264293 !important; } /* Outline primary */ [data-bs-theme="streamlight"] .btn-outline-primary { border-color: var(--sl-action, #f59e42) !important; color: var(--sl-action, #f59e42) !important; border-radius: 0 !important; } [data-bs-theme="streamlight"] .btn-outline-primary:hover { background: rgba(232, 115, 42, 0.08) !important; color: var(--sl-action-hover, #e88a2a) !important; } /* Button group */ [data-bs-theme="streamlight"] .btn-group > .btn { border-color: #c8dce8 !important; } /* Disabled state */ [data-bs-theme="streamlight"] .btn:disabled, [data-bs-theme="streamlight"] .btn.disabled { opacity: 0.7; box-shadow: none !important; background-color: #e4f0f8 !important; border-color: #e4f0f8 !important; color: #a8bfd0 !important; } /* --------------------------------------------------------------------------- 9. FORM CONTROLS --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .form-control, [data-bs-theme="streamlight"] .form-select { background-color: #ffffff !important; border: 1px solid #c8dce8 !important; color: var(--sl-text) !important; transition: all 0.25s ease; } [data-bs-theme="streamlight"] .form-control:focus, [data-bs-theme="streamlight"] .form-select:focus { border-color: #264293 !important; box-shadow: 0 0 0 3px rgba(38, 66, 147, 0.1) !important; background-color: #ffffff !important; } [data-bs-theme="streamlight"] .form-control::placeholder { color: #a8bfd0; opacity: 1; } [data-bs-theme="streamlight"] .form-select option { background-color: #ffffff; color: var(--sl-text); } /* Form labels */ [data-bs-theme="streamlight"] .form-label, [data-bs-theme="streamlight"] label { color: var(--sl-text); } /* Input groups */ [data-bs-theme="streamlight"] .input-group-text { background-color: #E4F4FA !important; border: 1px solid #c8dce8 !important; color: var(--sl-muted); } /* Checkboxes & radio */ [data-bs-theme="streamlight"] .form-check-input { background-color: #ffffff !important; border-color: #c8dce8 !important; transition: all 0.2s ease; } [data-bs-theme="streamlight"] .form-check-input:checked { background-color: #264293 !important; border-color: #264293 !important; } [data-bs-theme="streamlight"] .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(38, 66, 147, 0.15) !important; } /* Form switch */ [data-bs-theme="streamlight"] .form-switch .form-check-input { background-color: #c8dce8 !important; border-color: #c8dce8 !important; } [data-bs-theme="streamlight"] .form-switch .form-check-input:checked { background-color: #264293 !important; border-color: #264293 !important; } /* Disabled / readonly controls */ [data-bs-theme="streamlight"] .form-control:disabled, [data-bs-theme="streamlight"] .form-control[readonly], [data-bs-theme="streamlight"] .form-select:disabled, [data-bs-theme="streamlight"] .form-select[readonly], [data-bs-theme="streamlight"] input:disabled, [data-bs-theme="streamlight"] textarea:disabled, [data-bs-theme="streamlight"] select:disabled { background-color: #F0F8FC !important; color: #a8bfd0 !important; opacity: 0.8; border-color: #c8dce8 !important; } /* Disabled checkboxes & switches */ [data-bs-theme="streamlight"] .form-check-input:disabled { opacity: 0.6; } /* Disabled labels next to disabled inputs */ [data-bs-theme="streamlight"] .form-check-input:disabled ~ .form-check-label, [data-bs-theme="streamlight"] label.disabled, [data-bs-theme="streamlight"] .form-label.disabled { color: #a8bfd0 !important; opacity: 0.8; } /* Fieldset disabled */ [data-bs-theme="streamlight"] fieldset:disabled .form-control, [data-bs-theme="streamlight"] fieldset:disabled .form-select, [data-bs-theme="streamlight"] fieldset:disabled .btn { color: #a8bfd0 !important; opacity: 0.8; } /* --------------------------------------------------------------------------- 10. TABLES --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .table { --bs-table-bg: transparent; --bs-table-color: #344a60; --bs-table-border-color: #c8dce8; --bs-table-striped-bg: #f9fcfe; --bs-table-hover-bg: #e4f4fa; --bs-table-active-bg: rgba(38, 66, 147, 0.04); color: #344a60; font-variant-numeric: tabular-nums; } /* Time/duration directives and clock elements — monospace for alignment */ [data-bs-theme="streamlight"] pba-time-class, [data-bs-theme="streamlight"] pba-duration-clock, [data-bs-theme="streamlight"] .pba-time, [data-bs-theme="streamlight"] .pba-duration, [data-bs-theme="streamlight"] .pba-clock { font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace; font-size: 0.85em; letter-spacing: -0.02em; } /* Table body cells */ [data-bs-theme="streamlight"] .table > tbody > tr > td { color: #344a60; } /* Table header */ [data-bs-theme="streamlight"] .table > thead > tr > th { color: var(--sl-muted) !important; text-transform: uppercase; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; border-bottom-width: 1px !important; border-bottom-color: #c8dce8; background: #E4F4FA; } /* Table rows — base */ [data-bs-theme="streamlight"] .table > tbody > tr { transition: background-color 0.2s ease; } [data-bs-theme="streamlight"] .table > tbody > tr:hover { --bs-table-hover-bg: #e4f4fa !important; --bs-table-hover-color: inherit !important; background-color: #e4f4fa !important; } /* Prevent state-colored cells from brightening on row hover */ [data-bs-theme="streamlight"] .table-hover > tbody > tr:hover > .table-success, [data-bs-theme="streamlight"] .table > tbody > tr:hover > td.table-success { --bs-table-hover-bg: transparent !important; --bs-table-bg-state: rgba(25, 135, 84, 0.06) !important; --bs-table-accent-bg: rgba(25, 135, 84, 0.06) !important; background-color: rgba(25, 135, 84, 0.06) !important; background: rgba(25, 135, 84, 0.06) !important; color: inherit !important; } [data-bs-theme="streamlight"] .table-hover > tbody > tr:hover > .table-danger, [data-bs-theme="streamlight"] .table > tbody > tr:hover > td.table-danger, [data-bs-theme="streamlight"] .table-hover > tbody > tr:hover > .danger, [data-bs-theme="streamlight"] .table > tbody > tr:hover > td.danger { --bs-table-hover-bg: transparent !important; --bs-table-bg-state: rgba(220, 53, 69, 0.05) !important; --bs-table-accent-bg: rgba(220, 53, 69, 0.05) !important; background-color: rgba(220, 53, 69, 0.05) !important; background: rgba(220, 53, 69, 0.05) !important; color: inherit !important; } [data-bs-theme="streamlight"] .table-hover > tbody > tr:hover > .table-warning, [data-bs-theme="streamlight"] .table > tbody > tr:hover > td.table-warning { --bs-table-hover-bg: transparent !important; --bs-table-bg-state: rgba(224, 149, 32, 0.05) !important; --bs-table-accent-bg: rgba(224, 149, 32, 0.05) !important; background-color: rgba(224, 149, 32, 0.05) !important; background: rgba(224, 149, 32, 0.05) !important; color: inherit !important; } [data-bs-theme="streamlight"] .table-hover > tbody > tr:hover > .table-info, [data-bs-theme="streamlight"] .table > tbody > tr:hover > td.table-info { --bs-table-hover-bg: transparent !important; --bs-table-bg-state: rgba(38, 66, 147, 0.05) !important; --bs-table-accent-bg: rgba(38, 66, 147, 0.05) !important; background-color: rgba(38, 66, 147, 0.05) !important; background: rgba(38, 66, 147, 0.05) !important; color: inherit !important; } [data-bs-theme="streamlight"] .table-hover > tbody > tr:hover > .table-secondary, [data-bs-theme="streamlight"] .table > tbody > tr:hover > td.table-secondary { --bs-table-hover-bg: transparent !important; --bs-table-bg-state: #E4F4FA !important; --bs-table-accent-bg: #E4F4FA !important; background-color: #E4F4FA !important; background: #E4F4FA !important; color: #6b7d92 !important; } /* ---------- Bootstrap table-* state classes ---------- */ /* table-success: Running, alive, current, playing */ [data-bs-theme="streamlight"] .table-success, [data-bs-theme="streamlight"] .table > tbody > tr.table-success, [data-bs-theme="streamlight"] .table > tbody > tr > td.table-success { --bs-table-bg: rgba(25, 135, 84, 0.06) !important; --bs-table-color: inherit !important; --bs-table-border-color: rgba(25, 135, 84, 0.12) !important; background-color: rgba(25, 135, 84, 0.06) !important; color: inherit !important; border-left: 3px solid #198754; font-weight: 500; } [data-bs-theme="streamlight"] .table > tbody > tr.table-success > td { color: inherit !important; } /* table-danger: Error, missing file, failed, unconfigured */ [data-bs-theme="streamlight"] .table-danger, [data-bs-theme="streamlight"] .table > tbody > tr.table-danger, [data-bs-theme="streamlight"] .table > tbody > tr > td.table-danger { --bs-table-bg: rgba(220, 53, 69, 0.05) !important; --bs-table-color: inherit !important; --bs-table-border-color: rgba(220, 53, 69, 0.10) !important; background-color: rgba(220, 53, 69, 0.05) !important; color: inherit !important; border-left: 3px solid #dc3545; } /* table-warning: Warning, selected, locked, offline, expiring */ [data-bs-theme="streamlight"] .table-warning, [data-bs-theme="streamlight"] .table > tbody > tr.table-warning, [data-bs-theme="streamlight"] .table > tbody > tr > td.table-warning { --bs-table-bg: rgba(224, 149, 32, 0.05) !important; --bs-table-color: inherit !important; --bs-table-border-color: rgba(224, 149, 32, 0.10) !important; background-color: rgba(224, 149, 32, 0.05) !important; color: inherit !important; border-left: 3px solid #e09520; } /* table-info: Selected, marked, edited, current focus */ [data-bs-theme="streamlight"] .table-info, [data-bs-theme="streamlight"] .table > tbody > tr.table-info, [data-bs-theme="streamlight"] .table > tbody > tr > td.table-info { --bs-table-bg: rgba(38, 66, 147, 0.05) !important; --bs-table-color: inherit !important; --bs-table-border-color: rgba(38, 66, 147, 0.10) !important; background-color: rgba(38, 66, 147, 0.05) !important; color: inherit !important; border-left: 3px solid #264293; } /* table-secondary: Disabled, external, deleted, finished, inactive */ [data-bs-theme="streamlight"] .table-secondary, [data-bs-theme="streamlight"] .table > tbody > tr.table-secondary, [data-bs-theme="streamlight"] .table > tbody > tr > td.table-secondary { --bs-table-bg: #E4F4FA !important; --bs-table-color: #6b7d92 !important; --bs-table-border-color: #c8dce8 !important; background-color: #E4F4FA !important; color: #6b7d92 !important; border-left: 3px solid #c8dce8; } /* table-primary: Current user, marked item, selected reference */ [data-bs-theme="streamlight"] .table-primary, [data-bs-theme="streamlight"] .table > tbody > tr.table-primary, [data-bs-theme="streamlight"] .table > tbody > tr > td.table-primary { --bs-table-bg: rgba(38, 66, 147, 0.06) !important; --bs-table-color: inherit !important; --bs-table-border-color: rgba(38, 66, 147, 0.12) !important; background-color: rgba(38, 66, 147, 0.06) !important; color: inherit !important; border-left: 3px solid #264293; } /* table-active: Fixed start time, active highlight */ [data-bs-theme="streamlight"] .table-active, [data-bs-theme="streamlight"] .table > tbody > tr.table-active, [data-bs-theme="streamlight"] .table > tbody > tr > td.table-active { --bs-table-bg: rgba(38, 66, 147, 0.04) !important; --bs-table-color: inherit !important; --bs-table-border-color: rgba(38, 66, 147, 0.06) !important; background-color: rgba(38, 66, 147, 0.04) !important; color: inherit !important; } /* ---------- Bootstrap table-* hover states (don't brighten too much) ---------- */ [data-bs-theme="streamlight"] .table-hover > tbody > tr.table-success:hover { --bs-table-hover-bg: rgba(25, 135, 84, 0.09) !important; background-color: rgba(25, 135, 84, 0.09) !important; } [data-bs-theme="streamlight"] .table-hover > tbody > tr.table-danger:hover { --bs-table-hover-bg: rgba(220, 53, 69, 0.08) !important; background-color: rgba(220, 53, 69, 0.08) !important; } [data-bs-theme="streamlight"] .table-hover > tbody > tr.table-warning:hover { --bs-table-hover-bg: rgba(224, 149, 32, 0.08) !important; background-color: rgba(224, 149, 32, 0.08) !important; } [data-bs-theme="streamlight"] .table-hover > tbody > tr.table-info:hover { --bs-table-hover-bg: rgba(38, 66, 147, 0.08) !important; background-color: rgba(38, 66, 147, 0.08) !important; } [data-bs-theme="streamlight"] .table-hover > tbody > tr.table-secondary:hover { --bs-table-hover-bg: #eef6fb !important; background-color: #eef6fb !important; } [data-bs-theme="streamlight"] .table-hover > tbody > tr.table-primary:hover { --bs-table-hover-bg: rgba(38, 66, 147, 0.09) !important; background-color: rgba(38, 66, 147, 0.09) !important; } /* ---------- Custom row-* and tr.* state classes ---------- */ [data-bs-theme="streamlight"] .table .row-running, [data-bs-theme="streamlight"] .table tr.running { background-color: rgba(25, 135, 84, 0.06) !important; border-left: 3px solid #198754; } [data-bs-theme="streamlight"] .table .row-warning, [data-bs-theme="streamlight"] .table tr.warning { background-color: rgba(224, 149, 32, 0.05) !important; border-left: 3px solid #e09520; } [data-bs-theme="streamlight"] .table .row-error, [data-bs-theme="streamlight"] .table tr.error { background-color: rgba(220, 53, 69, 0.05) !important; border-left: 3px solid #dc3545; } [data-bs-theme="streamlight"] .table .row-paused, [data-bs-theme="streamlight"] .table tr.paused { background-color: rgba(38, 128, 194, 0.05) !important; border-left: 3px solid #2680c2; } /* ---------- Bootstrap bg-* utility classes on rows/cells ---------- */ [data-bs-theme="streamlight"] .table tr.bg-success, [data-bs-theme="streamlight"] .table td.bg-success { background-color: rgba(25, 135, 84, 0.06) !important; } [data-bs-theme="streamlight"] .table tr.bg-danger, [data-bs-theme="streamlight"] .table td.bg-danger { background-color: rgba(220, 53, 69, 0.05) !important; } [data-bs-theme="streamlight"] .table tr.bg-warning, [data-bs-theme="streamlight"] .table td.bg-warning { background-color: rgba(224, 149, 32, 0.05) !important; } [data-bs-theme="streamlight"] .table tr.bg-info, [data-bs-theme="streamlight"] .table td.bg-info { background-color: rgba(38, 66, 147, 0.05) !important; } [data-bs-theme="streamlight"] .table tr.bg-secondary, [data-bs-theme="streamlight"] .table td.bg-secondary { background-color: #E4F4FA !important; } [data-bs-theme="streamlight"] .table tr.bg-primary, [data-bs-theme="streamlight"] .table td.bg-primary { background-color: rgba(38, 66, 147, 0.06) !important; } /* ---------- Danger/Success class used standalone (without table- prefix) ---------- */ [data-bs-theme="streamlight"] tr.danger, [data-bs-theme="streamlight"] td.danger { background-color: rgba(220, 53, 69, 0.05) !important; color: inherit !important; } [data-bs-theme="streamlight"] tr.success, [data-bs-theme="streamlight"] td.success { background-color: rgba(25, 135, 84, 0.06) !important; color: inherit !important; } /* ---------- State rows — ensure , , inherit row color ---------- */ [data-bs-theme="streamlight"] .table > tbody > tr.table-success > td small, [data-bs-theme="streamlight"] .table > tbody > tr.table-success > td a, [data-bs-theme="streamlight"] .table > tbody > tr.table-success > td span { color: inherit !important; } [data-bs-theme="streamlight"] .table > tbody > tr.table-info > td small, [data-bs-theme="streamlight"] .table > tbody > tr.table-info > td a, [data-bs-theme="streamlight"] .table > tbody > tr.table-info > td span { color: inherit !important; } [data-bs-theme="streamlight"] .table > tbody > tr.table-warning > td small, [data-bs-theme="streamlight"] .table > tbody > tr.table-warning > td a, [data-bs-theme="streamlight"] .table > tbody > tr.table-warning > td span { color: inherit !important; } [data-bs-theme="streamlight"] .table > tbody > tr.table-danger > td small, [data-bs-theme="streamlight"] .table > tbody > tr.table-danger > td a, [data-bs-theme="streamlight"] .table > tbody > tr.table-danger > td span { color: inherit !important; } [data-bs-theme="streamlight"] .table > tbody > tr.table-primary > td small, [data-bs-theme="streamlight"] .table > tbody > tr.table-primary > td a, [data-bs-theme="streamlight"] .table > tbody > tr.table-primary > td span { color: inherit !important; } [data-bs-theme="streamlight"] .table > tbody > tr.table-secondary > td small, [data-bs-theme="streamlight"] .table > tbody > tr.table-secondary > td a, [data-bs-theme="streamlight"] .table > tbody > tr.table-secondary > td span { color: inherit !important; } /* ---------- Striped table override ---------- */ [data-bs-theme="streamlight"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-striped-bg: #f9fcfe !important; background-color: #f9fcfe !important; color: #344a60; } /* Table container */ [data-bs-theme="streamlight"] .table-responsive { background: #E4F4FA; border: 1px solid #c8dce8; overflow: hidden; } /* --------------------------------------------------------------------------- 11. MODALS --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .modal-content { background: #E4F4FA !important; border: 1px solid #c8dce8 !important; box-shadow: 0 8px 30px rgba(38, 66, 147, 0.12); } [data-bs-theme="streamlight"] .modal-header { border-bottom: 1px solid #c8dce8 !important; background: #E4F4FA; color: var(--sl-text-heading); } [data-bs-theme="streamlight"] .modal-footer { border-top: 1px solid #c8dce8 !important; } [data-bs-theme="streamlight"] .modal-title { color: var(--sl-text-heading); font-weight: 600; } [data-bs-theme="streamlight"] .modal-backdrop { background-color: rgba(20, 34, 64, 0.4); } [data-bs-theme="streamlight"] .modal-backdrop.show { opacity: 1; } /* --------------------------------------------------------------------------- 12. NAVIGATION TABS (Pill-style) --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .nav-tabs { border-bottom-color: #c8dce8; } [data-bs-theme="streamlight"] .nav-tabs .nav-link, [data-bs-theme="streamlight"] .nav-tabs > li > a { color: #6b7d92 !important; border: 1px solid transparent; padding: 6px 18px !important; margin: 0 2px; transition: all 0.25s ease; text-decoration: none; } [data-bs-theme="streamlight"] .nav-tabs .nav-link:hover, [data-bs-theme="streamlight"] .nav-tabs > li > a:hover, [data-bs-theme="streamlight"] .nav-tabs > li:hover > a { color: var(--sl-text) !important; border-color: transparent transparent #f59e42 transparent !important; border-bottom-color: #f59e42 !important; border-bottom-width: 2px !important; background: transparent !important; } [data-bs-theme="streamlight"] .nav-tabs .nav-link.active, [data-bs-theme="streamlight"] .nav-tabs > li.active > a { color: #ffffff !important; background: #264293 !important; border-color: transparent !important; box-shadow: inset 0 0 0 1px rgba(38, 66, 147, 0.3); } /* Pills variation */ [data-bs-theme="streamlight"] .nav-pills .nav-link { color: var(--sl-muted); transition: all 0.25s ease; } [data-bs-theme="streamlight"] .nav-pills .nav-link.active { color: #ffffff !important; background: #264293 !important; } /* --------------------------------------------------------------------------- 13. DROPDOWNS --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .dropdown-menu { background: #E4F4FA !important; border: 1px solid #c8dce8 !important; box-shadow: 0 4px 16px rgba(38, 66, 147, 0.10); } [data-bs-theme="streamlight"] .dropdown-item { color: var(--sl-text); transition: all 0.15s ease; } [data-bs-theme="streamlight"] .dropdown-item:hover, [data-bs-theme="streamlight"] .dropdown-item:focus { background: #e4f4fa !important; color: #264293; } [data-bs-theme="streamlight"] .dropdown-item.active, [data-bs-theme="streamlight"] .dropdown-item:active { background: rgba(38, 66, 147, 0.08) !important; color: #264293; } [data-bs-theme="streamlight"] .dropdown-divider { border-color: #c8dce8; } /* Tag color dropdown — match displayed tag appearance */ [data-bs-theme="streamlight"] .dropdown-item[style*="color:black"], [data-bs-theme="streamlight"] .dropdown-item[style*="color: black"] { color: inherit !important; } [data-bs-theme="streamlight"] .dropdown-item.text-bg-default { background: rgba(107, 125, 146, 0.10) !important; color: #4a5d72 !important; } [data-bs-theme="streamlight"] .dropdown-item.text-bg-primary { background: rgba(38, 66, 147, 0.10) !important; color: #264293 !important; } [data-bs-theme="streamlight"] .dropdown-item.text-bg-success { background: rgba(25, 135, 84, 0.10) !important; color: #198754 !important; } [data-bs-theme="streamlight"] .dropdown-item.text-bg-danger { background: rgba(220, 53, 69, 0.10) !important; color: #dc3545 !important; } [data-bs-theme="streamlight"] .dropdown-item.text-bg-warning { background: rgba(224, 149, 32, 0.10) !important; color: #e09520 !important; } [data-bs-theme="streamlight"] .dropdown-item.text-bg-secondary { background: rgba(107, 125, 146, 0.10) !important; color: #4a5d72 !important; } [data-bs-theme="streamlight"] .dropdown-item.text-bg-indigo { background: rgba(102, 16, 242, 0.10) !important; color: #6610f2 !important; } [data-bs-theme="streamlight"] .dropdown-item.text-bg-green { background: rgba(25, 135, 84, 0.10) !important; color: #198754 !important; } [data-bs-theme="streamlight"] .dropdown-item.text-bg-purple { background: rgba(111, 66, 193, 0.10) !important; color: #6f42c1 !important; } /* --------------------------------------------------------------------------- 14. BADGES & TAGS --------------------------------------------------------------------------- */ /* ---------- Standard badge semantic colors ---------- */ [data-bs-theme="streamlight"] .badge.bg-primary, [data-bs-theme="streamlight"] .badge.text-bg-primary { background: rgba(38, 66, 147, 0.10) !important; color: #264293 !important; } [data-bs-theme="streamlight"] .badge.bg-success, [data-bs-theme="streamlight"] .badge.text-bg-success { background: rgba(25, 135, 84, 0.10) !important; color: #198754 !important; } [data-bs-theme="streamlight"] .badge.bg-danger, [data-bs-theme="streamlight"] .badge.text-bg-danger { background: rgba(220, 53, 69, 0.10) !important; color: #dc3545 !important; } [data-bs-theme="streamlight"] .badge.bg-warning, [data-bs-theme="streamlight"] .badge.text-bg-warning { background: rgba(224, 149, 32, 0.10) !important; color: #e09520 !important; } [data-bs-theme="streamlight"] .badge.bg-info, [data-bs-theme="streamlight"] .badge.text-bg-info { background: rgba(38, 128, 194, 0.10) !important; color: #2680c2 !important; } [data-bs-theme="streamlight"] .badge.bg-secondary, [data-bs-theme="streamlight"] .badge.text-bg-secondary { background: rgba(107, 125, 146, 0.12) !important; color: #4a5d72 !important; } /* ---------- Theme / Dark / Default badge colors ---------- */ [data-bs-theme="streamlight"] .badge.bg-theme, [data-bs-theme="streamlight"] .badge.text-bg-theme { background: rgba(38, 66, 147, 0.12) !important; color: #264293 !important; } [data-bs-theme="streamlight"] .badge.bg-dark, [data-bs-theme="streamlight"] .badge.text-bg-dark { background: #1a2a3e !important; color: #ffffff !important; } [data-bs-theme="streamlight"] .badge.text-bg-default, [data-bs-theme="streamlight"] .badge.bg-default { background: rgba(107, 125, 146, 0.10) !important; color: #4a5d72 !important; } /* ---------- Extended color badges (tag colors) ---------- */ [data-bs-theme="streamlight"] .badge.bg-indigo, [data-bs-theme="streamlight"] .badge.text-bg-indigo, [data-bs-theme="streamlight"] .tag.text-bg-indigo { background: rgba(102, 16, 242, 0.10) !important; color: #6610f2 !important; } [data-bs-theme="streamlight"] .badge.bg-green, [data-bs-theme="streamlight"] .badge.text-bg-green, [data-bs-theme="streamlight"] .tag.text-bg-green { background: rgba(25, 135, 84, 0.10) !important; color: #198754 !important; } [data-bs-theme="streamlight"] .badge.bg-purple, [data-bs-theme="streamlight"] .badge.text-bg-purple, [data-bs-theme="streamlight"] .tag.text-bg-purple { background: rgba(111, 66, 193, 0.10) !important; color: #6f42c1 !important; } /* ---------- Inverse/light badge for light mode ---------- */ [data-bs-theme="streamlight"] .badge.bg-light, [data-bs-theme="streamlight"] .badge.text-bg-light { background: #E4F4FA !important; color: #4a5d72 !important; } /* ---------- Badge text-dark override ---------- */ [data-bs-theme="streamlight"] .badge.text-dark { color: #1a2a3e !important; } /* ---------- Non-badge bg-* utilities (standalone span/div elements) ---------- */ [data-bs-theme="streamlight"] span.bg-theme, [data-bs-theme="streamlight"] div.bg-theme { background: rgba(38, 66, 147, 0.10) !important; color: #264293 !important; } [data-bs-theme="streamlight"] span.bg-dark:not(.badge), [data-bs-theme="streamlight"] div.bg-dark:not(.badge) { background: #1a2a3e !important; } /* ---------- Danger/Warning intensity variants (contentInventory) ---------- */ [data-bs-theme="streamlight"] .bg-danger-300 { background-color: rgba(220, 53, 69, 0.08) !important; color: #b02a37 !important; } [data-bs-theme="streamlight"] .bg-warning-300 { background-color: rgba(224, 149, 32, 0.08) !important; color: #a06e18 !important; } /* ---------- bg-gray-* badge/utility overrides ---------- */ [data-bs-theme="streamlight"] .bg-gray-200 { background-color: #e4f0f8 !important; } [data-bs-theme="streamlight"] .bg-gray-300 { background-color: #c8dce8 !important; } [data-bs-theme="streamlight"] .bg-gray-500 { background-color: #6b7d92 !important; } [data-bs-theme="streamlight"] .text-default { color: #4a5d72 !important; } [data-bs-theme="streamlight"] .text-light { color: #6b7d92 !important; } /* ---------- Tag component styling ---------- */ [data-bs-theme="streamlight"] .tag { border-radius: 0; 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="streamlight"] .tag.text-bg-default { background: rgba(107, 125, 146, 0.08) !important; color: #4a5d72 !important; border-color: rgba(107, 125, 146, 0.15); } [data-bs-theme="streamlight"] .tag.text-bg-primary { background: rgba(38, 66, 147, 0.08) !important; color: #264293 !important; border-color: rgba(38, 66, 147, 0.15); } [data-bs-theme="streamlight"] .tag.text-bg-success { background: rgba(25, 135, 84, 0.08) !important; color: #198754 !important; border-color: rgba(25, 135, 84, 0.15); } [data-bs-theme="streamlight"] .tag.text-bg-danger { background: rgba(220, 53, 69, 0.08) !important; color: #dc3545 !important; border-color: rgba(220, 53, 69, 0.15); } [data-bs-theme="streamlight"] .tag.text-bg-warning { background: rgba(224, 149, 32, 0.08) !important; color: #e09520 !important; border-color: rgba(224, 149, 32, 0.15); } [data-bs-theme="streamlight"] .tag.text-bg-secondary { background: rgba(107, 125, 146, 0.08) !important; color: #4a5d72 !important; border-color: rgba(107, 125, 146, 0.15); } [data-bs-theme="streamlight"] .tag.text-bg-indigo { border-color: rgba(102, 16, 242, 0.15); } [data-bs-theme="streamlight"] .tag.text-bg-green { border-color: rgba(25, 135, 84, 0.15); } [data-bs-theme="streamlight"] .tag.text-bg-purple { border-color: rgba(111, 66, 193, 0.15); } /* Tag hover */ [data-bs-theme="streamlight"] .tag.clickable:hover { box-shadow: 0 0 6px rgba(38, 66, 147, 0.12); filter: brightness(0.95); } /* Tag remove button */ [data-bs-theme="streamlight"] .tag .btn-close, [data-bs-theme="streamlight"] .tag [ng-click*="remove"] { opacity: 0.5; } [data-bs-theme="streamlight"] .tag .btn-close:hover, [data-bs-theme="streamlight"] .tag [ng-click*="remove"]:hover { opacity: 1; } /* --------------------------------------------------------------------------- 15. ALERTS --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .alert { border-width: 1px; border-left-width: 3px; color: var(--sl-text) !important; } [data-bs-theme="streamlight"] .alert-info { background: #E4F4FA !important; border-color: #c8dce8 !important; border-left-color: #2680c2 !important; } [data-bs-theme="streamlight"] .alert-success { background: #E4F4FA !important; border-color: #c8dce8 !important; border-left-color: #198754 !important; } [data-bs-theme="streamlight"] .alert-warning { background: #E4F4FA !important; border-color: #c8dce8 !important; border-left-color: #e09520 !important; } [data-bs-theme="streamlight"] .alert-danger { background: #E4F4FA !important; border-color: #c8dce8 !important; border-left-color: #dc3545 !important; } /* --------------------------------------------------------------------------- 16. PROGRESS BARS --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .progress { background-color: #e4f4fa !important; border: 1px solid #c8dce8; border-radius: 0; overflow: hidden; } [data-bs-theme="streamlight"] .progress-bar { background: linear-gradient(90deg, #264293, #2680c2) !important; } /* --------------------------------------------------------------------------- 17. ACCORDIONS --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .accordion-item { background: #E4F4FA !important; border-color: #c8dce8 !important; } [data-bs-theme="streamlight"] .accordion-button { background: #E4F4FA !important; color: var(--sl-text) !important; } [data-bs-theme="streamlight"] .accordion-button:not(.collapsed) { background: #E4F4FA !important; color: #264293 !important; box-shadow: none; } [data-bs-theme="streamlight"] .accordion-body { background: #E4F4FA !important; } /* --------------------------------------------------------------------------- 18. LIST GROUPS --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .list-group-item { background: #E4F4FA !important; border-color: #c8dce8 !important; color: var(--sl-text); } [data-bs-theme="streamlight"] .list-group-item:hover { background: #E4F4FA !important; } [data-bs-theme="streamlight"] .list-group-item.active { background: rgba(38, 66, 147, 0.06) !important; border-color: rgba(38, 66, 147, 0.15) !important; color: #264293 !important; } /* --------------------------------------------------------------------------- 19. TOOLTIPS & POPOVERS --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .tooltip-inner { background: #1a2a3e !important; color: #ffffff; } [data-bs-theme="streamlight"] .popover { background: #E4F4FA !important; border-color: #c8dce8 !important; box-shadow: 0 4px 16px rgba(38, 66, 147, 0.10); } [data-bs-theme="streamlight"] .popover-header { background: #E4F4FA !important; border-bottom-color: #c8dce8 !important; color: var(--sl-text-heading); } [data-bs-theme="streamlight"] .popover-body { color: var(--sl-text); } /* --------------------------------------------------------------------------- 20. PAGINATION --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .page-link { background: #E4F4FA !important; border-color: #c8dce8 !important; color: var(--sl-muted) !important; transition: all 0.2s ease; } [data-bs-theme="streamlight"] .page-link:hover { background: #e4f4fa !important; border-color: #264293 !important; color: #264293 !important; } [data-bs-theme="streamlight"] .page-item.active .page-link { background: #264293 !important; border-color: #264293 !important; color: #ffffff !important; } [data-bs-theme="streamlight"] .page-item.disabled .page-link { background: #E4F4FA !important; border-color: #e4f0f8 !important; color: #a8bfd0 !important; } /* --------------------------------------------------------------------------- 21. TOASTR NOTIFICATIONS --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] #toast-container > div { box-shadow: 0 4px 12px rgba(38, 66, 147, 0.10); } [data-bs-theme="streamlight"] .toast-success { background-color: #ffffff !important; border-left: 3px solid #198754 !important; color: var(--sl-text) !important; } [data-bs-theme="streamlight"] .toast-error { background-color: #ffffff !important; border-left: 3px solid #dc3545 !important; color: var(--sl-text) !important; } [data-bs-theme="streamlight"] .toast-warning { background-color: #ffffff !important; border-left: 3px solid #e09520 !important; color: var(--sl-text) !important; } [data-bs-theme="streamlight"] .toast-info { background-color: #ffffff !important; border-left: 3px solid #264293 !important; color: var(--sl-text) !important; } /* --------------------------------------------------------------------------- 22. CLOSE BUTTON --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .btn-close { opacity: 0.5; } [data-bs-theme="streamlight"] .btn-close:hover { opacity: 1; } /* --------------------------------------------------------------------------- 23. BREADCRUMBS --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .breadcrumb { background: transparent; } [data-bs-theme="streamlight"] .breadcrumb-item a { color: #264293; } [data-bs-theme="streamlight"] .breadcrumb-item.active { color: var(--sl-muted); } /* --------------------------------------------------------------------------- 24. STATUS INDICATORS (Pulsing) --------------------------------------------------------------------------- */ @keyframes streamlight-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } [data-bs-theme="streamlight"] .status-running, [data-bs-theme="streamlight"] .badge-running { box-shadow: 0 0 6px rgba(25, 135, 84, 0.35); animation: streamlight-pulse 2s infinite; } [data-bs-theme="streamlight"] .status-error, [data-bs-theme="streamlight"] .badge-error { box-shadow: 0 0 6px rgba(220, 53, 69, 0.35); animation: streamlight-pulse 1.5s infinite; } /* ---------- StreamLight current playing row (playout) — bold dark text ---------- */ [data-bs-theme="streamlight"] .streamlight-current-row { background-color: rgba(38, 66, 147, 0.06) !important; border-left: 3px solid #264293; } [data-bs-theme="streamlight"] .streamlight-current-row, [data-bs-theme="streamlight"] .streamlight-current-row > td, [data-bs-theme="streamlight"] .streamlight-current-row > td small, [data-bs-theme="streamlight"] .streamlight-current-row > td .small, [data-bs-theme="streamlight"] .streamlight-current-row > td a, [data-bs-theme="streamlight"] .streamlight-current-row > td span { color: #142240 !important; font-weight: 600; } /* ---------- Text color utilities ---------- */ [data-bs-theme="streamlight"] .text-success { color: #198754 !important; } [data-bs-theme="streamlight"] .text-danger { color: #dc3545 !important; } [data-bs-theme="streamlight"] .text-warning { color: #e09520 !important; } [data-bs-theme="streamlight"] .text-info { color: #2680c2 !important; } [data-bs-theme="streamlight"] .text-primary { color: #264293 !important; } [data-bs-theme="streamlight"] .text-secondary { color: #6b7d92 !important; } /* --------------------------------------------------------------------------- 25. FOCUS RING (Global) --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] *:focus-visible { outline: none !important; box-shadow: 0 0 0 2px rgba(38, 66, 147, 0.15) !important; } /* --------------------------------------------------------------------------- 26. UTILITY OVERRIDES --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .bg-white { background-color: #ffffff !important; } [data-bs-theme="streamlight"] .bg-light { background-color: #E4F4FA !important; } [data-bs-theme="streamlight"] .bg-body { background-color: #E4F4FA !important; } [data-bs-theme="streamlight"] .text-dark { color: #1a2a3e !important; } [data-bs-theme="streamlight"] .text-muted { color: var(--sl-muted) !important; } [data-bs-theme="streamlight"] .text-body { color: var(--sl-text) !important; } [data-bs-theme="streamlight"] .border { border-color: #c8dce8 !important; } [data-bs-theme="streamlight"] hr { color: #c8dce8; opacity: 0.5; } /* --------------------------------------------------------------------------- 27. THEME PANEL (Self-styling) --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .app-theme-panel { background: #E4F4FA; border: 1px solid #c8dce8; box-shadow: 0 4px 16px rgba(38, 66, 147, 0.10); } [data-bs-theme="streamlight"] .app-theme-toggle-btn { background: rgba(38, 66, 147, 0.08) !important; border-color: rgba(38, 66, 147, 0.15) !important; color: #264293 !important; } /* --------------------------------------------------------------------------- 28. CODEMIRROR (Code editors) --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .CodeMirror { background: #E4F4FA !important; color: #1a2a3e !important; } [data-bs-theme="streamlight"] .CodeMirror-gutters { background: #eef6fb !important; border-right-color: #c8dce8 !important; } /* --------------------------------------------------------------------------- 29. CONTEXT MENU --------------------------------------------------------------------------- */ [data-bs-theme="streamlight"] .context-menu, [data-bs-theme="streamlight"] .dropdown-context { background: #E4F4FA !important; border: 1px solid #c8dce8 !important; box-shadow: 0 4px 16px rgba(38, 66, 147, 0.10); } /* ---------- Login screen — dark blue branded ---------- */ [data-bs-theme="streamlight"] .login { background: #264293 !important; color: #ffffff; min-height: 100vh; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } [data-bs-theme="streamlight"] .login .login-content { color: #ffffff; } [data-bs-theme="streamlight"] .login .text-body, [data-bs-theme="streamlight"] .login .text-body.text-opacity-50, [data-bs-theme="streamlight"] .login label, [data-bs-theme="streamlight"] .login .form-label, [data-bs-theme="streamlight"] .login .form-check-label, [data-bs-theme="streamlight"] .login a, [data-bs-theme="streamlight"] .login p, [data-bs-theme="streamlight"] .login span, [data-bs-theme="streamlight"] .login div { color: rgba(255, 255, 255, 0.85) !important; } [data-bs-theme="streamlight"] .login .text-body.text-opacity-50 { color: rgba(255, 255, 255, 0.55) !important; } [data-bs-theme="streamlight"] .login .form-control { background-color: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.25) !important; color: #ffffff !important; } [data-bs-theme="streamlight"] .login .form-control::placeholder { color: rgba(255, 255, 255, 0.4); } [data-bs-theme="streamlight"] .login .form-control:focus { border-color: var(--sl-action, #f59e42) !important; box-shadow: 0 0 0 3px rgba(232, 115, 42, 0.2) !important; background-color: rgba(255, 255, 255, 0.15) !important; } [data-bs-theme="streamlight"] .login .form-check-input { background-color: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.3) !important; } [data-bs-theme="streamlight"] .login .form-check-input:checked { background-color: var(--sl-action, #f59e42) !important; border-color: var(--sl-action, #f59e42) !important; } [data-bs-theme="streamlight"] .login .btn-theme { background: #00b4d8 !important; border-color: #00b4d8 !important; color: #ffffff !important; } [data-bs-theme="streamlight"] .login .btn-theme:hover { background: #0096b4 !important; border-color: #0096b4 !important; } [data-bs-theme="streamlight"] .login hr { border-color: rgba(255, 255, 255, 0.2); } [data-bs-theme="streamlight"] .login .position-absolute { color: rgba(255, 255, 255, 0.4) !important; } /* ---------- Side panel divider lines — override inline #e5e6e7 ---------- */ [data-bs-theme="streamlight"] [style*="border-left-color"] { border-left-color: #c8dce8 !important; } /* ---------- Side panels / content panels — softer text ---------- */ [data-bs-theme="streamlight"] .panel-body { color: #344a60; } [data-bs-theme="streamlight"] .panel-body span.fw-600, [data-bs-theme="streamlight"] .panel-body span.fw-bold, [data-bs-theme="streamlight"] .panel-body .fw-600, [data-bs-theme="streamlight"] .panel-body .fw-bold { color: #1a2a3e; } /* --------------------------------------------------------------------------- 30. TIMELINE / TIMESLIDER --------------------------------------------------------------------------- */ /* Outer border */ [data-bs-theme="streamlight"] .time-slider .ruler .bg { border-color: #c8dce8; background-color: transparent; } /* Graduation lines */ [data-bs-theme="streamlight"] .time-slider .ruler .graduation { background-color: #c8dce8; } [data-bs-theme="streamlight"] .time-slider .ruler .graduation.middle { background-color: #a8bfd0; } [data-bs-theme="streamlight"] .time-slider .ruler .graduation.big { background-color: #6b7d92; } /* Graduation labels */ [data-bs-theme="streamlight"] .time-slider .ruler .graduation-title { color: var(--sl-muted); } /* Current time caret — orange */ [data-bs-theme="streamlight"] .time-slider .ruler .current-time-caret { background-color: #f59e42; box-shadow: 0 0 4px rgba(232, 115, 42, 0.3); } /* Timecell items — white with light blue border, no rounds */ [data-bs-theme="streamlight"] .time-slider .ruler .timecell { background-color: #ffffff; border: 1px solid #B5DFF2; color: #1a2a3e; opacity: 1; border-radius: 0 !important; } /* Current playing item — intensive light blue, same border */ [data-bs-theme="streamlight"] .time-slider .ruler .timecell.current { background-color: #B5DFF2; border: 1px solid #B5DFF2; color: #1a2a3e; border-radius: 0 !important; } /* Timecell hover */ [data-bs-theme="streamlight"] .time-slider .ruler .timecell-event.hover { border-color: #264293; } /* Timecell moving/drag */ [data-bs-theme="streamlight"] .time-slider .ruler .timecell-event.moving { border-color: #dc3545; } /* Prompt tooltip */ [data-bs-theme="streamlight"] .time-slider .prompts .prompt .body { background-color: #ffffff; border: 1px solid #c8dce8; color: var(--sl-text); box-shadow: 0 2px 8px rgba(38, 66, 147, 0.10); } [data-bs-theme="streamlight"] .time-slider .prompts .prompt .triangle-up { border-bottom-color: #ffffff; } [data-bs-theme="streamlight"] .time-slider .prompts .prompt .triangle-down { border-top-color: #ffffff; } /* --------------------------------------------------------------------------- 31. C3.JS CHARTS (Gauges, line charts, bar charts) --------------------------------------------------------------------------- */ /* General strokes and lines */ [data-bs-theme="streamlight"] .c3 path, [data-bs-theme="streamlight"] .c3 line { stroke: #c8dce8; } [data-bs-theme="streamlight"] .c3 text { fill: var(--sl-muted); } /* Grid lines */ [data-bs-theme="streamlight"] .c3-grid line { stroke: #c8dce8; } [data-bs-theme="streamlight"] .c3-grid text { fill: var(--sl-muted); } /* Axis lines & ticks */ [data-bs-theme="streamlight"] .c3 .c3-axis path, [data-bs-theme="streamlight"] .c3 .c3-axis line { stroke: #c8dce8; } [data-bs-theme="streamlight"] .c3 .c3-axis text, [data-bs-theme="streamlight"] .c3 .tick text { fill: var(--sl-muted); } /* Gauge background arc */ [data-bs-theme="streamlight"] .c3-chart-arcs .c3-chart-arcs-background { fill: #e4f4fa; stroke: none; } /* Gauge arc segment separators — white gap between arcs */ [data-bs-theme="streamlight"] .c3-chart-arc path { stroke: #E4F4FA; stroke-width: 2; } /* Gauge arc targets */ [data-bs-theme="streamlight"] .c3-chart-arc.c3-target g path { opacity: 0.75; } [data-bs-theme="streamlight"] .c3-chart-arc.c3-target.c3-focused g path { opacity: 0.9; } /* Gauge value text */ [data-bs-theme="streamlight"] .c3-chart-arc .c3-gauge-value { fill: var(--sl-text) !important; } /* Gauge unit text */ [data-bs-theme="streamlight"] .c3-chart-arcs .c3-chart-arcs-gauge-unit { fill: var(--sl-muted); } /* Gauge min/max labels */ [data-bs-theme="streamlight"] .c3-chart-arcs .c3-chart-arcs-gauge-max, [data-bs-theme="streamlight"] .c3-chart-arcs .c3-chart-arcs-gauge-min { fill: var(--sl-muted); } /* Arc title (donut center text) */ [data-bs-theme="streamlight"] .c3-chart-arcs-title { fill: var(--sl-text); } /* Legend */ [data-bs-theme="streamlight"] .c3-legend-background { fill: #E4F4FA; stroke: #c8dce8; opacity: 0.9; } [data-bs-theme="streamlight"] .c3-legend-item text { fill: #4a5d72; } /* Tooltip */ [data-bs-theme="streamlight"] .c3-tooltip { background-color: #ffffff; box-shadow: 0 4px 16px rgba(38, 66, 147, 0.12); overflow: hidden; } [data-bs-theme="streamlight"] .c3-tooltip tr { border-color: #c8dce8; } [data-bs-theme="streamlight"] .c3-tooltip th { background-color: #E4F4FA; color: var(--sl-text); } [data-bs-theme="streamlight"] .c3-tooltip td { background-color: #ffffff; color: var(--sl-text); border-left-color: #c8dce8; } /* Empty text */ [data-bs-theme="streamlight"] .c3-text.c3-empty { fill: var(--sl-muted); } /* Line chart lines */ [data-bs-theme="streamlight"] .c3-line { stroke-width: 1.5px; } /* Point expanded state */ [data-bs-theme="streamlight"] .c3-circle._expanded_ { stroke: #E4F4FA; } [data-bs-theme="streamlight"] .c3-selected-circle { fill: #264293; } /* Bar chart bars */ [data-bs-theme="streamlight"] .c3-bar { opacity: 0.8; } [data-bs-theme="streamlight"] .c3-bar._expanded_ { opacity: 0.95; } /* Area chart fills */ [data-bs-theme="streamlight"] .c3-area { opacity: 0.15; }