level, which cascades into the | cells.
The correct approach is to override the component variable
on a scoped ancestor selector (.dxbl-grid).
Variable chain traced in core.min.css:
.dxbl-grid-selected-row td
→ reads --dxbl-grid-selection-bg
→ default: var(--dxds-color-surface-primary-deep-rest)
→ which maps to primary-100 (full orange) by default
Checkbox checked variable chain:
dxbl-check.dxbl-checkbox-checked
→ --dxbl-checkbox-check-element-bg
→ --dxbl-checkbox-primary-checked-check-element-bg
→ --dxds-color-content-primary-compound-rest
→ neutral-0 (white on white = invisible tick)
Fix: override the component variables directly.
============================================================ */
/* ── Grid variable overrides ─────────────────────────────────
All overrides on .dxbl-grid so they cascade into the component.
--dxbl-grid-selection-bg → selected row (checkbox)
--dxbl-grid-edit-row-bg → edit row (inplace cell editing)
--dxbl-grid-editor-cell-* → padding around inplace editors:
set to 0 so the editor fills the full cell height/width,
matching DevExpress's own Fluent theme behaviour. */
.dxbl-grid {
--dxbl-grid-selection-bg: var(--app-primary-10);
--dxbl-grid-selection-color: var(--app-neutral-100);
--dxbl-grid-selection-focus-dark-bg: var(--app-primary-20);
--dxbl-grid-selection-focus-dark-color: var(--app-neutral-100);
--dxbl-grid-edit-row-bg: var(--app-primary-20);
--dxbl-grid-edit-row-color: var(--app-neutral-100);
--dxbl-grid-editor-cell-padding-x: 0;
--dxbl-grid-editor-cell-padding-y: 0;
--dxbl-grid-text-cell-padding-x: 0.125rem;
--dxbl-grid-text-cell-padding-y: 0;
--dxbl-grid-border-color: transparent;
}
/* Colonne de sélection compacte : les cases à cocher prennent trop de place
(padding horizontal large par défaut). On réduit le padding de la cellule de
sélection — en-tête « tout sélectionner » comprise, pour garder l'alignement —
et on laisse la colonne se réduire à la case. */
.dxbl-grid .dxbl-grid-selection-cell {
padding-left: 0.125rem !important;
padding-right: 0.125rem !important;
width: 1px;
white-space: nowrap;
}
/* La colonne de sélection paraît « pleine de padding » parce que le contrôle
« tout sélectionner » de l'en-tête est un split-button .dxbl-btn au padding 7/12
+ grosses marges (mesuré : ~133px de large). En table, il impose la largeur de
TOUTE la colonne : les cases des lignes (20px) flottent alors dans une colonne
très large. On compacte ce bouton → la colonne se réduit à la case. */
/* Boutons DANS les cellules de grille = boutons-icônes en contexte dense. Bonnes
pratiques « table dense » (Carbon/Fluent) : bouton-icône ~28px carré, padding 6px,
icône 16px, gap 4px — au lieu du padding 7/12 (~36px) hérité des boutons de
formulaire. Ciblé sur les cellules (td) + la cellule de sélection (th) : les
boutons de la barre d'outils (Nouveau, Supprimer…), hors | , restent en taille M. */
.dxbl-grid td .dxbl-btn,
.dxbl-grid .dxbl-grid-selection-cell button.dxbl-btn {
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
height: 12px !important;
line-height: 1 !important;
gap: 2px !important;
}
/* Marges internes du split-button « tout sélectionner » de l'en-tête. */
.dxbl-grid .dxbl-grid-selection-cell .dxbl-btn-split,
.dxbl-grid .dxbl-grid-selection-cell .dxbl-grid-select-all-split-btn-container {
margin: 0 !important;
padding: 0 !important;
}
/* Densité verticale : DevExpress impose min-height 32px aux cellules → lignes ~40px
pour un contenu de ~18px. On retire ce plancher + on resserre le line-height pour
que les lignes se compactent au contenu (padding vertical déjà à 0). */
.dxbl-grid td,
.dxbl-grid th {
min-height: 0 !important;
line-height: 1.15 !important;
}
/* La case à cocher en grille impose la hauteur de ligne : une règle du thème
(`.main-object-model .dxbl-checkbox` / `.detail-view-content .dxbl-checkbox`,
3 classes) fixe min-height 36px pour le confort de clic sur formulaire. En grille
on veut compact : on monte la spécificité (chemin .dxbl-grid-table td, 3 classes +
1 élément) pour gagner, sans toucher aux cases des formulaires. */
.dxbl-grid .dxbl-grid-table td .dxbl-checkbox,
.dxbl-grid .dxbl-grid-table th .dxbl-checkbox {
padding: 0 !important;
min-height: 0 !important;
height: 12px !important;
align-self: center !important;
}
/* Chevron d'expansion de l'arbre : le SVG rend à 30px, on le ramène à 16px. */
.dxbl-grid .dxbl-grid-tree-node-expand-button svg,
.dxbl-grid .dxbl-grid-tree-node-expand-button .dxbl-image {
width: 16px !important;
height: 16px !important;
}
/* Cellules action/arbre/commande : DevExpress leur impose min-height 32px avec un
sélecteur spécifique. On l'annule avec un sélecteur au moins aussi spécifique
(chemin > tbody > tr > td + classe). */
.dxbl-grid .dxbl-grid-table > tbody > tr > td.xaf-action,
.dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-tree-node-expand-controls-cell,
.dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-command-cell {
min-height: 0 !important;
padding-left: 0.125rem !important;
padding-right: 0.125rem !important;
}
/* Colonnes d'action (crayon, import…) : sans largeur contrainte, l'icône flotte au
centre d'une colonne large -> gros écarts horizontaux. Même astuce que la colonne
de sélection (width:1px) : la colonne se réduit à la largeur de son contenu.
Ciblé th + td pour que l'en-tête ne rouvre pas la colonne. */
.dxbl-grid .dxbl-grid-table td.xaf-action,
.dxbl-grid .dxbl-grid-table th.xaf-action,
.dxbl-grid .dxbl-grid-table td.dxbl-grid-command-cell,
.dxbl-grid .dxbl-grid-table th.dxbl-grid-command-cell {
width: 1px !important;
white-space: nowrap !important;
}
/* Hauteur de ligne compacte FORCÉE sur la ligne (tr) et ses cellules. Le composant
maintenait des lignes ~39px pour un contenu de ~16px ; on impose ~24px. (Levier
manquant : les règles précédentes ne visaient que les cellules, pas la ligne.) */
.dxbl-grid .dxbl-grid-table > tbody > tr,
.dxbl-grid .dxbl-grid-table > tbody > tr > td {
height: 16px !important;
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1.1 !important;
}
/* Cellules « valeur modifiée » (mode batch-edit) : XAF pose en inline
`background-color: var(--fluent-primary-transparent-bg, var(--bs-primary-transparent-bg)) !important`.
Le défaut Bootstrap = color-mix(15% primary, white) -> teal pâle perçu bleu.
Impossible de battre un !important inline par une règle classique : on
redéfinit donc la variable SUR la cellule -> le var() inline résout en blanc.
Scopé à .xaf-grid-modified-value : n'affecte aucun autre usage de ce token. */
.dxbl-grid td.xaf-grid-modified-value,
dxbl-tree-list.dxbl-grid td.xaf-grid-modified-value {
--fluent-primary-transparent-bg: var(--app-neutral-0);
--bs-primary-transparent-bg: var(--app-neutral-0);
}
/* Calendriers de tournées (classe posée par RoundCalendarGrid.LockToDataSourceOrder) :
lignes fixes Lundi→Dimanche, non ouvrables. On masque la colonne de commande inline
« Ouvrir » (action ShowObject, affichée désactivée) : contenu caché + colonne réduite
à 0 pour ne pas laisser de gouttière. La 1re = colonne de commande. width:0 !important
bat le width inline 61px.
ATTENTION : le même marqueur est posé sur des grilles qui, elles, ont une colonne de
sélection (multi-select activé, ex. « Clients desservis » / CustomerRoundDay). Là, la 1re
est la colonne de sélection : la réduire à 0 écrase la case « tout sélectionner » de
l'en-tête, qui déborde sur la colonne suivante. On exclut donc ce cas via
:not(:has(.dxbl-grid-selection-cell)) — on ne collapse la 1re colonne que sans sélection. */
.round-calendar-grid .dxbl-grid-table:not(:has(.dxbl-grid-selection-cell)) > colgroup > col:first-child {
width: 0 !important;
}
.round-calendar-grid .dxbl-grid-command-cell {
padding: 0 !important;
border: 0 !important;
}
.round-calendar-grid .dxbl-grid-command-cell > * {
display: none !important;
}
/* Checkbox unchecked — primary (green) border 1.5px, transparent background.
Figma spec: border var(--checkbox/enable/border, #018973) = primary-100,
border-width 1.5px, border-radius 4px, bg transparent. */
dxbl-check.dxbl-checkbox-unchecked {
--dxbl-checkbox-check-element-border: var(--app-primary-100) !important;
--dxbl-checkbox-check-element-bg: transparent !important;
}
dxbl-check.dxbl-checkbox-unchecked .dxbl-checkbox-check-element,
dxbl-check.dxbl-checkbox-indeterminate .dxbl-checkbox-check-element {
border-color: var(--app-primary-100) !important;
border-width: 1.5px !important;
border-radius: 4px !important;
background-color: transparent !important;
}
/* Checkbox checked — orange background with white tick */
dxbl-check.dxbl-checkbox-checked {
--dxbl-checkbox-check-element-bg: var(--app-primary-100) !important;
--dxbl-checkbox-check-element-border: var(--app-primary-100) !important;
--dxbl-checkbox-primary-checked-check-element-bg: var(--app-primary-100) !important;
--dxbl-checkbox-primary-checked-check-element-border: var(--app-primary-100) !important;
}
dxbl-check.dxbl-checkbox-checked .dxbl-checkbox-check-element {
background-color: var(--app-primary-100) !important;
border-color: var(--app-primary-100) !important;
border-radius: 4px !important;
}
dxbl-check.dxbl-checkbox-checked .dxbl-checkbox-check-element .dxbl-image {
color: var(--app-neutral-0) !important;
}
/* Read-only (display-mode) checkbox in a grid cell: DevExpress renders a faint tick on a plain
transparent background, so a TICKED box read as unticked (the user reported a checked box looking
empty). Align it with the editable checked style: filled green box + white tick, so a checked
read-only box is unmistakably checked. The unchecked read-only box keeps a green border only. */
.dxbl-checkbox.dxbl-checkbox-display-view-checked > div,
.dxbl-checkbox.dxbl-checkbox-display-view-indeterminate > div {
background-color: var(--app-primary-100) !important;
border-color: var(--app-primary-100) !important;
border-radius: 4px !important;
}
.dxbl-checkbox.dxbl-checkbox-display-view-checked > div > .dxbl-image,
.dxbl-checkbox.dxbl-checkbox-display-view-indeterminate > div > .dxbl-image {
color: var(--app-neutral-0) !important;
}
/* Unchecked read-only box: green border + transparent fill, like the editable unchecked state. */
.dxbl-checkbox.dxbl-checkbox-display-view-unchecked > div {
border-color: var(--app-primary-100) !important;
border-width: 1.5px !important;
border-radius: 4px !important;
background-color: transparent !important;
}
/* Filet de sécurité : TOUTE case cochée (éditable ou lecture seule, dans les grilles
comme ailleurs) -> fond vert marque + coche blanche. On cible directement l'élément
de coche `.dxbl-checkbox-check-element` pour ne PAS dépendre de la structure interne
(`> div`), qui peut varier selon la version DevExpress -> évite le cas « coche blanche
sur fond blanc = invisible ». */
.dxbl-checkbox-checked .dxbl-checkbox-check-element,
.dxbl-checkbox-indeterminate .dxbl-checkbox-check-element,
.dxbl-checkbox-display-view-checked .dxbl-checkbox-check-element,
.dxbl-checkbox-display-view-indeterminate .dxbl-checkbox-check-element {
background-color: var(--app-primary-100) !important;
border-color: var(--app-primary-100) !important;
border-radius: 4px !important;
}
.dxbl-checkbox-checked .dxbl-checkbox-check-element .dxbl-image,
.dxbl-checkbox-indeterminate .dxbl-checkbox-check-element .dxbl-image,
.dxbl-checkbox-display-view-checked .dxbl-checkbox-check-element .dxbl-image,
.dxbl-checkbox-display-view-indeterminate .dxbl-checkbox-check-element .dxbl-image,
.dxbl-checkbox-checked .dxbl-checkbox-check-element svg,
.dxbl-checkbox-display-view-checked .dxbl-checkbox-check-element svg {
color: #ffffff !important;
fill: #ffffff !important;
}
/* Checkbox size — 20×20 */
dxbl-check .dxbl-checkbox-check-element {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
}
dxbl-check .dxbl-checkbox-check-element .dxbl-image {
width: 14px !important;
height: 14px !important;
}
/* En grille, les cases sont plus petites que sur formulaire (contexte dense) :
14×14 avec coche 10px. Scopé à .dxbl-grid-table pour ne pas réduire les cases
des formulaires (règle 20×20 ci-dessus, non scopée). */
.dxbl-grid .dxbl-grid-table .dxbl-checkbox-check-element {
width: 12px !important;
height: 12px !important;
min-width: 12px !important;
min-height: 12px !important;
box-sizing: border-box !important;
}
.dxbl-grid .dxbl-grid-table .dxbl-checkbox-check-element .dxbl-image {
width: 9px !important;
height: 9px !important;
}
/* En grille, bordure de case plus fine (1px au lieu de 1.5px) : la case en trait fin
s'harmonise avec les icônes d'action (crayon, import) et paraît moins « lourde ». */
.dxbl-grid .dxbl-grid-table dxbl-check.dxbl-checkbox-unchecked .dxbl-checkbox-check-element,
.dxbl-grid .dxbl-grid-table dxbl-check.dxbl-checkbox-indeterminate .dxbl-checkbox-check-element {
border-width: 1px !important;
border-radius: 3px !important;
}
/* Icônes des boutons d'action en cellule (crayon, import…) : alignées sur la taille
des cases (14px). Surcharge la règle globale des icônes de bouton (16px). */
.dxbl-grid .dxbl-grid-table td button .dxbl-image,
.dxbl-grid .dxbl-grid-table td button img,
.dxbl-grid .dxbl-grid-table td button svg,
.dxbl-grid .dxbl-grid-table td a .dxbl-image,
.dxbl-grid .dxbl-grid-table td a img,
.dxbl-grid .dxbl-grid-table td a svg,
.dxbl-grid .dxbl-grid-table td.dxbl-grid-command-cell img,
.dxbl-grid .dxbl-grid-table td.dxbl-grid-command-cell svg,
.dxbl-grid .dxbl-grid-table td.xaf-action img,
.dxbl-grid .dxbl-grid-table td.xaf-action svg {
width: 12px !important;
height: 12px !important;
min-width: 0 !important;
min-height: 0 !important;
}
/* Tree expand/collapse button — must NOT inherit the 33px min-height
from the global button reset (section 4). Its size is set by the
grid's own icon sizing, not the toolbar button spec. */
.dxbl-grid .dxbl-grid-tree-node-expand-button.dxbl-btn {
min-height: unset !important;
height: 1.25rem !important;
min-width: unset !important;
width: 1.25rem !important;
padding: 0 !important;
box-shadow: none !important;
}
/* Case « tout sélectionner » (en-tête grille) : c'est un SPLIT BUTTON (case à cocher +
chevron « modes de sélection »). Le reset bouton global (section 4) lui collait un fond
teal (primary) + une ombre -> grosse boîte « bizarre ». On enlève UNIQUEMENT l'habillage
visuel (fond, ombre, bordure). ⚠️ NE PAS toucher padding/min-height/géométrie : ça
décalait la colonne de sélection (désalignement) et cassait la zone cliquable de la case. */
.dxbl-grid-select-all-split-btn-container .dxbl-btn,
.dxbl-grid-select-all-split-btn-container .dxbl-btn-split > .dxbl-btn {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
/* Chevron du select-all : la règle secondary (§6) met les icônes en BLANC au survol,
ce qui le faisait disparaître sur l'en-tête blanc. On annule ce filtre pour ce conteneur
(icône en teal, au repos comme au survol). Sélecteur calqué sur §6 + préfixe conteneur
pour gagner en spécificité (0,8,0 > 0,7,0). */
.dxbl-grid-select-all-split-btn-container .dxbl-image {
filter: none !important;
color: var(--app-dark-teal) !important;
opacity: 0.7 !important;
}
.dxbl-grid-select-all-split-btn-container .dxbl-btn.dxbl-btn-secondary:not([data-action-name="New"]):not([data-action-name="Nouveau"]):not([data-action-name="Valider"]):hover .dxbl-image {
filter: none !important;
color: var(--app-dark-teal) !important;
opacity: 0.95 !important;
}
/* Row hover (survol lime/20).
⚠️ L'ancienne règle `.dxbl-grid-row:hover td` ne matchait RIEN : les lignes de données
DevExpress sont des `tbody > tr` (pas de classe `.dxbl-grid-row`), et le survol natif
exige la classe `.dxbl-grid-row-hover-enabled` (souvent absente) + ajoute un voile noir 4%.
On cible donc directement la vraie ligne et on force le fond lime. On exclut en-tête
(thead), ligne de filtre, groupes, édition, vide, et lignes SÉLECTIONNÉES (gardent leur fond). */
.dxbl-grid tbody > tr:not(.dxbl-grid-filter-row):not(.dxbl-grid-group-row):not(.dxbl-grid-group-footer-row):not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-selected-row):hover > td {
background-color: var(--app-lime-20) !important;
}
/* Column headers */
.dxbl-grid .dxbl-grid-header-cell {
font-family: var(--app-font) !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--app-neutral-100) !important;
background-color: var(--app-neutral-10) !important;
border-bottom: 1px solid var(--app-neutral-40) !important;
}
/* Lignes de données : texte teal #164147 + 12px (Figma : grid/line_item/enable/content
#164147, police s/regular 12px). On cible le rôle « gridcell » -> n'affecte NI l'en-tête
(columnheader) NI la ligne de filtre. Même traitement que le tree-list (section 13b). */
.dxbl-grid td[role="gridcell"] {
color: var(--app-dark-teal) !important;
font-size: 12px !important;
}
/* Éditeur INLINE de cellule : même police que l'affichage (12px). Sans ça, la règle
éditeur globale (§ « FORM EDITORS », font-size 14px !important sur .dxbl-text-edit / input)
rendait le texte PLUS GRAND en modification qu'en visualisation. Scopé aux cellules de
données (role=gridcell) -> n'affecte pas la ligne de filtre ni l'en-tête. */
.dxbl-grid td[role="gridcell"] .dxbl-text-edit,
.dxbl-grid td[role="gridcell"] .dxbl-text-edit-input,
.dxbl-grid td[role="gridcell"] .dxbl-input-editor,
.dxbl-grid td[role="gridcell"] .dxbl-combobox,
.dxbl-grid td[role="gridcell"] input,
.dxbl-grid td[role="gridcell"] textarea,
.dxbl-grid td[role="gridcell"] select {
font-size: 12px !important;
}
/* Cellules « lien » (référence : Marque, Unité, BioCode…) et VALEUR MODIFIÉE
(template xaf-grid-display-item, affiché plus grand car le CSS core fixe une taille
sur le lien/wrapper, écrasant le 12px hérité du td). On force 12px sur le lien et le
wrapper pour que l'affichage modifié == l'affichage normal. */
.dxbl-grid td[role="gridcell"] a,
.dxbl-grid td[role="gridcell"] .grid-cell-object-link,
.dxbl-grid td[role="gridcell"] .xaf-grid-display-item,
.dxbl-grid td[role="gridcell"] .xaf-grid-display-item a,
.dxbl-grid td[role="gridcell"] .xaf-wrap-ellipsis {
font-size: 12px !important;
}
/* Éditeur INLINE (input combobox/lookup, ex. colonne « Marque ») : en édition, la cellule
ne garde PAS role="gridcell", donc la règle ci-dessus la manquait et l'éditeur retombait
sur la police globale 14px (§ FORM EDITORS) -> texte plus GRAND en modif qu'en affichage.
On scope donc à la LIGNE de données (tr), indépendamment du rôle de la cellule, en
excluant la ligne de filtre et l'en-tête (qui ont leurs propres tailles). */
.dxbl-grid tr:not(.dxbl-grid-filter-row):not(.dxbl-grid-header-row) .dxbl-text-edit-input,
.dxbl-grid tr:not(.dxbl-grid-filter-row):not(.dxbl-grid-header-row) input[type="text"],
.dxbl-grid tr:not(.dxbl-grid-filter-row):not(.dxbl-grid-header-row) input[type="search"],
.dxbl-grid tr:not(.dxbl-grid-filter-row):not(.dxbl-grid-header-row) .dxbl-text-edit,
.dxbl-grid tr:not(.dxbl-grid-filter-row):not(.dxbl-grid-header-row) .dxbl-input-editor,
.dxbl-grid tr:not(.dxbl-grid-filter-row):not(.dxbl-grid-header-row) .dxbl-combobox,
.dxbl-grid tr:not(.dxbl-grid-filter-row):not(.dxbl-grid-header-row) textarea,
.dxbl-grid tr:not(.dxbl-grid-filter-row):not(.dxbl-grid-header-row) select {
font-size: 12px !important;
}
/* Filter / search row — secondary brand colour background */
tr.dxbl-grid-filter-row.dxbl-grid-editor-inplace-container td,
.dxbl-grid tr.dxbl-grid-filter-row td dxbl-date-edit {
background-color: var(--app-primary-10) !important;
}
/* Editors inside filter row are transparent so the row bg shows through */
tr.dxbl-grid-filter-row .dxbl-text-edit,
tr.dxbl-grid-filter-row dxbl-input-editor,
tr.dxbl-grid-filter-row dxbl-spinedit,
tr.dxbl-grid-filter-row dxbl-date-edit {
background: transparent !important;
box-shadow: none !important;
}
tr.dxbl-grid-filter-row .dxbl-text-edit-input {
background: transparent !important;
color: var(--app-dark-teal) !important;
}
/* ============================================================
13b. TREE LIST — Figma node 2308-47972
============================================================ */
dxbl-tree-list.dxbl-grid {
width: 100% !important;
min-width: 100% !important;
}
dxbl-tree-list.dxbl-grid .dxbl-scroll-viewer,
dxbl-tree-list.dxbl-grid .dxbl-scroll-viewer-content,
dxbl-tree-list.dxbl-grid .dxbl-grid-table {
width: 100% !important;
min-width: 100% !important;
}
dxbl-tree-list.dxbl-grid .dxbl-grid-table {
table-layout: fixed !important;
border-collapse: separate !important;
border-spacing: 0 2px !important;
}
dxbl-tree-list.dxbl-grid .dxbl-grid-header,
dxbl-tree-list.dxbl-grid td[role="gridcell"] {
height: 32px !important;
min-height: 32px !important;
padding: 0 10px !important;
vertical-align: middle !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 400 !important;
color: var(--app-dark-teal) !important;
}
dxbl-tree-list.dxbl-grid tbody tr td {
background-color: var(--app-neutral-10) !important;
}
dxbl-tree-list.dxbl-grid tbody .dxbl-grid-selected-row td {
background-color: var(--app-primary-10) !important;
}
dxbl-tree-list.dxbl-grid tbody tr:hover td {
background-color: var(--app-neutral-20) !important;
}
dxbl-tree-list.dxbl-grid tbody tr td:first-child {
border-radius: 4px 0 0 4px !important;
}
dxbl-tree-list.dxbl-grid tbody tr td:nth-last-child(2) {
border-radius: 0 4px 4px 0 !important;
}
dxbl-tree-list.dxbl-grid .dxbl-grid-tree-node-expand-controls-cell {
display: table-cell !important;
white-space: nowrap !important;
}
dxbl-tree-list.dxbl-grid .dxbl-grid-tree-node-expand-controls-container {
display: inline-flex !important;
align-items: center !important;
vertical-align: middle !important;
margin-right: 4px !important;
}
dxbl-tree-list.dxbl-grid .dxbl-grid-bottom-panel.dxbl-pager-container {
min-height: 52px !important;
padding: 8px !important;
display: flex !important;
align-items: center !important;
}
/* ============================================================
13c. GRID LISTVIEW — row height / checkbox alignment
Applies only to XAF ListView grid containers.
Do not merge with section 18: DetailView rules also affect
form editors, input buttons and checkbox sizing.
============================================================ */
/* Pas de min-height ici : le plancher 36px (confort de clic sur formulaire, cf. section 18)
étire la case en grille et impose la hauteur de ligne. La hauteur compacte est fixée
par la règle `.dxbl-grid .dxbl-grid-table td .dxbl-checkbox` (height 20px). */
.main-content > .grid-content.grid-virtual-scrolling-mode dxbl-grid .dxbl-checkbox,
.main-content > .grid-content.grid-virtual-scrolling-mode dxbl-tree-list .dxbl-checkbox {
display: inline-flex !important;
align-items: center !important;
}
.main-content > .grid-content.grid-virtual-scrolling-mode dxbl-grid .dxbl-grid-selection-cell,
.main-content > .grid-content.grid-virtual-scrolling-mode dxbl-tree-list .dxbl-grid-selection-cell {
vertical-align: middle !important;
}
/* Décalage colonne de sélection : la case « tout sélectionner » de l'en-tête
(bouton split = case + chevron) s'aligne plus à GAUCHE que les cases des
lignes (centrées dans la cellule) -> elles ne forment pas une colonne propre.
On décale la case de l'en-tête de 25px à droite pour l'aligner sur les lignes,
en excluant le bouton dropdown (chevron) du split. */
.dxbl-grid-command-cell .dxbl-grid-header-content > .dxbl-grid-select-all-split-btn-container .dxbl-btn-split > .dxbl-btn:not(.dxbl-btn-split-dropdown),
.dxbl-grid-selection-cell .dxbl-grid-header-content > .dxbl-grid-select-all-split-btn-container .dxbl-btn-split > .dxbl-btn:not(.dxbl-btn-split-dropdown) {
margin-left: 25px !important;
}
.main-content > .grid-content.grid-virtual-scrolling-mode dxbl-grid td,
.main-content > .grid-content.grid-virtual-scrolling-mode dxbl-tree-list td {
vertical-align: middle !important;
}
/* ============================================================
14. INPUTS / SEARCH / EDITORS
General editor styles that apply outside of detail views.
Detail-view-scoped overrides are in section 18.
============================================================ */
.dxbl-input-editor,
.dxbl-text-edit,
.dx-texteditor,
.form-control,
input[type="text"],
input[type="search"],
textarea,
select {
font-family: var(--app-font) !important;
font-size: 14px !important;
border-radius: var(--app-radius-sm) !important;
border-color: var(--app-neutral-40) !important;
color: var(--app-neutral-100) !important;
background-color: var(--app-neutral-0) !important;
}
.dxbl-input-editor:focus,
.dxbl-text-edit:focus,
.dx-texteditor.dx-state-focused,
.form-control:focus,
input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
border-color: var(--app-primary-100) !important;
/* box-shadow: var(--app-shadow-focus) !important;*/
outline: none !important;
}
/* Toolbar search box height */
.dxbl-toolbar input[type="search"],
.dxbl-toolbar .dxbl-text-edit,
.dxbl-toolbar .dx-texteditor {
min-height: 33px !important;
}
/* ── Placeholder / Search input (Figma node 26-273) ─────────────
Le champ de recherche XAF (.xaf-action-fulltextsearch) doit
correspondre au composant Placeholder Figma :
- Icône intégrée dans le champ (pas de bouton distinct)
- États : enable / hover (champ) / focus-within (active)
HTML :
dxbl-input-editor.dxbl-text-edit.xaf-action-fulltextsearch
input.dxbl-text-edit-input
div.dxbl-btn-group-right
button.dxbl-btn.dxbl-btn-outline-secondary.dxbl-text-edit-btn
img.dxbl-image
Figma tokens :
enable : bg neutral-10 (#f9f9f9) border neutral-30 (#ebebea)
hover : bg primary-10 (#e6f3f1) border primary-20 (#cce7e3)
active : bg neutral-10 (#f9f9f9) border primary-100 (#018973)
icon enable/hover : neutral-80 (#91918d)
icon active : dark-teal (#164147)
──────────────────────────────────────────────────────────── */
/* Container — enable */
.xaf-action-fulltextsearch.dxbl-text-edit {
background-color: var(--placeholder-enable-bg) !important;
border-color: var(--placeholder-enable-border) !important;
border-radius: var(--app-radius-md) !important;
}
/* Container — hover */
.xaf-action-fulltextsearch.dxbl-text-edit:hover {
background-color: var(--placeholder-hover-bg) !important;
border-color: var(--placeholder-hover-border) !important;
box-shadow: none !important;
}
/* Input — bg hover (l'input a un bg explicite, doit suivre le container) */
.xaf-action-fulltextsearch.dxbl-text-edit:hover .dxbl-text-edit-input {
background-color: var(--placeholder-hover-bg) !important;
}
/* Container — active / focus */
.xaf-action-fulltextsearch.dxbl-text-edit:focus-within,
.xaf-action-fulltextsearch.dxbl-text-edit.dx-state-focused {
background-color: var(--placeholder-active-bg) !important;
border-color: var(--placeholder-active-border) !important;
box-shadow: none !important;
}
/* Input — bg enable (override placé aussi après blocs génériques, cf. ci-dessous) */
.xaf-action-fulltextsearch .dxbl-text-edit-input {
background-color: var(--placeholder-enable-bg) !important;
}
/* Bouton — transparent, intégré dans le champ
Spécificité 0,3,0 pour battre .dxbl-toolbar .dxbl-btn.dxbl-btn-outline-secondary */
.xaf-action-fulltextsearch .dxbl-btn.dxbl-text-edit-btn {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 7px 10px !important;
}
.xaf-action-fulltextsearch .dxbl-btn.dxbl-text-edit-btn:hover,
.xaf-action-fulltextsearch .dxbl-btn.dxbl-text-edit-btn:active,
.xaf-action-fulltextsearch .dxbl-btn.dxbl-text-edit-btn.dx-state-active {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Icône — couleur enable/hover : --placeholder-enable-content (#91918d) */
.xaf-action-fulltextsearch .dxbl-text-edit-btn .dxbl-image {
width: 14px !important;
height: 14px !important;
filter: brightness(0) saturate(0%) invert(57%) !important;
}
/* Icône — couleur active : --placeholder-active-content (#164147 dark-teal) */
.xaf-action-fulltextsearch.dxbl-text-edit:focus-within .dxbl-text-edit-btn .dxbl-image,
.xaf-action-fulltextsearch.dxbl-text-edit.dx-state-focused .dxbl-text-edit-btn .dxbl-image {
filter: brightness(0) saturate(100%) invert(22%) sepia(28%) saturate(665%) hue-rotate(155deg) brightness(93%) contrast(95%) !important;
}
/* Container — disabled */
.xaf-action-fulltextsearch.dxbl-disabled.dxbl-text-edit {
background-color: var(--placeholder-disabled-bg) !important;
border-color: var(--placeholder-disabled-border) !important;
box-shadow: none !important;
cursor: not-allowed !important;
}
/* Input — bg + texte disabled */
.xaf-action-fulltextsearch.dxbl-disabled .dxbl-text-edit-input {
background-color: var(--placeholder-disabled-bg) !important;
color: var(--placeholder-disabled-content) !important;
cursor: not-allowed !important;
}
/* Icône — couleur disabled : --placeholder-disabled-content (#b9b9b6) */
.xaf-action-fulltextsearch.dxbl-disabled .dxbl-text-edit-btn .dxbl-image {
filter: brightness(0) saturate(0%) invert(73%) !important;
}
/* ============================================================
15. PAGE TITLE / TOP BAR
============================================================ */
.header,
.app-header,
.dxbl-header {
font-family: var(--app-font) !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--app-font) !important;
}
/* Bandeau de page (flèche retour + titre de vue) rendu dans la zone contenu —
remplace le header sombre masqué (maquette). Le bouton retour hérite du style
bouton global (boîte claire) ; le titre est teal/semibold. */
.main-pagebar {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 14px; /* espace bouton retour <-> titre (maquette) : évite le « collé » */
padding-top: 16px;
padding-bottom: 2px;
min-height: 44px;
overflow: visible !important;
flex: 0 0 auto;
}
/* Retour + titre sur la MÊME ligne : enfants en ligne, pas d'écrasement vertical. */
.main-pagebar > * {
flex: 0 0 auto;
margin-left: 13px !important;
}
/* Bouton RETOUR : flèche COMPACTE façon maquette (« ← Produit » serré), au lieu de la
grosse boîte claire du reset bouton global (section 4) qui éloignait le titre du bord.
Seul bouton présent dans .main-pagebar -> on le cible directement. Au repos = flèche nue ;
au survol le style secondary lui redonne un fond teal (retour visuel conservé). */
/* Bouton RETOUR (.navigate-back-icon-container) = SECONDARY maquette : fond lime clair +
bordure lime + flèche teal foncé. Ciblé par sa double classe pour battre les utilitaires
Bootstrap p-0/border-0. L'icône est un masque coloré par currentColor -> on fixe `color`. */
/* IMPORTANT : préfixe #main-view-content (ID) pour passer DEVANT la règle DevExpress
`.dxbl-btn.dxbl-btn-text-none { background: transparent }` (même spécificité 0,2,0 mais
chargée après la nôtre, donc elle gagnait -> le bouton restait blanc/transparent).
L'ID porte la spécificité à (1,2,0) et règle définitivement la couleur. */
#main-view-content .navigate-back-icon-container.dxbl-btn,
#main-view-content .main-pagebar .dxbl-btn {
padding: 6px !important;
min-width: 0 !important;
min-height: 0 !important;
background: var(--app-primary-10) !important;
background-color: var(--app-primary-10) !important;
--dxbl-btn-background-color: var(--app-primary-10) !important;
--dxbl-btn-background-color-hovered: var(--app-primary-20) !important;
--dxbl-btn-background-color-active: var(--app-primary-20) !important;
border: 1px solid var(--app-primary-20) !important;
--dxbl-btn-border-color: var(--app-primary-20) !important;
border-radius: var(--app-radius-md) !important;
box-shadow: none !important;
color: var(--app-dark-teal) !important; /* flèche (mask currentColor) -> teal foncé */
--dxbl-btn-color: var(--app-dark-teal) !important;
}
#main-view-content .navigate-back-icon-container.dxbl-btn:hover,
#main-view-content .main-pagebar .dxbl-btn:hover {
background: var(--app-primary-20) !important;
background-color: var(--app-primary-20) !important;
border-color: var(--app-primary-30) !important;
color: var(--app-dark-teal) !important;
}
/* Titre de vue (ViewCaptionComponent). Maquette (Figma node 4090-40424) :
- PAS d'icône ;
- « Produit » TOUJOURS complet (jamais tronqué) ;
- bandeau LARGE : le titre prend la largeur restante, seul un nom d'objet long ellipse ;
- en vue DÉTAIL : « Produit » en GRIS (#91918d, Charcoal/80) + « - » + nom d'objet en teal.
Rendu DOM DevExpress : .view-caption-root > [.xaf-caption-icon-container,
.xaf-caption-container > (span.xaf-view-caption-sm|lg « Produit » + span.xaf-object-caption nom)].
sm = vue détail (ObjectCaption présent) ; lg = vue liste. */
.main-pagebar-title {
display: flex !important;
align-items: center !important;
flex: 1 1 auto !important; /* large : occupe la place restante du bandeau */
min-width: 0 !important; /* autorise l'ellipsis du nom d'objet long */
overflow: hidden !important;
font-family: var(--app-font) !important;
font-size: 18px !important;
font-weight: 600 !important;
color: var(--app-dark-teal) !important;
line-height: 1.2 !important;
margin: 0 !important;
}
.main-pagebar-title .view-caption-root,
.main-pagebar-title .xaf-caption-container {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: row !important;
align-items: center !important;
min-width: 0 !important;
max-width: 100% !important;
overflow: hidden !important;
}
/* Icône retirée (maquette) + annulation du retrait de largeur que DevExpress prévoit pour elle. */
.main-pagebar-title .xaf-caption-icon-container { display: none !important; }
.main-pagebar-title .xaf-caption-icon-container + .xaf-caption-container { max-width: 100% !important; }
/* « Produit » : toujours COMPLET (pas d'ellipsis, ne rétrécit jamais). Teal en vue liste. */
.main-pagebar-title .xaf-view-caption-sm,
.main-pagebar-title .xaf-view-caption-lg {
flex: 0 0 auto !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
font-size: 18px !important;
line-height: 1.2 !important;
color: var(--app-dark-teal) !important;
margin: 0 !important;
}
/* Vue détail (classe xaf-view-caption-sm) : « Produit » en GRIS. */
.main-pagebar-title .xaf-view-caption-sm {
color: var(--app-neutral-80) !important; /* #91918d — Charcoal/80 (maquette) */
}
/* Nom de l'objet (vue détail) : teal foncé, ellipsis si trop long, séparé par « - ». */
.main-pagebar-title .xaf-object-caption {
flex: 0 1 auto !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: var(--app-dark-teal) !important;
margin: 0 !important;
}
/* « - » UNIQUEMENT en vue détail : il sépare le libellé de vue (xaf-view-caption-sm) du nom
d'objet. Scopé au sibling adjacent -> sur le Dashboard (titre seul dans .xaf-object-caption,
sans libellé de vue avant) le « - » parasite (« - Dashboard ») disparaît. */
.main-pagebar-title .xaf-view-caption-sm + .xaf-object-caption::before {
content: "\00A0-\00A0"; /* « - » entre « Produit » et le nom (insécables pour garder les espaces) */
}
/* ============================================================
16. FOCUS RING
============================================================ */
:focus-visible {
outline: 2px solid var(--app-primary-90) !important;
outline-offset: 1px !important;
}
/* Le grid DevExpress place le focus PAR PROGRAMME sur sa zone scrollable /
ligne / cellule au chargement de la vue liste. Le navigateur fait alors
matcher :focus-visible -> contour vert parasite (arrondi, débordant sous le
grid) en bas à gauche. On neutralise le focus ring sur ces éléments
structurels ; il reste actif sur les contrôles interactifs (boutons, champs,
checkbox) pour la navigation clavier. */
.dxbl-grid:focus-visible,
.dxbl-grid-table:focus-visible,
.dxbl-grid-scroll-viewer:focus-visible,
.dxbl-grid-data-row:focus-visible,
.dxbl-grid-data-row > td:focus-visible,
.dxbl-grid [tabindex]:focus-visible:not(.dxbl-btn):not(input):not(.dxbl-checkbox) {
outline: none !important;
}
/* ============================================================
17. MODAL / POPUP
XAF Blazor uses DevExpress popup components that render as
.dxbl-modal-* elements. Layout: backdrop → content →
header / body / footer.
============================================================ */
/* Backdrop */
.dxbl-modal-dialog-backdrop,
.modal-backdrop {
background-color: rgba(22, 65, 71, 0.40) !important;
backdrop-filter: blur(2px) !important;
}
/* Sizing & centering — garder les popups dans la fenêtre, centrés, jamais plein écran.
Les popups de DetailView XAF s'étirent sinon démesurément : on plafonne largeur/hauteur
et on rend le corps défilant pour que header + footer restent visibles. Vaut pour TOUS
les modals (dxbl-modal-* et dxbl-window-*). */
.dxbl-modal,
.dxbl-window-root {
align-items: center !important;
justify-content: center !important;
}
.dxbl-modal-dialog,
.dxbl-window {
width: auto !important;
max-width: min(1100px, 92vw) !important;
max-height: 90vh !important;
margin: 0 !important;
/* Pas d'ombre/bordure/fond propres au conteneur : seul .dxbl-modal-content porte l'apparence
(le centrage est géré sur .dxbl-modal-content + la règle :has ci-dessus). */
box-shadow: none !important;
border: none !important;
background: transparent !important;
}
/* SUPPRESSION FORCÉE de l'ombre du modal. Le thème Fluent la pose via un sélecteur plus
spécifique (.dxbl-theme-fluent .dxbl-window…) -> un simple .dxbl-window{box-shadow:none}
perd la cascade. On rehausse la spécificité (préfixe .dxbl-theme-fluent + classes doublées)
et on neutralise aussi un éventuel drop-shadow via filter. */
.dxbl-theme-fluent .dxbl-modal-content,
.dxbl-theme-fluent .dxbl-modal-dialog,
.dxbl-theme-fluent .dxbl-window,
.dxbl-theme-fluent .dxbl-window-content,
.dxbl-theme-fluent .dxbl-window-root,
.dxbl-theme-fluent .dxbl-popup,
.dxbl-theme-fluent .dxbl-popup-root,
.dxbl-modal-content.dxbl-modal-content,
.dxbl-window.dxbl-window {
box-shadow: none !important;
filter: none !important;
}
/* Outer container — dimensions FIXES, CENTRÉ par le parent (l'overlay .dxbl-modal /
.dxbl-window-root est déjà en position:fixed plein écran + flex center -> le contenu est donc
déjà épinglé au centre du viewport). On NE met PAS position:fixed sur le contenu lui-même :
ça le détachait de son conteneur .dxbl-modal-dialog, qui restait alors comme une boîte VIDE
affichant l'ombre par défaut DevExpress (le « shadow » fantôme vu à droite).
- width/height FIXES (valeurs PROVISOIRES 900×600 — à ajuster) ; max-width/height = garde-fou.
- flex column + overflow:hidden : header + footer fixes, le corps (.dxbl-modal-body) défile. */
.dxbl-modal-content {
font-family: var(--app-font) !important;
background-color: var(--app-neutral-10) !important;
border: 1px solid var(--app-neutral-30) !important;
border-radius: 10px !important;
box-shadow: none !important;
overflow: hidden !important;
/* PLEIN ÉCRAN à droite du menu : le modal occupe toute la zone de contenu, du bord droit de la
sidebar (210px) jusqu'aux bords de l'écran. position:fixed (cale sur le viewport, indépendant
de la position de drag du parent, neutralisée par *:has(> .dxbl-modal-content) -> transform:none).
NB : la sidebar fait 210px dépliée / 70px repliée -> valeur 210px en dur ici (à ajuster si on
veut suivre l'état replié). */
position: fixed !important;
top: 20px !important;
bottom: 20px !important;
left: 230px !important; /* 210px sidebar + 20px de marge */
right: 20px !important;
transform: none !important;
width: auto !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
border-radius: 10px !important; /* coin arrondi -> lisible comme une popup posée */
display: flex !important;
flex-direction: column !important;
}
/* Le PARENT direct de .dxbl-modal-content (classe variable selon le type de popup XAF) porte la
position de drag (left/top ou transform inline) + l'ombre/fond par défaut DevExpress -> c'est lui
le « fantôme ». On le neutralise sans connaître sa classe via :has() : transparent, sans ombre, et
surtout transform:none (sinon un transform sur le parent ferait que le position:fixed du contenu
se cale sur LUI au lieu du viewport). Scopé via :has(> .dxbl-modal-content) -> n'affecte PAS les
autres popups (dropdowns, tooltips). */
*:has(> .dxbl-modal-content) {
transform: none !important;
box-shadow: none !important;
background: transparent !important;
border: none !important;
}
/* EXCEPTION à la règle plein écran ci-dessus : les dialogues « message » (erreur, info,
confirmation oui/non) n'ont pas de vue à afficher — juste un texte et un ou deux boutons.
Les étaler sur toute la zone de contenu donne une grande boîte quasi vide.
Deux familles visées :
- .dxbl-message-box > .dxbl-modal-content : DxMessageBox (le conteneur .dxbl-message-box est le
PARENT direct du contenu -> il est déjà neutralisé par la règle *:has() ci-dessus).
- .dxbl-modal-content sans vue XAF à l'intérieur : les dialogues XAF (IExceptionDialogTemplate /
IConfirmationDialogTemplate) ne portent pas de classe propre, on les reconnaît donc à l'absence
de grille / form layout / onglets. Les popups de View en contiennent toujours au moins un et
gardent la taille fixe (c'est le cas des lignes articles à l'origine du ticket).
Spécificité (0,2,0) > la règle .dxbl-modal-content (0,1,0) -> l'emporte à !important égal.
Centrage : position:fixed + translate -50% (le transform du parent est déjà neutralisé). */
.dxbl-message-box > .dxbl-modal-content,
.dxbl-modal-content:not(:has(.dxbl-grid, .dxbl-form-layout, .dxbl-tabs)) {
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translate(-50%, -50%) !important;
/* Largeur fixe -> pas de redimensionnement selon la longueur du message.
Hauteur auto : un message court ne doit pas laisser de vide, et max-height borne
les messages longs (le corps défile alors, header + boutons restent visibles). */
width: min(480px, 90vw) !important;
height: auto !important;
max-height: 70vh !important;
}
/* Header */
.dxbl-modal-header,
dxbl-popup-header.dxbl-modal-header {
background-color: var(--app-neutral-10) !important;
border-bottom: 1px solid var(--app-neutral-30) !important;
padding: 15px 20px !important;
min-height: 56px !important;
display: flex !important;
align-items: center !important;
}
.dxbl-modal-header-default {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
width: 100% !important;
min-height: 20px !important;
}
/* Title */
.dxbl-modal-header .xaf-object-caption,
dxbl-popup-header .xaf-object-caption {
font-family: var(--app-font) !important;
font-size: 16px !important;
font-weight: 600 !important;
color: var(--app-dark-teal) !important;
line-height: 1.4 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Close button */
button.dxbl-popup-header-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--app-neutral-80) !important;
width: 28px !important;
min-width: 28px !important;
height: 28px !important;
min-height: 28px !important;
padding: 4px !important;
border-radius: var(--app-radius-md) !important;
flex-shrink: 0 !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
button.dxbl-popup-header-button:hover {
background-color: var(--app-neutral-20) !important;
color: var(--app-dark-teal) !important;
}
/* Body */
.dxbl-modal-body {
padding: 15px 20px !important;
background-color: var(--app-neutral-0) !important;
overflow: auto !important;
flex: 1 1 auto !important;
}
.dxbl-modal-body .xaf-static-text,
.dxbl-modal-body label {
font-family: var(--app-font) !important;
font-size: 14px !important;
font-weight: 400 !important;
color: var(--app-neutral-100) !important;
line-height: 1.5 !important;
white-space: pre-line !important;
}
/* Inputs inside popup */
.dxbl-modal-body .dxbl-input-editor,
.dxbl-modal-body .dxbl-text-edit,
.dxbl-modal-body .dx-texteditor,
.dxbl-modal-body .form-control,
.dxbl-modal-body select {
min-height: 34px !important;
border-radius: var(--app-radius-md) !important;
}
/* Footer */
.dxbl-modal-footer {
padding: 16px 24px !important;
min-height: 68px !important;
border-top: 1px solid var(--app-neutral-30) !important;
background-color: var(--app-neutral-10) !important;
display: flex !important;
align-items: center !important;
}
/* Toolbar root inside footer */
.dxbl-modal-footer .dxbl-toolbar,
.dxbl-modal-footer dxbl-toolbar {
width: 100% !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
height: auto !important;
min-height: 36px !important;
}
/* DevExpress toolbar internal layout */
.dxbl-modal-footer .dxbl-toolbar .dxbl-toolbar-items-container,
.dxbl-modal-footer dxbl-toolbar .dxbl-toolbar-items-container {
width: 100% !important;
display: flex !important;
align-items: center !important;
}
/* Empty before / center zones */
.dxbl-modal-footer .dxbl-toolbar .dxbl-toolbar-before,
.dxbl-modal-footer .dxbl-toolbar .dxbl-toolbar-center,
.dxbl-modal-footer dxbl-toolbar .dxbl-toolbar-before,
.dxbl-modal-footer dxbl-toolbar .dxbl-toolbar-center {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* After zone — contains the action buttons, pushed to the right */
.dxbl-modal-footer .dxbl-toolbar .dxbl-toolbar-after,
.dxbl-modal-footer dxbl-toolbar .dxbl-toolbar-after {
margin-left: auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
}
.dxbl-modal-footer .dxbl-toolbar .dxbl-toolbar-after .dxbl-toolbar-item,
.dxbl-modal-footer dxbl-toolbar .dxbl-toolbar-after .dxbl-toolbar-item {
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* Footer buttons */
.dxbl-modal-footer .dxbl-btn,
.dxbl-modal-footer button.dxbl-btn.dxbl-sm {
min-height: 36px !important;
height: 36px !important;
padding: 7px 14px !important;
line-height: 1 !important;
border-radius: 4px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
}
/* ============================================================
18. DETAIL VIEW — Object forms (XAF FormLayout)
Scoped to .main.main-object-model and .detail-view-content
to avoid touching grid cell editors and modal editors.
Verified DOM structure (provided HTML):
.dxbl-group
.dxbl-group-header > .dxbl-text
.dxbl-group-body.dxbl-fl-group-body
.dxbl-group-body-content
.dxbl-fl-item
.dxbl-fl-cpt ← field label
.dxbl-fl-ctrl
.dxbl-text-edit ← editor root
.dxbl-text-edit-input ← actual
.dxbl-btn-group-right ← attached buttons (clear/dropdown)
Colours verified against Figma (node 301-18359):
Card background: neutral-0
Card border: primary-20
Card header bg: primary-10
Card header text: neutral-130
Editor background: neutral-10
Editor border: neutral-30
Editor text: dark-teal
Label colour: neutral-130
Disabled background: neutral-30
============================================================ */
/* Card container — corps blanc, bordure lime/20. Seul l'EN-TÊTE est lime (maquette). */
.main.main-object-model .dxbl-group,
.detail-view-content .dxbl-group {
background: var(--app-neutral-0) !important;
border: 1px solid var(--app-card-border) !important;
border-radius: 10px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
overflow: hidden !important;
}
/* Card header — même lime que le corps (card uniforme dans la maquette) */
.main.main-object-model .dxbl-group > .dxbl-group-header,
.detail-view-content .dxbl-group > .dxbl-group-header {
background: var(--app-card-bg) !important;
border-bottom: 1px solid var(--app-card-border) !important;
border-radius: 10px 10px 0 0 !important;
padding: 15px 20px !important;
min-height: 46px !important;
display: flex !important;
align-items: center !important;
}
/* Bouton de repli (chevron) de l'en-tête : nu, sans boîte (le reset bouton
global section 4 lui pose fond/bordure/ombre arrondis -> la maquette le
veut transparent, juste le chevron). */
.main.main-object-model .dxbl-group > .dxbl-group-header .dxbl-btn,
.main.main-object-model .dxbl-group > .dxbl-group-header .dxbl-btn:hover,
.detail-view-content .dxbl-group > .dxbl-group-header .dxbl-btn,
.detail-view-content .dxbl-group > .dxbl-group-header .dxbl-btn:hover {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.main.main-object-model .dxbl-group > .dxbl-group-header .dxbl-text,
.detail-view-content .dxbl-group > .dxbl-group-header .dxbl-text {
color: var(--app-dark-teal) !important;
font-family: var(--app-font) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
}
/* Card body — blanc (seul l'en-tête est lime) */
.main.main-object-model .dxbl-group-body.dxbl-fl-group-body > .dxbl-group-body-content,
.detail-view-content .dxbl-group-body.dxbl-fl-group-body > .dxbl-group-body-content {
background: var(--app-neutral-0) !important;
padding: 15px !important;
}
/* Bootstrap row gutters inside groups */
.main.main-object-model .dxbl-group-body .dxbl-row,
.detail-view-content .dxbl-group-body .dxbl-row {
--bs-gutter-x: 16px;
--bs-gutter-y: 10px;
}
/* Field item wrapper */
.main.main-object-model .dxbl-fl-item,
.detail-view-content .dxbl-fl-item {
margin-bottom: 8px !important;
}
/* Field labels */
.main.main-object-model .dxbl-fl-cpt,
.detail-view-content .dxbl-fl-cpt {
color: var(--app-neutral-130) !important;
font-family: var(--app-font) !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
margin-bottom: 6px !important;
}
/* En layout horizontal le label est à côté de l'input — annuler le margin-bottom et centrer verticalement */
.main.main-object-model .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-cpt,
.detail-view-content .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-cpt {
margin-bottom: 0 !important;
align-self: center !important;
}
/* Control wrapper — full width */
.main.main-object-model .dxbl-fl-ctrl,
.detail-view-content .dxbl-fl-ctrl {
width: 100% !important;
}
/* Editor root (.dxbl-text-edit wraps input + button groups) */
.main.main-object-model .dxbl-text-edit,
.main.main-object-model .dxbl-input-editor,
.main.main-object-model dxbl-combo-box.dxbl-text-edit,
.main.main-object-model dxbl-date-edit.dxbl-text-edit,
.detail-view-content .dxbl-text-edit,
.detail-view-content .dxbl-input-editor,
.detail-view-content dxbl-combo-box.dxbl-text-edit,
.detail-view-content dxbl-date-edit.dxbl-text-edit {
background: var(--app-neutral-10) !important;
border: 1px solid var(--app-neutral-30) !important;
border-radius: var(--app-radius-md) !important;
min-height: 34px !important;
height: 34px !important;
box-shadow: none !important;
display: flex !important;
align-items: stretch !important;
overflow: hidden !important;
}
/* Tag box (multi-select lookup) — hauteur auto pour le wrapping des tags */
.main.main-object-model dxbl-tag-box.dxbl-text-edit,
.detail-view-content dxbl-tag-box.dxbl-text-edit {
height: auto !important;
min-height: 34px !important;
overflow: visible !important;
flex-wrap: wrap !important;
}
/* Supprime la bordure de focus sur l'input interne du TagBox (doublon visuel) */
.main.main-object-model dxbl-tag-box.dxbl-text-edit input.dxbl-text-edit-input,
.detail-view-content dxbl-tag-box.dxbl-text-edit input.dxbl-text-edit-input {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Editor hover */
.main.main-object-model .dxbl-text-edit:hover,
.main.main-object-model .dxbl-input-editor:hover,
.detail-view-content .dxbl-text-edit:hover,
.detail-view-content .dxbl-input-editor:hover {
background: var(--app-neutral-20) !important;
border-color: var(--app-neutral-40) !important;
}
/* Placeholder — override hover/focus (spécificité 0,4,1 > 0,3,1) */
.main.main-object-model .xaf-action-fulltextsearch.dxbl-text-edit:hover,
.detail-view-content .xaf-action-fulltextsearch.dxbl-text-edit:hover {
background: var(--placeholder-hover-bg) !important;
border-color: var(--placeholder-hover-border) !important;
box-shadow: none !important;
}
.main.main-object-model .xaf-action-fulltextsearch.dxbl-text-edit:focus-within,
.main.main-object-model .xaf-action-fulltextsearch.dxbl-text-edit.dx-state-focused,
.detail-view-content .xaf-action-fulltextsearch.dxbl-text-edit:focus-within,
.detail-view-content .xaf-action-fulltextsearch.dxbl-text-edit.dx-state-focused {
background: var(--placeholder-active-bg) !important;
border-color: var(--placeholder-active-border) !important;
box-shadow: none !important;
}
/* Placeholder — override disabled (spécificité 0,4,1 > 0,3,1 de .dxbl-disabled.dxbl-text-edit) */
.main.main-object-model .dxbl-disabled.xaf-action-fulltextsearch.dxbl-text-edit,
.detail-view-content .dxbl-disabled.xaf-action-fulltextsearch.dxbl-text-edit {
background: var(--placeholder-disabled-bg) !important;
border-color: var(--placeholder-disabled-border) !important;
box-shadow: none !important;
}
/* Editor focused */
.main.main-object-model .dxbl-text-edit:focus-within,
.main.main-object-model .dxbl-input-editor:focus-within,
.main.main-object-model .dxbl-text-edit.dx-state-focused,
.main.main-object-model .dxbl-input-editor.dx-state-focused,
.detail-view-content .dxbl-text-edit:focus-within,
.detail-view-content .dxbl-input-editor:focus-within,
.detail-view-content .dxbl-text-edit.dx-state-focused,
.detail-view-content .dxbl-input-editor.dx-state-focused {
background: #ffffff !important;
border-color: var(--app-primary-100) !important;
/* box-shadow: 0 0 0 2px rgba(255, 90, 0, 0.12) !important;*/
}
/* Actual element */
.main.main-object-model .dxbl-text-edit-input,
.detail-view-content .dxbl-text-edit-input {
background: transparent !important;
border: none !important;
color: var(--app-dark-teal) !important;
font-family: var(--app-font) !important;
font-size: 12px !important;
line-height: 1.35 !important;
min-height: 32px !important;
height: 32px !important;
padding: 8px 10px !important;
box-shadow: none !important;
}
.main.main-object-model .dxbl-text-edit-input::placeholder,
.detail-view-content .dxbl-text-edit-input::placeholder {
color: var(--app-neutral-80) !important;
opacity: 1 !important;
}
/* Read-only / disabled editors */
.main.main-object-model .dxbl-disabled.dxbl-text-edit,
.main.main-object-model .dxbl-readonly.dxbl-text-edit,
.detail-view-content .dxbl-disabled.dxbl-text-edit,
.detail-view-content .dxbl-readonly.dxbl-text-edit {
background: var(--app-neutral-30) !important;
border-color: var(--app-neutral-30) !important;
cursor: not-allowed !important;
}
/* Bouton calendar/dropdown disabled directement sur le bouton lui-même */
.main.main-object-model .dxbl-edit-btn-dropdown.dxbl-disabled,
.detail-view-content .dxbl-edit-btn-dropdown.dxbl-disabled {
background: transparent !important;
border: none !important;
color: var(--app-neutral-70) !important;
cursor: not-allowed !important;
}
.main.main-object-model .dxbl-disabled .dxbl-text-edit-input,
.main.main-object-model .dxbl-readonly .dxbl-text-edit-input,
.detail-view-content .dxbl-disabled .dxbl-text-edit-input,
.detail-view-content .dxbl-readonly .dxbl-text-edit-input {
color: var(--app-neutral-70) !important;
cursor: not-allowed !important;
}
.main.main-object-model .dxbl-disabled .dxbl-text-edit-input::placeholder,
.main.main-object-model .dxbl-readonly .dxbl-text-edit-input::placeholder,
.detail-view-content .dxbl-disabled .dxbl-text-edit-input::placeholder,
.detail-view-content .dxbl-readonly .dxbl-text-edit-input::placeholder {
color: var(--app-neutral-70) !important;
opacity: 1 !important;
}
.main.main-object-model .dxbl-disabled .dxbl-edit-btn-clear,
.main.main-object-model .dxbl-disabled .dxbl-edit-btn-dropdown,
.detail-view-content .dxbl-disabled .dxbl-edit-btn-clear,
.detail-view-content .dxbl-disabled .dxbl-edit-btn-dropdown {
cursor: not-allowed !important;
pointer-events: none !important;
color: var(--app-neutral-70) !important;
}
/* Attached button group (clear / dropdown arrow) — fond transparent pour se fondre dans l'input */
.main.main-object-model .dxbl-btn-group-right,
.detail-view-content .dxbl-btn-group-right {
display: flex !important;
align-items: stretch !important;
gap: 0 !important;
border-left: none !important;
background: transparent !important;
}
/* Individual attached buttons — transparents, fondus dans l'input */
.main.main-object-model .dxbl-edit-btn-clear,
.main.main-object-model .dxbl-edit-btn-dropdown,
.main.main-object-model .dxbl-text-edit-btn,
.detail-view-content .dxbl-edit-btn-clear,
.detail-view-content .dxbl-edit-btn-dropdown,
.detail-view-content .dxbl-text-edit-btn {
padding: 7px 8px !important;
border: none !important;
border-left: none !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--app-neutral-80) !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: unset !important;
width: auto !important;
height: auto !important;
min-height: unset !important;
}
/* ── Override Placeholder / Search — après les règles génériques ─
Doit être déclaré APRÈS les blocs .dxbl-btn-group-right et
.dxbl-text-edit-btn ci-dessus pour gagner à spécificité égale.
Spécificité cible : 0,3,0 (même que les blocs concurrents). */
/* Input — bg selon état (enable / hover / active) */
.xaf-action-fulltextsearch.dxbl-text-edit .dxbl-text-edit-input {
background-color: var(--placeholder-enable-bg) !important;
}
.xaf-action-fulltextsearch.dxbl-text-edit:hover .dxbl-text-edit-input {
background-color: var(--placeholder-hover-bg) !important;
}
.xaf-action-fulltextsearch.dxbl-text-edit:focus-within .dxbl-text-edit-input,
.xaf-action-fulltextsearch.dxbl-text-edit.dx-state-focused .dxbl-text-edit-input {
background-color: var(--placeholder-active-bg) !important;
}
/* Div wrapper du bouton — pas de border, bg suit l'état du container */
.xaf-action-fulltextsearch.dxbl-text-edit .dxbl-btn-group-right {
border-left: none !important;
background: var(--placeholder-enable-bg) !important;
}
.xaf-action-fulltextsearch.dxbl-text-edit:hover .dxbl-btn-group-right {
background: var(--placeholder-hover-bg) !important;
}
.xaf-action-fulltextsearch.dxbl-text-edit:focus-within .dxbl-btn-group-right,
.xaf-action-fulltextsearch.dxbl-text-edit.dx-state-focused .dxbl-btn-group-right {
background: var(--placeholder-active-bg) !important;
}
/* Bouton lui-même — bg suit l'état du container, pas de border */
.xaf-action-fulltextsearch.dxbl-text-edit .dxbl-text-edit-btn {
background: var(--placeholder-enable-bg) !important;
border: none !important;
border-left: none !important;
box-shadow: none !important;
min-width: unset !important;
width: auto !important;
height: auto !important;
min-height: unset !important;
padding: 7px 10px !important;
border-radius: 0 !important;
}
.xaf-action-fulltextsearch.dxbl-text-edit:hover .dxbl-text-edit-btn {
background: var(--placeholder-hover-bg) !important;
border: none !important;
box-shadow: none !important;
}
.xaf-action-fulltextsearch.dxbl-text-edit:focus-within .dxbl-text-edit-btn,
.xaf-action-fulltextsearch.dxbl-text-edit.dx-state-focused .dxbl-text-edit-btn {
background: var(--placeholder-active-bg) !important;
border: none !important;
box-shadow: none !important;
}
/* Input bg — disabled */
.xaf-action-fulltextsearch.dxbl-disabled .dxbl-text-edit-input {
background-color: var(--placeholder-disabled-bg) !important;
color: var(--placeholder-disabled-content) !important;
}
/* Div wrapper bouton — disabled */
.xaf-action-fulltextsearch.dxbl-disabled .dxbl-btn-group-right {
border-left: none !important;
background: var(--placeholder-disabled-bg) !important;
}
/* Bouton — disabled */
.xaf-action-fulltextsearch.dxbl-disabled .dxbl-text-edit-btn {
background: var(--placeholder-disabled-bg) !important;
border: none !important;
box-shadow: none !important;
cursor: not-allowed !important;
}
.main.main-object-model .dxbl-edit-btn-clear:hover,
.main.main-object-model .dxbl-edit-btn-dropdown:hover,
.main.main-object-model .dxbl-text-edit-btn:hover,
.detail-view-content .dxbl-edit-btn-clear:hover,
.detail-view-content .dxbl-edit-btn-dropdown:hover,
.detail-view-content .dxbl-text-edit-btn:hover {
background: transparent !important;
color: var(--app-neutral-100) !important;
}
/* Remove double border on first attached button */
.main.main-object-model .dxbl-btn-group-right > :first-child,
.detail-view-content .dxbl-btn-group-right > :first-child {
border-left: none !important;
}
/* Icons inside attached buttons */
.main.main-object-model .dxbl-edit-btn-clear .dxbl-image,
.main.main-object-model .dxbl-edit-btn-dropdown .dxbl-image,
.main.main-object-model .dxbl-text-edit-btn .dxbl-image,
.detail-view-content .dxbl-edit-btn-clear .dxbl-image,
.detail-view-content .dxbl-edit-btn-dropdown .dxbl-image,
.detail-view-content .dxbl-text-edit-btn .dxbl-image {
width: 16px !important;
height: 16px !important;
}
/* ============================================================
LISTE DÉROULANTE — affordance visuelle (toute l'app)
Sans chevron visible, un combobox/lookup ressemble à un simple
champ texte. On force le bouton dropdown et son chevron à rester
visibles sur TOUS les combobox de l'app (non scopé à la vue détail).
Si un éditeur ne rend aucun bouton dropdown natif -> fallback ::after.
============================================================ */
.dxbl-combobox .dxbl-edit-btn-dropdown,
.dxbl-combobox .dxbl-edit-btn.dxbl-edit-btn-dropdown {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 1 !important;
visibility: visible !important;
}
.dxbl-combobox .dxbl-edit-btn-dropdown .dxbl-image,
.dxbl-combobox .dxbl-edit-btn-dropdown .dxbl-image use {
opacity: 1 !important;
/* color + fill : le chevron est un |