/* Dark mode for the admin CRM. Every dark rule below is scoped under html.dark-mode, so this file has ZERO effect until the element carries the dark-mode class (set by the toggle button in the nav / the inline script in the empireadmin_header tag). The only unscoped rules are the ones that position the toggle button itself. Wrapped in @media screen so printing always stays light. */ /* ---- Toggle button (applies in BOTH modes) ---- */ #nav-darkmode { float: right !important; width: auto !important; border-right: none !important; } #nav-darkmode > a { border-left: solid 7px #666666; cursor: pointer; } @media screen { /* ---- Base ---- */ html.dark-mode { background-color: #2b2b2b; color-scheme: dark; /* dark scrollbars + native widgets in Chromium/Firefox */ } html.dark-mode body { background-color: #2b2b2b !important; color: #e8e8e8; } /* Low-specificity link colors: pages that explicitly restyle links still win */ html.dark-mode :where(a:link) { color: #8ab4f8; } html.dark-mode :where(a:visited) { color: #b8a1e3; } /* ---- Header band (white logo gif): invert it instead of restyling it ---- */ html.dark-mode #header { filter: invert(0.88) hue-rotate(180deg); /* text here must start DARK: the filter flips it light. Without this the name/date (#topinfo) inherit the light dark-mode body color and the invert renders them dark-on-dark. */ color: #1c1c1c; } /* dark blue here inverts to a light blue inside the filtered header */ html.dark-mode #header a { color: #0d47a1; } /* LOD line under the date: pure black is the brightest the invert filter can render (~#e0e0e0), i.e. "white" on the dark band */ html.dark-mode #header .lod { color: #000000; } /* ---- Navigation (superfish): top bar is already #333, darken the dropdowns ---- */ html.dark-mode .sf-menu a, html.dark-mode .sf-menu a:visited { background-color: #3a3a3a; color: #cfd8e3; border-left-color: #555555; border-right-color: #555555; border-top-color: #555555; } html.dark-mode .sf-menu a:hover { background-color: #555555; color: white; } html.dark-mode .sf-menu > li { border-right-color: #555555; } html.dark-mode .sf-menu ul li:last-child { border-bottom-color: #666666; } /* legacy .menu styles (older pages) */ html.dark-mode .menu .options { background-color: #333333; border-left-color: #555555; border-right-color: #555555; border-bottom-color: #555555; } html.dark-mode .menu a { color: #9db8d2; } html.dark-mode .menu a:hover { background-color: #444444; color: #eeeeee; } /* ---- Chrome: sidebar, headings, actions, footer ---- */ html.dark-mode #leftbar { border-right-color: #444444; } html.dark-mode #leftbar h2, html.dark-mode #maincontent h2 { border-bottom-color: #5b79b8; } html.dark-mode #actions a { color: #e8e8e8; } /* ---- #list tables ---- */ html.dark-mode #list { border-bottom-color: #666666; border-top-color: #666666; } html.dark-mode #list td { color: #e8e8e8; border-left-color: #4a4a4a; border-right-color: #4a4a4a; } html.dark-mode #list th { border-left-color: #4a4a4a; border-right-color: #4a4a4a; } html.dark-mode #list tr.list_row0 { background-color: #3a3a3a; } html.dark-mode #list tr.list_row1 { background-color: #313131; } html.dark-mode #list tr:hover { box-shadow: rgba(255, 255, 255, 0.2) 0 0 10px; outline: solid 1px rgba(255, 255, 255, 0.3); } html.dark-mode #list tr.selected { background-color: #6e6320; } /* ---- .list tables ---- */ html.dark-mode table.list { border-bottom-color: #666666; border-top-color: #666666; } html.dark-mode .list td { color: #e8e8e8; border-left-color: rgba(255, 255, 255, 0.25); border-right-color: rgba(255, 255, 255, 0.25); } html.dark-mode .list thead th { border-left-color: #4a4a4a; border-right-color: #4a4a4a; } html.dark-mode .list tbody tr:hover { outline-color: rgba(255, 255, 255, 0.4); } html.dark-mode .list tbody tr:nth-child(odd) { background-color: #3a3a3a; } html.dark-mode .list tbody tr:nth-child(even) { background-color: #313131; } /* ---- table.data ---- */ html.dark-mode table.data thead tr th { border-bottom-color: #555555 !important; } html.dark-mode table.data tbody td { border-top-color: #4a4a4a; border-left-color: rgba(255, 255, 255, 0.08); border-right-color: rgba(255, 255, 255, 0.08); } html.dark-mode table.data tbody tr:nth-child(even) { background: #353535; } html.dark-mode table.data tbody tr:nth-child(odd) { background: #2e2e2e; } html.dark-mode table.data tbody tr:hover, html.dark-mode table.data tbody tr.showMeHover { background: #4f4a28; color: #ffffff; } html.dark-mode table.data tbody tr:hover td, html.dark-mode table.data tbody tr.showMeHover td { box-shadow: 0 3px 0 rgba(255, 255, 255, 0.08), 0 -2px 0 rgba(255, 255, 255, 0.08); } html.dark-mode table.data tfoot tr td { border-top-color: #555555 !important; } /* ---- Tabs, messages, errors ---- */ html.dark-mode div.tabs a, html.dark-mode div.tabs a:link, html.dark-mode div.tabs .a { border-color: #4a4a4a; } html.dark-mode div.tabs a:hover { background-color: #3d3d3d; border-color: #555555; } html.dark-mode .message { color: #a9c2ff; border: solid 1px #555555; } html.dark-mode .error { color: #ff7070; } html.dark-mode tr.error td { color: #e8e8e8; } /* ---- Form controls ---- */ html.dark-mode input[type=time], html.dark-mode input[type=datetime-local], html.dark-mode input[type=text], html.dark-mode input[type=password], html.dark-mode input[type=email], html.dark-mode input[type=number], html.dark-mode input[type=date], html.dark-mode input[type=search], html.dark-mode input[type=tel], html.dark-mode input[type=url], html.dark-mode textarea { background-color: #333333; color: #e8e8e8; border-color: #666666; } html.dark-mode select { background-color: #333333; color: #e8e8e8; border-color: #666666 !important; } html.dark-mode option { background-color: #333333; color: #e8e8e8; } html.dark-mode input[type=time]:focus, html.dark-mode input[type=datetime-local]:focus, html.dark-mode input[type=text]:focus, html.dark-mode input[type=password]:focus, html.dark-mode textarea:focus, html.dark-mode select:focus, html.dark-mode option:focus { outline: solid 0.5px #bbbbbb !important; border-color: #bbbbbb !important; } html.dark-mode button, html.dark-mode input[type=button], html.dark-mode input[type=submit], html.dark-mode input[type=reset] { background-color: #3d3d3d; color: #e8e8e8; border-color: #666666; } html.dark-mode ::placeholder { color: #888888; } /* ---- form[format=v2] ---- */ html.dark-mode form[format=v2] { border-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.03); box-shadow: none; } html.dark-mode form[format=v2] buttons { background-color: rgba(255, 255, 255, 0.05); } html.dark-mode form[format=v2] button { border-color: #666666; background-color: #3d3d3d; color: #e8e8e8; } html.dark-mode form[format=v2] button:hover { background-color: #4a4a4a; } /* ---- .modern-form ---- */ html.dark-mode .modern-form label { color: rgba(255, 255, 255, 0.55); } html.dark-mode .modern-form a { color: rgba(255, 255, 255, 0.75); } html.dark-mode .modern-form button { border-color: rgba(255, 255, 255, 0.15); } /* ---- Panels, notifications ---- */ html.dark-mode .content-panel { border-color: rgba(255, 255, 255, 0.12); background-color: rgba(255, 255, 255, 0.05); } /* notification box stays yellow (attention color) but with dark text */ html.dark-mode #notification-box { color: #000000; } html.dark-mode #notification-box > div { background-color: rgba(35, 35, 35, 0.95); color: #e8e8e8; } /* ---- waetech modal ---- */ html.dark-mode .modal-content { background-color: #2f2f2f; } html.dark-mode .modal .content, html.dark-mode .modal .modal-title { color: #e8e8e8; } /* some rpc fragments render a .modal-title before it is moved into a .modal wrapper (or outside one entirely); modal.css paints it black with a bare selector, so cover it bare too */ html.dark-mode .modal-title { color: #e8e8e8; } html.dark-mode .modal-buttons { background-color: rgba(255, 255, 255, 0.08); border-top-color: rgba(255, 255, 255, 0.1); } html.dark-mode .modal-buttons a:link, html.dark-mode .modal-buttons a:visited { color: #e8e8e8 !important; } html.dark-mode .modal-cancel:after { color: rgba(255, 255, 255, 0.6) !important; } html.dark-mode .modal-cancel:hover:after { background-color: rgba(0, 0, 0, 0.4); } html.dark-mode .modal-content > h1:first-child, html.dark-mode .modal-content > h2:first-child, html.dark-mode .modal-content > h3:first-child, html.dark-mode .modal-content > .content > h1:first-child, html.dark-mode .modal-content > .content > h2:first-child, html.dark-mode .modal-content > .content > h3:first-child { background-color: rgba(255, 255, 255, 0.06); border-bottom-color: rgba(255, 255, 255, 0.08); } /* ---- wae-modal (modal2022, injected by /js/util.js; it REDEFINES newModal, so this — not the classic .modal-content above — is what most modals actually render as) ---- */ html.dark-mode .wae-modal-frame { background-color: #2f2f2f; color: #e8e8e8; } /* title + button bands: the stock rgba(0,0,0,0.1) wash is invisible on a dark frame */ html.dark-mode .wae-modal [rel=wae-modal-title] { background-color: rgba(255, 255, 255, 0.08); } html.dark-mode .wae-modal [rel=wae-modal-buttons] { background-color: rgba(255, 255, 255, 0.08); } html.dark-mode .wae-modal [rel=wae-modal-buttons] button[type=link] { background-color: #3d3d3d; color: #e8e8e8; } /* ---- fullcalendar (crm calendar) ---- */ html.dark-mode .fc-unthemed th, html.dark-mode .fc-unthemed td, html.dark-mode .fc-unthemed thead, html.dark-mode .fc-unthemed tbody, html.dark-mode .fc-unthemed .fc-divider, html.dark-mode .fc-unthemed .fc-row, html.dark-mode .fc-unthemed .fc-popover { border-color: #4a4a4a; } /* "today": the stock ivory (#fcf8e3) glares on the dark grid and hides the day number -- use the same muted amber as ui-state-highlight */ html.dark-mode .fc-unthemed td.fc-today { background: #4a4520; } html.dark-mode .fc-unthemed .fc-divider, html.dark-mode .fc-unthemed .fc-popover .fc-header { background: #3a3a3a; } html.dark-mode .fc-unthemed .fc-popover { background-color: #2f2f2f; } html.dark-mode .fc-state-default { background-color: #3d3d3d; background-image: none; color: #e8e8e8; border-color: #666666; text-shadow: none; box-shadow: none; } html.dark-mode .fc-state-hover { background-color: #4a4a4a; } html.dark-mode .fc-state-active, html.dark-mode .fc-state-down { background-color: #2f2f2f; } /* ---- jQuery UI (smoothness) ---- */ html.dark-mode .ui-widget-content { background: #2f2f2f; border-color: #555555; color: #e8e8e8; } html.dark-mode .ui-widget-content a { color: #8ab4f8; } html.dark-mode .ui-widget-header { background: #3c3c3c; border-color: #555555; color: #e8e8e8; } html.dark-mode .ui-state-default, html.dark-mode .ui-widget-content .ui-state-default, html.dark-mode .ui-widget-header .ui-state-default { background: #3a3a3a; border-color: #555555; color: #dddddd; } html.dark-mode .ui-state-default a, html.dark-mode .ui-state-default a:link, html.dark-mode .ui-state-default a:visited { color: #dddddd; } html.dark-mode .ui-state-hover, html.dark-mode .ui-widget-content .ui-state-hover, html.dark-mode .ui-widget-header .ui-state-hover, html.dark-mode .ui-state-focus, html.dark-mode .ui-widget-content .ui-state-focus, html.dark-mode .ui-widget-header .ui-state-focus { background: #4a4a4a; border-color: #666666; color: #ffffff; } html.dark-mode .ui-state-active, html.dark-mode .ui-widget-content .ui-state-active, html.dark-mode .ui-widget-header .ui-state-active { background: #2f2f2f; border-color: #777777; color: #ffffff; } html.dark-mode .ui-state-active a, html.dark-mode .ui-state-active a:link, html.dark-mode .ui-state-active a:visited { color: #ffffff; } html.dark-mode .ui-state-highlight, html.dark-mode .ui-widget-content .ui-state-highlight, html.dark-mode .ui-widget-header .ui-state-highlight { background: #4a4520; border-color: #7a6d00; color: #ffe58a; } html.dark-mode .ui-widget-overlay { background: #000000; opacity: 0.6; } html.dark-mode .ui-dialog { background: #2f2f2f; } html.dark-mode .ui-tabs .ui-tabs-panel { background: transparent; } html.dark-mode .ui-datepicker th { color: #dddddd; } html.dark-mode .ui-timepicker-list { background: #2f2f2f; color: #e8e8e8; } /* ---- select2 ---- */ html.dark-mode .select2-container--default .select2-selection--single, html.dark-mode .select2-container--default .select2-selection--multiple { background-color: #333333; border-color: #666666; } html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e8e8e8; } html.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #444444; border-color: #666666; color: #e8e8e8; } html.dark-mode .select2-dropdown { background-color: #2f2f2f; border-color: #666666; color: #e8e8e8; } html.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field, html.dark-mode .select2-search__field { background-color: #333333; border-color: #666666; color: #e8e8e8; } html.dark-mode .select2-container--default .select2-results__option[aria-selected=true] { background-color: #444444; } /* ---- CodeMirror ---- */ html.dark-mode .CodeMirror { background: #2b2b2b; color: #e8e8e8; } html.dark-mode .CodeMirror-gutters { background: #333333; border-right-color: #555555; } html.dark-mode .CodeMirror-cursor { border-left-color: #ffffff; } html.dark-mode .CodeMirror-selected { background: #3a4a5a; } /* ---- iframes: keep embedded documents (email previews etc.) on white ---- */ html.dark-mode iframe:not([style*="background"]) { background-color: #ffffff; } /* ---- rpc fragment style blocks (these live in