/* Copyright (C) 2026 TAD IT Services * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * ============================================================================ * MboaPaie — Design system « humain » * Charte chaleureuse, professionnelle et accessible. Tokens partagés par toutes * les pages du module et par lib/mboapaie_ui.lib.php. Responsive, dark-mode ready, * focus visibles, transitions douces (respecte prefers-reduced-motion). * ============================================================================ */ :root { /* Marque — verts chaleureux (feuille / croissance). Accents conserves : ils portent leur propre texte blanc, donc restent lisibles sur n'importe quel theme (clair comme sombre). Les liens suivent le theme Dolibarr. */ /* Accent principal : suit le theme Dolibarr actif. Priorite a la marque du * theme ergonova (--ergo-brand-primary) s'il est actif, puis a la couleur * d'action / de lien standard, et enfin repli sur le vert de marque si aucun * theme ne definit rien. Les boutons/KPI/focus ne sont donc plus figes. */ /* v1.25.0 : l'ACCENT suit desormais EXCLUSIVEMENT le theme Dolibarr natif * (--butactionbg / couleur d'action). Plus aucune couleur d'accent figee. * Statuts (amber/red/brick) et surbrillances d'audit restent des variables * SEMANTIQUES MboaPaie centralisees (seul endroit ou une valeur est definie). */ --mbp-green: var(--butactionbg, var(--colortextlink, var(--colortext))); --mbp-green-600: var(--butactionbghover, var(--butactionbg, var(--colortextlink))); --mbp-on-accent: var(--textbutaction, var(--colorbacktabcard1)); /* Teinte claire de l'accent : derivee du theme via color-mix (repli sur un * vert tres pale si le navigateur ne supporte pas color-mix). Suit donc le * theme actif (turquoise pale sous ergonova). */ --mbp-green-050: color-mix(in srgb, var(--mbp-green) 12%, var(--mbp-surface)); /* ============================================================ * EXCEPTION UNIQUE (v1.25.1) : les INDICATEURS DE STATUT propres au module * (validé / en attente / rejeté = ok / avertissement / danger) conservent des * couleurs FIXES attribuees. C'est le SEUL endroit du module ou une couleur est * ecrite en dur, et uniquement pour porter un SENS metier stable quel que soit * le theme. Sont FIXES ici : statuts (ok/warn/danger) + surbrillances d'audit. * TOUT le reste (accent, neutres, ombres) herite dynamiquement du theme ACTIF. * ============================================================ */ --mbp-amber: #F2B705; --mbp-amber-050: #FDF4DA; --mbp-brick: #B3541E; --mbp-brick-050: #F7E9DF; --mbp-red: #C4453B; --mbp-red-050: #F8E6E4; /* v1.99.23 : COULEURS DE FORMAT (icones d'export). Meme logique que les statuts * ci-dessus : un pictogramme de FORMAT porte un sens stable, INDEPENDANT du theme * (un fichier Excel est vert partout, un CSV vert plus fonce, JSON/code indigo). * Ce sont donc des tokens de charte FIXES, definis ici (seul endroit admis). */ --mbp-fmt-excel: #217346; --mbp-fmt-csv: #157347; --mbp-fmt-code: #3F51B5; /* v1.99.27 : ÉCHELLE TYPOGRAPHIQUE (charte rédaction/typo). Source UNIQUE, en rem * (suit la base du thème, accessible). Tout composant référence un token, jamais * une valeur en dur. Cf. sonde mbp_diag_scan_typo. */ /* v1.99.79 : ÉCHELLE ALIGNÉE SUR DOLIBARR NATIF (eldy). Le corps (14), les titres (16) * et les micro (12) étaient déjà natifs ; les libellés (→14), les grands chiffres (→25) * et les pictos (→16) reviennent aux dimensions natives. Style (couleurs/arrondi/dark) * conservé — seules les TAILLES changent. */ --mbp-fs-display: 25px; /* grands chiffres KPI (natif : 25px) */ --mbp-fs-section: 16px; /* titre de section / colonne (natif) */ --mbp-fs-body: 14px; /* corps, cellules, boutons (= base native) */ --mbp-fs-label: 14px; /* libellés de formulaire (natif = base) */ --mbp-fs-help: 13px; /* aides, intros (natif) */ --mbp-fs-micro: 12px; /* badges, légendes (natif) */ --mbp-fs-icon: 16px; /* pictos (natif : ~1em inline) */ --mbp-fs-newbtn: 28px; /* ⊕ « Nouveau » icône-seule (aligné sur MEDU) */ /* v1.99.79 : HAUTEUR DE CONTRÔLE unique alignée sur le natif (boutons/champs/selects/ * boutons-icônes). Remplace les 34px/30px dispersés → rendu compact « Dolibarr natif ». * Les lignes de tableau se resserrent d'elles-mêmes (contrôles plus courts). */ --mbp-ctl-h: 28px; /* hauteur native d'un contrôle (input/select/bouton) */ --mbp-ctl-lh: 26px; /* interligne interne pour centrer le libellé (h - bordures) */ /* v1.99.209 : padding des lignes de fiche EN LECTURE = hauteur NATIVE Dolibarr. * Le cœur applique « table.border td { padding: 2px } » aux fiches (tableforfield) : * on reprend exactement cette hauteur verticale (2px), en gardant un retrait * horizontal confortable pour l'alignement libellé/valeur. Token unique → * généralisation à TOUTES les fiches (une seule source de vérité). */ --mbp-fiche-row-pad: 2px 16px; /* v1.99.80 : STYLE DE BOUTON NEUTRE (comme le natif : fond clair, bordure fine, encre * foncée). Demande user — TOUS les boutons d'action, sans exception, portent ce style * (fini l'aplat d'accent). Dérivé du thème (theme-aware, dark-mode). La SUPPRESSION * garde son rouge (signal de sécurité, hors périmètre « couleur accent »). */ --mbp-btn-bg: var(--mbp-surface); --mbp-btn-ink: var(--mbp-ink); --mbp-btn-border: var(--mbp-line-strong); --mbp-btn-bg-hover: var(--mbp-grey-050); /* v1.99.95 : INFOBULLE MAISON UNIQUE (centralisée) — demande user : FOND BLANC, * TEXTE NOIR (+ bordure/ombre pour lisibilité). Seul endroit où la couleur est définie. * Largeur = contenu (capée), positionnée AU-DESSUS du déclencheur (JS). */ --mbp-tip-bg: #ffffff; --mbp-tip-ink: #1a1a1a; --mbp-tip-border: #d0d5dd; /* Neutres : herites du THEME Dolibarr actif (var --color*), avec repli sur l'ancienne palette creme si le theme ne definit pas la variable. C'est ce qui fait que MboaPaie epouse le theme (clair / sombre / couleurs entreprise) au lieu d'imposer un ilot creme fige. */ --mbp-ink: var(--colortext); --mbp-muted: color-mix(in srgb, var(--colortext) 62%, var(--colorbackbody)); --mbp-line: var(--tableborder, color-mix(in srgb, var(--colortext) 15%, var(--colorbackbody))); --mbp-bg: var(--colorbackbody); --mbp-surface: var(--colorbacktabcard1); --mbp-surface-2: var(--colorbacklinepair1); /* Formes & profondeur */ --mbp-radius: 2px; --mbp-radius-sm: 2px; --mbp-radius-btn: 8px; /* rayon des BOUTONS de la charte (façon démo, nettement arrondi) */ /* v1.90.0 : rayon des CHAMPS (saisies + listes) — arrondi « 4 côtés partout » * demandé sur la maquette. Dérivé, pas figé (px de forme, pas de couleur). */ --mbp-field-radius: 8px; /* v1.99.82 : bordure PLEINE et visible des zones de saisie (le natif ne pose qu'un * fin trait bas → champs difficiles à repérer). Dérivée du thème. */ --mbp-field-border: var(--mbp-line-strong); /* Rayon des cartes de la couche « mbp-ui » (identité premium, dérivée du thème). */ --mbp-radius-lg: 12px; --mbp-shadow: 0 1px 2px color-mix(in srgb, var(--colorblack) 5%, transparent), 0 6px 20px color-mix(in srgb, var(--colorblack) 6%, transparent); --mbp-shadow-sm: 0 1px 2px color-mix(in srgb, var(--colorblack) 6%, transparent); --mbp-ring: 0 0 0 3px color-mix(in srgb, var(--mbp-green) 25%, transparent); --mbp-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* v1.24.2 : jetons issus de la migration des couleurs FIGEES (audit couleurs). Valeurs identiques aux anciens litteraux -> rendu inchange, theming centralise. */ --mbp-white: var(--colorwhite); --mbp-badge-bg: color-mix(in srgb, var(--colortext) 10%, var(--colorbacktabcard1)); --mbp-badge-ink: var(--colortext); --mbp-amber-ink: #8A6D00; --mbp-red-ink: #9E362E; --mbp-grey-050: color-mix(in srgb, var(--colortext) 8%, var(--colorbacktabcard1)); --mbp-line-strong: color-mix(in srgb, var(--mbp-line) 70%, var(--colortext)); --mbp-line-soft: color-mix(in srgb, var(--mbp-line) 60%, var(--colorbackbody)); --mbp-muted-soft: color-mix(in srgb, var(--colortext) 42%, var(--colorbackbody)); --mbp-neutral-800: var(--colortext); --mbp-neutral-700: color-mix(in srgb, var(--colortext) 85%, var(--colorbackbody)); --mbp-neutral-550: var(--mbp-muted); --mbp-neutral-500: var(--mbp-muted-soft); --mbp-surface-alt: var(--colorbacklinepair1); --mbp-surface-alt2: var(--colorbacktabcard1); --mbp-green-tint: color-mix(in srgb, var(--mbp-green) 8%, var(--mbp-surface)); --mbp-danger-strong: #C0392B; --mbp-shadow-tint: color-mix(in srgb, var(--colorblack) 6%, transparent); /* Bannieres des outils de diagnostic (audit alignement / couleurs / bascule). * v1.99.29 (audit conformite mbp-ui) : ces fonds/bordures/encres etaient FIGES * en clair (#EEF7F1...) et restaient donc clairs sous un theme Dolibarr sombre, * creant un ilot incoherent. Ils sont desormais DERIVES du theme actif via * color-mix sur --colorbackbody / --colortext, tout en conservant la TEINTE * SEMANTIQUE stable (vert=ok, ambre=warn, rouge=err). Suivent le mode sombre. */ --mbp-ok-bg: color-mix(in srgb, var(--mbp-green) 12%, var(--colorbackbody)); --mbp-ok-border: color-mix(in srgb, var(--mbp-green) 34%, var(--colorbackbody)); --mbp-err-bg: color-mix(in srgb, var(--mbp-red) 12%, var(--colorbackbody)); --mbp-err-border: color-mix(in srgb, var(--mbp-red) 38%, var(--colorbackbody)); --mbp-err-ink: color-mix(in srgb, var(--mbp-red) 72%, var(--colortext)); --mbp-warn-bg: color-mix(in srgb, var(--mbp-amber) 14%, var(--colorbackbody)); --mbp-warn-border: color-mix(in srgb, var(--mbp-amber) 42%, var(--colorbackbody)); --mbp-warn-ink: color-mix(in srgb, var(--mbp-amber) 62%, var(--colortext)); --mbp-ink-strong: var(--colortext); --mbp-shadow-strong: color-mix(in srgb, var(--colorblack) 30%, transparent); --mbp-flag-height: #E69500; --mbp-flag-left: #7A3FB5; --mbp-flag-gap: #2A8A8A; --mbp-flag-indent: #C0398B; --mbp-flag-text: #D81B60; --mbp-flag-list: #DD3333; /* v1.99.152 — COUCHE « HYBRIDE SaaSFabric » : langage visuel porté (pastille d'en-tête, * cartes KPI, pills sémantiques, cartes à en-tête, en-têtes de liste en capitales douces). * L'ACCENT reste var(--mbp-green) = thème actif (règle anti-hardcode MboaPaie conservée). * success/info FIXES rejoignent les statuts déjà figés (amber/red) — seul endroit admis. * Toutes les TAILLES passent par des tokens --mbp-fs-* (contrat ui_regressions). */ --mbp-fs-h1: 21px; /* titre de page (pastille header) */ --mbp-radius-card: 9px; /* cartes & tuiles KPI hybrides */ --mbp-radius-pico: 10px; /* pastille-icône d'en-tête */ --mbp-pico-sm: 34px; /* pastille-icône compacte (en-tête de modale) */ --mbp-radius-pill: 20px; /* pills sémantiques */ --mbp-success: #16A34A; --mbp-success-050: color-mix(in srgb, var(--mbp-success) 12%, var(--mbp-surface)); --mbp-success-ink: color-mix(in srgb, var(--mbp-success) 74%, var(--colortext)); --mbp-info: #2563EB; --mbp-info-050: color-mix(in srgb, var(--mbp-info) 12%, var(--mbp-surface)); --mbp-info-ink: color-mix(in srgb, var(--mbp-info) 74%, var(--colortext)); --mbp-hy-shadow: 0 1px 2px color-mix(in srgb, var(--colorblack) 6%, transparent), 0 2px 8px color-mix(in srgb, var(--colorblack) 7%, transparent); } /* v1.99.35 : coquille « .mbp-page » RETIREE (code mort — conteneur supprime du HTML en v1.26.3, passage 100 % natif). Rien a remplacer : le rendu est porte par « .mbp-ui ». */ /* En-tete de page (titre + sous-titre + actions) */ /* ---- Titre de section -------------------------------------------------- */ /* Icone d'en-tete : taille maitrisee (evite le picto surdimensionne), alignee au titre. */ /* ---- Cartes ------------------------------------------------------------ */ .mbp-card { background: var(--mbp-surface); border: 1px solid var(--mbp-line); border-radius: var(--mbp-radius-card); box-shadow: var(--mbp-shadow-sm); padding: 18px 18px; margin: 0 0 16px; } .mbp-card h3 { margin: 0 0 10px; font-size: var(--mbp-fs-section); font-weight: 700; } /* Grille responsive de cartes / KPIs */ /* ---- Tuiles KPI -------------------------------------------------------- */ /* ---- Badges (pilules teintees, douces) --------------------------------- */ /* ---- Boutons ----------------------------------------------------------- */ .mbp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; border-radius: var(--mbp-radius-btn); font-family: inherit; font-size: var(--mbp-fs-body); font-weight: 650; line-height: 1.2; border: 1px solid var(--mbp-line); background: var(--mbp-surface); color: var(--mbp-ink); cursor: pointer; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; } .mbp-btn:hover { transform: translateY(-1px); box-shadow: var(--mbp-shadow-sm); text-decoration: none; } .mbp-btn:active { transform: translateY(0); } .mbp-btn:focus-visible { outline: none; box-shadow: var(--mbp-ring); } /* v1.99.182 : SYSTÈME DE BOUTONS de la charte (démo gabarit F validée) — 4 variantes, * émises exclusivement par mbp_btn()/mbp_submit()/mbp_action_link(). Hauteur alignée * sur les contrôles natifs (--mbp-ctl-h), icône à gauche, jamais de majuscules. */ .mbp-ui .mbp-btn { height: var(--mbp-ctl-h); padding: 0 13px; box-sizing: border-box; vertical-align: middle; } .mbp-ui .mbp-btn .fas { font-size: var(--mbp-fs-icon); } .mbp-ui .mbp-btn--sm { height: calc(var(--mbp-ctl-h) - 6px); padding: 0 9px; font-size: var(--mbp-fs-help); } .mbp-ui .mbp-btn--secondary:hover { border-color: var(--mbp-green); color: var(--mbp-green); transform: none; box-shadow: none; } /* v1.99.219 : variante `primary` NEUTRALISÉE — application de la loi v1.99.80 * (« fini l'aplat d'accent sur TOUS les boutons, sans exception ; seule la SUPPRESSION * garde le rouge »). mbp_submit défaut = primary : sans ceci, les 51 submits du module * s'affichaient en aplat accent (violet) → aspect « natif Dolibarr ». Rendu identique à * la base neutre ; léger relief accent au survol (affordance). */ .mbp-ui .mbp-btn--primary { background: var(--mbp-surface); border-color: var(--mbp-line); color: var(--mbp-ink); } .mbp-ui .mbp-btn--primary:hover { border-color: var(--mbp-green); color: var(--mbp-green); transform: none; box-shadow: none; } .mbp-ui .mbp-btn--danger { color: var(--mbp-danger-strong); border-color: color-mix(in srgb, var(--mbp-danger-strong) 45%, var(--mbp-line)); } .mbp-ui .mbp-btn--danger:hover { background: color-mix(in srgb, var(--mbp-danger-strong) 8%, var(--mbp-surface)); border-color: var(--mbp-danger-strong); transform: none; box-shadow: none; } .mbp-ui .mbp-btn--ghost { border-color: transparent; background: none; color: var(--mbp-muted); } .mbp-ui .mbp-btn--ghost:hover { color: var(--mbp-green); transform: none; box-shadow: none; } .mbp-ui .mbp-btn[aria-disabled="true"], .mbp-ui .mbp-btn.mbp-busy { opacity: .45; pointer-events: none; } button.mbp-btn { font-family: inherit; } /* « Nouveau » = icône seule possédée (identique au déclencheur historique). */ /* ⊕ « Nouveau » = ICÔNE SEULE accent (aligné sur MEDU) : pas de fond/boîte, disque « + » * plus grand (--mbp-fs-newbtn), couleur = accent du thème. */ .mbp-ui .mbp-newbtn { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: var(--mbp-ctl-h); padding: 0; background: none; border: 0; color: var(--mbp-green); text-decoration: none !important; vertical-align: middle; line-height: 1; } .mbp-ui .mbp-newbtn .fas { font-size: var(--mbp-fs-newbtn); line-height: 1; } .mbp-ui .mbp-newbtn:hover { opacity: .7; } /* Deux boutons consécutifs de la charte : espacement horizontal cohérent partout. */ .mbp-ui .mbp-btn + .mbp-btn { margin-left: 8px; } /* v1.99.184 : INTERRUPTEUR possédé (mbp_toggle) — case native habillée en switch. */ .mbp-ui .mbp-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; vertical-align: middle; } .mbp-ui .mbp-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .mbp-ui .mbp-switch-track { position: relative; width: 38px; height: 22px; flex: none; border-radius: 11px; background: var(--mbp-line-strong); transition: background .15s ease; } .mbp-ui .mbp-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: var(--mbp-shadow-sm); } .mbp-ui .mbp-switch input:checked + .mbp-switch-track { background: var(--mbp-green); } .mbp-ui .mbp-switch input:checked + .mbp-switch-track::after { transform: translateX(16px); } .mbp-ui .mbp-switch input:focus-visible + .mbp-switch-track { box-shadow: var(--mbp-ring); } .mbp-ui .mbp-switch-label { font-size: var(--mbp-fs-body); color: var(--mbp-ink); } /* v1.99.184 : MENU « … » possédé (mbp_menu_more) —
natif, sans JS. */ .mbp-ui .mbp-more { position: relative; display: inline-block; } .mbp-ui .mbp-more > summary { list-style: none; } .mbp-ui .mbp-more > summary::-webkit-details-marker { display: none; } .mbp-ui .mbp-more-pop { position: absolute; top: calc(var(--mbp-ctl-h) + 4px); right: 0; z-index: 30; min-width: 190px; padding: 5px; display: flex; flex-direction: column; gap: 2px; background: var(--mbp-surface); border: 1px solid var(--mbp-line); border-radius: var(--mbp-radius-card); box-shadow: 0 8px 26px color-mix(in srgb, var(--colorblack) 14%, transparent); } .mbp-ui .mbp-more-pop .mbp-btn { width: 100%; justify-content: flex-start; margin-left: 0; } /* v1.99.200 : RECHERCHE DICTIONNAIRE possédée (mbp_dict_search) — barre entre le * formulaire d'ajout et le tableau, filtrage instantané côté client. */ .mbp-ui .mbp-dsearch-wrap { display: flex; align-items: center; gap: 10px; background: var(--mbp-surface); border: 1px solid var(--mbp-line); border-radius: var(--mbp-radius-card); box-shadow: var(--mbp-shadow-sm); padding: 10px 14px; margin: 0 0 14px; } .mbp-ui .mbp-dsearch-wrap > .fa-search { color: var(--mbp-muted); font-size: var(--mbp-fs-icon); } .mbp-ui .mbp-dsearch { flex: 1 1 200px; min-width: 0; height: var(--mbp-ctl-h); box-sizing: border-box; border: 1px solid var(--mbp-line); border-radius: var(--mbp-radius-btn); background: var(--mbp-surface); color: var(--mbp-ink); padding: 0 11px; font-size: var(--mbp-fs-help); } .mbp-ui .mbp-dsearch:focus { outline: none; border-color: var(--mbp-green); box-shadow: var(--mbp-ring); } .mbp-ui .mbp-dsearch-count { font-size: var(--mbp-fs-help); color: var(--mbp-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* v1.99.184 : ÉTAT VIDE possédé (mbp_empty_state) — encart pointillé + CTA. */ .mbp-ui .mbp-empty { border: 1px dashed var(--mbp-line-strong); border-radius: var(--mbp-radius-card); padding: 22px 16px; text-align: center; color: var(--mbp-muted); } .mbp-ui .mbp-empty-ico { font-size: var(--mbp-fs-display); color: var(--mbp-muted-soft); display: block; margin-bottom: 8px; } .mbp-ui .mbp-empty-msg { font-size: var(--mbp-fs-body); margin-bottom: 10px; } .mbp-ui .mbp-empty-cta { display: flex; justify-content: center; } /* v1.35.3 : la surcouche d'en-tete .mbp-greenhead (qui FORCAIT le vert/accent de * charte sur les en-tetes de tableau) est SUPPRIMEE. Les en-tetes « liste_titre » * suivent desormais exclusivement le THEME actif choisi par l'utilisateur — plus * aucun forcage de couleur propre au module sur la structure. */ .mbp-btn[disabled], .mbp-btn.disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } /* v1.99.20 : la rustine « double fond » de 1.99.17 (.tabBar.tabBarWithBottom …) * est SUPPRIMÉE — code mort. La cause était traitée à la racine : les cartes sans * onglets passent maintenant en dol_get_fiche_head(..., -1) (classe .tabBar seule, * sans bande basse réservée). Plus aucun .tabBarWithBottom n'est émis par le module, * donc le sélecteur ne matchait plus rien. */ /* ---- Barre d'outils / filtres ----------------------------------------- */ .mbp-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; } .mbp-toolbar.mbp-card { padding: 12px 14px; } /* ---- Navigation de configuration (presente sur TOUTES les sous-pages) --- */ /* v1.99.35 : bloc « champs de formulaire coherents » scope « .mbp-page » RETIRE (code mort). L'arrondi charte des saisies est porte par « .mbp-ui input… » juste ci-dessous. */ /* v1.98.4 : ARRONDI DES CHAMPS DE SAISIE sous la classe body réelle « .mbp-ui » (le scope * historique « .mbp-page » a été retiré en v1.26.3, passage 100 % natif). Coins uniquement ; * bordure/padding restent au thème. Les listes select2 portent déjà leur propre arrondi ; * on aligne ici les champs texte/nombre/date. */ .mbp-ui input[type=text], .mbp-ui input[type=search], .mbp-ui input[type=number], .mbp-ui input[type=date], .mbp-ui input[type=email], .mbp-ui input[type=tel], .mbp-ui input[type=password], .mbp-ui input[type=url], .mbp-ui select, .mbp-ui textarea, .mbp-ui .flat:not([type=checkbox]):not([type=radio]) { border-radius: var(--mbp-field-radius); /* v1.99.82 : bordure pleine (remplace le seul trait bas natif) → zone de saisie * immédiatement identifiable. */ border: 1px solid var(--mbp-field-border) !important; background-color: var(--inputbackgroundcolor, var(--mbp-surface)); } /* v1.99.84 : LARGEURS ADAPTÉES AU CONTENU pour les champs à contenu BORNÉ (une saisie * nombre/date/téléphone n'a pas besoin de toute la largeur de la colonne). max-width → * on plafonne les champs trop larges sans empêcher une largeur explicite plus petite. * Les champs texte (contenu variable) ne sont pas touchés ici. */ .mbp-ui input[type=number] { max-width: 140px; } .mbp-ui input[type=date] { max-width: 175px; } .mbp-ui input[type=tel] { max-width: 210px; } /* Focus : accent + halo (repère clair du champ actif). */ .mbp-ui input[type=text]:focus, .mbp-ui input[type=search]:focus, .mbp-ui input[type=number]:focus, .mbp-ui input[type=date]:focus, .mbp-ui input[type=email]:focus, .mbp-ui input[type=tel]:focus, .mbp-ui input[type=password]:focus, .mbp-ui input[type=url]:focus, .mbp-ui textarea:focus, .mbp-ui .flat:not([type=checkbox]):not([type=radio]):focus { border-color: var(--mbp-green) !important; box-shadow: var(--mbp-ring); outline: none; } /* ---- Tableaux ---------------------------------------------------------- */ /* ---- Encart d'aide / info --------------------------------------------- */ /* ---- Etat vide (humain, encourageant) --------------------------------- */ /* ---- Avatar / initiales (humaniser les personnes) --------------------- */ /* ---- Fil d'aide / documentation --------------------------------------- */ /* NB v1.28.1 : l'accordeon du menu de gauche a ete SUPPRIME (JS + CSS) : * il interferait avec les menu managers type ergonova (panneau off-canvas, * etats replies persistants). Le menu est laisse 100% natif. */ /* ---- Responsive -------------------------------------------------------- */ @media (max-width: 640px) { .mbp-toolbar { flex-direction: column; align-items: stretch; } .mbp-toolbar .mbp-btn { width: 100%; } } /* ---- Compatibilite menu managers famille "remark" (revolutionpro, * ergonova...) : entree de menu MboaPaie. Ces templates attenuent les * modules qu'ils ne connaissent pas : ils appliquent * "filter: grayscale(1)" a l'icone (barre claire) et "brightness(0) invert(1) * + opacity: .5" (barre sombre), ce qui rend MboaPaie grise/delave alors que * les modules natifs restent nets. On remet l'entree a parite : * - barre claire : on annule le greyscale -> icone couleur, nette ; * - barre sombre : on garde le knockout blanc (contraste) mais pleine opacite ; * - texte : on n'impose PAS de couleur (pas de "inherit" qui capturait * l'accent turquoise) -> il herite du texte de menu standard. */ body .site-menu-icon.mainmenu.mboapaie { opacity: 1 !important; -webkit-filter: none !important; filter: none !important; } body .site-menubar-dark .site-menu-icon.mainmenu.mboapaie { opacity: 1 !important; } body .site-menu-item a[href*="mboapaie"], body .site-menu-item a[href*="mboapaie"] .site-menu-title { opacity: 1 !important; } /* ---- Icone MboaPaie dans la barre du HAUT (eldy natif, fond navy) -------- * Le menu haut eldy affiche l'icone du module en (object_mboapaie.png, * vert de marque). Sur le bandeau navy, on la passe en BLANC pour l'aligner sur * les icones natives (Accueil, Tiers...). Portee stricte a la barre .tmenu : la * carte module (fond blanc) et le menu gauche ergonova gardent l'icone en couleur. */ ul.tmenu li a[href*="mboapaie"] img, .tmenu a[href*="mboapaie"] img.pictofixedwidth { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } /* Pas de soulignage sur les entrees ET sous-entrees du menu de gauche * (rendu propre facon menu natif Dolibarr). */ #id-left a.vmenu, #id-left a.vmenu:hover, #id-left a.vsmenu, #id-left a.vsmenu:hover { text-decoration: none !important; } /* ---- Etats de chargement (js/mboapaie.js) ----------------------------- */ /* Bouton en cours de soumission : desactive visuellement + petit spinner. */ .mbp-btn.mbp-is-loading, button.mbp-is-loading, input.mbp-is-loading { position: relative; color: transparent !important; pointer-events: none; opacity: .8; } .mbp-is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: var(--mbp-green); animation: mbp-spin .6s linear infinite; } /* Squelette de contenu en attente (listes rafraichies en AJAX). */ .mbp-skeleton { height: 14px; margin: 8px 0; border-radius: var(--mbp-radius); background: linear-gradient(90deg, var(--mbp-surface-2) 25%, var(--mbp-line) 37%, var(--mbp-surface-2) 63%); background-size: 400% 100%; animation: mbp-shimmer 1.4s ease infinite; } @keyframes mbp-spin { to { transform: rotate(360deg); } } @keyframes mbp-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .mbp-is-loading::after { animation: none; } .mbp-skeleton { animation: none; } } /* ---- Emplacement de capture d'ecran reserve (manuel admin) ------------ */ /* ---- Accessibilite : mouvement reduit --------------------------------- */ @media (prefers-reduced-motion: reduce) { .mbp-btn { transition: none !important; } .mbp-btn:hover { transform: none; } } /* ---- Theme : heritage Dolibarr (clair / sombre / entreprise) ---------- */ /* Depuis v1.4.2, les neutres (fond, surface, texte, bordures) sont pilotes par les variables du theme Dolibarr actif (voir :root ci-dessus). Le module suit donc automatiquement le theme choisi par l'entreprise, y compris un theme sombre, sans ilot creme fige. Les accents verts de marque et les couleurs de statut (ambre/rouge) sont conserves car ils embarquent leur propre contraste de texte et restent lisibles quel que soit le fond. */ /* ============================================================ * Fiche employe (formulaire 2 colonnes) : lecture optimisee. * - AUCUNE bordure ni cadre (aspect epure). * - Libelles sur UNE seule ligne. * - Champs qui REMPLISSENT la largeur de la colonne. * - Zebrage discret + survol pour la lisibilite. * ============================================================ */ /* v1.99.34 : mbp-empform est desormais une CARTE (comme mbp-cform) — on ne coupe * plus la bordure/ombre de la TABLE (l'ancien !important la rendait plate alors que * mbp-cform etait cartee : 2 formulaires du module rendus differemment). On garde * seulement l'absence de bordure sur les cellules (le separateur est un filet fin). */ table.mbp-empform td, table.mbp-empform tr { border: none; } /* table-layout AUTO (v1.51.1) : la colonne libellé se dimensionne à son contenu * (voir bloc v1.51.1 plus bas) ; la cellule valeur prend tout le reste (width:100%), * ce qui borne la table à 100% de sa demi-colonne sans débordement. */ table.mbp-empform { border-collapse: collapse; width: 100%; table-layout: auto; } table.mbp-empform td { padding: 7px 10px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; } table.mbp-empform td:first-child { width: 40%; /* colonne libelle : proportion fixe et stable */ padding-right: 14px; color: var(--mbp-neutral-700); font-weight: 500; white-space: normal; /* une ligne au zoom normal ; retour propre si tres etroit */ word-break: break-word; } table.mbp-empform > tbody > tr:nth-child(even) { background: var(--mbp-surface-alt); } table.mbp-empform > tbody > tr:hover { background: var(--mbp-green-tint); } /* Les champs remplissent leur cellule sans jamais la depasser */ table.mbp-empform td:last-child input[type="text"], table.mbp-empform td:last-child input[type="email"], table.mbp-empform td:last-child select { width: 100%; max-width: 100%; box-sizing: border-box; } /* HAUTEUR UNIFORME de toutes les zones de saisie (texte, email, nombre, date, * telephone) ET des listes select2 -> rendu homogene facon Dolibarr. Une seule * valeur (30px) partagee par tous les controles du formulaire. */ table.mbp-empform td:last-child input[type="text"], table.mbp-empform td:last-child input[type="email"], table.mbp-empform td:last-child input[type="number"], table.mbp-empform td:last-child input[type="tel"], table.mbp-empform td:last-child input:not([type="file"]):not([type="checkbox"]):not([type="radio"]), table.mbp-empform td:last-child .select2-selection--single { height: var(--mbp-ctl-h) !important; box-sizing: border-box; vertical-align: middle; } table.mbp-empform td:last-child input:not([type="file"]):not([type="checkbox"]):not([type="radio"]) { padding-top: 3px; padding-bottom: 3px; line-height: normal; /* Meme retrait gauche que la valeur des listes (rendered padding-left:8px) * -> le texte des champs de saisie et des listes s'aligne exactement. * !important + bordure gauche figee a 1px : certains THEMES Dolibarr posent * sur input[type=text] un padding/bordure plus prioritaire, ce qui collait le * texte de saisie au bord (retrait < 8px) alors que la LISTE gardait ses 8px * -> decalage visible entre saisie et liste. On verrouille donc les deux * composantes du retrait (bordure + padding) pour un debut de texte identique. */ padding-left: 8px !important; border-left-width: 1px !important; box-sizing: border-box; } /* ============================================================ * CENTRAGE DES LISTES select2 SUR TOUTES LES PAGES DU MODULE. * La correction n'est plus limitee a la fiche employe : toute liste select2 * d'une page MboaPaie voit sa valeur centree verticalement (flex). Corrige * « la valeur des listes calee trop haut » partout, pas seulement ici. * ============================================================ */ /* v1.99.35 : reglages select2 scope « .mbp-page » RETIRES (code mort). Le padding de boite (0) et le retrait interieur (8px) sont portes globalement par « .mbp-ui .select2… » plus bas, et specifiquement par « table.mbp-empform … » pour la fiche salarie. */ /* v1.99.35 : regle « police identique saisies/listes » scope « .mbp-page » RETIREE (code mort). La couleur/police des valeurs select2 est portee par « .mbp-ui .select2… » plus bas. */ /* select2 : Dolibarr pose un style INLINE « width: 310px / 320.8px » (width:'resolve'). * On neutralise cette largeur figee sur TOUTES les variantes de conteneur select2 * (span.select2, .select2-container, l'enfant direct) pour que le champ epouse * toujours 100% de sa cellule, a tout niveau de zoom -> plus de fleche detachee. */ table.mbp-empform td:last-child .select2, table.mbp-empform td:last-child span.select2-container, table.mbp-empform td:last-child .select2-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } /* Cle du correctif « fleche detachee » : la BOITE interne (.select2-selection) * porte encore les classes utilitaires Dolibarr « maxwidth300 / minwidth75 » * (max-width:300px !important). Le conteneur etant force a 100%, la boite * restait a 300px et la fleche, ancree au bord droit du CONTENEUR, partait * loin a droite. On neutralise donc AUSSI ces plafonds sur la boite : boite * ET conteneur a 100% -> la fleche revient au bord du champ. */ table.mbp-empform td:last-child .select2-selection, table.mbp-empform td:last-child .select2-selection--single { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; position: relative; /* ancre la fleche sur la boite, pas sur un parent */ /* Bordure gauche figee a 1px (comme les inputs) : le debut du texte de la * valeur = bord boite + 1px + 8px, exactement comme la saisie. */ border-left-width: 1px !important; } /* Centrage vertical FIABLE de la valeur selectionnee. * Methode standard select2 : hauteur de boite fixe + line-height du texte * EGALE a cette hauteur -> le texte (« Virement bancaire », « Homme »...) est * parfaitement centre, quel que soit le zoom. La fleche partage la meme * hauteur et reste collee au bord droit. */ table.mbp-empform td:last-child .select2-selection--single { height: var(--mbp-ctl-h) !important; /* Centrage vertical par FLEX : align-items:center place le texte au centre * exact de la boite quelles que soient les regles de line-height/padding * heritees de select2 ou du theme. Methode la plus fiable (la valeur * « Homme », « Centre »... n'est plus calee trop haut). La fleche est en * position absolue -> hors flux flex, donc non impactee. */ display: flex !important; align-items: center !important; overflow: hidden; } table.mbp-empform td:last-child .select2-selection__rendered { line-height: normal !important; /* laisse le flex centrer, pas le line-height */ padding-left: 8px; padding-right: 22px; /* laisse la place a la fleche */ width: 100%; } /* Le chevron de cette cellule suit désormais la règle unique centralisée * (.mbp-ui .select2-selection__arrow, v1.99.7) : plus d'override local. */ /* v1.99.96 : les number (ex. « Nombre d'enfants ») ne doivent PAS s'étirer à 100% comme les * champs texte — le !important contre la regle generale td:last-child input{width:100%}. */ table.mbp-empform td:last-child input[type="number"] { width: 70px !important; max-width: 70px !important; } /* Repli « intitule libre » du poste : discret, pleine largeur, sur sa propre ligne * sous la liste. Il ne rivalise plus visuellement avec le select principal. */ table.mbp-empform td .mbp-poste-fallback { margin-top: 6px; } table.mbp-empform td .mbp-poste-fallback-input { width: 100%; max-width: 100%; box-sizing: border-box; font-size: var(--mbp-fs-help); color: var(--mbp-neutral-500); background: var(--mbp-surface-alt2); border: 1px dashed var(--mbp-line-soft); border-radius: 4px; padding: 4px 8px; } table.mbp-empform td .mbp-poste-fallback-input::placeholder { color: var(--mbp-muted-soft); font-style: italic; } /* Quand le repli est revele, la cellule poste passe a 2 lignes. On aligne alors * son libelle EN HAUT (au niveau de la liste) au lieu du centre des 2 lignes. */ table.mbp-empform td.mbp-poste-labelcell { vertical-align: top; padding-top: 12px; } /* Couple Mobile Money apparie « Operateur = N° » + radio prefere, sur une ligne. */ table.mbp-empform td .mbp-momo-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; /* le numero reste TOUJOURS visible : Prefere/Verifie passent dessous si etroit */ } table.mbp-empform td .mbp-momo-op { flex: 0 0 38%; min-width: 120px; } /* Numero prioritaire : largeur mini garantie -> ne s'ecrase jamais a zero. */ table.mbp-empform td .mbp-momo-num { flex: 1 1 140px; min-width: 130px; height: var(--mbp-ctl-h) !important; box-sizing: border-box; } table.mbp-empform td .mbp-momo-pref { flex: 0 0 auto; display: flex; align-items: center; gap: 3px; white-space: nowrap; font-size: var(--mbp-fs-help); color: var(--mbp-neutral-550); } table.mbp-empform td .mbp-momo-pref input { margin: 0; } /* v1.99.35 : « .mbp-page .fichehalfleft { padding-right } » RETIRE (code mort ; l'ecart des deux colonnes est porte par « .mbp-ui .fichecenter .fichehalfleft/right » plus bas). */ /* Calendrier jQuery-UI : au-dessus des composants select2 (~1051) pour qu'il ne * soit jamais masque partiellement par un champ voisin. */ .ui-datepicker { z-index: 1300 !important; } /* v1.99.109 : ICÔNE CALENDRIER UNIFIÉE. Les champs $form->selectDate() rendent un PNG natif * (img.ui-datepicker-trigger = object_calendarday.png, « image 2 »). On le masque et le * remplace (via js/mboapaie.js) par un picto FontAwesome calendrier propre, cohérent avec le * reste du module. Le datepicker reste fonctionnel (le picto ouvre le calendrier). */ .mbp-ui img.ui-datepicker-trigger { display: none !important; } .mbp-ui .mbp-cal-trigger { cursor: pointer; color: var(--mbp-muted); margin-left: 6px; font-size: var(--mbp-fs-body); vertical-align: middle; line-height: var(--mbp-ctl-h); } .mbp-ui .mbp-cal-trigger:hover { color: var(--mbp-ink); } /* v1.99.113 : TOGGLES d'activation. Le picto natif Dolibarr switch_on/off (fa-toggle-*) est * rendu à ~2em (29px) → disproportionné vs les autres actions de ligne (crayon/poubelle ~15px). * On l'aligne sur la taille d'icône de charte. Centralisé → toutes les listes admin. */ .mbp-ui .fa-toggle-on, .mbp-ui .fa-toggle-off { font-size: var(--mbp-fs-icon) !important; vertical-align: middle; } /* v1.99.109 : champ GÉNÉRÉ AUTO en lecture seule (ex. Matricule) — aspect « non éditable » * + largeur AU CONTENU (bat la règle .mbp-empform width:100% via specificité + !important). */ .mbp-ui input.mbp-input-readonly { background: var(--mbp-surface-alt) !important; color: var(--mbp-neutral-700) !important; cursor: default; width: 15ch !important; max-width: 15ch !important; } /* v1.99.109 : DATEPICKER jQuery restylé « moderne » (proche du natif HTML5, image 1). * 100 % visuel — la logique selectDate/enregistrement des dates est INCHANGÉE. */ .ui-datepicker.ui-widget { background: var(--mbp-surface) !important; border: 1px solid var(--mbp-line-strong) !important; border-radius: 12px !important; box-shadow: var(--mbp-shadow) !important; padding: 10px !important; font-family: inherit !important; font-size: var(--mbp-fs-body) !important; width: auto !important; } .ui-datepicker .ui-datepicker-header { background: transparent !important; border: 0 !important; padding: 2px 0 8px !important; position: relative; } .ui-datepicker .ui-datepicker-title { font-weight: 700 !important; color: var(--mbp-ink) !important; line-height: 1.7; } .ui-datepicker .ui-datepicker-title select { margin: 0 2px; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { top: 2px !important; height: 26px; width: 26px; cursor: pointer; border-radius: 8px !important; background: transparent !important; border: 0 !important; } .ui-datepicker .ui-datepicker-prev { left: 2px !important; } .ui-datepicker .ui-datepicker-next { right: 2px !important; } .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { background: var(--mbp-surface-alt) !important; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: none !important; } /* masque les sprites ui-icon */ .ui-datepicker .ui-datepicker-prev::before, .ui-datepicker .ui-datepicker-next::before { font-weight: 700; color: var(--mbp-muted); position: absolute; left: 0; right: 0; top: 3px; text-align: center; font-size: var(--mbp-fs-body); } .ui-datepicker .ui-datepicker-prev::before { content: "\276E"; } /* chevron gauche (police héritée) */ .ui-datepicker .ui-datepicker-next::before { content: "\276F"; } /* chevron droit (police héritée) */ .ui-datepicker table.ui-datepicker-calendar { margin: 0 !important; border-collapse: separate; border-spacing: 2px; } .ui-datepicker .ui-datepicker-calendar th { color: var(--mbp-muted) !important; font-weight: 600 !important; font-size: var(--mbp-fs-micro); padding: 4px 0 !important; border: 0 !important; } .ui-datepicker .ui-datepicker-calendar td { padding: 0 !important; border: 0 !important; } .ui-datepicker .ui-datepicker-calendar td a, .ui-datepicker .ui-datepicker-calendar td span { display: block; text-align: center; padding: 6px 0 !important; min-width: 2.4em; border: 0 !important; background: transparent !important; color: var(--mbp-ink) !important; border-radius: 8px !important; font-weight: 500; } .ui-datepicker .ui-datepicker-calendar td a:hover { background: var(--mbp-surface-alt) !important; } .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a { box-shadow: inset 0 0 0 1px var(--mbp-line-strong); } .ui-datepicker .ui-datepicker-calendar td a.ui-state-active, .ui-datepicker .ui-datepicker-calendar td a.ui-state-highlight.ui-state-active { background: var(--mbp-neutral-800) !important; color: var(--colorbackbody, #fff) !important; } .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month a, .ui-datepicker .ui-datepicker-calendar td.ui-state-disabled span { color: var(--mbp-muted-soft) !important; opacity: .55; } .ui-datepicker .ui-datepicker-buttonpane { border-top: 1px solid var(--mbp-line-soft) !important; margin: 8px -2px 0 !important; padding-top: 8px !important; } .ui-datepicker .ui-datepicker-buttonpane button { background: transparent !important; border: 0 !important; color: var(--mbp-green) !important; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .ui-datepicker .ui-datepicker-buttonpane button:hover { text-decoration: underline; background: var(--mbp-surface-alt) !important; } /* Trait residuel au-dessus des boutons : bordure du cadre "tabBar" de Dolibarr * (genere par dol_get_fiche_head/dol_get_fiche_end). On l'efface pour un rendu * totalement epure sur les pages du module. */ /* v1.99.34 : regle .mbp-page .tabBar RETIREE (code mort : le conteneur .mbp-page a * ete retire du HTML en v1.26.3 ; la neutralisation du .tabBar est desormais portee * par .mbp-ui .tabBar plus haut). */ /* v1.18.0 : marqueur de champ obligatoire (fiche salarie, champs configurables). L'asterisque rouge est injectee cote client d'apres la config admin. */ .mbp-req-star { color: var(--mbp-danger-strong); font-weight: 700; margin-left: 2px; } /* v1.18.3 : FILET GLOBAL d'alignement des listes sur TOUTES les interfaces du module. Dolibarr propage les classes du * (padding 8px, line-height 19px) ; les