/* ============================================================================= MyFleet Easy Chart Service — "White / Day-light" theme (White-Gold) v5 ----------------------------------------------------------------------------- Drop-in override layer, scoped under html[data-theme="day"]. The Night theme (default / no attribute) is untouched. Load LAST (after dx.generic.myfleet-dark.css, common.css and the page css): v2 fixes the reported issues by overriding the app's *hardcoded* dark values (not just the CSS tokens): 1 Map → basemaps.js light-v10 + lightened container (see JS) 2 Catalog → .selectbyroutepanel / .mappopup / leftbar borders 3 Silver text → DevExtreme list/widget text forced dark 4 Black buttons → list / dropdown / leftbar buttons lightened 5 Order details → .request-confirmation-container + white value text 6 Vessels list → dimgray selection + dark map labels 7 Cart / request → white value/label text + white cart icon v3 adds the light-theme status-color pass (design review): 8 Status pills → solid green/blue/orange fills become soft tinted badges 9 Top-bar status → dx success/danger text buttons darkened for white bg 10 Disabled btns → readable ink instead of white-on-silver ("Take action…") 11 TreeList → order charts table header/rows themed (was still dark) 12 Pager → light, gold selected page v4 covers the widgets the v3 pass missed (2nd design review): 14 TreeList body → .dx-treelist-container painted #1f2229 over the white root: THE black-table bug (orders charts, catalog tree, users tree, add-vessel popup — all are dxTreeList) 15 Widget text → .dx-widget default ink; .dx-theme-*-color classes 25 Users widget → its inline night literals out-ranked by day rules → day/night toggle recolors Users page LIVE, no refresh v5 — full-app audit (both directions): NIGHT verified clean: every rule here is scoped html[data-theme="day"], all pages default to night, map keeps dark tiles — zero day leakage. DAY gaps + self-inflicted bleaching fixed: 26 Restored semantics the broad white-popup rule (§5) had bleached: validation bubbles red again, toasts keep type colors, tooltip + popover arrows no longer dark-on-white 27 Menus → context/dropdown menus, toolbar overflow menu, toolbar-background 28 Progress bar + slider → routes AI loading, select-by-route distance 29 Button load spinners (were white-on-white) + invalid editors keep red 30 White
separators (weather / chart-view-settings dialogs) → visible 31 Catalog left bar → active catalog keeps its gold highlight (the §11 generic disabled-button rule was flattening it) + basemaps.js: live day/night tile swap fixed (see file) 16 Group rows → vessels/overview company headers (dark navy → cream) 17 Hover/selection→ dark-css hover kept silver text on light hover bg 18 Switches → OFF state was black track/handle 19 Radio buttons → black circles → white + warm border 20 Calendar → datebox popup was fully dark 21 Caret + spin → dropdown caret / numberbox spin black hover & active 22 Tabs → tabpanel tab-content color + dark hairlines (MARPOL) 23 Map markers → vessel greens/yellows darkened for the light basemap 24 Misc → users-widget inline blacks, order-errors gray, prices Palette: accent #c2a264 · page #f1f1f1 · panel/header #eae2d4 · content #fff · border #d7ccb8 · text #333 · muted #7a7a7a ============================================================================= */ /* 1 ── CSS VARIABLE TOKENS (common.css :root) ──────────────────────────────── */ html[data-theme="day"] { --accent-color: #c2a264; /* kept — gold identity */ --accent-color-half-transparent: rgba(194,162,100,0.35); --border-color: #d7ccb8; --control-main-color: #ffffff; --panel-main-color: #eef0f2; --background-dark-color: #eef0f2; /* routes wrappers/textboxes */ --popup-map-color: #333333; /* leaflet popup text */ --popup-border-map-color: #d7ccb8; /* --selected-map-color stays #0000ff (selected vessel marker) */ } html[data-theme="day"] .dx-viewport, html[data-theme="day"] .topbar, html[data-theme="day"] .logo, html[data-theme="day"] .sidepanel, html[data-theme="day"] .mainpanel { transition: background-color .3s ease, color .3s ease, border-color .3s ease; } /* 2 ── APP SHELL (common.css hard-coded values) ────────────────────────────── */ html[data-theme="day"] .dx-viewport { background: #f1f1f1 !important; color: #333; } html[data-theme="day"] .topbar, html[data-theme="day"] .logo { background: #ffffff !important; border-bottom-color: #d7ccb8 !important; } /* logo mark + text (were white on dark) */ html[data-theme="day"] .logo-icon { fill: #c2a264 !important; stroke: #c2a264 !important; } html[data-theme="day"] #logo-text { color: #333333 !important; } html[data-theme="day"] .user-name-text { color: #333333 !important; } html[data-theme="day"] .user-role-text { color: #7a7a7a !important; } html[data-theme="day"] #about-version { color: #7a7a7a; } /* side-panel dividers were 1px solid black */ html[data-theme="day"] .sidepanel, html[data-theme="day"] .sidepanel-leftbar { border-right-color: #d7ccb8 !important; } /* Top-bar navigation buttons */ html[data-theme="day"] .navigation-button .dx-button-text, html[data-theme="day"] .topbar .dx-button-mode-text .dx-button-text { color: #4a4a4a; } html[data-theme="day"] .navigation-button-disabled { color: var(--accent-color); } /* Rounded tab badge (Requests count) — keep gold */ html[data-theme="day"] .label-rounded-tabmenu { background-color: var(--accent-color); color: #1c1c1c; } /* Login card (login.css #login-form #272A33) */ html[data-theme="day"] #login-form { background-color: #ffffff !important; box-shadow: 0 3px 16px rgba(0,0,0,.16); border: 1px solid #d7ccb8; } /* gold-outline action buttons (common.css hard-codes #1f2229 bg) */ html[data-theme="day"] .dx-button-mode-contained { background-color: #ffffff !important; border-color: var(--accent-color); color: var(--accent-color); } html[data-theme="day"] .dx-button-mode-contained .dx-icon { color: var(--accent-color); } html[data-theme="day"] .dx-button-mode-contained.dx-state-hover { background-color: #faf6ec !important; border-color: var(--accent-color); } html[data-theme="day"] .dx-button-mode-contained.dx-state-focused { background-color: #f3eee1 !important; border-color: var(--accent-color); } html[data-theme="day"] .dx-button-mode-contained.dx-state-active { background-color: #ecdfc4 !important; border-color: var(--accent-color); color: #6f5a2f; } /* 3 ── MAP (Leaflet / Mapbox) — issue 1 & 6 ──────────────────────────────── basemaps.js now serves mapbox light-v10 in day mode; this lightens the container backdrop shown behind tiles and the map text labels. */ html[data-theme="day"] .leaflet-container { background-color: #e8eef2 !important; } html[data-theme="day"] .vessel-marker-text { color: #333333 !important; } html[data-theme="day"] .vessel-marker-text-invalid { color: #7a7a7a !important; } html[data-theme="day"] .no-service-label { background-color: rgba(194,162,100,0.10); border-color: rgba(194,162,100,0.35); } /* 4 ── CATALOG (catalog.css hard-coded #1f2229) — issue 2 ──────────────────── */ html[data-theme="day"] .selectbyroutepanel { background-color: #ffffff !important; border: 1px solid #d7ccb8; box-shadow: 0 3px 16px rgba(0,0,0,.16); } html[data-theme="day"] .mappopup { background-color: #ffffff !important; border: 1px solid #d7ccb8; box-shadow: 0 3px 16px rgba(0,0,0,.16); } html[data-theme="day"] .mappopup .unitid { color: #8a8a8a; } /* left icon bar buttons (unselected) — selected keeps accent via .dx-state-disabled */ html[data-theme="day"] .catalog-id-button { background-color: #ffffff; color: #4a4a4a; } html[data-theme="day"] .catalog-id-button .dx-icon { color: #6a6a6a; } /* 5 ── ORDER / REQUEST CONFIRMATION dialog — issue 5 & 7 ────────────────────── */ html[data-theme="day"] .request-confirmation-container { background-color: #ffffff !important; } html[data-theme="day"] .request-confirmation-value { color: #333333 !important; } /* was #fff (invisible) */ html[data-theme="day"] .request-confirmation-label { color: #7a7a7a !important; } html[data-theme="day"] .request-confirmation-warning { color: var(--accent-color); } /* Requests page details panel (requests.css) — issue 7 */ html[data-theme="day"] .request-details-value { color: #333333 !important; } /* was #fff */ html[data-theme="day"] .request-details-label { color: #7a7a7a !important; } /* request-type SVG glyphs were fill:#fff */ html[data-theme="day"] .logo-or, html[data-theme="day"] .logo-dr, html[data-theme="day"] .logo-pr, html[data-theme="day"] .logo-ur, html[data-theme="day"] .logo-cr { fill: #4a4a4a !important; stroke: #4a4a4a !important; } /* 6 ── CART (cart.css + cart.tool.css) — issue 7 ───────────────────────────── */ html[data-theme="day"] .cart-header-value { color: #333333 !important; } /* was #fff */ html[data-theme="day"] .cart-group-line { color: #333333 !important; } /* was #fff */ html[data-theme="day"] .cart-label, html[data-theme="day"] .cart-label .dx-field-item-label .dx-field-item-label-content .dx-field-item-label-text { color: #7a7a7a !important; } html[data-theme="day"] .cart-period-table-value { color: var(--accent-color); } /* white "add to cart" glyph (SVG fill=white) → darken via filter */ html[data-theme="day"] .cart-add-icon { filter: brightness(0) invert(30%); } /* 7 ── ROUTES (routes.css hard-coded #1F2229) ──────────────────────────────── */ html[data-theme="day"] .wrapper, html[data-theme="day"] .wrapper1, html[data-theme="day"] .wrapper3 { background-color: #e6dfd2 !important; } /* grid gaps → light lines */ html[data-theme="day"] .route-details-label { color: #7a7a7a !important; } html[data-theme="day"] .routes-panels-item-toolbar { border-top-color: #d7ccb8 !important; } /* 8 ── DEVEXTREME SURFACES ─────────────────────────────────────────────────── */ /* broad text fix — silver-on-white (issue 3). Text containers only — NOT .dx-widget (that would also recolor button text and beat the button rules). */ html[data-theme="day"] .dx-list-item, html[data-theme="day"] .dx-item-content, html[data-theme="day"] .dx-datagrid, html[data-theme="day"] .dx-texteditor-input, html[data-theme="day"] .dx-field-item-label-text, html[data-theme="day"] .dx-checkbox-text, html[data-theme="day"] .dx-tab-text { color: #333333; } /* Data grid */ html[data-theme="day"] .dx-datagrid { background-color: #ffffff; color: #333333; } html[data-theme="day"] .dx-datagrid-headers, html[data-theme="day"] .dx-datagrid-header-panel { background-color: #eae2d4; color: #333333; border-color: #d7ccb8; } html[data-theme="day"] .dx-datagrid .dx-header-row > td { color: #333333; } html[data-theme="day"] .dx-datagrid-rowsview { border-color: #d7ccb8; } html[data-theme="day"] .dx-datagrid .dx-row > td, html[data-theme="day"] .dx-datagrid .dx-row > tr > td { border-color: #e6dfd2; color: #333333; } html[data-theme="day"] .dx-datagrid-rowsview .dx-row-alt > td { background-color: #faf8f4; } html[data-theme="day"] .dx-datagrid-rowsview .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-focused) > td { background-color: #f5efe3 !important; } html[data-theme="day"] .dx-datagrid-borders > .dx-datagrid-headers, html[data-theme="day"] .dx-datagrid-borders > .dx-datagrid-rowsview, html[data-theme="day"] .dx-datagrid-borders > .dx-datagrid-total-footer { border-color: #d7ccb8; } html[data-theme="day"] .dx-datagrid .dx-column-lines > td { border-left-color: #e6dfd2; border-right-color: #e6dfd2; } html[data-theme="day"] .dx-datagrid .dx-group-row { color: #6b6b6b; background-color: #f3efe8; } /* Grid selection / focus — replace hard-coded "dimgray" (vessels.css) & #232b3c — issue 6 */ html[data-theme="day"] .dx-widget:not(#ukc-popup-details-timeline) .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-removed) > td { background-color: rgba(194,162,100,0.18) !important; color: #333333; } html[data-theme="day"] #vessels-list .dx-row-focused > td, html[data-theme="day"] #vessels-list .dx-row-focused { background-color: rgba(194,162,100,0.22) !important; color: #333333 !important; } html[data-theme="day"] #vessels-list .dx-row-focused.dx-group-row { color: #6b6b6b !important; } html[data-theme="day"] #ukc-popup-details-timeline .dx-selection.dx-row > td { background-color: rgba(194,162,100,0.18) !important; } /* Toolbars */ html[data-theme="day"] .dx-toolbar { background-color: transparent; color: #333333; } /* Buttons */ html[data-theme="day"] .dx-button-normal { background-color: #ffffff; color: #333333; border-color: #d7ccb8; } html[data-theme="day"] .dx-button-normal.dx-state-hover { background-color: #f5efe3; } html[data-theme="day"] .dx-button-mode-text { color: #4a4a4a; } html[data-theme="day"] .dx-button-mode-text .dx-icon { color: #6a6a6a; } html[data-theme="day"] .dx-button-mode-text.dx-state-hover { background-color: rgba(0,0,0,0.05); } html[data-theme="day"] .dx-button.dx-button-default { background-color: var(--accent-color); color: #1c1c1c; border-color: #a98848; } /* outline buttons (order dialog Confirm/Decline/Close type:"outline") */ html[data-theme="day"] .dx-button-mode-outlined { color: var(--accent-color); border-color: var(--accent-color); background-color: #ffffff; } html[data-theme="day"] .dx-button-mode-outlined.dx-state-hover { background-color: #faf6ec; } /* Text editors / inputs */ html[data-theme="day"] .dx-texteditor.dx-editor-outlined { background-color: #ffffff; border-color: #d0d0d0; } html[data-theme="day"] .dx-texteditor.dx-editor-outlined.dx-state-hover { border-color: #c3b58f; } html[data-theme="day"] .dx-texteditor.dx-state-focused.dx-editor-outlined, html[data-theme="day"] .dx-texteditor.dx-state-active.dx-editor-outlined { border-color: var(--accent-color); } html[data-theme="day"] .dx-texteditor-input { color: #333333; } html[data-theme="day"] .dx-placeholder { color: #8a8a8a; } html[data-theme="day"] .dx-texteditor.dx-editor-outlined.dx-state-disabled { background-color: #f1f1f1; } html[data-theme="day"] .dx-dropdowneditor-icon, html[data-theme="day"] .dx-texteditor-buttons-container .dx-icon { color: #6a6a6a !important; } /* was black — issue 4 */ html[data-theme="day"] .dx-dropdowneditor-button { background-color: transparent; } /* Lists / dropdowns (selectbox, language selector) — issue 3 & 4 */ html[data-theme="day"] .dx-list { background-color: #ffffff; color: #333333; } html[data-theme="day"] .dx-list-item { color: #333333 !important; border-top-color: #eee6d6; } html[data-theme="day"] .dx-list-item.dx-state-hover { background-color: #f5efe3; } html[data-theme="day"] .dx-list-item.dx-list-item-selected { background-color: rgba(194,162,100,0.20); color: #333333; } html[data-theme="day"] .dx-selectbox-popup-wrapper .dx-overlay-content, html[data-theme="day"] .dx-dropdowneditor-overlay .dx-overlay-content { background-color: #ffffff; border: 1px solid #d7ccb8; } /* Overlays / popups (Sounding, MARPOL, Weather, Cart, Order, dialogs) — issue 5 & 7 */ html[data-theme="day"] .dx-overlay-content, html[data-theme="day"] .dx-popup-normal { background-color: #ffffff !important; color: #333333; border: 1px solid #d7ccb8; } html[data-theme="day"] .dx-popup-title { background-color: #eae2d4; color: #333333; border-bottom-color: #d7ccb8; } html[data-theme="day"] .dx-popup-content { color: #333333; } html[data-theme="day"] .dx-popup-content .dx-datagrid { background-color: #ffffff; } html[data-theme="day"] .dx-dialog.dx-popup-wrapper .dx-popup-content { color: #333333; } html[data-theme="day"] .leaflet-popup .leaflet-popup-content-wrapper { color: #333333; background-color: #ffffff; } /* Checkboxes */ html[data-theme="day"] .dx-checkbox-icon { background-color: #ffffff; border: 1px solid #d0d0d0; } html[data-theme="day"] .dx-checkbox-checked .dx-checkbox-icon { background-color: var(--accent-color); border-color: var(--accent-color); color: #ffffff; } html[data-theme="day"] .dx-checkbox-checked .dx-checkbox-icon::before { color: #ffffff; } /* Switch */ html[data-theme="day"] .dx-switch-on-value .dx-switch-container { background-color: var(--accent-color); } /* Tabs */ html[data-theme="day"] .dx-tabs { background-color: #eae2d4; } html[data-theme="day"] .dx-tab { background-color: #eae2d4; color: #4a4a4a; } html[data-theme="day"] .dx-tab.dx-state-hover { background-color: #e2d8c2; } html[data-theme="day"] .dx-tab.dx-tab-selected { background-color: #ffffff; color: #333333; } html[data-theme="day"] .dx-tab.dx-tab-selected::after { background-color: var(--accent-color); } /* Form captions / static values */ html[data-theme="day"] .dx-field-item-label-text, html[data-theme="day"] .dx-form-group-caption { color: #333333; } html[data-theme="day"] .dx-field-value-static { color: #444444; } /* Scrollbars */ html[data-theme="day"] .dx-scrollable-scroll-content { background-color: rgba(0,0,0,0.28); } html[data-theme="day"] .sidepanel::-webkit-scrollbar-thumb, html[data-theme="day"] .mainpanel::-webkit-scrollbar-thumb { background: #d7ccb8; } html[data-theme="day"] .sidepanel::-webkit-scrollbar-track, html[data-theme="day"] .mainpanel::-webkit-scrollbar-track { background: #f1f1f1; } /* Links */ html[data-theme="day"] a { color: #3c8dbc; } html[data-theme="day"] a:hover { color: #2c6d94; } /* ============================================================================= v3 — STATUS COLOR PASS (design review feedback) The Night theme keeps its solid saturated fills — they read well on dark. On white the same fills glow like traffic lights and their inherited white text disappears. Day mode switches every status to a "soft badge": tinted background (12–16% of the hue) + deep-tone text + 1px hairline of the same hue (inset shadow, so pill size never shifts). Also covers surfaces the v2 pass missed: the top-bar catalog status button, disabled buttons (white-on-silver "Take action…"), the dxTreeList used by the order charts table (still had the dark header), and the pager. ============================================================================= */ /* 9 ── STATUS PILLS (requests.css .label-rounded + state classes) ─────────── */ html[data-theme="day"] .label-rounded { font-weight: 600; } html[data-theme="day"] .label-state-completed, html[data-theme="day"] .label-error-status-ok { background-color: rgba(30,135,87,0.13) !important; box-shadow: inset 0 0 0 1px rgba(30,135,87,0.34); color: #11693f !important; } html[data-theme="day"] .label-state-in-progress { background-color: rgba(60,86,148,0.12) !important; box-shadow: inset 0 0 0 1px rgba(60,86,148,0.32); color: #33497e !important; } html[data-theme="day"] .label-state-rejected, html[data-theme="day"] .label-error-status-failed { background-color: rgba(240,149,57,0.16) !important; box-shadow: inset 0 0 0 1px rgba(240,149,57,0.45); color: #96520f !important; } /* inline warning text ("requires confirmation from …") — was #f09539 */ html[data-theme="day"] .error-label { color: #b3540e; } /* 10 ── TOP-BAR CATALOG STATUS (#status-button, dx text button success/danger) Dark theme paints these #4cae4c / red — washed out on a white top bar. */ html[data-theme="day"] .dx-button-mode-text.dx-button-success { color: #1e7a4d; } html[data-theme="day"] .dx-button-mode-text.dx-button-success .dx-icon { color: #1e7a4d; } html[data-theme="day"] .dx-button-mode-text.dx-button-success.dx-state-hover, html[data-theme="day"] .dx-button-mode-text.dx-button-success.dx-state-focused { background-color: rgba(30,135,87,.08); } html[data-theme="day"] .dx-button-mode-text.dx-button-danger { color: #b3352b; } html[data-theme="day"] .dx-button-mode-text.dx-button-danger .dx-icon { color: #b3352b; } html[data-theme="day"] .dx-button-mode-text.dx-button-danger.dx-state-hover, html[data-theme="day"] .dx-button-mode-text.dx-button-danger.dx-state-focused { background-color: rgba(221,75,57,.08); } html[data-theme="day"] .dx-button-mode-outlined.dx-button-success { color: #1e7a4d; border-color: #1e7a4d; background-color: #ffffff; } html[data-theme="day"] .dx-button-mode-outlined.dx-button-danger { color: #b3352b; border-color: #b3352b; background-color: #ffffff; } /* 11 ── DISABLED BUTTONS ("Take action…") — text was white @50% on silver. Text-mode buttons excluded: the active nav tab is a disabled text button and must keep its gold (common.css .navigation-button-disabled). */ html[data-theme="day"] .dx-button-mode-contained.dx-state-disabled, html[data-theme="day"] .dx-state-disabled .dx-button-mode-contained, html[data-theme="day"] .dx-button-mode-outlined.dx-state-disabled, html[data-theme="day"] .dx-state-disabled .dx-button-mode-outlined { background-color: #f3f0e9 !important; border-color: #ddd5c2 !important; } html[data-theme="day"] .dx-button-mode-contained.dx-state-disabled .dx-button-text, html[data-theme="day"] .dx-state-disabled .dx-button-mode-contained .dx-button-text, html[data-theme="day"] .dx-button-mode-outlined.dx-state-disabled .dx-button-text, html[data-theme="day"] .dx-state-disabled .dx-button-mode-outlined .dx-button-text { color: #98917e !important; opacity: 1; } html[data-theme="day"] .dx-button-mode-contained.dx-state-disabled .dx-icon, html[data-theme="day"] .dx-button-mode-outlined.dx-state-disabled .dx-icon { color: #98917e !important; opacity: 1; } /* 12 ── TREELIST (order charts table = dxTreeList, not dxDataGrid) ────────── */ html[data-theme="day"] .dx-treelist { background-color: #ffffff; color: #333333; } html[data-theme="day"] .dx-treelist-headers, html[data-theme="day"] .dx-treelist-header-panel { background-color: #eae2d4; color: #333333; border-color: #d7ccb8; } html[data-theme="day"] .dx-treelist .dx-header-row > td { color: #333333; } html[data-theme="day"] .dx-treelist-rowsview { border-color: #d7ccb8; } html[data-theme="day"] .dx-treelist .dx-row > td { border-color: #e6dfd2; color: #333333; } html[data-theme="day"] .dx-treelist-rowsview .dx-row-alt > td { background-color: #faf8f4; } html[data-theme="day"] .dx-treelist-rowsview .dx-data-row.dx-state-hover:not(.dx-selection) > td { background-color: #f5efe3 !important; } html[data-theme="day"] .dx-treelist-rowsview .dx-selection.dx-row > td { background-color: rgba(194,162,100,0.18) !important; color: #333333; } html[data-theme="day"] .dx-treelist-empty-space { color: #6a6a6a; } html[data-theme="day"] .dx-treelist-borders > .dx-treelist-headers, html[data-theme="day"] .dx-treelist-borders > .dx-treelist-rowsview { border-color: #d7ccb8; } /* 13 ── PAGER (requests history list, bottom) ──────────────────────────────── */ html[data-theme="day"] .dx-pager { color: #4a4a4a; background-color: transparent; } html[data-theme="day"] .dx-pager .dx-pages .dx-page, html[data-theme="day"] .dx-pager .dx-page-sizes .dx-page-size { color: #4a4a4a; } html[data-theme="day"] .dx-pager .dx-pages .dx-page.dx-selection, html[data-theme="day"] .dx-pager .dx-page-sizes .dx-page-size.dx-selection { background-color: var(--accent-color); color: #1c1c1c; } html[data-theme="day"] .dx-pager .dx-pages .dx-navigate-button { color: #4a4a4a; } /* ============================================================================= v4 — SECOND REVIEW PASS ============================================================================= */ /* 14 ── TREELIST BODY — the "black table" root cause. dx dark css paints the INNER .dx-treelist-container #1f2229/#dedede, on top of the white .dx-treelist root themed in v3. Every tree in this app is a dxTreeList (orders charts table, catalog #catalog-tree, users #users-tree-list, add-vessel #users-vessels-popup-list), so this one rule fixes them all. */ html[data-theme="day"] .dx-treelist-container { background-color: #ffffff; color: #333333; } html[data-theme="day"] .dx-treelist .dx-row-alt { border-top-color: #f0ebe0; border-bottom-color: #f0ebe0; } html[data-theme="day"] .dx-treelist .dx-row-lines > td { border-bottom-color: #e6dfd2; } html[data-theme="day"] .dx-treelist-table .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td:not(.dx-focused) { background-color: #f5efe3; color: #333333; } html[data-theme="day"] .dx-treelist-rowsview .dx-row-removed > td { background-color: #eee8da; border-top-color: #d7ccb8; border-bottom-color: #d7ccb8; color: #8a8a8a; } /* 15 ── DEFAULT WIDGET INK + THEME PROBE CLASSES. .dx-widget{color:#dedede} is what every "color: unset/inherit" resolves to — silver text on light selections came from here. The .dx-theme-* classes are kept themed for completeness (dx uses them as utility classes). NOTE the users widget does NOT read them live — see §25 for how it really works. */ html[data-theme="day"] .dx-widget { color: #333333; } html[data-theme="day"] .dx-theme-text-color { color: #333333 !important; } html[data-theme="day"] .dx-theme-text-color-as-background-color { background-color: #333333 !important; fill: #333333 !important; } html[data-theme="day"] .dx-theme-text-color-as-border-color { border-color: #333333 !important; } html[data-theme="day"] .dx-theme-background-color { background-color: #ffffff !important; fill: #ffffff !important; } html[data-theme="day"] .dx-theme-background-color-as-text-color { color: #ffffff !important; } html[data-theme="day"] .dx-theme-background-color-as-border-color { border-color: #ffffff !important; } html[data-theme="day"] .dx-theme-border-color { border-color: #d7ccb8 !important; } html[data-theme="day"] .dx-theme-border-color-as-text-color { color: #a89e88 !important; } html[data-theme="day"] .dx-theme-border-color-as-background-color { background-color: #d7ccb8 !important; fill: #d7ccb8 !important; } /* users widget hardcodes these inline (jQuery .css) — !important beats inline */ html[data-theme="day"] [style*="dimgray"] { background-color: rgba(194,162,100,0.30) !important; color: #333333 !important; } html[data-theme="day"] #users-vessels-popup-wrapper .dx-overlay-content { border-color: #d7ccb8 !important; } html[data-theme="day"] #users-vessels-popup-wrapper .dx-toolbar { border-top-color: #d7ccb8 !important; } html[data-theme="day"] #users-vessels-popup-list .dx-treelist-header-panel { border-bottom-color: #d7ccb8 !important; } html[data-theme="day"] .vessel-parameters-toolbar { border-top-color: #d7ccb8 !important; } /* 16 ── GROUP ROWS (vessels tree on Overview/Vessels: company headers). Dark css wins on specificity: .dx-row.dx-group-row:not(.dx-row-focused) {#7c7c7c on #262932} → override with the same selector. */ html[data-theme="day"] .dx-datagrid-rowsview .dx-row.dx-group-row:not(.dx-row-focused) { color: #5d5747; background-color: #eae2d4; } html[data-theme="day"] .dx-datagrid-rowsview .dx-row.dx-group-row td { border-top-color: #d7ccb8; border-bottom-color: #d7ccb8; } html[data-theme="day"] .dx-datagrid-group-opened, html[data-theme="day"] .dx-datagrid-group-closed { color: #857c68; } html[data-theme="day"] .dx-datagrid-rowsview .dx-row-focused.dx-group-row { background-color: #e2d8c2 !important; color: #4a4a4a !important; } /* 17 ── HOVER + SELECTION TEXT CONTRAST. v2 lightened the hover bg but dark css' higher-specificity rule kept the TEXT silver (#dedede) → "names not contrast on gold". Full-parity override: */ html[data-theme="day"] .dx-datagrid-table .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td:not(.dx-focused) { background-color: #f5efe3; color: #333333; } html[data-theme="day"] .dx-widget:not(#ukc-popup-details-timeline) .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):not(.dx-row-removed):not(#navarea-warnings-list .dx-row, #routes-panel-waypoints-table .dx-row) > td { background-color: rgba(194,162,100,0.22) !important; color: #333333 !important; } html[data-theme="day"] .dx-widget:not(#ukc-popup-details-timeline) .dx-datagrid-rowsview .dx-selection.dx-group-row:not(.dx-row-focused):not(.dx-row-removed):not(#navarea-warnings-list .dx-row) > td { background-color: rgba(194,162,100,0.22) !important; color: #6b6b6b !important; } html[data-theme="day"] .dx-datagrid-rowsview .dx-row-removed > td { background-color: #eee8da; color: #8a8a8a; } /* 18 ── SWITCHES (dxSwitch) — OFF state was a black pill. Day: warm light track + white handle; ON keeps the gold track (v2). */ html[data-theme="day"] .dx-switch-container { background: #e9e3d5; border-color: #c2b795; } html[data-theme="day"] .dx-switch.dx-state-readonly .dx-switch-container { background-color: #efeadf; border-color: #d6cdb8; } html[data-theme="day"] .dx-switch-off { color: #6f6a5c; } html[data-theme="day"] .dx-switch-on { color: #453714; } html[data-theme="day"] .dx-switch-handle::before { background-color: #ffffff; box-shadow: inset 0 0 0 1px #b9ae93, 0 1px 2px rgba(0,0,0,.15); } html[data-theme="day"] .dx-switch-on-value .dx-switch-handle::before { background-color: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,.2); } html[data-theme="day"] .dx-switch.dx-state-hover .dx-switch-container { background-color: #f2ecdf; border-color: #c2a264; } html[data-theme="day"] .dx-switch.dx-state-hover .dx-switch-handle::before { background-color: #ffffff; } html[data-theme="day"] .dx-switch.dx-state-focused .dx-switch-handle::before { background-color: #ffffff; } html[data-theme="day"] .dx-switch.dx-state-active .dx-switch-container { background-color: #ecdfc4; border-color: #c2a264; } html[data-theme="day"] .dx-switch.dx-state-active .dx-switch-handle::before, html[data-theme="day"] .dx-switch.dx-state-focused.dx-state-active .dx-switch-handle::before { background-color: #ffffff; } html[data-theme="day"] .dx-switch-on-value .dx-switch-container { border-color: #a98848; } /* catalog "Focus" round toggle — catalog.css hardcodes a black border */ html[data-theme="day"] .catalog-selected-units-focus .dx-switch-container, html[data-theme="day"] .catalog-selected-units-focus .dx-switch.dx-state-focused .dx-switch-container { border-color: #b5ab94; } /* 19 ── RADIO BUTTONS — black circles → white with warm border; gold dot kept */ html[data-theme="day"] .dx-radiobutton-icon { background-color: #ffffff; border-color: #b9ae93; } html[data-theme="day"] .dx-radiobutton-icon .dx-radiobutton-icon-dot { border-color: #ffffff; } html[data-theme="day"] .dx-radiobutton.dx-state-active .dx-radiobutton-icon { background-color: #f2ecdf; } html[data-theme="day"] .dx-radiobutton.dx-state-active .dx-radiobutton-icon-dot { border-color: #f2ecdf; } /* 20 ── CALENDAR (dxDateBox popup) — was fully dark */ html[data-theme="day"] .dx-calendar { background-color: #ffffff; border: 1px solid #d7ccb8; } html[data-theme="day"] .dx-calendar-body thead th { color: #8a8272; } html[data-theme="day"] .dx-calendar-cell { color: #333333; } html[data-theme="day"] .dx-calendar-cell.dx-state-hover span { color: #333333; } html[data-theme="day"] .dx-calendar-week-number-cell { color: #a89e88; } html[data-theme="day"] .dx-calendar-week-number-cell span { background-color: rgba(234,226,212,.55); } html[data-theme="day"] .dx-calendar-cell.dx-calendar-empty-cell, html[data-theme="day"] .dx-calendar-cell.dx-calendar-empty-cell.dx-state-active span, html[data-theme="day"] .dx-calendar-cell.dx-calendar-empty-cell.dx-state-hover span, html[data-theme="day"] .dx-calendar-cell.dx-calendar-other-view, html[data-theme="day"] .dx-calendar-cell.dx-calendar-other-view.dx-state-active span, html[data-theme="day"] .dx-calendar-cell.dx-calendar-other-view.dx-state-hover span { color: rgba(51,51,51,.35); } html[data-theme="day"] .dx-calendar-cell.dx-calendar-empty-cell.dx-calendar-selected-date span, html[data-theme="day"] .dx-calendar-cell.dx-calendar-other-view.dx-calendar-selected-date span { color: #2a2a2a; } html[data-theme="day"] .dx-calendar-navigator .dx-button { background-color: #ffffff !important; border-color: #d7ccb8; } /* 21 ── DROPDOWN CARET + NUMBERBOX SPIN — black hover/active squares */ html[data-theme="day"] .dx-dropdowneditor-icon { color: #6a6a6a; } html[data-theme="day"] .dx-dropdowneditor.dx-state-active .dx-dropdowneditor-icon, html[data-theme="day"] .dx-dropdowneditor.dx-state-hover:not(.dx-custom-button-hovered) .dx-dropdowneditor-icon { background-color: rgba(194,162,100,.16); border-color: transparent; color: #4a4a4a; } html[data-theme="day"] .dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon, html[data-theme="day"] .dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon { background-color: #ecdfc4; border-color: transparent; color: #4a4a4a; opacity: 1; } html[data-theme="day"] .dx-dropdowneditor-active .dx-dropdowneditor-icon { opacity: 1; } html[data-theme="day"] .dx-numberbox-spin-up-icon, html[data-theme="day"] .dx-numberbox-spin-down-icon { color: #6a6a6a; } html[data-theme="day"] .dx-state-hover.dx-numberbox-spin-button .dx-numberbox-spin-down-icon, html[data-theme="day"] .dx-state-hover.dx-numberbox-spin-button .dx-numberbox-spin-up-icon { background-color: rgba(194,162,100,.16); } html[data-theme="day"] .dx-state-active.dx-numberbox-spin-button .dx-numberbox-spin-down-icon, html[data-theme="day"] .dx-state-active.dx-numberbox-spin-button .dx-numberbox-spin-up-icon { background-color: #ecdfc4; color: #4a4a4a; } /* 22 ── TABS — MARPOL dialog: .dx-tabpanel > .dx-tabpanel-tabs .dx-tab .dx-tab-content{#dedede} out-specifies the generic v2 tab rules; hairline box-shadows stayed #4d4d4d (dark). */ html[data-theme="day"] .dx-tabpanel > .dx-tabpanel-tabs .dx-tab .dx-tab-content { color: #4a4a4a; } html[data-theme="day"] .dx-tabpanel > .dx-tabpanel-tabs .dx-tab.dx-tab-selected .dx-tab-content { color: #333333; } html[data-theme="day"] .dx-tabpanel > .dx-tabpanel-tabs .dx-tab { color: #d7ccb8; } /* currentColor feeds hairlines */ html[data-theme="day"] .dx-tab .dx-tab-text { color: #4a4a4a; } html[data-theme="day"] .dx-tab .dx-icon { color: #6a6a6a; } html[data-theme="day"] .dx-tab.dx-tab-selected .dx-tab-text, html[data-theme="day"] .dx-tab.dx-tab-selected .dx-icon { color: #333333; } html[data-theme="day"] .dx-tabs { color: #d7ccb8; box-shadow: inset 0 -1px #d7ccb8, inset 0 1px #d7ccb8, inset -1px 0 #d7ccb8, inset 1px 0 #d7ccb8; } html[data-theme="day"] .dx-tabs .dx-tab { box-shadow: inset 0 1px #d7ccb8, inset 0 -1px #d7ccb8; } html[data-theme="day"] .dx-tabpanel > .dx-tabpanel-tabs .dx-tabs { box-shadow: inset 0 -1px #d7ccb8, inset 0 1px, inset -1px 0, inset 1px 0; } html[data-theme="day"] .dx-tabpanel > .dx-tabpanel-tabs .dx-tab.dx-tab-selected { box-shadow: inset 0 1px #d7ccb8, inset -1px 0 #d7ccb8, inset 1px 0 #d7ccb8; } html[data-theme="day"] .dx-tabpanel > .dx-tabpanel-tabs .dx-tab.dx-state-active.dx-state-focused { box-shadow: inset 0 1px #d7ccb8, inset -1px 0 #d7ccb8, inset 1px 0 #d7ccb8, inset 0 -1px #d7ccb8; } /* 23 ── MAP VESSEL MARKERS — vessels.tools.js hardcodes the SVG fills (#5DCB99 green / #FFBA35 yellow / #ED5620 red). Too pale on the light basemap → CSS re-fills them via exact attribute match. Night untouched. */ html[data-theme="day"] .leaflet-marker-pane svg [fill="#5DCB99"] { fill: #178552; } html[data-theme="day"] .leaflet-marker-pane svg [fill="#FFBA35"] { fill: #b97a00; } html[data-theme="day"] .leaflet-marker-pane svg [fill="#ED5620"] { fill: #cc3f12; } /* 24 ── MISC — catalog price highlight + order-errors source gray */ html[data-theme="day"] span.highlighted { color: #8a6a2e; } html[data-theme="day"] .item-order-errors-source { color: #6a6a6a; } /* dxTreeView (column chooser / filter trees), for completeness */ html[data-theme="day"] .dx-treeview-item.dx-state-hover { background-color: #f5efe3; color: #333333; } html[data-theme="day"] .dx-state-selected > .dx-treeview-item, html[data-theme="day"] .dx-treeview-item-with-checkbox .dx-treeview-item { color: #333333; } html[data-theme="day"] .dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item { color: #333333; background-color: rgba(194,162,100,.2); } html[data-theme="day"] .dx-treeview-item-without-checkbox.dx-state-selected:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover { background-color: rgba(194,162,100,.14); } html[data-theme="day"] .dx-treeview-toggle-item-visibility { color: #857c68; } html[data-theme="day"] .dx-treeview-border-visible { border-color: #d7ccb8; } html[data-theme="day"] .dx-treeview-select-all-item { border-bottom-color: #d7ccb8; } /* 25 ── USERS WIDGET — LIVE THEME SWITCH (no refresh). users.widget.dx.js doesn't read live styles: it scans the DARK stylesheet's rule text (rule.selectorText match) and bakes those literals into inline styles. So its inline values are ALWAYS the night ones, in both themes — night is correct by construction, and day just has to out-rank the inline literals with !important. Side effect: the day/night toggle now recolors the Users page instantly. (The "Add" button bakes accent gold #c2a264 + ink #2a2a2a — correct in both themes, left alone.) */ /* permitted-vessels table — inline background-color:#1f2229 on its rowsview */ html[data-theme="day"] .dx-treelist-rowsview { background-color: #ffffff !important; } /* users tree + vessels list — company/category rows: inline color #7c7c7c */ html[data-theme="day"] #users-tree-list .dx-row[style*="rgb(124, 124, 124)"], html[data-theme="day"] #users-vessels-list .dx-row[style*="rgb(124, 124, 124)"] { color: #857c68 !important; } /* hardcoded "1px solid black" — tree right edge + bottom toolbar cells */ html[data-theme="day"] #users-tree, html[data-theme="day"] #users-toolbar-left, html[data-theme="day"] #users-toolbar-center, html[data-theme="day"] #users-toolbar-right { border-color: #d7ccb8 !important; } /* "Add" dropdown menu separator — inline background #dedede, invisible on white */ html[data-theme="day"] .dx-overlay-wrapper [style*="line-height: 2px"] { background-color: #d7ccb8 !important; } /* ============================================================================= v5 — FULL-APP AUDIT PASS Night side verified clean (all rules day-scoped; pages default night). Below: day-mode gaps, incl. semantics accidentally bleached by the broad §5 rule `.dx-overlay-content { background:#fff !important }` — which also hits toasts, validation bubbles and tooltips (they all carry that class). ============================================================================= */ /* 26a ── VALIDATION BUBBLES — restore the red the white blanket bleached */ html[data-theme="day"] .dx-invalid-message > .dx-overlay-content { background-color: #d9534f !important; color: #2a2a2a; border: 0; } /* invalid editors keep their red border (day input rules out-specified it) */ html[data-theme="day"] .dx-invalid.dx-texteditor, html[data-theme="day"] .dx-invalid.dx-texteditor.dx-editor-outlined { border-color: #d9534f !important; } /* 26b ── TOASTS (DevExpress.ui.notify) — keep semantic fills (as dx light themes do); untyped/custom toasts get charcoal instead of blank white */ html[data-theme="day"] .dx-toast-content { background-color: #3a3f4b !important; color: #ffffff !important; border: 0; } html[data-theme="day"] .dx-toast-info { background-color: #c2a264 !important; } html[data-theme="day"] .dx-toast-warning { background-color: #f0ad4e !important; } html[data-theme="day"] .dx-toast-error { background-color: #d9534f !important; } html[data-theme="day"] .dx-toast-success { background-color: #5cb85c !important; } /* 26c ── TOOLTIP / POPOVER ARROWS — content went white (§5) but the arrow spike stayed #1f2229 */ html[data-theme="day"] .dx-popover-wrapper .dx-popover-arrow::after, html[data-theme="day"] .dx-tooltip-wrapper.dx-popover-wrapper .dx-popover-arrow::after { background: #ffffff; border: 1px solid #d7ccb8; } /* 27 ── MENUS — context menus, grid header menus, toolbar overflow ──────── */ html[data-theme="day"] .dx-menu-base { color: #333333; } html[data-theme="day"] .dx-context-menu { color: #333333; } html[data-theme="day"] .dx-context-menu .dx-submenu { background-color: #ffffff; border-color: #d7ccb8; } html[data-theme="day"] .dx-context-menu .dx-menu-separator { background-color: #e6dfd2; } html[data-theme="day"] .dx-menu-item .dx-icon { color: #6a6a6a; } html[data-theme="day"] .dx-menu-item.dx-state-hover { background-color: #f5efe3; color: #333333; } html[data-theme="day"] .dx-menu-item-selected { background-color: rgba(194,162,100,.20); color: #333333; } html[data-theme="day"] .dx-toolbar-background { background-color: #ffffff; } html[data-theme="day"] .dx-toolbar-menu-section { border-bottom-color: #d7ccb8; } /* 28 ── PROGRESS BAR + SLIDER (routes AI loading; select-by-route) ──────── */ html[data-theme="day"] .dx-progressbar-container, html[data-theme="day"] .dx-progressbar-animating-container { background-color: #e9e3d5; border-color: #c9bfa8; } html[data-theme="day"] .dx-slider-bar { background: #ddd5c2; } html[data-theme="day"] .dx-slider-handle { border-color: #b5ab94; } /* range fills stay accent gold — correct on both themes */ /* 29 ── BUTTON LOAD SPINNERS — utils.sync.css paints segments white (for the dark outlined buttons); on day's white buttons they vanished */ html[data-theme="day"] .button-load-indicator .dx-loadindicator-icon .dx-loadindicator-segment { background: #c2a264; } /* (.dx-button-default variant stays black-on-gold — fine in both themes) */ /* 30 ── WHITE
SEPARATORS — invisible on white dialogs ──────────────── */ html[data-theme="day"] hr.weather-newline, html[data-theme="day"] hr.chartviewsettings-newline { border-top-color: #d7ccb8; } /* routes bottom toolbar hairline (routes.css: 1px solid black) */ html[data-theme="day"] .routes-panels-item-toolbar { border-top-color: #d7ccb8; } /* 31 ── CATALOG LEFT BAR — ACTIVE CATALOG HIGHLIGHT. The active catalog (AVCS / ADLL / eNP …) is a DISABLED contained button that catalog.css paints accent-gold with black ink. The generic §11 disabled-button rule (beige + gray, !important — added for "Take action…") was flattening it. Restore the gold identity — it reads fine on white. */ html[data-theme="day"] .dx-state-disabled .catalog-id-button, html[data-theme="day"] .dx-state-disabled.catalog-id-button { background-color: var(--accent-color) !important; border-color: transparent !important; color: #1c1c1c !important; font-weight: 700; } html[data-theme="day"] .dx-state-disabled .catalog-id-button .dx-icon, html[data-theme="day"] .dx-state-disabled.catalog-id-button .dx-icon { color: #1c1c1c !important; --icon-color: #1c1c1c; opacity: 1; } html[data-theme="day"] .dx-state-disabled .catalog-id-button .dx-button-text, html[data-theme="day"] .dx-state-disabled.catalog-id-button .dx-button-text { color: #1c1c1c !important; opacity: 1; } /* 32 ── CHART HOLDINGS — OBSOLETE/EXPIRING ROWS (vessels → Charts & Publications). vessels.js tags rows with class "warning" (expiry_warn); night paints them orange vs white for actual charts. The day grid ink rules flattened both to #333 → obsolete rows now deep amber (day "warning" family), actual stay dark. */ html[data-theme="day"] .dx-datagrid-rowsview .dx-row.warning > td, html[data-theme="day"] .dx-treelist-rowsview .dx-row.warning > td { color: #b3540e !important; } /* keep the amber when the row is hovered or selected */ html[data-theme="day"] .dx-datagrid-table .dx-data-row.warning.dx-state-hover > td { color: #b3540e !important; } html[data-theme="day"] .dx-widget:not(#ukc-popup-details-timeline) .dx-datagrid-rowsview .dx-selection.dx-row.warning > td { color: #b3540e !important; }