/* ============================================================================ X Modern — selectable theme overlay (v9.16 — popup detail view: moderne kaart-layout) File: wwwroot/css/ProfixModern/profix-modern.css Selectors gematcht op de echte DevExpress-DOM (via DevTools-snippets). Instelbaar via attributen op (gezet door js/profix-theme.js): data-pfx-theme = "light" | "dark" data-pfx-accent = "orange" | "blue" | "green" | "purple" | "teal" data-pfx-density = "normal" | "compact" ============================================================================ */ /* 1. Base theme + font ------------------------------------------------------- */ @import url('/_content/DevExpress.Blazor.Themes/office-white.bs5.min.css'); @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap'); :root { /* Instelbaar via settings-paneel (profix-theme.js zet --pfx-font op ) */ --pfx-font: 'Figtree', 'Segoe UI', system-ui, sans-serif; } /* 2. Tokens + framework variables ------------------------------------------- */ :root { /* Vaste merk-kleuren */ --pfx-navy: #17406B; --pfx-navy-deep: #0F2E4D; /* Accent (preset: orange). Wordt overschreven door data-pfx-accent. */ --pfx-accent: #E8791E; --pfx-accent-hover: #d76c14; --pfx-accent-rgb: 232, 121, 30; /* Backwards-compat alias — oudere regels gebruiken --pfx-orange */ --pfx-orange: var(--pfx-accent); /* Oppervlakken & tekst (licht) */ --pfx-surface: #FFFFFF; /* kaarten, header, toolbar, grid */ --pfx-surface-2: #FBFCFE; /* sidebar */ --pfx-surface-3: #F7F9FC; /* grid-header, chips */ --pfx-hover: #F6F8FB; /* hover-vlakken */ --pfx-ink: #1C2A38; --pfx-muted: #64748B; --pfx-text-soft: #5A6675; --pfx-label: #8A96A5; --pfx-nav-text: #475569; --pfx-line: #E3E8EF; --pfx-line-soft: #EEF2F6; --pfx-card-line: #E7ECF3; --pfx-canvas: #EDEFF2; /* RGB 237 239 242 — basis-achtergrond overal */ --pfx-active: #EAF1F8; --pfx-heading: var(--pfx-navy); /* sectielabels, actieve tabs */ --pfx-heading-deep: var(--pfx-navy-deep); /* Dichtheid (preset: normal). Overschreven door data-pfx-density="compact". */ --pfx-card-gap: 16px; --pfx-card-pad: 2px 14px 12px; --pfx-cardhead-pad: 10px 2px 6px; --pfx-fl-item-pad: 2px; --pfx-fl-item-gap: 4px; --pfx-fl-gutter-y: 0.5rem; --pfx-grid-row-pad: 9px; --pfx-toolbar-pad: 9px 18px; --pfx-toolbar-h: 46px; --pfx-nav-row-pad: 5px; --pfx-content-pad: 14px; --bs-primary: var(--pfx-accent); --bs-primary-rgb: var(--pfx-accent-rgb); --bs-link-color: #17406B; --bs-link-color-rgb: 23, 64, 107; --bs-link-hover-color: var(--pfx-accent); --bs-border-radius: 10px; --bs-border-radius-sm: 8px; --bs-border-radius-lg: 14px; --bs-body-font-family: var(--pfx-font); --dxbl-btn-primary-bg: var(--pfx-accent); --dxbl-btn-primary-border-color: var(--pfx-accent); --dxbl-btn-primary-hover-bg: var(--pfx-accent-hover); --dxbl-btn-primary-hover-border-color: var(--pfx-accent-hover); --dxbl-border-radius: 10px; } /* 2a. Accent-presets (à la DevExpress Fluent) -------------------------------- */ html[data-pfx-accent="blue"] { --pfx-accent: #2F6FED; --pfx-accent-hover: #245CD0; --pfx-accent-rgb: 47, 111, 237; } html[data-pfx-accent="green"] { --pfx-accent: #2E9E6B; --pfx-accent-hover: #268A5C; --pfx-accent-rgb: 46, 158, 107; } html[data-pfx-accent="purple"] { --pfx-accent: #7C5CD6; --pfx-accent-hover: #6A4BC2; --pfx-accent-rgb: 124, 92, 214; } html[data-pfx-accent="teal"] { --pfx-accent: #14919B; --pfx-accent-hover: #0F7E87; --pfx-accent-rgb: 20, 145, 155; } /* 2b. Compacte dichtheid ------------------------------------------------------ */ html[data-pfx-density="compact"] { --pfx-card-gap: 10px; --pfx-card-pad: 2px 12px 8px; --pfx-cardhead-pad: 8px 2px 4px; --pfx-fl-item-pad: 1px; --pfx-fl-item-gap: 2px; --pfx-fl-gutter-y: 0.25rem; --pfx-grid-row-pad: 6px; --pfx-toolbar-pad: 6px 18px; --pfx-toolbar-h: 40px; --pfx-nav-row-pad: 3px; --pfx-content-pad: 10px; } /* 2c. Dark mode --------------------------------------------------------------- Overschrijft de oppervlak-/teksttokens; alle regels hieronder gebruiken die tokens, dus het grootste deel volgt vanzelf. Extra DX-specifieke overrides staan in sectie 11. */ html[data-pfx-theme="dark"] { color-scheme: dark; --pfx-surface: #1E2733; --pfx-surface-2: #19212C; --pfx-surface-3: #253040; --pfx-hover: #26313F; --pfx-ink: #E3E9F1; --pfx-muted: #93A1B3; --pfx-text-soft: #A7B4C4; --pfx-label: #8494A8; --pfx-nav-text: #B4C0CF; --pfx-line: #2B3646; --pfx-line-soft: #26303E; --pfx-card-line: #2B3646; --pfx-canvas: #141B24; --pfx-active: #22354B; --pfx-heading: #8FB8E4; --pfx-heading-deep: #C9DCF0; --bs-body-bg: #141B24; --bs-body-color: #E3E9F1; --bs-link-color: #8FB8E4; --bs-link-color-rgb: 143, 184, 228; } body, .dxbl-blazor { font-family: var(--pfx-font); color: var(--pfx-ink); } /* Form-controls erven het body-font niet vanzelf → Figtree expliciet op inputs, knoppen en DevExpress-editortekst. Bewust GEEN *-regel: dat sloopt de icon-fonts. */ input, textarea, select, button, .dxbl-text-edit-input, .dxbl-text, .dxbl-btn, .dxbl-edit { font-family: var(--pfx-font); } /* ALLEEN de ingebedde toolbar-editors (combobox "Tonen", zoekveld) gelijktrekken met de toolbar-knoppen (14px). */ .dxbl-toolbar-item-tmpl .dxbl-text-edit-input, .dxbl-toolbar-item-tmpl input { font-size: 14px !important; } /* 3a. Brand-regel: logo | accent-streep | klantnaam --------------------------- */ /* Header-vak boven de sidebar mag meegroeien met lange klantnamen (site.css pint dit op --profix-sidebar-width) */ .header .header-left-side { width: auto !important; min-width: var(--profix-sidebar-width, 260px) !important; max-width: none !important; flex-shrink: 0; } /* DOM (ProfixApplicationWindowTemplateComponent.razor): .header-logo-wrapper > .header-logo + span.header-tenant-name */ .header .header-logo-wrapper { display: flex !important; flex-direction: row; align-items: center; gap: 14px; min-width: 0; } .header .header-logo-wrapper .header-logo { flex: 0 0 auto; } .header .header-tenant-name { display: inline-flex !important; align-items: center; gap: 14px; margin: 0 !important; font-size: 14px; font-weight: 700; color: var(--pfx-heading) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; } .header .header-tenant-name::before { content: ""; flex: 0 0 auto; width: 3px; height: 24px; border-radius: 2px; background: var(--pfx-accent); } /* 3. Header — light bar ------------------------------------------------------ */ .header.navbar-dark, .header { background: var(--pfx-surface) !important; border-bottom: 1px solid var(--pfx-line) !important; color: var(--pfx-ink) !important; } .header .dxbl-btn, .header .dxbl-btn-standalone, .header a, .header .dxbl-text { color: var(--pfx-ink) !important; } .header .dxbl-btn:hover, .header .dxbl-btn-standalone:hover { background: var(--pfx-line-soft) !important; border-radius: 9px; } .xaf-detail-view-header { background: var(--pfx-surface) !important; border-bottom: 1px solid var(--pfx-line) !important; } /* Donker: navy logo-beeld leesbaar maken */ html[data-pfx-theme="dark"] .header .header-logo { filter: brightness(0) invert(0.92); } /* 4. Sidebar ----------------------------------------------------------------- */ .xaf-sidebar { background: var(--pfx-surface-2) !important; border-right: 1px solid var(--pfx-line); padding: 6px 2px; } /* Zoekveld (Filter...) — eigen vlak, zoals ontwerp 2a: wit, rand, radius 9px */ .xaf-sidebar .dxbl-text-edit, .xaf-sidebar .dxbl-text-box { background-color: var(--pfx-surface) !important; border: 1px solid var(--pfx-card-line) !important; border-radius: 9px !important; box-shadow: none !important; height: 36px; margin: 4px 10px 6px; } .xaf-sidebar .dxbl-text-edit:focus-within, .xaf-sidebar .dxbl-text-box:focus-within { border-color: var(--pfx-accent) !important; } .xaf-sidebar .dxbl-text-edit input, .xaf-sidebar input { background-color: transparent !important; color: var(--pfx-ink) !important; border: none !important; font-size: 13px !important; } .xaf-sidebar .dxbl-text-edit input::placeholder, .xaf-sidebar input::placeholder { color: #9AA6B3; } /* Zoek-icoon in het veld gedempt grijs */ .xaf-sidebar .dxbl-text-edit :is(svg, .dxbl-image) { color: #94A3B8 !important; opacity: 0.9; } /* Alle accordion-vlakken, randen en lijnen weg — met app-ID zodat dit óók wint van DevExpress-regels die na het theme laden */ #main-window-template-component .xaf-sidebar .xaf-navmenu, #main-window-template-component .xaf-sidebar .xaf-accordion, #main-window-template-component .xaf-sidebar .dxbl-accordion, #main-window-template-component .xaf-sidebar dxbl-accordion, #main-window-template-component .xaf-sidebar .dxbl-accordion-container, #main-window-template-component .xaf-sidebar .dxbl-accordion-items-container, #main-window-template-component .xaf-sidebar dxbl-group-control, #main-window-template-component .xaf-sidebar .dxbl-accordion-item, #main-window-template-component .xaf-sidebar .dxbl-group-header, #main-window-template-component .xaf-sidebar .dxbl-accordion-group-header, #main-window-template-component .xaf-sidebar .dxbl-group-body, #main-window-template-component .xaf-sidebar .dxbl-accordion-group-body, #main-window-template-component .xaf-sidebar .dxbl-accordion-item-content, #main-window-template-component .xaf-sidebar .dxbl-group-header .dxbl-btn-tool { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } /* DevExpress' zwarte ::before-overlay over elke rij volledig uitschakelen */ #main-window-template-component .xaf-sidebar div::before, #main-window-template-component .xaf-sidebar div::after { content: none !important; background: transparent !important; } /* Geen link-onderstreping */ .xaf-sidebar a, .xaf-sidebar a:hover, .xaf-sidebar .xaf-nav-link, .xaf-sidebar .xaf-nav-link span { text-decoration: none !important; } /* Rijen: afgerond, ruim, chevron rechts */ .xaf-sidebar .dxbl-group-header, .xaf-sidebar a.dxbl-accordion-item-content { border-radius: 9px; margin: 1px 6px; padding-top: var(--pfx-nav-row-pad); padding-bottom: var(--pfx-nav-row-pad); display: flex; align-items: center; } .xaf-sidebar .dxbl-group-header:hover, .xaf-sidebar a.dxbl-accordion-item-content:hover { background: var(--pfx-line-soft) !important; } .xaf-sidebar .dxbl-group-expand-btn { order: 99; margin-left: auto; opacity: 0.55; } /* Tekstgrootte (override op de 12px uit site.css) */ .xaf-sidebar .dxbl-accordion-item-text-container .dxbl-text, .xaf-sidebar .xaf-nav-link span { font-size: 13px !important; color: var(--pfx-nav-text); } /* Hoofdgroepen (indent 0) → sectielabels */ .xaf-sidebar dxbl-group-control[data-dx-style="--dxbl-accordion-item-indent:0"] > .dxbl-group-header { margin-top: 10px; padding: 2px 10px; min-height: 24px !important; } .xaf-sidebar dxbl-group-control[data-dx-style="--dxbl-accordion-item-indent:0"] > .dxbl-group-header:hover { background: transparent !important; } .xaf-sidebar dxbl-group-control[data-dx-style="--dxbl-accordion-item-indent:0"] > .dxbl-group-header .xaf-nav-link span { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px !important; font-weight: 700; color: var(--pfx-heading) !important; } .xaf-sidebar dxbl-group-control[data-dx-style="--dxbl-accordion-item-indent:0"] > .dxbl-group-header img.xaf-nav-menu-item-icon { display: none; } .xaf-sidebar dxbl-group-control[data-dx-style="--dxbl-accordion-item-indent:0"] > .dxbl-group-header .dxbl-group-expand-btn { opacity: 0.35; transform: scale(0.75); } /* Actief item — pill + accent-rand */ .xaf-sidebar a.dxbl-accordion-item-content.dxbl-active, .xaf-sidebar a[aria-selected="true"] { background: var(--pfx-active) !important; box-shadow: inset 3px 0 0 var(--pfx-accent) !important; } .xaf-sidebar a.dxbl-accordion-item-content.dxbl-active .xaf-nav-link span { color: var(--pfx-heading) !important; font-weight: 700; } /* 5. Toolbar ----------------------------------------------------------------- */ /* Alle acties links: rechtergroep (Refresh, Save, Save and Close) sluit aan bij de rest. :has() pakt de auto-marge af van elke container om die knoppen heen, waar DevExpress hem ook zet. */ .main-toolbar :is(.dxbl-toolbar, .dxbl-toolbar-content, [role="toolbar"]) { justify-content: flex-start !important; } /* Op de reorder-eenheid (.dxbl-btn-group) i.p.v. universeel *:has() — dat laatste is een van de duurste style-recalc-patronen en werd bij elke DOM-mutatie opnieuw geëvalueerd. profix-toolbar.js positioneert deze systeemknoppen bovendien zelf. */ .main-toolbar .dxbl-btn-group:has(> .dxbl-btn[data-action-name="Save"]), .main-toolbar .dxbl-btn-group:has(> .dxbl-btn[data-action-name="SaveAndClose"]), .main-toolbar .dxbl-btn-group:has(> .dxbl-btn[data-action-name="Refresh"]), .main-toolbar .dxbl-btn-group:has(.dxbl-btn[data-action-name="SaveAndClose"]) { margin-left: 0 !important; margin-inline-start: 0 !important; } .main-toolbar :is(.dxbl-toolbar-content, [role="toolbar"]) > *:empty { flex-grow: 0 !important; display: none !important; } .main-toolbar { background: var(--pfx-surface); border-bottom: 1px solid var(--pfx-line-soft); padding: var(--pfx-toolbar-pad); /* Vaste balkhoogte, onafhankelijk van of er links acties staan. In kijkmodus (alleen kleine icoonknoppen rechts) zakte de balk anders lager dan de lijstweergave — de witruimte-klacht. .main-toolbar zelf wordt een flexbox die de hoogte afdwingt én de toolbar-inhoud verticaal centreert. */ min-height: var(--pfx-toolbar-h); box-sizing: border-box; display: flex; align-items: center; } .main-toolbar > * { flex: 1 1 auto; min-width: 0; } .main-toolbar :is(.dxbl-toolbar, .dxbl-toolbar-content, [role="toolbar"]) { align-items: center !important; } .dxbl-toolbar-btn, .dxbl-toolbar-btn > .dxbl-btn { border-radius: 9px !important; font-weight: 600; } /* Split-knoppen: binnennaad recht houden */ .dxbl-toolbar-btn.dxbl-btn-split > .dxbl-btn:not(.dxbl-btn-split-dropdown) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .dxbl-toolbar-btn.dxbl-btn-split > .dxbl-btn-split-dropdown { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* Secondary actions — vlak met lichte rand */ .dxbl-toolbar-btn.dxbl-btn-secondary:not([data-action-name="New"]):not([data-action-name^="Filter"]) { background: var(--pfx-surface) !important; border: 1px solid var(--pfx-card-line) !important; color: var(--pfx-text-soft) !important; padding: 6px 13px; } .dxbl-toolbar-btn.dxbl-btn-secondary:not([data-action-name="New"]):not([data-action-name^="Filter"]):hover { background: var(--pfx-hover) !important; border-color: var(--pfx-line) !important; } .dxbl-toolbar-item-tmpl { display: flex !important; align-items: center !important; } /* New — zelfde vlakke stijl als de geneste New (bv. Contacts-tab) */ .main-toolbar .dxbl-btn[data-action-name="New"] { background: var(--pfx-surface) !important; border: 1px solid var(--pfx-card-line) !important; color: var(--pfx-ink) !important; padding: 6px 16px; font-weight: 700; box-shadow: none; } .main-toolbar .dxbl-btn[data-action-name="New"]:hover { background: var(--pfx-hover) !important; border-color: var(--pfx-line) !important; } /* Save — zelfde vlakke stijl als New (niet 'vol' oranje) */ .main-toolbar .dxbl-btn[data-action-name="Save"], .main-toolbar .dxbl-btn[data-action-name="SaveAndClose"] { background: var(--pfx-surface) !important; border: 1px solid var(--pfx-card-line) !important; color: var(--pfx-ink) !important; padding: 6px 16px; font-weight: 700; box-shadow: none !important; } .main-toolbar .dxbl-btn[data-action-name="Save"]:hover, .main-toolbar .dxbl-btn[data-action-name="SaveAndClose"]:hover { background: var(--pfx-hover) !important; border-color: var(--pfx-line) !important; } /* Icoon in accentkleur (wit icoon valt anders weg op de witte knop) */ .main-toolbar .dxbl-btn[data-action-name="Save"] :is(svg, span[class*="icon"]), .main-toolbar .dxbl-btn[data-action-name="SaveAndClose"] :is(svg, span[class*="icon"]) { color: var(--pfx-accent) !important; fill: var(--pfx-accent) !important; } /* Wit/zwart img-icoon → accent-tint via filter (licht thema) */ .main-toolbar .dxbl-btn[data-action-name="Save"] img.xaf-toolbar-item-icon, .main-toolbar .dxbl-btn[data-action-name="SaveAndClose"] img.xaf-toolbar-item-icon { filter: brightness(0) saturate(100%) invert(56%) sepia(61%) saturate(2434%) hue-rotate(357deg) brightness(96%) contrast(89%); } /* Filter toggle actions → pill chips */ .main-toolbar .dxbl-btn[data-action-name^="Filter"] { border-radius: 999px !important; background: var(--pfx-surface-3) !important; border-color: transparent !important; color: var(--pfx-text-soft) !important; padding: 6px 14px; } .main-toolbar .dxbl-btn[data-action-name^="Filter"]:hover { background: var(--pfx-active) !important; color: var(--pfx-heading) !important; } .main-toolbar .dxbl-btn[data-action-name^="Filter"][aria-pressed="true"] { background: var(--pfx-active) !important; box-shadow: inset 0 0 0 1px rgba(23, 64, 107, 0.25); } .main-toolbar .dxbl-btn[data-action-name^="Filter"][aria-pressed="true"] span { color: var(--pfx-heading) !important; font-weight: 700; } /* 6. Content canvas + grid card --------------------------------------------- */ #main-view-content { background: var(--pfx-canvas); } #main-view-content .main-content { background: transparent; padding: var(--pfx-content-pad); } /* Merk-achtergrond (X-logo, logo-vrij) — vast t.o.v. het venster, rechtsonder. Op de app-root zodat de lege startpagina (nog geen #main-view-content) hem over de héle pagina toont; header en sidebar hebben hun eigen dekkende achtergrond en dekken de X links/boven af. Ook zichtbaar rondom/achter geopende schermen omdat #main-view-content .main-content transparant is. Alleen in de lichte modus. */ /* Eén fixed achtergrond-laag (body) i.p.v. vier. background-attachment:fixed dwingt per element een herteken bij elke repaint/scroll; op vier grote oppervlakken tegelijk gaf dat merkbare jank. De overige oppervlakken worden transparant zodat de body-laag (canvas + X) er doorheen blijft; opake vlakken (header, sidebar, grid-kaarten) dekken hem af waar nodig. Zelfde beeld, ~75% minder fixed-repaint. */ html:not([data-pfx-theme="dark"]) body { background: var(--pfx-canvas) url('../../images/achtergrond.png') no-repeat right bottom / 100% auto fixed; } html:not([data-pfx-theme="dark"]) .dxbl-blazor, html:not([data-pfx-theme="dark"]) .app, html:not([data-pfx-theme="dark"]) #main-view-content { background: transparent; } /* De lege startpagina/dashboard-zone is XAF-default markup: classless
wrappers die office-white hard wit (#FFFFFF/#FBFCFE) schildert bovenop het canvas. Die maken we in de lichte modus transparant zodat de #EDEFF2-achtergrond + X doorloopt. Alle echte oppervlakken (grid, group-control, popup, header, sidebar, toolbar) dragen een class en/of !important en blijven dus ongemoeid. */ html:not([data-pfx-theme="dark"]) #main-view-content div:not([class]), html:not([data-pfx-theme="dark"]) .dxbl-blazor > div:not([class]) { background: transparent !important; } /* Lege MDI-tabzone (dxbl-tabs.xaf-tabbed-mdi) — office-white schildert de tab-container en het content-paneel wit; transparant zodat canvas + X doorlopen. */ html:not([data-pfx-theme="dark"]) .xaf-tabbed-mdi, html:not([data-pfx-theme="dark"]) .xaf-tabbed-mdi .dxbl-tabs-content-panel, html:not([data-pfx-theme="dark"]) .xaf-tabbed-mdi .dxbl-tabs-tablist { background: transparent !important; } #main-view-content .dxbl-grid { border: 1px solid var(--pfx-card-line) !important; border-radius: 12px !important; overflow: hidden; background: var(--pfx-surface); box-shadow: 0 1px 3px rgba(15, 46, 77, 0.06); } .dxbl-grid .dxbl-grid-header-row .dxbl-grid-header { background: var(--pfx-surface-3) !important; border-bottom: 1px solid var(--pfx-card-line) !important; } .dxbl-grid .dxbl-grid-header-content span[role="presentation"] { font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--pfx-label); } .dxbl-grid .dxbl-grid-data-row > td { padding-top: var(--pfx-grid-row-pad) !important; padding-bottom: var(--pfx-grid-row-pad) !important; } .dxbl-grid .dxbl-grid-data-row:hover > td { background: var(--pfx-hover) !important; } /* Geen verticale kolomlijnen */ .dxbl-grid .dxbl-grid-table th, .dxbl-grid .dxbl-grid-table td { border-left: none !important; border-right: none !important; } /* 7. Tabs (open documents) --------------------------------------------------- */ .dxbl-tabs-item .dxbl-tabs-text-overflow { font-size: 13.5px !important; } .dxbl-tabs-item.dxbl-active { box-shadow: inset 0 -2.5px 0 var(--pfx-accent); } /* DevExpress' eigen actieve-tab-indicator meekleuren met het gekozen accent (anders blijft die theme-oranje naast onze accent-lijn staan) */ .dxbl-tabs, .dxbl-tabs-tablist, .dxbl-tabs-item { --dxbl-tabs-item-active-border-color: var(--pfx-accent) !important; --dxbl-tabs-item-selected-border-color: var(--pfx-accent) !important; } .dxbl-tabs-item.dxbl-active, .dxbl-tabs-item.dxbl-active > .dxbl-btn { border-bottom-color: var(--pfx-accent) !important; } .dxbl-tabs-item.dxbl-active::after, .dxbl-tabs-item.dxbl-active > .dxbl-btn::after { background-color: var(--pfx-accent) !important; border-color: var(--pfx-accent) !important; } .dxbl-tabs-item.dxbl-active .dxbl-tabs-text-overflow { color: var(--pfx-heading) !important; font-weight: 700; } #main-view-content .dxbl-tabs-item .dxbl-tabs-text-overflow { font-size: 13px !important; font-weight: 600; color: var(--pfx-text-soft); } #main-view-content .dxbl-tabs-item.dxbl-active .dxbl-tabs-text-overflow { color: var(--pfx-heading) !important; font-weight: 700; } /* 8. DetailView — kaarten op de échte elementen ------------------------------- */ #main-view-content .main-content dxbl-group-control.dxbl-group { display: block; background: var(--pfx-surface) !important; border: 1px solid var(--pfx-card-line) !important; border-radius: 14px; padding: var(--pfx-card-pad); margin-bottom: var(--pfx-card-gap); box-shadow: 0 1px 2px rgba(15, 46, 77, 0.04); } #main-view-content .main-content .dxbl-group-header.dxbl-fl-caption-tmpl, #main-view-content .main-content dxbl-group-control.dxbl-group > .dxbl-group-header { background: transparent !important; border: none !important; box-shadow: none !important; font-size: 14px; font-weight: 700; color: var(--pfx-heading-deep); padding: var(--pfx-cardhead-pad); } #main-view-content .main-content .dxbl-group-header::before, #main-view-content .main-content .dxbl-group-header::after { content: none !important; } #main-view-content .main-content .dxbl-fl-group-body, #main-view-content .main-content .dxbl-group-body-content { background: transparent !important; } /* Veldlabels: klein, uppercase, gedempt */ #main-view-content .main-content label.dxbl-fl-cpt { font-size: 11px !important; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--pfx-label) !important; } #main-view-content .main-content dxbl-form-layout-item.dxbl-fl-item { padding-top: var(--pfx-fl-item-pad); padding-bottom: var(--pfx-fl-item-pad); } #main-view-content .main-content .dxbl-fl .row, #main-view-content .main-content .dxbl-fl-row { --bs-gutter-y: var(--pfx-fl-gutter-y); } #main-view-content .main-content .dxbl-fl-group-body .dxbl-fl-item + .dxbl-fl-item { margin-top: var(--pfx-fl-item-gap); } /* 8b. Zelfde kaart-layout in popups/dialogs (detail view als popup) ----------- */ html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) dxbl-group-control.dxbl-group { display: block; background: var(--pfx-surface) !important; border: 1px solid var(--pfx-card-line) !important; border-radius: 14px; padding: var(--pfx-card-pad); margin-bottom: var(--pfx-card-gap); box-shadow: 0 1px 2px rgba(15, 46, 77, 0.04); } html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) .dxbl-group-header.dxbl-fl-caption-tmpl, html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) dxbl-group-control.dxbl-group > .dxbl-group-header { background: transparent !important; border: none !important; box-shadow: none !important; font-size: 14px; font-weight: 700; color: var(--pfx-heading-deep); padding: var(--pfx-cardhead-pad); } html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) .dxbl-group-header::before, html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) .dxbl-group-header::after { content: none !important; } html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) :is(.dxbl-fl-group-body, .dxbl-group-body-content) { background: transparent !important; } html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) label.dxbl-fl-cpt { font-size: 11px !important; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--pfx-label) !important; } html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) dxbl-form-layout-item.dxbl-fl-item { padding-top: var(--pfx-fl-item-pad); padding-bottom: var(--pfx-fl-item-pad); } html :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) .dxbl-fl-group-body .dxbl-fl-item + .dxbl-fl-item { margin-top: var(--pfx-fl-item-gap); } /* 9. Editors / inputs -------------------------------------------------------- */ .dxbl-text-edit, .dxbl-edit, .dxbl-combobox, .dxbl-spin-edit, .dxbl-date-edit { border-radius: 9px !important; } .dxbl-text-edit:focus-within, .dxbl-edit:focus-within { border-color: var(--pfx-heading) !important; box-shadow: 0 0 0 3px rgba(var(--pfx-accent-rgb), 0.15) !important; } /* 9a. Pager + switches — volgen de gekozen accentkleur ------------------------ */ /* Actieve pagina in de grid-pager (meerdere DX-varianten afgedekt) */ :is(.dxbl-pager, .dxbl-grid-pager, .dxbl-grid .dxbl-pager) { --dxbl-pager-page-selected-bg: var(--pfx-accent); --dxbl-pager-page-selected-border-color: var(--pfx-accent); --dxbl-btn-primary-bg: var(--pfx-accent); --dxbl-btn-primary-border-color: var(--pfx-accent); } :is(.dxbl-pager, .dxbl-grid-pager) :is(.dxbl-btn-primary, .dxbl-active, [aria-current="page"], .dxbl-pager-page-selected, .dxbl-btn[aria-pressed="true"]) { background-color: var(--pfx-accent) !important; border-color: var(--pfx-accent) !important; color: #fff !important; } /* Yes/No toggle switches (boolean editors) — alleen kleur, vorm intact laten */ .dxbl-checkbox { --dxbl-checkbox-checked-bg: var(--pfx-accent); --dxbl-checkbox-checked-border-color: var(--pfx-accent); --dxbl-checkbox-switch-checked-bg: var(--pfx-accent); --dxbl-checkbox-switch-checked-border-color: var(--pfx-accent); --dxbl-checkbox-check-element-checked-bg: var(--pfx-accent); --dxbl-checkbox-check-element-checked-border-color: var(--pfx-accent); } .dxbl-checkbox.dxbl-checked .dxbl-checkbox-check-element { background-color: var(--pfx-accent) !important; border-color: var(--pfx-accent) !important; border-radius: inherit; } /* Bootstrap-fallback (form-check/switch) */ .form-check-input:checked { background-color: var(--pfx-accent) !important; border-color: var(--pfx-accent) !important; } /* 6a. Detail view — label-kolom past zich aan de inhoud aan ------------------- */ /* Kolommen op inhoud laten sizen: tabel op auto-layout, caption-cel op auto met nowrap → kolom = breedste label, nooit afgekapt. */ /* Alleen layout-tabellen (formulieren), NOOIT grid-tabellen — die hebben table-layout:fixed + col-breedtes nodig voor kolom-resizing */ .xaf-layout-group table:not(.dxbl-grid-table):not([class*="grid"]), .xaf-detailview table:not(.dxbl-grid-table):not([class*="grid"]), .dxbl-fl table:not(.dxbl-grid-table):not([class*="grid"]) { table-layout: auto !important; } .xaf-layout-group table:not(.dxbl-grid-table):not([class*="grid"]) col, .dxbl-fl table:not(.dxbl-grid-table):not([class*="grid"]) col { width: auto !important; } .dxbl-fl-cpt, .xaf-layout-item-caption, .xaf-field-caption { width: auto !important; min-width: max-content !important; max-width: none !important; white-space: nowrap; overflow: visible !important; flex: 0 0 auto !important; padding-right: 14px; } /* Grid-variant (DevExpress FormLayout): caption = max-content, editor vult rest */ .dxbl-fl { --dxbl-fl-cpt-width: max-content; } .dxbl-fl-item:has(> .dxbl-fl-cpt) { grid-template-columns: max-content 1fr; } /* 10. Rounded popups --------------------------------------------------------- */ .dxbl-popup-window, .dxbl-popup-window-content { border-radius: 14px; } /* 11. Dark mode — DX-specifieke overrides ------------------------------------- Het office-white basisthema zet veel wit hard op elementen; hier de belangrijkste vlakken expliciet donker. */ html[data-pfx-theme="dark"] body, html[data-pfx-theme="dark"] .dxbl-blazor, html[data-pfx-theme="dark"] .app { background: var(--pfx-canvas) !important; color: var(--pfx-ink); } /* Editors */ html[data-pfx-theme="dark"] .dxbl-text-edit, html[data-pfx-theme="dark"] .dxbl-edit, html[data-pfx-theme="dark"] .dxbl-combobox, html[data-pfx-theme="dark"] .dxbl-spin-edit, html[data-pfx-theme="dark"] .dxbl-date-edit, html[data-pfx-theme="dark"] .dxbl-text-edit-input, html[data-pfx-theme="dark"] .dxbl-memo, html[data-pfx-theme="dark"] .dxbl-listbox { background-color: var(--pfx-surface-3) !important; border-color: var(--pfx-line) !important; color: var(--pfx-ink) !important; } html[data-pfx-theme="dark"] .dxbl-text-edit-input::placeholder { color: var(--pfx-muted); } /* Grid-cellen en selectie */ /* Grid-binnenkant: scroll-viewer, tabel en lege ruimte onder de rijen worden door office-white hard wit gezet — expliciet donker + de dxbl-vars meezetten. */ html[data-pfx-theme="dark"] .dxbl-grid { --dxbl-grid-bg: var(--pfx-surface); --dxbl-grid-header-bg: var(--pfx-surface-3); --dxbl-grid-selection-bg: var(--pfx-active); } html[data-pfx-theme="dark"] .dxbl-grid, html[data-pfx-theme="dark"] .dxbl-grid .dxbl-scroll-viewer, html[data-pfx-theme="dark"] .dxbl-grid .dxbl-scroll-viewer-content, html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-table, html[data-pfx-theme="dark"] .dxbl-grid tbody, html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-empty-cell, html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-empty-data-row, html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-empty-data-row > td { background: var(--pfx-surface) !important; background-color: var(--pfx-surface) !important; color: var(--pfx-ink); } html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-data-row > td { background: var(--pfx-surface) !important; color: var(--pfx-ink) !important; border-color: var(--pfx-line-soft) !important; } html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-data-row:hover > td { background: var(--pfx-hover) !important; } html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-footer, html[data-pfx-theme="dark"] .dxbl-grid .dxbl-grid-pager, html[data-pfx-theme="dark"] .dxbl-pager { background: var(--pfx-surface) !important; color: var(--pfx-ink) !important; border-color: var(--pfx-line) !important; } /* Tabsbalken en toolbars die het thema wit maakt */ html[data-pfx-theme="dark"] .dxbl-tabs, html[data-pfx-theme="dark"] .dxbl-tabs-scroll-viewer, html[data-pfx-theme="dark"] .dxbl-tabs-tablist, html[data-pfx-theme="dark"] .dxbl-toolbar, html[data-pfx-theme="dark"] .dxbl-toolbar-group { background: var(--pfx-surface) !important; color: var(--pfx-ink) !important; } html[data-pfx-theme="dark"] .dxbl-tabs-item .dxbl-tabs-text-overflow { color: var(--pfx-text-soft); } /* Knoppen (niet-primary) */ html[data-pfx-theme="dark"] .dxbl-btn-secondary, html[data-pfx-theme="dark"] .dxbl-btn-standalone { background-color: transparent; color: var(--pfx-ink); border-color: var(--pfx-line); } /* Popups, dropdowns, menu's */ html[data-pfx-theme="dark"] .dxbl-popup-window, html[data-pfx-theme="dark"] .dxbl-popup-window-content, html[data-pfx-theme="dark"] .dxbl-dropdown-dialog, html[data-pfx-theme="dark"] .dxbl-dropdown, html[data-pfx-theme="dark"] .dxbl-window, html[data-pfx-theme="dark"] .dxbl-context-menu, html[data-pfx-theme="dark"] .dxbl-list-box, html[data-pfx-theme="dark"] .dxbl-popup { background: var(--pfx-surface) !important; color: var(--pfx-ink) !important; border-color: var(--pfx-line) !important; } html[data-pfx-theme="dark"] .dxbl-list-box-item:hover, html[data-pfx-theme="dark"] .dxbl-dropdown-item:hover { background: var(--pfx-hover) !important; } /* Iconen (zwarte SVG/PNG-iconen licht maken; gekleurde eigen iconen niet) */ html[data-pfx-theme="dark"] .header img:not(.header-logo), html[data-pfx-theme="dark"] .dxbl-toolbar-btn img.xaf-toolbar-item-icon:not([src*="/oranje/"]):not([src*="ProfixIcons"]) { filter: brightness(0) invert(0.85); } html[data-pfx-theme="dark"] .about-info { color: var(--pfx-muted); } /* Popup / dialog detail-view — dark mode. Een detail view die als popup opent valt buiten #main-view-content, dus de kaart-, sectiekop- en veldkleuren bleven licht. Hier expliciet donker. */ html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) :is( .dxbl-popup-header, .dxbl-window-header, .dxbl-popup-body, .dxbl-window-body, .dxbl-popup-content, .dxbl-form-layout, .dxbl-fl, .dxbl-fl-group, dxbl-group-control, .dxbl-group, .dxbl-fl-group-body, .dxbl-group-body-content, .xaf-detailview, .xaf-layout-group ) { background-color: var(--pfx-surface) !important; border-color: var(--pfx-line) !important; color: var(--pfx-ink) !important; } /* Sectiekoppen ("Customer", "Shared Relation Type Properties") */ html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) :is( .dxbl-group-header, .dxbl-fl-caption-tmpl, .dxbl-fl-group-caption ) { background-color: var(--pfx-surface-3) !important; color: var(--pfx-ink) !important; border-color: var(--pfx-line) !important; } /* Titelbalk van de popup zelf */ html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window) > :is(.dxbl-popup-header, .dxbl-window-header) { background-color: var(--pfx-surface-3) !important; color: var(--pfx-ink) !important; border-bottom-color: var(--pfx-line) !important; } /* Veldlabels in de popup */ html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) :is(.dxbl-fl-cpt, label) { color: var(--pfx-label, var(--pfx-muted)) !important; } /* Resterende witte vlakken: body-wrapper, scroll-viewer, footer/knoppenbalk */ html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]), html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) :is( .dxbl-popup-body, .dxbl-window-body, .dxbl-popup-content, .dxbl-popup-content-wrapper, .dxbl-scroll-viewer, .dxbl-scroll-viewer-content, .dxbl-popup-footer, .dxbl-window-footer, .dxbl-popup-actions, .dxbl-toolbar, .card, .panel, .dxbl-panel ) { background-color: var(--pfx-surface) !important; border-color: var(--pfx-line) !important; } html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window) > :is(.dxbl-popup-footer, .dxbl-window-footer), html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window) .dxbl-popup-actions { background-color: var(--pfx-surface-3) !important; border-top-color: var(--pfx-line) !important; } /* Vangnet: venster hard donker + ALLE structurele containers transparant, zodat header-/footer-/wrapper-vlakken die een eigen witte klasse houden toch donker worden. Editors, knoppen en switches worden bewust NIET geraakt. */ html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) { background-color: var(--pfx-surface) !important; } html[data-pfx-theme="dark"] :is(.dxbl-popup-window, .dxbl-window, [role="dialog"]) :is(div, header, footer, section, form):not( .dxbl-text-edit):not(.dxbl-combobox):not(.dxbl-date-edit):not(.dxbl-spin-edit):not(.dxbl-memo):not(.dxbl-edit):not( .dxbl-checkbox):not([class*="btn"]):not([class*="button"]):not(.dxbl-text-edit-input) { background-color: transparent !important; } /* Readonly / geblokkeerde velden — leesbaar houden in dark mode. De velden behouden een lichte achtergrond; daarom donkere, goed leesbare tekst i.p.v. het lichte grijs dat XAF standaard zet. */ html[data-pfx-theme="dark"] :is( .dxbl-text-edit, .dxbl-edit, .dxbl-combobox, .dxbl-spin-edit, .dxbl-date-edit, .dxbl-memo ):is(.dxbl-readonly, .dxbl-disabled, [aria-readonly="true"], [aria-disabled="true"]) *, html[data-pfx-theme="dark"] :is( .dxbl-text-edit, .dxbl-edit, .dxbl-combobox, .dxbl-spin-edit, .dxbl-date-edit ):has(:is(input, textarea):is([readonly], :disabled)) :is(input, textarea, span, a, div, label), html[data-pfx-theme="dark"] :is(input, textarea, .dxbl-text-edit-input):is([readonly], :disabled) { color: #3C4A5A !important; -webkit-text-fill-color: #3C4A5A !important; opacity: 1 !important; }