/* * MH 3D — DARK THEME * ================== * Loaded LAST by all three 3D surfaces: * /3d-data-manager.html (after data-manager.css + data-manager-redesign.css) * /3d/viewer.html (after viewer.css + viewer-redesign.css) * /3d/basic-viewer.html (after viewer.css + viewer-redesign.css) * * Everything here is gated on `:root[data-theme="dark"]`, set before first paint * by each page's inline theme bootstrap and owned at runtime by * /js/3d/shared/theme-toggle.js. With the attribute absent or "light" this file * contributes nothing — light mode is byte-for-byte what it was. * * --------------------------------------------------------------------------- * STRATEGY — re-remap the SAME tokens the redesign sheets remap * --------------------------------------------------------------------------- * The two `-redesign.css` sheets turn the base dark sheets light by remapping * custom properties. This file is the third pass: it remaps those same tokens to * a navy dark palette, so the ~1000s of `var(--…)` references flip a second time * with no per-rule duplication. * * That only works if we match how each redesign sheet scoped its remap: * - Data Manager remaps at `:root` -> §1 mirrors it at `:root[data-theme=dark]`. * - Viewers remap on CHROME SUBTREES (`#app, header, #assay-panel, …`) and * restore dark inside `#canvas-host`. A `:root` block cannot beat a custom * property set directly ON `#app` — the value set on the element always wins * over an inherited one, whatever the specificity. So §3 repeats the viewer's * own selector lists with a `:root[data-theme="dark"]` prefix. * Get that wrong and the dark tokens silently lose to the light ones. * * --------------------------------------------------------------------------- * WHAT DOES NOT CHANGE * --------------------------------------------------------------------------- * The 3D viewport is dark in BOTH themes — the canvas, the terrain render and * the scene annotations that float on it (compass, scale bar, measurement * labels, assay tooltip, .annotation-style-editor / .style-editor, the CDR data * room dialog, basic-viewer's #status-legend). Those are already dark in light * mode, so dark mode inherits them correctly and they are absent below. * What DOES flip is the white "glass" chrome floating on the canvas — the * Slides strip and the transport pill — via --mh-glass-*. * * --------------------------------------------------------------------------- * PALETTE * --------------------------------------------------------------------------- * Built from the brand navy (--mh-navy #0e2a47), not the legacy slate that the * base sheets happen to carry. Depth runs: * #081a2d app background (behind panels) * #0a2138 input / select field (recessed) * #0e2a47 panel / nav / rail (the brand navy) * #143354 raised card / button / menu * #16385c chip / hover * Blue lightens to #4a9fe0 and red to #ff6b61 so both clear WCAG AA on navy. */ /* ============================================================ 0. SHARED — rules identical on all three surfaces ============================================================ */ /* Brand logo swap. The lockup ships both inks as s (see .mh-brand-logo in data-manager-redesign.css / viewer-redesign.css, which default to showing the navy-ink asset); dark mode hides that and reveals the white-ink one. It can't ride the token pass — an image is not a colour — so it is the one piece of brand chrome that needs an explicit flip. All three surfaces use the same two class names, so this pair of rules covers every lockup. */ :root[data-theme="dark"] .mh-brand-logo--light { display: none; } :root[data-theme="dark"] .mh-brand-logo--dark { display: block; } /* ============================================================ 1. DATA MANAGER — mirrors the :root remap in data-manager-redesign.css §0 ============================================================ */ :root[data-theme="dark"] { /* --- base tokens consumed across data-manager.css --- */ --bg: #081a2d; --panel: #0e2a47; --panel-solid: #0e2a47; --panel-border: #1e4470; --text: #e7eef6; --text-muted: #9db0c6; --accent: #4a9fe0; --accent-hover: #6fb5ea; --success: #42c76a; --warning: #d6a860; --danger: #ff6b61; /* --- design tokens --- */ --mh-navy: #eaf0f7; /* INK: headings + hover text. See the note in the DM sheet. */ --mh-blue: #4a9fe0; --mh-blue-hover: #7cbcec; --mh-red: #ff6b61; --mh-viewport: #0b1016; /* the 3D canvas — unchanged in both themes */ --mh-border: #1e4470; --mh-border-soft: #173759; --mh-navy-solid: #1b4675; /* solid FILL stays navy; lifted so it reads on --panel */ --mh-surface: #143354; --mh-field: #0a2138; --mh-surface-hover: #1a3f66; --mh-border-strong: #2a5688; --mh-dropzone-border: #2a5688; --mh-scrollbar: rgba(160, 190, 220, 0.28); --mh-scrollbar-thumb: rgba(160, 190, 220, 0.26); --mh-scrollbar-hover: rgba(160, 190, 220, 0.45); --mh-chip: #16385c; --mh-faint: #93a7bf; --mh-fainter: #6f849e; --mh-blue-tint: #17395c; --mh-sel: #123050; --mh-sel-border: #1e4470; --mh-draft-fg: #f0c674; --mh-draft-bg: #3b2f14; --mh-green: #42c76a; /* Glass chrome over the canvas -> translucent navy. */ --mh-glass-bg: rgba(12, 33, 56, 0.94); --mh-glass-border: rgba(122, 160, 200, 0.24); --mh-glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); } /* ------------------------------------------------------------ 1a. Data Manager — rules the token pass cannot reach. ------------------------------------------------------------ */ /* The base sheet hardcodes `color:#fff` on .modal; the light theme re-inks it to var(--text) — already correct here, listed only so the pairing is obvious. What DOES need help: text painted on a fill that stays light-on-dark. */ /* Danger buttons keep white-on-red — --mh-red lightened, so darken the ink instead of leaving 3:1 white on a pastel red. */ :root[data-theme="dark"] .management-panel .btn-danger, :root[data-theme="dark"] .modal .btn-danger, :root[data-theme="dark"] .viewer-panel > #timeline-panel .state-card-delete:hover { color: #2a0704; } /* Rail Publish tint — the light sheet used the un-darkened brand red at 8/10%. */ :root[data-theme="dark"] .mh-rail-publish:hover { background: rgba(255, 107, 97, 0.14); } :root[data-theme="dark"] .mh-rail-publish.active { background: rgba(255, 107, 97, 0.18); } /* Scene-control "editable value" underline + hover were navy-alpha on white. */ :root[data-theme="dark"] .mh-nav-scene .editable-value { border-bottom-color: rgba(200, 220, 240, 0.3); } :root[data-theme="dark"] .mh-nav-scene .editable-value:hover { background: rgba(200, 220, 240, 0.08); } /* Drop shadows: navy-tinted shadows vanish on navy. Go black + deeper. */ :root[data-theme="dark"] .help-menu-dropdown { box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.7); } :root[data-theme="dark"] .mh-popout-collapse { box-shadow: 2px 0 6px rgba(0, 0, 0, 0.35); } :root[data-theme="dark"] .variation-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55); } :root[data-theme="dark"] .state-timing-modal { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); } :root[data-theme="dark"] .publish-tz-dropdown { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6); } :root[data-theme="dark"] .collar-detail-panel { box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.75); } /* The light sheet forces these two overlays' text light because they sit on the dark viewport — same requirement here, so they stay as-is. Their BACKGROUND, however, comes from the base sheet and is already dark. No rule needed. */ /* Loading overlay + spinner track sat on the light --bg. */ :root[data-theme="dark"] .app-loading-overlay { background: var(--bg); } /* The Data Manager loads /company-data-room/styles/data-room-base.css AFTER data-manager-redesign.css, and that sheet's reset sets `body { background: #f5f5f5; color: #333 }` — which therefore beats the redesign's `body, html { background: var(--bg) }` in BOTH themes. Invisible in light (both are near-white) but a white page under a navy app in dark, and it flashes before the chrome paints. Take it back explicitly. */ :root[data-theme="dark"] body { background: var(--bg); color: var(--text); } /* Native form controls: tell the UA to paint dark widgets (date pickers, the select popup list, scrollbars inside them). */ :root[data-theme="dark"] { color-scheme: dark; } /* …but the 3D viewport and the intentionally-dark editors already assumed dark widgets, so nothing to undo there. */ /* Publish date/time glyph: the base sheet inverts it for a dark field and the light theme un-inverts it. Dark field again -> restore the invert. */ :root[data-theme="dark"] .publish-input::-webkit-calendar-picker-indicator { filter: invert(1); } /* Amber DRAFT pills: --mh-draft-* already flipped; the border needs the fg. */ :root[data-theme="dark"] .publish-status-badge.draft, :root[data-theme="dark"] .variation-publish-badge.draft { border-color: #6b551f; } /* Upload dropzones read as a recessed well rather than a bright card. */ :root[data-theme="dark"] .management-panel [class*="dropzone"] { background: var(--mh-field) !important; } /* Sub-tab strips: --mh-chip already flips, but the base sheet paints some of them with rgba(0,0,0,.3), which stacks to near-black on navy. */ :root[data-theme="dark"] .sub-tabs, :root[data-theme="dark"] .layer-sub-tabs, :root[data-theme="dark"] .legend-sub-tabs, :root[data-theme="dark"] .variations-sub-tabs, :root[data-theme="dark"] .publish-sub-tabs, :root[data-theme="dark"] .mobile-panel-tabs, :root[data-theme="dark"] .mobile-sub-tabs { background: var(--mh-chip); } /* State-card action glyphs sit on the dark thumbnail: --mh-navy-solid fill is now lighter than before, so keep the near-white ink and lift the hover. */ :root[data-theme="dark"] .viewer-panel > #timeline-panel .state-card-thumbnail { background: #0b1016; } /* ============================================================ 2. THIRD-PARTY inside the Data Manager ============================================================ */ /* ---- Quill 1.3.6 (snow theme) — DELIBERATELY NOT THEMED ---- There is exactly ONE Quill instance in the whole 3D subsystem: the text-layer rich-text editor in the DM's #text-config-modal. The viewers never load Quill. That editor is intentionally a LIGHT surface inset in the dark modal (white paper, dark ink — see data-manager.css "Rich-text (Quill) editor"), matching the site's other Quill editors. A dark-mode block here therefore has no correct target: it can only fight that light editor. It previously did, and lost badly — it painted the text `var(--text)` (near-white) while the ID-scoped rule in data-manager.css kept the background white, giving 1.17:1 contrast, and it recoloured the toolbar icons `var(--text-muted)` on the light #f1f5f9 toolbar at 2.03:1. If a genuinely dark Quill surface is ever wanted, flip it in data-manager.css where the light decision is made — don't reintroduce overrides here. */ /* ---- Company Data Room components mounted in the DM ---- CDR sheets are authored light-only (they were written for the Data Room's own light page), so anything CDR that renders on DM chrome has to be flipped here. theme-dark.css is loaded last, and `:root[data-theme="dark"] .x` (0,2,1) outranks CDR's bare `.x` (0,1,0), so no !important is needed except where CDR itself used one. */ :root[data-theme="dark"] .cdr-notification-bar, :root[data-theme="dark"] .cdr-import-notification { background: var(--mh-surface); border-color: var(--mh-border); color: var(--text); } :root[data-theme="dark"] .cdr-icon-picker, :root[data-theme="dark"] .cdr-icon-picker-panel { background: var(--mh-surface); border-color: var(--mh-border); color: var(--text); } :root[data-theme="dark"] .cdr-style-preview-swatch { border-color: var(--mh-border); } /* ---- Vector "Edit Style" slide-out panel ---- #cdr-style-editor-panel is NOT an over-canvas overlay — it is a fixed, full-height right-hand panel (data-manager.css `.cdr-3dm-style-panel`, `background: #fff`). It is DM chrome, so it follows the theme; in dark mode the light original reads as a white slab against the navy app. The body is the shared CDRStyleEditor, so these rules cover its markup generally rather than scoping to the panel — the same components render on the CDR map page, which keeps its own light theme (no data-theme attribute), so the gate can't leak there. Shoelace controls inside need nothing: the DM toggles `sl-theme-dark` on alongside data-theme. */ /* Panel shell */ :root[data-theme="dark"] .cdr-3dm-style-panel { background: var(--panel); border-left-color: var(--mh-border); box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] .cdr-3dm-style-header { border-bottom-color: var(--mh-border); } :root[data-theme="dark"] .cdr-3dm-style-header h3 { color: var(--mh-navy); } :root[data-theme="dark"] .cdr-3dm-style-header .modal-close { color: var(--text-muted); } :root[data-theme="dark"] .cdr-3dm-style-header .modal-close:hover { color: var(--text); } /* Section rhythm + form labels */ :root[data-theme="dark"] .cdr-style-editor, :root[data-theme="dark"] .cdr-editor-section { border-bottom-color: var(--mh-border-soft); } :root[data-theme="dark"] .cdr-editor-section h4, :root[data-theme="dark"] .cdr-editor-section label, :root[data-theme="dark"] .cdr-form-group label, :root[data-theme="dark"] .cdr-label-grid label, :root[data-theme="dark"] .cdr-class-label { color: var(--text-muted); } :root[data-theme="dark"] .cdr-hint, :root[data-theme="dark"] .cdr-range-row { color: var(--mh-faint); } :root[data-theme="dark"] .cdr-color-input { border-color: var(--mh-border-strong); } /* Symbology mode block + base-symbol group sit on a tinted card in light mode */ :root[data-theme="dark"] .cdr-symbology-type-section { background: var(--mh-surface); border-bottom-color: var(--mh-border); } :root[data-theme="dark"] .cdr-base-symbol-controls { background: var(--mh-surface); border-color: var(--mh-border); } :root[data-theme="dark"] .cdr-ramp-gradient-preview { border-color: var(--mh-border-strong); } /* Class list — the densest part of the panel */ :root[data-theme="dark"] .cdr-class-list-header { color: var(--mh-fainter); } :root[data-theme="dark"] .cdr-class-list-container { border-color: var(--mh-border); background: var(--mh-field); } :root[data-theme="dark"] .cdr-class-item { border-bottom-color: var(--mh-border-soft); } :root[data-theme="dark"] .cdr-class-header { background: var(--mh-chip); } :root[data-theme="dark"] .cdr-class-header:hover { background: var(--mh-surface-hover); } :root[data-theme="dark"] .cdr-class-details { background: var(--mh-field); border-top-color: var(--mh-border-soft); } :root[data-theme="dark"] .cdr-class-label-text { color: var(--text); } :root[data-theme="dark"] .cdr-class-value-text { color: var(--text-muted); } :root[data-theme="dark"] .cdr-class-count, :root[data-theme="dark"] .cdr-class-delete { color: var(--mh-fainter); } :root[data-theme="dark"] .cdr-class-default { border-top-color: var(--mh-border-strong); } /* CDR sets this one with !important, so the override has to match it. */ :root[data-theme="dark"] .cdr-class-default-label { color: var(--mh-fainter) !important; } /* Sticky action footer (Cancel / Load Preset / Save Preset / Save Style). Lives in data-room-upload.css, not the map sheet — it is the upload wizard's step footer, reused by the style editor. It is `position: sticky; bottom: 0` with an opaque background so content scrolls under it, so the background has to MATCH THE PANEL exactly (--panel, same as .cdr-3dm-style-panel) rather than being a raised surface, or the bar reads as a seam across the footer. The Shoelace buttons inside follow sl-theme-dark and need nothing. */ :root[data-theme="dark"] .cdr-step-actions { background: var(--panel); border-top-color: var(--mh-border); } :root[data-theme="dark"] .cdr-error-detail { color: var(--mh-faint); } /* Amber "unsaved / not selected" notice */ :root[data-theme="dark"] .cdr-notice-warning { background: var(--mh-amber-bg); border-color: var(--mh-amber-border); color: var(--mh-amber-fg); } :root[data-theme="dark"] .cdr-notice-warning sl-icon { color: var(--mh-amber); } /* ---- Leaflet (CDR map previews) ---- */ :root[data-theme="dark"] .leaflet-container { background: var(--mh-field); } :root[data-theme="dark"] .leaflet-bar a, :root[data-theme="dark"] .leaflet-control-layers, :root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip { background: var(--mh-surface); color: var(--text); } :root[data-theme="dark"] .leaflet-bar a { border-bottom-color: var(--mh-border); } :root[data-theme="dark"] .leaflet-bar a:hover { background: var(--mh-surface-hover); } /* Raster basemap tiles are lightness-inverted so they sit on a dark page without shipping a second tile set. Hue is rotated back so water/vegetation keep their colour rather than reading as a photo negative. */ :root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.95); } /* ---- Tutorial overlay ---- tutorial.css is written against var(--panel)/var(--text) with DARK fallbacks, so §1 flips it wholesale. Only its white-alpha washes need re-seating: they were designed for a dark panel and are correct again here, so the light theme's problem does not recur. Nothing to override. */ /* ============================================================ 3. PUBLIC VIEWERS — mirrors the SCOPED remap in viewer-redesign.css §1a / §1c ------------------------------------------------------------ These selector lists MUST stay in step with that file. A custom property set on #app beats an inherited :root one regardless of specificity, so a dark token block at :root alone would never apply here. ============================================================ */ :root[data-theme="dark"] { /* The vocabulary viewer-redesign.css §0 shares with the DM sheet (--mh-navy / --mh-blue / --mh-chip / --mh-surface / …) is already declared in §1 above, at the same :root level — no need to repeat it. Only the tokens that exist ONLY in the viewer sheet are declared here. */ --mh-cta-border: #245080; /* basic-viewer amber "selected release" / boundary rows -> muted on navy. */ --mh-amber: #e0ab2c; --mh-amber-fg: #f3d489; --mh-amber-bg: #34290f; --mh-amber-bg-strong: #453515; --mh-amber-border: #6b551f; } /* ---- 3a. CHROME subtrees (mirrors viewer-redesign.css §1a) ---- */ :root[data-theme="dark"] #app, :root[data-theme="dark"] header, :root[data-theme="dark"] #assay-panel, :root[data-theme="dark"] .mh-vrail, :root[data-theme="dark"] .terms-modal-overlay, :root[data-theme="dark"] .help-modal-overlay, :root[data-theme="dark"] #breakpoint-modal, :root[data-theme="dark"] .breakpoint-modal-overlay, :root[data-theme="dark"] #mobile-info-bar, :root[data-theme="dark"] #mobile-bottom-bar, :root[data-theme="dark"] .hierarchy-zoom-menu { --panel: #0e2a47; --panel-solid: #0e2a47; --bg-elevated: #16385c; --text: #e7eef6; --text-muted: #9db0c6; --text-dim: #7b8fa8; --accent: #4a9fe0; --accent-light: #4a9fe0; --accent-hover: #7cbcec; --border-light: #173759; --border-medium: #1e4470; --border-accent: rgba(74, 159, 224, 0.4); --box-shadow-m: 0 4px 16px rgba(0, 0, 0, 0.45); --box-shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.6); --chrome-bg: #0e2a47; --chrome-header-bg: #123050; --chrome-header-bg-strong: #16385c; --surface-03: #102c4a; --surface-06: #123050; --surface-08: #153454; --surface-1: #17395c; --surface-12: #1a3f66; --surface-15: #1e4470; --surface-3: #2a5688; --divider-04: #12314f; --divider-05: #143354; --divider-06: #153454; --divider-08: #173759; --divider-1: #1a3d61; --divider-12: #1e4470; --divider-15: #234a78; --divider-2: #2a5688; --divider-25: #32618f; --divider-45: #4f7ba8; --divider-5: #7b9cbe; --scrollbar-thumb: rgba(160, 190, 220, 0.28); --control-bg: #0a2138; --control-border: #1e4470; --selected-bg: rgba(74, 159, 224, 0.18); --selected-border: #4a9fe0; } /* ---- 3b. #canvas-host stays on the base dark palette in BOTH themes. viewer-redesign.css §1b already restores it and those values are dark, so there is deliberately no override here. Scene annotations (compass, scale bar, measurement labels, assay tooltip) keep reading correctly. ---- */ /* ---- 3c. Over-canvas CARDS (mirrors viewer-redesign.css §1c) ---- The collar detail card is chrome, not a scene annotation, so it follows the theme. Keep this list in step with §1c. */ :root[data-theme="dark"] #canvas-host .collar-detail-panel { --panel: #0e2a47; --panel-solid: #0e2a47; --bg-elevated: #16385c; --text: #e7eef6; --text-muted: #9db0c6; --text-dim: #7b8fa8; --accent: #4a9fe0; --accent-light: #4a9fe0; --border-light: #173759; --border-medium: #1e4470; --box-shadow-m: 0 8px 26px rgba(0, 0, 0, 0.6); --box-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.7); --chrome-bg: #0e2a47; --chrome-header-bg: #123050; --chrome-header-bg-strong: #16385c; --surface-03: #102c4a; --surface-06: #123050; --surface-08: #153454; --surface-1: #17395c; --surface-12: #1a3f66; --surface-15: #1e4470; --surface-3: #2a5688; --divider-04: #12314f; --divider-05: #143354; --divider-06: #153454; --divider-08: #173759; --divider-1: #1a3d61; --divider-12: #1e4470; --divider-15: #234a78; --divider-2: #2a5688; --divider-25: #32618f; --divider-45: #4f7ba8; --divider-5: #7b9cbe; --scrollbar-thumb: rgba(160, 190, 220, 0.28); --control-bg: #0a2138; --control-border: #1e4470; --selected-bg: rgba(74, 159, 224, 0.18); --selected-border: #4a9fe0; } /* ---- 3d. Viewer rules the token pass cannot reach ---- */ /* The transport pill's glass comes from --mh-glass-* — already flipped in §1, and the viewer sheet's §0 declares the same token names, so it follows. */ /* Navy-tinted shadows disappear on navy. */ :root[data-theme="dark"] .mh-vpopout-collapse { box-shadow: 2px 0 6px rgba(0, 0, 0, 0.35); } :root[data-theme="dark"] .legend-swatch { box-shadow: 0 0 0 1px rgba(200, 220, 240, 0.22) inset; } :root[data-theme="dark"] #assay-panel select:focus { box-shadow: 0 0 0 3px rgba(74, 159, 224, 0.25); } /* basic-viewer status badges were darkened faces for a WHITE panel; on navy the pale fills glare, so mute the fill and lift the ink. */ :root[data-theme="dark"] #assay-panel #collars-content .bv-badge-new { color: #8ff0b4; background: #10401f; } :root[data-theme="dark"] #assay-panel #collars-content .bv-badge-pending { color: #ffd98a; background: #4a3410; } :root[data-theme="dark"] #assay-panel #collars-content .bv-badge-prev { color: #b7c6d8; background: #1e3550; } /* Loading / terms overlays that sat on the light chrome. */ :root[data-theme="dark"] .terms-modal-overlay, :root[data-theme="dark"] .help-modal-overlay, :root[data-theme="dark"] .breakpoint-modal-overlay { background: rgba(3, 12, 22, 0.72); } /* ============================================================ 4. THE TOGGLE BUTTON ------------------------------------------------------------ One button, three headers. The DM's is a sibling of .tutorial-help-btn inside .help-menu-host's parent; the viewers' sits beside .header-help-btn. Sized to match each neighbour. ============================================================ */ .mh-theme-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--mh-border); background: var(--mh-surface); color: var(--mh-faint); cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; -webkit-appearance: none; appearance: none; } .mh-theme-btn svg { width: 15px; height: 15px; display: block; } .mh-theme-btn:hover { color: var(--mh-navy); border-color: var(--mh-border-strong); background: var(--mh-chip); } .mh-theme-btn:focus-visible { outline: 2px solid var(--mh-blue); outline-offset: 2px; } /* The public viewers' header buttons are rounded rects, not circles — match the help button they sit next to rather than the DM's circular one. */ header .mh-theme-btn { border-radius: 7px; } /* The viewers hide most header controls on small screens; keep the toggle. */ @media (max-width: 768px) { .mh-theme-btn { width: 28px; height: 28px; } }