. */
.dxbl-checkbox.dxbl-checkbox-display-view-checked > div,
.dxbl-checkbox.dxbl-checkbox-display-view-unchecked > div {
box-sizing: border-box !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
border-radius: 4px !important;
border: 1px solid var(--batifree-primary-100) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.dxbl-checkbox.dxbl-checkbox-display-view-unchecked > div {
background: transparent !important;
}
.dxbl-checkbox.dxbl-checkbox-display-view-checked > div {
background-color: var(--batifree-primary-100) !important;
}
.dxbl-checkbox.dxbl-checkbox-display-view-checked .dxbl-image {
color: var(--batifree-white) !important;
width: 14px !important;
height: 14px !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;
}
/* 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;
}
/* Row min-height */
.dxbl-grid td[role="gridcell"] {
height: 38px;
vertical-align: middle !important;
}
/* Row hover */
.dxbl-grid .dxbl-grid-row:hover td {
background-color: var(--batifree-neutral-20) !important;
}
/* Column headers */
.dxbl-grid .dxbl-grid-header-cell {
font-family: var(--batifree-font) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--batifree-neutral-100) !important;
background-color: var(--batifree-neutral-10) !important;
border-bottom: 1px solid var(--batifree-neutral-40) !important;
}
/* ── Column filter funnel buttons ───────────────────────────────────────────
In v26, DevExpress applies dxbl-btn-outline-secondary to them.
The BatiFree theme was giving them a violet background — neutralised here.*/
.dxbl-grid-filter-menu-funnel-btn.dxbl-btn {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--batifree-neutral-50) !important;
}
.dxbl-grid-filter-menu-funnel-btn.dxbl-btn * {
color: inherit !important;
}
.dxbl-grid-filter-menu-funnel-btn.dxbl-btn:hover {
background: var(--batifree-neutral-10) !important;
border: none !important;
color: var(--batifree-ink) !important;
}
.dxbl-grid-filter-menu-funnel-btn.dxbl-btn.dxbl-active,
.dxbl-grid-filter-menu-funnel-btn.dxbl-btn[aria-pressed="true"] {
background: transparent !important;
border: none !important;
color: var(--batifree-primary-100) !important;
}
/* Filter row — Figma spec: border 1px neutral-30, no radius, no bg */
tr.dxbl-grid-filter-row td {
border-block-end: 1px solid var(--batifree-neutral-30) !important;
border-block-start: 1px solid var(--batifree-neutral-30) !important;
border-right: 1px solid var(--batifree-neutral-30) !important;
border-radius: 0 !important;
background: transparent !important;
}
/* Editors inside filter row — Figma spec: no bg, no border, no radius */
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;
border: none !important;
border-radius: 0 !important;
height: auto !important;
min-height: unset !important;
}
tr.dxbl-grid-filter-row .dxbl-text-edit-input {
background: transparent !important;
color: var(--batifree-neutral-100) !important;
font-size: 12px !important;
}
tr.dxbl-grid-filter-row .dxbl-text-edit-input::placeholder {
color: var(--batifree-neutral-80) !important;
font-size: 12px !important;
opacity: 1 !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;
vertical-align: middle !important;
font-size: 14px !important;
line-height: 16px !important;
font-weight: 400 !important;
color: var(--batifree-ink) !important;
}
dxbl-tree-list.dxbl-grid tbody tr td {
background-color: var(--batifree-neutral-10) !important;
}
dxbl-tree-list.dxbl-grid tbody .dxbl-grid-selected-row td {
background-color: var(--batifree-primary-10) !important;
}
dxbl-tree-list.dxbl-grid tbody tr:hover td {
background-color: var(--batifree-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.
============================================================ */
.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 {
min-height: 36px !important;
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;
}
.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;
}
/* ============================================================
13. 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(--batifree-font) !important;
font-size: 14px !important;
border-radius: var(--batifree-radius-sm) !important;
border-color: var(--batifree-neutral-40) !important;
color: var(--batifree-neutral-100) !important;
background-color: var(--batifree-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(--batifree-primary-100) !important;
/* box-shadow: var(--batifree-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) ─────────────
The XAF search field (.xaf-action-fulltextsearch) must match
the Figma Placeholder component:
- Icon embedded inside the field (no separate button)
- States: enable / hover (field) / 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 (#fff2eb) border primary-20 (#ffe4d6)
active : bg neutral-10 (#f9f9f9) border primary-100 (#ff5a00)
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(--batifree-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 (the input has an explicit bg, must follow the 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 also placed after generic blocks, see below) */
.xaf-action-fulltextsearch .dxbl-text-edit-input {
background-color: var(--placeholder-enable-bg) !important;
}
/* Button — transparent, embedded in the field
Specificity 0,3,0 to beat .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;
}
/* Icon — enable/hover colour: --placeholder-enable-content (#91918d) */
.xaf-action-fulltextsearch .dxbl-text-edit-btn .dxbl-image {
width: 14px !important;
height: 14px !important;
filter: var(--batifree-filter-placeholder) !important;
}
/* Icon — active colour: --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: var(--batifree-filter-placeholder-active) !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 + text 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;
}
/* Icon — disabled colour: --placeholder-disabled-content (#b9b9b6) */
.xaf-action-fulltextsearch.dxbl-disabled .dxbl-text-edit-btn .dxbl-image {
filter: var(--batifree-filter-placeholder-disabled) !important;
}
/* ============================================================
14. PAGE TITLE / TOP BAR
============================================================ */
.header,
.app-header,
.dxbl-header {
font-family: var(--batifree-font) !important;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--batifree-font) !important;
}
/* ============================================================
15. FOCUS RING
============================================================ */
:focus-visible {
outline: 2px solid var(--batifree-primary-90) !important;
outline-offset: 1px !important;
}
/* ============================================================
16. 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;
}
/* Outer container */
.dxbl-modal-content {
font-family: var(--batifree-font) !important;
background-color: var(--batifree-neutral-10) !important;
border: 1px solid var(--batifree-neutral-30) !important;
border-radius: 10px !important;
box-shadow: none !important;
overflow: hidden !important;
}
/* Header */
.dxbl-modal-header,
dxbl-popup-header.dxbl-modal-header {
background-color: var(--batifree-neutral-10) !important;
border-bottom: 1px solid var(--batifree-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(--batifree-font) !important;
font-size: 16px !important;
font-weight: 600 !important;
color: var(--batifree-ink) !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(--batifree-neutral-80) !important;
width: 28px !important;
min-width: 28px !important;
height: 28px !important;
min-height: 28px !important;
padding: 4px !important;
border-radius: var(--batifree-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(--batifree-neutral-20) !important;
color: var(--batifree-ink) !important;
}
/* Body */
.dxbl-modal-body {
padding: 15px 20px !important;
background-color: var(--batifree-neutral-0) !important;
}
.dxbl-modal-body .xaf-static-text,
.dxbl-modal-body label {
font-family: var(--batifree-font) !important;
font-size: 14px !important;
font-weight: 400 !important;
color: var(--batifree-neutral-100) !important;
line-height: 1.5 !important;
white-space: pre-line !important;
}
/* Grid inside popup — la table doit prendre toute la largeur pour que dxbl-grid-empty-cell s'étire */
.dxbl-modal-body table.dxbl-grid-table {
width: 100% !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(--batifree-radius-md) !important;
}
/* Cellule en cours d'édition dans popup — fond blanc (override alternance) */
.dxbl-modal-body .dxbl-grid td[role="gridcell"]:has(.dxbl-text-edit) {
background-color: var(--batifree-solid-bg) !important;
}
/* Texte noir par défaut sur toutes les cellules de grids en popup */
.dxbl-modal-body .dxbl-grid td[role="gridcell"] {
color: var(--batifree-neutral-100) !important;
}
/* RichTextPopup : div cliquable toujours visible même si le contenu est vide,
alignée verticalement comme les autres cellules du TreeList */
.rte-popup-cell,
.rte-popup-cell--readonly {
display: flex;
align-items: center;
min-height: 22px;
width: 100%;
}
.rte-popup-cell {
cursor: text;
}
/* TreeList : cellule non éditable (classe via CustomizeElement) */
dxbl-tree-list.dxbl-grid td[role="gridcell"].batifree-treelist-cell-readonly {
pointer-events: none !important;
opacity: 0.5 !important;
}
/* Modifier PAU : cellules lecture seule (classe via CustomizeElement) */
.dxbl-modal-body .dxbl-grid td[role="gridcell"].batifree-col-readonly {
color: var(--batifree-neutral-80) !important;
pointer-events: none !important;
}
/* Modifier PAU : cellule éditable Nouveau PAU */
.dxbl-modal-body .dxbl-grid td[role="gridcell"].batifree-col-editable {
color: var(--batifree-neutral-110) !important;
font-weight: 600 !important;
}
.dxbl-modal-body .dxbl-grid td[data-edit-cell] .dxbl-text-edit-input {
font-weight: 600 !important;
}
/* Batch edit — même padding que les cellules normales sur toute la ligne en édition */
.dxbl-grid .dxbl-grid-table>tbody>tr.dxbl-grid-edit-row>td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-row-drag-anchor-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data-area):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell),
.dxbl-grid .dxbl-grid-table>tfoot>tr.dxbl-grid-edit-row>td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-row-drag-anchor-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data-area):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell),
.dxbl-grid td[data-edit-cell] {
padding: var(--dxbl-grid-text-cell-padding-y) var(--dxbl-grid-text-cell-padding-x) !important;
}
/* Batch edit — alignement vertical cellule active */
.dxbl-grid td[data-edit-cell] {
vertical-align: middle !important;
}
/* Batch edit — reset des overrides detail-view sur les éditeurs dans td[data-edit-cell] */
.dxbl-grid td[data-edit-cell] .dxbl-text-edit {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
height: 38px !important;
min-height: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.dxbl-grid td[data-edit-cell] textarea {
height: 38px !important;
max-height: 38px !important;
resize: none !important;
}
.dxbl-grid td[data-edit-cell] .dxbl-text-edit > * {
min-height: 0 !important;
flex-shrink: 1 !important;
}
/* Footer */
.dxbl-modal-footer {
padding: 16px 24px !important;
min-height: 68px !important;
border-top: 1px solid var(--batifree-neutral-30) !important;
background-color: var(--batifree-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;
}
/* Form layout — token set directly on the element (same pattern as .dxbl-grid) */
.dxbl-fl {
--dxbl-fl-font-size-m: 14px;
--dxbl-fl-font-size: 14px;
--dxbl-fl-caption-font-size-m: 14px;
}
/* ============================================================
17. 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 wrapper — padding-inline creates the inter-card gap
visible gap between 2 adjacent cards = 2 × --batifree-card-gap */
.main.main-object-model dxbl-form-layout-group.dxbl-fl-gd,
.detail-view-content dxbl-form-layout-group.dxbl-fl-gd {
padding-inline: var(--batifree-card-gap, 6px) !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Card inner panel — border/radius/shadow sur le panneau interne */
.main.main-object-model .dxbl-group,
.detail-view-content .dxbl-group {
background: var(--batifree-neutral-0) !important;
border: 1px solid var(--batifree-primary-20) !important;
border-radius: 10px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
overflow: hidden !important;
height: 100% !important;
box-sizing: border-box !important;
}
/* Card header */
.main.main-object-model .dxbl-group > .dxbl-group-header,
.detail-view-content .dxbl-group > .dxbl-group-header {
background: var(--batifree-primary-10) !important;
border-bottom: 1px solid var(--batifree-primary-20) !important;
border-radius: 0 !important;
padding: 15px 20px !important;
min-height: 46px !important;
display: flex !important;
align-items: center !important;
}
.main.main-object-model .dxbl-group > .dxbl-group-header .dxbl-text,
.detail-view-content .dxbl-group > .dxbl-group-header .dxbl-text {
color: var(--batifree-neutral-130) !important;
font-family: var(--batifree-font) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
}
/* Card body */
.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(--batifree-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(--batifree-neutral-130) !important;
font-family: var(--batifree-font) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
margin-bottom: 6px !important;
}
/* In horizontal layout the label sits next to the input — cancel margin-bottom and center vertically */
.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(--batifree-neutral-10) !important;
border: 1px solid var(--batifree-neutral-30) !important;
border-radius: var(--batifree-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;
}
/* Memo editor (textarea) — hauteur auto, overflow visible */
.main.main-object-model dxbl-memo-editor.dxbl-text-edit,
.detail-view-content dxbl-memo-editor.dxbl-text-edit {
height: auto !important;
min-height: 34px !important;
overflow: visible !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(--batifree-neutral-20) !important;
border-color: var(--batifree-neutral-40) !important;
}
/* Placeholder — hover/focus override (specificity 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 — disabled override (specificity 0,4,1 > 0,3,1 of .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: var(--batifree-solid-bg) !important;
border-color: var(--batifree-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(--batifree-ink) !important;
font-family: var(--batifree-font) !important;
font-size: 14px !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(--batifree-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(--batifree-neutral-30) !important;
border-color: var(--batifree-neutral-30) !important;
cursor: not-allowed !important;
}
/* Calendar/dropdown button disabled — scoped directly on the button element */
.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(--batifree-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(--batifree-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(--batifree-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(--batifree-neutral-70) !important;
}
/* Lookup AllItemsWithSearch + DxTreeListEditor: active visual (white bg, normal text) */
/* xaf-lookup-search is placed on dxbl-input-editor itself — 4 classes + 1 element = 0,4,1 */
/* Beats the grey rule above (.main.main-object-model .dxbl-readonly.dxbl-text-edit = 0,4,0) */
dxbl-input-editor.dxbl-readonly.dxbl-text-edit.xaf-textbox.xaf-lookup-search {
background: var(--batifree-neutral-0, #ffffff) !important;
border-color: var(--batifree-neutral-30) !important;
cursor: default !important;
}
/* Selected value text (.xaf-ellipsis) and placeholder */
dxbl-input-editor.dxbl-readonly.xaf-lookup-search .dxbl-text-edit-template {
color: var(--batifree-neutral-90, #222) !important;
}
/* Attached button group (clear / dropdown arrow) — transparent bg to blend into the 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 — transparent, blended into the 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(--batifree-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;
}
/* ── Placeholder / Search override — after the generic rules ─────
Must be declared AFTER the .dxbl-btn-group-right and
.dxbl-text-edit-btn blocks above to win at equal specificity.
Target specificity: 0,3,0 (same as the competing blocks). */
/* Input — bg per state (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;
}
/* Button wrapper div — no border, bg follows the container state */
.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;
}
/* Button itself — bg follows the container state, no 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(--batifree-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;
}
/* Checkbox vertical alignment */
.main.main-object-model .dxbl-checkbox,
.detail-view-content .dxbl-checkbox {
min-height: 36px !important;
display: inline-flex !important;
align-items: center !important;
}
/* Tab links inside detail view */
.main.main-object-model .card-header > .nav-tabs .nav-item .nav-link,
.detail-view-content .card-header > .nav-tabs .nav-item .nav-link {
padding-top: 10px !important;
padding-bottom: 14px !important;
}
/* Detail area background — transparent so the page bg shows through */
.main.main-object-model .main-content,
.detail-view-content {
background: transparent !important;
}
/* Hide spin buttons on numeric editors (design decision) */
.dxbl-spin-btns,
.dxbl-text-edit > .dxbl-spin-btns,
.dxbl-text-edit > .dxbl-btn-group-vertical.dxbl-spin-btns,
.dxbl-input-editor > .dxbl-spin-btns,
.dxbl-input-editor > .dxbl-btn-group-vertical.dxbl-spin-btns {
display: none !important;
}
/* ============================================================
18. PAGER
Figma nodes 166-1382 (LimitPageNumbers), 166-1984 (Pager),
166-2022 (PageNumber).
Page number states :
default : bg white, border transparent, text dark-teal
active : bg primary-100, border primary-100, text white
hover : bg primary-10, border primary-10, text dark-teal
pressed : bg primary-20, border primary-20, text dark-teal
Nav buttons (prev/next/first/last) :
padding 5px, border-radius 4px
Gap between items: 2px
============================================================ */
/* ── Container ──────────────────────────────────────────────── */
.dxbl-pager {
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
font-family: var(--batifree-font) !important;
}
/* ── Base shared by all pager buttons ───────────────────────── */
/* All use dxbl-btn dxbl-btn-outline-secondary — scoped to
.dxbl-pager so real secondary buttons are not affected. */
.dxbl-pager .dxbl-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 4px !important;
border: 1px solid transparent !important;
background: var(--batifree-neutral-0) !important;
color: var(--batifree-ink) !important;
font-family: var(--batifree-font) !important;
box-shadow: none !important;
transition: background 0.15s, border-color 0.15s !important;
}
/* ── Page number buttons ───────────────────────────────────── */
.dxbl-pager .dxbl-btn.dxbl-pager-page-btn {
min-width: 32px !important;
height: 32px !important;
padding: 6px !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
}
/* Page active */
.dxbl-pager .dxbl-btn.dxbl-pager-active-page-btn {
background: var(--batifree-primary-100) !important;
border-color: var(--batifree-primary-100) !important;
color: var(--batifree-white) !important;
}
/* Text colour — non-active (specificity 0,4,0 to beat global rules) */
.dxbl-pager .dxbl-btn.dxbl-pager-page-btn:not(.dxbl-pager-active-page-btn) {
color: var(--batifree-ink) !important;
}
/* Hover page non-active */
.dxbl-pager .dxbl-btn.dxbl-pager-page-btn:not(.dxbl-pager-active-page-btn):hover {
background: var(--batifree-primary-10) !important;
border-color: var(--batifree-primary-10) !important;
color: var(--batifree-ink) !important;
}
/* Pressed page non-active */
.dxbl-pager .dxbl-btn.dxbl-pager-page-btn:not(.dxbl-pager-active-page-btn):active {
background: var(--batifree-primary-20) !important;
border-color: var(--batifree-primary-20) !important;
color: var(--batifree-ink) !important;
}
/* ── Navigation buttons (prev / next / first / last) ──────────── */
.dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn) {
width: 30px !important;
height: 30px !important;
padding: 5px !important;
color: var(--batifree-ink) !important;
}
.dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn):hover {
background: var(--batifree-primary-10) !important;
border-color: var(--batifree-primary-10) !important;
color: var(--batifree-ink) !important;
}
.dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn):active {
background: var(--batifree-primary-20) !important;
border-color: var(--batifree-primary-20) !important;
color: var(--batifree-ink) !important;
}
.dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn).dxbl-disabled,
.dxbl-pager .dxbl-btn:not(.dxbl-pager-page-btn):disabled {
opacity: 0.35 !important;
cursor: not-allowed !important;
}
/* ============================================================
19. NAV-RIBBON (DxTabs / navigation principale)
Figma nodes 115-715 (nav-ribbon), 115-277 (ribbon-item),
115-317 (ribbon-bar).
HTML vérifié :
dxbl-tab-item.dxbl-tabs-item ← onglet
dxbl-tab-item.dxbl-tabs-item.dxbl-active ← onglet actif
.dxbl-tabs-text-container > .dxbl-text > .dxbl-tabs-text-overflow
États Figma :
active : SemiBold 600, underline primary-100 (3px pill)
enable : Regular 400, pas d'underline
hover : bg primary-10, radius 4px, Regular
pressed : bg primary-20, radius 4px, Regular
============================================================ */
/* ── Full-width light bar via ul::after ─────────────────────── */
/* bottom = same value as DevExpress padding on the ul */
/* (--dxbl-tabs-tab-focus-outline-size/offset) → alignment */
/* guaranteed at the bottom of li without an arbitrary fixed px */
dxbl-scroll-viewer ul[role="tablist"] {
position: relative !important;
}
dxbl-scroll-viewer ul[role="tablist"]::after {
content: '' !important;
position: absolute !important;
bottom: calc(var(--dxbl-tabs-tab-focus-outline-size, 0px) + var(--dxbl-tabs-tab-focus-outline-offset, 0px)) !important;
left: 0 !important;
right: 0 !important;
height: 3px !important;
background: var(--batifree-primary-10) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* ── Orange bar on the li containing the active tab ─────────── */
/* bottom: 0 on li = lines up with ul::after (same bottom) */
dxbl-scroll-viewer ul[role="tablist"] > li {
position: relative !important;
}
dxbl-scroll-viewer ul[role="tablist"] > li:has(dxbl-tab-item.dxbl-active)::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 3px !important;
background: var(--batifree-primary-100) !important;
border-radius: 9999px !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* ── Neutralises the native DevExpress indicator ─────────────── */
/* DevExpress uses dxbl-tab-item::after for its own */
/* indicator (black hover bar + mispositioned active bar) */
dxbl-tab-item.dxbl-tabs-item::after {
display: none !important;
}
/* ── Tab item base ──────────────────────────────────────────── */
dxbl-tab-item.dxbl-tabs-item {
padding: 10px 7px !important;
border-radius: 4px !important;
background: transparent !important;
cursor: pointer !important;
transition: background 0.15s !important;
}
/* ── Text ───────────────────────────────────────────────────── */
/* Exclude dxbl-tabs-space-reservation: this hidden clone is */
/* used to pre-reserve the bold width — applying Manrope widens */
/* each tab and triggers the scroll viewer arrows */
dxbl-tab-item.dxbl-tabs-item .dxbl-tabs-text-overflow {
font-family: var(--batifree-font) !important;
font-weight: 400 !important;
color: var(--batifree-ink) !important;
line-height: normal !important;
white-space: nowrap !important;
}
/* ── Active — SemiBold text ─────────────────────────────────── */
dxbl-tab-item.dxbl-tabs-item.dxbl-active .dxbl-tabs-text-overflow {
font-weight: 600 !important;
}
/* ── Hover — background only, bar unchanged ─────────────────── */
dxbl-tab-item.dxbl-tabs-item:not(.dxbl-active):hover {
background: var(--batifree-primary-10) !important;
}
/* ── Pressed ────────────────────────────────────────────────── */
dxbl-tab-item.dxbl-tabs-item:not(.dxbl-active):active {
background: var(--batifree-primary-20) !important;
}
/* ── Contact / Facturation / Chantier tabs — purple theme ───── */
/* .batifree-cfc-tabs est sur le wrapper parent du dxbl-tabs */
.batifree-cfc-tabs dxbl-scroll-viewer ul[role="tablist"]::after {
background: #EAE8EE !important;
}
.batifree-cfc-tabs dxbl-scroll-viewer ul[role="tablist"] > li:has(dxbl-tab-item.dxbl-active)::after {
background: #73688D !important;
}
.batifree-cfc-tabs dxbl-tab-item.dxbl-tabs-item:not(.dxbl-active):hover {
background: rgba(115, 104, 141, 0.08) !important;
}
.batifree-cfc-tabs dxbl-tab-item.dxbl-tabs-item:not(.dxbl-active):active {
background: rgba(115, 104, 141, 0.15) !important;
}
/* ============================================================
20. ICON OVERRIDES
Strategy: data-qa-selector identifies the DevExpress component
reliably. The native .dxbl-image icon is hidden and the SVG
is injected via ::before + CSS mask (colour controlled via
background-color, compatible with all modern browsers).
============================================================ */
/* ── Popup — close button ─────────────────────────────────────── */
button[data-qa-selector="dx-popup-close-button"] .dxbl-image {
display: none !important;
}
button[data-qa-selector="dx-popup-close-button"] {
width: 28px !important;
height: 28px !important;
padding: 0 !important;
background: transparent !important;
}
button[data-qa-selector="dx-popup-close-button"]::before {
content: "";
display: block;
width: 14px;
height: 14px;
margin: auto;
background-color: var(--batifree-ink);
-webkit-mask: url("/images/Close.svg") center / contain no-repeat;
mask: url("/images/Close.svg") center / contain no-repeat;
}
/* ── TreeList — expand/collapse button ─────────────────────────── */
button.dxbl-grid-tree-node-expand-button svg.dxbl-image use {
display: none !important;
}
button.dxbl-grid-tree-node-expand-button svg.dxbl-image {
width: 20px !important;
height: 20px !important;
transform: scale(1.5) !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}
button.dxbl-grid-tree-node-expand-button[aria-label="Expand"] svg.dxbl-image,
button.dxbl-grid-tree-node-expand-button[aria-label="Déplier"] svg.dxbl-image {
background-image: url("/images/family_filter_button_right.svg") !important;
}
button.dxbl-grid-tree-node-expand-button[aria-label="Collapse"] svg.dxbl-image,
button.dxbl-grid-tree-node-expand-button[aria-label="Réduire"] svg.dxbl-image {
background-image: url("/images/family_filter_button.svg") !important;
}
/* ── Lookup "Famille" (Product.Family, LookupEditorMode="AllItemsWithSearch") ──
xaf-lookup-search is only used in this project for this field (the only
AllItemsWithSearch occurrence in the Model) → safe scope without a dedicated class.
The native icon is not an
![]()
but a div.xaf-image.dxbl-image whose rendering
is already an inline CSS mask (background-color: currentColor +
mask-image: url(IImageService/Action_Search_Lookup...)) — confirmed by DOM
inspection. No need for the display:none + ::before hack here: we directly
rewrite mask-image/background-color on the element itself;
!important beats the (non-!important) inline style set by DevExpress.
[style*="Action_Search_Lookup"] targets ONLY the "Search" button —
the "Cancel" (clear) button has a different ImageName and is not affected. */
.xaf-lookup-search .dxbl-image[style*="Action_Search_Lookup"] {
background-color: var(--batifree-ink) !important;
-webkit-mask-image: url("/images/famille.svg") !important;
mask-image: url("/images/famille.svg") !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
}
/* ============================================================
20b. RICHTEXT POPUP RENDERER — DxWindow with XAF style
============================================================ */
.rte-popup-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 4px 0 0;
background-color: var(--batifree-neutral-10);
}
.rte-popup-title {
font-family: var(--batifree-font);
font-size: 16px;
font-weight: 600;
color: var(--batifree-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rte-popup-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
min-width: 28px;
height: 28px;
padding: 0;
background: transparent;
border: none;
border-radius: var(--batifree-radius-md);
color: var(--batifree-neutral-80);
cursor: pointer;
flex-shrink: 0;
font-size: 14px;
transition: background-color 0.15s ease, color 0.15s ease;
}
.rte-popup-close:hover {
background-color: var(--batifree-neutral-20);
color: var(--batifree-ink);
}
.rte-popup-footer {
display: flex;
gap: 8px;
justify-content: flex-end;
width: 100%;
}
/* ============================================================
21. STAT-CARD PROPERTY EDITOR (StatCardPropertyEditor)
============================================================
Self-contained component: the editor renders its own label + value.
XAFML usage: PropertyEditorType="StatCardPropertyEditor"
ShowCaption="False" on the LayoutItem
============================================================ */
.batifree-stat-item {
background: var(--batifree-neutral-10);
border: 1px solid var(--batifree-neutral-20);
border-radius: 4px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.batifree-stat-label {
font-size: 12px;
font-weight: 400;
color: var(--batifree-neutral-90);
line-height: 1.3;
}
.batifree-stat-value {
font-size: 14px;
font-weight: 500;
color: var(--batifree-text-strong);
line-height: 1.35;
}
/* ============================================================
22b. POPUP FACTURER LE DEVIS (VenteConfirmDvsParameters_DetailView)
============================================================
DOM inspecté (2026-09-14) :
- Header saumon : .dxbl-group-header.dxbl-fl-caption-tmpl
> .dxbl-text.xaf-item-groupfinale / groupacompte / groupsituation
- Wrapper groupe : dxbl-group-control (custom element)
- Bouton finale : button[data-action-name="Créer facture finale"]
============================================================ */
/* 1. Supprimer le fond saumon des 3 headers de section
La règle générale (ligne 1954) a deux sélecteurs : .main.main-object-model et .detail-view-content.
En popup XAF, le contenu est dans .detail-view-content (pas dans .main.main-object-model).
On couvre les deux contextes avec spécificité (0,4,0) + source order pour battre (0,3,0),
et (0,5,0) pour battre le cas (0,4,0). */
.main.main-object-model .dxbl-group > .dxbl-group-header:has(.xaf-item-groupfinale),
.main.main-object-model .dxbl-group > .dxbl-group-header:has(.xaf-item-groupacompte),
.main.main-object-model .dxbl-group > .dxbl-group-header:has(.xaf-item-groupsituation),
.detail-view-content .dxbl-group > .dxbl-group-header:has(.xaf-item-groupfinale),
.detail-view-content .dxbl-group > .dxbl-group-header:has(.xaf-item-groupacompte),
.detail-view-content .dxbl-group > .dxbl-group-header:has(.xaf-item-groupsituation) {
--dxbl-group-header-bg: transparent;
background: transparent !important;
border-bottom: none !important;
padding: 10px 10px 0 10px;
font-size: 14px;
font-weight: 400;
color: var(--batifree-text-strong);
}
/* 2. Border neutre + radius autour de chaque section.
La classe .dxbl-group EST sur dxbl-group-control lui-même (pas dans un shadow root).
La règle batifree-light.css:1942 applique border: 1px solid var(--batifree-primary-20) !important
sur .detail-view-content .dxbl-group (0,2,0) et .main.main-object-model .dxbl-group (0,3,0).
On préfixe les sélecteurs avec le contexte pour atteindre (0,2,1) et (0,3,1). */
.main.main-object-model dxbl-group-control:has(.xaf-item-groupfinale),
.main.main-object-model dxbl-group-control:has(.xaf-item-groupacompte),
.main.main-object-model dxbl-group-control:has(.xaf-item-groupsituation),
.detail-view-content dxbl-group-control:has(.xaf-item-groupfinale),
.detail-view-content dxbl-group-control:has(.xaf-item-groupacompte),
.detail-view-content dxbl-group-control:has(.xaf-item-groupsituation) {
border: 1px solid var(--batifree-neutral-30) !important;
border-radius: 4px !important;
overflow: hidden;
}
/* 3. Bouton Créer facture finale → PRIMARY orange
(data-action-name est généré par XAF à partir du Caption de l'action) */
[data-action-name="Créer facture finale"] {
--dxbl-btn-bg: var(--batifree-primary-100);
--dxbl-btn-color: #fffefd;
--dxbl-btn-border-color: var(--batifree-primary-100);
}
[data-action-name="Créer facture finale"]:hover {
--dxbl-btn-bg: var(--batifree-primary-110);
--dxbl-btn-border-color: var(--batifree-primary-110);
--dxbl-btn-color: #fffefd;
}
/* ============================================================
22. IMAGE PROPERTY EDITOR — fill group + center icon
============================================================
dxbl-group-body-content is flex:0 0 auto by default
so it does not grow inside the group (height:100%).
Fix: flex:1 on body-content + height:100% cascaded down
to xaf-image-container. Icon centered with flex.
Button inset:0 covers the full available area.
============================================================ */
.dxbl-group:has(.xaf-image-editor) .dxbl-group-body-content {
flex: 1 1 auto;
min-height: 0;
}
.dxbl-group:has(.xaf-image-editor) .dxbl-row,
.dxbl-group:has(.xaf-image-editor) .dxbl-fl-item,
.dxbl-group:has(.xaf-image-editor) .dxbl-fl-ctrl,
.dxbl-group:has(.xaf-image-editor) .xaf-image-editor,
.dxbl-group:has(.xaf-image-editor) .progress-container {
height: 100% !important;
min-height: 0;
}
.dxbl-group:has(.xaf-image-editor) .img-thumbnail {
height: 100% !important;
width: 100% !important;
}
.dxbl-group:has(.xaf-image-editor) .xaf-image-container {
position: relative !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.dxbl-group:has(.xaf-image-editor) .xaf-image-clickable-overlay {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
/* ============================================================
23. CARD STACK — stacked-card navigation for address tabs
============================================================ */
/* Nav bar = card header (même style que .dxbl-group-header) */
.cardstack-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 12px;
min-height: 46px;
background: var(--batifree-primary-10);
border: 1px solid var(--batifree-primary-20);
border-bottom: 1px solid var(--batifree-primary-20);
border-radius: 10px 10px 0 0;
}
.cardstack-arrow {
background: none;
border: none;
font-size: 26px;
line-height: 1;
padding: 0 6px;
color: var(--batifree-primary-100);
cursor: pointer;
border-radius: var(--batifree-radius-sm);
transition: background 0.15s;
}
.cardstack-arrow:hover:not(:disabled) {
background: rgba(255, 90, 0, 0.08);
}
.cardstack-arrow:disabled {
color: var(--batifree-neutral-40);
cursor: default;
}
.cardstack-center {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.cardstack-label {
font-size: 14px;
font-weight: 500;
color: var(--batifree-neutral-130);
font-family: var(--batifree-font);
text-transform: uppercase;
letter-spacing: 0.6px;
line-height: 1.35;
}
.cardstack-dots {
display: flex;
gap: 5px;
}
.cardstack-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--batifree-neutral-40);
transition: background 0.2s;
}
.cardstack-dot.active {
background: var(--batifree-primary-100);
}
/* Hide native tab headers — replaced by CardStack nav (JS adds cardstack-panel class).
height:0 + overflow:hidden requis car le shadow DOM de dxbl-tab-list
peut conserver 3.5px de rendu malgré display:none sur le host. */
dxbl-tabs.cardstack-panel dxbl-tab-list {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
}
/* Masquer le tab-list des dxbl-tabs vides (tab-count=0) : placeholders XAF
dont les colonnes Bootstrap dépassent 12 et wrappent sous le CardStack. */
dxbl-tabs[tab-count="0"] dxbl-tab-list {
display: none !important;
height: 0 !important;
overflow: hidden !important;
}
/* Supprimer le margin-bottom du LayoutItem CardSlideNav pour coller le nav au panel */
.main.main-object-model dxbl-form-layout-item:has(.cardstack-nav),
.detail-view-content dxbl-form-layout-item:has(.cardstack-nav) {
margin-bottom: 0 !important;
}
/* Tab panel = card body (même style que .dxbl-group) */
.dxbl-tabs.cardstack-panel {
background: var(--batifree-neutral-0);
border: 1px solid var(--batifree-primary-20);
border-top: none;
border-radius: 0 0 10px 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
overflow: hidden !important;
}
/* Supprimer la double-carte : inner .dxbl-group dans le tab hérite du card parent.
Sélecteurs préfixés .main.main-object-model / .detail-view-content pour
dépasser la spécificité 0,3,0 de la règle card globale. */
.main.main-object-model .dxbl-tabs.cardstack-panel .dxbl-group,
.detail-view-content .dxbl-tabs.cardstack-panel .dxbl-group {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
height: auto !important;
}
.main.main-object-model .dxbl-tabs.cardstack-panel .dxbl-group > .dxbl-group-header,
.detail-view-content .dxbl-tabs.cardstack-panel .dxbl-group > .dxbl-group-header {
display: none !important;
}
.main.main-object-model .dxbl-tabs.cardstack-panel .dxbl-group-body.dxbl-fl-group-body > .dxbl-group-body-content,
.detail-view-content .dxbl-tabs.cardstack-panel .dxbl-group-body.dxbl-fl-group-body > .dxbl-group-body-content {
background: var(--batifree-neutral-0) !important;
padding: 15px !important;
}
/* ============================================================
24. AUTO-HEIGHT POPUP LISTVIEW
Le JS DevExpress pose height: 0px en inline style sur dxbl-modal-dialog
quand IPopupWindowTemplateSize.Height n'est pas fixé.
overflow: hidden + height: 0px → popup collapsée à min-height: 200px.
On surcharge avec !important directement sur le dialog.
Les popups avec une hauteur fixée (vh ou px) ne sont pas affectés
car leur dialog-css-style contient une valeur différente.
============================================================ */
dxbl-modal-dialog[dialog-css-style*="height: 0px"] {
height: auto !important;
overflow: auto !important;
}
/* ============================================================
25. REPORT VIEWER TOOLBAR
============================================================ */
/* Gap entre groupes + padding latéral (dxbl-btn-plain-toolbar = flex container réel) */
.dxbrv-toolbar .dxbl-btn-plain-toolbar {
gap: 10px !important;
padding-inline: 10px !important;
}
/* Marge à gauche uniquement — évite le doublement du gap entre boutons adjacents */
.dxbrv-toolbar .dxbl-btn-toolbar .dxbl-btn {
margin-inline-start: 5px !important;
margin-inline-end: 0 !important;
}
/* Dernier bouton — garde une marge droite pour l'aération en bord */
.dxbrv-toolbar .dxbl-btn-toolbar .dxbl-btn-last {
margin-inline-end: 5px !important;
}
/* Print + Export To — style primary
Spécificité (0,10,0) dépasse la règle secondary (0,9,0) → pas de !important conflit
Les classes sont vérifiées depuis le DOM inspecté (v26.1.3.0) */
.dxbrv-toolbar .dxbl-btn-group.dxbl-toolbar-group .dxbl-btn.dxbl-btn-text-secondary.dxbl-toolbar-btn.dxbl-toolbar-item.dxbl-toolbar-layout-block-item[title="Print"],
.dxbrv-toolbar .dxbl-btn-group.dxbl-toolbar-group .dxbl-btn.dxbl-btn-text-secondary.dxbl-toolbar-btn.dxbl-toolbar-item.dxbl-toolbar-layout-block-item[title="Export To"] {
background: var(--batifree-primary-100) !important;
border: 1px solid var(--batifree-primary-100) !important;
border-radius: var(--batifree-radius-md);
}
.dxbrv-toolbar .dxbl-btn-group.dxbl-toolbar-group .dxbl-btn.dxbl-btn-text-secondary.dxbl-toolbar-btn.dxbl-toolbar-item.dxbl-toolbar-layout-block-item[title="Print"]:hover,
.dxbrv-toolbar .dxbl-btn-group.dxbl-toolbar-group .dxbl-btn.dxbl-btn-text-secondary.dxbl-toolbar-btn.dxbl-toolbar-item.dxbl-toolbar-layout-block-item[title="Export To"]:hover {
background: var(--batifree-primary-110) !important;
border-color: var(--batifree-primary-110) !important;
}
.dxbrv-toolbar .dxbl-btn-group.dxbl-toolbar-group .dxbl-btn.dxbl-btn-text-secondary.dxbl-toolbar-btn.dxbl-toolbar-item.dxbl-toolbar-layout-block-item[title="Print"] .dxbl-image,
.dxbrv-toolbar .dxbl-btn-group.dxbl-toolbar-group .dxbl-btn.dxbl-btn-text-secondary.dxbl-toolbar-btn.dxbl-toolbar-item.dxbl-toolbar-layout-block-item[title="Export To"] .dxbl-image,
.dxbrv-toolbar .dxbl-btn-group.dxbl-toolbar-group .dxbl-btn.dxbl-btn-text-secondary.dxbl-toolbar-btn.dxbl-toolbar-item.dxbl-toolbar-layout-block-item[title="Export To"] svg,
.dxbrv-toolbar .dxbl-btn-group.dxbl-toolbar-group .dxbl-btn.dxbl-btn-text-secondary.dxbl-toolbar-btn.dxbl-toolbar-item.dxbl-toolbar-layout-block-item[title="Export To"] svg use {
color: #ffffff !important;
fill: currentColor !important;
}
/* ============================================================
26. SITUATIONS — ORIGIN GRID SEARCH BOX
DxGrid search box of Ventes_Clean_ListView_Situations (left
master pane), styled like the XAF FullTextSearch field.
Class batifree-origin-search is added on the SearchBoxContainer
by VenteSituationsOriginMasterController (CustomizeElement).
DOM (v26.1.3.0):
div.dxbl-grid-search-box-container.batifree-origin-search
dxbl-input-editor.dxbl-grid-search-box.dxbl-text-edit
button.dxbl-btn.dxbl-btn-outline-secondary.dxbl-btn-icon
svg.dxbl-image
input.dxbl-text-edit-input[type="search"]
============================================================ */
.batifree-origin-search.dxbl-grid-search-box-container {
flex: 1 1 auto !important;
width: 100% !important;
margin: 0 !important;
padding: 0 10px 8px 0 !important;
}
.batifree-origin-search .dxbl-grid-search-box.dxbl-text-edit {
flex: 1 1 auto !important;
width: 100% !important;
max-width: none !important;
height: 34px !important;
min-height: 34px !important;
background-color: var(--placeholder-enable-bg) !important;
border: 1px solid var(--placeholder-enable-border) !important;
border-radius: var(--batifree-radius-md) !important;
box-shadow: none !important;
}
.batifree-origin-search .dxbl-grid-search-box.dxbl-text-edit:hover {
background-color: var(--placeholder-hover-bg) !important;
border-color: var(--placeholder-hover-border) !important;
}
.batifree-origin-search .dxbl-grid-search-box.dxbl-text-edit:focus-within {
background-color: var(--placeholder-active-bg) !important;
border-color: var(--placeholder-active-border) !important;
box-shadow: none !important;
}
.batifree-origin-search .dxbl-grid-search-box .dxbl-text-edit-input {
order: 1 !important;
background-color: transparent !important;
height: 32px !important;
padding: 8px 10px !important;
color: var(--batifree-ink) !important;
}
.batifree-origin-search .dxbl-grid-search-box .dxbl-btn.dxbl-edit-btn-clear {
order: 2 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 7px 4px !important;
color: var(--placeholder-enable-content) !important;
}
.batifree-origin-search .dxbl-grid-search-box .dxbl-btn.dxbl-btn-icon {
order: 3 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 7px 10px !important;
color: var(--placeholder-enable-content) !important;
}
.batifree-origin-search .dxbl-grid-search-box.dxbl-text-edit:focus-within .dxbl-btn.dxbl-btn-icon {
color: var(--placeholder-active-content) !important;
}
.batifree-origin-search .dxbl-grid-search-box .dxbl-btn.dxbl-btn-icon .dxbl-image {
width: 14px !important;
height: 14px !important;
}
/* ============================================================
27. GRID SEARCH BOX — STYLE ONLY (no layout override)
Same visual as batifree-origin-search but without the
flex/width overrides — keeps DevExpress default sizing.
Class batifree-grid-search is added on SearchBoxContainer
by LibraryPopupProductListController (CustomizeElement).
============================================================ */
.batifree-grid-search .dxbl-grid-search-box.dxbl-text-edit {
height: 34px !important;
min-height: 34px !important;
background-color: var(--placeholder-enable-bg) !important;
border: 1px solid var(--placeholder-enable-border) !important;
border-radius: var(--batifree-radius-md) !important;
box-shadow: none !important;
}
.batifree-grid-search .dxbl-grid-search-box.dxbl-text-edit:hover {
background-color: var(--placeholder-hover-bg) !important;
border-color: var(--placeholder-hover-border) !important;
}
.batifree-grid-search .dxbl-grid-search-box.dxbl-text-edit:focus-within {
background-color: var(--placeholder-active-bg) !important;
border-color: var(--placeholder-active-border) !important;
box-shadow: none !important;
}
.batifree-grid-search .dxbl-grid-search-box .dxbl-text-edit-input {
order: 1 !important;
background-color: transparent !important;
height: 32px !important;
padding: 8px 10px !important;
color: var(--batifree-ink) !important;
}
.batifree-grid-search .dxbl-grid-search-box .dxbl-btn.dxbl-edit-btn-clear {
order: 2 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 7px 4px !important;
color: var(--placeholder-enable-content) !important;
}
.batifree-grid-search .dxbl-grid-search-box .dxbl-btn.dxbl-btn-icon {
order: 3 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 7px 10px !important;
color: var(--placeholder-enable-content) !important;
}
.batifree-grid-search .dxbl-grid-search-box.dxbl-text-edit:focus-within .dxbl-btn.dxbl-btn-icon {
color: var(--placeholder-active-content) !important;
}
.batifree-grid-search .dxbl-grid-search-box .dxbl-btn.dxbl-btn-icon .dxbl-image {
width: 14px !important;
height: 14px !important;
}
/* ============================================================
28. SÉLECTEUR DE MODE Light/Dark (ThemeSwitcher)
============================================================ */
.themeswitcher-fluent-mode .dxbl-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px;
}
.themeswitcher-fluent-mode .dxbl-btn .dxbl-btn-icon.dxbl-image {
flex: 0 0 auto;
width: 16px !important;
height: 16px !important;
margin: 0 !important;
vertical-align: middle;
}
.themeswitcher-fluent-mode .dxbl-btn .dxbl-btn-caption {
line-height: 1;
}
/* ============================================================
29. NOTIFICATIONS XAF (ShowMessage) — affichées en haut
============================================================ */
.xaf-alerts-stack > .xaf-alerts-stack-inner {
justify-content: flex-start;
}
/* ============================================================
30. NOTIFICATIONS XAF (ShowMessage) — style DS Batifree « alert »
============================================================ */
.xaf-alerts-stack .xaf-alert {
--batifree-alert-surface: #ebf8fe;
--batifree-alert-border: #005bc280;
--batifree-alert-ink: #164147;
--batifree-alert-text: #535350;
align-items: flex-start;
gap: 5px;
padding: 10px 15px;
margin-bottom: 8px;
background: var(--batifree-alert-surface) !important;
border: 1px solid var(--batifree-alert-border) !important;
border-radius: 10px;
box-shadow: none;
color: var(--batifree-alert-ink) !important;
font-family: var(--batifree-font);
}
.xaf-alerts-stack .xaf-alert.alert-success {
--batifree-alert-surface: #ecfcea;
--batifree-alert-border: #08651e;
}
.xaf-alerts-stack .xaf-alert.alert-info,
.xaf-alerts-stack .xaf-alert.alert-warning {
--batifree-alert-surface: #ebf8fe;
--batifree-alert-border: #005bc280;
}
.xaf-alerts-stack .xaf-alert.alert-danger {
--batifree-alert-surface: var(--batifree-danger-10);
--batifree-alert-border: var(--batifree-danger-90);
}
.xaf-alerts-stack .xaf-alert > .xaf-image {
flex: 0 0 auto;
width: 14px !important;
height: 14px !important;
margin: 2.5px 0 0 0;
-webkit-mask-size: 14px !important;
mask-size: 14px !important;
background-color: var(--batifree-alert-ink) !important;
}
.xaf-alerts-stack .xaf-alert .xaf-alert-text-container {
gap: 3px;
padding: 0;
}
.xaf-alerts-stack .xaf-alert .xaf-alert-header {
font-size: 14px;
font-weight: 500;
line-height: normal;
color: var(--batifree-alert-ink);
}
.xaf-alerts-stack .xaf-alert .xaf-alert-header:empty {
display: none;
}
.xaf-alerts-stack .xaf-alert .xaf-alert-message {
font-size: 12px;
font-weight: 400;
line-height: normal;
color: var(--batifree-alert-text);
}
.xaf-alerts-stack .xaf-alert .xaf-alert-header:empty + .xaf-alert-message {
font-size: 14px;
font-weight: 500;
color: var(--batifree-alert-ink);
}
.xaf-alerts-stack .xaf-alert .xaf-alert-action-container {
align-self: flex-start;
margin-top: 2.5px;
}
.xaf-alerts-stack .xaf-alert .xaf-alert-button {
padding: 0;
color: var(--batifree-alert-ink) !important;
}
.xaf-alerts-stack .xaf-alert .xaf-alert-close .xaf-image {
width: 14px !important;
height: 14px !important;
background-color: var(--batifree-alert-ink) !important;
-webkit-mask-image: url("/images/Close.svg") !important;
mask-image: url("/images/Close.svg") !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
}
/* ============================================================
31. LISTES IMBRIQUÉES — toolbar qui suit le défilement
============================================================ */
dxbl-group-control.dxbl-group:has(.nested-frame > .nested-toolbar) {
overflow: clip !important;
}
.nested-frame > .nested-toolbar {
position: sticky !important;
top: 0;
z-index: 5;
background: var(--batifree-neutral-0);
box-shadow: 0 -7px 0 0 var(--batifree-neutral-0);
}
/* ============================================================
32. DESCRIPTION — édition dans la cellule (DescriptionInlinePropertyEditor)
============================================================ */
.desc-inline-cell {
cursor: text;
}
.desc-inline-input {
width: 100%;
margin: 0;
padding: 0;
border: 0;
outline: none;
background: transparent;
color: inherit;
line-height: inherit;
resize: none;
overflow: hidden;
}
.dxbl-grid td[data-edit-cell] textarea.desc-inline-input {
max-height: none !important;
line-height: 16px;
}
/* ============================================================
33. DRAG-AND-DROP DES LIGNES D'ÉTUDE — repère de destination
============================================================ */
body.bf-drop-guide-on dxbl-tree-list dxbl-grid-drop-target-indicator.dxbl-active {
box-shadow: none !important;
}
.bf-drop-guide {
display: none;
position: fixed;
inset: 0;
z-index: 19998;
pointer-events: none;
}
.bf-drop-guide-line {
position: fixed;
height: 3px;
border-radius: 2px;
background: var(--batifree-primary-100);
}
.bf-drop-guide-dot {
position: absolute;
left: -5px;
top: -4px;
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid var(--batifree-primary-100);
background: var(--batifree-neutral-0);
}
.bf-drop-guide-box {
position: fixed;
border: 2px solid var(--batifree-primary-100);
border-radius: var(--batifree-radius-md);
background: rgba(255, 90, 0, 0.10);
}
.bf-drop-guide-label {
position: fixed;
padding: 2px 8px;
border-radius: 10px;
background: var(--batifree-primary-100);
color: #ffffff;
font-size: 12px;
font-weight: 500;
line-height: 18px;
white-space: nowrap;
}
body.bf-drop-guide-on.bf-drop-forbidden dxbl-tree-list dxbl-grid-drop-target-indicator {
visibility: hidden !important;
}
body.bf-drop-guide-on.bf-drop-forbidden,
body.bf-drop-guide-on.bf-drop-forbidden * {
cursor: not-allowed !important;
}
/* ============================================================
34. BOUTON D'ACTION PRINCIPAL DANS UNE BARRE D'OUTILS
Une action XAF avec CustomCSSClassName="btn-primary" garde aussi
dxbl-btn-secondary et tombe sous la règle « All other toolbar buttons »
de la section 10 (spécificité 0,9,0 ; 0,10,0 au survol). Ce sélecteur
(0,11,0 ; 0,12,0 au survol) rétablit la couleur principale.
L'état désactivé reste géré par la section 10.
============================================================ */
.dxbl-toolbar .dxbl-btn.dxbl-btn-secondary.btn-primary.xaf-action.dxbl-toolbar-btn.dxbl-toolbar-item.dxbl-toolbar-layout-block-item:not(.dxbl-text-edit-btn):not(.dxbl-disabled):not(:disabled) {
background: var(--batifree-primary-100) !important;
border: 1px solid var(--batifree-primary-100) !important;
color: var(--batifree-white) !important;
}
.dxbl-toolbar .dxbl-btn.dxbl-btn-secondary.btn-primary.xaf-action.dxbl-toolbar-btn.dxbl-toolbar-item.dxbl-toolbar-layout-block-item:not(.dxbl-text-edit-btn):not(.dxbl-disabled):not(:disabled) * {
color: var(--batifree-white) !important;
}
.dxbl-toolbar .dxbl-btn.dxbl-btn-secondary.btn-primary.xaf-action.dxbl-toolbar-btn.dxbl-toolbar-item.dxbl-toolbar-layout-block-item:not(.dxbl-text-edit-btn):not(.dxbl-disabled):not(:disabled):hover {
background: var(--batifree-primary-110) !important;
border-color: var(--batifree-primary-110) !important;
color: var(--batifree-white) !important;
}
.dxbl-toolbar .dxbl-btn.dxbl-btn-secondary.btn-primary.xaf-action.dxbl-toolbar-btn.dxbl-toolbar-item.dxbl-toolbar-layout-block-item:not(.dxbl-text-edit-btn):not(.dxbl-disabled):not(:disabled):active {
background: var(--batifree-primary-20) !important;
border-color: var(--batifree-primary-20) !important;
color: var(--batifree-ink-on-tint) !important;
box-shadow: none !important;
}
/* ============================================================
35. ENCART D'AVERTISSEMENT (WarningNoticePropertyEditor)
Utilisé dans la confirmation « Adresse de facturation incomplète ».
============================================================ */
.batifree-warning-notice {
margin: 12px 0 0 0;
padding: 10px 12px;
background: var(--batifree-warning-20);
border: 1px solid var(--batifree-warning-40);
border-left: 4px solid var(--batifree-warning-90);
border-radius: 4px;
font-family: var(--batifree-font, 'Manrope', sans-serif);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: var(--batifree-warning-110);
white-space: pre-line;
word-break: break-word;
}
/* ============================================================
END OF BATIFREE LIGHT THEME
============================================================
*/