/* * 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 */ /* ------------------------------------------------------------------ */ body.oe-theme-dark .x-btn-default-small, body.oe-theme-dark .x-btn-default-toolbar-small { 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, body.oe-theme-dark .x-btn-over.x-btn-default-toolbar-small { background-color: var(--oe-hover) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark .x-btn-pressed.x-btn-default-small, body.oe-theme-dark .x-btn-menu-active.x-btn-default-small, body.oe-theme-dark .x-btn-pressed.x-btn-default-toolbar-small, body.oe-theme-dark .x-btn-menu-active.x-btn-default-toolbar-small { 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; } 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; } /* ------------------------------------------------------------------ */ /* 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; } /* ------------------------------------------------------------------ */ /* XAT (Admin-Tool) — Ergänzungen */ /* */ /* Die XAT-Light-Regeln in Main.scss (Abschnitt "REDESIGN 2026 — XAT") */ /* sind über body.xadmintool gescoped und teils sehr spezifisch */ /* (:not-Ketten). Die Overrides hier tragen deshalb */ /* body.oe-theme-dark.xadmintool und gewinnen über die Spezifität, */ /* unabhängig von der Stylesheet-Ladereihenfolge. */ /* ------------------------------------------------------------------ */ /* Grundflächen */ body.oe-theme-dark.xadmintool { background-color: var(--oe-bg) !important; } body.oe-theme-dark.xadmintool.x-body-loginpage { 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; } body.oe-theme-dark.xadmintool div#login-xplain-footer { color: var(--oe-text-muted) !important; } body.oe-theme-dark.xadmintool .x-panel-header-default { background: var(--oe-surface) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark.xadmintool .x-panel-header-default .x-title-text { color: var(--oe-text) !important; } /* Collapse/Expand-Pfeile in Panel-Headern (im hellen Modus via xplainext.css dunkel gefaerbt) — im Dark Mode wieder aufhellen */ body.oe-theme-dark.xadmintool .x-panel-header .x-tool-tool-el { color: var(--oe-text-muted) !important; } body.oe-theme-dark.xadmintool .x-toolbar-default:not(.x-toolbar-footer) { background: var(--oe-surface) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark.xadmintool .x-toolbar:not(.x-toolbar-footer) .x-btn:not(.defaultDialogBtn):hover, body.oe-theme-dark.xadmintool .x-toolbar:not(.x-toolbar-footer) .x-btn:not(.defaultDialogBtn).x-btn-focus { background: var(--oe-hover) !important; } body.oe-theme-dark.xadmintool .x-toolbar .x-btn .x-btn-icon-el { color: var(--oe-text-dim) !important; } /* Das weiße Alt-Logo braucht im Dark Mode keine Invertierung */ body.oe-theme-dark.xadmintool .xplainHeader img { filter: none !important; opacity: 0.9; } /* Grids */ body.oe-theme-dark.xadmintool .x-grid-header-ct, body.oe-theme-dark.xadmintool .x-column-header, body.oe-theme-dark.xadmintool .x-column-header-inner { background: var(--oe-surface) !important; } body.oe-theme-dark.xadmintool .x-column-header { border-bottom: 1px solid var(--oe-border) !important; } body.oe-theme-dark.xadmintool .x-column-header-text-inner { color: var(--oe-text-muted) !important; } body.oe-theme-dark.xadmintool .x-grid-item { color: var(--oe-text) !important; } body.oe-theme-dark.xadmintool .x-grid-row .x-grid-cell { border-bottom: 1px solid var(--oe-border-soft) !important; } body.oe-theme-dark.xadmintool .x-grid-row-over .x-grid-cell { background-color: var(--oe-hover) !important; } body.oe-theme-dark.xadmintool .x-grid-row-selected .x-grid-cell { background-color: var(--oe-selected) !important; } /* Formularfelder & Fieldsets */ body.oe-theme-dark.xadmintool .x-form-item-label, body.oe-theme-dark.xadmintool .x-form-cb-label { color: var(--oe-text-dim) !important; } body.oe-theme-dark.xadmintool .x-fieldset { border-color: var(--oe-border) !important; background: var(--oe-surface) !important; } body.oe-theme-dark.xadmintool .x-fieldset-header .x-fieldset-header-text { color: var(--oe-text-muted) !important; } /* Fenster-Header (alle Fenster) */ body.oe-theme-dark.xadmintool .x-window-header .x-title-text { color: var(--oe-text) !important; } body.oe-theme-dark.xadmintool .x-window-header .x-btn:hover { background: var(--oe-hover) !important; box-shadow: 0 0 0 3px var(--oe-hover) !important; } body.oe-theme-dark.xadmintool .x-window-header .x-btn .x-btn-icon-el, body.oe-theme-dark.xadmintool .x-window-header .x-btn .x-btn-inner { color: var(--oe-text-dim) !important; } body.oe-theme-dark.xadmintool .x-window-header .x-btn:hover .x-btn-icon-el, body.oe-theme-dark.xadmintool .x-window-header .x-btn:hover .x-btn-inner { color: var(--oe-text-strong) !important; } body.oe-theme-dark.xadmintool .x-window-header .x-tool:hover { background: var(--oe-hover) !important; box-shadow: 0 0 0 3px var(--oe-hover) !important; } /* Canvas-Fenster: Header-Pille + Karte */ body.oe-theme-dark.xadmintool .table-window .x-window-header, body.oe-theme-dark.xadmintool .healthWidget .x-window-header { background: rgba(28, 32, 41, 0.92) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark.xadmintool .table-window .x-window-body, body.oe-theme-dark.xadmintool .healthWidget .x-window-body, body.oe-theme-dark.xadmintool .table-window .x-window-body-default, body.oe-theme-dark.xadmintool .healthWidget .x-window-body-default { background: var(--oe-surface) !important; border-color: var(--oe-border) !important; color: var(--oe-text) !important; } body.oe-theme-dark.xadmintool .table-isnt-part-of-tree .x-window-header { background: var(--oe-elevated) !important; } /* Dialoge: Karte mit angedocktem Header */ body.oe-theme-dark.xadmintool .x-window:not(.table-window):not(.healthWidget):not(.x-message-box):not(.x-toast) { background: var(--oe-surface) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark.xadmintool .x-window:not(.table-window):not(.healthWidget):not(.x-message-box):not(.x-toast) .x-window-header { background: var(--oe-surface) !important; border-bottom: 1px solid var(--oe-border) !important; } body.oe-theme-dark.xadmintool .x-window:not(.table-window):not(.healthWidget):not(.x-message-box):not(.x-toast) .x-window-body, body.oe-theme-dark.xadmintool .x-window:not(.table-window):not(.healthWidget):not(.x-message-box):not(.x-toast) .x-panel-body { background: var(--oe-surface) !important; color: var(--oe-text) !important; } /* Dialog-Fußzeilen & Buttons */ body.oe-theme-dark.xadmintool .x-toolbar-footer { background: var(--oe-surface) !important; border-top: 1px solid var(--oe-border) !important; } body.oe-theme-dark.xadmintool a.defaultDialogBtn, body.oe-theme-dark.xadmintool .x-toolbar-footer .x-btn { background: var(--oe-elevated) !important; border: 1px solid var(--oe-input-border) !important; } body.oe-theme-dark.xadmintool a.defaultDialogBtn .x-btn-inner, body.oe-theme-dark.xadmintool a.defaultDialogBtn span.x-fa, body.oe-theme-dark.xadmintool .x-toolbar-footer .x-btn .x-btn-inner, body.oe-theme-dark.xadmintool .x-toolbar-footer .x-btn .x-btn-icon-el { color: var(--oe-text-mid) !important; } body.oe-theme-dark.xadmintool a.defaultDialogBtn.x-btn-over, body.oe-theme-dark.xadmintool .x-toolbar-footer .x-btn.x-btn-over { background: var(--oe-hover) !important; } body.oe-theme-dark.xadmintool .x-toolbar-footer .x-btn:last-child { background: var(--oe-accent) !important; border-color: var(--oe-accent) !important; } body.oe-theme-dark.xadmintool .x-toolbar-footer .x-btn:last-child .x-btn-inner, body.oe-theme-dark.xadmintool .x-toolbar-footer .x-btn:last-child .x-btn-icon-el, body.oe-theme-dark.xadmintool .x-toolbar-footer .x-btn:last-child span.x-fa { color: #ffffff !important; } /* Canvas-Punktraster global auf dem Body (siehe Main.scss, XAT-Abschnitt) */ body.oe-theme-dark.xadmintool { 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; } body.oe-theme-dark.xadmintool #xWestPanel { background: var(--oe-sidebar) !important; border-right: 1px solid var(--oe-border) !important; } /* Startbildschirm */ body.oe-theme-dark.xadmintool .adminStartTilesArea > .x-panel-bodyWrap > .x-panel-body, body.oe-theme-dark.xadmintool .adminStartTilesArea > .x-panel-body { background: transparent !important; } body.oe-theme-dark.xadmintool .gridPanelElement, body.oe-theme-dark.xadmintool .gridPanelElement .x-autocontainer-outerCt, body.oe-theme-dark.xadmintool .gridPanelElement > div > div > div, body.oe-theme-dark.xadmintool .gridPanelElement .x-panel-body-default { background: var(--oe-surface) !important; } body.oe-theme-dark.xadmintool .gridPanelElement { border-color: var(--oe-border) !important; } body.oe-theme-dark.xadmintool .gridPanelElement h1 { color: var(--oe-text) !important; } body.oe-theme-dark.xadmintool .gridPanelElement .x-panel-body { color: var(--oe-text-dim) !important; } /* Health-Dashboard */ body.oe-theme-dark.xadmintool .fixedHealthBar { background: var(--oe-bg) !important; border-color: var(--oe-bg) !important; } body.oe-theme-dark.xadmintool div.fixedHealthBar div, body.oe-theme-dark.xadmintool .fixedHealthBar .importInfo { background: var(--oe-surface) !important; border-color: var(--oe-border) !important; color: var(--oe-text-dim) !important; } /* Login */ body.oe-theme-dark.xadmintool .loginForm, body.oe-theme-dark.xadmintool .loginForm a { background: var(--oe-surface) !important; border-color: var(--oe-input-border) !important; } body.oe-theme-dark.xadmintool .loginForm a span { color: var(--oe-text-mid) !important; } body.oe-theme-dark.xadmintool .loginForm a:hover, body.oe-theme-dark.xadmintool .loginForm a:focus { background: var(--oe-hover) !important; } body.oe-theme-dark.xadmintool .loginForm a:last-of-type { background: var(--oe-accent) !important; border-color: var(--oe-accent) !important; } body.oe-theme-dark.xadmintool .loginForm a:last-of-type span { color: #ffffff !important; } /* "New or Load"-Dialog */ body.oe-theme-dark.xadmintool .neworload-window a.x-btn { background: var(--oe-elevated) !important; border-color: var(--oe-input-border) !important; } body.oe-theme-dark.xadmintool .neworload-window a.x-btn.x-btn-over { background: var(--oe-selected) !important; border-color: var(--oe-accent) !important; } body.oe-theme-dark.xadmintool .neworload-window a.x-btn span { color: var(--oe-text-mid) !important; } body.oe-theme-dark.xadmintool .neworload-window .title div { color: var(--oe-text) !important; } /* Baum-Icons */ body.oe-theme-dark.xadmintool .x-tree-icon, body.oe-theme-dark.xadmintool .x-tree-expander { color: var(--oe-text-dim) !important; } /* json-show-off-Tabellen (Health-Widgets) */ body.oe-theme-dark.xadmintool .genericjson th { background: var(--oe-elevated) !important; color: var(--oe-text-dim) !important; border-color: var(--oe-border) !important; } body.oe-theme-dark.xadmintool .genericjson td { background: var(--oe-surface) !important; color: var(--oe-text) !important; border-color: var(--oe-border) !important; }