/* DevExpress / XAF specific overrides only (.dxbl-*) */ .dxbl-theme-fluent .app { background-color: var(--focara-app-bg, var(--bg-soft)) !important; color: var(--dxds-color-content-neutral-default-rest); } .dxbl-theme-fluent.dxbl-theme-dark .app { --focara-app-bg: #191c20; } /* Issue #265: een grijsgroene achtergrond die bij het logo past, in plaats van het lichtblauw #f6f9fc. */ .dxbl-theme-fluent:not(.dxbl-theme-dark) .app { --focara-app-bg: #f2f5f4; } :root[data-theme="dark"], :root[data-bs-theme="dark"], [data-theme="dark"], [data-bs-theme="dark"], .app[data-theme="dark"], .app[data-bs-theme="dark"] { --focara-app-bg: #191c20; } :root[data-theme="light"], :root[data-bs-theme="light"], [data-theme="light"], [data-bs-theme="light"] { --focara-app-bg: #f2f5f4; } /* ========================================================= Kleuren voor licht en donker Eigen opmaak gebruikt deze variabelen in plaats van vaste kleuren (#fff, #333, #e0e0e0, ...). Ze verwijzen naar de Fluent-tokens van DevExpress, die per modus een eigen waarde hebben (DevExpress wisselt het stylesheet en zet body.dxbl-theme-dark), dus alles wat ze gebruikt schakelt vanzelf mee. Tinten van de huisstijl worden met color-mix over het oppervlak gelegd: lichtgroen op wit, donkergroen op donkergrijs. ========================================================= */ :root { --fc-surface: var(--dxds-color-surface-neutral-default-rest, #fff); --fc-surface-subtle: var(--dxds-color-surface-neutral-subdued-rest, #f4f4f3); --fc-text: var(--dxds-color-content-neutral-default-rest, #242424); --fc-text-muted: var(--dxds-color-content-neutral-subdued-rest, #616161); --fc-border: var(--dxds-color-border-neutral-subdued-rest, #e0e0e0); --fc-border-strong: var(--dxds-color-border-neutral-default-rest, #d1d1d1); --fc-hover: color-mix(in srgb, var(--fc-text) 6%, transparent); --fc-brand: #3f8877; --fc-brand-text: color-mix(in srgb, var(--fc-brand) 70%, var(--fc-text)); --fc-brand-tint: color-mix(in srgb, var(--fc-brand) 14%, var(--fc-surface)); --fc-brand-tint-strong: color-mix(in srgb, var(--fc-brand) 24%, var(--fc-surface)); --fc-danger-text: var(--dxds-color-content-danger-default-rest, #b91c1c); --fc-danger-tint: color-mix(in srgb, #dc2626 12%, var(--fc-surface)); --fc-danger-border: color-mix(in srgb, #dc2626 35%, var(--fc-surface)); --fc-shadow: rgba(0, 0, 0, .08); --fc-shadow-strong: rgba(0, 0, 0, .16); /* Issue #265 (stijl C): gevulde knoppen in het logogroen, donker genoeg voor witte tekst; kaarten met een grotere afronding en een zachte schaduw. */ --fc-brand-solid: #2a7d6a; --fc-brand-solid-hover: #236b5b; --fc-brand-solid-active: #1d5b4d; --fc-radius-card: 14px; --fc-radius-field: 10px; /* Kaarten zonder schaduw: met de kopregel en de platte dossierregel (#344) leken ze te zweven. De rand (--fc-card-border) houdt ze herkenbaar. Wat echt boven de inhoud ligt (de lade, menu's) heeft een eigen schaduw. */ --fc-card-shadow: none; /* Issue #278: één rand voor elke kaart (layoutgroepen, infopaneel, dossierbalk, menu, lijsten, startpagina). In licht iets donkerder dan --fc-border, voor het contrast van #262; in donker gelijk aan --fc-border. */ --fc-card-border: #cfcfcd; --fc-focus-ring: 0 0 0 4px color-mix(in srgb, var(--fc-brand) 24%, transparent); /* De knopkleur uit site.css (gedeeld met de website) is #3f8877: wit daarop haalt maar 4,2:1. */ --brand-dark: var(--fc-brand-solid); /* Namen die focaragreen.css al met vaste (lichte) paletkleuren definieerde; hier meeschakelend gemaakt. */ --fc-surface-muted: var(--fc-surface-subtle); --fc-muted: var(--fc-text-muted); --fc-light: var(--fc-surface-subtle); } body.dxbl-theme-dark { --fc-shadow: rgba(0, 0, 0, .35); --fc-shadow-strong: rgba(0, 0, 0, .5); --fc-card-shadow: none; --fc-card-border: var(--fc-border); --fc-focus-ring: 0 0 0 4px color-mix(in srgb, #69b6a3 32%, transparent); --brand-dark: var(--fc-brand-solid); /* De variabelen uit site.css (gedeeld met de publieke website) volgen in de app de donkere modus van DevExpress; site.css zelf kent alleen data-theme="dark" van de website. --brand-dark blijft het huisstijlgroen: het is de achtergrond van knoppen met witte tekst. */ --bg: var(--fc-surface); --bg-soft: #191c20; --ink: var(--fc-text); --muted: var(--fc-text-muted); --surface: var(--fc-surface); --surface-strong: var(--fc-surface); --surface-muted: var(--fc-surface-subtle); --surface-line: var(--fc-border); --shadow: 0 12px 38px rgba(0, 0, 0, .4); --text-strong-muted: var(--fc-text); --brand: #69b6a3; /* Ook buiten .app (popups hangen direct onder body): achtergrond van het hoofdgebied en popupkoppen. */ --focara-app-bg: #191c20; --dxbl-popups-header-bg: #191c20; --noise-dot: rgba(255, 255, 255, 0.04); } .dxbl-modal > .dxbl-modal-root > .dxbl-popup.dxbl-popup-scrollable > .dxbl-modal-content { max-height: 100vh; overflow-y: hidden; border-width: var(--dxbl-popup-scrollable-border-width); } /* Issue #278: een venster met een detailscherm heeft de achtergrond van de app (zoals zijn kop), niet wit. Op wit vielen de rand en schaduw van de kaarten en het paneel veel zwaarder uit dan in het hoofdscherm. */ .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content:has(.focara-detailview-body), .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content:has(.focara-detailview-body) .dxbl-modal-body, .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content:has(.focara-detailview-body) .dxbl-modal-footer { background-color: var(--focara-app-bg, var(--bg-soft)); } .dxbl-fl .dxbl-fl-group > .dxbl-group { --dxbl-group-bg: var(--dxbl-fl-group-bg); --dxbl-group-border-radius: var(--ar-border-radius-lg) !important; --dxbl-group-border-color: var(--dxbl-fl-group-border-color); --dxbl-group-border-width: var(--dxbl-fl-group-border-width); --dxbl-group-header-line-height: var(--dxbl-fl-group-header-line-height); --dxbl-group-header-font-size: var(--dxbl-fl-group-header-font-size); padding: 0; --dxbl-group-header-padding-x: var(--dxbl-fl-group-header-padding-x); --dxbl-group-header-padding-top: var(--dxbl-fl-group-header-padding-top); --dxbl-group-header-padding-bottom: var(--dxbl-fl-group-header-padding-bottom); --dxbl-group-header-bg: var(--dxbl-fl-group-header-bg); --dxbl-group-header-color: var(--dxbl-fl-group-header-color); --dxbl-group-header-font-weight: var(--dxbl-fl-group-header-font-weight); --dxbl-group-header-border-radius: var(--dxbl-fl-group-header-border-radius); --dxbl-group-header-text-padding-x: var(--dxbl-fl-group-header-text-padding-x); --dxbl-group-header-text-padding-y: var(--dxbl-fl-group-header-text-padding-y); --dxbl-group-header-btn-padding: var(--dxbl-fl-group-header-btn-padding); --dxbl-group-header-btn-bg: var(--dxbl-fl-group-header-btn-bg); --dxbl-group-header-btn-color: var(--dxbl-fl-group-header-btn-color); --dxbl-group-header-btn-hover-bg: var(--dxbl-fl-group-header-btn-hover-bg); --dxbl-group-header-btn-hover-color: var(--dxbl-fl-group-header-btn-hover-color); } /* Layoutgroepen als kaart (issue #265, stijl C): grote afronding en een zachte schaduw; de kop is gewoon de bovenkant van de kaart, met een grotere titel en zonder eigen achtergrond of scheidingslijn. */ .dxbl-fl .dxbl-fl-group > .dxbl-group { --dxbl-group-border-radius: var(--fc-radius-card) !important; box-shadow: var(--fc-card-shadow); } .dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-header { padding: 18px 22px 2px; background-color: transparent; border-bottom: none; border-radius: calc(var(--fc-radius-card) - 1px) calc(var(--fc-radius-card) - 1px) 0 0; font-size: 1rem; font-weight: 600; } /* Een groep binnen een groep is geen tweede kaart: geen rand, schaduw of eigen vlak, en een kleinere kop. Zo verdwijnt het "kader in kader". */ .dxbl-fl .dxbl-group .dxbl-fl-group > .dxbl-group { --dxbl-group-border-width: 0 !important; border: none !important; box-shadow: none; background: transparent; } .dxbl-fl .dxbl-group .dxbl-fl-group > .dxbl-group > .dxbl-group-header { padding: 4px 0 2px; font-size: 0.875rem; } /* De geneste groep heeft zelf ook ruimte opzij; met de negatieve marge lijnen zijn velden uit met die van de kaart. */ .dxbl-fl .dxbl-group .dxbl-fl-group > .dxbl-group > .dxbl-group-body { padding: 8px 0 0; margin: 0 -6px; } /* DevExpress legt over de header een zwarte laag van 5% dekking; weg, zodat alleen de eigen tint telt (net-niet-wit, in donker net-niet-donkergrijs). */ .dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-header::before { display: none; } /* Ingeklapte groep: alleen de header is zichtbaar, dus die krijgt rondom de afronding en geen scheidingslijn. */ .dxbl-fl .dxbl-fl-group > .dxbl-group:not(.expanded):not([is-animating]) > .dxbl-group-header { border-bottom: none; border-radius: calc(var(--fc-radius-card) - 1px); padding-bottom: 18px; } /* Issue #266: het icoon van een kaart (ImageName op de groep) in een zacht groen vierkantje voor de kop. */ .dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-header img.xaf-layout-group-icon { box-sizing: content-box; width: 16px; height: 16px; padding: 8px; margin-right: 12px; border-radius: 9px; background-color: var(--fc-brand-tint); opacity: 1; } /* Donker: de iconen worden met filter: invert(1) wit gemaakt (zie img[src*="IImageService/ap-"]), en dat keert ook de achtergrond om. Daarom hier de omgekeerde kleur van het gewenste donkergroene vlak (#2f4640). */ body.dxbl-theme-dark .dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-header img.xaf-layout-group-icon { background-color: #d0b9bf; opacity: .9; } /* Issue #266: een uitlegregel (StaticText) als eerste in een kaart is de ondertitel: direct onder de kop, klein en gedempt. */ .dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-item:first-child .xaf-static-text { display: block; margin-top: -10px; margin-bottom: 4px; color: var(--fc-text-muted); font-size: 0.8125rem; } /* Met een icoon begint de ondertitel onder de koptekst, niet onder het icoon (32px icoon + 12px marge, min de ruimte die het veld zelf al opzij heeft), en schuift hij omhoog naast het icoon. */ .dxbl-fl .dxbl-fl-group > .dxbl-group:has(> .dxbl-group-header > img.xaf-layout-group-icon) > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-item:first-child .xaf-static-text { padding-left: 39px; margin-top: -26px; } /* De velden hebben zelf al ~11px ruimte opzij; zo lijnen label en veld uit met de kop van de kaart. */ .dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-body { padding: 12px 11px 18px; } /* Issue #266: kaarten naast elkaar zijn even hoog, zodat er geen gat onder de kortste valt (welke velden zichtbaar zijn, hangt af van de instellingen). Een kolom in een rij (niet de volle breedte) rekt mee met de rij; de kaart erin vult de kolom. Een kolom zonder kop met kaarten onder elkaar (Albumpagina + Live sessie) laat de onderste kaart de rest vullen. */ .dxbl-fl .dxbl-row > .dxbl-fl-group:not(.dxbl-col-md-12):has(> .dxbl-group > .dxbl-group-header > img.xaf-layout-group-icon), .dxbl-fl .dxbl-row > .dxbl-fl-group:not(.dxbl-col-md-12):has(> .dxbl-row > .dxbl-fl-group > .dxbl-group > .dxbl-group-header > img.xaf-layout-group-icon) { display: flex; flex-direction: column; } .dxbl-fl .dxbl-row > .dxbl-fl-group:not(.dxbl-col-md-12) > .dxbl-group:has(> .dxbl-group-header > img.xaf-layout-group-icon) { flex: 1 1 auto; } .dxbl-fl .dxbl-row > .dxbl-fl-group:not(.dxbl-col-md-12) > .dxbl-row:has(> .dxbl-fl-group > .dxbl-group > .dxbl-group-header > img.xaf-layout-group-icon) { flex: 1 1 auto; flex-direction: column; flex-wrap: nowrap; } .dxbl-fl .dxbl-row > .dxbl-fl-group:not(.dxbl-col-md-12) > .dxbl-row > .dxbl-fl-group:last-child:has(> .dxbl-group > .dxbl-group-header > img.xaf-layout-group-icon) { flex: 1 1 auto; display: flex; flex-direction: column; } .dxbl-fl .dxbl-row > .dxbl-fl-group:not(.dxbl-col-md-12) > .dxbl-row > .dxbl-fl-group:last-child > .dxbl-group { flex: 1 1 auto; } /* Issue #266: tabbladen als sectiemenu links (Bedrijfsinstellingen; SectionMenuController geeft de groep deze id). Het menu blijft staan als je door de kaarten scrolt; de gekozen sectie in het groen, zoals in het zijmenu. */ #focara-section-menu > dxbl-tabs { display: grid !important; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; } #focara-section-menu > dxbl-tabs > .dxbl-tabs-tablist { position: sticky; top: 0; flex-direction: column; align-items: stretch; height: auto; padding: 8px; border: 1px solid var(--fc-border); border-radius: var(--fc-radius-card); background: var(--fc-surface); } /* Alleen de lijst zelf; de schuifknoppen voor een te brede tabbalk zijn hier niet nodig. */ #focara-section-menu > dxbl-tabs > .dxbl-tabs-tablist > :not(.dxbl-scroll-viewer) { display: none !important; } #focara-section-menu > dxbl-tabs > .dxbl-tabs-tablist .dxbl-scroll-viewer, #focara-section-menu > dxbl-tabs > .dxbl-tabs-tablist .dxbl-scroll-viewer-content { display: block; width: 100%; overflow: visible; } #focara-section-menu > dxbl-tabs > .dxbl-tabs-tablist ul[role=tablist] { display: flex !important; flex-direction: column; gap: 2px; width: 100%; /* Issue #322: niet het lichtgrijze vlak van de tabbalk erboven (.dxbl-tabs-top … ul); het menu zelf is de witte kaart. */ padding: 0 !important; border: none; border-radius: 0; background-color: transparent; } #focara-section-menu > dxbl-tabs > .dxbl-tabs-tablist ul[role=tablist] > li { width: 100%; } #focara-section-menu > dxbl-tabs > .dxbl-tabs-tablist .dxbl-tabs-item { width: 100%; justify-content: flex-start; white-space: normal; text-align: left; padding: 9px 12px; border: none !important; border-radius: 8px; } /* Een lange naam ("Betalingen en automatisering") loopt door op een tweede regel in plaats van afgekapt te worden. */ #focara-section-menu > dxbl-tabs > .dxbl-tabs-tablist .dxbl-tabs-item * { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } #focara-section-menu > dxbl-tabs > .dxbl-tabs-tablist .dxbl-tabs-item:not(.dxbl-active):hover { background: var(--fc-hover-bg); } #focara-section-menu > dxbl-tabs > .dxbl-tabs-tablist .dxbl-tabs-item.dxbl-active { background: color-mix(in srgb, var(--fc-brand) 16%, var(--fc-surface)); color: var(--fc-brand-text); } #focara-section-menu > dxbl-tabs > .dxbl-tabs-tablist .dxbl-tabs-item::before, #focara-section-menu > dxbl-tabs > .dxbl-tabs-tablist .dxbl-tabs-item::after { display: none !important; } #focara-section-menu > dxbl-tabs > .dxbl-tabs-content-panel { min-width: 0; margin-top: 0 !important; padding-top: 0 !important; } /* De kaarten beginnen op dezelfde hoogte als het menu en het paneel (de inhoud van een tabblad had 12.6px ruimte erboven). */ #focara-section-menu > dxbl-tabs > .dxbl-tabs-content-panel .dxbl-fl-tab-content { padding-top: 0 !important; } /* Issue #279: velden die niet in een kaart staan, krijgen er een. Twee gevallen: - de groep die XAF zelf maakt voor lange tekstvelden (SizeableEditors: Probleem en Connection String van een tenant, de teksten van een help-item, Notities van een deelnemer), direct onder de hoofdgroep; - een tabblad van het sectiemenu met alleen kolommen velden (Klant en Abonnement van een tenant). Een lijst (main-content) is zelf al een kaart en blijft erbuiten. */ .dxbl-fl > .dxbl-row > .dxbl-fl-group > .dxbl-row > .dxbl-fl-group:not(:has(> .dxbl-group)) > .dxbl-row:has(> .dxbl-fl-item):not(:has(> .dxbl-fl-item > .dxbl-fl-ctrl > .main-content)), #focara-section-menu > dxbl-tabs > .dxbl-tabs-content-panel .dxbl-fl-tab-content:not(:has(.dxbl-group)):not(:has(.main-content)) { margin: 0; /* Issue #284: opzij zo dat de labels op één lijn staan met die van een gewone kaart erboven (11px van de kaart plus de 5.4px van de groep eromheen, die hier ontbreekt). */ padding: 12px 16.4px 18px; border: 1px solid var(--fc-card-border); border-radius: var(--fc-radius-card); background: var(--fc-surface); box-shadow: var(--fc-card-shadow); } /* Issue #266: een rij velden waarin een veld verborgen is (Opgeleverd op, Gecrediteerde factuur, Herinnering klaargezet…): het laatste veld van de rij vult de vrijgekomen ruimte, in plaats van een gat aan het eind (ook als het daarna alleen staat, zoals de behandelaar op een gewone factuur). Een datumveld groeit nooit mee: datums blijven smal. Wil je bewust een halve rij, zet er dan een lege groep naast (die is geen veld). */ .dxbl-fl .dxbl-row > .dxbl-fl-item:last-child:not(:has(dxbl-date-edit)) { flex-grow: 1; } /* Een kaart die alleen in zijn rij staat (de buurkaart is verborgen, bv. Omzet bij een contactpersoon) neemt de hele breedte, in plaats van een halve kaart met een gat ernaast. */ .dxbl-fl .dxbl-row > .dxbl-fl-group.dxbl-col:only-child:has(> .dxbl-group > .dxbl-group-header > img.xaf-layout-group-icon) { flex: 1 1 100%; max-width: 100%; width: 100%; } .dxbl-treeview .dxbl-treeview-item .dxbl-treeview-item-container:not(.dxbl-disabled).dxbl-active { --dxbl-treeview-item-color: var(--muted) !important; --dxbl-treeview-item-bg: var(--fc-hover-bg); border-radius: 19px; } .dxbl-treeview .dxbl-treeview-item .dxbl-treeview-item-container:not(.dxbl-disabled) { --dxbl-treeview-item-cursor: pointer; padding-left: 17px; border-radius: 19px; /* margin-bottom: 10px; */ } .dxbl-popup-cell, .dxbl-popup-root.dxbl-popup-cell { z-index: 2000 !important; } /* ListView grid alternate rows */ /*.dxbl-grid .dxbl-grid-data-row-alt > td, .dxbl-grid .dxbl-grid-table > tbody > tr:nth-child(even) > td { background-color: var(--dxds-primary-10) !important; }*/ .dxbl-theme-fluent.xaf-size-m .xaf-view-caption-lg, .dxbl-theme-fluent.xaf-size-l .xaf-view-caption-lg { font-size: 1.2rem; line-height: var(--dxds-line-height-base-lg); font-weight: var(--dxds-font-weight-base-strong); } /* Issue #265: rustige rijen; een gewone rij heeft geen tint meer, een even rij een heel lichte grijze. */ .normalrow { background-color: transparent !important; } .alternaterow { background-color: color-mix(in srgb, var(--fc-text) 2.5%, var(--fc-surface)) !important; } /* Issue #265: lijsten ruimer en rustiger. Kolomkoppen klein en gedempt, rijen iets hoger, geen verticale lijnen. In een kaart (lijst of tabblad) geen eigen kader om de tabel. */ body .dxbl-grid.dxbl-grid { --dxbl-grid-text-cell-padding-y: 0.55rem; --dxbl-grid-text-cell-padding-x: 0.625rem; --dxbl-grid-header-color: var(--fc-text-muted); --dxbl-grid-header-font-weight: 600; } body .dxbl-grid .dxbl-grid-table > thead > tr > th { font-size: 0.8125rem; } body .dxbl-grid .dxbl-grid-table > thead > tr > th, body .dxbl-grid .dxbl-grid-table > tbody > tr > td { border-left-color: transparent !important; border-right-color: transparent !important; } .main-content.xaf-flex-auto .dxbl-grid { border-width: 0; } .alternaterow:hover { background-color: var(--fc-hover-bg); } .dxbl-checkbox.dxbl-checkbox-switch:not(.dxbl-readonly):not(.dxbl-disabled).dxbl-checkbox-checked { --dxbl-checkbox-check-element-bg: var(--dxds-primary-40); --dxbl-checkbox-check-element-border: var(--dxds-primary-40); --dxbl-checkbox-check-element-switch-trigger-bg: var(--dxds-secondary-10); --dxbl-checkbox-hover-check-element-border: var(--dxds-primary-50); --dxbl-checkbox-hover-check-element-bg: var(--dxds-primary-50); --dxbl-checkbox-hover-check-element-trigger-bg: var(--dxds-secondary-10); } /* Donker: een ingeschakelde schakelaar in het huisstijlgroen; het lichte mint van hierboven is op donker te fel. */ body.dxbl-theme-dark .dxbl-checkbox.dxbl-checkbox-switch:not(.dxbl-readonly):not(.dxbl-disabled).dxbl-checkbox-checked { --dxbl-checkbox-check-element-bg: var(--fc-brand); --dxbl-checkbox-check-element-border: var(--fc-brand); --dxbl-checkbox-hover-check-element-border: #4f9f8b; --dxbl-checkbox-hover-check-element-bg: #4f9f8b; } .dxbl-checkbox.dxbl-checkbox-switch:not(.dxbl-readonly):not(.dxbl-disabled).dxbl-checkbox-unchecked { --dxbl-checkbox-check-element-bg: color-mix(in srgb, var(--fc-text) 22%, var(--fc-surface)); --dxbl-checkbox-check-element-border: color-mix(in srgb, var(--fc-text) 30%, var(--fc-surface)); --dxbl-checkbox-check-element-switch-trigger-bg: var(--dxds-secondary-10); --dxbl-checkbox-hover-check-element-border: color-mix(in srgb, var(--fc-text) 40%, var(--fc-surface)); --dxbl-checkbox-hover-check-element-bg: color-mix(in srgb, var(--fc-text) 30%, var(--fc-surface)); --dxbl-checkbox-hover-check-element-trigger-bg: var(--dxds-secondary-10); } .dxbl-grid-table.dxbl-grid-row-hover-enabled > tbody > tr:not(.dxbl-grid-group-row):not(.dxbl-grid-group-footer-row):not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):hover { background-color: var(--fc-hover-bg) !important; color: var(--dxbl-grid-hover-color); } /*.dxbl-grid-table.dxbl-grid-row-hover-enabled > tbody > tr.dxbl-grid-selected-row:not(.dxbl-grid-focused-row):not(.dxbl-grid-touch-selection):not(.dxbl-grid-touch-selection-edge):not(.dxbl-grid-empty-row):hover { color: var(--dxbl-grid-selection-color); }*/ /* Geselecteerde rij in een lijst: één zachte huisstijltint, op een gewone én op een even (alternaterow) rij, ook bij hover. Zonder dit legt DevExpress zijn eigen donkere primaire tint neer (op een gewone rij een vies groen) en verdwijnt de selectie op een even rij onder de rijkleur van .alternaterow. Mengt met het oppervlak, dus ook goed in het donkere thema. */ .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row:not(.dxbl-grid-focused-row), .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row.alternaterow:not(.dxbl-grid-focused-row), .dxbl-grid .dxbl-grid-table.dxbl-grid-row-hover-enabled > tbody > tr.dxbl-grid-selected-row:not(.dxbl-grid-focused-row):not(.dxbl-grid-empty-row):hover { background-color: var(--fc-brand-tint-strong) !important; color: var(--fc-text) !important; } .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row:not(.dxbl-grid-focused-row) > td { background-color: transparent !important; } .enum-badge { display: inline-flex; align-items: center; border-radius: 10px; padding: 3px 9px; font-size: 11.5px; line-height: 1; font-weight: 400; border: 1px solid transparent; white-space: nowrap; } .enum-badge-options { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: 5px; } /* Issue #244: in een formulier even hoog als een invoerveld (2rem: regelhoogte, padding en rand van een DevExpress-tekstveld), anders loopt de kolom ernaast per rij verder scheef. */ .dxbl-fl .dxbl-fl-ctrl .enum-badge-options, .dxbl-fl .dxbl-fl-ctrl .enum-badge-readonly { /* Even hoog als een veld: anders schoof de kolom ernaast (Taak: Status en Prioriteit naast Contact en Type) op. */ min-height: var(--fc-field-height); padding-top: 0; align-items: center; } .dxbl-fl .dxbl-fl-ctrl .enum-badge-readonly { display: flex; } .enum-badge-muted { background: color-mix(in srgb, var(--dxds-neutral-90) 20%, var(--fc-surface)); color: var(--dxds-neutral-150); border-color: color-mix(in srgb, var(--dxds-neutral-90) 40%, var(--fc-border)); } .enum-badge-success { background: color-mix(in srgb, var(--dxds-success-90) 15%, var(--fc-surface)); color: var(--dxds-success-130); border-color: color-mix(in srgb, var(--dxds-success-90) 35%, var(--fc-border)); } .enum-badge-warning { background: color-mix(in srgb, var(--dxds-warning-80) 22%, var(--fc-surface)); color: var(--dxds-warning-130); border-color: color-mix(in srgb, var(--dxds-warning-80) 45%, var(--fc-border)); } .enum-badge-primary { background: color-mix(in srgb, var(--fc-primary) 20%, var(--fc-surface)); color: var(--dxds-primary-120); border-color: color-mix(in srgb, var(--fc-primary) 50%, var(--fc-border)); } .contact-role-badges { padding-top: 5px; } .grid-content{ padding-top:11px; } .dxbl-fl .dxbl-text-edit, .dxbl-fl .dxbl-spin-edit, .dxbl-fl .dxbl-date-edit, .dxbl-fl .dxbl-combobox, .dxbl-fl .dxbl-memo { border-radius: 10px !important; overflow: hidden; } .dxbl-fl .dxbl-text-edit .dxbl-btn:last-child, .dxbl-fl .dxbl-spin-edit .dxbl-btn:last-child, .dxbl-fl .dxbl-date-edit .dxbl-btn:last-child, .dxbl-fl .dxbl-combobox .dxbl-btn:last-child { border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; } .dxbl-fl .dxbl-text-edit { --dxbl-text-edit-underline-color: transparent !important; border-bottom-color: var(--dxbl-text-edit-border-color) !important; } .dxbl-fl .dxbl-text-edit:focus-within, .dxbl-fl .dxbl-spin-edit:focus-within, .dxbl-fl .dxbl-date-edit:focus-within, .dxbl-fl .dxbl-combobox:focus-within, .dxbl-fl .dxbl-memo:focus-within { border-color: var(--fc-brand) !important; box-shadow: var(--fc-focus-ring) !important; } /* Issue #265: één hoogte voor velden, schakelaars en keuzebadges (--fc-field-height), zodat velden naast elkaar op één lijn blijven. Eerst 42px; dat oogde log, nu 34px. Een memo houdt zijn eigen hoogte (rijen). */ :root { --fc-field-height: 34px; } .dxbl-fl .dxbl-text-edit:not(.dxbl-memo):not(.dxbl-checkbox) { min-height: var(--fc-field-height); } .dxbl-fl .dxbl-text-edit.dxbl-focused, .dxbl-fl .dxbl-text-edit:focus-within { --dxbl-text-edit-underline-focused-color: transparent !important; --dxbl-text-edit-underline-color: transparent !important; } .dxbl-text-edit.dxbl-disabled { --dxbl-text-edit-bg: var(--dxbl-text-edit-disabled-bg, --dxbl-text-edit-bg); --dxbl-text-edit-color: var(--dxbl-text-edit-color); --dxbl-text-edit-border-color: var(--dxbl-text-edit-disabled-border-color); --dxbl-text-edit-underline-color: var(--dxbl-text-edit-border-color); /*background-color: #f6f9fc;*/ background-color: var(--focara-app-bg, var(--bg-soft)) !important; } .dxbl-fl .dxbl-fl-cpt { width: auto; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; line-height: var(--dxbl-fl-caption-line-height); margin: 0; /* Issue #265: gewone schrijfwijze in de tekstkleur, zoals een label in een formulier; de kleine grijze hoofdletters lazen moeizaam en gaven weinig contrast. */ color: var(--fc-text) !important; font-size: 0.8125rem; font-weight: 500; } /* Een lang bijschrift in een smalle kolom ("Tekstkleur op primaire kleur (leeg = automatisch)" naast de primaire kleur) liep met width:auto en de nowrap van .dxbl-text over de rand van de card; nu breekt het af binnen zijn kolom. */ .dxbl-fl .dxbl-fl-cpt, .dxbl-fl .dxbl-fl-cpt.dxbl-text { max-width: 100%; white-space: normal; } .main-toolbar { padding-right: 1rem; padding-left: 1rem; border-width: 1px; border-style: solid; border-color: var(--fc-card-border); /* Issue #266: dezelfde hoeken en schaduw als de kaarten eronder (was 10px zonder schaduw). */ border-radius: var(--fc-radius-card); box-shadow: var(--fc-card-shadow); background-color: var(--fc-surface); padding: 16px; } #applicationLoadingPanel img { width: 120px !important; height: 120px !important; max-width: none !important; max-height: none !important; border-radius: 50% !important; object-fit: contain; } .nested-toolbar:empty, .main-toolbar:empty { padding: 0 !important; border-width: 0px; box-shadow: none; } /* ============================================================ Detail View popup � slide in from right ============================================================ */ @keyframes focara-popup-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes focara-popup-slide-out { from { transform: translateX(0); } to { transform: translateX(100%); } } dxbl-modal-dialog.focara-detail-popup { top: 0 !important; right: 0 !important; left: auto !important; bottom: 0 !important; margin: 0 !important; border-radius: 0 !important; position: fixed !important; box-shadow: -4px 0 32px var(--fc-shadow-strong) !important; animation: focara-popup-slide-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards; } dxbl-modal-dialog.focara-detail-popup.focara-popup-closing { animation: focara-popup-slide-out 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; } dxbl-modal-dialog.focara-detail-popup dxbl-popup-resizable-container { --dxbl-popup-resize-container-width: 80vw !important; --dxbl-popup-resize-container-height: 100vh !important; width: 80vw !important; height: 100vh !important; } .dxbl-group > .dxbl-group-header { z-index: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-family: var(--dxbl-group-header-font-family); font-size: var(--dxbl-group-header-font-size); line-height: var(--dxbl-group-header-line-height); font-weight: var(--dxbl-group-header-font-weight); padding: 0px; margin-bottom: 0; border-radius: var(--dxbl-group-header-border-radius); color: var(--dxbl-group-header-color); background-color: var(--dxbl-group-header-bg); } dxbl-tabs:not(.dxbl-ribbon *) .dxbl-tabs-content-panel .dxbl-tabs-content { -webkit-box-flex: 1; -webkit-flex: 1 0 100%; -ms-flex: 1 0 100%; flex: 1 0 100%; width: 100%; border-width: 0px; border-color: var(--fc-border); border-radius: 10px; border-style: solid; padding: 0px; } /* ========================================================= Tabbladen als schakelbalk (issue #265, stijl C) De tabs staan samen in een licht vlak; de actieve tab is een wit "knopje" met schaduw. De inhoud eronder heeft geen eigen kader: de groepen en lijsten erin zijn zelf al kaarten, dus een kader eromheen gaf "kader in kader". :not(.dxbl-ribbon *): de toolbar van de RTF-editor (DxRichEdit) is intern een ribbon die ook dxbl-tabs gebruikt; die blijft zoals DevExpress hem tekent. ========================================================= */ .dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-tablist { background: none; padding: 0; } .dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-tablist ul { display: inline-flex; width: auto; max-width: 100%; gap: 2px; padding: 4px !important; border: 1px solid var(--fc-border); border-radius: 11px; background-color: var(--fc-surface-subtle); } .dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-tablist .dxbl-tabs-item { border: none; /* !important omdat de DevExpress-tabregel (1.8px) anders wint. */ border-radius: 8px !important; background-color: transparent; color: var(--fc-text-muted); font-weight: 500; } .dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-tablist .dxbl-tabs-item:hover { background-color: var(--fc-hover); color: var(--fc-text); } .dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-tablist .dxbl-tabs-item.dxbl-active { background-color: var(--fc-surface); color: var(--fc-text); font-weight: 600; box-shadow: 0 1px 2px var(--fc-shadow-strong); } /* Donker: oppervlak en balk liggen dicht bij elkaar; de actieve tab iets lichter, zodat hij zichtbaar "boven" ligt. */ body.dxbl-theme-dark .dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-tablist .dxbl-tabs-item.dxbl-active { background-color: color-mix(in srgb, var(--fc-text) 12%, var(--fc-surface)); } /* De Fluent-onderstreping van de actieve tab vervalt: het witte knopje laat zien welke actief is. */ .dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-tablist .dxbl-tabs-item::after { display: none; } .dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-content-panel { border: none; border-radius: 0; padding: 12px 0 0; background-color: transparent; } /* Een lijst of genest detailscherm op een tabblad is zelf een kaart, met de oppervlaktekleur (wit, in donker donkergrijs). */ .dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *) > .dxbl-tabs-content-panel .main-content.xaf-flex-auto { background-color: var(--fc-surface); } .dxbl-theme-fluent .main-content.xaf-flex-auto { padding: 1rem; border-width: 1px; border-color: var(--fc-card-border); border-radius: var(--fc-radius-card); border-style: solid; background-color: var(--fc-surface); box-shadow: var(--fc-card-shadow); } /* Issue #265: een detailscherm zelf is geen kaart; de groepen erin zijn de kaarten en liggen direct op de achtergrond. Een lijst (ListView) houdt zijn kaart. */ #main-view-content > .main-content.xaf-flex-auto.focara-detailview-body:has(> .focara-detailview-main > .detail-view-content) { /* Een paar px opzij voor de focusrand en schaduw; clip vangt de negatieve marges van de rijen op, die anders een horizontale schuifbalk gaven. */ padding: 0 4px; overflow-x: clip; /* Altijd plaats voor de schuifbalk: de kaarten verspringen niet als het scherm langer wordt, en de dossierbalk erboven (.focara-dossier-wrap) eindigt op dezelfde plek. */ scrollbar-gutter: stable; border: none; background-color: transparent; box-shadow: none; } /* Issue #278: ook in een venster is een detailscherm zelf geen kaart. Daar bleef het een kader met rand en schaduw om de kaarten én het infopaneel, zodat het paneel (en de kaarten) er anders uitzagen dan in het hoofdscherm. */ .dxbl-modal .main-content.xaf-flex-auto.focara-detailview-body:has(> .focara-detailview-main > .detail-view-content) { /* Boven en onder wat ruimte: zonder scrolde het venster een paar px (de kaarten staken net buiten het kader). */ padding: 8px 4px; overflow-x: clip; border: none; background-color: transparent; box-shadow: none; } /* Issue #266: een lijst (een lijstscherm als Offertes, of een lijst op een tabblad als de offerteregels): de lijnen van het grid lopen van rand tot rand van de kaart. De kaart had aan beide kanten 14.4px binnenruimte, waardoor de lijnen ergens binnen de kaart begonnen en eindigden. De tekst houdt dezelfde afstand tot de rand via de eerste en laatste cel en de filterbalk. */ .main-content.xaf-flex-auto.focara-detailview-body:has(> .focara-detailview-main .dxbl-grid):not(:has(> .focara-detailview-main > .detail-view-content)) { padding-left: 0; padding-right: 0; padding-top: 0; } /* Boven de filterbalk stond de binnenruimte van de kaart, van grid-content (XAF) en van de filterbalk zelf op elkaar (37px); nu alleen die van de filterbalk, ongeveer even veel als opzij. */ .main-content.xaf-flex-auto.focara-detailview-body:not(:has(> .focara-detailview-main > .detail-view-content)) > .focara-detailview-main > .grid-content { padding-top: 0; } .main-content.xaf-flex-auto.focara-detailview-body:not(:has(> .focara-detailview-main > .detail-view-content)) .dxbl-grid-toolbar-container { padding-left: 14px; padding-right: 14px; } .main-content.xaf-flex-auto.focara-detailview-body:not(:has(> .focara-detailview-main > .detail-view-content)) .dxbl-grid tr > :first-child { padding-left: 14px; } .main-content.xaf-flex-auto.focara-detailview-body:not(:has(> .focara-detailview-main > .detail-view-content)) .dxbl-grid tr > :last-child { padding-right: 14px; } /* Een lijst op een tabblad (offerteregels, deelnemers): werkbalk en tabel samen in één kaart, in plaats van twee losse kaders onder elkaar. */ .dxbl-fl .dxbl-fl-ctrl:has(> .main-content.xaf-flex-auto) { border: 1px solid var(--fc-card-border); border-radius: var(--fc-radius-card); background-color: var(--fc-surface); box-shadow: var(--fc-card-shadow); overflow: hidden; } /* Issue #278: een lijst die zelf in een kaart staat (Rollen bij een gebruiker) houdt zijn rand, maar niet nog een schaduw: dat gaf een kaart in een kaart met een dubbele schaduw. */ .dxbl-fl .dxbl-group .dxbl-fl-ctrl:has(> .main-content.xaf-flex-auto) { box-shadow: none; } .dxbl-fl .dxbl-fl-ctrl:has(> .main-content.xaf-flex-auto) > .main-toolbar, .dxbl-fl .dxbl-fl-ctrl:has(> .main-content.xaf-flex-auto) > .main-content.xaf-flex-auto { border: none; border-radius: 0; box-shadow: none; margin-top: 0; } /* Issue #266: ook onder de knoppen wat ruimte; zonder stond de filterbalk of de kop van het grid direct tegen de knoppen. Issue #283: iets meer (was 8px); de kop van het grid stond nog net te dicht op de knoppen. */ .dxbl-fl .dxbl-fl-ctrl:has(> .main-content.xaf-flex-auto) > .main-toolbar:not(:empty) { padding: 12px 16px 14px; } /* Issue #283: de rand staat om knoppen en lijst samen; zonder knoppen valt die precies boven de kolomkoppen. Met knoppen erboven krijgt de lijst zelf een lijn aan de bovenkant, anders liepen knoppen en kolomkoppen in elkaar over. */ .dxbl-fl .dxbl-fl-ctrl:has(> .main-content.xaf-flex-auto) > .main-toolbar:not(:empty) + .main-content.xaf-flex-auto { border-top: 1px solid var(--dxbl-grid-border-color, var(--fc-border)); } /* Issue #266: de stappen van Contacten importeren (ContactImportView) als kaart, zoals de layoutgroepen. */ .focara-import-card { padding: 18px 22px; border: 1px solid var(--fc-card-border); border-radius: var(--fc-radius-card); background: var(--dxbl-fl-group-bg, var(--fc-surface)); box-shadow: var(--fc-card-shadow); } .focara-import-card > strong:first-child { font-size: 1rem; } /* Issue #266: het detail onder een lijst (ListViewAndDetailView, o.a. Instellingen > Algemeen). DevExpress geeft de houder alleen rechts ruimte; de lijstkaart zelf heeft geen binnenruimte meer (grid van rand tot rand), dus de kaart van het detail stond links tegen de rand en werd daar afgesneden. Nu rondom ruimte. */ .xaf-masterdetail-detailview-holder { padding: 14px 16px 0 !important; } /* DevExpress geeft het detailvak minstens 300px; een kort detail (een btw-tarief) liet daaronder een lege strook. Met een gekozen record is het vak zo hoog als het detail; zonder record houdt de melding "Select an item" haar ruimte. */ .xaf-masterdetail-view.xaf-masterdetail-detailview:has(.xaf-masterdetail-detailview-holder:not(.masterdetail-hidden)) { min-height: 0 !important; } .xaf-masterdetail-detailview-holder .dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-body { padding-bottom: 0 !important; } /* Het detail ligt al in de lijstkaart: de groepen erin zijn plat (geen rand, schaduw of eigen vlak), net als een groep op een tabblad. */ .xaf-masterdetail-detailview-holder .dxbl-fl .dxbl-fl-group > .dxbl-group { --dxbl-group-border-width: 0 !important; border: none !important; box-shadow: none; background: transparent; } /* Issue #266: tabbladen in een scherm zijn samen met hun inhoud één kaart. Eerst stond de tabbalk los boven een aparte kaart met de lijst, iets smaller dan de kaarten erboven, en leek alles te zweven. Nu: de kaart van rand tot rand (gelijk met de kaarten erboven), de tabbalk als kop met een lijn eronder, en een lijst op een tabblad zonder eigen kaart en zonder binnenruimte, zodat werkbalk en tabel direct in de kaart staan. Het sectiemenu (#focara-section-menu) en de ribbon van de RTF-editor houden hun eigen vorm. */ .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) { border: 1px solid var(--fc-card-border); border-radius: var(--fc-radius-card); background: var(--dxbl-fl-group-bg, var(--fc-surface)); box-shadow: var(--fc-card-shadow); overflow: clip; } /* Zijn alle tabbladen verborgen (bv. een contactpersoon, #119), dan tekent XAF de tabgroep toch: nu een lege kaart. Weg. */ .dxbl-fl .dxbl-fl-gt:has(> dxbl-tabs):not(:has(> dxbl-tabs > .dxbl-tabs-tablist .dxbl-tabs-item)) { display: none; } .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) > .dxbl-tabs-tablist { padding: 0 12px; border-bottom: 1px solid var(--fc-border); } /* Issue #305: de tabbladen in een kaart (lijsten onderaan een scherm) zijn onderstreepte tabs, geen schakelbalk met knopjes (#265): het zijn kopjes boven de lijst, geen acties. De actieve tab in de primaire kleur met een streep eronder, de andere grijs. De streep is een schaduw aan de binnenkant, zodat hij precies op de lijn van de tabbalk valt. */ .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) > .dxbl-tabs-tablist ul { gap: 4px; padding: 0 !important; border: none; border-radius: 0; background: none; } .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) > .dxbl-tabs-tablist .dxbl-tabs-item { min-height: 46px; padding-left: 12px; padding-right: 12px; border-radius: 0 !important; background-color: transparent; box-shadow: none; color: var(--fc-text-muted); font-weight: 500; } .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) > .dxbl-tabs-tablist .dxbl-tabs-item:hover { background-color: transparent; color: var(--fc-text); box-shadow: inset 0 -2px 0 var(--fc-border); } .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) > .dxbl-tabs-tablist .dxbl-tabs-item.dxbl-active, body.dxbl-theme-dark .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) > .dxbl-tabs-tablist .dxbl-tabs-item.dxbl-active { background-color: transparent; color: var(--fc-primary); font-weight: 600; box-shadow: inset 0 -2px 0 var(--fc-primary); } /* Issue #305: het aantal in een tab met een lijst ("Deelnemers 24"; TabCountsController). */ .focara-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; margin-left: 8px; padding: 0 7px; box-sizing: border-box; border-radius: 10px; background-color: var(--fc-surface-subtle); color: var(--fc-text-muted); font-size: 12px; font-weight: 600; line-height: 1; } .dxbl-tabs-item.dxbl-active .focara-tab-count { background-color: color-mix(in srgb, var(--fc-primary) 14%, var(--fc-surface)); color: var(--fc-primary); } /* Issue #311: het icoon van de actieve tab in dezelfde groene kleur als de tekst. De iconen zijn (zwarte lijntekening) en volgen de tekstkleur niet; in donker maakt de algemene regel ze wit, en dan stond een wit icoon naast groene tekst. Zelfde filters als het groene Opslaan-icoon (#303). */ .dxbl-tabs-item.dxbl-active img[src*="IImageService/ap-"] { filter: brightness(0) saturate(100%) invert(33%) sepia(24%) saturate(800%) hue-rotate(118deg) brightness(92%); opacity: 1; } :root[data-theme="dark"] .dxbl-tabs-item.dxbl-active img[src*="IImageService/ap-"], .dxbl-theme-dark .dxbl-tabs-item.dxbl-active img[src*="IImageService/ap-"] { filter: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(520%) hue-rotate(115deg) brightness(98%); } /* Issue #309: een lijst op een tabblad zonder knoppen (Verzonden versies) begon direct onder de tabs; de lege werkbalk was 0px hoog. Nu wat ruimte met een lijn erboven, kleiner dan een werkbalk met knoppen (55px): een lege strook zo hoog als de knoppen zag er raar uit. */ .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) .dxbl-fl-ctrl:has(> .main-content.xaf-flex-auto) > .main-toolbar:empty { display: block; height: 20px; } .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) .dxbl-fl-ctrl:has(> .main-content.xaf-flex-auto) > .main-toolbar:empty + .main-content.xaf-flex-auto { border-top: 1px solid var(--dxbl-grid-border-color, var(--fc-border)); } /* Issue #310: de pakketonderdelen onder een uitgeklapte offerteregel (QuoteLinePackageItemsDetailGrid) beginnen onder de kolom Omschrijving, niet bij het uitklappijltje, en zonder de ruime marge erboven. 157px = de kolommen uitklappen (32), selecteren (50) en omhoog/omlaag (75). */ .dxbl-grid-detail-cell:has(.fc-package-items-detail-grid) { padding: 6px 14px 14px 157px !important; } .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) > .dxbl-tabs-content-panel { padding: 0; } .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) .dxbl-fl-ctrl:has(> .main-content.xaf-flex-auto) { border: none; border-radius: 0; box-shadow: none; background: transparent; } /* Een groep direct op een tabblad (bv. Inleiding bij Teksten bevestiging) is geen tweede kaart in de tabkaart. */ .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) .dxbl-fl-tab-content > .dxbl-row > .dxbl-fl-group > .dxbl-group { --dxbl-group-border-width: 0 !important; border: none !important; box-shadow: none; background: transparent; } /* Alleen een lijst op het tabblad: die van rand tot rand. Andere tabbladen (velden, een editor) houden hun binnenruimte. */ .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) .dxbl-fl-tab-content:has(> .dxbl-row > .dxbl-fl-item:only-child > .dxbl-fl-ctrl > .main-content.xaf-flex-auto) { padding: 0; } .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) .dxbl-fl-tab-content:has(> .dxbl-row > .dxbl-fl-item:only-child > .dxbl-fl-ctrl > .main-content.xaf-flex-auto) > .dxbl-row { margin: 0; } .dxbl-fl dxbl-tabs.dxbl-tabs-top:not(.dxbl-ribbon *):not(#focara-section-menu > dxbl-tabs) .dxbl-fl-tab-content:has(> .dxbl-row > .dxbl-fl-item:only-child > .dxbl-fl-ctrl > .main-content.xaf-flex-auto) > .dxbl-row > .dxbl-fl-item { padding: 0; margin: 0; } /*.dxbl-theme-fluent .main-content.xaf-flex-auto { padding-top: 0.5rem; padding-bottom: 1rem;*/ /* border-width: 1px; */ /*border-color: lightgray;*/ /* border-radius: 10px; */ /* border-style: solid; */ /*background-color: #fff; background-color: #f6f9fc; }*/ /* In een popup (bv. Offerteregel) geen lichtblauwe achtergrond: daar is de inhoud gewoon de popup zelf, anders zie je een lichte strook boven de eerste groep. Transparant, zodat de achtergrond van de popup doorloopt. */ .dxbl-modal .main-content.xaf-flex-auto, .dxbl-popup .main-content.xaf-flex-auto { background-color: transparent; } /* Inhoud (tabbladen, groepen, grids) links én rechts op één lijn met de werkbalkkaart erboven: zonder dit begon en eindigde de inhoud 14.4px binnen de werkbalk. */ .dxbl-theme-fluent .main-content.xaf-flex-auto.focara-detailview-body { /*padding-left: 0; padding-right: 0;*/ } /* Ruimte tussen werkbalk en inhoud: alleen als de werkbalk iets toont. Een verborgen of lege werkbalk (bv. Instellingen > Algemeen) laat een lege .main-toolbar achter (:empty, zie hierboven); dan begint de inhoud gelijk met de navigatie ernaast. */ .dxbl-theme-fluent .main-toolbar:not(:empty) + .main-content.xaf-flex-auto { margin-top: 1rem; } /* Issue #283: een lijst zonder filterknoppen (Producten) begon in zijn kaart direct met de kolomkoppen; die krijgt bovenin ruimte, zoals de filterknoppen die bij de andere lijsten hebben (.dxbl-grid-toolbar-container). */ .dxbl-theme-fluent .main-content.xaf-flex-auto:has(> .focara-detailview-main > .grid-content):not(:has(.status-toolbar)):not(.dxbl-fl *) { padding-top: 12px; } .dxbl-btn-toolbar.dxbl-toolbar-btn-ellipsis > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar.dxbl-toolbar-btn-ellipsis > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-adaptive-container-content.dxbl-toolbar-btn-ellipsis > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-adaptive-container-content.dxbl-toolbar-btn-ellipsis > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-toolbar-item > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-toolbar-item > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group.dxbl-toolbar-btn-ellipsis > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary), .dxbl-btn-toolbar > .dxbl-toolbar-item > .dxbl-btn-split:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) > .dxbl-btn, .dxbl-btn-toolbar > .dxbl-toolbar-item > .dxbl-btn:not(.dxbl-ribbon-item-split):not(.dxbl-ribbon-item-primary) { --dxbl-btn-padding-x-s: var(--dxds-spacing-40); --dxbl-btn-padding-x-m: calc(var(--dxds-spacing-60) - var(--dxds-spacing-10)); --dxbl-btn-padding-x-l: var(--dxds-spacing-120); --dxbl-btn-text-color: var(--dxds-color-content-neutral-subdued-rest); --dxbl-btn-outline-color: var(--dxds-color-content-neutral-subdued-rest); --dxbl-btn-secondary-color: var(--dxds-color-content-neutral-subdued-rest); --dxbl-btn-font-weight: var(--dxds-font-weight-base-default); --dxbl-btn-secondary-hover-bg: var(--dxds-color-surface-neutral-default-hovered); --dxbl-btn-secondary-active-bg: var(--dxds-color-surface-neutral-default-selected); --dxbl-btn-text-hover-bg: var(--dxds-color-surface-neutral-default-hovered); --dxbl-btn-text-active-bg: var(--dxds-color-surface-neutral-default-selected); padding-left: 9px; padding-right: 9px; border-radius: 10px; } /* Gallery masonry override. Desktop-kolommen worden direct inline op .photo-thumbnails gezet door PhotoGalleryComponent. Responsive kolommen worden per instance met media rules gezet. */ .photo-gallery .photo-thumbnails.photo-layout-masonry { display: block !important; column-count: 3 !important; grid-template-rows: none !important; gap: 0 !important; column-gap: var(--pg-gap, 12px) !important; } .photo-gallery .photo-thumbnails.photo-layout-masonry .photo-thumbnail { display: inline-block !important; width: 100% !important; break-inside: avoid-column !important; margin-bottom: var(--pg-gap, 12px) !important; vertical-align: top; } /* Gallery uniform grid override. Desktop-kolommen worden direct inline op .photo-thumbnails gezet door PhotoGalleryComponent. Responsive kolommen worden per instance met media rules gezet. */ .photo-gallery .photo-thumbnails.photo-layout-uniformgrid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--pg-gap, 10px) !important; } /* Uitgevuld (justified): rijen die precies de breedte vullen, elke foto in zijn eigen verhouding. js/justified-gallery.js rekent de rijen uit en zet per kaart --pg-flex (vaste breedte) en --pg-h (rijhoogte), met --pg-row-height (per kolomaantal gezet door PhotoGalleryComponent) als doelhoogte. Zonder script: rijen van doelhoogte met gelijk meegroeiende kaarten. Het ::after-element vult een niet-uitgevulde laatste rij op. */ .photo-gallery .photo-thumbnails.photo-layout-justified { display: flex !important; flex-wrap: wrap !important; gap: var(--pg-gap, 10px) !important; grid-template-columns: none !important; columns: auto !important; } .photo-gallery .photo-thumbnails.photo-layout-justified::after { content: ""; flex-grow: 999; } .photo-gallery .photo-thumbnails.photo-layout-justified .photo-thumbnail { flex: var(--pg-flex, 1 1 var(--pg-row-height, 280px)); min-width: 0; height: var(--pg-h, var(--pg-row-height, 280px)); display: flex; flex-direction: column; margin: 0 !important; } .photo-gallery .photo-thumbnails.photo-layout-justified .photo-thumbnail-media { flex: 1 1 auto; min-height: 0; height: 100%; } .photo-gallery .photo-thumbnails.photo-layout-justified .photo-thumbnail img { height: 100% !important; width: 100% !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; object-fit: cover !important; display: block; } /* Op een smal scherm liever één foto per rij over de volle breedte dan kleine uitsneden. */ @media (max-width: 575.98px) { .photo-gallery .photo-thumbnails.photo-layout-justified .photo-thumbnail { flex-basis: 100%; height: auto; } .photo-gallery .photo-thumbnails.photo-layout-justified .photo-thumbnail img { width: 100% !important; height: auto !important; } } .main-content > div:has(.dxbl-scheduler) { max-width: 100%; max-height: 100%; display: block !important; } /* ?? Info panel layout ???????????????????????????????????????????????? */ .focara-detailview-body { display: flex; flex-direction: row; align-items: flex-start; gap: 1rem; } .focara-detailview-main { flex: 1 1 0; min-width: 0; } /* Issue #344: de kopregel onder de werkbalk van een detailscherm: status, stap, bedrag en de belangrijkste gegevens, rechts Vernieuwen, Help, Favoriet en "Details". Zelfde goot als de dossierbalk eronder (.focara-dossier-wrap), zodat hij rechts gelijk eindigt met de kaarten. */ .focara-info-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 0 4px 12px; overflow-y: hidden; scrollbar-gutter: stable; flex: none; font-family: var(--dxds-font-family-sans-serif); font-size: 0.875rem; color: var(--fc-text); } /* In een venster: de kopregel los onder de werkbalk van het venster. */ .main-toolbar:not(:empty) + .focara-info-header { margin-top: 0.75rem; } /* Issue #345: de recordkop van een detailscherm in het hoofdvenster: werkbalk, kopregel en dossierketen in één platte witte band over de volle breedte, strak tegen de kop en het menu, met alleen een lijn eronder (geen kaart). */ .focara-recordkop { flex: none; margin: -10px -10px 0; padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--fc-surface); border-bottom: 1px solid var(--fc-card-border); } .focara-recordkop.is-collapsed, .focara-recordkop.is-list { padding-bottom: 10px; } /* In een venster strak tegen de kop en de zijkanten van het venster (de binnenruimte van DevExpress), net als in het hoofdvenster. */ .dxbl-modal-body .focara-recordkop.is-popup { /* Boven: de binnenruimte van het venster (0.225rem; geen eigen variabele) en de 8px marge onder de titelbalk, zodat de band direct op de titelbalk aansluit. */ margin: calc(-0.225rem - 8px) calc(-1 * var(--dxbl-popup-body-padding-x, 0px)) 0; padding: 10px var(--dxbl-popup-body-padding-x, 16px); } /* Een venster zonder knoppen maar met een kopregel: de kopregel zonder lijn erboven. */ .focara-recordkop.is-popup > .main-toolbar:empty + .focara-info-header { padding-top: 0; border-top: 0; } /* Een lijst of dashboard zonder knoppen (Instellingen > Algemeen): geen lege witte band; de inhoud begint dan gelijk met het menu. */ .focara-recordkop:has(> .main-toolbar:empty):not(:has(> .focara-info-header)) { display: none; } .focara-recordkop:has(> .main-toolbar:empty):not(:has(> .focara-info-header)) + .main-content.xaf-flex-auto { margin-top: 0; } .focara-recordkop + .main-content.xaf-flex-auto { margin-top: 16px; } /* De werkbalk zelf is in de band geen kaart. */ .focara-recordkop > .main-toolbar.focara-recordkop__bar { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; } .focara-recordkop__toolbar, .focara-recordkop.is-list > .main-toolbar > * { flex: 1 1 auto; min-width: 0; } .focara-recordkop__side { flex: none; display: flex; align-items: center; gap: 8px; } .focara-recordkop__icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--fc-border); border-radius: 9px; background: var(--fc-surface); color: var(--fc-text); cursor: pointer; } .focara-recordkop__icon-btn:hover { background: color-mix(in srgb, var(--fc-text) 8%, var(--fc-surface)); } .focara-recordkop__icon-btn:focus-visible { outline: none; box-shadow: var(--fc-focus-ring); } .focara-recordkop__divider { width: 1px; height: 22px; background: var(--fc-border); } /* Ingeklapt: status en stap klein naast de knoppen. */ .focara-recordkop__mini { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; white-space: nowrap; } .focara-recordkop__mini-step { font-size: 0.8rem; color: var(--fc-text-muted); } /* Kopregel en keten in de band: een lijn onder de werkbalk, geen eigen goot of ruimte. */ .focara-recordkop > .focara-info-header { padding: 10px 0 0; border-top: 1px solid var(--fc-border); overflow: visible; scrollbar-gutter: auto; } .focara-recordkop > .focara-dossier-wrap { padding: 0; overflow: visible; scrollbar-gutter: auto; } /* Zonder kopregel (een scherm zonder informatie) krijgt de keten de lijn. */ .focara-recordkop > .main-toolbar + .focara-dossier-wrap { padding-top: 10px; border-top: 1px solid var(--fc-border); } .app.collapse-toggle .focara-info-header { scrollbar-gutter: stable both-edges; } .focara-info-header__main { flex: 1 1 480px; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; } .focara-info-header__status { display: inline-flex; align-items: center; gap: 10px; } .focara-info-header__steps { display: inline-flex; align-items: center; gap: 3px; } .focara-info-header__segment { width: 20px; height: 5px; border-radius: 3px; background: var(--fc-border-strong); } .focara-info-header__segment.is-done, .focara-info-header__segment.is-current { background: var(--fc-brand-solid); } .focara-info-header__segment.is-stopped { background: var(--fc-danger-text); } .focara-info-header__step-text, .focara-info-header__amount-label { margin-left: 6px; font-size: 0.8rem; color: var(--fc-text-muted); } .focara-info-header__amount { display: inline-flex; align-items: baseline; white-space: nowrap; font-variant-numeric: tabular-nums; } .focara-info-header__amount strong { font-size: 0.95rem; font-weight: 700; } .focara-info-header__item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 320px; white-space: nowrap; } .focara-info-header__item > img { flex: none; opacity: .75; } /* Het bijschrift ("Contact", "Klaar") gedempt voor de waarde: zonder is "1 van 2" niet te plaatsen. */ .focara-info-header__label { flex: none; color: var(--fc-text-muted); } .focara-info-header__value, .focara-info-header__link { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Een verwijzing (klant, project) is een knop die het record opent; hij ziet eruit als een link. */ .focara-info-header__link { border: 0; padding: 0; background: transparent; font: inherit; color: var(--fc-brand-text); text-decoration: none; cursor: pointer; } .focara-info-header__link:hover { text-decoration: underline; } .focara-info-header__side { display: flex; align-items: center; gap: 8px; margin-left: auto; } .focara-info-header__details { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--fc-border); border-radius: 9px; background: var(--fc-surface); color: var(--fc-text); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; } .focara-info-header__details:hover { background: color-mix(in srgb, var(--fc-text) 8%, var(--fc-surface)); } .focara-info-header__details.is-open { background: var(--fc-brand-tint); border-color: var(--fc-brand-tint-strong); color: var(--fc-brand-text); } .focara-info-header__details:focus-visible, .focara-info-header__link:focus-visible, .focara-info-drawer__close:focus-visible { outline: none; box-shadow: var(--fc-focus-ring); border-radius: 6px; } /* Issue #344: de lade "Details". Hij ligt over de inhoud aan de rechterkant van het hoofdvenster (#main-view-content), niet ernaast: kaarten en lijsten houden hun breedte. Hij scrolt zelf; de inhoud eronder blijft staan. */ #main-view-content { position: relative; } .focara-info-drawer { position: absolute; top: 10px; right: 10px; bottom: 10px; z-index: 20; width: 380px; max-width: calc(100% - 20px); box-sizing: border-box; display: flex; flex-direction: column; background: var(--fc-surface); border: 1px solid var(--fc-card-border); border-radius: var(--fc-radius-card); box-shadow: 0 12px 40px var(--fc-shadow-strong), 0 2px 6px var(--fc-shadow); animation: focara-drawer-in .18s ease-out; } @keyframes focara-drawer-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .focara-info-drawer { animation: none; } } .focara-info-drawer__head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px 20px; border-bottom: 1px solid var(--fc-border); } .focara-info-drawer__title { flex: 1; margin: 0; font-size: 1rem; font-weight: 600; } .focara-info-drawer__close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--fc-text-muted); cursor: pointer; } .focara-info-drawer__close:hover { background: var(--fc-hover); color: var(--fc-text); } /* Op een telefoon de volle breedte. */ @media (max-width: 575.98px) { .focara-info-drawer { top: 0; right: 0; bottom: 0; width: 100%; max-width: none; border-radius: 0; } } .focara-info-panel { /* Issue #170: het lettertype van de formulieren (bijschriften en velden), niet het Inter van de pagina. */ font-family: var(--dxbl-fl-font-family, var(--dxds-font-family-sans-serif)); flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1.25rem 1.25rem; font-size: 0.875rem; } /* Issue #267: de samenvatting bovenaan het paneel. */ .focara-summary { display: flex; flex-direction: column; gap: 14px; padding-bottom: 1.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--fc-border); font-family: var(--dxds-font-family-sans-serif); } .focara-summary__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .focara-summary__label { color: var(--fc-text-muted); font-size: 0.8125rem; } .focara-summary__top .enum-badge { font-size: 0.75rem; font-weight: 600; padding: 4px 10px; } .focara-summary__amount { margin-top: -8px; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; } .focara-summary__lines { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin: 0; font-size: 0.8125rem; font-variant-numeric: tabular-nums; } .focara-summary__lines dt { color: var(--fc-text-muted); font-weight: 400; } .focara-summary__lines dd { margin: 0; text-align: right; } /* Het verloop: een bolletje per stap met een lijntje ertussen. Gedaan = gevuld groen met vinkje, huidig = groene ring, nog niet = grijze ring, gestopt = rode ring. */ .focara-summary__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .focara-summary__step { position: relative; display: flex; align-items: center; gap: 12px; min-height: 34px; color: var(--fc-text-muted); } .focara-summary__step:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 26px; bottom: -8px; width: 2px; background: var(--fc-border); } .focara-summary__step.is-done:not(:last-child)::after { background: var(--fc-brand); } .focara-summary__dot { box-sizing: border-box; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--fc-border-strong); background: var(--fc-surface); display: grid; place-items: center; } .focara-summary__step.is-done { color: var(--fc-text); } .focara-summary__step.is-done .focara-summary__dot { border-color: var(--fc-brand-solid); background: var(--fc-brand-solid); } .focara-summary__step.is-done .focara-summary__dot::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .focara-summary__step.is-current { color: var(--fc-text); font-weight: 600; } .focara-summary__step.is-current .focara-summary__dot { border-color: var(--fc-brand); } .focara-summary__step.is-current .focara-summary__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fc-brand); } .focara-summary__step.is-stopped { color: var(--fc-danger-text); font-weight: 600; } .focara-summary__step.is-stopped .focara-summary__dot { border-color: var(--fc-danger-text); } /* Zonder informatie eronder (product, albumstijl…) geen scheidingslijn onder de knoppen. */ .focara-summary:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .focara-info-panel__header { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--fc-text); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--fc-border); } .focara-info-panel__group-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fc-text-muted); } .focara-info-panel__group-toggle { width: 100%; border: 0; background: transparent; padding: 0; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; cursor: pointer; text-align: left; } .focara-info-panel__group-toggle .dx-icon { font-size: 0.85rem; color: var(--fc-text-muted); } .focara-info-panel__group-toggle-icon { flex: 0 0 auto; transition: transform .2s ease; } .focara-info-panel__group-toggle-icon.is-expanded { transform: rotate(90deg); } .focara-info-panel__group-card { border: 1px solid var(--fc-border); border-radius: 10px; padding: 0.75rem; margin-bottom: 0.75rem; background: var(--fc-surface); } .focara-info-panel__group-list { margin: 0; } .focara-info-panel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .focara-info-panel__item { display: flex; flex-direction: column; gap: 0.35rem; /* Issue #170: wat lucht tussen bijschrift en waarde */ border-style: solid; border-width: 1px; border-color: var(--fc-border); padding: 12px; border-radius: 10px; } /* Issue #170/#265: zoals de bijschriften van velden in de app (.dxbl-fl-cpt), maar gedempt: het paneel is naslag. */ .focara-info-panel__label { display: flex; align-items: center; gap: 0.4rem; color: var(--fc-text-muted); font-size: 0.8125rem; font-weight: 500; } .focara-info-panel__label > :first-child:not(:only-child) { flex: 0 0 auto; } /* De waarde zoals de tekst in een veld: normaal gewicht. */ .focara-info-panel__value { font-weight: 400; color: var(--fc-text); word-break: break-word; } .focara-info-panel__image { display: block; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--fc-border); } .focara-info-panel__image--circle { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: center; } .focara-info-panel__entity { display: inline-block; } .focara-info-panel__entity-link { border: 0; background: transparent; padding: 0; color: var(--fc-brand-text); text-decoration: underline; cursor: pointer; font: inherit; text-align: left; } .focara-info-panel__entity-link:hover { color: var(--fc-brand); } .focara-info-panel__audit-list { width: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; padding-top: 0.25rem; padding-bottom: 0.25rem; } .focara-info-panel__audit-row { display: flex; flex-direction: column; gap: 0.1rem; } .headshot-signup-qr-wrap { min-height: calc(100vh - 32px); margin: 0; background: #f4f6f8; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; } .headshot-signup-qr-sheet { width: 100%; max-width: 720px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 24px; text-align: center; box-sizing: border-box; } .headshot-signup-qr-logo-wrap { margin-bottom: 14px; } .headshot-signup-qr-logo { max-width: 260px; max-height: 160px; object-fit: contain; } .headshot-signup-qr-sheet h1 { margin: 0 0 12px 0; font-size: 1.7rem; color: #111827; } .headshot-signup-qr-intro { margin: 0 auto 18px auto; max-width: 620px; color: #374151; font-size: 1.25rem; /* issue #263: leesbaar op een scherm of geprint */ text-align: center; } .headshot-signup-qr-image-wrap { margin-bottom: 14px; } .headshot-signup-qr-image { width: min(520px, 80vw, 60vh); /* issue #263: groter, voor een scherm of print */ height: auto; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; padding: 8px; box-sizing: border-box; } .headshot-signup-qr-message { border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; background: #fff; color: #374151; } .headshot-signup-qr-message-error { color: #b91c1c; border-color: #fecaca; background: #fef2f2; } @media (forced-colors: none) { .dxbl-btn.dxbl-btn-secondary { --dxbl-btn-bg: var(--dxbl-btn-secondary-bg); --dxbl-btn-hover-bg: var(--dxbl-btn-secondary-hover-bg); --dxbl-btn-color: var(--dxbl-btn-secondary-color); --dxbl-btn-border-color: var(--dxbl-btn-secondary-border-color); --dxbl-btn-separator-border-color: var(--dxbl-btn-secondary-separator-border-color); --dxbl-btn-hover-border-color: var(--dxbl-btn-secondary-hover-border-color); --dxbl-btn-active-bg: var(--dxbl-btn-secondary-active-bg); --dxbl-btn-active-border-color: var(--dxbl-btn-secondary-active-border-color); border-radius: 10px; } } @media (forced-colors: none) { .dxbl-btn.dxbl-btn-primary { --dxbl-btn-bg: var(--dxbl-btn-primary-bg); --dxbl-btn-hover-bg: var(--dxbl-btn-primary-hover-bg); --dxbl-btn-color: var(--dxbl-btn-primary-color); --dxbl-btn-border-color: var(--dxbl-btn-primary-border-color); --dxbl-btn-separator-border-color: var(--dxbl-btn-primary-separator-border-color); --dxbl-btn-hover-border-color: var(--dxbl-btn-primary-hover-border-color); --dxbl-btn-active-bg: var(--dxbl-btn-primary-active-bg); --dxbl-btn-active-border-color: var(--dxbl-btn-primary-active-border-color); border-radius: 10px; } } /* ========================================================= Primaire toolbarknoppen (Opslaan, OK in popups) in de huisstijl DevExpress gebruikt hiervoor zijn eigen mint/teal (#018574, uitgeschakeld #8ad1bf), dat niet past bij het saliegroen van het logo (--brand-dark). Bewust alleen .xaf-primary-toolbar-btn (gezet door XAF's PrimaryToolbarItemsController en PrimarySaveButtonController): losse DxButtons, zoals in het klantportaal met zijn eigen opmaak, blijven ongemoeid. ========================================================= */ .dxbl-btn.dxbl-btn-primary.xaf-primary-toolbar-btn { --dxbl-btn-primary-bg: var(--fc-brand-solid); --dxbl-btn-primary-border-color: var(--fc-brand-solid); --dxbl-btn-primary-hover-bg: var(--fc-brand-solid-hover); --dxbl-btn-primary-hover-border-color: var(--fc-brand-solid-hover); --dxbl-btn-primary-active-bg: var(--fc-brand-solid-active); --dxbl-btn-primary-active-border-color: var(--fc-brand-solid-active); } /* Uitgeschakeld: een zachte tint van hetzelfde groen (i.p.v. DevExpress' mint); het witte pictogram en de witte tekst blijven leesbaar. !important omdat de DevExpress-regel voor uitgeschakelde knoppen anders wint. */ .dxbl-btn.dxbl-btn-primary.xaf-primary-toolbar-btn.dxbl-disabled { background-color: color-mix(in srgb, var(--fc-brand) 28%, var(--fc-surface)) !important; border-color: color-mix(in srgb, var(--fc-brand) 28%, var(--fc-surface)) !important; opacity: 1 !important; } /* Donker: ook de standaardonderdelen van de browser (schuifbalken, native invoer) donker. */ body.dxbl-theme-dark { color-scheme: dark; } /* Het html-element kleurt het hele venster (site.css: lichte --bg-soft); in donker dezelfde effen kleur als de app, ook tijdens het laadscherm. :has volgt de klasse op body, dus ook bij wisselen zonder herladen. */ html:has(> body.dxbl-theme-dark) { background-color: #191c20; color-scheme: dark; } /* Issue #256: de licht/donker-schakelaar in het instellingenpaneel leek het verkeerde thema te markeren. XAF maakt het actieve thema "uitgeschakeld" (grijs, niet klikbaar) en na herladen staat zijn "ingedrukt" nog op de standaardmodus (Licht). Daarom volgt de markering hier het thema dat echt op body staat: dat is gekozen (merkgroen), het andere is gewoon klikbaar. */ .dxbl-btn.themeswitcher-fluent-mode-light, .dxbl-btn.themeswitcher-fluent-mode-dark { background-color: transparent !important; border-color: var(--dxbl-btn-group-border-color, transparent) !important; color: inherit !important; opacity: 1 !important; font-weight: 400; } body:not(.dxbl-theme-dark) .dxbl-btn.themeswitcher-fluent-mode-light, body.dxbl-theme-dark .dxbl-btn.themeswitcher-fluent-mode-dark { background-color: var(--brand-dark, #3f8877) !important; border-color: var(--brand-dark, #3f8877) !important; color: #fff !important; font-weight: 600; } /* Issue #256: de kop boven die schakelaar is de groepsnaam uit appsettings (ThemeSwitcher:Groups:Caption, "Apertur"). XAF vertaalt die niet; hier staat "Thema"/"Theme", naar de taal op html (XAF zet lang="nl" of "en"). */ /* De oorspronkelijke tekst weg via lettergrootte 0 (sterker dan DevExpress' regel per grootte-instelling); de nieuwe kop krijgt de lettergrootte van de andere koppen in het paneel. In ::after, want ::before is de hoverachtergrond van .nav-item (menu-opmaak); daarin sprong de kop bij hover weg. */ body .themes-menu.themes-menu-flt li.theme-group { font-size: 0 !important; column-gap: 0; /* anders staat de kop 10px (flex-gap) achter de onzichtbare oude tekst */ } .themes-menu-flt li.theme-group::after { content: "Theme"; font-size: var(--dxds-font-size-base-md, 0.875rem); } .xaf-size-s .themes-menu-flt li.theme-group::after { font-size: var(--dxds-font-size-base-sm, 0.75rem); } .themes-menu-flt li.theme-group:lang(nl)::after { content: "Thema"; } /* Laadscherm in een effen paginakleur: wit in licht, de donkere app-achtergrond in donker. */ body:has(> .loading-items-center) { background-color: #fff; } body.dxbl-theme-dark:has(> .loading-items-center) { background-color: #191c20; } #applicationLoadingPanel img, .loading-image-wrapper img { border-radius: 0 !important; } /* XAF geeft het laadbeeld een rond vlak in de accentkleur en een draaiende boog in dezelfde kleur; het diafragma is een lijntekening in het huisstijlgroen, dus geen vlak en een boog in dezelfde tint. */ body .loading-image-wrapper { background-color: transparent !important; } body .loading-border { border-color: color-mix(in srgb, #242424 10%, transparent) !important; } body.dxbl-theme-dark .loading-border { border-color: color-mix(in srgb, #e8e8e8 12%, transparent) !important; } /* De draaiende boog heeft ook de klasse loading-border; daarom specifieker en na de ring. */ body .loading-border.loading-floated-circle { border-color: transparent !important; border-top-color: color-mix(in srgb, #3f8877 70%, transparent) !important; } body.dxbl-theme-dark .loading-border.loading-floated-circle { border-top-color: color-mix(in srgb, #69b6a3 70%, transparent) !important; } /* Schuifregelaars (SliderEditorComponent, Bootstrap .form-range): baan in de randkleur, knop in de huisstijl. */ input[type="range"].form-range { -webkit-appearance: none; appearance: none; height: 1.25rem; padding: 0; background-color: transparent; } input[type="range"].form-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background-color: var(--fc-border-strong); } input[type="range"].form-range::-moz-range-track { height: 4px; border-radius: 2px; background-color: var(--fc-border-strong); } input[type="range"].form-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: none; border-radius: 50%; background-color: var(--fc-brand); } input[type="range"].form-range::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background-color: var(--fc-brand); } input[type="range"].form-range:disabled::-webkit-slider-thumb { background-color: var(--fc-text-muted); } /* Donker: het ronde avatarvlak in het accountmenu van XAF is anders lichtgrijs. */ body.dxbl-theme-dark .user-info-container .logo-container { background-color: var(--fc-brand-tint-strong) !important; } /* Donker: Fluent maakt de tekst van een uitgeschakelde knop middengrijs, dat op het donkergroen wegvalt. */ body.dxbl-theme-dark .dxbl-btn.dxbl-btn-primary.xaf-primary-toolbar-btn.dxbl-disabled { color: rgba(255, 255, 255, .6) !important; } /* ... en het icoon even gedimd als de tekst (de regel hierboven houdt het in licht bewust vol wit). */ body.dxbl-theme-dark .dxbl-btn.xaf-primary-toolbar-btn.dxbl-disabled img[src*="IImageService/ap-"] { opacity: .6; } /* Rich-text-editor (DxRichEdit, o.a. offerteteksten): de pagina is in het document wit met zwarte tekst, en zo komt hij ook in de PDF. In donker wordt alleen de weergave omgekeerd: wit wordt donkergrijs, zwarte tekst lichtgrijs; hue-rotate houdt gekleurde tekst ongeveer in dezelfde tint. Het document zelf verandert niet. Afbeeldingen in de tekst worden in de editor ook omgekeerd weergegeven. */ body.dxbl-theme-dark .dxrePage { filter: invert(.87) hue-rotate(180deg); } /* Vorige/volgende record: de eigen (groene) iconen in Focara.Module/Images vervangen de oranje standaardiconen; uitgeschakeld (eerste/laatste record) grijs, net als de andere uitgeschakelde knoppen. */ .dxbl-btn.dxbl-disabled img[src*="Action_Navigation_Previous_Object"], .dxbl-btn.dxbl-disabled img[src*="Action_Navigation_Next_Object"] { filter: grayscale(1); opacity: 0.45; } /* Apertur-iconen (Focara.Module/Images/ap-*.svg) in werkbalken en menu's. DevExpress tekent een action-icoon met een gewone URL als , dus het volgt de tekstkleur en de uitgeschakelde staat niet vanzelf (de eigen DevExpress- iconen zijn inline SVG en doen dat wel). De SVG is zwart; hier krijgt hij de tint van de tekst, wit op de groene primaire knop, licht in de donkere modus, en gedimd zodra de knop uitgeschakeld is. */ img[src*="IImageService/ap-"] { opacity: .78; } :root[data-theme="dark"] img[src*="IImageService/ap-"], .dxbl-theme-dark img[src*="IImageService/ap-"] { filter: invert(1); opacity: .85; } .dxbl-btn.xaf-primary-toolbar-btn img[src*="IImageService/ap-"] { filter: brightness(0) invert(1); opacity: 1; } .dxbl-disabled img[src*="IImageService/ap-"], :disabled img[src*="IImageService/ap-"], [aria-disabled="true"] img[src*="IImageService/ap-"] { opacity: .3; } /* Uitgeschakelde primaire knop: lichtgroen met wit pictogram en witte tekst (zie hierboven); niet extra dimmen. */ .dxbl-btn.xaf-primary-toolbar-btn.dxbl-disabled img[src*="IImageService/ap-"] { opacity: 1; } /* ========================================================= Sectie-editor ========================================================= */ .section-editor-root { display: grid; grid-template-columns: 320px 1fr 260px; gap: 0; height: 70vh; min-height: 500px; border: 1px solid var(--dxbl-grid-border-color, var(--fc-border)); border-radius: 8px; overflow: hidden; background: var(--dxbl-back-color, var(--fc-surface)); } /* Instellingen > Algemeen (stamgegevens-dashboard, MasterDataHubSplitter.razor): lijst links, inhoud rechts, gescheiden door een versleepbare splitter die de beschikbare hoogte vult. */ /* Loopt tot onderaan, gelijk met het menu: de lagen van het scherm eromheen vullen de hoogte, zodat de kaart de rest neemt, met of zonder de balk van de verkenmodus (die op een smal scherm ook twee regels kan zijn). De marges van de form layout gaan eraf; die staken onderaan uit en lieten het scherm een paar pixels scrollen. */ .main-content:has(.focara-masterdata-hub) > .card-body { align-self: stretch; align-items: stretch !important; } .main-content:has(.focara-masterdata-hub) > .card-body, .main-content:has(.focara-masterdata-hub) .detail-view-content:not(.focara-masterdata-hub *), .main-content:has(.focara-masterdata-hub) .dxbl-fl:not(.focara-masterdata-hub *), .main-content:has(.focara-masterdata-hub) .dxbl-fl .dxbl-row:not(.focara-masterdata-hub *), .main-content:has(.focara-masterdata-hub) .dxbl-fl-group:not(.focara-masterdata-hub *), .main-content:has(.focara-masterdata-hub) .dxbl-fl-item:not(.focara-masterdata-hub *), .main-content:has(.focara-masterdata-hub) .dxbl-fl-item > .dxbl-fl-ctrl:has(> .focara-masterdata-hub) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .main-content:has(.focara-masterdata-hub) .dxbl-fl .dxbl-row:not(.focara-masterdata-hub *), .main-content:has(.focara-masterdata-hub) .dxbl-fl-group:not(.focara-masterdata-hub *), .main-content:has(.focara-masterdata-hub) .dxbl-fl-item:not(.focara-masterdata-hub *) { margin-top: 0 !important; margin-bottom: 0 !important; } .focara-masterdata-hub { flex: 1 1 auto; min-height: 480px; } /* Het dashboard is één kaart, zoals een detailscherm: de lijst, de werkbalk en de inhoud staan er plat in, gescheiden door de splitter en een lijn onder de werkbalk. Los zweefden de drie kaarten in het scherm. */ .focara-masterdata-hub.focara-masterdata-hub { background: var(--fc-surface) !important; border: 1px solid var(--fc-card-border); border-radius: var(--fc-radius-card); box-shadow: var(--fc-card-shadow); overflow: hidden; } .focara-masterdata-hub .main-toolbar, .focara-masterdata-hub .main-content.xaf-flex-auto.focara-detailview-body { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } .focara-masterdata-hub .focara-masterdata-hub-detail .main-toolbar { border-bottom: 1px solid var(--fc-card-border) !important; } .focara-masterdata-hub .dxbl-splitter-pane { background: transparent; } .focara-masterdata-hub-list, .focara-masterdata-hub-detail { overflow: auto; } .focara-masterdata-hub-list { padding: 8px 0 8px 8px; } /* Issue #307: de lijsten links en rechts lopen tot de rand van de kaart en de splitter, zoals een lijst op een tabblad. DevExpress gaf het vak van de splitter 10.8px binnenruimte opzij; de tekst houdt zijn afstand via de cellen (14px). */ .focara-masterdata-hub .dxbl-splitter-pane-content.focara-masterdata-hub-list, .focara-masterdata-hub .dxbl-splitter-pane-content.focara-masterdata-hub-detail { padding-left: 0 !important; padding-right: 0 !important; } .focara-masterdata-hub .focara-masterdata-hub-detail .main-toolbar { padding-left: 14px; padding-right: 14px; } /* Issue #322: het onderdeel dat rechts staat, in het groen, zoals de gekozen sectie in het sectiemenu van Bedrijfsinstellingen. */ .focara-masterdata-hub .dxbl-grid .dxbl-grid-table > tbody > tr.focara-masterdata-hub-active > td, .focara-masterdata-hub .dxbl-grid .dxbl-grid-table.dxbl-grid-row-hover-enabled > tbody > tr.focara-masterdata-hub-active:hover > td { background: color-mix(in srgb, var(--fc-brand) 16%, var(--fc-surface)) !important; color: var(--fc-brand-text); } /* Rij in de lijst links: icoon van de entiteit + naam (MasterDataHubItemCell.razor). */ .focara-masterdata-hub-cell { display: inline-flex; align-items: center; gap: 8px; } /* Kaart bij de locatie van een offerte-/orderregel (LocationMapRenderer.razor). Bewust geen flex met gap: DxMap zet een reeks onzichtbare -elementen vóór de kaart, en in een flex-container krijgt elk daarvan de gap mee — samen ruim 100px witruimte boven de kaart. */ /* Zelfde rand als de invoervelden (zie .dxbl-fl .dxbl-text-edit hierboven): themakleur, afgeronde hoeken — om het hele blok, dus afstand/reistijd en kaart samen. */ .focara-location-map { display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--dxbl-text-edit-border-color, var(--fc-border)); border-radius: 10px; overflow: hidden; } .focara-location-map-summary, .focara-location-map-empty { padding: 6px 10px; } .focara-location-map dxbl-map { display: block; } .focara-location-map-summary + dxbl-map, .focara-location-map-summary ~ dxbl-map { border-top: 1px solid var(--dxbl-text-edit-border-color, var(--fc-border)); } .focara-location-map-empty { color: var(--dxbl-text-secondary-color, var(--fc-text-muted)); font-style: italic; } /* ========================================================= Titel in de kop van een scherm (detailscherm bv. "Offerte" / "OFF-0074", lijstscherm bv. "Contact") Het icoon stond als 16px-plaatje in een klein rond badge naast de titel. Het badge is nu even hoog als de twee titelregels van een detailscherm (3.6em, schaalt mee met de lettergrootte); het icoon vult 60% ervan. Lijstschermen (één regel) krijgen hetzelfde badge, zodat de kop bij wisselen niet verspringt. De algemene 16px-begrenzing voor alle iconen (site.css / XAF styles.css) wordt alleen hier opgeheven. ========================================================= */ .view-caption-root .xaf-caption-icon-container { /* !important: site.css zet dit badge vast op 16px */ width: 3.6em !important; height: 3.6em !important; border-radius: 50%; flex-shrink: 0; } .view-caption-root .xaf-caption-icon { max-width: none; max-height: none; width: 60%; height: 60%; } /* XAF begrenst de tekst op "100% - 36px" (uitgaand van een klein icoon); met het grotere badge viel de titel daardoor weg ("OFF-00..."). De ruimte volgt nu gewoon uit de flex-indeling, lange titels krijgen nog "...". */ .view-caption-root .xaf-caption-container { max-width: none; min-width: 0; } /* In de kop van een popup is de schermtitel hierboven (groot badge + objecttitel van 1.75rem uit site.css) veel te fors: daar een compacte variant met een kleiner badge, kleinere titels en minder ruimte rond de kop. */ .dxbl-popup .dxbl-modal-header .view-caption-root .xaf-caption-icon-container { width: 2.4em !important; height: 2.4em !important; } .dxbl-popup .dxbl-modal-header .view-caption-root .xaf-object-caption { font-size: 1.1rem; line-height: 1.4rem; } .dxbl-popup .dxbl-modal-header .view-caption-root .xaf-view-caption-sm, .dxbl-popup .dxbl-modal-header .view-caption-root .xaf-view-caption-lg { font-size: 0.8rem; line-height: 1.1rem; } .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content .dxbl-popup-header > .dxbl-modal-header, .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header { padding-top: 0.5rem; padding-bottom: 0.5rem; margin-bottom: 8px; } /* ============================================================ Issue #269 (stijl C): keuzes als schakelbalk (EnumSegmentedPropertyEditor), in de vorm van de tabbladen ============================================================ */ .focara-segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 3px; border: 1px solid var(--fc-border); border-radius: 10px; background: var(--fc-surface-subtle); } .focara-segmented__option { min-height: 34px; padding: 0 14px; border: none; border-radius: 7px; background: transparent; color: var(--fc-text-muted); font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; } .focara-segmented__option:hover { background: var(--fc-hover); color: var(--fc-text); } .focara-segmented__option.selected { background: var(--fc-surface); color: var(--fc-text); font-weight: 600; box-shadow: 0 1px 2px var(--fc-shadow-strong); } body.dxbl-theme-dark .focara-segmented__option.selected { background: color-mix(in srgb, var(--fc-text) 12%, var(--fc-surface)); } .focara-segmented__option:focus-visible { outline: none; box-shadow: var(--fc-focus-ring); } /* ============================================================ Issue #269 (stijl C): schakelaar met uitleg (BooleanSwitchRenderer) ============================================================ */ /* Bovenaan uitgelijnd: loopt de uitleg over meer regels, dan blijft de schakelaar naast de eerste regel staan (en op dezelfde hoogte als de schakelaar ernaast) in plaats van verticaal mee te centreren. */ .focara-switch { display: flex; align-items: flex-start; gap: 12px; min-height: var(--fc-field-height); } .focara-switch > dxbl-check { flex: none; display: flex; align-items: center; height: var(--fc-field-height); } .focara-switch__hint { color: var(--fc-text-muted); font-size: 0.8125rem; line-height: 1.35; /* De eerste regel midden in de veldhoogte, net als de schakelaar. */ margin-top: calc((var(--fc-field-height) - 1.35em) / 2); } /* ============================================================ Issue #269 (stijl C): wachtrijkaart (ParticipantQueueRenderer) en tellers (JobDashboardCardsRenderer) ============================================================ */ .queue-card { display: flex; flex-direction: column; gap: 14px; } .queue-card__empty, .job-dashboard-empty { color: var(--fc-text-muted); } .queue-card__progress { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--fc-text) 10%, var(--fc-surface)); } .queue-card__bar.is-ready { background: var(--fc-brand-solid); } .queue-card__bar.is-busy { background: var(--fc-brand); opacity: .5; } .queue-card__summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 0.8125rem; color: var(--fc-text-muted); } .queue-card__done { color: var(--fc-text); font-weight: 600; } .queue-card__counts { display: flex; gap: 14px; } .queue-card__counts b { color: var(--fc-text); } .queue-card__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .queue-card__tile { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--fc-border); border-radius: 11px; background: var(--fc-surface-subtle); } .queue-card__tile.is-now { border-color: transparent; background: color-mix(in srgb, var(--fc-brand) 14%, var(--fc-surface)); } .queue-card__tile-label { font-size: 0.75rem; font-weight: 600; color: var(--fc-text-muted); } .queue-card__tile.is-now .queue-card__tile-label { color: var(--fc-brand-text); } .queue-card__nobody { color: var(--fc-text-muted); } .queue-card__person { display: flex; align-items: center; gap: 10px; } .queue-card__avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fc-surface); color: var(--fc-brand-text); font-size: 0.75rem; font-weight: 600; } .queue-card__person-name { display: block; font-weight: 600; } .queue-card__person-meta { display: block; font-size: 0.75rem; color: var(--fc-text-muted); } .queue-card__list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; border-top: 1px solid var(--fc-border); } .queue-card__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--fc-border); font-size: 0.875rem; } .queue-card__row.is-inprogress { background: color-mix(in srgb, var(--fc-brand) 10%, transparent); } .queue-card__seq { color: var(--fc-text-muted); font-variant-numeric: tabular-nums; } .queue-card__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .queue-card__meta { color: var(--fc-text-muted); font-size: 0.8125rem; } .queue-card__status { padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: color-mix(in srgb, var(--fc-text) 9%, var(--fc-surface)); color: var(--fc-text-muted); } .queue-card__row.is-ready .queue-card__status { background: color-mix(in srgb, var(--fc-brand) 18%, var(--fc-surface)); color: var(--fc-brand-text); } .queue-card__row.is-inprogress .queue-card__status { background: var(--fc-brand-solid); color: #fff; } .job-dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .job-dashboard-card { padding: 12px 14px; border: 1px solid var(--fc-border); border-radius: 11px; background: var(--fc-surface-subtle); } .job-dashboard-label { color: var(--fc-text-muted); font-size: 0.75rem; font-weight: 600; } .job-dashboard-value { margin-top: 2px; font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* ============================================================ Zijmenu (CustomShowNavigationItemActionControlComponent), issue #268 (stijl C) Ruime items met lijniconen; het gekozen scherm met een zacht groen vlak; groepen zonder eigen vlak (alleen de tekst wordt donkerder als ze open zijn); onderliggende items ingesprongen via margin-left in het component. De laatste groep (Instellingen) staat onderaan. ============================================================ */ .nav-tree { display: flex; flex-direction: column; gap: 2px; min-height: 100%; box-sizing: border-box; padding: 12px 4px 12px; } /* Issue #279: alleen als er meer groepen zijn; het beheer heeft er één, en die stond dan helemaal onderaan. */ .nav-tree > .nav-item-wrapper:last-child:not(:first-child) { margin-top: auto; padding-top: 12px; } .nav-tree .nav-item-wrapper { display: flex; flex-direction: column; } .nav-tree .nav-item { display: flex; align-items: center; gap: 12px; width: auto; max-width: calc(100% - 16px); min-height: 38px; padding: 0 12px; margin: 0 8px; border: none; border-radius: 9px; background: transparent; color: var(--fc-text-muted) !important; font-size: 0.875rem; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .15s ease, color .15s ease; } /* site.css geeft .nav-item bij hover en actief een ::before-vlak (absolute, inset 0) voor het instellingenpaneel van XAF, dat dezelfde klasse gebruikt. In het zijmenu kleurt het item zelf; zonder dit spande dat vlak zich op over het hele menu (het item heeft geen position: relative meer), zodat bij hover het hele menu van kleur veranderde. */ .nav-tree .nav-item::before { content: none !important; } .nav-tree .nav-item:hover { background: var(--fc-hover); color: var(--fc-text) !important; } .nav-tree .nav-item.has-children.expanded { color: var(--fc-text) !important; } .nav-tree .nav-item.active, .nav-tree .nav-item.active:hover { /* Over de achtergrond van het menu gemengd (niet over het oppervlak), zodat het in donker even goed zichtbaar is. */ background: color-mix(in srgb, var(--fc-brand) 20%, transparent); color: var(--fc-text) !important; font-weight: 600; } .nav-tree .nav-children { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; } /* Onderliggende items iets lager en zonder vet, zodat de groep erboven de kop blijft. */ .nav-tree .nav-children .nav-item { min-height: 34px; font-weight: 400; } .nav-tree .nav-children .nav-item.active { font-weight: 600; } /* Issue #266: menu ingeklapt (hamburger, .app.collapse-toggle): de inhoud houdt rechts ruimte voor de schuifbalk vrij (scrollbar-gutter bij .focara-detailview-body en .focara-dossier-wrap) en stond links daardoor 15px dichter tegen de rand dan rechts. Nu aan beide kanten dezelfde goot. */ /* Alleen een detailscherm: een lijstscherm heeft dezelfde klassen, maar daar is de body de kaart zelf en gaf de goot links een strook binnen de kaart (de lijnen van het grid liepen niet meer door). */ .app.collapse-toggle #main-view-content > .main-content.focara-detailview-body:has(> .focara-detailview-main > .detail-view-content), .app.collapse-toggle .focara-dossier-wrap { scrollbar-gutter: stable both-edges; } /* Issue #345: het menu links is een vlakke kolom, strak tegen de kop en de linkerrand, met alleen een lijn rechts (was sinds #266 een kaart met ruimte rondom en afgeronde hoeken). */ .xaf-sidebar.sidebar { margin: 0 !important; border: 0 !important; border-right: 1px solid var(--fc-card-border) !important; border-radius: 0 !important; box-shadow: none; overflow: hidden; } .nav-tree .nav-icon { flex-shrink: 0; width: 18px; height: 18px; opacity: .75; } .nav-tree .nav-item.active .nav-icon, .nav-tree .nav-item.expanded .nav-icon { opacity: .95; } .nav-tree .nav-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-tree .nav-chevron { flex-shrink: 0; margin-left: auto; font-size: 14px; color: var(--fc-text-muted); opacity: .7; } /* ============================================================ Zoeken in de header als veld (issue #268): icoon, "Zoeken" en de sneltoets; op een smal scherm alleen het icoon. ============================================================ */ /* Een compacte knop met de loep en de sneltoets (geen breed vak met "Zoeken": dat leek een veld waarin je kon typen). De rand houdt loep en Ctrl K bij elkaar; zonder leken het twee losse dingen. */ .focara-header-actions .focara-header-search { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-right: 4px; padding: 0 6px 0 8px; border: 1px solid var(--fc-border); border-radius: 10px; background: transparent; color: var(--fh-icon); font: inherit; font-size: 0.875rem; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .focara-header-actions .focara-header-search:hover { border-color: var(--fc-border-strong); background: var(--fh-hover); } .focara-header-actions .focara-header-search:focus-visible { outline: none; border-color: var(--fc-brand); box-shadow: var(--fc-focus-ring); } /* De algemene regel voor header-iconen maakt elk XafImage 69px groot (zie hieronder); hier 20px, passend in de rand. Het element (button) maakt deze regel specifieker dan die latere. */ .focara-header-actions button.focara-header-search .xaf-image.xaf-image { width: 20px !important; height: 20px !important; flex: none; -webkit-mask-size: 20px !important; mask-size: 20px !important; } .focara-header-search__key { padding: 2px 6px; border: 1px solid var(--fc-border); border-radius: 6px; background: var(--fc-surface); color: var(--fc-text-muted); font-family: inherit; font-size: 0.75rem; } @media (max-width: 991.98px) { /* Smal alleen de loep, zonder rand: dan is het een icoon zoals de andere. */ .focara-header-actions .focara-header-search { width: var(--fh-size); height: var(--fh-size); padding: 0; justify-content: center; border-color: transparent; } .focara-header-search__key { display: none; } } /* ============================================================ Header rechts (.focara-header-actions in FocaraTemplateComponent) Eén stijl voor alles: gelijke icoonknoppen (40px, 24px lijn-iconen, zelfde kleur en hover) voor zoeken, notificaties, herinneringen, help en instellingen; het account als ronde avatar (met de foto van de gebruiker als die er is) achter een scheidingslijn. Labels staan in de tooltips. ============================================================ */ .focara-header-actions { --fh-icon: color-mix(in srgb, var(--fc-text) 80%, transparent); --fh-hover: var(--fc-brand-tint); --fh-border: var(--fc-border); --fh-size: 40px; --fh-icon-size: 24px; display: flex; align-items: center; gap: 4px; } /* Icoonknoppen: zoeken, help, instellingen, account en de acties in de header-werkbalk */ .focara-header-actions .focara-header-icon-btn, .focara-header-actions .theme-settings > .theme-button, .focara-header-actions .account-button, .focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--fh-size); min-width: var(--fh-size); height: var(--fh-size); margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: var(--fh-icon) !important; box-shadow: none !important; cursor: pointer; transition: background-color .15s ease; } /* Issue #294: volledig scherm alleen als de browser het kan (html.can-fullscreen, live-session.js); het icoon wisselt met de stand. */ html:not(.can-fullscreen) .focara-header-actions .focara-header-fullscreen, .focara-header-actions .focara-header-fullscreen .focara-header-fullscreen-exit, html.is-fullscreen .focara-header-actions .focara-header-fullscreen .focara-header-fullscreen-enter { display: none !important; } html.is-fullscreen .focara-header-actions .focara-header-fullscreen .focara-header-fullscreen-exit { display: inline-block !important; } .focara-header-actions .focara-header-icon-btn:hover, .focara-header-actions .theme-settings > .theme-button:hover, .focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn:not(.dxbl-disabled):hover { background: var(--fh-hover) !important; } /* XafImage-iconen (masker in currentColor); instellingen en account krijgen de fc-lijn-iconen i.p.v. de gevulde XAF-iconen (Settings / Security_Header). De foto van de gebruiker (.xaf-header-user-icon, een achtergrondafbeelding) valt hier bewust buiten: een masker zou die foto vervangen. Issue #275: niet de iconen in het zijpaneel (favorieten, meldingen), dat ook in de kop hangt; die werden 69px en maakten elke regel 93px hoog. Daar geldt de maat van de XafImage zelf (20). */ .focara-header-actions .xaf-image:not(.xaf-header-user-icon):not(.focara-side-panel *) { width: 69px !important; height: 69px !important; margin: 0 !important; -webkit-mask-size: var(--fh-icon-size) !important; mask-size: var(--fh-icon-size) !important; } /*.focara-header-actions .xaf-image:not(.xaf-header-user-icon) { width: var(--fh-icon-size) !important; height: var(--fh-icon-size) !important; margin: 0 !important; -webkit-mask-size: var(--fh-icon-size) !important; mask-size: var(--fh-icon-size) !important; }*/ .focara-header-actions .theme-settings > .theme-button .xaf-image { -webkit-mask-image: url('../IImageService/fc-nav-settings?t=Fluent') !important; mask-image: url('../IImageService/fc-nav-settings?t=Fluent') !important; } .focara-header-actions .account-button .xaf-image:not(.xaf-header-user-icon) { -webkit-mask-image: url('../IImageService/fc-user?t=Fluent') !important; mask-image: url('../IImageService/fc-user?t=Fluent') !important; } /* Header-werkbalk (notificaties, herinneringen): geen rand/pijltje; de iconen zijn , dus via een filter in dezelfde donkergrijze tint als de maskers. DevExpress zet inline height: 29px; zonder vaste hoogte zakken de knoppen onder het midden. */ .focara-header-actions .dxbl-toolbar { display: flex; align-items: center; flex-shrink: 0; height: var(--fh-size) !important; padding: 0 !important; } /* DevExpress zet de breedte van de werkbalk vooraf (inline min-width) op basis van knoppen + marges, maar zonder gap; een gap schuift de laatste knop dan over de help-knop heen. Tussenruimte daarom via de groepsmarge (standaard 5.4px, hier 4px zoals de andere headerknoppen), de eerste groep zonder marge. */ .focara-header-actions .dxbl-toolbar > .dxbl-btn-toolbar { height: var(--fh-size); align-items: center; gap: 0; } .focara-header-actions .dxbl-toolbar .dxbl-toolbar-group { margin-left: 4px !important; } .focara-header-actions .dxbl-toolbar .dxbl-toolbar-group.dxbl-btn-group-first { margin-left: 0 !important; } .focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn img { width: var(--fh-icon-size) !important; height: var(--fh-icon-size) !important; max-width: none !important; max-height: none !important; filter: brightness(0); opacity: .72; } .focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn.dxbl-disabled { opacity: 1; cursor: default; } .focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn.dxbl-disabled img { opacity: .35; } body.dxbl-theme-dark .focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn img { filter: brightness(0) invert(1); } .focara-header-actions .dxbl-toolbar .dxbl-toolbar-dropdown-toggle { display: none; } /* Aantal (herinneringen) als badge rechtsboven; bij 0 (knop uitgeschakeld) niets tonen. */ .focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn > span { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--fc-brand); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; } .focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn.dxbl-disabled > span { display: none; } /* Ongelezen notificaties: de caption wordt dan "Notificaties (n)" (NotificationsChoiceController). */ .focara-header-actions .dxbl-toolbar .dxbl-toolbar-btn[data-action-name^="Notificaties ("]::after { content: ''; position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--fc-brand); box-shadow: 0 0 0 2px var(--fc-surface); } /* XAF geeft de wrapper van de instellingenknop 7.2px padding links; zelfde tussenruimte als de rest. */ .focara-header-actions .theme-settings { padding: 0 !important; } /* Account: ronde avatar, gescheiden van de rest */ .focara-header-actions .account-container { display: flex; align-items: center; margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--fh-border); } .focara-header-actions .account-button { border-radius: 50% !important; background: var(--fc-brand-tint) !important; color: var(--fc-brand-text) !important; overflow: hidden; } .focara-header-actions .account-button:hover { background: var(--fc-brand-tint-strong) !important; } /* Met foto: de foto vult de hele ronde knop. */ .focara-header-actions .account-button .xaf-header-user-icon { width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 50%; background-size: cover !important; background-position: center !important; } /* Instellingenpaneel (uitklappend vanuit de header): XAF zet geen ruimte boven de inhoud, waardoor het eerste item tegen de bovenrand van het paneel staat. */ .theme-settings.show-dropdown .settings-bar { padding-top: 12px; } /* De menu's rechtsboven (instellingen, gebruiker) staan bij XAF op ~3.1rem van boven, maar onze header is hoger (75px, onder 992px 56px: FocaraTemplateComponent). Zonder dit schoof het menu onder de header en viel de bovenkant weg. Beide worden t.o.v. de pagina geplaatst (fixed / offsetParent = body). */ body .theme-settings.show-dropdown .settings-bar, body .account-main.dropdown-menu { top: 75px; } /* Het instellingenpaneel begint precies op de onderrand van de header en had zelf geen bovenrand, waardoor de bovenkant wegviel (issue #34). Een eigen lijn, in de kleur van de linkerrand. */ body .theme-settings.show-dropdown .settings-bar { border-top: 1px solid var(--fc-border-strong, var(--fc-border)); } @media (max-width: 991.98px) { body .theme-settings.show-dropdown .settings-bar, body .account-main.dropdown-menu { top: 56px; } } /* Iets grotere tekst in deze menu's: XAF zet ze op ~0.875rem / small, wat naast de rest van de app te klein oogt. */ body .theme-settings .settings-bar .themes-menu, body .theme-settings .settings-bar .theme-group { font-size: 1rem; } /* De groepskoppen hebben alleen een onderrand; de afronding van onze .nav-item-stijl liet die lijn aan de zijkanten omhoog buigen, alsof de kop aan de bovenkant was afgekapt. */ body .theme-settings .settings-bar .theme-group { border-radius: 0; } body .account-main.dropdown-menu .log-off .dxbl-btn-caption { font-size: 0.95rem; } /* Korte rich-text-velden (zie BlazorRichEditController.CompactProperties, bv. de locatieopmerking): lager dan een volledige documenteditor (issue #22). */ /* De eigen CssClass vervangt XAF's "xaf-richedit", vandaar ook de volle breedte hier. */ .rtf-compact { width: 100% !important; height: 200px !important; min-height: 200px !important; } /* Alleen-lezen velden in een detailscherm (berekend, of vergrendeld door de status) lezen als gegeven, niet als invoerveld (issue #31): geen knoppen (spin/dropdown) en geen kader. XAF zet daarvoor dxbl-disabled op de editor; in het donkere thema was het verschil met een invoerveld nauwelijks te zien. Eerst stond er een gestippelde lijn onder; die oogde rommelig (losse lijnen bij lege velden, onrustig naast de invoervelden). Nu een rustig vlak in de vorm van een invoerveld (zelfde hoogte en afgeronde hoeken), zonder rand, zodat alles netjes uitlijnt en een leeg veld gewoon een leeg vlak is. */ .dxbl-fl .dxbl-text-edit.dxbl-disabled { background: color-mix(in srgb, var(--fc-text, #888) 5%, transparent) !important; border-color: transparent !important; border-radius: 10px !important; box-shadow: none !important; --dxbl-text-edit-underline-color: transparent !important; } /* In het donkere thema een heel lichte rand, zodat het vlak iets meer afgebakend is. */ body.dxbl-theme-dark .dxbl-fl .dxbl-text-edit.dxbl-disabled { border-color: #76767666 !important; } /* In het lichte thema de gewone rand van een veld en een nog lichter vlak. */ body:not(.dxbl-theme-dark) .dxbl-fl .dxbl-text-edit.dxbl-disabled { border-color: var(--dxbl-text-edit-border-color) !important; background: color-mix(in srgb, var(--fc-text, #888) 2%, transparent) !important; } .dxbl-fl .dxbl-text-edit.dxbl-disabled > .dxbl-btn-group { display: none !important; } .dxbl-fl .dxbl-text-edit.dxbl-disabled .dxbl-text-edit-template, .dxbl-fl .dxbl-text-edit.dxbl-disabled input { color: var(--fc-text) !important; opacity: 1 !important; } /* Een koppeling (Contact, Offerte) in een alleen-lezen veld: onderstreept pas bij aanwijzen, net als de rest geen lijnen. */ .dxbl-fl .dxbl-text-edit.dxbl-disabled a { text-decoration: none !important; } .dxbl-fl .dxbl-text-edit.dxbl-disabled a:hover { text-decoration: underline !important; } /* Het zoekvak in de werkbalk en de keuzelijsten in het instellingenpaneel staan buiten een formulier (.dxbl-fl) en kregen daardoor de standaardvorm van DevExpress (hoekig, onderlijn) i.p.v. die van de velden in een scherm (issue #36). Zelfde vorm en focusrand als hierboven bij .dxbl-fl. Ook de keuzelijsten in de werkbalk, zoals de standaardfilters van een lijst (issue #39). */ .dxbl-toolbar .xaf-action-fulltextsearch.dxbl-text-edit, .dxbl-toolbar .combobox-xaf-action .dxbl-text-edit, .theme-settings .settings-bar .dxbl-text-edit { border-radius: 10px !important; overflow: hidden; --dxbl-text-edit-underline-color: transparent !important; border-bottom-color: var(--dxbl-text-edit-border-color) !important; } .dxbl-toolbar .xaf-action-fulltextsearch.dxbl-text-edit .dxbl-btn:last-child, .dxbl-toolbar .combobox-xaf-action .dxbl-text-edit .dxbl-btn:last-child, .theme-settings .settings-bar .dxbl-text-edit .dxbl-btn:last-child { border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; } .dxbl-toolbar .xaf-action-fulltextsearch.dxbl-text-edit:focus-within, .dxbl-toolbar .combobox-xaf-action .dxbl-text-edit:focus-within, .theme-settings .settings-bar .dxbl-text-edit:focus-within { --dxbl-text-edit-underline-focused-color: transparent !important; border-color: var(--dxds-primary-60) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dxds-primary-40) 45%, transparent) !important; } /* Instellingenpaneel: meer ruimte tussen de onderdelen (grootte, taal, thema). */ .theme-settings .settings-bar .themes-menu + .themes-menu { margin-top: 14px; } .theme-settings .settings-bar .theme-group .dxbl-text-edit { margin-top: 6px; margin-bottom: 10px; } /* ============================================================ Kopknop "Mijn open taken" (OpenTasksHeaderComponent, issue #39): teller op het icoon en het uitklappaneel met per taak het contact en klikbare telefoon/e-mail. ============================================================ */ .focara-header-actions .focara-header-badge { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--fc-brand); color: #fff; font-size: 11px; font-weight: 600; line-height: 17px; text-align: center; pointer-events: none; } .focara-open-tasks { font-size: 1rem; } .focara-open-tasks-empty { padding: 16px; color: color-mix(in srgb, var(--fc-text) 60%, transparent); } .focara-open-tasks-list { list-style: none; margin: 0; padding: 0; } .focara-open-tasks-list > li { padding: 12px 18px; border-bottom: 1px solid var(--fc-border); } .focara-open-tasks-list > li:last-child { border-bottom: 0; } .focara-open-tasks-row { display: flex; align-items: baseline; gap: 8px; } .focara-open-tasks-title { flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; color: var(--fc-text); text-decoration: none; } .focara-open-tasks-done { flex-shrink: 0; margin: 0 2px 0 -4px; padding: 0 4px; border: 0; background: transparent; color: color-mix(in srgb, var(--fc-text) 50%, transparent); font-size: 1.15rem; line-height: 1; cursor: pointer; } .focara-open-tasks-done .bi-check-circle-fill, .focara-open-tasks-done:hover .bi-circle { display: none; } .focara-open-tasks-done:hover .bi-check-circle-fill { display: inline; color: var(--fc-brand); } .focara-open-tasks-title > i { margin-right: 8px; color: var(--fc-brand); } .focara-open-tasks-title:hover { text-decoration: underline; } /* Issue #173: rechts de datum met daaronder het prioriteitslabel. */ .focara-open-tasks-meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .focara-open-tasks-due { flex-shrink: 0; font-size: 0.95rem; color: color-mix(in srgb, var(--fc-text) 60%, transparent); } .focara-open-tasks-due.is-today { color: var(--fc-brand); font-weight: 600; } .focara-open-tasks-due.is-overdue { color: var(--bs-danger, #dc3545); font-weight: 600; } .focara-open-tasks-contact { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; margin-left: 28px; /* onder de titel, naast het afvinkrondje */ font-size: 0.95rem; color: color-mix(in srgb, var(--fc-text) 70%, transparent); } .focara-open-tasks-contact a { color: var(--fc-brand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .focara-open-tasks-all { font-size: 1rem; color: var(--fc-brand); font-weight: 600; text-decoration: none; } /* Verkenmodus (issue #55): balk onder de kop zolang er geen mail naar klanten gaat. */ .focara-explore-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 16px; background: var(--dxds-primary-100); border: none; color: #fff; font-size: .9rem; } /* Geen lijn tussen de kop en de balk (DevExpress zet die met .dxbl-theme-fluent .app .header). */ #main-window-template-component > .header:has(+ .focara-explore-banner) { border-bottom: none; box-shadow: none; } .focara-explore-banner i { color: #fff; font-size: 1.1rem; } /* Issue #79: achterstallige betaling of opgezegd abonnement. Waarschuwing in de kleur van de verkenmodus, alleen-lezen in rood; de link naar de openstaande factuur valt op. */ .focara-billing-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 16px; font-size: .9rem; color: var(--ink, #222); } .focara-billing-banner.is-warning { background: color-mix(in srgb, var(--icon-warning, #e8c84a) 22%, var(--surface-strong, #fff)); border-bottom: 1px solid color-mix(in srgb, var(--icon-warning, #e8c84a) 60%, var(--surface-line, #ddd)); } .focara-billing-banner.is-readonly { background: color-mix(in srgb, #c2412d 14%, var(--surface-strong, #fff)); border-bottom: 1px solid color-mix(in srgb, #c2412d 45%, var(--surface-line, #ddd)); } .focara-billing-banner i { font-size: 1.1rem; } .focara-billing-banner a { font-weight: 600; text-decoration: underline; } /* Issue #60: op touch-apparaten opent lang indrukken op een kolomkop of rij het lijstmenu (js/touch-contextmenu.js); het eigen kopieer-/selectiemenu van iOS zou daar tussen komen. */ @media (hover: none) and (pointer: coarse) { .dxbl-grid th, .dxbl-grid td { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } } /* Issue #70: statusknoppen boven een lijst; het filtericoon krijgt de tekstkleur van de statusbadge, zonder de achtergrond en rand van de badge. */ .status-toolbar .status-toolbar-icon { background: none; border: none; padding: 0; } /* Een aangezette knop krijgt dezelfde rand als een invoerveld; in het donkere thema is die licht, zodat zichtbaar blijft welke filters aan staan. DevExpress zet .dxbl-active op een aangevinkte toolbarknop. Een schaduw en geen outline: de focusrand van DevExpress (outline) verving die op de net aangeklikte knop. */ .status-toolbar .dxbl-btn.dxbl-active, .status-toolbar .dxbl-btn.dxbl-active:hover, .status-toolbar .dxbl-btn.dxbl-active:focus, .status-toolbar .dxbl-btn.dxbl-active:focus-visible { box-shadow: inset 0 0 0 1px var(--dxds-color-border-neutral-default-rest, var(--fc-border)); border-radius: var(--dxbl-btn-border-radius, 0.25rem); } /* Issue #103: de vaste delen van een mail (logo, samenvoegvelden, knop, handtekening, voettekst) grijs rond de berichteditor in het workflowvenster: zichtbaar, maar niet aan te passen. */ .mail-fixed-part { margin: 6px 0; padding: 8px 12px; border: 1px dashed var(--fc-border); border-radius: 6px; background: color-mix(in srgb, var(--fc-text-muted) 6%, transparent); color: var(--fc-text-muted); opacity: 0.8; user-select: none; pointer-events: none; } .mail-fixed-part p, .mail-fixed-part h1, .mail-fixed-part h2, .mail-fixed-part h3 { margin: 0.2em 0; } .mail-fixed-part .mail-fixed-button { display: inline-block; padding: 6px 16px; border-radius: 4px; filter: grayscale(0.6); } /* Issue #107: screenshots in het gesprek van een supportticket passen in de breedte. */ .support-message-body img { max-width: 100%; height: auto; } /* Issue #110: het zijpaneel van de knoppen rechtsboven (favorieten, meldingen, taken; HeaderSidePanel). Zelfde plek, rand en inschuiven als het instellingenpaneel van XAF (.settings-bar), maar iets breder voor de inhoud. */ .focara-side-panel { position: fixed; top: 75px; right: 0; z-index: 1100; display: flex; flex-direction: column; width: 0; max-width: 100vw; height: calc(100% - 75px); overflow: hidden; visibility: hidden; transition: width 200ms; background: var(--dxds-color-surface-neutral-default-rest, var(--fc-surface)); color: var(--fc-text); border-left: 1px solid var(--dxds-color-border-neutral-default-rest, var(--fc-border)); border-top: 1px solid var(--fc-border-strong, var(--fc-border)); /* Issue #287: dezelfde lichte schaduw als het gebruikersmenu (Mijn gegevens); die van .settings-bar liet het paneel zweven. */ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16); font-size: 1rem; } .focara-side-panel.is-open { width: 400px; visibility: visible; } @media (max-width: 991.98px) { .focara-side-panel { top: 56px; height: calc(100% - 56px); } } /* Klikken naast het paneel sluit het; onzichtbaar, net onder het paneel. */ .focara-side-panel-backdrop { position: fixed; inset: 0; z-index: 1099; background: transparent; } .focara-side-panel-header { display: flex; align-items: center; justify-content: space-between; min-width: 400px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--fc-border); } .focara-side-panel-title { font-size: 1.1rem; font-weight: 600; } .focara-side-panel-close { border: 0; background: transparent; color: color-mix(in srgb, var(--fc-text) 60%, transparent); padding: 4px 6px; border-radius: 6px; line-height: 1; cursor: pointer; } .focara-side-panel-close:hover { background: var(--fc-brand-tint, rgba(0, 0, 0, 0.06)); color: var(--fc-text); } .focara-side-panel-body { flex: 1; min-width: 400px; overflow-y: auto; } .focara-side-panel-footer { min-width: 400px; padding: 12px 18px; border-top: 1px solid var(--fc-border); } .focara-side-panel-footer:empty { display: none; } .focara-side-panel-footer-link { color: var(--fc-brand); font-weight: 600; text-decoration: none; } .focara-side-panel-footer-link:hover { text-decoration: underline; } .focara-side-panel-empty { padding: 16px 18px; color: color-mix(in srgb, var(--fc-text) 60%, transparent); } .focara-side-panel-list { list-style: none; margin: 0; padding: 0; } .focara-side-panel-list > li { border-bottom: 1px solid var(--fc-border); } .focara-side-panel-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; color: var(--fc-text); text-decoration: none; } .focara-side-panel-item:hover { background: var(--fc-brand-tint, rgba(0, 0, 0, 0.04)); } .focara-side-panel-item-icon { flex-shrink: 0; margin-top: 2px; } .focara-side-panel-item-text { display: flex; flex-direction: column; min-width: 0; } .focara-side-panel-item-title { font-weight: 600; overflow-wrap: anywhere; } .focara-side-panel-item-sub { font-size: 0.9rem; color: color-mix(in srgb, var(--fc-text) 60%, transparent); } /* Op een telefoon het hele scherm breed. */ @media (max-width: 575.98px) { .focara-side-panel.is-open, .focara-side-panel-header, .focara-side-panel-body, .focara-side-panel-footer { width: 100vw; min-width: 0; } } /* Issue #124: "● LIVE" naast de titel in de kop, zoals op de kijkerspagina van de live sessie. */ .focara-heading-with-badge { display: flex; align-items: center; gap: 12px; min-width: 0; } .focara-live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, #e5484d 12%, var(--fc-surface, #fff)); border: 1px solid color-mix(in srgb, #e5484d 45%, transparent); color: #c62f35; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; } .focara-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #e5484d; animation: focara-live-pulse 1.6s infinite; } .focara-live-closed { font-weight: 500; letter-spacing: 0; color: var(--dxds-neutral-150, #555); } /* Issue #126: "Restant open" in de kop van project en opdracht. */ .focara-payment-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #c62f35; color: #fff; font-size: 0.8rem; font-weight: 700; white-space: nowrap; } @keyframes focara-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.6); } 70% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } } /* Issue #161: kaarten in een dashboard. DevExpress geeft elke kaartregel een vaste regelhoogte (18px) met overflow hidden, waardoor een grotere waarde (de KPI-tegels van het standaarddashboard) onder- en bovenaan werd afgeknipt. */ .dx-flex-card-layout-row-element { line-height: 1.25 !important; } .dx-flex-card-layout-row-left-right { height: auto !important; overflow: visible !important; } /* Issue #201: dossierbalk (aanvraag → offerte → project → fotoshoots → facturen) onder de werkbalk. Uitlijning: het detailscherm eronder heeft 4px ruimte opzij en houdt altijd plaats voor zijn schuifbalk vrij (zie scrollbar-gutter bij .focara-detailview-body). De omhulling doet hetzelfde: 4px opzij en een even brede, lege schuifbalkgoot (0 bij zwevende schuifbalken), zodat de balk precies gelijk loopt met de kaarten en het infopaneel. */ .focara-dossier-wrap { padding: 0 4px 8px; overflow-y: hidden; scrollbar-gutter: stable; flex: none; } /* Issue #344: een platte regel als een kruimelpad, geen kaart meer: met de kopregel eronder viel een kader met schaduw uit de toon. Elke stap met het icoon uit het menu, de objecten als kleine chips; het geopende object groen gevuld. */ .focara-dossier-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0; font-size: 0.8125rem; } .focara-dossier-step { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* De ap-iconen van het menu; kleur (wit in donker) via de algemene regel voor img[src*="IImageService/ap-"]. */ .focara-dossier-icon { width: 16px; height: 16px; flex: none; opacity: .75; } .focara-dossier-label { color: var(--fc-text-muted); font-weight: 500; } .focara-dossier-step.is-missing { opacity: 0.55; } .focara-dossier-none { font-style: italic; color: var(--fc-text-muted); } .focara-dossier-arrow { color: var(--fc-text-muted); font-size: 0.75rem; opacity: 0.7; } .focara-dossier-item { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--fc-border); border-radius: 999px; background: var(--fc-surface-subtle); color: var(--fc-text); font-size: inherit; font-weight: 500; cursor: pointer; transition: border-color .15s, background-color .15s; } .focara-dossier-item:hover:not(:disabled) { border-color: var(--fc-brand); background: var(--fc-brand-tint); } .focara-dossier-item:focus-visible { outline: none; box-shadow: var(--fc-focus-ring); } .focara-dossier-item.is-current { border-color: color-mix(in srgb, var(--fc-brand) 55%, var(--fc-border)); background: var(--fc-brand-tint-strong); color: var(--fc-text); font-weight: 600; cursor: default; } /* De status als klein label in de chip. */ .focara-dossier-status { padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--fc-text) 8%, transparent); color: var(--fc-text-muted); font-size: 0.75rem; font-weight: 500; } .focara-dossier-more { color: var(--fc-text-muted); font-weight: 500; } /* Issue #261: eigen tekst in een lege lijst (EmptyListTextController) en uitlegregels boven een groep (StaticText). */ .focara-empty-list { max-width: 640px; margin: 0 auto; padding: 24px 16px; text-align: center; color: var(--fc-text-muted, #6c757d); white-space: normal; } /* Issue #262: meer contrast in het lichte thema. Alleen-lezen en uitgeschakelde velden hadden een vulling van 2% en een rand van 1,35:1 op wit: nauwelijks van de achtergrond te onderscheiden. Groepsranden iets donkerder. De lege stappen in het pad ("geen") haalden met opacity .55 maar ~2,6:1. Donker blijft gelijk. */ body:not(.dxbl-theme-dark) .dxbl-fl .dxbl-text-edit.dxbl-disabled, body:not(.dxbl-theme-dark) .dxbl-fl .dxbl-text-edit.dxbl-readonly { background-color: rgba(22, 22, 22, 0.05) !important; border-color: #c4c4c2 !important; } /* Issue #278: de rand komt nu uit --fc-card-border (in licht nog steeds #cfcfcd), zodat de andere kaarten dezelfde krijgen. */ .dxbl-fl .dxbl-group { border-color: var(--fc-card-border); } body:not(.dxbl-theme-dark) .focara-dossier-step.is-missing { opacity: 0.75; } /* Issue #263: de QR-pagina printen zonder knoppen en zonder grijze achtergrond. */ .headshot-signup-qr-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* Issue #301: de QR-pagina staat vaak op een touchscreen bij de ingang: knoppen even groot als in de live-wachtrij (#292). */ .headshot-signup-qr-actions .dxbl-btn { min-height: 52px; min-width: 140px; padding-left: 24px; padding-right: 24px; font-size: 1.1rem; } @media print { .headshot-signup-qr-wrap { background: #fff; min-height: auto; } .headshot-signup-qr-sheet { border: none; } .headshot-signup-qr-actions { display: none; } } /* Issue #263: de status op de Folder Watch-pagina als tekst, niet als invoerveld. */ .folderwatch-status { padding: 6px 0; font-weight: 600; } /* Issue #295: een keuzeveld toont standaard alleen het pijltje en het kruisje. Toevoegen en Bewerken (de XAF-acties in het veld) verschijnen: - met een muis: zolang Ctrl ingedrukt is, op het veld onder de muis (html.ctrl-held, lookup-actions.js); - op een touchscreen: zolang het veld de focus heeft (na een tik erop). Alleen verbergen, nooit zelf zichtbaar maken: wat XAF zelf verbergt (Bewerken bij een leeg veld) blijft verborgen en de volgorde blijft die van XAF. */ @media (hover: hover) { html:not(.ctrl-held) .dxbl-text-edit .dxbl-btn-group .xaf-action.dxbl-text-edit-btn, html.ctrl-held .dxbl-text-edit:not(:hover) .dxbl-btn-group .xaf-action.dxbl-text-edit-btn { display: none !important; } } @media (hover: none) { .dxbl-text-edit:not(:focus-within) .dxbl-btn-group .xaf-action.dxbl-text-edit-btn { display: none !important; } } /* Het kruisje blijft op zijn plek naast het pijltje; Bewerken en Toevoegen verschijnen links ervan in plaats van ertussen. In het veld staan na de invoer: het kruisje, de groep met de XAF-acties en de groep met het pijltje. */ .dxbl-text-edit > .dxbl-edit-btn-clear { order: 2; } .dxbl-text-edit > .dxbl-btn-group:has(> .dxbl-edit-btn-dropdown) { order: 3; } /* De knoppen hebben alleen een lijn links; nu het kruisje (zonder lijn) erna komt, krijgt de laatste actie ook een lijn rechts. Zonder ronde hoeken: DevExpress rondt de laatste knop van een groep af, maar die staat nu midden in het veld. */ .dxbl-text-edit > .dxbl-btn-group > .xaf-action.dxbl-text-edit-btn:last-child { border-right: var(--dxbl-text-edit-border-width, 1px) solid var(--dxbl-text-edit-border-color) !important; border-radius: 0 !important; } /* Issue #345: de inhoud van een kleine kaart op een detailscherm (CardSummaryView): een groot getal met een balkje (Inschrijving) en een paar regels met de kerngegevens. "Bewerken" eronder opent het venster met alle velden. */ .focara-part-summary { display: flex; flex-direction: column; gap: 10px; font-size: 0.875rem; } .focara-part-summary__big { display: flex; align-items: baseline; gap: 6px; } .focara-part-summary__big strong { font-size: 1.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .focara-part-summary__big span { color: var(--fc-text-muted); } .focara-part-summary__bar { height: 6px; border-radius: 3px; background: var(--fc-border); overflow: hidden; } .focara-part-summary__bar span { display: block; height: 100%; background: var(--fc-brand-solid); } .focara-part-summary__rows { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 10px; margin: 0; } .focara-part-summary__rows dt { font-weight: 400; color: var(--fc-text-muted); } .focara-part-summary__rows dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }