/* * Thème de l'application : surcharges Bootstrap communes à tous les écrans. * * Bootstrap 5.3 se personnalise en priorité via ses variables CSS, ce qui évite * d'écrire des règles concurrentes. Les styles propres à un écran n'ont pas * leur place ici. * * Thème sombre imposé : `data-bs-theme="dark"` est posé une fois pour toutes * sur la balise (templates/base.html.twig), et Bootstrap en déduit toute * sa palette — y compris `color-scheme`, donc les contrôles de formulaire et * les ascenseurs du navigateur. Aucun interrupteur clair/sombre n'est prévu et * le réglage système n'est pas consulté : écrire une règle sous * `prefers-color-scheme` n'aurait donc aucun effet ici. * * ── Palette « zinc » ────────────────────────────────────────────────────── * * Neutres presque purs, très bas, et surtout trois plans distincts. Le thème * sombre de Bootstrap n'en a qu'un : il pose `--bs-card-bg: var(--bs-body-bg)`, * si bien qu'une carte et le fond de page valent tous deux #212529 et que seule * la bordure les sépare. C'est ce qu'on corrige ici — l'écart carte/fond passe * de 1,00:1 à 1,20:1, l'ordre de grandeur des interfaces sombres actuelles. * * Deux rôles que Bootstrap nomme tous les deux « primary » sont ici séparés, * et c'est volontaire : * * - l'accent d'ACTION (bouton principal, entrée de menu active) est * monochrome, presque blanc — c'est la signature de cette palette ; * - la famille SÉMANTIQUE `primary` (`bg-primary-subtle`, * `text-primary-emphasis`) reste bleue, parce qu'elle porte du sens : * App\Backoffice\FormatsDeSaisie l'emploie pour « ce que le contrat * contraint », par opposition au gris de `secondary` pour « ce qu'il laisse * libre ». Les rendre monochromes toutes les deux ferait de « Liste fermée » * et « Texte libre » deux étiquettes grises indiscernables. * * Les valeurs ont été choisies pour passer AA (4,5:1) sur les deux plans, fond * de page comme carte. */ :root { /* * Fond des zones en retrait (menu latéral, écran de connexion). Plus sombre * que le fond de page, pour que la coquille se lise comme un cadre. */ --odisio-shell-bg: #08080a; /* * Plan intermédiaire : cartes, menus déroulants. C'est lui qui porte le * relief de l'interface — les bordures ne font plus que l'ourler. */ --odisio-surface: #202027; /* * Ce qui s'écrit PAR-DESSUS l'accent d'action. L'accent étant presque blanc, * un `color: #fff` en dur y deviendrait invisible. */ --odisio-accent-contraste: #101014; } [data-bs-theme="dark"] { /* ── Plans et texte ──────────────────────────────────────────────── */ --bs-body-bg: #0d0d10; --bs-body-bg-rgb: 13, 13, 16; --bs-body-color: #e4e4ea; --bs-body-color-rgb: 228, 228, 234; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; /* Texte en retrait, puis texte de simple indication. */ --bs-secondary-color: rgba(228, 228, 234, 0.7); --bs-secondary-color-rgb: 228, 228, 234; --bs-tertiary-color: rgba(228, 228, 234, 0.56); --bs-tertiary-color-rgb: 228, 228, 234; /* Fond de survol (entrées de menu, lignes de tableau). */ --bs-secondary-bg: #33333d; --bs-secondary-bg-rgb: 51, 51, 61; /* Fond des étiquettes et des compteurs, posé sur une carte. */ --bs-tertiary-bg: #2a2a33; --bs-tertiary-bg-rgb: 42, 42, 51; /* * Trait visible (champs de saisie, séparateurs de tableau) et trait * d'ourlet (cartes). La carte portant désormais sa propre couleur, sa * bordure peut être beaucoup plus discrète qu'avant. */ --bs-border-color: #3a3a44; --bs-border-color-translucent: rgba(255, 255, 255, 0.07); /* ── Accent d'action, monochrome ─────────────────────────────────── */ --bs-primary: #f4f4f6; --bs-primary-rgb: 244, 244, 246; /* Les liens suivent l'accent ; Bootstrap les souligne, l'affordance tient. */ --bs-link-color: #f4f4f6; --bs-link-color-rgb: 244, 244, 246; --bs-link-hover-color: #ffffff; --bs-link-hover-color-rgb: 255, 255, 255; /* ── Familles sémantiques ────────────────────────────────────────── */ /* * Fonds remontés au-dessus du plan des cartes : aux valeurs d'origine, * calculées pour un fond #212529, ces pastilles devenaient plus sombres que * la carte qui les porte et disparaissaient. */ --bs-primary-text-emphasis: #8ab4f8; --bs-secondary-text-emphasis: #b3b3bd; --bs-success-text-emphasis: #7fd4a4; --bs-info-text-emphasis: #79d5e8; --bs-warning-text-emphasis: #e8bc5e; --bs-danger-text-emphasis: #ef9a9a; --bs-light-text-emphasis: #f8f9fa; --bs-dark-text-emphasis: #d5d5dc; --bs-primary-bg-subtle: #20304d; --bs-secondary-bg-subtle: #2e2e38; --bs-success-bg-subtle: #1a3d2a; --bs-info-bg-subtle: #183a43; --bs-warning-bg-subtle: #3d3113; --bs-danger-bg-subtle: #452023; --bs-light-bg-subtle: #33333d; --bs-dark-bg-subtle: #1a1a1f; --bs-primary-border-subtle: #2d4a78; --bs-secondary-border-subtle: #45454f; --bs-success-border-subtle: #24603d; --bs-info-border-subtle: #1f5a68; --bs-warning-border-subtle: #6b551a; --bs-danger-border-subtle: #742c2f; --bs-light-border-subtle: #45454f; --bs-dark-border-subtle: #2a2a33; /* ── Divers ──────────────────────────────────────────────────────── */ /* * `` : le rose de Bootstrap est la seule vraie couleur qui resterait * dans une palette monochrome. Un bleu acier dit « chaîne technique » sans * attirer l'œil au milieu d'une phrase. */ --bs-code-color: #9fb4cc; --bs-highlight-color: #e4e4ea; --bs-highlight-bg: #40340f; --bs-form-valid-color: #7fd4a4; --bs-form-valid-border-color: #7fd4a4; --bs-form-invalid-color: #ef9a9a; --bs-form-invalid-border-color: #ef9a9a; } /* * ── Composants qui définissent leurs variables chez eux ────────────────── * * Les quatre règles qui suivent ne sont pas des exceptions à la règle « tout * par les variables » : ce sont toujours des variables Bootstrap, mais déclarées * à l'intérieur du sélecteur du composant (`.card { --bs-card-bg: … }`). Une * valeur posée plus haut, sur `[data-bs-theme="dark"]`, est bien héritée, puis * écrasée par celle du composant sur l'élément lui-même : il faut donc la * redéclarer au même endroit. */ /* Le plan qui manquait : sans cette ligne, une carte reste de la couleur du fond. */ .card { --bs-card-bg: var(--odisio-surface); } /* * Un menu déroulant flotte au-dessus de la page : il doit se lire comme posé * dessus, pas comme un trou. Concerne le compte de la barre du haut et le * sélecteur d'univers. */ .dropdown-menu { --bs-dropdown-bg: var(--odisio-surface); --bs-dropdown-border-color: var(--bs-border-color); --bs-dropdown-link-hover-bg: var(--bs-secondary-bg); } /* * Les tableaux tirent leur fond de `--bs-body-bg`. Tant qu'ils sont posés à même * la page, cela revient au même ; placés dans une carte, ils y perceraient un * rectangle sombre. `transparent` les laisse prendre la couleur de leur support, * quel qu'il soit. */ .table { --bs-table-bg: transparent; } /* * Onglets et barres de navigation. Bootstrap donne aux liens de `.nav` la * couleur des liens ; celle-ci étant devenue l'accent presque blanc, un onglet * inactif et l'onglet actif ne se distinguaient plus (#f4f4f6 contre #ffffff). * L'inactif passe donc en texte atténué — la hiérarchie se lit à nouveau, et * c'est aussi la convention des interfaces monochromes. * * Sans effet sur le menu latéral, dont app.css fixe déjà ses propres couleurs. */ .nav { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-emphasis-color); } /* * Bouton principal : Bootstrap l'écrit en dur (#0d6efd) dans son CSS compilé, * une variable globale ne l'atteint donc pas. Ses sous-variables, elles, * existent toutes — c'est du réglage, pas une réécriture. */ .btn-primary { --bs-btn-color: var(--odisio-accent-contraste); --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: var(--odisio-accent-contraste); --bs-btn-hover-bg: #ffffff; --bs-btn-hover-border-color: #ffffff; --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--odisio-accent-contraste); --bs-btn-active-bg: #dcdce1; --bs-btn-active-border-color: #dcdce1; --bs-btn-disabled-color: var(--odisio-accent-contraste); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } /* * Champs de saisie. Bootstrap leur donne le fond de la page ; ils devenaient donc * invisibles sur la page, et se dédoublaient dans un `input-group` dont l'addon * porte `bg-body-tertiary` — le filtre de l'écran du contrat s'affichait en deux * tons. Les poser sur le même plan que les étiquettes règle les deux cas, et les * fait lire comme un creux dès qu'ils sont dans une carte. * * À partir d'ici on repasse par des propriétés CSS : Bootstrap écrit ces * valeurs-là en dur dans son CSS compilé, aucune variable ne les expose. */ .form-control, .form-select { background-color: var(--bs-tertiary-bg); } /* * Prise de focus : en dur elle aussi, et en bleu. Le fond n'est rappelé que pour * les champs de texte — une case à cocher garde le sien, sans quoi une case * cochée puis focalisée perdrait sa couleur. */ .form-control:focus, .form-select:focus { background-color: var(--bs-tertiary-bg); } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.2); } /* * Cases, boutons radio et interrupteurs cochés. Leur fond prend l'accent, donc * presque blanc : la coche et la pastille de Bootstrap, dessinées en blanc, * y disparaîtraient. On les redessine dans la couleur de contraste de l'accent. * Aucun écran n'en utilise encore — c'est précisément pour que le premier qui * en posera un n'ait pas à découvrir le problème. */ .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23101014' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } .form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23101014'/%3e%3c/svg%3e"); } .form-switch .form-check-input:checked { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23101014'/%3e%3c/svg%3e"); }