/* * enzo.immo — mode expert (administration Django sous Unfold). Habille Unfold aux couleurs, polices, rayons * et espacements de l'espace de travail /app/ (palette « Papier », design/GUIDE_PRESENTATION.md), pour que le * dirigeant ait l'impression de rester dans la même application en passant de l'un à l'autre. * * Ce qu'Unfold couvre déjà par réglage (webapp/enzo/settings.py, UNFOLD["COLORS"]/["BORDER_RADIUS"]) : les * couleurs de fond, bordure, texte et le rayon des contrôles. Cette feuille couvre le reste : police mono, * graisse maximale, quelques rayons de surfaces plus grandes, la barre de l'élément actif de la navigation, * et la neutralisation des couleurs décoratives (vert/orange/bleu) des composants Unfold au profit des tons * Papier (gris par défaut, ambre = à vérifier, rouge = problème). Chargée après les polices d'Unfold mais * AVANT unfold/css/styles.css (voir unfold/templates/unfold/layouts/skeleton.html). Les variables ci-dessous * l'emportent quand même : Unfold déclare ses jetons dans `@layer theme` et cette feuille n'est dans aucune * couche (une déclaration hors couche gagne sur toute couche, quels que soient l'ordre et la spécificité). Le * sélecteur `html:root`, plus spécifique que le `:root,:host` d'Unfold, garde l'avantage si une version future * sortait ses jetons des couches. * * Ne redéfinit jamais les jetons --color-base-…, --color-primary-… ni --color-font-… : c'est le rôle du * dictionnaire UNFOLD (settings.py), seule source de ces jetons. * * Piège : dans un commentaire, jamais d'astérisque collé à une barre oblique (ex. « --color-base-* » suivi de * « / »). Il ferme le commentaire ; le reste de la phrase devient du CSS invalide et le navigateur jette, sans * erreur visible, la règle suivante entière — ici tout le bloc html:root (couleurs neutralisées, police mono), * ce qui laissait par exemple l'interrupteur des champs oui/non en vert. Contrôlé par enzo/test_expert_css.py. */ html:root { /* IBM Plex Mono chargée en Google Fonts (UNFOLD["STYLES"], même famille/graisses que /app/) : montants, codes, identifiants. Inter reste la police d'Unfold (déjà servie en 400/500/600/700, static/unfold/fonts). */ --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* -------------------------------------------------------------- couleurs décoratives → tons Papier Unfold (et tout admin.py du dépôt, y compris ceux d'autres agents) colore volontiers avec la palette Tailwind vert/bleu/orange/rouge par défaut — messages, coche « oui/non », badges métier (ex. un fond de jauge « exceptions non traitées » dans banque/admin.py). Règle Papier : gris par défaut, ambre = à vérifier, rouge = problème, jamais de vert ni de bleu décoratif (design/GUIDE_PRESENTATION.md). Plutôt que traquer chaque palier utilisé quelque part dans le dépôt, TOUTE la rampe est neutralisée (tous les paliers 50 à 900, pas seulement ceux des gabarits d'Unfold) : vert et bleu deviennent un alias de l'échelle base (déjà neutre et chaude), orange devient l'ambre Papier, rouge devient le rouge Papier (y compris le palier 600 du bouton « danger » : Papier n'a qu'un seul rouge, pas un rouge Tailwind et un rouge Papier différents). */ --color-green-50: var(--color-base-50); --color-green-100: var(--color-base-100); --color-green-200: var(--color-base-200); --color-green-300: var(--color-base-300); --color-green-400: var(--color-base-400); --color-green-500: var(--color-base-500); --color-green-600: var(--color-base-600); --color-green-700: var(--color-base-700); --color-green-800: var(--color-base-800); --color-green-900: var(--color-base-900); --color-blue-50: var(--color-base-50); --color-blue-100: var(--color-base-100); --color-blue-200: var(--color-base-200); --color-blue-300: var(--color-base-300); --color-blue-400: var(--color-base-400); --color-blue-500: var(--color-base-500); --color-blue-600: var(--color-base-600); --color-blue-700: var(--color-base-700); --color-blue-800: var(--color-base-800); --color-blue-900: var(--color-base-900); /* ambre Papier (--verifier, --verifier-fond, --verifier-bord) */ --color-orange-50: #FEFAF0; --color-orange-100: #FBF1DA; --color-orange-200: #F3E1B3; --color-orange-300: #EAD39A; --color-orange-400: #E5BA60; --color-orange-500: #C99A3D; --color-orange-600: #A67A1F; --color-orange-700: #855200; --color-orange-800: #663F00; --color-orange-900: #4A2D00; /* rouge Papier (--probleme, --probleme-fond, --probleme-bord), y compris le palier 600 des boutons destructeurs (unfold/components/button.html, variant="danger") : un seul rouge dans toute l'interface. */ --color-red-50: #FDF2F1; --color-red-100: #FCEBE8; --color-red-200: #F7D2CD; --color-red-300: #F2B7AF; --color-red-400: #F4948A; --color-red-500: #E36F62; --color-red-600: #CC4C3D; --color-red-700: #B3261E; --color-red-800: #8A1D16; --color-red-900: #63140F; } /* ------------------------------------------------------------------ typographie */ /* Papier : graisses 400/500/600 seulement, jamais 700 (design/GUIDE_PRESENTATION.md). Unfold sert Inter jusqu'en 700 et l'utilise pour quelques titres/emphases : on plafonne à 600 plutôt que de traquer chaque classe font-bold. */ .font-bold, .font-extrabold, .font-black, strong, b { font-weight: 600 !important; } /* Montants, codes, identifiants : partout où une feuille future (admin_base.py) pose la classe utilitaire Tailwind « font-mono », déjà fournie par Unfold — seule la police (ci-dessus) manquait. */ /* ------------------------------------------------------------------ rayons des grandes surfaces UNFOLD["BORDER_RADIUS"] (8px) couvre déjà rounded-default, employé pour les contrôles ET la plupart des surfaces (cartes, modales) faute d'un second jeton dans cette version d'Unfold. Les tableaux de listes (plus grandes surfaces, 12px côté Papier) sont la seule surface qu'on peut cibler sans dupliquer de gabarit. */ #result_list, .changelist-results { border-radius: 12px; overflow: hidden; } /* ------------------------------------------------------------------ navigation : barre de l'élément actif Papier réserve le bleu à trois usages, dont le lien de navigation actif sous forme de barre fine de 2px (pas un aplat) : Unfold colore déjà le texte en primary-600/fond gris (conforme, « puce active grise, jamais pleine ») ; on ajoute la barre. */ #nav-sidebar-inner a.active { position: relative; } #nav-sidebar-inner a.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 999px; background: var(--color-primary-600); } /* ------------------------------------------------------------------ étiquettes (unfold/helpers/label.html) Composant rendu par @display(label=…) (unfold.decorators) : capitales espacées par défaut, interdites par la charte Papier (design/GUIDE_PRESENTATION.md, « Interdits »). Les couleurs, elles, viennent déjà des variables neutralisées plus haut (vert/orange/bleu/rouge). */ span.rounded-default.uppercase, a.rounded-default.uppercase { text-transform: none; letter-spacing: normal; } /* ------------------------------------------------------------------ interrupteurs oui/non Widget natif d'Unfold pour tout champ booléen de formulaire (unfold/widgets.py, SWITCH_CLASSES : rail coché checked:bg-green-500, et dark:checked:bg-green-700 en sombre). Le vert neutralisé plus haut suffit en clair, mais en sombre le palier 700 donnerait un rail coché plus FONCÉ que le rail décoché (dark:bg-base-600) : un interrupteur activé aurait l'air éteint. Un seul gris 500 dans les deux thèmes : plus foncé que le rail décoché en clair (base-300), plus clair en sombre (base-600), pastille blanche lisible (contraste ≥ 3:1). Classe d'Unfold vérifiée par enzo/test_expert_css.py : si une mise à jour la renomme, le test le signale. */ input.checked\:bg-green-500:checked { background-color: var(--color-base-500); } /* ------------------------------------------------------------------ montants (enzo/admin_base.py, montant()) Jamais coupés en fin de ligne (plus de « -1 » sur une ligne et « 330,00 € » sur la suivante dans une colonne étroite). Calés à droite dans une cellule de tableau (listes, tableaux en ligne) ; ailleurs (résumés, champs en lecture seule), dans le fil du texte. Avant, montant() posait lui-même « block text-right » : dans une phrase de résumé, la somme partait seule à la ligne, calée au bord droit du champ (« … — » / « 505,00 € » / « , depuis le … »). */ .montant { white-space: nowrap; } td .montant, th .montant { display: block; text-align: right; } /* ------------------------------------------------------------------ listes déroulantes modifiables (list_editable) Le widget natif (unfold/widgets/select.html, classes SELECT_CLASSES dans unfold/widgets.py) ne pose qu'un max-width (max-w-2xl) sur son conteneur : dans une colonne étroite d'une liste dense, le navigateur réduit le