/*
* ============================================================
* SIDEBAR (menu de navigation)
* DevExpress XAF Blazor v25.x — Fluent mode
*
* File structure
* ──────────────
* 0. Base / app shell (chaîne de hauteur, header masqué)
* 1. Design tokens (MERCALYS menu palette)
* 2. Sidebar — surface + header (logo)
* 3. Navigation filter (native XAF search field)
* 4. Navigation tree (items, states, separators, bullets)
* 5. Collapsed rail (manual click toggle, via sidebar.js + native XAF)
*
* Override strategy for DevExpress components
* ────────────────────────────────────────────
* DevExpress Fluent theme relies on a two-level CSS variable chain:
* component variable → dxds token → value
* Adding !important on a property such as background-color has NO
* effect when the component reads its color from a CSS variable at
* render time. The only reliable approach is to re-declare the
* component-level CSS variable on a scoped selector (.sidebar …)
* so the cascade resolves to our value first.
*
* Example (navigation field background):
* .dxbl-text-edit reads its background from --dxbl-text-edit-bg
* → we re-declare --dxbl-text-edit-bg on .sidebar .dxbl-text-edit
*
* When in doubt, search core.min.css for the component class and
* trace back the variable chain before writing overrides.
* ============================================================
*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');
/* ============================================================
0. BASE / APP SHELL
Chaîne de hauteur indispensable : SANS ces règles, les conteneurs
virtualisés DevExpress (TreeView de navigation, grilles) n'ont pas
de hauteur bornée et lèvent « UnableToRequestItemsException » au
démarrage, sur toutes les pages.
============================================================ */
html, body { height: 100%; }
app { display: block; height: 100%; }
/* Header applicatif MASQUÉ : la maquette n'a pas de bandeau supérieur sombre.
La flèche RETOUR + le TITRE de vue sont rendus dans la zone de contenu
(.main-pagebar, cf. template CustomApplicationWindowTemplateComponent.razor).
Compte / réglages / déconnexion sont déplacés dans le menu. */
.app-header {
display: none !important;
}
/* ============================================================
1. DESIGN TOKENS — palette MERCALYS (menu)
Toutes les couleurs, espacements, rayons et typo vivent ici.
Aucune valeur brute (hex) ne doit apparaître hors de ce bloc.
============================================================ */
:root {
/* ── Palette ──────────────────────────────────────────── */
--sidebar-palette-teal-700: #164147; /* surface sidebar */
--sidebar-palette-teal-600: #1c4b52; /* fond de champ */
--sidebar-palette-teal-550: #24616a; /* fond de champ · survol */
--sidebar-palette-teal-525: #2d6d76; /* bordure de champ · survol */
--sidebar-palette-teal-500: #255a62; /* bordure de champ */
--sidebar-palette-white: #fffefd; /* blanc */
--sidebar-palette-charcoal-10: #f9f9f9; /* fond tooltip */
--sidebar-palette-charcoal-20: #f3f3f3; /* bordure tooltip */
--sidebar-palette-charcoal-40: #e1e1e0; /* gris clair */
--sidebar-palette-charcoal-60: #cdcdcb; /* gris moyen */
--sidebar-palette-charcoal-70: #b9b9b6; /* gris soutenu */
--sidebar-palette-lime-10: #f1fbe4; /* lime très clair (hover item) */
--sidebar-palette-lime-20: #ddf3d2; /* lime clair (pressed item) */
--sidebar-palette-lime-30: #cff6b8; /* lime clair (focus champ) */
--sidebar-palette-lime-40: #d4f9a3; /* lime (accent / sélection) */
--sidebar-palette-lime-50: #bcea78; /* lime soutenu */
/* ── Espacement / rayon ───────────────────────────────── */
--sidebar-space-s: 8px;
--sidebar-space-m: 10px;
--sidebar-space-2xl: 20px;
--sidebar-space-3xl: 24px; /* gap en-tête → zone nav (Figma : container gap-24) */
--sidebar-radius-s: 4px;
/* ── Typographie (Manrope = police de marque ; fallback Fluent) ── */
--sidebar-font-family: "Manrope", var(--dxbl-text-edit-font-family-m, "Segoe UI", system-ui, sans-serif);
--sidebar-font-size-xs: 10px;
--sidebar-font-size-s: 12px;
--sidebar-font-size-m: 14px; /* md/regular (tooltip) */
--sidebar-font-weight-regular: 400;
/* ── Rôles sémantiques (consommés par les composants) ─── */
--sidebar-surface: var(--sidebar-palette-teal-700);
--sidebar-field-surface: var(--sidebar-palette-teal-600);
--sidebar-field-surface-hover: var(--sidebar-palette-teal-550);
--sidebar-field-border: var(--sidebar-palette-teal-500);
--sidebar-field-border-hover: var(--sidebar-palette-teal-525);
--sidebar-field-border-focus: var(--sidebar-palette-lime-30);
--sidebar-text-on-dark: var(--sidebar-palette-white);
--sidebar-text-placeholder: var(--sidebar-palette-charcoal-40);
--sidebar-text-muted: var(--sidebar-palette-charcoal-70);
--sidebar-accent: var(--sidebar-palette-lime-40);
/* Navigation (item de sidebar) — états maquette :
enable = transparent + blanc ; hover = lime/10 + teal ;
pressed = lime/20 ; sélection = lime/40 + teal. */
--sidebar-nav-item-text: var(--sidebar-text-on-dark);
--sidebar-nav-item-hover-surface: var(--sidebar-palette-lime-10);
--sidebar-nav-item-hover-text: var(--sidebar-palette-teal-700);
--sidebar-nav-item-pressed-surface: var(--sidebar-palette-lime-20);
--sidebar-nav-item-selected-surface: var(--sidebar-accent);
--sidebar-nav-item-selected-text: var(--sidebar-palette-teal-700);
--sidebar-nav-subitem-text: var(--sidebar-palette-charcoal-60);
--sidebar-nav-section-text: var(--sidebar-palette-charcoal-60); /* #cdcdcb — titres de module (Figma « Charcoal/70 » = #CDCDCB) */
/* Infobulle (rail replié) — maquette Figma : carré clair, texte teal. */
--sidebar-tooltip-surface: var(--sidebar-palette-charcoal-10);
--sidebar-tooltip-border: var(--sidebar-palette-charcoal-20);
--sidebar-tooltip-text: var(--sidebar-palette-teal-700);
/* Recoloration des icônes d'items (img) au survol/sélection : le fond passe en
clair -> l'icône doit virer en teal pour rester visible. Une ![]()
n'est pas
recolorable via `color`, on passe donc par un `filter` (≈ teal #164147).
À régénérer si la couleur d'accent change (outil « hex → css filter »). */
--sidebar-nav-icon-active-filter:
brightness(0) saturate(100%) invert(19%) sepia(34%) saturate(1093%) hue-rotate(140deg) brightness(94%) contrast(91%);
}
/* ============================================================
2. SIDEBAR — surface + en-tête (logo)
On cible la classe NATIVE `.sidebar` (rendue par XAF) — pas de classe
custom — pour rester portable dans une app XAF native (autre équipe).
Le thème DevExpress pose un défaut plus spécifique
(`.dxbl-theme-fluent .app .sidebar`, 0,3,0) MAIS sans `!important` : nos
règles `!important` le battent. Ce fichier est chargé EN DERNIER (après
app-theme.css) pour gagner aussi la cascade face aux règles globales.
============================================================ */
.sidebar {
/* Largeur VERROUILLÉE (width + min + max + flex:0 0 auto). Sans ça, la sidebar
n'avait qu'un min-width et grandissait en flex pour remplir l'espace libre
quand la zone principale était vide — d'où l'élargissement au clic sur
« Accueil » (dashboard vide). Le rail replié rétablit 70px (section 5, !important). */
width: 210px;
min-width: 210px;
max-width: 210px;
flex: 0 0 auto !important;
background: var(--sidebar-surface) !important;
/* Panneau teal plein, à ras bord : on annule bordure / coin arrondi /
marge haute que le thème pose par défaut sur la sidebar. */
border: none !important;
border-radius: 0 !important;
margin-top: 0 !important;
}
.sidebar a {
text-decoration: none !important;
}
/* Ancien menu bas de sidebar. « Déconnexion » est désormais un sous-item de nav (sous
« Mon compte », cf. Model.xafml + LogOffNavigationItemController). Ce conteneur ne sert
plus qu'à héberger le (caché) qui fournit le tiroir de thème pour
l'item « Apparence ». On le passe en display:contents : aucune emprise/box (donc plus de
bloc épinglé en bas), tout en conservant les règles descendantes .theme-settings/.theme-button. */
.sidebar__menu {
display: contents;
}
/* Sélecteur de thème NATIF (SettingsComponent) : rendu ici pour son tiroir latéral
(.settings-bar, position:fixed) + sa logique, MAIS sans emprise visuelle. On masque son
bouton gear par défaut et on neutralise son wrapper (display:contents). Le tiroir est
ouvert par l'item de nav « Apparence » (sidebar.js relaie le clic sur .theme-button). */
.sidebar__menu .theme-settings { display: contents; }
.sidebar__menu .theme-button { display: none !important; }
/* Dropdowns DevExpress (langue, mode de taille) DANS le tiroir : leur liste est rendue dans
le portail global en fin de , dont les cellules (dxbl-popup-cell)
sont à z-index:0 -> la liste s'ouvre mais est peinte SOUS le tiroir (.settings-bar,
z-index:1100 posé par XAF) = invisible et incliquable. On rehausse les cellules popup
au-dessus du tiroir ; leur ordre relatif entre elles reste l'ordre DOM (valeur égale). */
dxbl-popup-cell { z-index: 1150 !important; }
/* Bouton de déconnexion CACHÉ : simple relais cliqué par sidebar.js au clic sur le
sous-item de nav « Déconnexion » (cf. .sidebar__logoff-trigger dans le template). */
.sidebar__logoff-trigger { display: none !important; }
/* Ligne de menu = bouton nu, pleine largeur, icône SVG + libellé. L'icône est en
currentColor -> elle suit la couleur du texte (blanc au repos, teal au survol),
sans recoloration par filtre (contrairement aux ![]()
des items de nav). */
.sidebar__menu-item {
display: flex;
align-items: center;
gap: 5px; /* = --dxbl-treeview-image-spacing (gap icône ↔ texte des items de nav) */
/* Même gabarit que les items de nav (.dxbl-treeview-item-container) : boîte 160×35, retrait
gauche 20px / droite 10px, box-sizing border-box pour que le padding reste DANS les 160px. */
box-sizing: border-box;
width: 160px;
height: 35px;
padding: 0 10px; /* gauche 10 / droite 10 (maquette) — aligné avec les items de nav */
border: none;
background: transparent;
border-radius: var(--sidebar-radius-s);
color: var(--sidebar-nav-item-text);
font-family: var(--sidebar-font-family);
font-size: var(--sidebar-font-size-m); /* 14px (maquette) */
font-weight: var(--sidebar-font-weight-regular);
line-height: 1.2;
text-align: left;
cursor: pointer;
}
.sidebar__menu-item:hover {
background: var(--sidebar-nav-item-hover-surface);
color: var(--sidebar-nav-item-hover-text);
}
.sidebar__menu-icon {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
.sidebar__menu-label {
min-width: 0;
overflow-wrap: break-word;
}
/* En-tête de la sidebar (logo MERCALYS). Le wordmark utilise une police
propriétaire (Berlin Sans FB Demi), non chargeable côté web : on utilise
le lockup exporté du Figma en image -> rendu fidèle (police comprise). */
.sidebar__brand {
display: flex;
align-items: center;
gap: var(--sidebar-space-s);
/* Côtés = 10px et haut = 20px (état d'origine). Bas = 14px : le gap Figma
en-tête → recherche est de 24px TOTAL. Comme la zone de recherche porte déjà
10px de padding-top, on met 14px ici (14 + 10 = 24) pour ne pas dépasser. */
padding: var(--sidebar-space-2xl) var(--sidebar-space-m) 14px;
}
.sidebar__logo {
height: 30px !important;
width: auto !important;
object-fit: contain;
max-width: 100%;
cursor: pointer; /* logo cliquable -> Accueil (géré dans sidebar.js) */
}
/* Lockup complet (déplié) vs cube seul (rail replié).
Le cube SVG a preserveAspectRatio="none" -> dimensions fixes au ratio
natif (26.76 × 31.11) pour éviter qu'il s'étire en largeur dans le rail. */
.sidebar__logo--mark {
display: none !important;
width: 26px !important;
height: 30px !important;
}
/* Flèche de bascule pli/dépli (Figma : 14px, en bout de l'en-tête).
Le clic est géré dans sidebar.js (un onclick inline serait bloqué par la CSP)
et déclenche la bascule NATIVE XAF (pose/retire .collapse-toggle sur .app). */
.sidebar__collapse-btn {
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
background: transparent;
color: var(--sidebar-text-on-dark);
cursor: pointer;
}
.sidebar__chevron {
/* Taille forcée en CSS (20px, maquette) : l'emporte sur les attributs
width/height="14" du SVG inline -> ajustable sans recompiler le .razor. */
width: 20px;
height: 20px;
transition: transform 0.15s ease;
}
/* ============================================================
3. FILTRE DE NAVIGATION (champ de recherche natif XAF)
On habille le champ « Filter… » NATIF de la navigation (il garde sa
loupe et sa fonction de filtrage). Scopé à la sidebar : c'est le seul
éditeur texte présent dans `.sidebar`.
============================================================ */
/* Gabarit du champ de recherche = MÊME que les items de nav : 160px de large, retrait gauche 20px
(au lieu de s'étendre pleine largeur). Il s'aligne ainsi avec les boîtes « Accueil », « Produits »…
Le rail replié (section 5) le repasse en carré 32px (!important, plus spécifique -> non impacté). */
.sidebar .dxbl-navigation-filter {
box-sizing: border-box;
width: 160px;
margin-left: var(--sidebar-space-2xl);
/* Le composant natif du filtre pose un style INLINE `border-bottom-width:1px !important`
dont la couleur par défaut (jaune) débordait sous le champ. Le style inline ne fixe que
la LARGEUR -> on force ici la COULEUR (et le style) de cette bordure basse sur le teal du
champ pour qu'elle se fonde dans le cadre. */
border-bottom-color: var(--sidebar-field-border) !important;
border-bottom-style: solid !important;
}
.sidebar .dxbl-text-edit {
--dxbl-text-edit-bg: var(--sidebar-field-surface);
--dxbl-text-edit-color: var(--sidebar-text-on-dark);
--dxbl-text-edit-placeholder-color: var(--sidebar-text-placeholder);
--dxbl-text-edit-border-color: var(--sidebar-field-border);
--dxbl-text-edit-border-hovered-color: var(--sidebar-field-border-hover); /* survol = teal clair */
--dxbl-text-edit-border-active-color: var(--sidebar-field-border); /* focus = pas de changement de couleur */
--dxbl-text-edit-border-width: 1px;
--dxbl-text-edit-border-style: solid;
--dxbl-text-edit-border-radius: var(--sidebar-radius-s);
--dxbl-text-edit-box-shadow: none;
--dxbl-text-edit-font-family: var(--sidebar-font-family);
--dxbl-text-edit-font-size: var(--sidebar-font-size-m); /* 14px (maquette) */
--dxbl-text-edit-font-weight: var(--sidebar-font-weight-regular);
/* Bouton loupe natif : transparent, icône claire */
--dxbl-text-edit-btn-bg: transparent;
--dxbl-text-edit-btn-color: var(--sidebar-text-placeholder);
--dxbl-text-edit-btn-image-color: var(--sidebar-text-placeholder);
--dxbl-text-edit-btn-hover-bg: transparent;
--dxbl-text-edit-btn-hover-color: var(--sidebar-text-on-dark);
--dxbl-text-edit-btn-hover-image-color: var(--sidebar-text-on-dark);
}
/* Bouton de recherche natif (dxbl-btn-outline-secondary) : neutralise
l'outline pour qu'il se fonde dans le champ teal. */
.sidebar .dxbl-text-edit .dxbl-btn-icon {
border-color: transparent;
background: transparent;
--dxbl-btn-color: var(--sidebar-text-placeholder);
}
/* Maquette : texte à GAUCHE, loupe à DROITE. Le champ natif rend le bouton
loupe AVANT l'input -> on réordonne (le conteneur .dxbl-text-edit est flex). */
.sidebar .dxbl-text-edit .dxbl-text-edit-input { order: 1; }
.sidebar .dxbl-text-edit .dxbl-btn-icon { order: 2; }
/* Fond du champ au survol (le thème n'expose pas de variable de fond hover). */
.sidebar .dxbl-text-edit:hover {
--dxbl-text-edit-bg: var(--sidebar-field-surface-hover);
}
/* ── GARDE (cf. EXCEPTION en-tête) ──────────────────────────────────
Le thème applicatif (app-theme.css) pose des propriétés
en dur avec !important sur les champs globaux (.dxbl-text-edit, input…),
ce qui repassait le champ de la sidebar sur fond blanc malgré les
variables ci-dessus. On ré-impose ici l'apparence en propriétés directes,
à spécificité supérieure (0,2,0 > 0,1,0) : gagne quel que soit l'ordre. */
.sidebar .dxbl-text-edit,
.sidebar .dxbl-input-editor,
.sidebar input[type="text"],
.sidebar input[type="search"] {
background-color: var(--sidebar-field-surface) !important;
border-color: var(--sidebar-field-border) !important;
color: var(--sidebar-text-on-dark) !important;
border-radius: var(--sidebar-radius-s) !important;
font-family: var(--sidebar-font-family) !important;
font-size: var(--sidebar-font-size-m) !important; /* 14px (maquette) */
}
.sidebar .dxbl-text-edit:hover {
background-color: var(--sidebar-field-surface-hover) !important;
border-color: var(--sidebar-field-border-hover) !important;
}
/* Pas de changement de couleur de bordure au clic/focus : on garde la
bordure teal par défaut (la maquette ne prévoit pas d'état focus coloré). */
.sidebar .dxbl-text-edit:focus-within,
.sidebar .dxbl-text-edit.dx-state-focused {
border-color: var(--sidebar-field-border) !important;
box-shadow: none !important;
}
/* Input réel : fond transparent (le fond est porté par le conteneur).
padding-left : la maquette inset le texte de 10px (--space/m) ; sans ça le texte
« Rechercher » est collé au bord gauche du champ. */
.sidebar .dxbl-text-edit-input {
background: transparent !important;
color: var(--sidebar-text-on-dark) !important;
font-family: var(--sidebar-font-family) !important;
padding-left: var(--sidebar-space-m) !important; /* 10px */
}
/* Aucun contour/ombre/bordure de focus sur l'input réel ni sur le bouton loupe.
Le thème global (app-theme.css §14) applique border-color: primary sur
input[type=search]:focus -> c'est ce liseré teal interne qui apparaissait au
clic. On force la bordure transparente sur l'input (le seul cadre visible est
celui du conteneur .dxbl-text-edit). */
.sidebar .dxbl-text-edit-input,
.sidebar .dxbl-text-edit-input:focus,
.sidebar .dxbl-text-edit-input:focus-visible,
.sidebar input[type="search"]:focus,
.sidebar .dxbl-text-edit .dxbl-btn-icon:focus,
.sidebar .dxbl-text-edit .dxbl-btn-icon:focus-visible {
border-color: transparent !important;
outline: none !important;
box-shadow: none !important;
}
/* Placeholder « Recherche » : blanc (Figma le rend en #fffefd). L'écart avec
l'ancien charcoal-40 (#e1e1e0) est minime sur le teal ; on s'aligne exactement.
Réversible -> repasser sur var(--sidebar-text-placeholder) si un placeholder
plein blanc se confond trop avec une valeur saisie. */
.sidebar .dxbl-text-edit-input::placeholder {
color: var(--sidebar-text-on-dark) !important;
}
/* Bouton loupe natif : se fond dans le champ (pas de boîte claire). */
.sidebar .dxbl-text-edit .dxbl-text-edit-btn,
.sidebar .dxbl-text-edit .dxbl-btn-icon,
.sidebar .dxbl-text-edit .dxbl-btn {
background: transparent !important;
border-color: transparent !important;
color: var(--sidebar-text-placeholder) !important;
}
.sidebar .dxbl-text-edit .dxbl-text-edit-btn:hover,
.sidebar .dxbl-text-edit .dxbl-btn-icon:hover,
.sidebar .dxbl-text-edit .dxbl-btn:hover {
background: rgba(255, 255, 255, 0.10) !important;
color: var(--sidebar-text-on-dark) !important;
}
/* ============================================================
4. ARBRE DE NAVIGATION (items, états, séparateurs, puces)
============================================================ */
/* Les variables --dxbl-treeview-* sont posées SUR LA RACINE du composant
(.dxbl-treeview), pas sur l'ancêtre .sidebar : sinon DevExpress les
redéfinit sur sa propre racine et sa déclaration l'emporte (sélection qui
restait bleue). On y met aussi le fond transparent pour révéler le teal. */
.sidebar .dxbl-treeview {
background: transparent;
/* Items */
--dxbl-treeview-item-bg: transparent;
--dxbl-treeview-item-color: var(--sidebar-nav-item-text);
--dxbl-treeview-item-border-radius: var(--sidebar-radius-s);
--dxbl-treeview-font-family: var(--sidebar-font-family);
--dxbl-treeview-font-size: var(--sidebar-font-size-m); /* 14px (maquette) */
/* Espacements maquette */
/* Écart vertical entre items = 8px (maquette). LA bonne variable DevExpress est
--dxbl-treeview-item-spacing (rendue en `padding-bottom` sur CHAQUE .dxbl-treeview-item-content) ;
l'ancien --dxbl-treeview-item-spacing-y N'EXISTE PAS dans le thème Fluent -> il était inerte et
l'écart restait au défaut (--dxds-spacing-20 = 2px). Ce padding-bottom sépare AUSSI le titre de
module de sa 1ʳᵉ sous-page -> les 8px « nom du module → 1ʳᵉ page » sont couverts par la même règle. */
--dxbl-treeview-item-spacing: var(--sidebar-space-s); /* 8px entre items ET module → 1ʳᵉ page */
/* Marge BASSE du champ de recherche natif (entre « Recherche » et le 1ᵉʳ item « Accueil ») = 8px,
comme l'écart inter-items. Le défaut DevExpress (--dxbl-treeview-navigation-filter-bottom-spacing-m
= spacing-80, 0.5rem ≈ 8px MAIS s'ajoutait à d'autres marges -> écart visuel ~16px). On force 8px. */
--dxbl-treeview-navigation-filter-bottom-spacing: var(--sidebar-space-s);
--dxbl-treeview-image-spacing: 5px; /* gap icône ↔ texte (5px) */
--dxbl-treeview-text-padding-y: var(--sidebar-space-s); /* padding vertical item */
--dxbl-treeview-item-content-indent: 0; /* indentation par niveau ANNULÉE : retour designer = items
de même TAILLE (largeur) quel que soit le niveau. Les sous-pages restent repérables par leur PUCE
(cf. règle .dxbl-treeview-item-container::before), pas par un retrait qui les rétrécirait. */
/* Hover (fond lime/10, contenu teal) */
--dxbl-treeview-item-hover-bg: var(--sidebar-nav-item-hover-surface);
--dxbl-treeview-item-hover-color: var(--sidebar-nav-item-hover-text);
/* Sélection (page active) = pastille lime, texte teal */
--dxbl-treeview-item-selection-bg: var(--sidebar-nav-item-selected-surface);
--dxbl-treeview-item-selection-color: var(--sidebar-nav-item-selected-text);
--dxbl-treeview-item-selection-focused-color: var(--sidebar-nav-item-selected-text);
--dxbl-treeview-item-active-bg: var(--sidebar-nav-item-selected-surface);
--dxbl-treeview-item-active-color: var(--sidebar-nav-item-selected-text);
--dxbl-treeview-item-active-focused-bg: var(--sidebar-nav-item-selected-surface);
/* Bouton d'expansion (chevron). Au survol/sélection le fond passe en lime clair :
le chevron doit donc devenir teal (un chevron blanc serait invisible sur lime). */
--dxbl-treeview-btn-color: var(--sidebar-text-placeholder);
--dxbl-treeview-btn-hover-color: var(--sidebar-nav-item-selected-text);
--dxbl-treeview-btn-bg: transparent;
--dxbl-treeview-btn-hover-bg: transparent;
}
/* STRUCTURE (maquette) : niveau 1 = catégories/séparateurs (gris, sans icône) ;
niveau 2 = items à ICÔNE (blanc) ; niveau 3+ = sous-items à PUCE (gris).
Sous-items niveau 3+ : texte atténué au lieu du blanc.
Isolement assumé : le TreeView Fluent n'expose pas de couleur par niveau. */
.sidebar .dxbl-treeview-item .dxbl-treeview-item .dxbl-treeview-item {
--dxbl-treeview-item-color: var(--sidebar-nav-subitem-text);
}
/* Sous-items niveau 3+ : puce ronde à la place de l'icône du modèle.
L'icône XAF est un — un élément REMPLACÉ :
::before/::after n'y fonctionnent pas et il n'a aucun enfant. On masque donc
l'![]()
et on dessine la puce sur le conteneur d'item (.dxbl-treeview-item-
container, un vrai /
), où les pseudo-éléments fonctionnent.
Cible : conteneur ni niveau 1 (séparateur) ni niveau 2 (item à icône). */
.sidebar .dxbl-treeview-item-container:not([aria-level="1"]):not([aria-level="2"]) > .xaf-nav-menu-item-icon {
/* !important : XAF impose l'affichage de l'icône via sa propre feuille. */
display: none !important;
}
.sidebar .dxbl-treeview-item-container:not([aria-level="1"]):not([aria-level="2"])::before {
content: "";
flex: 0 0 auto;
align-self: center;
/* On conserve l'emprise de l'icône (16px + marge) pour aligner le texte du
sous-item sous celui du niveau parent ; la puce de 4px est centrée via un
masque radial et hérite de la couleur de l'item (currentColor). */
width: 16px;
height: 16px;
margin-right: var(--sidebar-space-s); /* 8px */
background-color: currentColor;
-webkit-mask: radial-gradient(circle at center, #000 2px, transparent 2.5px);
mask: radial-gradient(circle at center, #000 2px, transparent 2.5px);
}
/* ----- Catégories = séparateurs non cliquables (façon maquette) -------------
Les groupes de 1er niveau deviennent de simples titres de section gris : pas
d'icône, pas de chevron, pas de surface de survol. Le niveau 1 = enfant direct
du . Ils sont maintenus dépliés par NavigationMenuController
(dépliage CSS impossible : DevExpress ne rend pas dans le DOM les enfants d'une
catégorie repliée -> rien à révéler côté CSS). */
.sidebar ul[data-is-root] > .dxbl-treeview-item.has-children > .dxbl-treeview-item-content {
background: transparent !important;
/* Maquette : l'écart avant un titre de section = 8px, soit l'espacement standard
entre items (--dxbl-treeview-item-spacing). On n'ajoute donc PAS de marge/padding
supplémentaire (un margin-top:12px + padding-top:4px éloignait trop, ex. Accueil
très loin d'« Exploitation »). */
margin-top: 0;
padding-top: 0;
}
.sidebar ul[data-is-root] > .dxbl-treeview-item.has-children > .dxbl-treeview-item-content .xaf-nav-link span {
color: var(--sidebar-nav-section-text) !important;
font-size: var(--sidebar-font-size-xs); /* 10px, façon maquette */
font-weight: 400;
}
/* Pas d'icône (dossier) ni de chevron sur les séparateurs. */
.sidebar ul[data-is-root] > .dxbl-treeview-item.has-children > .dxbl-treeview-item-content > .dxbl-treeview-item-container > .xaf-nav-menu-item-icon,
.sidebar ul[data-is-root] > .dxbl-treeview-item.has-children > .dxbl-treeview-item-content > .dxbl-btn {
display: none !important;
}
/* Séparateurs : pas de surbrillance au survol (ce sont des titres). Scopé à
`.has-children` pour ne PAS toucher Accueil (niveau 1 sans enfants). */
.sidebar ul[data-is-root] > .dxbl-treeview-item.has-children > .dxbl-treeview-item-content > .dxbl-treeview-item-container,
.sidebar ul[data-is-root] > .dxbl-treeview-item.has-children > .dxbl-treeview-item-content > .dxbl-treeview-item-container:hover {
background: transparent !important;
/* Titres de section (validé designer) : AUCUNE interaction, NON repliables. Le
clic sur la ligne repliait le groupe (le chevron est masqué mais le conteneur
agissait encore comme bascule) -> pointer-events:none rend le titre totalement
inerte : plus aucun clic ne passe, donc plus de repli, et curseur normal au survol. */
pointer-events: none !important;
cursor: default !important;
/* Un titre de catégorie est un simple LABEL : il ne doit PAS hériter du gabarit des items
cliquables (min-height 35px + 8px de padding vertical, pensés pour les pages/sous-pages).
Sans ce reset, le bloc « Exploitation » faisait ~43px de haut pour un texte de ~15px.
On le laisse hugger son texte ; l'écart de 8px avant l'item suivant vient de
--dxbl-treeview-item-spacing (padding-bottom du item-content), conservé. */
min-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Pas de soulignement sur les items de nav. GOTCHA CSS : les items navigables
sont des (.dxbl-treeview-item-container) ; un `text-decoration:underline`
porté par le est peint à travers ses descendants et ne peut PAS être
annulé sur l'enfant -> il FAUT neutraliser sur le lui-même (et au survol). */
.sidebar .dxbl-treeview-item-container,
.sidebar .dxbl-treeview-item-container:hover,
.sidebar .dxbl-treeview-item-container:focus,
.sidebar .xaf-nav-link,
.sidebar .xaf-nav-link span,
.sidebar .xaf-nav-link:hover,
.sidebar .xaf-nav-link:hover span {
text-decoration: none !important;
}
/* Chevron d'expansion à DROITE de l'item (façon maquette) au lieu de la gauche.
Le bouton est le .dxbl-btn enfant direct du contenu d'item.
GARDE : le reset bouton global d'app-theme.css (section 4) applique
`box-shadow`, `border-radius` et `padding` en `!important` à TOUT `.dxbl-btn`.
Sur le chevron d'expansion, combiné au fond/bordure par défaut du bouton,
cela dessine une boîte blanche à ombre sur le teal de la sidebar. La variable
`--dxbl-treeview-btn-bg: transparent` ne peut pas battre ces propriétés posées
en dur -> on ré-impose un bouton nu (transparent, sans bordure ni ombre). */
.sidebar .dxbl-treeview-item-content > .dxbl-btn,
.sidebar .dxbl-treeview-item-content > .dxbl-btn:hover,
.sidebar .dxbl-treeview-item-content > .dxbl-btn:focus,
.sidebar .dxbl-treeview-item-content > .dxbl-btn:focus-visible,
.sidebar .dxbl-treeview-item-content > .dxbl-btn:active,
.sidebar .dxbl-treeview-item-content > .dxbl-btn.dx-state-active {
order: 10;
margin-left: auto;
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Icône chevron à 12×12 (maquette) : le reset bouton global d'app-theme.css
force `.dxbl-btn .dxbl-image` à 16px en `!important` -> on redimensionne ici.
Le chevron RESTE visible ; il pointe vers le bas quand le groupe est replié,
vers le haut quand il est déplié. */
.sidebar .dxbl-treeview-item-content > .dxbl-btn .dxbl-image {
width: 12px !important;
height: 12px !important;
flex-shrink: 0;
aspect-ratio: 1 / 1;
}
/* Couleur du chevron à l'état normal : BLANC, visible sur le fond teal de la
sidebar (sans fond de bouton, un chevron quasi-blanc/gris clair par défaut
se perdait -> le bouton semblait disparaître). L'icône est un SVG