/** * OutageScout Dark Theme * * Applied when is set. * Works with Bootstrap 5.3 native dark mode + OutageScout custom overrides. */ /* ============================================ CSS Variable Overrides for Dark Mode ============================================ */ [data-bs-theme="dark"] { /* Core surface & background */ --os-bg-card: #1e2128; --os-bg-white: #1a1d23; --os-bg-surface: #23272e; --os-bg-surface-raised: #2a2e36; --os-bg-body: #14161a; /* Text */ --os-text-primary: #e1e4e8; --os-text-dark: #e1e4e8; --os-text-muted: rgba(225, 228, 232, 0.6); --os-text-white: #ffffff; /* Borders */ --os-border-primary: #3d4250; --os-border-light: #2d3139; --os-border-focus: #5b9aff; /* Shadows (deeper for dark) */ --os-shadow-sm: 0 4px 12px rgba(0,0,0,0.35); --os-shadow-md: 0 10px 20px rgba(0,0,0,0.45); --os-shadow-lg: 0 20px 40px rgba(0,0,0,0.55); /* Keep brand colors vibrant on dark */ --os-primary-blue: #5b9aff; --os-primary-green: #2ba866; --os-primary-blue-dark: #4a8af0; --os-primary-green-dark: #239957; } /* ============================================ Body & Base ============================================ */ [data-bs-theme="dark"] body { background: var(--os-bg-body) !important; color: var(--os-text-primary); } /* ============================================ Bootstrap Component Overrides ============================================ */ /* Cards */ [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .os-card, [data-bs-theme="dark"] .os-content-card { background: var(--os-bg-surface) !important; border-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .card-header { background: var(--os-bg-surface-raised) !important; border-bottom-color: var(--os-border-primary) !important; } /* Navbar / Header */ [data-bs-theme="dark"] .navbar.bg-white, [data-bs-theme="dark"] .navbar.navbar-light { background: var(--os-bg-surface) !important; border-bottom-color: var(--os-border-primary); } [data-bs-theme="dark"] .navbar-brand { color: var(--os-primary-blue) !important; } [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link { color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link:hover, [data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link.active { color: var(--os-primary-blue) !important; } [data-bs-theme="dark"] .navbar-toggler { border-color: var(--os-border-primary); } [data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1); } /* Header accent bar */ [data-bs-theme="dark"] .os-accent-rule { background: var(--os-border-primary); } /* Org Switcher */ [data-bs-theme="dark"] .os-org-name { background: var(--os-bg-surface-raised); border-color: var(--os-border-primary); color: var(--os-text-primary); } [data-bs-theme="dark"] .os-org-name:hover { background: #353a44; color: var(--os-primary-blue); } [data-bs-theme="dark"] .os-org-name i { color: #8b949e; } [data-bs-theme="dark"] .os-org-arrow { background: var(--os-bg-surface-raised); border-color: var(--os-border-primary); color: var(--os-text-primary); } [data-bs-theme="dark"] .os-org-arrow:hover { background: #353a44; color: var(--os-primary-blue); } [data-bs-theme="dark"] .os-org-cog { background: var(--os-bg-surface-raised); border-color: var(--os-border-primary); color: #8b949e; } [data-bs-theme="dark"] .os-org-cog:hover { background: #353a44; color: var(--os-primary-blue); } /* Dropdowns */ [data-bs-theme="dark"] .dropdown-menu { background: var(--os-bg-surface-raised) !important; border-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .dropdown-item { color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background: #353a44 !important; color: var(--os-primary-blue) !important; } [data-bs-theme="dark"] .dropdown-item.active { background: #353a44 !important; color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .dropdown-divider { border-color: var(--os-border-primary); } [data-bs-theme="dark"] .dropdown-header { color: #8b949e !important; } /* Forms */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .os-form-control { background: var(--os-bg-surface) !important; border-color: var(--os-border-primary) !important; color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .os-form-control:focus { background: var(--os-bg-surface-raised) !important; border-color: var(--os-border-focus) !important; color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-control[disabled] { background: var(--os-bg-body) !important; color: #8b949e !important; } [data-bs-theme="dark"] .form-label, [data-bs-theme="dark"] .os-form-label { color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .form-text, [data-bs-theme="dark"] .form-select { color: #8b949e !important; } [data-bs-theme="dark"] .form-select { background-color: var(--os-bg-surface) !important; border-color: var(--os-border-primary) !important; color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .input-group-text { background: var(--os-bg-surface-raised) !important; border-color: var(--os-border-primary) !important; color: var(--os-text-primary) !important; } /* Tables */ [data-bs-theme="dark"] .table { color: var(--os-text-primary) !important; --bs-table-bg: var(--os-bg-surface); --bs-table-border-color: var(--os-border-primary); } [data-bs-theme="dark"] .table thead th { background: var(--os-bg-surface-raised) !important; color: var(--os-text-primary) !important; border-bottom-color: var(--os-primary-blue) !important; } [data-bs-theme="dark"] .table tbody tr:hover { background: rgba(91, 154, 255, 0.08) !important; } [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { --bs-table-bg-type: rgba(255,255,255,0.03); } /* Modals */ [data-bs-theme="dark"] .modal-content { background: var(--os-bg-surface) !important; border-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .modal-header { border-bottom-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .modal-footer { border-top-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Alerts */ [data-bs-theme="dark"] .alert-warning { background: rgba(255, 193, 7, 0.15) !important; color: #ffc107 !important; border-color: rgba(255, 193, 7, 0.3) !important; } [data-bs-theme="dark"] .alert-info { background: rgba(91, 154, 255, 0.15) !important; color: var(--os-primary-blue) !important; border-color: rgba(91, 154, 255, 0.3) !important; } /* Buttons */ [data-bs-theme="dark"] .btn-outline-primary { color: var(--os-primary-blue) !important; border-color: var(--os-primary-blue) !important; } [data-bs-theme="dark"] .btn-outline-secondary { color: #8b949e !important; border-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .btn-outline-secondary:hover { background: var(--os-bg-surface-raised) !important; color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .btn-outline-danger { color: #f87171 !important; border-color: #f87171 !important; } [data-bs-theme="dark"] .btn-light { background: var(--os-bg-surface-raised) !important; border-color: var(--os-border-primary) !important; color: var(--os-text-primary) !important; } /* Badges */ [data-bs-theme="dark"] .badge.bg-success { background-color: #2ba866 !important; } [data-bs-theme="dark"] .badge.bg-warning { background-color: #f59e0b !important; color: #1a1d23 !important; } [data-bs-theme="dark"] .badge.bg-danger { background-color: #ef4444 !important; } [data-bs-theme="dark"] .badge.bg-info { background-color: var(--os-primary-blue) !important; } /* List groups */ [data-bs-theme="dark"] .list-group-item { background: var(--os-bg-surface) !important; border-color: var(--os-border-primary) !important; color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .list-group-item:hover { background: var(--os-bg-surface-raised) !important; } /* Pagination */ [data-bs-theme="dark"] .pagination .page-link { background: var(--os-bg-surface) !important; border-color: var(--os-border-primary) !important; color: var(--os-primary-blue) !important; } [data-bs-theme="dark"] .pagination .page-link:hover { background: var(--os-primary-blue) !important; color: white !important; } /* Breadcrumbs */ [data-bs-theme="dark"] .breadcrumb { background: var(--os-bg-surface) !important; } [data-bs-theme="dark"] .breadcrumb-item a { color: var(--os-primary-blue) !important; } /* ============================================ Page-Specific Overrides ============================================ */ /* Dashboard */ [data-bs-theme="dark"] .stat-card { background: var(--os-bg-surface) !important; border-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .stat-label { color: #8b949e !important; } [data-bs-theme="dark"] .quick-actions-sidebar { background: var(--os-bg-surface) !important; border-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .quick-actions-sidebar h5 { color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .location-card { background: var(--os-bg-surface) !important; border-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .location-header { border-bottom-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .location-title { color: var(--os-text-primary) !important; } /* Outage banner */ [data-bs-theme="dark"] .outage-banner { background: rgba(220, 53, 69, 0.1) !important; border-color: rgba(220, 53, 69, 0.3) !important; } [data-bs-theme="dark"] .outage-banner-text { color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .outage-banner-text strong { color: #f87171 !important; } /* Status badges in dark mode */ [data-bs-theme="dark"] .status-operational { background: rgba(43, 168, 102, 0.2) !important; color: #4ade80 !important; } [data-bs-theme="dark"] .status-warning { background: rgba(245, 158, 11, 0.2) !important; color: #fbbf24 !important; } [data-bs-theme="dark"] .status-offline, [data-bs-theme="dark"] .status-degraded { background: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; } [data-bs-theme="dark"] .status-maintenance { background: rgba(91, 154, 255, 0.2) !important; color: #93bbff !important; } /* Device status badges */ [data-bs-theme="dark"] .device-status .badge-suspected { background: rgba(245, 158, 11, 0.2) !important; color: #fbbf24 !important; } [data-bs-theme="dark"] .device-status .badge-warning { background: rgba(249, 115, 22, 0.25) !important; color: #fb923c !important; } [data-bs-theme="dark"] .device-status .badge-offline { background: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; } /* Profile page */ [data-bs-theme="dark"] .profile-header, [data-bs-theme="dark"] .section-card { background: var(--os-bg-surface) !important; box-shadow: var(--os-shadow-sm) !important; } [data-bs-theme="dark"] .section-card h2 { border-bottom-color: var(--os-border-primary) !important; color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .info-row { border-bottom-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .info-label { color: #8b949e !important; } [data-bs-theme="dark"] .info-value { color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .social-account-item { border-color: var(--os-border-primary) !important; background: var(--os-bg-surface-raised) !important; } /* Pre-release banner */ [data-bs-theme="dark"] .alert-warning.rounded-0 { background-color: rgba(255, 193, 7, 0.1) !important; color: #fbbf24 !important; border-color: rgba(255, 193, 7, 0.25) !important; } /* Coming Soon Modal */ [data-bs-theme="dark"] #comingSoonModal .modal-content { background: var(--os-bg-surface) !important; } [data-bs-theme="dark"] #comingSoonModal h5 { color: var(--os-text-primary) !important; } /* Text utilities */ [data-bs-theme="dark"] .text-muted { color: #8b949e !important; } [data-bs-theme="dark"] .text-dark { color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .text-body { color: var(--os-text-primary) !important; } [data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) { color: var(--os-primary-blue); } /* Background utilities */ [data-bs-theme="dark"] .bg-white { background: var(--os-bg-surface) !important; } [data-bs-theme="dark"] .bg-light { background: var(--os-bg-surface-raised) !important; } /* Border overrides */ [data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-top { border-color: var(--os-border-primary) !important; } /* HR */ [data-bs-theme="dark"] hr { border-color: var(--os-border-primary); opacity: 0.5; } /* Footer */ [data-bs-theme="dark"] footer.bg-dark { background: #0d0f12 !important; border-top: 1px solid var(--os-border-primary); } /* OS Theme Components */ [data-bs-theme="dark"] .os-left-sidebar { background: var(--os-bg-surface) !important; } [data-bs-theme="dark"] .os-content-header { background: var(--os-bg-surface) !important; } [data-bs-theme="dark"] .os-stats-card, [data-bs-theme="dark"] .os-search-container, [data-bs-theme="dark"] .os-table-container { background: var(--os-bg-surface) !important; border-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .os-mobile-nav-dropdown { background: var(--os-bg-surface) !important; } [data-bs-theme="dark"] .os-mobile-nav-item { color: var(--os-text-primary) !important; border-bottom-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .os-mobile-nav-item:hover, [data-bs-theme="dark"] .os-mobile-nav-item.active { background: var(--os-bg-surface-raised) !important; } /* Info boxes (light blue gradient in light mode) */ [data-bs-theme="dark"] .os-info-box { background: rgba(91, 154, 255, 0.1) !important; border-color: rgba(91, 154, 255, 0.25) !important; } /* Debug info */ [data-bs-theme="dark"] .debug-info { background: var(--os-bg-surface-raised) !important; border-color: var(--os-border-primary) !important; color: var(--os-text-primary) !important; } /* Dividers in OS theme */ [data-bs-theme="dark"] .os-divider::before, [data-bs-theme="dark"] .os-divider::after { background: var(--os-border-primary); } [data-bs-theme="dark"] .os-content-card hr { border-top-color: var(--os-border-primary) !important; } /* Mobile org sub-links connector */ [data-bs-theme="dark"] .os-mobile-org-sub { border-left-color: var(--os-border-primary) !important; } /* Admin card keeps its gradient - no override needed */ /* ============================================ Dashboard Page - Device & Location Cards ============================================ */ /* Device cards (draggable cards inside locations and unlinked sidebar) */ [data-bs-theme="dark"] .device-card { background: var(--os-bg-surface-raised) !important; border-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .device-card:hover { border-color: var(--os-primary-blue) !important; box-shadow: 0 2px 8px rgba(91, 154, 255, 0.25) !important; } [data-bs-theme="dark"] .device-card.in-location { background: var(--os-bg-surface-raised) !important; border-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .btn-archive-device { border-color: #f87171; color: #f87171; } [data-bs-theme="dark"] .btn-archive-device:hover { background: #dc3545; color: #fff; border-color: #dc3545; } [data-bs-theme="dark"] .device-name { color: var(--os-text-primary) !important; } [data-bs-theme="dark"] .device-type-badge { background: var(--os-bg-surface) !important; color: #8b949e !important; } /* Location devices grid background */ [data-bs-theme="dark"] .location-devices { background: var(--os-bg-body) !important; border-top-color: var(--os-border-primary) !important; } /* Location attributes section */ [data-bs-theme="dark"] .location-attributes { border-bottom-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .attribute-header { color: #8b949e !important; } [data-bs-theme="dark"] .attribute-empty { color: #6c757d !important; } [data-bs-theme="dark"] .add-attribute-link { color: var(--os-primary-blue) !important; } /* Devices table inside locations */ [data-bs-theme="dark"] .devices-table th { color: #8b949e !important; border-bottom-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .devices-table td { color: var(--os-text-primary) !important; } /* Empty state */ [data-bs-theme="dark"] .empty-state { color: #8b949e !important; } [data-bs-theme="dark"] .empty-state i { color: var(--os-border-primary) !important; } /* Unlinked devices sidebar */ [data-bs-theme="dark"] .unlinked-devices-sidebar { background: var(--os-bg-surface) !important; border-color: var(--os-border-primary) !important; } [data-bs-theme="dark"] .unlinked-devices-sidebar h5 { color: var(--os-text-primary) !important; border-bottom-color: var(--os-border-primary) !important; } /* Org key display in register modal */ [data-bs-theme="dark"] #orgKeyDisplay { background: var(--os-bg-surface-raised) !important; border-color: var(--os-primary-blue) !important; color: var(--os-text-primary) !important; } [data-bs-theme="dark"] #orgKeyDisplay:hover { background: var(--os-bg-surface) !important; } /* Device status badges (recovering, rebooting, maintenance, error) */ [data-bs-theme="dark"] .device-status .badge-recovering { background: rgba(13, 202, 240, 0.2) !important; color: #67d6ed !important; } [data-bs-theme="dark"] .device-status .badge-rebooting, [data-bs-theme="dark"] .device-status .badge-maintenance { background: rgba(91, 154, 255, 0.2) !important; color: #93bbff !important; } [data-bs-theme="dark"] .device-status .badge-error { background: rgba(108, 117, 125, 0.3) !important; color: #adb5bd !important; } /* Drag-and-drop overlay hint */ [data-bs-theme="dark"] .location-card.drop-hover { border-color: var(--os-primary-blue) !important; background: rgba(91, 154, 255, 0.05) !important; } /* ============================================ Standalone Page Overrides (pages with inline styles) ============================================ Many pages use inline