/* ============================================================ Dark Mode overrides Applied when is set. Bootstrap 4 does not have a built-in dark mode, so these rules manually override backgrounds, text, and component colours. ============================================================ */ html.dark-mode body { background-color: #121212; color: #dee2e6; } /* ---- Navbar ---- */ html.dark-mode .navbar { background-color: #001533 !important; } /* ---- Breadcrumb ---- */ html.dark-mode .breadcrumb { background-color: #1e1e1e !important; color: #dee2e6; } /* ---- Cards ---- */ html.dark-mode .card { background-color: #1e1e1e; border-color: #444; color: #dee2e6; } html.dark-mode .card-header, html.dark-mode .card-footer { background-color: #2a2a2a; border-color: #444; } html.dark-mode .dashboard.card a { color: #adb5bd; } /* ---- Tables ---- */ html.dark-mode .table { color: #dee2e6; } html.dark-mode .table-bordered td, html.dark-mode .table-bordered th { border-color: #444; } html.dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.05); } html.dark-mode .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.08); color: #dee2e6; } /* ---- Form controls ---- */ html.dark-mode .form-control, html.dark-mode .input-group-text, html.dark-mode select.form-control { background-color: #2a2a2a; color: #dee2e6; border-color: #555; } html.dark-mode .form-control:focus { background-color: #333; color: #dee2e6; border-color: #888; } html.dark-mode .control-label, html.dark-mode label { color: #dee2e6; } /* ---- Dropdowns ---- */ html.dark-mode .dropdown-menu { background-color: #2a2a2a !important; border-color: #555 !important; } html.dark-mode .dropdown-item { color: #dee2e6 !important; background-color: transparent; } html.dark-mode .dropdown-item:hover, html.dark-mode .dropdown-item:focus { background-color: #3a3a3a !important; color: #fff !important; } html.dark-mode .bootstrap-select .dropdown-menu .inner { background-color: #2a2a2a !important; } html.dark-mode .bootstrap-select .dropdown-toggle { background-color: #2a2a2a !important; color: #dee2e6 !important; border-color: #555 !important; } /* ---- Modals ---- */ html.dark-mode .modal-content { background-color: #1e1e1e; color: #dee2e6; border-color: #444; } html.dark-mode .modal-header, html.dark-mode .modal-footer { border-color: #444; } /* ---- List groups ---- */ html.dark-mode .list-group-item { background-color: #1e1e1e; border-color: #444; color: #dee2e6; } /* ---- Alerts ---- */ html.dark-mode .alert-info { background-color: #0d3349; color: #bee5eb; border-color: #0c5460; } /* ---- Logout / nav link colours ---- */ html.dark-mode #logoutLink { color: #EAAA00; } /* ---- Toasts ---- */ html.dark-mode .toast-header { background-color: #1a1d20; color: #dee2e6; } /* ---- Dark-mode toggle button ---- */ html.dark-mode #dark-mode-toggle { color: #EAAA00; border-color: #EAAA00; } html.dark-mode #dark-mode-toggle:hover { background-color: #EAAA00; color: #001533; } /* Light-mode style for the toggle so it's visible on the dark navbar */ #dark-mode-toggle { color: #EAAA00; border-color: #EAAA00; background: transparent; } #dark-mode-toggle:hover { background-color: #EAAA00; color: #001533; } /* ---- FullCalendar list view ---- */ html.dark-mode .fc-unthemed .fc-list-view, html.dark-mode .fc-unthemed .fc-list-heading td { border-color: #444 !important; } html.dark-mode .fc-unthemed .fc-list-heading td { background: #2a2a2a !important; color: #dee2e6 !important; } html.dark-mode .fc-list-table td { background-color: #1e1e1e !important; color: #dee2e6 !important; border-color: #444 !important; } html.dark-mode .fc-list-table tr:first-child td { border-top-width: 0; background-color: #1e1e1e !important; } html.dark-mode .fc-unthemed .fc-list-item:hover td { background-color: #2e2e2e !important; } html.dark-mode .fc-unthemed .fc-list-empty { background-color: #1e1e1e !important; color: #dee2e6 !important; } html.dark-mode .fc-list-item-title a { color: #adb5bd !important; } html.dark-mode .fc-list-item-title a:hover { color: #fff !important; } /* ---- FullCalendar toolbar buttons ---- */ html.dark-mode .fc-state-default { background-color: #2a2a2a !important; background-image: none !important; border-color: #555 !important; color: #dee2e6 !important; text-shadow: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.3) !important; } html.dark-mode .fc-state-hover, html.dark-mode .fc-toolbar .fc-state-hover, html.dark-mode .fc-toolbar .ui-state-hover { background-color: #3a3a3a !important; background-image: none !important; color: #fff !important; border-color: #666 !important; } html.dark-mode .fc-state-down, html.dark-mode .fc-state-active, html.dark-mode .fc-toolbar .fc-state-active, html.dark-mode .fc-toolbar .ui-state-active { background-color: #EAAA00 !important; background-image: none !important; color: #001533 !important; border-color: #c89000 !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important; } html.dark-mode .fc-state-disabled { background-color: #222 !important; background-image: none !important; color: #666 !important; border-color: #444 !important; box-shadow: none !important; opacity: 0.65; } html.dark-mode .fc-toolbar h2 { color: #dee2e6; } html.dark-mode .fc-toolbar button:focus { outline-color: #EAAA00; }