/* === Minimal app overrides — all colors from DxDS Design System tokens === */ :root { color-scheme: light dark; --app-radius-sm: 6px; --app-radius-md: 8px; --app-radius-lg: 12px; --app-radius-pill: 999px; --app-space-1: 4px; --app-space-2: 8px; --app-space-3: 12px; --app-space-4: 16px; --app-space-5: 20px; --app-space-6: 24px; --app-modal-scrim: color-mix(in srgb, var(--dxds-color-surface-neutral-deep-rest) 58%, transparent); --app-shadow-modal: 0 18px 48px color-mix(in srgb, var(--dxds-color-surface-neutral-deep-rest) 28%, transparent); /* PDF overlay — light mode defaults */ --pov-accent: #0078d4; --pov-accent-dark: #005a9e; --pov-accent-bg: rgba(0, 120, 212, 0.13); --pov-accent-bg-faint: rgba(0, 120, 212, 0.06); --pov-accent-bg-hover: rgba(0, 120, 212, 0.26); --pov-label-color: #185fa5; --pov-label-bg: rgba(255, 255, 255, 0.9); --pov-foreign-border: #aaa; --pov-foreign-bg: rgba(150, 150, 150, 0.10); --pov-foreign-label-color: #666; } /* PDF overlay — dark mode overrides */ [data-color-scheme="dark"] { --pov-accent: #479ef5; --pov-accent-dark: #6db0f7; --pov-accent-bg: rgba(71, 158, 245, 0.18); --pov-accent-bg-faint: rgba(71, 158, 245, 0.08); --pov-accent-bg-hover: rgba(71, 158, 245, 0.32); --pov-label-color: #a8d4ff; --pov-label-bg: rgba(30, 30, 30, 0.88); --pov-foreign-border: #555; --pov-foreign-bg: rgba(100, 100, 100, 0.12); --pov-foreign-label-color: #999; } /* =================================================================== DARK MODE — Override DX design tokens at root level. CSS variables cascade by inheritance — setting on propagates to ALL children including portal elements (DxPopup) and scoped Blazor CSS, without needing !important or fighting specificity. Key chain: --dxbl-popup-bg → --dxbl-popups-bg → --dxds-color-surface-neutral-default-rest On-surface: --dxds-color-surface-neutral-default-on-surface-rest → --dxds-neutral-10 = #fffffe (ALWAYS white) =================================================================== */ [data-color-scheme="dark"] { /* Surface tokens — on-surface-rest uses --dxds-neutral-10 which is always #fffffe in accent CSS */ --dxds-color-surface-neutral-default-on-surface-rest: #1e1e1e; --dxds-color-surface-neutral-default-on-surface-hovered: #252525; --dxds-color-surface-neutral-default-rest: #1f1f1f; --dxds-color-surface-neutral-subdued-rest: #161616; /* DxPopup component tokens — used by .dxbl-modal-content, .dxbl-modal-header, .dxbl-modal-body */ --dxbl-popups-bg: #1f1f1f; --dxbl-popup-bg: #1f1f1f; --dxbl-popup-header-bg: #252525; --dxbl-popup-body-bg: #1f1f1f; --dxbl-popup-footer-bg: #252525; --dxbl-popup-color: #e8e8e8; --dxbl-popup-header-color: #e8e8e8; --dxbl-popup-body-color: #e8e8e8; --dxbl-popup-footer-color: #e8e8e8; --dxbl-popup-border-color: #333; } /* Fallback class overrides for DxPopup portal — in case token cascade is insufficient */ [data-color-scheme="dark"] .dxbl-modal-content { background-color: #1f1f1f !important; color: #e8e8e8 !important; border-color: #333 !important; } [data-color-scheme="dark"] .dxbl-modal-header, [data-color-scheme="dark"] .dxbl-popup-header { background-color: #252525 !important; color: #e8e8e8 !important; border-bottom-color: #333 !important; } [data-color-scheme="dark"] .dxbl-modal-title { color: #e8e8e8 !important; } [data-color-scheme="dark"] .dxbl-modal-body { background-color: #1f1f1f !important; color: #e8e8e8 !important; } [data-color-scheme="dark"] .dxbl-modal-footer { background-color: #252525 !important; border-top-color: #333 !important; } /* DxContextMenu dark */ [data-color-scheme="dark"] .dxbl-menu, [data-color-scheme="dark"] .dxbl-menu-item-content { background-color: #252525 !important; color: #e8e8e8 !important; border-color: #333 !important; } [data-color-scheme="dark"] .dxbl-menu-item:hover > .dxbl-menu-item-content { background-color: #333 !important; } /* Coversheet panel — on-surface-rest token equals neutral-10 in both modes, so it stays white. Override explicitly for dark scheme. */ [data-color-scheme="dark"] .coversheet-panel, [data-color-scheme="dark"] .cs-panel-header, [data-color-scheme="dark"] .cs-panel-body, [data-color-scheme="dark"] .cs-section { background-color: #1e1e1e !important; color: #e8e8e8 !important; } [data-color-scheme="dark"] .cs-label { color: #a0a0a0 !important; } [data-color-scheme="dark"] .cs-value { color: #e8e8e8 !important; } [data-color-scheme="dark"] .cs-section-title { color: #e8e8e8 !important; } [data-color-scheme="dark"] .cs-panel-id { color: #888 !important; } [data-color-scheme="dark"] .cs-panel-title { color: #e8e8e8 !important; } /* DxFormLayout inside coversheet */ [data-color-scheme="dark"] .dxbl-fl .dxbl-fl-body, [data-color-scheme="dark"] .dxbl-fl-root { background-color: #1c1c1c !important; color: #e8e8e8 !important; } /* Environment dropdown — force visible text in dark mode */ [data-color-scheme="dark"] .environment-dropdown, [data-color-scheme="dark"] .environment-dropdown .dxbl-btn-text, [data-color-scheme="dark"] .environment-dropdown .dxbl-text { color: #e8e8e8 !important; } * { box-sizing: border-box; } html, body { margin: 0; width: 100vw; height: 100vh; background: var(--dxds-color-surface-neutral-subdued-rest); color: var(--dxds-color-content-neutral-default-rest); font-family: "Segoe UI", system-ui, sans-serif; } canvas { width: 100%; height: 100%; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--dxds-color-border-success-default-rest); } .invalid { outline: 1px solid var(--dxds-color-border-danger-default-rest); } .validation-message { color: var(--dxds-color-content-danger-default-rest); } #blazor-error-ui { background: var(--dxds-color-surface-warning-subdued-rest); bottom: 0; border-top: 1px solid var(--dxds-color-border-warning-default-rest); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } pre, div.error { background-color: var(--dxds-color-surface-neutral-deep-rest); padding: 1rem; border-radius: 3px; border: 1px solid var(--dxds-color-border-neutral-default-rest); margin: 1rem 0; max-height: 250px; } pre.fixed, div.error.fixed { height: 200px; } code { background-color: var(--dxds-color-surface-neutral-deep-rest); display: inline-block; padding: 0px 6px; border-radius: 3px; border: 1px solid var(--dxds-color-border-neutral-default-rest); } .cs-row { border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest) !important; padding-top: 5px; padding-bottom: 5px; } .cs-row:last-child { border-bottom: none !important; } @keyframes spin { to { transform: rotate(360deg); } } .app-page { min-height: 100vh; background: var(--dxds-color-surface-neutral-subdued-rest); color: var(--dxds-color-content-neutral-default-rest); } .app-panel { background: var(--dxds-color-surface-neutral-default-on-surface-rest); border: 1px solid var(--dxds-color-border-neutral-default-rest); border-radius: var(--app-radius-md); } .app-muted { color: var(--dxds-color-content-neutral-subdued-rest); } .app-section-title { color: var(--dxds-color-content-neutral-default-rest); font-size: 0.86rem; font-weight: 700; } .app-metadata { color: var(--dxds-color-content-neutral-subdued-rest); font-size: 0.76rem; }