/* * ObjectExplorer Dark Theme (Redesign 2026) * * Pure-CSS dark variant of the current light design. It is activated by * adding the class "oe-theme-dark" to the element (see * MainController.onToggleDarkTheme). No SASS / theme rebuild required. * * Palette based on the design mockup "xplain_data_dark_theme.html": * dark blue-gray surfaces (#0f1115 / #15181e), borders #262a33 and a * blue accent (#5b8cff) instead of the purple used in the light theme. * * All rules are scoped under body.oe-theme-dark and use !important so they * reliably win over the built theme CSS (which itself uses !important a lot) * independent of stylesheet load order. */ body.oe-theme-dark { /* palette (see mockup) */ --oe-bg: #0f1115; /* base / viewport */ --oe-surface: #15181e; /* panels, grids, windows, topbar */ --oe-sidebar: #13151a; /* tree / side panels */ --oe-elevated: #1c2029; /* menus, tooltips, inputs, chips */ --oe-row-alt: #181b22; /* alternating grid rows */ --oe-hover: #1f2937; /* hover surfaces */ --oe-selected: #2a3550; /* selected rows / items (blue tint)*/ --oe-border: #262a33; --oe-border-soft: #20242c; --oe-input-border: #2f3542; --oe-text: #e6e8eb; --oe-text-strong: #f2f3f5; --oe-text-mid: #d7dae0; --oe-text-dim: #93a4bd; --oe-text-muted: #6b7280; --oe-accent: #5b8cff; /* brand blue */ --oe-accent-light: #8fb3ff; /* blue for text on selection */ color-scheme: dark; background-color: var(--oe-bg) !important; color: var(--oe-text) !important; } /* ------------------------------------------------------------------ */ /* Viewport / base */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .x-body, body.oe-theme-dark .x-viewport, body.oe-theme-dark .x-container-default { background-color: var(--oe-bg) !important; } /* ------------------------------------------------------------------ */ /* Panels */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .x-panel-body-default { background: var(--oe-surface) !important; border-color: var(--oe-border) !important; color: var(--oe-text) !important; } body.oe-theme-dark .x-panel-default { border-color: var(--oe-border) !important; } body.oe-theme-dark .x-panel-header-default { background-color: var(--oe-surface) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-panel-header-title-default, body.oe-theme-dark .x-panel-header-default .x-panel-header-text { color: var(--oe-text-strong) !important; } body.oe-theme-dark .x-panel-default-outer-border-trbl, body.oe-theme-dark .x-panel-default-outer-border-rbl, body.oe-theme-dark .x-panel-default-outer-border-rl, body.oe-theme-dark .x-panel-default-outer-border-b, body.oe-theme-dark .x-panel-default-outer-border-l, body.oe-theme-dark .x-panel-default-outer-border-r, body.oe-theme-dark .x-panel-default-outer-border-t { border-color: var(--oe-border) !important; } /* ------------------------------------------------------------------ */ /* Toolbars */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .x-toolbar-default { background-color: var(--oe-surface) !important; background-image: none !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-toolbar-text-default { color: var(--oe-text) !important; } body.oe-theme-dark .x-toolbar-separator-horizontal { border-color: var(--oe-border) !important; } /* The floating canvas toolbar (.xplainToolbar, docked in .xwindows- container) is meant to stay a transparent strip in both themes — only the centered pill (.xcanvasToolbarPill) gets a surface fill, see Main.scss. The generic .x-toolbar-default rule above has higher specificity than Main.scss's ".xplainToolbar { transparent }" and was winning here, painting the whole strip in --oe-surface and hiding the dot canvas left/right of the pill. Override it back to transparent, scoped tighter so it still loses to .xcanvasToolbarPill. */ body.oe-theme-dark .xplainToolbar.x-toolbar-default { background-color: transparent !important; background-image: none !important; border: none !important; } /* ------------------------------------------------------------------ */ /* App header (topbar) — light (#fff) in the light design */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .xplainHeader, body.oe-theme-dark .xplainHeader .x-autocontainer-innerCt, body.oe-theme-dark .xplainHeader .x-toolbar-default { background-color: var(--oe-surface) !important; color: var(--oe-text) !important; border-bottom-color: var(--oe-border) !important; } body.oe-theme-dark .xplainHeader .x-item-disabled.x-btn-disabled div { background: var(--oe-surface) !important; } body.oe-theme-dark .xplainHeader .x-panel-default-outer-border-trbl { border-color: var(--oe-border) !important; } /* the b/w logo is dark → invert it so it stays visible on the dark bar */ body.oe-theme-dark #xplainLogo img { filter: invert(1) brightness(1.4); } body.oe-theme-dark .xplainHeaderIcon .x-btn-icon-el-default-small { color: var(--oe-text-dim) !important; } body.oe-theme-dark .xplainHeader .x-btn-inner-default-small, body.oe-theme-dark .xplainToolbar .x-btn-inner-default-small { color: var(--oe-text) !important; } body.oe-theme-dark .xplainToolbar .xplainHeaderText { color: var(--oe-text-dim) !important; } body.oe-theme-dark #currentAnalysisNameArea { color: var(--oe-text-strong) !important; } /* DEV badge — pink on dark like in the mockup. The light design puts background, border and pill radius on the CONTAINER (.xplainDevBadge, see Main.scss) — the span inside is plain text, so the dark variant has to recolor the container, not the span (recoloring only the span left the rose-colored light pill behind it). */ body.oe-theme-dark .xplainDevBadge { background-color: #3a2230 !important; border-color: #5c2e42 !important; color: #ff8fb1 !important; } body.oe-theme-dark .xplainDevBadge span { background-color: transparent !important; color: #ff8fb1 !important; } /* ------------------------------------------------------------------ */ /* Buttons */ /* ------------------------------------------------------------------ */ /* .xselectionbutton / .xselectionsetbutton are EXCLUDED from the generic button rules (base, hover, pressed): those buttons get their selection- set color (yellow, red, ...) at runtime as INLINE style via setColor()/updateButton() in xplain.ux.widget.selection.* — a transparent background/border with !important here overrides inline styles and strips the colors (same exclusion as in Main.scss, section "Topbar & Werkzeugleisten"). .xplainHeaderQuitSampleBtn stays a yellow hint bubble for the same reason. */ body.oe-theme-dark .x-btn-default-small:not(.xselectionbutton):not(.xselectionsetbutton):not(.xplainHeaderQuitSampleBtn), body.oe-theme-dark .x-btn-default-toolbar-small:not(.xselectionbutton):not(.xselectionsetbutton):not(.xplainHeaderQuitSampleBtn) { background-color: transparent !important; background-image: none !important; border-color: transparent !important; } body.oe-theme-dark .x-btn-inner-default-small, body.oe-theme-dark .x-btn-inner-default-toolbar-small { color: var(--oe-text) !important; } body.oe-theme-dark .x-btn-icon-el-default-small, body.oe-theme-dark .x-btn-icon-el-default-toolbar-small { color: var(--oe-text-dim) !important; } body.oe-theme-dark .x-btn-over.x-btn-default-small:not(.xselectionbutton):not(.xselectionsetbutton):not(.xplainHeaderQuitSampleBtn), body.oe-theme-dark .x-btn-over.x-btn-default-toolbar-small:not(.xselectionbutton):not(.xselectionsetbutton):not(.xplainHeaderQuitSampleBtn) { background-color: var(--oe-hover) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-btn-pressed.x-btn-default-small:not(.xselectionbutton):not(.xselectionsetbutton), body.oe-theme-dark .x-btn-menu-active.x-btn-default-small:not(.xselectionbutton):not(.xselectionsetbutton), body.oe-theme-dark .x-btn-pressed.x-btn-default-toolbar-small:not(.xselectionbutton):not(.xselectionsetbutton), body.oe-theme-dark .x-btn-menu-active.x-btn-default-toolbar-small:not(.xselectionbutton):not(.xselectionsetbutton) { background-color: var(--oe-selected) !important; border-color: var(--oe-input-border) !important; } body.oe-theme-dark .x-btn-pressed .x-btn-inner-default-small, body.oe-theme-dark .x-btn-pressed .x-btn-icon-el-default-small { color: var(--oe-accent-light) !important; } body.oe-theme-dark .x-btn.x-item-disabled .x-btn-inner, body.oe-theme-dark .x-btn.x-item-disabled .x-btn-icon-el { color: var(--oe-text-muted) !important; } /* split-button / menu arrows (rendered via :after, color inherits) */ body.oe-theme-dark .x-btn-wrap-default-small.x-btn-arrow-right:after, body.oe-theme-dark .x-btn-wrap-default-small.x-btn-split-right:after { color: var(--oe-text-dim) !important; } /* ------------------------------------------------------------------ */ /* Menus */ /* ------------------------------------------------------------------ */ /* Hardcoded hex (not var(--oe-...)) and combined-class selectors on purpose: the theme ships .x-menu-body-default { background:#fff } and .x-menu-item-default.x-menu-item-separator { background:#fff } without !important, which our !important rules already beat on importance alone — but the menu previously still rendered white in testing, so this block additionally maximizes specificity (matching the compiled theme's own combined classes 1:1) and drops the custom property indirection as a second line of defense. */ body.oe-theme-dark .x-menu, body.oe-theme-dark .x-menu-default, body.oe-theme-dark .x-menu-body, body.oe-theme-dark .x-menu-body-default, body.oe-theme-dark .x-boundlist, body.oe-theme-dark .x-boundlist-list-ct { background: #1c2029 !important; background-color: #1c2029 !important; border-color: #262a33 !important; } body.oe-theme-dark .x-menu-item, body.oe-theme-dark .x-menu-item-default, body.oe-theme-dark .x-menu-list-item { background: transparent !important; background-color: transparent !important; } body.oe-theme-dark .x-menu-item-text-default, body.oe-theme-dark .x-menu-item-text { color: #e6e8eb !important; } body.oe-theme-dark .x-menu-item-icon-default, body.oe-theme-dark .x-menu-item-icon { color: #93a4bd !important; } /* The light redesign (Main.scss) paints the hover as a rounded pill on the INNER .x-menu-item-link (background: $xdSurface2) and keeps the OUTER item transparent (otherwise the base theme's hover color pokes out at the rounded corners). Mirror that here: outer transparent, pill color on the link — recoloring only the outer item (as before) left the light $xdSurface2 pill visible: light on light. */ body.oe-theme-dark .x-menu-item-active, body.oe-theme-dark .x-menu-item-default.x-menu-item-active, body.oe-theme-dark .x-menu-item-focus, body.oe-theme-dark .x-menu-item-default.x-menu-item-focus { background: transparent !important; background-color: transparent !important; } body.oe-theme-dark .x-menu-item-active .x-menu-item-link, body.oe-theme-dark .x-menu-item-focus .x-menu-item-link { background: #1f2937 !important; background-color: #1f2937 !important; } body.oe-theme-dark .x-menu-item-active .x-menu-item-text { color: #f2f3f5 !important; } body.oe-theme-dark .x-menu-item-separator, body.oe-theme-dark .x-menu-item-default.x-menu-item-separator { border-top-color: #262a33 !important; background-color: transparent !important; } body.oe-theme-dark .x-menu-icon-separator { border-left-color: #262a33 !important; background-color: transparent !important; } body.oe-theme-dark .x-menu-item-disabled .x-menu-item-text { color: #6b7280 !important; } /* ------------------------------------------------------------------ */ /* Forms */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .x-form-text-default, body.oe-theme-dark .x-form-text, body.oe-theme-dark textarea.x-form-field, body.oe-theme-dark input.x-form-field { background-color: var(--oe-elevated) !important; background-image: none !important; color: var(--oe-text-mid) !important; border-color: var(--oe-input-border) !important; } body.oe-theme-dark .x-form-text-default::placeholder { color: var(--oe-text-muted) !important; } body.oe-theme-dark .x-form-item-label-default, body.oe-theme-dark .x-form-item-label, body.oe-theme-dark .x-form-display-field, body.oe-theme-dark .x-form-cb-label-default { color: var(--oe-text) !important; } body.oe-theme-dark .x-form-trigger-default, body.oe-theme-dark .x-form-trigger { background-color: var(--oe-elevated) !important; background-image: none !important; border-color: var(--oe-input-border) !important; color: var(--oe-text-dim) !important; } body.oe-theme-dark .x-form-field-focus, body.oe-theme-dark .x-form-text-default.x-form-focus { border-color: var(--oe-accent) !important; } body.oe-theme-dark .x-fieldset-default { border-color: var(--oe-border) !important; } body.oe-theme-dark .x-fieldset-header-text-default { color: var(--oe-text) !important; } /* combo / boundlist picker */ body.oe-theme-dark .x-boundlist-default, body.oe-theme-dark .x-boundlist { background: var(--oe-elevated) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-boundlist-item { color: var(--oe-text) !important; } body.oe-theme-dark .x-boundlist-item-over { background: var(--oe-hover) !important; color: var(--oe-text-strong) !important; } body.oe-theme-dark .x-boundlist-selected { background: var(--oe-selected) !important; color: var(--oe-accent-light) !important; } /* tag field items */ body.oe-theme-dark .x-tagfield-item { background-color: var(--oe-hover) !important; border-color: var(--oe-input-border) !important; color: var(--oe-text) !important; } /* ------------------------------------------------------------------ */ /* Grids & Trees */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .x-grid-view { background-color: var(--oe-surface) !important; } /* the object tree acts as sidebar → slightly darker like the mockup */ body.oe-theme-dark .x-tree-view { background-color: var(--oe-sidebar) !important; } body.oe-theme-dark .x-grid-item { background-color: transparent !important; color: var(--oe-text-mid) !important; } body.oe-theme-dark .x-grid-item-alt { background-color: var(--oe-row-alt) !important; } body.oe-theme-dark .x-grid-item-over { background-color: var(--oe-hover) !important; color: var(--oe-text) !important; } body.oe-theme-dark .x-grid-item-selected { background-color: var(--oe-selected) !important; color: var(--oe-text-strong) !important; } body.oe-theme-dark .x-grid-item-focused .x-grid-cell-inner:before { border-color: var(--oe-accent) !important; } body.oe-theme-dark .x-grid-cell, body.oe-theme-dark .x-grid-td { border-color: var(--oe-border-soft) !important; color: inherit !important; } body.oe-theme-dark .x-grid-body { background: var(--oe-surface) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-grid-header-ct { background-color: var(--oe-surface) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-column-header { background-color: var(--oe-surface) !important; background-image: none !important; color: var(--oe-text-dim) !important; border-right-color: var(--oe-border) !important; } body.oe-theme-dark .x-column-header-over, body.oe-theme-dark .x-column-header-open { background-color: var(--oe-hover) !important; } body.oe-theme-dark .x-grid-row-summary .x-grid-cell { background-color: var(--oe-surface) !important; color: var(--oe-text) !important; } /* grids inside specially styled containers (dashboard, windows, ...) */ body.oe-theme-dark .dashboard .x-grid-row-over .x-grid-cell, body.oe-theme-dark .attribute-window .x-grid-row-over .x-grid-cell, body.oe-theme-dark .xplainXobject .x-grid-row-over .x-grid-cell { background-color: var(--oe-hover) !important; } body.oe-theme-dark .attribute-window .x-grid-row-selected .x-grid-cell, body.oe-theme-dark .xplainXobject .x-grid-row-selected .x-grid-cell { background-color: var(--oe-selected) !important; color: var(--oe-text-strong) !important; } /* hover highlight in the object tree (analysis view): the light theme paints the row pale yellow (#ffefbb, class set in XObjectTree.js on itemmouseenter) — unreadable with the light dark-theme text, so use the regular dark hover tone instead */ body.oe-theme-dark .xplainXobject .x-grid-row.xobjectTreeHoverRow { background-color: var(--oe-hover) !important; } /* ------------------------------------------------------------------ */ /* Tabs */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .x-tab-bar-default { background-color: var(--oe-surface) !important; } body.oe-theme-dark .x-tab-default { background-color: transparent !important; } body.oe-theme-dark .x-tab-inner-default, body.oe-theme-dark .x-tab-icon-el-default { color: var(--oe-text-dim) !important; } body.oe-theme-dark .x-tab-default.x-tab-active { background-color: var(--oe-hover) !important; } body.oe-theme-dark .x-tab-default.x-tab-active .x-tab-inner-default, body.oe-theme-dark .x-tab-default.x-tab-active .x-tab-icon-el-default { color: var(--oe-accent) !important; } body.oe-theme-dark .x-tab-default:hover .x-tab-inner-default { color: var(--oe-text) !important; } /* ------------------------------------------------------------------ */ /* Windows / dialogs */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .x-window-default { background-color: var(--oe-surface) !important; border-color: var(--oe-border) !important; } /* Attribute windows on the canvas: the window ROOT element spans the header strip above the visible card (the header fades in on hover there, see Main.scss "Header über Fenstern"). The base theme leaves the root transparent — the generic dark rule above painted it and produced a permanent dark bar above the card. Keep the root transparent; the card itself is the window body (surface below). */ body.oe-theme-dark .attribute-window.x-window-default { background-color: transparent !important; background: transparent !important; } body.oe-theme-dark .x-window-body-default { background: var(--oe-surface) !important; color: var(--oe-text) !important; border-color: var(--oe-border) !important; } /* Focused canvas window: the light design highlights it via ".attribute-window:focus-within .x-window-body" with the light $xdBorderStrong (#d8dbe8) — on dark surfaces that reads as a bright white frame around the card. Keep the regular dark border instead (the selection-set color strip on top stays untouched). */ body.oe-theme-dark .attribute-window:focus-within .x-window-body { border-color: var(--oe-border) !important; } /* Ghost window (clone while dragging): light theme paints its header pill semi-transparent white */ body.oe-theme-dark .x-window-ghost .x-window-header { background: rgba(21, 24, 30, 0.92) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-window-header-default, body.oe-theme-dark .x-window-header-default .x-tool-img, body.oe-theme-dark .attribute-window .x-window-header-default { background-color: var(--oe-surface) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-window-header-title-default { color: var(--oe-text-strong) !important; } body.oe-theme-dark .x-window-header-default .x-tool-tool-el { color: var(--oe-text-dim) !important; } /* message box text */ body.oe-theme-dark .x-message-box .x-window-body { background: var(--oe-surface) !important; color: var(--oe-text) !important; } /* ------------------------------------------------------------------ */ /* Dialogs (Redesign 2026 chrome) */ /* */ /* The light redesign styles every dialog (xfiledialog, aggregation- */ /* Window, groupbyWindow, createMeasure, publishAnalysis, numFormat- */ /* Settings, settings, relTime, ...) with "body . ..." rules that */ /* paint card, header and body in $xdSurface (WHITE) with !important. */ /* Those selectors tie or beat the generic dark window rules above and */ /* win by cascade order (the built theme CSS loads after this file) — */ /* that's the "half white" dialog look in dark mode. The rules below */ /* out-specify them generically via body.oe-theme-dark + .x-window + */ /* :not(...) chains, so every dialog gets the dark card without */ /* listing each dialog class. Canvas windows (.attribute-window), */ /* toasts and drag ghosts keep their own styling. */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .x-window.x-window-default:not(.attribute-window):not(.x-toast):not(.x-window-ghost) { background: var(--oe-surface) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-window.x-window-default:not(.attribute-window):not(.x-toast):not(.x-window-ghost) .x-window-header { background: var(--oe-surface) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-window.x-window-default:not(.attribute-window):not(.x-toast) .x-window-header .x-title-text { color: var(--oe-text-strong) !important; } body.oe-theme-dark .x-window.x-window-default:not(.attribute-window):not(.x-toast):not(.x-window-ghost) .x-window-body { background: var(--oe-surface) !important; color: var(--oe-text) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-window.x-window-default:not(.attribute-window):not(.x-toast) .x-panel-body-default { background: var(--oe-surface) !important; } /* close tool keeps its red glyph from the light design; only the pale rose hover halo is swapped for a dark rose tone */ body.oe-theme-dark .x-window.x-window-default:not(.attribute-window) .x-window-header .x-tool:hover { background: #3a2230 !important; box-shadow: none !important; } /* grids inside dialogs (file dialog & co.): the light chrome paints column headers / hover rows in $xdSurface(2) with !important */ body.oe-theme-dark .x-window.x-window-default:not(.attribute-window) .x-column-header { background: var(--oe-surface) !important; color: var(--oe-text-dim) !important; border-bottom-color: var(--oe-border) !important; } body.oe-theme-dark .x-window.x-window-default:not(.attribute-window) .x-grid-row-over .x-grid-cell { background: var(--oe-hover) !important; } body.oe-theme-dark .xfiledialogpanelserver .x-grid-item-selected { background: var(--oe-selected) !important; } /* dialog footer: dark separator, neutral chip buttons */ body.oe-theme-dark .x-window.x-window-default .x-toolbar-footer { background: transparent !important; border-top-color: var(--oe-border) !important; } body.oe-theme-dark .x-window .x-toolbar-footer .x-btn { background: var(--oe-elevated) !important; border-color: var(--oe-input-border) !important; } body.oe-theme-dark .x-window .x-toolbar-footer .x-btn .x-btn-inner { color: var(--oe-text) !important; } body.oe-theme-dark .x-window .x-toolbar-footer .x-btn.x-btn-over { background: var(--oe-hover) !important; } /* primary action (last footer button) of the redesigned dialogs stays an accent button — the light rules for it mostly lack !important and would otherwise lose against the chip rules above */ body.oe-theme-dark .aggregationWindow .x-toolbar-footer .x-btn:last-child, body.oe-theme-dark .groupbyWindow .x-toolbar-footer .x-btn:last-child, body.oe-theme-dark .createMeasure .x-toolbar-footer .x-btn:last-child, body.oe-theme-dark .publishAnalysis .x-toolbar-footer .x-btn:last-child, body.oe-theme-dark .numFormatSettings .x-toolbar-footer .x-btn:last-child, body.oe-theme-dark .xfiledialog .x-toolbar-footer .x-btn:last-child { background: var(--oe-accent) !important; border-color: var(--oe-accent) !important; } body.oe-theme-dark .aggregationWindow .x-toolbar-footer .x-btn:last-child .x-btn-inner, body.oe-theme-dark .groupbyWindow .x-toolbar-footer .x-btn:last-child .x-btn-inner, body.oe-theme-dark .createMeasure .x-toolbar-footer .x-btn:last-child .x-btn-inner, body.oe-theme-dark .publishAnalysis .x-toolbar-footer .x-btn:last-child .x-btn-inner, body.oe-theme-dark .numFormatSettings .x-toolbar-footer .x-btn:last-child .x-btn-inner, body.oe-theme-dark .xfiledialog .x-toolbar-footer .x-btn:last-child .x-btn-icon-el { color: #fff !important; } /* file dialog: rotated side tabs + chip buttons (light: $xdSurface2 chips with light borders) */ body.oe-theme-dark .xfiledialog a.x-tab-rotate-right { background: var(--oe-elevated) !important; border-color: var(--oe-input-border) !important; } body.oe-theme-dark .xfiledialog a.x-tab-rotate-right .x-tab-inner { color: var(--oe-text-dim) !important; } body.oe-theme-dark .xfiledialog a.x-tab-rotate-right.x-tab-active { background: var(--oe-selected) !important; border-color: var(--oe-selected) !important; } body.oe-theme-dark .xfiledialog a.x-tab-rotate-right.x-tab-active .x-tab-inner { color: var(--oe-accent-light) !important; } body.oe-theme-dark .xfiledialog .x-btn.x-form-file-btn, body.oe-theme-dark .xfiledialog a.defaultDialogBtn { background: var(--oe-elevated) !important; border-color: var(--oe-input-border) !important; } body.oe-theme-dark .xfiledialog .x-btn.x-form-file-btn.x-btn-over, body.oe-theme-dark .xfiledialog a.defaultDialogBtn.x-btn-over { background: var(--oe-hover) !important; } body.oe-theme-dark .xfiledialog a.defaultDialogBtn span.x-fa { color: var(--oe-text-dim) !important; } /* Settings dialog (.xoesettings): a floating PANEL, not an x-window — the generic dialog rules above don't reach it. Its light chrome (white card, white fieldset cards, footer) comes from the ".xoesettings ..." redesign section in Main.scss. */ body.oe-theme-dark .xoesettings.x-panel { background: var(--oe-surface) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .xoesettings .x-panel-header-default { background: var(--oe-surface) !important; border-bottom-color: var(--oe-border) !important; } body.oe-theme-dark .xoesettings .x-panel-header-default .x-title-text { color: var(--oe-text-strong) !important; } body.oe-theme-dark .xoesettings .x-panel-body { background: var(--oe-surface) !important; } body.oe-theme-dark .xoesettings .x-fieldset { background: var(--oe-elevated) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .xoesettings .x-tab-bar-body { border-bottom-color: var(--oe-border) !important; } body.oe-theme-dark .xoesettings .x-tab-default:hover { background: var(--oe-hover) !important; } body.oe-theme-dark .xoesettings .x-tab-default.x-tab-active { background: var(--oe-selected) !important; } body.oe-theme-dark .xoesettings .x-tab-default.x-tab-active .x-tab-inner-default { color: var(--oe-accent-light) !important; } body.oe-theme-dark .xoesettings textarea.x-form-field { background: var(--oe-elevated) !important; border-color: var(--oe-input-border) !important; color: var(--oe-text-mid) !important; } body.oe-theme-dark .xoesettings a.setableButtons, body.oe-theme-dark .xoesettings a.faPreviewButton { background: var(--oe-elevated) !important; border-color: var(--oe-input-border) !important; } body.oe-theme-dark .xoesettings a.emptyDummyButton { background-color: var(--oe-surface) !important; border-color: var(--oe-input-border) !important; } body.oe-theme-dark .xoesettings a.settingsBtnNeutral { background: var(--oe-elevated) !important; border-color: var(--oe-input-border) !important; } body.oe-theme-dark .xoesettings .x-toolbar-footer { background: transparent !important; border-top-color: var(--oe-border) !important; } body.oe-theme-dark .xoesettings .x-toolbar-footer .x-btn { background: var(--oe-elevated) !important; border-color: var(--oe-input-border) !important; } body.oe-theme-dark .xoesettings .x-toolbar-footer .x-btn:last-child { background: var(--oe-accent) !important; border-color: var(--oe-accent) !important; } body.oe-theme-dark .xoesettings .x-toolbar-footer .x-btn:last-child .x-btn-inner { color: #fff !important; } /* ------------------------------------------------------------------ */ /* Tooltips */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .x-tip-default { background-color: var(--oe-elevated) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-tip-body-default, body.oe-theme-dark .x-tip-header-default .x-tip-header-title { color: var(--oe-text) !important; } /* ------------------------------------------------------------------ */ /* Masks & loading indicators */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .x-mask { background-color: rgba(15, 17, 21, 0.7) !important; } body.oe-theme-dark .x-mask-msg { background-color: var(--oe-elevated) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-mask-msg-text { color: var(--oe-text) !important; } body.oe-theme-dark .loading-indicator { color: var(--oe-text) !important; } /* ------------------------------------------------------------------ */ /* Analysis windows (xplain.ux attribute windows) */ /* ------------------------------------------------------------------ */ /* grid column headers - white with !important in the light design */ body.oe-theme-dark .attribute-window .x-grid-header-ct, body.oe-theme-dark .attribute-window .x-column-header, body.oe-theme-dark .attribute-window .x-column-header-inner { background: var(--oe-surface) !important; border-bottom-color: var(--oe-border) !important; } body.oe-theme-dark .attribute-window .x-column-header-text-inner { color: var(--oe-text-dim) !important; } body.oe-theme-dark .x-column-header-inner { background: transparent !important; } body.oe-theme-dark .attribute-window .x-grid-item { color: var(--oe-text-mid) !important; } /* value bar track in tables (light: #f8f9fc) */ body.oe-theme-dark .thebarplace { background-color: var(--oe-elevated) !important; } body.oe-theme-dark .xsumRow .thebarplace { background-color: transparent !important; } /* window header (light: semi-transparent white) */ body.oe-theme-dark .attribute-window .x-window-header { background: rgba(21, 24, 30, 0.92) !important; } body.oe-theme-dark div.attribute-window .x-title .x-title-text { color: var(--oe-text-strong) !important; } body.oe-theme-dark .attribute-window .xplainWindowIcon .x-btn-icon-el { color: var(--oe-text-dim) !important; } body.oe-theme-dark .attribute-window .x-window-header .x-tool:hover, body.oe-theme-dark .attribute-window .x-window-header .x-btn.xplainWindowIcon:hover { background: var(--oe-hover) !important; } /* ------------------------------------------------------------------ */ /* Selections window (ExpertUI.view.main.XSelectionsWindow) and the */ /* selection panels inside it (xplain.ux.widget.selection.Panel, cls */ /* "xselinfo" — also used in dialogs like the CD config). The state */ /* bubbles keep their inline selection-set colors; only the light */ /* chrome around them (white panel, #fafafa object cards, #ddd */ /* separators, white overlay buttons) is darkened here. */ /* ------------------------------------------------------------------ */ body.oe-theme-dark div.xselinfo, body.oe-theme-dark .xselinfo .x-autocontainer-outerCt { background: var(--oe-surface) !important; color: var(--oe-text) !important; } /* one card per object (light: #fafafa with #efefef border) */ body.oe-theme-dark div.xselinfo .object { background-color: var(--oe-elevated) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark div.xselinfo .objectName { color: var(--oe-text-strong) !important; } /* separator lines between the attribute rows (light: #ddd) */ body.oe-theme-dark .xselinfo p { border-bottom-color: var(--oe-border) !important; } /* small overlay buttons on the bubbles (light: solid white) */ body.oe-theme-dark .xselinfo .x-btn { background-color: transparent !important; } body.oe-theme-dark .xselinfo .x-btn:hover { background-color: var(--oe-hover) !important; } body.oe-theme-dark .xselinfo a.x-btn .x-btn-icon-el { color: var(--oe-text-dim) !important; } /* floating canvas toolbar pill (top center) */ body.oe-theme-dark:not(.xadmintool) .xcanvasToolbarPill { background: var(--oe-surface) !important; border: 1px solid var(--oe-border) !important; } body.oe-theme-dark:not(.xadmintool) .xcanvasToolbarPill .x-toolbar-separator-horizontal { border-left-color: var(--oe-border) !important; } body.oe-theme-dark:not(.xadmintool) .xcanvasToolbarPill .xviewSelector { background: var(--oe-elevated) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark:not(.xadmintool) .xcanvasToolbarPill .xviewSelector .x-btn-pressed { background: var(--oe-selected) !important; } /* ------------------------------------------------------------------ */ /* Charts (axes, titles, drop areas, legends) */ /* ------------------------------------------------------------------ */ /* DOM legend below the window charts. The charts package paints the legend element itself white (".x-legend { background: #fff }") and gives the items #ccc borders — on dark surfaces that showed as a bright frame around the legend strip. */ body.oe-theme-dark .x-legend, body.oe-theme-dark .x-legend-container { background: var(--oe-surface) !important; } body.oe-theme-dark .x-legend-horizontal .x-legend-item, body.oe-theme-dark .x-legend-vertical .x-legend-item, body.oe-theme-dark .attribute-window .x-legend-container .x-legend-item { border-color: var(--oe-border) !important; background: var(--oe-surface) !important; color: var(--oe-text) !important; } body.oe-theme-dark .chartxaxis, body.oe-theme-dark .chartyaxis { border-color: var(--oe-border) !important; } body.oe-theme-dark .axisdroparea { background-color: var(--oe-surface) !important; color: var(--oe-text-dim) !important; } body.oe-theme-dark span.chartTitle, body.oe-theme-dark .gridxaxistitle, body.oe-theme-dark .gridyaxistitle { color: var(--oe-text) !important; } body.oe-theme-dark .x-legend-item { color: var(--oe-text) !important; } /* ------------------------------------------------------------------ */ /* Misc: splitters, scrollbars, dashboard, date picker */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .x-splitter { background-color: var(--oe-bg) !important; } body.oe-theme-dark .x-splitter-active { background-color: var(--oe-accent) !important; } body.oe-theme-dark .dashboard .x-panel-body-default { background: var(--oe-bg) !important; } body.oe-theme-dark ::-webkit-scrollbar { width: 10px; height: 10px; } body.oe-theme-dark ::-webkit-scrollbar-track { background: var(--oe-bg); } body.oe-theme-dark ::-webkit-scrollbar-thumb { background: var(--oe-input-border); border-radius: 5px; } body.oe-theme-dark ::-webkit-scrollbar-thumb:hover { background: #3a4150; } body.oe-theme-dark .x-datepicker, body.oe-theme-dark .x-datepicker-default { background-color: var(--oe-elevated) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-datepicker-default .x-datepicker-cell, body.oe-theme-dark .x-datepicker-default .x-datepicker-date { background-color: var(--oe-elevated) !important; color: var(--oe-text) !important; } body.oe-theme-dark .x-datepicker-default .x-datepicker-column-header { background-color: var(--oe-surface) !important; color: var(--oe-text) !important; } /* ------------------------------------------------------------------ */ /* Instance view: pager (Previous / Next) at the bottom */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .instanceView div.buttonPlaceholder { background: var(--oe-surface) !important; border-top: 1px solid var(--oe-border) !important; } body.oe-theme-dark a.pageCounterBtn { background: var(--oe-elevated) !important; border: 1px solid var(--oe-input-border) !important; } body.oe-theme-dark a.pageCounterBtn:hover, body.oe-theme-dark a.pageCounterBtn a.x-btn:hover { background: var(--oe-hover) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .instanceView a.pageCounterBtn span { color: var(--oe-text) !important; } body.oe-theme-dark .pageCounter div { color: var(--oe-text-dim) !important; } /* ------------------------------------------------------------------ */ /* Object tree (instance view): round checkboxes */ /* ------------------------------------------------------------------ */ body.oe-theme-dark #xobjectTree-body input[type="checkbox"] { background-color: var(--oe-elevated) !important; border-color: var(--oe-input-border) !important; } body.oe-theme-dark #xobjectTree-body input[type="checkbox"]:hover:not(:disabled) { border-color: var(--oe-text-dim) !important; } body.oe-theme-dark #xobjectTree-body input[type="checkbox"]:checked { background-color: var(--oe-accent) !important; border-color: var(--oe-accent) !important; } body.oe-theme-dark #xobjectTree-body input[type="checkbox"]:disabled { background-color: var(--oe-surface) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark #xobjectTree-body input[type="checkbox"]:checked:disabled { background-color: var(--oe-surface) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark div.semiSelectedCheckbox { background: var(--oe-accent) !important; } /* ------------------------------------------------------------------ */ /* Ext.toast — dark amber variant of the yellow toast card */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .x-toast.x-window { background: #332a14 !important; border-color: #5c4d26 !important; } body.oe-theme-dark .x-toast .x-window-header .x-title-text { color: var(--oe-text-strong) !important; } body.oe-theme-dark .x-toast .x-window-body { color: var(--oe-text-mid) !important; } body.oe-theme-dark .x-toast .x-window-header .x-title-icon, body.oe-theme-dark .x-toast .x-tool-close, body.oe-theme-dark .x-toast .fas.fa-times { color: #f2b84b !important; } /* ------------------------------------------------------------------ */ /* Canvas: dot grid also in dark mode (light dots on dark background) */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .xwindows-container { background-color: var(--oe-bg) !important; background-image: radial-gradient(var(--oe-input-border) 1.5px, transparent 1.5px) !important; background-size: 14px 14px !important; } /* the bodies above the canvas must stay transparent, otherwise the generic dark panel/container backgrounds cover the dots */ body.oe-theme-dark .xwindows-container > .x-panel-bodyWrap > .x-panel-body, body.oe-theme-dark .xwindows-container > .x-panel-body, body.oe-theme-dark .xwindows-container #xMainWinArea-body { background: transparent !important; } /* ------------------------------------------------------------------ */ /* Grid row separators: the theme draws them in light grey (#eaeaea, */ /* #fff on the first row) which glares on dark surfaces — use the */ /* soft dark border tokens instead */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .x-grid-item { border-color: var(--oe-border-soft) !important; } body.oe-theme-dark .x-grid-with-row-lines .x-grid-item { border-color: var(--oe-border-soft) !important; } body.oe-theme-dark .x-grid-with-row-lines .x-grid-item:first-child { border-top-color: transparent !important; } body.oe-theme-dark .x-grid-with-row-lines .x-grid-item-over, body.oe-theme-dark .x-grid-with-row-lines .x-grid-item-over + .x-grid-item, body.oe-theme-dark .x-grid-with-row-lines .x-grid-item-selected, body.oe-theme-dark .x-grid-with-row-lines .x-grid-item-selected + .x-grid-item { border-color: var(--oe-border) !important; } /* summary/total row: light border-top (#eaeaea) + white background */ body.oe-theme-dark .x-grid-row-summary .x-grid-cell, body.oe-theme-dark .x-grid-row-summary .x-grid-rowwrap, body.oe-theme-dark .x-grid-row-summary .x-grid-cell-rowbody { background-color: var(--oe-surface) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-docked-summary { background: var(--oe-surface) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-docked-summary > :first-child { background-color: var(--oe-surface) !important; } /* ------------------------------------------------------------------ */ /* Multi-GroupBy header (top-left corner cell): the light theme paints */ /* a diagonal split with two LIGHT tones (#fff / #f5f5f5) — in dark */ /* mode use two dark tones instead (top-right half = column header */ /* surface, bottom-left half slightly elevated for the same subtle */ /* diagonal split) */ /* ------------------------------------------------------------------ */ body.oe-theme-dark div.x-column-header.header-multiple-groupbys.x-column-header-align-left.x-box-item.x-column-header-default.x-unselectable.x-column-header-first > div { background-image: linear-gradient(to bottom left, var(--oe-surface), var(--oe-surface) 50%, var(--oe-elevated) 50%, var(--oe-elevated)) !important; } /* ------------------------------------------------------------------ */ /* "Tipp des Tages" dialog (XTipOfTheDay) */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .xtipDialog { background: var(--oe-elevated) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .xtipTitle, body.oe-theme-dark .xtipBody b { color: var(--oe-text-strong) !important; } body.oe-theme-dark .xtipBody { color: var(--oe-text-mid) !important; } body.oe-theme-dark .xtipEyebrow, body.oe-theme-dark .xtipCount, body.oe-theme-dark .xtipCheck { color: var(--oe-text-muted) !important; } body.oe-theme-dark .xtipCheck:hover { color: var(--oe-text-mid) !important; } body.oe-theme-dark .xtipClose { color: var(--oe-text-muted) !important; } body.oe-theme-dark .xtipClose:hover { background: var(--oe-hover) !important; color: var(--oe-text) !important; } /* Glühbirne: warme Soft-Töne auf dunkler Fläche */ body.oe-theme-dark .xtipBulb { background: linear-gradient(135deg, #3a2f1a, #3a2230) !important; color: #f2b84b !important; } body.oe-theme-dark kbd.xtip-key { background: var(--oe-surface) !important; border-color: var(--oe-input-border) !important; color: var(--oe-text) !important; } body.oe-theme-dark .xtipFoot { border-top-color: var(--oe-border) !important; } body.oe-theme-dark .xtipBtnGhost { background: var(--oe-elevated) !important; border-color: var(--oe-input-border) !important; color: var(--oe-text-mid) !important; } body.oe-theme-dark .xtipBtnGhost:hover { background: var(--oe-hover) !important; color: var(--oe-text) !important; } body.oe-theme-dark .xtipBtnPrimary { background: var(--oe-accent) !important; border-color: var(--oe-accent) !important; color: #fff !important; } body.oe-theme-dark .xtipBody .xtipInlineIcon { color: #f2b84b !important; } body.oe-theme-dark .ceHintPanel div { color: var(--oe-text-muted) !important; } /* ------------------------------------------------------------------ */ /* Causal-Discovery-Dialog (Redesign 2026, .cdConfig2026) */ /* */ /* Der Light-Look des Dialogs kommt aus Main.scss (Abschnitt */ /* "REDESIGN 2026 — Causal-Discovery-Dialog"): weiße Karte, Slate- */ /* Flächen, Teal-Akzente. Hier werden nur die Flächen/Textfarben auf */ /* die dunklen Variablen gemappt; die Set-Farben (Streifen, Punkte, */ /* Slot-Rahmen) kommen zur Laufzeit als Inline-Style und bleiben */ /* unangetastet. Teal/Amber funktionieren auf dunklem Grund. */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .cdConfig2026.x-window { background: var(--oe-surface) !important; border-color: var(--oe-border) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } body.oe-theme-dark .cdConfig2026 .x-window-header { background: var(--oe-surface) !important; border-bottom-color: var(--oe-border) !important; } body.oe-theme-dark .cdConfig2026 .x-window-header .x-title-text { color: var(--oe-text-strong) !important; } body.oe-theme-dark .cdConfig2026 .x-window-header .cdHdFile { color: var(--oe-text-muted) !important; } body.oe-theme-dark .cdConfig2026 .x-window-body, body.oe-theme-dark .cdConfig2026 .cdFormCol { background: var(--oe-surface) !important; } /* linke Leiste */ body.oe-theme-dark .cdConfig2026 .cdSideRail { background: var(--oe-sidebar); border-right-color: var(--oe-border); } body.oe-theme-dark .cdConfig2026 .cdRailTitle { color: var(--oe-text-strong); } body.oe-theme-dark .cdConfig2026 .cdRailHint, body.oe-theme-dark .cdConfig2026 .cdRailFoot, body.oe-theme-dark .cdConfig2026 .cdRailEmpty, body.oe-theme-dark .cdConfig2026 .cdSetName, body.oe-theme-dark .cdConfig2026 .cdSetCount, body.oe-theme-dark .cdConfig2026 .cdSetUsage { color: var(--oe-text-dim); } body.oe-theme-dark .cdConfig2026 .cdRailEmpty { border-color: var(--oe-input-border); } body.oe-theme-dark .cdConfig2026 .cdSetCard { background: var(--oe-elevated); border-color: var(--oe-border); } body.oe-theme-dark .cdConfig2026 .cdSetCard:hover { border-color: #4A8686; } body.oe-theme-dark .cdConfig2026 .cdSetCard.cdActive { background: rgba(88, 153, 153, 0.15); border-color: #589999; } body.oe-theme-dark .cdConfig2026 .cdChip { background: var(--oe-hover); color: var(--oe-text-mid); } body.oe-theme-dark .cdConfig2026 .cdSetEmptyTxt { color: var(--oe-text-muted); } /* Formular */ body.oe-theme-dark .cdConfig2026 .cdFormCol .x-form-item-label, body.oe-theme-dark .cdConfig2026 .cdFormCol .x-form-item-label-inner { color: var(--oe-text) !important; } body.oe-theme-dark .cdConfig2026 .cdFormCol .cdSmallLabel, body.oe-theme-dark .cdConfig2026 .cdFormCol .cdSmallLabel .x-form-item-label-inner, body.oe-theme-dark .cdConfig2026 .cdLabelOptional { color: var(--oe-text-dim) !important; } body.oe-theme-dark .cdConfig2026 .cdFormCol input.x-form-text, body.oe-theme-dark .cdConfig2026 .cdFormCol textarea.x-form-text { background: var(--oe-elevated); border-color: var(--oe-input-border); color: var(--oe-text); } body.oe-theme-dark .cdConfig2026 .cdFormCol .x-item-disabled input.x-form-text { background: var(--oe-row-alt); border-color: var(--oe-border); color: var(--oe-text-dim); } body.oe-theme-dark .cdConfig2026 a.cdIconBtn, body.oe-theme-dark .cdConfig2026 a.cdPillBtn { background: var(--oe-elevated) !important; border-color: var(--oe-input-border) !important; } body.oe-theme-dark .cdConfig2026 a.cdPillBtn .x-btn-inner { color: var(--oe-text-mid) !important; } /* Frage-Block: dunkle Blau-Tönung statt Blue-Soft */ body.oe-theme-dark .cdConfig2026 .cdQuestionBlock { background: rgba(91, 156, 246, 0.10); border-color: rgba(91, 156, 246, 0.35); } body.oe-theme-dark .cdConfig2026 .cdEyebrow { color: var(--oe-accent-light); } body.oe-theme-dark .cdConfig2026 .cdSlotLead { color: var(--oe-text-mid); } body.oe-theme-dark .cdConfig2026 .cdSlotLabel { color: var(--oe-text-strong); } /* Slots */ body.oe-theme-dark .cdConfig2026 .cdSlot.cdEmpty, body.oe-theme-dark .cdConfig2026 .cdSlot.cdRequiredEmpty { background: var(--oe-row-alt); border-color: var(--oe-input-border); } body.oe-theme-dark .cdConfig2026 .cdSlot.cdRequiredEmpty { border-color: #C29645; } body.oe-theme-dark .cdConfig2026 .cdSlot.cdFilled { background: var(--oe-elevated); } body.oe-theme-dark .cdConfig2026 .cdSlotTitle { color: var(--oe-text-dim); } body.oe-theme-dark .cdConfig2026 .cdSlot.cdFilled .cdSlotTitle { color: var(--oe-text-strong); } body.oe-theme-dark .cdConfig2026 .cdSlotSub { color: var(--oe-text-dim); } body.oe-theme-dark .cdConfig2026 .cdSlotAction { color: var(--oe-accent-light); } body.oe-theme-dark .cdConfig2026 .cdSlotHelp { background: var(--oe-elevated); border-color: var(--oe-border); color: var(--oe-text-dim); } /* Zeitfenster */ body.oe-theme-dark .cdConfig2026 .cdTimeTitle { color: var(--oe-text-strong); } body.oe-theme-dark .cdConfig2026 .cdTimeSentence, body.oe-theme-dark .cdConfig2026 .cdBlindExplain { color: var(--oe-text-dim); } body.oe-theme-dark .cdConfig2026 .cdTimeSentence b { color: var(--oe-text-mid); } body.oe-theme-dark .cdConfig2026 .cdTimeBar { border-color: var(--oe-border); } body.oe-theme-dark .cdConfig2026 .cdTimeSearch { background: rgba(91, 156, 246, 0.20); } body.oe-theme-dark .cdConfig2026 .cdTimeSearch .cdBarHead, body.oe-theme-dark .cdConfig2026 .cdTimeSearch .cdBarSub { color: var(--oe-accent-light); } body.oe-theme-dark .cdConfig2026 .cdSigRange, body.oe-theme-dark .cdConfig2026 .cdSigRow .x-form-type-checkbox { accent-color: var(--oe-accent); } body.oe-theme-dark .cdConfig2026 .cdTimeBlind { background: repeating-linear-gradient(135deg, var(--oe-hover) 0 6px, var(--oe-row-alt) 6px 12px); border-left-color: var(--oe-text-muted); } body.oe-theme-dark .cdConfig2026 .cdTimeBlind .cdBarHead, body.oe-theme-dark .cdConfig2026 .cdTimeBlind .cdBarSub { color: var(--oe-text-dim); } /* Signifikanz + Verfeinerung */ body.oe-theme-dark .cdConfig2026 .cdSigRow { border-top-color: var(--oe-border); } body.oe-theme-dark .cdConfig2026 .cdSigTitle, body.oe-theme-dark .cdConfig2026 .cdSigVal { color: var(--oe-text-strong); } body.oe-theme-dark .cdConfig2026 .cdSigHint { color: var(--oe-text-dim); } body.oe-theme-dark .cdConfig2026 .cdSigRow .x-form-cb-label { color: var(--oe-text-mid) !important; } body.oe-theme-dark .cdConfig2026 .cdAdvanced { border-color: var(--oe-border); } body.oe-theme-dark .cdConfig2026 .cdAdvHead { background: var(--oe-row-alt); } body.oe-theme-dark .cdConfig2026 .cdAdvTitle { color: var(--oe-text-strong); } body.oe-theme-dark .cdConfig2026 .cdAdvStatus, body.oe-theme-dark .cdConfig2026 .cdAdvLead { color: var(--oe-text-dim); } body.oe-theme-dark .cdConfig2026 .cdAdvToggle { color: #68CCC6; } body.oe-theme-dark .cdConfig2026 .cdAdvLabel span:first-child { color: var(--oe-text); } /* Fußzeile */ body.oe-theme-dark .cdConfig2026 .x-toolbar-footer { background: var(--oe-sidebar) !important; border-top-color: var(--oe-border) !important; } body.oe-theme-dark .cdConfig2026 a.cdGhostBtn { background: var(--oe-elevated) !important; border-color: var(--oe-input-border) !important; } body.oe-theme-dark .cdConfig2026 a.cdGhostBtn .x-btn-inner { color: var(--oe-text) !important; } body.oe-theme-dark .cdConfig2026 a.cdGhostBtn:hover, body.oe-theme-dark .cdConfig2026 a.cdPillBtn:hover { background: var(--oe-hover) !important; } body.oe-theme-dark .cdConfig2026 a.cdPrimaryBtn { background: var(--oe-accent) !important; border-color: var(--oe-accent) !important; } body.oe-theme-dark .cdConfig2026 a.cdPrimaryBtn:hover { background: var(--oe-accent-light) !important; border-color: var(--oe-accent-light) !important; } body.oe-theme-dark .cdConfig2026 a.cdPrimaryBtn.x-btn-disabled { background: var(--oe-hover) !important; border-color: var(--oe-hover) !important; } body.oe-theme-dark .cdConfig2026 .cdStatusMissing { color: #f26d8d; } body.oe-theme-dark .cdConfig2026 .cdStatusReady { color: #68CCC6; } /* Popover (hängt am , daher eigener Scope) */ body.oe-theme-dark div.cdSetPopover { background: var(--oe-elevated); border-color: var(--oe-input-border); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); } body.oe-theme-dark div.cdSetPopover .cdPopTitle, body.oe-theme-dark div.cdSetPopover .cdPopName, body.oe-theme-dark div.cdSetPopover .cdPopEmpty, body.oe-theme-dark div.cdSetPopover .cdPopClear { color: var(--oe-text-dim); } body.oe-theme-dark div.cdSetPopover .cdPopSum { color: var(--oe-text-strong); } body.oe-theme-dark div.cdSetPopover .cdPopItem:hover { background: rgba(88, 153, 153, 0.15); } body.oe-theme-dark div.cdSetPopover .cdPopClear { border-top-color: var(--oe-border); } body.oe-theme-dark div.cdSetPopover .cdPopClear:hover { color: #f26d8d; } /* Fortschrittsfenster (.cdProgress2026): Chrome kommt über .cdConfig2026, die Log-Konsole ist ohnehin dunkel — nur die Statuszeile anpassen */ body.oe-theme-dark .cdProgress2026 .cdProgressHint { color: var(--oe-text-strong); } body.oe-theme-dark .cdProgress2026 .cdProgressConsole textarea.x-form-text { background: #0f1115; border: 1px solid var(--oe-border); } /* ------------------------------------------------------------------ */ /* Relative Zeitachse (Redesign 2026, .rtConfig2026) */ /* Fenster-Chrome kommt über die geteilten .cdConfig2026-Regeln oben. */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .rtConfig2026 .rtSubtitle, body.oe-theme-dark .rtConfig2026 .rtScopeHint, body.oe-theme-dark .rtConfig2026 .rtOccTitle, body.oe-theme-dark .rtConfig2026 .rtOccHint, body.oe-theme-dark .rtConfig2026 .rtModeHint, body.oe-theme-dark .rtConfig2026 .rtRowLabel, body.oe-theme-dark .rtConfig2026 .rtPreviewTitle, body.oe-theme-dark .rtConfig2026 .rtCbMuted, body.oe-theme-dark .rtConfig2026 .x-toolbar-footer .x-form-item-label, body.oe-theme-dark .rtConfig2026 .x-toolbar-footer .x-form-item-label-inner, body.oe-theme-dark .rtConfig2026 .x-form-item-label, body.oe-theme-dark .rtConfig2026 .x-form-item-label-inner { color: var(--oe-text-dim) !important; } body.oe-theme-dark .rtConfig2026 .rtModeTitle, body.oe-theme-dark .rtConfig2026 .rtOccLabel, body.oe-theme-dark .rtConfig2026 .rtAdvPanel .x-form-cb-label { color: var(--oe-text) !important; } body.oe-theme-dark .rtConfig2026 .x-form-trigger-wrap { background: var(--oe-elevated); border-color: var(--oe-input-border) !important; } body.oe-theme-dark .rtConfig2026 input.x-form-text { color: var(--oe-text); } body.oe-theme-dark .rtConfig2026 .x-item-disabled .x-form-trigger-wrap { background: var(--oe-row-alt); } body.oe-theme-dark .rtConfig2026 .rtModeCard { border-color: var(--oe-border); background: var(--oe-elevated); } body.oe-theme-dark .rtConfig2026 .rtModeCard:hover { border-color: #4A8686; } body.oe-theme-dark .rtConfig2026 .rtModeCard.rtModeDisabled:hover { border-color: var(--oe-border); } body.oe-theme-dark .rtConfig2026 .rtRadio { border-color: var(--oe-text-muted); } /* Karten: dunkle Teal-/Amber-Tönungen statt der hellen Pastellflächen */ body.oe-theme-dark .rtConfig2026 .rtCardMeasure { background: rgba(88, 153, 153, 0.12); border-color: rgba(88, 153, 153, 0.35); } body.oe-theme-dark .rtConfig2026 .rtEyebrowMeasure { color: #68CCC6; } body.oe-theme-dark .rtConfig2026 .rtCardRef { background: rgba(255, 188, 62, 0.10); border-color: rgba(255, 188, 62, 0.30); } body.oe-theme-dark .rtConfig2026 .rtEyebrowRef { color: #E8A33D; } body.oe-theme-dark .rtConfig2026 .rtOpBubble { background: var(--oe-elevated); border-color: var(--oe-input-border); color: var(--oe-text-dim); } body.oe-theme-dark .rtConfig2026 .rtOccRow:hover { background: var(--oe-hover); } body.oe-theme-dark .rtConfig2026 .rtPreviewCard { background: var(--oe-row-alt); border-color: var(--oe-border); } /* Vorschau-SVG: gedimmte Ticks/Achsen auf dunklem Grund abdunkeln */ body.oe-theme-dark .rtConfig2026 .rtPreviewCard svg .rtSvgAxis { stroke: var(--oe-input-border); } body.oe-theme-dark .rtConfig2026 .rtPreviewCard svg .rtSvgAxisHead { fill: var(--oe-input-border); } body.oe-theme-dark .rtConfig2026 .rtPreviewCard svg rect[fill="#C7CDD3"] { fill: #3a4150; } body.oe-theme-dark .rtConfig2026 .rtPreviewCard svg rect[fill="#E6CFA6"] { fill: #5c4d2e; } body.oe-theme-dark .rtConfig2026 .rtPreviewCard svg .rtSvgDistLabel { fill: #68CCC6; } body.oe-theme-dark .rtConfig2026 .rtAdvToggle { color: var(--oe-accent-light); } body.oe-theme-dark .rtConfig2026 .rtAdvPanel { background: var(--oe-row-alt); border-color: var(--oe-border); } body.oe-theme-dark .rtConfig2026 .rtSummary { background: rgba(91, 156, 246, 0.10); border-color: rgba(91, 156, 246, 0.35); color: var(--oe-text); } /* Zeitachse unter dem Zeitfenster-Balken (cdConfig2026) */ body.oe-theme-dark .cdConfig2026 .cdTimeAxis::before { border-top-color: var(--oe-text-muted); } body.oe-theme-dark .cdConfig2026 .cdTimeAxisHead { border-left-color: var(--oe-text-muted); } body.oe-theme-dark .cdConfig2026 .cdTimeAxisLabel { color: var(--oe-text-dim); } /* editierbares Signifikanz-Eingabefeld neben dem Slider (cdConfig2026) */ body.oe-theme-dark .cdConfig2026 input.cdSigVal { background: var(--oe-elevated); border-color: var(--oe-input-border); color: var(--oe-text-strong); } body.oe-theme-dark .cdConfig2026 input.cdSigVal:disabled { background: var(--oe-row-alt); border-color: var(--oe-border); color: var(--oe-text-dim); }