/* * Les jetons de design -- la palette, les tailles, les espacements. * * Une seule declaration pour toute l'application. Ce fichier se charge AVANT * le theme : chaque theme n'a plus qu'a redefinir les jetons qui le * distinguent, et tout ce qui n'est pas redefini garde la valeur d'ici. * L'ordre compte, et c'est la raison d'etre du fichier : les valeurs * ecrites en dur dans deux cents endroits ne pouvaient suivre aucun theme. * * Les valeurs ci-dessous sont celles d'un fond CLAIR. Elles ont ete * mesurees, pas choisies a l'oeil : chaque couleur de texte tient au moins * 4,5:1 sur blanc et sur #f5f6f8, chaque couleur de bordure au moins 3:1. * * 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 2 of the License, or * (at your option) any later version. */ :root { /* ---- fonds ---------------------------------------------------------- */ --mod-fond: #ffffff; /* la surface d'une fenetre */ --mod-panneau: rgba(15, 20, 35, .05); --mod-bord: rgba(15, 20, 35, .16); /* ---- texte ---------------------------------------------------------- `texte` porte le contenu, `doux` ce qui l'accompagne -- libelles, dates, aide. `tres-doux` ne sert QU'A du decor : un tiret, un filet, jamais un mot qu'il faut lire. Mesures sur blanc : 15,5:1 et 5,8:1. */ --mod-texte: #1f2430; --mod-doux: #5f6674; --mod-tres-doux: #a8adb8; /* ---- couleurs de statut --------------------------------------------- Une seule par role, et rien d'autre. Sur blanc : 6,6 / 5,5 / 6,5 / 6,6. Elles ne servent JAMAIS seules a porter une information : un libelle, une icone ou un badge les accompagne toujours. */ --mod-vert: #0b6b3a; /* succes, encaisse, termine */ --mod-orange: #8a6114; /* attente, a verifier, prime */ --mod-rouge: #b3261e; /* erreur, impaye, action dangereuse */ --mod-bleu: #1a56c4; /* information, navigation, neutre */ /* ---- l'action principale -------------------------------------------- Une couleur, une seule, pour ce sur quoi on veut qu'on clique. Le reste des boutons est neutre. */ --mod-accent: #7a2fae; --mod-accent-ink: #ffffff; /* l'encre qui tient sur l'accent */ /* ---- l'encre des pastilles heritees ---------------------------------- Les classes bg-yellow, bg-teal & compagnie viennent de Mikhmon et portent des fonds clairs et satures. Une encre blanche y tombait a 1,6:1. Celle-ci tient de 4,7 a 11,5:1 selon le fond. */ --mod-encre-vive: #141019; /* ---- l'encre d'une pastille de statut -------------------------------- Une pastille peint un fond avec --mod-rouge ou --mod-orange, et pose du texte dessus. Or ces couleurs changent de nature selon le theme : sombres ici, elles portent du blanc ; CLAIRES sur les themes sombres -- #ff8fa8, #f5c469 --, elles n'y tiennent plus, et le blanc y tombait a 2,15:1. L'encre suit donc le theme au lieu d'etre ecrite en dur. */ --mod-encre-pastille: #ffffff; /* ---- bordures des composants ----------------------------------------- Un bord de champ n'est pas du texte : le seuil est 3:1. Celui-ci donne 4,4:1 sur blanc, et il se renforce au survol. */ --mod-bord-champ: rgba(15, 20, 35, .55); --mod-bord-champ-vif: rgba(15, 20, 35, .75); /* ---- typographie ---------------------------------------------------- Six niveaux, pas davantage. Le plus petit, `xs`, est reserve aux mentions accessoires ; rien de necessaire ne descend en dessous de `sm`, soit 12 px. */ --t-xxl: 21px; /* le chiffre d'une tuile */ --t-xl: 19px; /* titre de page */ --t-lg: 16px; /* titre de fenetre, sous-titre */ --t-md: 14px; /* contenu courant, cellules de tableau */ --t-sm: 12.5px; /* libelle, aide contextuelle */ --t-xs: 11.5px; /* mention accessoire, badge */ /* ---- espacements ---------------------------------------------------- Une echelle de quatre en quatre : deux valeurs voisines se distinguent a l'oeil, et l'on cesse d'inventer un 7 px ici, un 9 px la. */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; /* ---- rayons et reliefs ---------------------------------------------- */ --r-sm: 6px; --r-md: 10px; --r-lg: 12px; } /* * Le theme « dark » livre avec Mikhmon n'a jamais declare ces jetons : les * valeurs claires ci-dessus y seraient illisibles. On les corrige ici * plutot que dans un fichier minifie que personne ne relira. Le theme * s'annonce sur , ou l'application ecrit deja son nom. * * « aurore », lui, declare les siens dans sa propre feuille : c'est son * identite, elle n'a pas sa place ici. */ /* * Les deux themes sombres partagent ce jeu. * * Aurore en etait absente. Comme elle est le theme par defaut, tout * composant qui prend son fond dans --mod-fond s'affichait BLANC sous le * texte presque blanc de sa feuille : on ne lisait rien. Ce qui suit s'y * applique donc aussi, et quelques nuances propres a aurore viennent * ensuite. */ body[data-ui-theme="dark"], body[data-ui-theme="aurore"] { --mod-fond: #1c2025; --mod-panneau: rgba(255, 255, 255, .06); --mod-bord: rgba(255, 255, 255, .18); --mod-texte: #eef0f4; --mod-doux: rgba(255, 255, 255, .70); --mod-tres-doux: rgba(255, 255, 255, .38); --mod-vert: #4ade9a; --mod-orange: #f5c469; --mod-rouge: #ff8fa8; --mod-bleu: #93c5fd; /* Mesure : #c084fc porte une encre sombre a 6,85:1, une encre blanche a 2,64 seulement. C'est donc l'encre sombre. */ --mod-accent: #c084fc; --mod-accent-ink: #1a1030; --mod-bord-champ: rgba(255, 255, 255, .55); --mod-bord-champ-vif: rgba(255, 255, 255, .80); /* Les couleurs de statut sont claires ici : l'encre qui les surmonte doit etre sombre. Mesure sur #ff8fa8 : 9,4:1, contre 2,15 pour du blanc. */ --mod-encre-pastille: #1a1030; } /* * Aurore : la meme base sombre, mais violette. * * Ses cartes sont peintes rgba(23, 18, 48, .58) et son texte #f4f2fb. Une * surface grise au milieu se verrait ; on l'accorde. Les valeurs sont * opaques la ou le theme superpose des transparences : une fenetre posee * par-dessus la page doit couvrir ce qu'elle recouvre. */ body[data-ui-theme="aurore"] { --mod-fond: #1d1738; --mod-panneau: rgba(255, 255, 255, .07); --mod-bord: rgba(255, 255, 255, .16); --mod-texte: #f4f2fb; --mod-doux: rgba(244, 242, 251, .72); --mod-tres-doux: rgba(244, 242, 251, .40); } /* * Surfaces d'alerte : la meme information, en beaucoup moins fort. * * Les bandeaux de Mikhmon sont peints a pleine saturation -- un jaune * #ffc107 sur toute la largeur. Ils se voient, personne ne le conteste, * mais ils crient plus fort que le contenu qu'ils annoncent. Ces surfaces * teintees portent la meme couleur, a un dixieme, avec un filet a gauche * qui la reprend en plein. L'oeil trouve l'alerte aussi vite ; il ne la * subit plus. */ :root { --mod-surf-ok: #e8f5ee; --mod-surf-att: #fdf3e0; --mod-surf-err: #fdeceb; --mod-surf-info: #e9f0fd; } body[data-ui-theme="dark"], body[data-ui-theme="aurore"] { --mod-surf-ok: rgba(74, 222, 154, .13); --mod-surf-att: rgba(245, 196, 105, .14); --mod-surf-err: rgba(255, 143, 168, .14); --mod-surf-info: rgba(147, 197, 253, .13); } /* ------------------------------------------------------------------------- Le bloc d'identite, en haut a droite. Il mene desormais a sa propre fiche : c'est un lien. Or chaque theme pose « .navbar-right a { display:block; float:right; padding:14px 16px } », une regle plus specifique que la classe « .moi » -- qui se retrouvait donc etiree sur toute la hauteur de la barre. D'ou le selecteur en deux classes : il l'emporte sur la regle de theme quel que soit l'ordre de chargement. Les regles sans « a » qui suivent ne sont qu'une mise en place, pour les themes qui ne dessinaient pas ce bloc du tout : leurs trois morceaux s'y collaient bout a bout et se lisaient « CHCompte historiqueAdministrateur ». Le theme aurore, charge apres ce fichier, garde les siennes. ------------------------------------------------------------------------- */ .navbar-right a.moi { /* * Tout a droite, apres la deconnexion. * * Les elements flottants se rangent de droite a gauche dans l'ordre du * document : place en premier, ce bloc se retrouve le plus a droite. * Sans le flottement il retombait au milieu de la barre, coince entre * le titre et les listes deroulantes. */ display: inline-flex; float: right; align-items: center; gap: var(--e-2); padding: 3px 10px 3px 4px; margin-right: var(--e-1); vertical-align: middle; line-height: 1.15; text-align: left; text-decoration: none; } .moi-pastille { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .22); font-weight: 700; font-size: var(--t-xs); letter-spacing: .5px; } .moi-texte { display: flex; flex-direction: column; text-align: left; } .moi-nom { font-size: var(--t-sm); font-weight: 600; white-space: nowrap; } .moi-role { font-size: var(--t-xs); opacity: .78; white-space: nowrap; } /* Sur un telephone, l'initiale suffit a savoir qui est connecte : le nom prendrait la place des commandes. */ @media (max-width: 750px) { .navbar-right a.moi { padding: 2px; margin-right: 0; } .moi-texte { display: none; } } /* ------------------------------------------------------------------------- Le centre de la barre. Le compte a rebours et le choix du routeur sont les deux seules choses vivantes de cette barre : l'un s'epuise, l'autre dit sur quel reseau on travaille. Groupes au centre, ils se lisent d'un coup d'oeil et ne disputent plus la place aux boutons des deux bords. Positionnes en absolu plutot qu'en flottant : la barre porte deja deux colonnes flottantes, et un troisieme flottant se serait range contre l'une d'elles au lieu de tenir le milieu. ------------------------------------------------------------------------- */ .navbar-centre { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 50px; display: flex; align-items: center; gap: var(--e-2); pointer-events: none; /* la barre reste cliquable derriere */ } .navbar-centre > * { pointer-events: auto; } .navbar-centre .ses { float: none; margin: 0; } /* Sur un telephone, la barre n'a pas de milieu a offrir : le routeur se choisit dans le menu lateral, et le compte a rebours suffit. */ @media (max-width: 750px) { .navbar-centre { position: static; transform: none; margin-left: auto; } .navbar-centre .connect { display: none; } } /* ------------------------------------------------------------------------- Theme et langue, descendus dans le menu lateral. ------------------------------------------------------------------------- */ .sidenav .reglage-affichage { margin: 6px 5px 10px; padding: 8px 9px 9px; border-top: 1px solid var(--mod-bord, rgba(127,127,127,.22)); } .sidenav .reglage-affichage .titre { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--mod-doux); font-weight: 600; margin-bottom: 6px; } .sidenav .reglage-affichage select { width: 100%; margin: 0 0 6px; float: none; height: auto; padding: 6px 8px; font-size: var(--t-sm); text-align: left; border-radius: var(--r-sm, 6px); }