/* ── Dark Mode Theme ─────────────────────────────────────────────────── */ /* Applied when has class "dark-mode" */ body.dark-mode { background-color: #1a1a2e !important; color: #e0e0e0 !important; } /* ── Links ───────────────────────────────────────────────────────────── */ body.dark-mode a { color: #6ea8fe; } body.dark-mode a:hover { color: #9ec5fe; } /* ── Navbar ──────────────────────────────────────────────────────────── */ body.dark-mode .navbar-default, body.dark-mode .nav_menu, body.dark-mode .top_nav { background: #16213e !important; border-color: #0f3460 !important; } body.dark-mode .navbar-default .navbar-nav li a, body.dark-mode .navbar-default .navbar-nav li a:hover, body.dark-mode .navbar-default .navbar-brand, body.dark-mode .navbar-default .navbar-brand:hover { color: #e0e0e0 !important; } body.dark-mode .navbar-default .navbar-nav > .active, body.dark-mode .navbar-default .navbar-nav li:hover { background: #0f3460 !important; } /* ── Sidebar ─────────────────────────────────────────────────────────── */ body.dark-mode .left_col, body.dark-mode .sidebar-menu, body.dark-mode .menu_section { background: #16213e !important; } body.dark-mode .sidebar-menu li a, body.dark-mode .sidebar-menu li a span { color: #c0c0c0 !important; } body.dark-mode .sidebar-menu li a:hover, body.dark-mode .sidebar-menu li.active a { background: #0f3460 !important; color: #fff !important; } /* ── Content area ────────────────────────────────────────────────────── */ body.dark-mode .right_col, body.dark-mode .x_content, body.dark-mode .content { background-color: #1a1a2e !important; } body.dark-mode .x_panel { background: #16213e !important; border-color: #0f3460 !important; } body.dark-mode .x_title { border-bottom-color: #0f3460 !important; } body.dark-mode .x_title h2, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #e0e0e0 !important; } /* ── Tables ──────────────────────────────────────────────────────────── */ body.dark-mode .table { color: #e0e0e0 !important; } body.dark-mode .table > thead > tr > th { background-color: #0f3460 !important; color: #e0e0e0 !important; border-color: #1a3a6e !important; } body.dark-mode .table > tbody > tr > td, body.dark-mode .table > tbody > tr > th { border-color: #2a2a4a !important; } body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: #1e1e3a !important; } body.dark-mode .table-hover > tbody > tr:hover { background-color: #252545 !important; } /* ── Forms ────────────────────────────────────────────────────────────── */ body.dark-mode .form-control { background-color: #252545 !important; border-color: #3a3a5a !important; color: #e0e0e0 !important; } body.dark-mode .form-control:focus { border-color: #6ea8fe !important; box-shadow: 0 0 0 2px rgba(110, 168, 254, 0.15) !important; } body.dark-mode .form-control::placeholder { color: #888 !important; } body.dark-mode select.form-control { background-color: #252545 !important; color: #e0e0e0 !important; } body.dark-mode label { color: #c0c0c0 !important; } /* ── Buttons ─────────────────────────────────────────────────────────── */ body.dark-mode .btn-default { background-color: #2a2a4a !important; border-color: #3a3a5a !important; color: #e0e0e0 !important; } body.dark-mode .btn-default:hover { background-color: #3a3a5a !important; } /* ── Cards / Panels ──────────────────────────────────────────────────── */ body.dark-mode .panel, body.dark-mode .panel-default { background-color: #16213e !important; border-color: #0f3460 !important; } body.dark-mode .panel-heading { background-color: #0f3460 !important; border-color: #0f3460 !important; color: #e0e0e0 !important; } body.dark-mode .panel-body { background-color: #16213e !important; } body.dark-mode .well { background-color: #1e1e3a !important; border-color: #2a2a4a !important; } /* ── Alerts ──────────────────────────────────────────────────────────── */ body.dark-mode .alert-info { background-color: #1a3a5c !important; border-color: #1a4a6e !important; color: #a8d8f0 !important; } body.dark-mode .alert-success { background-color: #1a3a2a !important; border-color: #1a4a3a !important; color: #a8f0c8 !important; } body.dark-mode .alert-warning { background-color: #3a3a1a !important; border-color: #4a4a2a !important; color: #f0e8a8 !important; } body.dark-mode .alert-danger { background-color: #3a1a1a !important; border-color: #4a2a2a !important; color: #f0a8a8 !important; } /* ── Tabs ────────────────────────────────────────────────────────────── */ body.dark-mode .nav-tabs { border-bottom-color: #3a3a5a !important; } body.dark-mode .nav-tabs > li > a { color: #999 !important; } body.dark-mode .nav-tabs > li > a:hover { background: #252545 !important; border-bottom-color: #666 !important; color: #ccc !important; } body.dark-mode .nav-tabs > li.active > a, body.dark-mode .nav-tabs > li.active > a:hover, body.dark-mode .nav-tabs > li.active > a:focus { color: #6ea8fe !important; border-bottom-color: #6ea8fe !important; background: transparent !important; } body.dark-mode .tab-content { background-color: transparent !important; } /* ── Dropdowns ───────────────────────────────────────────────────────── */ body.dark-mode .dropdown-menu { background-color: #16213e !important; border-color: #0f3460 !important; } body.dark-mode .dropdown-menu > li > a { color: #c0c0c0 !important; } body.dark-mode .dropdown-menu > li > a:hover { background-color: #0f3460 !important; color: #fff !important; } body.dark-mode .dropdown-menu .divider { background-color: #2a2a4a !important; } /* ── Modals ──────────────────────────────────────────────────────────── */ body.dark-mode .modal-content { background-color: #1a1a2e !important; border-color: #0f3460 !important; } body.dark-mode .modal-header { border-bottom-color: #2a2a4a !important; } body.dark-mode .modal-footer { border-top-color: #2a2a4a !important; } body.dark-mode .modal-title { color: #e0e0e0 !important; } body.dark-mode .close { color: #e0e0e0 !important; opacity: 0.7; } /* ── Badges / Labels ─────────────────────────────────────────────────── */ body.dark-mode .label-default { background-color: #3a3a5a !important; } /* ── Breadcrumbs ─────────────────────────────────────────────────────── */ body.dark-mode .pt-breadcrumb li a { color: #6ea8fe !important; } body.dark-mode .pt-breadcrumb li.active { color: #999 !important; } body.dark-mode .pt-breadcrumb li + li::before { color: #555 !important; } /* ── Miscellaneous ───────────────────────────────────────────────────── */ body.dark-mode .text-muted { color: #888 !important; } body.dark-mode hr { border-color: #2a2a4a !important; } body.dark-mode code { background-color: #2a2a4a !important; color: #f0a8a8 !important; } body.dark-mode pre { background-color: #1e1e3a !important; border-color: #2a2a4a !important; color: #e0e0e0 !important; } /* ── Tracker-specific ────────────────────────────────────────────────── */ body.dark-mode .chartheaderrotate { color: #c0c0c0 !important; } body.dark-mode .chartheaderrotate > div { border-bottom-color: #3a3a5a !important; } body.dark-mode .hpct { border-left-color: #3a3a5a !important; } /* ── Hero area (logged-in pages) ─────────────────────────────────────── */ body.dark-mode .top_hero_header { background: #0f3460 !important; } /* ── Footer ──────────────────────────────────────────────────────────── */ body.dark-mode #copyright { background-color: #0a0a1a !important; color: #888 !important; } body.dark-mode #copyright a { color: #888 !important; } /* ── Select2 (if used) ───────────────────────────────────────────────── */ body.dark-mode .select2-container--default .select2-selection--single { background-color: #252545 !important; border-color: #3a3a5a !important; color: #e0e0e0 !important; } body.dark-mode .select2-container--default .select2-results__option { background-color: #16213e !important; color: #c0c0c0 !important; } body.dark-mode .select2-container--default .select2-results__option--highlighted { background-color: #0f3460 !important; color: #fff !important; } body.dark-mode .select2-dropdown { background-color: #16213e !important; border-color: #0f3460 !important; } /* ── Pagination ──────────────────────────────────────────────────────── */ body.dark-mode .pagination > li > a, body.dark-mode .pagination > li > span { background-color: #1e1e3a !important; border-color: #2a2a4a !important; color: #6ea8fe !important; } body.dark-mode .pagination > li > a:hover { background-color: #252545 !important; } body.dark-mode .pagination > .active > a, body.dark-mode .pagination > .active > span { background-color: #0f3460 !important; border-color: #0f3460 !important; } /* ── Tooltip ─────────────────────────────────────────────────────────── */ body.dark-mode .tooltip-inner { background-color: #252545 !important; color: #e0e0e0 !important; } /* ── Scrollbar (Webkit) ──────────────────────────────────────────────── */ body.dark-mode::-webkit-scrollbar { width: 10px; } body.dark-mode::-webkit-scrollbar-track { background: #1a1a2e; } body.dark-mode::-webkit-scrollbar-thumb { background: #3a3a5a; border-radius: 5px; } body.dark-mode::-webkit-scrollbar-thumb:hover { background: #4a4a6a; } /* ══════════════════════════════════════════════════════════════════════ TRACKER-SPECIFIC DARK MODE ══════════════════════════════════════════════════════════════════════ */ /* Main tracker table */ body.dark-mode table { background: #1a1a2e !important; } body.dark-mode .table > tbody > tr > td, body.dark-mode .table > tbody > tr > th, body.dark-mode .table > tfoot > tr > td, body.dark-mode .table > tfoot > tr > th, body.dark-mode .table > thead > tr > td, body.dark-mode .table > thead > tr > th { border-top-color: #2a2a4a !important; } /* Task header rows */ body.dark-mode .backfade { background: #1e1e38 !important; } body.dark-mode .backfade[style*="background-color"] { /* User-set task colours — darken them slightly */ filter: brightness(0.65) saturate(0.8); } /* Sticky date header */ body.dark-mode .topscroll_dates { background-color: #16213e !important; border-bottom-color: #2a2a4a !important; } /* Today column */ body.dark-mode .today, body.dark-mode td.today { background-color: #1a3a5c !important; color: #9ec5fe !important; } /* Weekend columns */ body.dark-mode .we, body.dark-mode td.we { background-color: #151530 !important; color: #aaa !important; } /* Sunday/empty cells */ body.dark-mode .Sunday, body.dark-mode td[style*="#F0FFFF"], body.dark-mode td[style*="F0FFFF"] { background-color: #151530 !important; } /* Floating title text overlay on task cells */ body.dark-mode .floating-text { background: linear-gradient(90deg, #1e2a4a 0%, #1e2a4a 66%, #1a2040 100%) !important; color: #c0c0c0 !important; } /* Task interval label */ body.dark-mode .interval-text { color: #9ec5fe !important; } /* Segment label */ body.dark-mode .segment-label { color: #aaa !important; } /* Empty cell background (#F0FFFF override) — catch inline style */ body.dark-mode td[style*="background-color: #F0FFFF"], body.dark-mode td[style*="background-color:#F0FFFF"] { background-color: #151530 !important; } /* Growl notification */ body.dark-mode .growl-notice { background: #16213e !important; border-left-color: #1a8a4a !important; color: #e0e0e0 !important; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5) !important; } /* Right-click context menu */ body.dark-mode .arrow-ctx-menu { background: #16213e !important; border-color: #2a2a4a !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important; } body.dark-mode .arrow-ctx-menu .ctx-item { color: #c0c0c0 !important; } body.dark-mode .arrow-ctx-menu .ctx-item:hover { background: #252545 !important; } body.dark-mode .arrow-ctx-menu .ctx-item.ctx-danger { color: #f08080 !important; } body.dark-mode .arrow-ctx-menu .ctx-item.ctx-danger:hover { background: #3a1a1a !important; } /* Confirm dialog */ body.dark-mode .arrow-confirm-box { background: #16213e !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important; } body.dark-mode .arrow-confirm-box h4 { color: #e0e0e0 !important; } body.dark-mode .arrow-confirm-box p { color: #999 !important; } body.dark-mode .arrow-confirm-box .btn-cancel { background: #252545 !important; border-color: #3a3a5a !important; color: #c0c0c0 !important; } body.dark-mode .arrow-confirm-box .btn-cancel:hover { background: #3a3a5a !important; } /* Syndicated section divider */ body.dark-mode #syn_divider td { background-color: #0d3a35 !important; color: #4db6ac !important; border-top-color: #1a5a55 !important; } /* Syndicated placeholder rows */ body.dark-mode tr[style*="background-color: #e0f7f4"], body.dark-mode tr[style*="background-color:#e0f7f4"] { background-color: #0d2a28 !important; } /* Cell notes panel */ body.dark-mode .note-item, body.dark-mode div[style*="background-color:#fff"][style*="border-left:3px solid #007bff"], body.dark-mode div[style*="background-color: #fff"][style*="border-left: 3px solid #007bff"] { background-color: #1e1e3a !important; color: #e0e0e0 !important; } body.dark-mode div[style*="color:#666"], body.dark-mode div[style*="color: #666"] { color: #888 !important; } /* Subscriber notes modal header */ body.dark-mode .modal-header[style*="background-color: #e0f7f4"], body.dark-mode .modal-header[style*="background-color:#e0f7f4"] { background-color: #0d2a28 !important; } /* jquery-ui dialogs (used by edit popup) */ body.dark-mode .ui-dialog, body.dark-mode .ui-widget-content { background: #16213e !important; border-color: #2a2a4a !important; color: #e0e0e0 !important; } body.dark-mode .ui-dialog-titlebar { background: #0f3460 !important; border-color: #0f3460 !important; color: #e0e0e0 !important; } body.dark-mode .ui-dialog-titlebar-close { background: transparent !important; border-color: #3a3a5a !important; } body.dark-mode .ui-widget-header { background: #0f3460 !important; border-color: #0f3460 !important; color: #e0e0e0 !important; } body.dark-mode .ui-state-default, body.dark-mode .ui-widget-content .ui-state-default { background: #252545 !important; border-color: #3a3a5a !important; color: #e0e0e0 !important; } /* Edit panel (ajax_fields_index_list_data_grouped) */ body.dark-mode .immediate_edit_window { background: #16213e !important; color: #e0e0e0 !important; } /* Status colour classes — keep them vivid but slightly muted */ body.dark-mode .loadstatus0 { background-color: #3a1a1a !important; color: #f08080 !important; } /* Cancelled */ body.dark-mode .loadstatus1 { background-color: #2a2a3a !important; color: #c0c0d0 !important; } /* Not Finished */ body.dark-mode .loadstatus2 { background-color: #1a2a3a !important; color: #6ea8fe !important; } /* In Progress */ body.dark-mode .loadstatus3 { background-color: #1a3a1a !important; color: #a8f0a8 !important; } /* Complete */ body.dark-mode .loadstatus4 { background-color: #3a2a1a !important; color: #f0d08a !important; } /* Pending */ body.dark-mode .loadstatus5 { background-color: #3a1a2a !important; color: #f0a8c0 !important; } /* Problems */ /* Table border override (tracker/styles.css uses #ddd) */ body.dark-mode .table > tbody > tr > td { border-top-color: #2a2a4a !important; } /* thead box-shadow */ body.dark-mode thead { box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5) !important; } body.dark-mode thead th { background-color: #0f3460 !important; color: #e0e0e0 !important; } /* Calendar wrapper (tracker/index.php inline style override) */ body.dark-mode .calendar { background-color: #1a1a2e !important; } /* Main nav (public/wide layout header) */ body.dark-mode .main-nav { background: #16213e !important; } body.dark-mode .main-nav .navbar-nav .nav-item .nav-link { color: #e0e0e0 !important; } body.dark-mode .main-nav .navbar-nav .nav-item .nav-link:hover { color: #9ec5fe !important; } body.dark-mode .main-nav .navbar-nav .nav-item.active .nav-link { color: #6ea8fe !important; } body.dark-mode .main-nav .dropdown .dropdown-menu { background: #16213e !important; border-color: #2a2a4a !important; } body.dark-mode .main-nav .dropdown .dropdown-menu .dropdown-item { color: #c0c0c0 !important; } body.dark-mode .main-nav .dropdown .dropdown-menu .dropdown-item:hover, body.dark-mode .main-nav .dropdown .dropdown-menu .dropdown-item:focus, body.dark-mode .main-nav .dropdown .dropdown-menu .dropdown-item.active { background: #0f3460 !important; color: #fff !important; } /* Success buttons — darker green for dark mode */ body.dark-mode .btn-success { color: #fff !important; background-color: #115420 !important; border-color: #28a745 !important; } body.dark-mode .btn-success:hover, body.dark-mode .btn-success:focus, body.dark-mode .btn-success:active { background-color: #1a7a30 !important; border-color: #34c759 !important; }