/* * Couche moderne, additive. * * Chargee APRES le theme choisi, elle ne remplace rien : elle reprend la * structure existante (card, box, table, col-*) et lui donne un rythme * d'espacement, des surfaces lisibles et des cibles tactiles utilisables au * doigt. Aucune couleur de theme n'est ecrasee -- les cinq themes livres * continuent de fonctionner, y compris ceux qu'on ajouterait ensuite. * * L'application est utilisee au bureau ET par des vendeurs sur des telephones * de tailles tres variees. Trois paliers plutot qu'un seul : * * <= 480px petit telephone, une colonne, navigation basse * <= 750px telephone et petite tablette (palier d'origine) * >= 1200px grand ecran, on respire */ :root { --m-r-sm: 6px; --m-r: 10px; --m-r-lg: 14px; --m-1: 4px; --m-2: 8px; --m-3: 12px; --m-4: 16px; --m-5: 24px; --m-6: 32px; /* Hauteur des controles. Au bureau, la souris vise juste et on privilegie la densite ; au doigt il faut de la place, et le palier telephone plus bas remonte cette valeur. */ --m-touch: 32px; --m-pad-card: 10px; /* interieur des cartes */ --m-pad-cell: 5px 9px; /* cellules de tableau */ --m-shadow: 0 1px 2px rgba(0,0,0,.10), 0 4px 14px rgba(0,0,0,.07); --m-shadow-sm: 0 1px 2px rgba(0,0,0,.09); --m-line: rgba(128,144,160,.22); --m-line-soft: rgba(128,144,160,.13); --m-hover: rgba(128,144,160,.10); --m-sunken: rgba(128,144,160,.07); } /* Les themes sombres portent moins bien l'ombre : on la remplace par un liseré clair, qui detache aussi bien sans salir le fond. */ /* Fond de la surface qui porte les tableaux. L'en-tete collant en a besoin : sans couleur opaque, les lignes defilent au travers et deviennent illisibles. « inherit » ne suffit pas -- il herite du tr, qui est transparent. */ :root { --m-surface: #FFF; --m-muted: rgba(23,36,42,.60); } body[data-ui-theme="dark"] { --m-surface: #3a4149; --m-muted: rgba(228,231,234,.62); } body[data-ui-theme="pink"] { --m-surface: #ffe6f1; --m-muted: rgba(60,20,40,.60); } body[data-ui-theme="dark"] { --m-shadow: 0 1px 2px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.22); --m-shadow-sm: 0 1px 2px rgba(0,0,0,.28); --m-line: rgba(255,255,255,.11); --m-line-soft: rgba(255,255,255,.06); --m-hover: rgba(255,255,255,.05); --m-sunken: rgba(0,0,0,.16); } /* ------------------------------------------------------------------ base */ body { font-size: 14px; line-height: 1.38; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(128,144,160,.18); } /* Les chiffres s'alignent en colonne partout ou ils comptent. */ .text-right, td.n, th.n, .box h1, .table td, .table th { font-variant-numeric: tabular-nums; } h1, h2, h3, .card-title { letter-spacing: -.012em; text-wrap: balance; } .main-container { padding: var(--m-2) var(--m-2) var(--m-5); } /* ------------------------------------------------------------- surfaces */ .card { border-radius: var(--m-r); box-shadow: var(--m-shadow); border: 1px solid var(--m-line-soft); overflow: hidden; margin-bottom: var(--m-2); } .card .card { box-shadow: var(--m-shadow-sm); } .card-header { padding: var(--m-2) var(--m-3); margin-bottom: 0; border-bottom: 1px solid var(--m-line); border-radius: 0; } .card-header h3, .card-header .card-title { margin: 0; font-size: .98rem; font-weight: 600; line-height: 1.3; } .card-body { padding: var(--m-pad-card); margin-bottom: 0; } /* Une carte imbriquee dans une autre n'a pas besoin du meme retrait. */ .card .card .card-body { padding: var(--m-2); } .box-bordered { border: 1px solid var(--m-line); border-radius: var(--m-r-sm); } /* --------------------------------------------------------- indicateurs */ /* Le theme impose 75 px de hauteur minimale a une tuile. Avec la typographie actuelle le contenu tient en moins, et cette reserve ne faisait qu'ecarter les lignes du tableau situe dessous. */ .bmh-75 { min-height: 56px; } .box { padding: var(--m-2) var(--m-3); margin: 3px; border-radius: var(--m-r); box-shadow: var(--m-shadow-sm); } .box.box-bordered { box-shadow: none; } .box h1 { margin: 0; font-weight: 650; line-height: 1.05; letter-spacing: -.02em; } .box > div, .box a > div { font-size: .78rem; line-height: 1.25; opacity: .92; } .box a { text-decoration: none; display: block; } .box a:hover h1 { text-decoration: none; } /* Une tuile cliquable doit se comporter comme telle. */ .box:has(a) { transition: transform .12s ease, box-shadow .12s ease; } .box:has(a):hover { transform: translateY(-1px); box-shadow: var(--m-shadow); } @media (prefers-reduced-motion: reduce) { .box:has(a), .box:has(a):hover { transition: none; transform: none; } } /* ---------------------------------------------------------- formulaires */ .form-control, input[type="text"], input[type="number"], input[type="password"], input[type="date"], input[type="month"], input[type="search"], select, textarea { border-radius: var(--m-r-sm); padding: 4px 8px; min-height: var(--m-touch); font-size: 14px; font-family: inherit; border: 1px solid var(--m-line); transition: border-color .12s ease, box-shadow .12s ease; } select { min-height: var(--m-touch); } textarea { min-height: 4rem; } .form-control:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(31,111,235,.55); box-shadow: 0 0 0 3px rgba(31,111,235,.16); } /* Le clavier tactile ne doit jamais faire zoomer la page : sous 16px, iOS agrandit le document a la mise au point et l'utilisateur perd sa place. */ @media (max-width: 750px) { .form-control, input, select, textarea { font-size: 16px; } } .btn, button, input[type="submit"] { border-radius: var(--m-r-sm); padding: 4px 12px; min-height: var(--m-touch); font-size: .88rem; font-weight: 600; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--m-2); transition: filter .12s ease, box-shadow .12s ease; } .btn:hover, button:hover { filter: brightness(1.07); } .btn:active, button:active { filter: brightness(.95); } .btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid rgba(31,111,235,.8); outline-offset: 2px; } button[disabled], .btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; } /* Les petits boutons declares en ligne gardent leur taille voulue au bureau, mais redeviennent tactiles sur telephone. */ @media (max-width: 750px) { .btn[style*="padding"], button[style*="padding"] { min-height: 38px; } } /* --------------------------------------------------------------- tables */ .table { border-collapse: separate; border-spacing: 0; width: 100%; } .table td, .table th { padding: var(--m-pad-cell); line-height: 1.25; } /* Le nom complet, la date ou le commentaire tiennent sur une deuxieme ligne dans la meme cellule : sans cela ils heritaient de l'interligne du titre. */ .table td span, .table td small { line-height: 1.2; } .table thead th { position: sticky; top: 0; z-index: 2; background: var(--m-surface); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--m-muted); border-bottom: 1px solid var(--m-line); } .table.table-sm td, .table.table-sm th { padding: 3px 7px; } .table.table-hover tbody tr:hover { background: var(--m-hover); } .table tbody tr + tr td { border-top: 1px solid var(--m-line-soft); } .table-bordered td, .table-bordered th { border-color: var(--m-line-soft); } /* L'en-tete colle : sur une liste de 100 tickets, on perd sinon le sens des colonnes des la premiere page. */ .overflow { border-radius: var(--m-r-sm); -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .overflow > .table > thead > tr > th { background-clip: padding-box; } /* Un tableau plus large que l'ecran doit le dire. La bande a droite s'efface quand on atteint la fin du defilement. */ .overflow { background-image: linear-gradient(to right, transparent, var(--m-sunken)); background-position: right center; background-repeat: no-repeat; background-size: 22px 100%; background-attachment: local, scroll; } /* ------------------------------------------------------------ grille */ /* La grille d'origine ne travaille pas en border-box : lui ajouter du remplissage ferait deborder les colonnes et casserait leur alignement. On n'y touche pas, on se contente de borner la largeur sur tres grand ecran. */ @media (min-width: 1400px) { .main-container { max-width: 1560px; margin: 0 auto; } } /* ------------------------------------------------ navigation laterale */ .sidenav a, .sidenav .dropdown-btn { border-radius: var(--m-r-sm); margin: 1px var(--m-2); padding-top: 4px; padding-bottom: 4px; width: auto; line-height: 1.3; transition: background-color .12s ease; } .sidenav a:hover, .sidenav .dropdown-btn:hover { background-color: var(--m-hover); } .sidenav a.active, .sidenav .dropdown-btn.active { font-weight: 600; } #navbar { box-shadow: var(--m-shadow-sm); } /* * Les deux traits d'ouverture du menu lateral. * * Le theme n'en montre qu'un a la fois : « closeNav » au bureau, ou le * menu est deja ouvert, « openNav » au telephone, ou il est replie. Ce * fichier se charge APRES lui : poser « display » ici sans condition * ecrasait sa regle, et les deux traits s'affichaient cote a cote. * * On ne garde donc ici que le confort du doigt, et on reprend les deux * seuils pour que la regle d'origine continue de decider lequel se voit. */ #openNav, #closeNav { min-width: var(--m-touch); min-height: var(--m-touch); align-items: center; justify-content: center; } @media (min-width: 751px) { #closeNav { display: inline-flex; } #openNav { display: none; } } @media (max-width: 750px) { #openNav { display: inline-flex; } #closeNav { display: none; } } /* ------------------------------------------------------- petits ecrans */ @media (max-width: 750px) { /* Au doigt, la densite du bureau devient impraticable : on remonte les hauteurs de controle et on rouvre legerement les cellules. Une variable se declare sur un selecteur, jamais nue dans un bloc media. */ :root { --m-touch: 40px; } body { font-size: 15px; line-height: 1.45; } .main-container { padding: var(--m-2) var(--m-2) 76px; } .card-body { padding: var(--m-3); } .card-header { padding: var(--m-2) var(--m-3); } .box { padding: var(--m-3); } .box h1 { font-size: 1.35rem; } .bmh-75 { min-height: 68px; } .table td, .table th { padding: 5px 8px; } .form-control, input, select, textarea, .btn, button { min-height: 40px; } /* Un formulaire pose en ligne au bureau s'empile au telephone. */ form[style*="flex"] { gap: var(--m-2) !important; } form[style*="flex"] > div { min-width: 0; } /* Les colonnes secondaires disparaissent : mieux vaut trois colonnes lisibles que huit illisibles. */ .hide-sm { display: none !important; } } @media (max-width: 480px) { .main-container { padding: var(--m-2) var(--m-1) 76px; } .box { padding: var(--m-3) var(--m-2); margin: 2px; } .box h1 { font-size: 1.22rem; } .box > div, .box a > div { font-size: .76rem; } .card-header h3, .card-header .card-title { font-size: .95rem; } .table td, .table th { padding: var(--m-2) var(--m-2); } .hide-xs { display: none !important; } /* Deux tuiles par ligne au lieu de quatre : un chiffre doit rester lisible. */ .col-box-3 { width: 50%; } /* Une barre de boutons devient une colonne de boutons pleine largeur. */ .btn-stack .btn, .btn-stack button { width: 100%; } } /* ------------------------------------------- navigation basse, telephone */ #mBottom { display: none; } @media (max-width: 750px) { #mBottom { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; /* La barre porte la classe card pour en reprendre le fond du theme, mais elle ne doit rien garder de sa geometrie : une marge basse la decollerait du bord et laisserait passer le contenu dessous. */ margin: 0; border: 0; border-top: 1px solid var(--m-line); border-radius: 0; box-shadow: 0 -2px 14px rgba(0,0,0,.18); padding-bottom: env(safe-area-inset-bottom, 0); } #mBottom a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: var(--m-2) 2px; min-height: 56px; font-size: .68rem; text-decoration: none; text-align: center; line-height: 1.15; opacity: .72; } #mBottom a i { font-size: 1.15rem; } #mBottom a.active { opacity: 1; font-weight: 600; } #mBottom a.active i { transform: translateY(-1px); } } /* ------------------------------------------------------------ divers */ code { border-radius: 3px; padding: .06em .34em; background: var(--m-sunken); font-size: .88em; } hr { border: 0; border-top: 1px solid var(--m-line); margin: var(--m-3) 0; } /* Barre de progression, utilisee par le suivi des objectifs. */ .m-bar { background: var(--m-sunken); border-radius: 999px; height: 8px; overflow: hidden; } .m-bar > span { display: block; height: 100%; border-radius: 999px; } /* Etiquette d'etat : un mot dans une pastille se lit plus vite qu'un mot nu. */ .m-tag { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .03em; padding: .12em .55em; border-radius: 999px; background: var(--m-sunken); white-space: nowrap; } .m-tag.ok { background: rgba(26,127,55,.16); color: #1a7f37; } .m-tag.warn { background: rgba(178,106,0,.18); color: #b26a00; } .m-tag.bad { background: rgba(198,40,40,.16); color: #c62828; } .m-tag.info { background: rgba(31,111,235,.16); color: #1f6feb; } body[data-ui-theme="dark"] .m-tag.ok { color: #6fcf8e; } body[data-ui-theme="dark"] .m-tag.warn { color: #e0b055; } body[data-ui-theme="dark"] .m-tag.bad { color: #f08b7d; } body[data-ui-theme="dark"] .m-tag.info { color: #78b0ff; } /* Impression : ni navigation, ni ombres, ni fond. */ @media print { .sidenav, #navbar, #mBottom, .btn, button, form { display: none !important; } .card, .box { box-shadow: none; border: 1px solid #ccc; } #main { margin-left: 0 !important; margin-top: 0 !important; } .overflow { max-height: none !important; overflow: visible !important; } } /* ========================================================================= MODELE DE BASE DES ECRANS Pose sur l'ecran « Gestion des commandes », destine aux autres. Charge pour TOUS les themes : un ecran refait ne doit pas se defaire quand on repasse en clair. ========================================================================= */ /* Pas de bloc :root ici. Cette feuille est chargee APRES le theme : un :root y ecraserait les couleurs que le theme definit, et le modele resterait gris sur un fond violet. On passe par le repli de var(), qui n'agit que si le theme n'a rien dit. */ /* ---- l'entete d'ecran ------------------------------------------------- */ .mod-entete{ display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap; margin:0 0 14px; } .mod-entete h2{ margin:0;font-size:20px;font-weight:600;line-height:1.25; display:flex;align-items:center;gap:9px; } .mod-entete h2 i{opacity:.75;font-size:18px} .mod-entete p{ margin:4px 0 0;font-size:12.5px;line-height:1.55;color:var(--mod-doux,rgba(127,127,127,.55)); max-width:66ch; } .mod-entete-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* ---- une rangee de panneaux -------------------------------------------- */ .mod-rangee{ display:grid;gap:12px;margin-bottom:12px; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); align-items:stretch; } /* ---- un panneau de chiffres -------------------------------------------- */ .mod-groupe{ border:1px solid var(--mod-bord,rgba(127,127,127,.22));border-radius:10px; background:var(--mod-panneau,rgba(127,127,127,.10)); padding:10px 12px 12px; display:flex;flex-direction:column; } .mod-groupe > h3{ margin:0 0 10px;font-size:12px;font-weight:700; letter-spacing:1.1px;text-transform:uppercase; color:var(--mod-doux,rgba(127,127,127,.55));display:flex;align-items:center;gap:7px; } .mod-groupe > h3 i{font-size:13px;opacity:.8} .mod-tuiles{ display:grid;gap:0;flex:1; grid-template-columns:repeat(auto-fit,minmax(62px,1fr)); } /* ---- un chiffre et son libelle ----------------------------------------- */ /* Le filet separateur est un bord gauche plutot qu'un element : il disparait tout seul sur la premiere tuile de chaque rangee, et ne laisse pas de trait orphelin quand la grille se replie sur un ecran etroit. */ .mod-tuile{ padding:2px 8px;border-left:1px solid var(--mod-bord,rgba(127,127,127,.22)); min-width:0; } .mod-tuile:first-child{border-left:none;padding-left:2px} /* La taille est mesuree, pas choisie : a 26 px, « 55 744 » et « 352 M GNF » debordaient de 7 et 18 pixels sur la tuile voisine. L'unite passe sous le nombre, ou elle ne prend plus de largeur. */ .mod-tuile .v{ font-size:21px;font-weight:300;line-height:1.2; font-variant-numeric:tabular-nums;white-space:nowrap; display:block;overflow:hidden; } .mod-tuile .u{ font-size:10px;font-weight:400;opacity:.7;margin-left:3px; letter-spacing:.3px; } .mod-tuile .l{ font-size:11px;line-height:1.35;color:var(--mod-doux,rgba(127,127,127,.55)); margin-top:2px;display:block; } .mod-tuile.att .v{color:var(--mod-orange,#a5680a)} .mod-tuile.ok .v{color:var(--mod-vert,#0b6b3a)} .mod-tuile.mal .v{color:var(--mod-rouge,#b3261e)} .mod-tuile a{text-decoration:none} .mod-tuile a:hover .v{text-decoration:underline} /* ---- le panneau central, celui des totaux ------------------------------ */ .mod-groupe.central{align-items:center;text-align:center} .mod-groupe.central .mod-tuiles{width:100%} /* ---- les pastilles d'alerte -------------------------------------------- */ .mod-pastilles{ display:grid;gap:10px;margin-bottom:14px; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); } .mod-pastille{ display:flex;align-items:center;gap:11px; border:1px solid var(--mod-bord,rgba(127,127,127,.22));border-radius:10px; background:var(--mod-panneau,rgba(127,127,127,.10));padding:9px 12px; text-decoration:none;min-width:0; } .mod-pastille:hover{border-color:var(--mod-doux,rgba(127,127,127,.55))} .mod-pastille .ic{ width:34px;height:34px;flex:0 0 34px;border-radius:9px; display:flex;align-items:center;justify-content:center;font-size:15px; background:rgba(127,127,127,.16); } .mod-pastille .tx{min-width:0} .mod-pastille .tx b{ display:block;font-size:12px;font-weight:600;line-height:1.3; overflow:hidden;text-overflow:ellipsis; } .mod-pastille .tx span{font-size:11px;color:var(--mod-doux,rgba(127,127,127,.55))} .mod-pastille .n{ margin-left:auto;font-size:21px;font-weight:300; font-variant-numeric:tabular-nums; } /* Une alerte qui ne compte rien n'a pas a crier : elle reste grise. */ .mod-pastille.vide{opacity:.55} .mod-pastille.att .ic{background:rgba(165,104,10,.20);color:var(--mod-orange,#a5680a)} .mod-pastille.att .n{color:var(--mod-orange,#a5680a)} .mod-pastille.mal .ic{background:rgba(179,38,30,.20);color:var(--mod-rouge,#b3261e)} .mod-pastille.mal .n{color:var(--mod-rouge,#b3261e)} .mod-pastille.ok .ic{background:rgba(11,107,58,.20);color:var(--mod-vert,#0b6b3a)} .mod-pastille.ok .n{color:var(--mod-vert,#0b6b3a)} /* ---- une liste en cartes ------------------------------------------------ */ /* Un tableau de dix colonnes oblige a lire une ligne de gauche a droite pour savoir de qui il s'agit, et il ne tient pas sur un telephone. Une carte porte un visage, un nom, et les trois chiffres qui comptent. */ .mod-cartes{ display:grid;gap:10px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); } .mod-carte{ display:block;text-decoration:none;color:inherit; border:1px solid var(--mod-bord,rgba(127,127,127,.22));border-radius:11px; background:var(--mod-panneau,rgba(127,127,127,.10)); padding:11px 13px;min-width:0; } .mod-carte:hover{ border-color:var(--mod-accent,#1f6feb); background:var(--mod-panneau-fort,rgba(127,127,127,.16)); } .mod-carte.eteinte{opacity:.5} .mod-carte-tete{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-width:0} .mod-avatar{ width:38px;height:38px;flex:0 0 38px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:14px;font-weight:700;letter-spacing:.5px;color:#fff; background:linear-gradient(120deg,#5b4bd6,#e33a9a); } .mod-carte-nom{min-width:0;flex:1} .mod-carte-nom b{ display:block;font-size:13.5px;font-weight:600;line-height:1.25; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .mod-carte-nom span{ font-size:11px;color:var(--mod-doux,rgba(127,127,127,.55)); overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block; } .mod-carte-etiq{ font-size:10px;padding:2px 7px;border-radius:9px;white-space:nowrap; border:1px solid var(--mod-bord,rgba(127,127,127,.22)); font-family:ui-monospace,Consolas,monospace; } /* Les chiffres de la carte : meme grille que les tuiles, en plus petit. */ .mod-carte-chiffres{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; } .mod-carte-chiffres > div{ padding:0 8px;border-left:1px solid var(--mod-bord,rgba(127,127,127,.22)); min-width:0; } .mod-carte-chiffres > div:first-child{border-left:none;padding-left:0} .mod-carte-chiffres .v{ font-size:16px;font-weight:400;line-height:1.2; font-variant-numeric:tabular-nums;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;display:block; } .mod-carte-chiffres .l{ font-size:10px;color:var(--mod-doux,rgba(127,127,127,.55)); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block; } .mod-carte-chiffres .mal .v{color:var(--mod-rouge,#b3261e)} .mod-carte-chiffres .ok .v{color:var(--mod-vert,#0b6b3a)} .mod-carte-pied{ margin-top:9px;padding-top:8px; border-top:1px solid var(--mod-bord,rgba(127,127,127,.22)); font-size:11px;color:var(--mod-doux,rgba(127,127,127,.55)); display:flex;gap:8px;align-items:center;flex-wrap:wrap; } @media (max-width:420px){ .mod-cartes{grid-template-columns:1fr} } /* ---- une fenetre par-dessus l'ecran ------------------------------------ */ /* Elle sort du flux : le formulaire qu'elle porte n'occupe plus une colonne entiere en permanence pour un geste que l'on fait quelques fois par jour. Ouverte, elle empeche la page de defiler derriere -- sinon on perd la fenetre de vue en touchant la molette. */ .mod-fenetre{ position:fixed;inset:0;z-index:1200;display:none; background:rgba(8,5,22,.62); padding:20px;overflow:auto; -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); } .mod-fenetre.ouverte{display:block} body.mod-fige{overflow:hidden} .mod-fenetre-cadre{ max-width:560px;margin:6vh auto; border:1px solid var(--mod-bord,rgba(127,127,127,.22));border-radius:12px; background:var(--mod-fond,#fff); box-shadow:0 18px 50px rgba(8,5,22,.45); overflow:hidden; } .mod-fenetre-tete{ display:flex;align-items:center;gap:10px; padding:12px 16px;border-bottom:1px solid var(--mod-bord,rgba(127,127,127,.22)); background:var(--mod-panneau,rgba(127,127,127,.10)); } .mod-fenetre-tete h3{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:9px} .mod-fenetre-tete .fermer{ margin-left:auto;border:none;background:transparent;cursor:pointer; font-size:20px;line-height:1;padding:2px 6px; color:var(--mod-doux,rgba(127,127,127,.55)); } .mod-fenetre-tete .fermer:hover{color:inherit} .mod-fenetre-corps{padding:14px 16px} .mod-fenetre-pied{ padding:12px 16px;border-top:1px solid var(--mod-bord,rgba(127,127,127,.22)); display:flex;gap:10px;align-items:center;flex-wrap:wrap; } .mod-fenetre-pied .btn{padding:7px 16px} /* Une ligne de formulaire : le libelle, son champ, et l'explication qui va dessous plutot qu'a cote -- sur telephone, deux colonnes ne tiennent pas. */ .mod-ligne{margin-bottom:12px} .mod-ligne > label{ display:block;font-size:12px;font-weight:600;margin-bottom:4px; } .mod-ligne .form-control,.mod-ligne select{width:100%} .mod-ligne .aide{ display:block;font-size:11px;line-height:1.5;margin-top:4px; color:var(--mod-doux,rgba(127,127,127,.55)); } .mod-deux{display:grid;gap:12px;grid-template-columns:1fr 1fr} @media (max-width:520px){ .mod-deux{grid-template-columns:1fr} } /* ---- les onglets -------------------------------------------------------- */ .mod-onglets{ display:flex;gap:2px;flex-wrap:wrap;align-items:center; border-bottom:1px solid var(--mod-bord,rgba(127,127,127,.22));margin-bottom:12px; } .mod-onglets a{ padding:8px 14px;font-size:12.5px;font-weight:600; letter-spacing:.5px;text-transform:uppercase; color:var(--mod-doux,rgba(127,127,127,.55));text-decoration:none; border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap; } .mod-onglets a:hover{color:inherit} .mod-onglets a.actif{color:inherit;border-bottom-color:var(--mod-accent,#1f6feb)} .mod-onglets .droite{margin-left:auto;display:flex;gap:8px;align-items:center} /* ---- l'en-tete d'une fiche individuelle -------------------------------- */ /* Un chiffre de tete, le nom, puis le reste en petit. L'ordre est voulu : on ouvre la fiche d'une personne, et la premiere chose a savoir est le poids qu'elle pese. */ .mod-identite{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; margin:0 0 14px;padding-bottom:12px; border-bottom:1px solid var(--mod-bord,rgba(127,127,127,.22)); } .mod-identite .part{ font-size:30px;font-weight:700;line-height:1; font-variant-numeric:tabular-nums;white-space:nowrap; padding-right:14px; border-right:2px solid var(--mod-bord,rgba(127,127,127,.22)); } .mod-identite .qui{min-width:0;flex:1 1 220px} .mod-identite .qui h2{ margin:0;font-size:21px;font-weight:600;line-height:1.2; } .mod-identite .meta{ margin-top:5px;display:flex;flex-wrap:wrap;gap:4px 14px; font-size:11.5px;line-height:1.5;color:var(--mod-doux,rgba(127,127,127,.55)); } .mod-identite .meta code{font-size:11px} /* ---- un panneau dont les chiffres portent plus fort -------------------- */ .mod-groupe.gros{padding:12px 14px 14px} .mod-groupe.gros .mod-tuile{padding:3px 10px} .mod-groupe.gros .mod-tuile:first-child{padding-left:2px} .mod-groupe.gros .mod-tuile .v{font-size:26px;font-weight:400} .mod-groupe.gros .mod-tuile .l{font-size:11.5px;margin-top:3px} /* ---- une barre d'actions sous un en-tete ------------------------------- */ .mod-actions{ display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px; } .mod-actions .btn{padding:8px 16px;display:inline-flex;align-items:center;gap:8px} .mod-actions .compte{ font-size:var(--t-xs,11.5px);font-weight:700;line-height:1; padding:3px 7px;border-radius:9px; /* Mesure : un fond a .22 laissait le chiffre a 4,38:1 sur le bouton secondaire. A .34 il remonte au-dela de 4,5. */ background:rgba(0,0,0,.34); font-variant-numeric:tabular-nums; } /* ---- un cadre de fenetre elargi, pour un tableau ----------------------- */ .mod-fenetre-cadre.large{max-width:880px} /* L'historique defile dans la fenetre plutot que de l'etirer : cent lignes sortiraient de l'ecran, et le pied -- donc le bouton de fermeture -- partirait avec elles. */ .mod-defile{max-height:46vh;overflow:auto;border-radius:8px} .mod-defile table{margin-bottom:0} .mod-defile thead th{position:sticky;top:0;z-index:1; background:var(--mod-fond,#fff); box-shadow:inset 0 -1px 0 var(--mod-bord,rgba(127,127,127,.22))} .mod-chercher{width:100%;margin-bottom:8px} /* ---- une pastille de statut dans une cellule -------------------------- */ .mod-etat{ display:inline-block;font-size:10.5px;font-weight:700; letter-spacing:.4px;text-transform:uppercase; padding:2px 8px;border-radius:9px;white-space:nowrap; border:1px solid var(--mod-bord,rgba(127,127,127,.22)); color:var(--mod-doux,rgba(127,127,127,.55)); } .mod-etat.ok {border-color:var(--mod-vert,#0b6b3a); color:var(--mod-vert,#0b6b3a)} .mod-etat.att{border-color:var(--mod-orange,#a5680a);color:var(--mod-orange,#a5680a)} .mod-etat.mal{border-color:var(--mod-rouge,#b3261e); color:var(--mod-rouge,#b3261e)} /* ---- un chiffre sur lequel on peut cliquer ---------------------------- */ /* Le soulignement au survol ne suffisait pas : au repos, rien ne disait qu'il y avait quelque chose derriere. Le libelle porte donc une icone, et le nombre un pointille discret. */ .mod-tuile a{color:inherit;display:block} .mod-tuile a .v{border-bottom:1px dotted var(--mod-bord,rgba(127,127,127,.22)); display:inline-block} .mod-tuile a:hover .v{text-decoration:none;border-bottom-style:solid; border-bottom-color:currentColor} .mod-tuile a .l i{font-size:9px;opacity:.55;margin-left:3px} .mod-tuile a:hover .l i{opacity:1} /* ---- le mot d'accueil --------------------------------------------------- */ .mod-mot{ display:flex;gap:14px;align-items:flex-start; border:1px solid var(--mod-bord,rgba(127,127,127,.22));border-radius:12px; background:var(--mod-panneau,rgba(127,127,127,.10)); padding:14px 16px;margin:0 0 14px; } .mod-mot .ic{ width:46px;height:46px;flex:0 0 46px;border-radius:12px; display:flex;align-items:center;justify-content:center;font-size:21px; background:rgba(127,127,127,.16); } .mod-mot .txt{min-width:0} .mod-mot h2{ margin:0 0 3px;font-size:19px;font-weight:600;line-height:1.2; } .mod-mot p{margin:0;font-size:13px;line-height:1.55;max-width:64ch} .mod-mot p.fort{font-size:14.5px;font-weight:600;margin-bottom:2px} .mod-mot p.petit{ font-size:11.5px;margin-top:5px;color:var(--mod-doux,rgba(127,127,127,.55)); } /* Le ton colore le pictogramme et la phrase forte, rien d'autre : le fond reste celui des autres panneaux, sans quoi l'ecran se met a clignoter. */ .mod-mot.tete .ic{background:rgba(138,97,20,.20);color:var(--mod-orange,#8a6114)} .mod-mot.tete p.fort{color:var(--mod-orange,#8a6114)} .mod-mot.haut .ic{background:rgba(11,107,58,.18);color:var(--mod-vert,#0b6b3a)} .mod-mot.haut p.fort{color:var(--mod-vert,#0b6b3a)} .mod-mot.rien .ic{color:var(--mod-doux,rgba(127,127,127,.55))} .mod-mot.rien p.fort{color:var(--mod-doux,rgba(127,127,127,.55));font-weight:500} /* ---- un avertissement adresse a quelqu'un ------------------------------- */ /* Meme forme que le mot d'accueil -- pictogramme, titre, texte -- pour qu'il se lise du meme geste. Ce qui change est le filet de gauche, en pleine couleur : c'est lui qui dit, avant meme le titre, que celui-ci n'est pas un panneau de plus. */ .mod-avis{ display:flex;gap:14px;align-items:flex-start; border:1px solid var(--mod-bord,rgba(127,127,127,.22)); border-left:4px solid var(--mod-doux,rgba(127,127,127,.55)); border-radius:12px;padding:14px 16px;margin:0 0 14px; background:var(--mod-panneau,rgba(127,127,127,.10)); } .mod-avis .ic{ width:42px;height:42px;flex:0 0 42px;border-radius:12px; display:flex;align-items:center;justify-content:center;font-size:19px; background:rgba(127,127,127,.16); } .mod-avis .txt{min-width:0} .mod-avis h3{margin:0 0 4px;font-size:15px;font-weight:700;line-height:1.25} .mod-avis p{margin:0;font-size:13px;line-height:1.6;max-width:70ch} .mod-avis .gestes{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap} .mod-avis .gestes .btn{padding:6px 14px;font-size:12.5px} .mod-avis.grave{border-left-color:var(--mod-rouge,#b3261e);background:var(--mod-surf-err,rgba(179,38,30,.08))} .mod-avis.grave h3,.mod-avis.grave .ic{color:var(--mod-rouge,#b3261e)} .mod-avis.attention{border-left-color:var(--mod-orange,#8a6114);background:var(--mod-surf-att,rgba(138,97,20,.08))} .mod-avis.attention h3,.mod-avis.attention .ic{color:var(--mod-orange,#8a6114)} .mod-avis.stock{border-left-color:var(--mod-bleu,#1a56c4);background:var(--mod-surf-info,rgba(26,86,196,.08))} .mod-avis.stock h3,.mod-avis.stock .ic{color:var(--mod-bleu,#1a56c4)} /* L'appel a l'action du mot d'accueil : la phrase qui demande quelque chose, distinguee de celles qui constatent. */ .mod-mot p.appel{font-size:13px;font-weight:600;margin-top:3px} .mod-mot.tete p.appel{color:var(--mod-vert,#0b6b3a)} .mod-mot.haut p.appel,.mod-mot.milieu p.appel{color:var(--mod-bleu,#1a56c4)} /* ---- sur telephone ------------------------------------------------------ */ @media (max-width:750px){ .mod-avis{padding:12px} .mod-avis .ic{width:34px;height:34px;flex:0 0 34px;font-size:16px} .mod-entete h2{font-size:17px} .mod-identite .part{font-size:26px;border-right:none;padding-right:0} .mod-groupe.gros .mod-tuile .v{font-size:19px} .mod-entete-actions{margin-left:0;width:100%} .mod-tuile .v{font-size:21px} .mod-pastille .n{font-size:18px} .mod-onglets a{padding:7px 10px;font-size:11.5px} .mod-fenetre{padding:0} .mod-fenetre-cadre,.mod-fenetre-cadre.large{margin:0;border-radius:0; min-height:100vh;max-width:none} .mod-defile{max-height:none} .mod-actions .btn{flex:1 1 140px;justify-content:center} .mod-mot{padding:12px} .mod-mot .ic{width:36px;height:36px;flex:0 0 36px;font-size:17px} .mod-mot h2{font-size:17px} } /* ========================================================================= Rattrapage des composants herites ------------------------------------------------------------------------- Mikhmon peint ses pastilles avec des fonds clairs et satures, sous l'encre par defaut du theme -- presque blanche. Mesures avant correction : 1,48:1 sur le jaune, 1,93 sur le turquoise, 2,49 sur le bleu. Une encre sombre passe partout : 11,5 sur le jaune, 8,8 sur le turquoise, 6,9 sur le bleu. Le violet de l'accent est le seul fond assez fonce pour garder du blanc. ========================================================================= */ .box.bg-yellow, .box.bg-teal, .box.bg-info, .box.bg-blue, .box.bg-green, .box.bg-red, .box.bg-grey, .box.bg-warning, .box.bg-success, .box.bg-danger, .box.bg-cyan, .box.bg-light-blue, .box.bg-orange, .bg-yellow > .box-group, .bg-teal > .box-group, .bg-info > .box-group, .bg-green > .box-group, .bg-red > .box-group, .bg-grey > .box-group, .bg-blue > .box-group, .bg-cyan > .box-group, .bg-light-blue > .box-group{ color:var(--mod-encre-vive,#141019); } .box.bg-yellow *, .box.bg-teal *, .box.bg-info *, .box.bg-blue *, .box.bg-green *, .box.bg-red *, .box.bg-grey *, .box.bg-warning *, .box.bg-success *, .box.bg-danger *, .box.bg-cyan *, .box.bg-light-blue *, .box.bg-orange *, .bg-yellow > .box-group *, .bg-teal > .box-group *, .bg-info > .box-group *, .bg-green > .box-group *, .bg-red > .box-group *, .bg-grey > .box-group *, .bg-blue > .box-group *, .bg-cyan > .box-group *, .bg-light-blue > .box-group *{ color:inherit; } /* Les bandeaux de message : meme probleme, meme remede. */ .bg-danger, .bg-success, .bg-warning, .bg-info{ color:var(--mod-encre-vive,#141019) } .bg-danger a, .bg-success a, .bg-warning a, .bg-info a{ color:inherit } /* ---- champs et boutons : un bord qu'on voit ---------------------------- Le seuil des composants est 3:1, pas 4,5 : ce n'est pas du texte. Les bords mesuraient 1,87:1, et 1 sur les boutons -- c'est-a-dire aucun. */ .form-control, input[type=text], input[type=number], input[type=password], input[type=date], input[type=search], select, textarea{ border:1px solid var(--mod-bord-champ,rgba(15,20,35,.42)); color:var(--mod-texte,#1f2430); font-size:var(--t-md,14px); } .form-control::placeholder, input::placeholder, textarea::placeholder{ color:var(--mod-doux,#5f6674); opacity:1; } .form-control:hover, select:hover, textarea:hover{ border-color:var(--mod-bord-champ-vif,rgba(15,20,35,.62)); } .form-control:focus, input:focus, select:focus, textarea:focus, button:focus, .btn:focus, a.menu:focus{ outline:2px solid var(--mod-accent,#7a2fae); outline-offset:1px; } /* Le focus au clavier seul, quand le navigateur sait le distinguer : le halo ne doit pas surgir sur un simple clic. */ @supports selector(:focus-visible){ .form-control:focus, input:focus, select:focus, textarea:focus, button:focus, .btn:focus, a.menu:focus{ outline:none } .form-control:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .btn:focus-visible, a.menu:focus-visible, a:focus-visible{ outline:2px solid var(--mod-accent,#7a2fae); outline-offset:1px; } } /* Desactive : la couleur seule ne le dirait pas assez. */ .form-control:disabled, input:disabled, select:disabled, textarea:disabled, .btn:disabled, button:disabled, .btn.disabled{ opacity:.55; cursor:not-allowed; border-style:dashed; } /* ---- boutons : un seul accent, le reste neutre ------------------------- */ .btn{ font-size:var(--t-md,14px); border:1px solid transparent } .btn.bg-primary{ background:var(--mod-accent,#7a2fae); color:var(--mod-accent-ink,#fff); border-color:var(--mod-accent,#7a2fae); } .btn.bg-secondary{ border-color:var(--mod-bord-champ,rgba(15,20,35,.42)); } .btn:hover{ filter:brightness(1.08) } .btn:active{ filter:brightness(.94) } /* ---- tableaux : des lignes qu'on suit ---------------------------------- */ .table{ font-size:var(--t-md,14px) } .table th{ font-size:var(--t-sm,12.5px); font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--mod-doux,#5f6674); } .table td, .table th{ border-color:var(--mod-bord,rgba(15,20,35,.16)) } .table-hover tbody tr:hover{ background:var(--mod-panneau,rgba(15,20,35,.05)) } /* ---- rien de necessaire sous 12 px ------------------------------------- Les mentions accessoires descendaient a 8,8 px. On les remonte au plus petit palier de l'echelle : elles restent discretes, elles se lisent. */ .table td span[style*="font-size:10"], .table td span[style*="font-size:11"]{ font-size:var(--t-xs,11.5px); } /* Un bandeau peut porter la classe seule, sans `.box` ni `.box-group` : `
` sur l'ecran des objectifs. La liste ci-dessous ne retient que les fonds CLAIRS -- l'accent violet, lui, garde son encre blanche, qui y tient a 5,9:1. */ .bg-yellow, .bg-teal, .bg-info, .bg-blue, .bg-green, .bg-red, .bg-grey, .bg-warning, .bg-success, .bg-danger, .bg-cyan, .bg-light-blue, .bg-orange{ color:var(--mod-encre-vive,#141019); } .bg-yellow > *, .bg-teal > *, .bg-info > *, .bg-blue > *, .bg-green > *, .bg-red > *, .bg-grey > *, .bg-warning > *, .bg-success > *, .bg-danger > *, .bg-cyan > *, .bg-light-blue > *, .bg-orange > *{ color:inherit } /* Le lien de fermeture d'une fenetre heritee tombait a 4,35:1 sur le rouge. */ a.modal-close{ color:var(--mod-encre-vive,#141019) } /* ---- un plancher de taille ------------------------------------------- Rien de ce qu'il faut lire ne descend sous 11,5 px. Les feuilles heritees descendaient a 9 px pour un libelle de case a cocher. */ body, .card-body, .table td, .table th, p, li, label, td, th{ font-size:inherit; } body{ font-size:var(--t-md,14px) } .card-body{ font-size:var(--t-md,14px) } h1{ font-size:var(--t-xxl,21px) } h2{ font-size:var(--t-xl,19px) } h3, .card-title{ font-size:var(--t-lg,16px) } small, .small{ font-size:var(--t-sm,12.5px) } label{ font-size:var(--t-sm,12.5px) } /* ---- boutons de statut ------------------------------------------------- `bg-danger` sur un bouton ne peignait rien : la classe ne valait que pour les bandeaux. Un bouton qui detruit doit se voir avant qu'on le clique. La couleur ne suffit pas a le dire -- le libelle porte toujours le verbe, et l'icone le geste. */ .btn.bg-danger, button.bg-danger{ background:var(--mod-rouge,#b3261e); color:var(--mod-fond,#fff); border-color:var(--mod-rouge,#b3261e); } .btn.bg-success, button.bg-success{ background:var(--mod-vert,#0b6b3a); color:var(--mod-fond,#fff); border-color:var(--mod-vert,#0b6b3a); } .btn.bg-warning, button.bg-warning{ background:var(--mod-orange,#8a6114); color:var(--mod-fond,#fff); border-color:var(--mod-orange,#8a6114); } /* Les groupes de champs herites : leur fond etait pose a la main, sans rapport avec le theme. */ .group-item{ background:var(--mod-panneau,rgba(15,20,35,.05)); border:1px solid var(--mod-bord-champ,rgba(15,20,35,.42)); color:var(--mod-texte,#1f2430); } /* ---- le plancher, jusque dans les feuilles heritees -------------------- Les en-tetes de tableau et les `` heritent d'une taille RELATIVE (.8em, .9em) : ils retombaient a 10,1 et 11,2 px sous le plancher. On les fixe, plutot que de les laisser suivre leur parent. */ .table th, table th{ font-size:var(--t-sm,12.5px) !important } code, kbd, samp{ font-size:var(--t-xs,11.5px) } .mod-tuile .l, .mod-tuile .u, .mod-carte .l, .mod-carte-etiq, .mod-carte-pied, .mod-pastille .tx span{ font-size:var(--t-xs,11.5px) } /* ---- les bandeaux d'alerte -------------------------------------------- Un bandeau est un `div` qui porte la classe SEULE : ni `.box` (les tuiles de chiffres, qui restent pleines), ni `.btn` (les boutons de statut, traites plus haut). Le filet de gauche fait le travail que la teinte faisait a pleine puissance, et le texte reprend l'encre courante -- lisible sans avoir a etre sombre sur un fond criard. */ div.bg-warning:not(.box):not(.btn), div.bg-yellow:not(.box):not(.btn), div.bg-danger:not(.box):not(.btn), div.bg-red:not(.box):not(.btn), div.bg-success:not(.box):not(.btn), div.bg-green:not(.box):not(.btn), div.bg-info:not(.box):not(.btn), div.bg-blue:not(.box):not(.btn){ border-radius:var(--r-md,10px); border:1px solid var(--mod-bord,rgba(15,20,35,.16)); border-left-width:4px; color:var(--mod-texte,#1f2430); } div.bg-warning:not(.box):not(.btn), div.bg-yellow:not(.box):not(.btn){ background:var(--mod-surf-att,#fdf3e0); border-left-color:var(--mod-orange,#8a6114); } div.bg-danger:not(.box):not(.btn), div.bg-red:not(.box):not(.btn){ background:var(--mod-surf-err,#fdeceb); border-left-color:var(--mod-rouge,#b3261e); } div.bg-success:not(.box):not(.btn), div.bg-green:not(.box):not(.btn){ background:var(--mod-surf-ok,#e8f5ee); border-left-color:var(--mod-vert,#0b6b3a); } div.bg-info:not(.box):not(.btn), div.bg-blue:not(.box):not(.btn){ background:var(--mod-surf-info,#e9f0fd); border-left-color:var(--mod-bleu,#1a56c4); } /* L'icone reprend la couleur pleine : la teinte du fond ne suffit pas a dire de quoi il s'agit, et une couleur seule ne doit jamais porter l'information. */ div.bg-warning:not(.box):not(.btn) > i:first-child, div.bg-yellow:not(.box):not(.btn) > i:first-child, div.bg-warning:not(.box):not(.btn) i.fa-warning, div.bg-yellow:not(.box):not(.btn) i.fa-warning{ color:var(--mod-orange,#8a6114); } div.bg-danger:not(.box):not(.btn) i.fa, div.bg-red:not(.box):not(.btn) i.fa{ color:var(--mod-rouge,#b3261e) } div.bg-success:not(.box):not(.btn) i.fa, div.bg-green:not(.box):not(.btn) i.fa{ color:var(--mod-vert,#0b6b3a) } div.bg-info:not(.box):not(.btn) i.fa, div.bg-blue:not(.box):not(.btn) i.fa{ color:var(--mod-bleu,#1a56c4) } /* ========================================================================= Les cinq themes livres avec Mikhmon ------------------------------------------------------------------------- Aurore declare la palette ; les autres non, et leurs propres classes utilitaires portaient des couleurs choisies avant que le contraste soit une question. Mesures : `.text-green` a 2,37:1 sur blanc, l'encre d'un bouton secondaire a 3,62:1, celle d'un en-tete de carte a 3,39:1, et les en-tetes de tableau posés a 60 % d'opacite a 4,28:1. On les corrige ici, dans la couche qui se charge en dernier, plutot que dans cinq fichiers minifies que personne ne relira. ========================================================================= */ .text-green,.text-success{ color:var(--mod-vert,#0b6b3a) !important } .text-red,.text-danger{ color:var(--mod-rouge,#b3261e) !important } .text-yellow,.text-warning,.text-orange{ color:var(--mod-orange,#8a6114) !important } .text-blue,.text-info,.text-primary{ color:var(--mod-bleu,#1a56c4) !important } .text-muted,.text-grey{ color:var(--mod-doux,#5f6674) !important } /* Un bouton secondaire : neutre, mais lisible. L'encre sombre tient a 4,71:1 sur le gris du theme, la blanche a 3,99 seulement. */ .btn.bg-secondary, .bg-secondary{ color:var(--mod-encre-vive,#141019); } /* Les en-tetes de carte etaient peints en aplat sature -- un bleu #008bc9 sous une encre grise, 2,82:1 -- et chaque theme avait le sien. Ils deviennent une surface neutre, comme les panneaux du modele : un titre n'a pas besoin d'un aplat pour se distinguer, il a besoin d'un filet et d'une graisse. Au passage, la palette de l'application perd une couleur de plus. */ .card-header{ background:var(--mod-panneau,rgba(15,20,35,.05)) !important; color:var(--mod-texte,#1f2430) !important; border-bottom:1px solid var(--mod-bord,rgba(15,20,35,.16)); } .card-header .card-title, .card-header h3, .card-header a, .card-header i{ color:var(--mod-texte,#1f2430) !important; } .card-header .card-title{ font-weight:600 } /* La pastille de compte d'un bouton : elle s'assombrit sur son bouton, et son encre doit suivre le bouton, pas la page. Mesure : l'encre vive y tombait a 2,48:1. */ /* Une puce pleine, la meme sur tous les boutons : eclaircir ou assombrir le fond du bouton donnait un contraste different a chaque theme, et toujours trop faible -- 2,48:1 au pire, 4,14 au mieux. */ .mod-actions .btn .compte{ color:#fff; background:#141019 } /* Les en-tetes de tableau etaient poses a 60 % d'opacite, ce qui les ramenait sous le seuil. La couleur douce de la palette dit la meme chose -- un libelle, pas une donnee -- et se lit. */ .table th, table th{ opacity:1 !important; color:var(--mod-doux,#5f6674) !important } /* ---- les liens du contenu --------------------------------------------- Les themes clairs peignaient tous les liens d'un gris presque blanc, prevu pour un fond sombre : 1,1:1 sur une carte blanche. La couleur d'information de la palette dit « lien » et se lit partout. Les elements qui ne sont des liens que par leur balise -- boutons, menus, cartes, tuiles -- gardent la leur. */ .card-body a:not(.btn):not(.menu):not(.mod-carte):not(.mod-pastille):not(.connect){ color:var(--mod-bleu,#1a56c4); } .card-body a:not(.btn):not(.menu):not(.mod-carte):not(.mod-pastille):hover{ text-decoration:underline; } .mod-tuile a, .mod-carte, .mod-pastille{ color:inherit } /* Un lien pose SUR une surface coloree garde l'encre de cette surface : la couleur d'information de la palette y tombait a 1,11:1 -- un bleu clair sur du jaune. Cette regle vient apres, et gagne. */ .card-body .box a, .card-body .box-group a, .card-body .box-group span, .card-body div.bg-yellow a, .card-body div.bg-teal a, .card-body div.bg-info a, .card-body div.bg-blue a, .card-body div.bg-green a, .card-body div.bg-red a, .card-body div.bg-grey a, .card-body div.bg-warning a, .card-body div.bg-success a, .card-body div.bg-danger a{ color:inherit !important } /* Les champs de date et les boutons de filtre : ils echappaient a la regle des champs, l'un par son type, l'autre parce qu'un `.btn` sans classe de couleur n'a ni fond ni bord. */ input[type=date], input[type=month], input[type=time], input[type=datetime-local], input[type=email], input[type=tel], input[type=url]{ border:1px solid var(--mod-bord-champ,rgba(15,20,35,.55)); background:var(--mod-panneau,rgba(15,20,35,.05)); color:var(--mod-texte,#1f2430); } .btn:not(.bg-primary):not(.bg-secondary):not(.bg-danger):not(.bg-success):not(.bg-warning){ border:1px solid var(--mod-bord-champ,rgba(15,20,35,.55)); } /* ========================================================================= La barre de selection ------------------------------------------------------------------------- Un tableau de mille lignes portait deux boutons par ligne : deux mille cibles pour trois gestes. Les gestes remontent au-dessus du tableau, ou ils s'appliquent a ce qu'on a coche. La barre reste en place quand rien n'est coche -- elle disparaitrait et reapparaitrait a chaque clic, et la page sauterait. Ce sont les BOUTONS qui s'eteignent. ========================================================================= */ .mod-selection{ display:flex; align-items:center; gap:var(--e-2,8px); flex-wrap:wrap; padding:var(--e-2,8px) var(--e-3,12px); margin:0 0 var(--e-2,8px); border:1px solid var(--mod-bord,rgba(15,20,35,.16)); border-radius:var(--r-md,10px); background:var(--mod-panneau,rgba(15,20,35,.05)); } .mod-selection.active{ border-color:var(--mod-accent,#7a2fae) } .mod-selection .tout{ display:inline-flex; align-items:center; gap:var(--e-2,8px); font-size:var(--t-sm,12.5px); cursor:pointer; user-select:none; padding-right:var(--e-3,12px); border-right:1px solid var(--mod-bord,rgba(15,20,35,.16)); } .mod-selection .compte{ font-size:var(--t-sm,12.5px); font-weight:600; font-variant-numeric:tabular-nums; min-width:11ch; } .mod-selection .compte.vide{ color:var(--mod-doux,#5f6674); font-weight:400 } .mod-selection .actes{ display:flex; gap:var(--e-2,8px); flex-wrap:wrap; margin-left:auto } .mod-selection .btn{ padding:5px 13px; font-size:var(--t-sm,12.5px); margin:0 } /* Eteint : gris, curseur barre, ET trait discontinu. La couleur seule ne dirait pas assez qu'un bouton ne repond plus. */ .mod-selection .btn[disabled]{ opacity:.5; cursor:not-allowed; border-style:dashed; filter:none; } .mod-selection .aide{ flex-basis:100%; font-size:var(--t-xs,11.5px); color:var(--mod-doux,#5f6674); line-height:1.5; } /* La colonne de cases : etroite, centree, et la ligne cochee se voit. */ .table td.mod-coche, .table th.mod-coche{ width:36px; min-width:36px; text-align:center; padding-left:6px; padding-right:6px; } .mod-coche input[type=checkbox]{ width:16px; height:16px; cursor:pointer; margin:0 } .table tbody tr.choisi > td{ background:var(--mod-surf-info,rgba(147,197,253,.13)); } .table tbody tr.choisi > td:first-child{ box-shadow:inset 3px 0 0 var(--mod-accent,#7a2fae); } /* Le compte-rendu d'une action par lot, au retour. */ .mod-bilan{ margin:0 0 var(--e-3,12px) } /* ---- la carte d'un routeur --------------------------------------------- Sa couleur etait tiree au sort a chaque affichage. Elle ne disait rien, et le tirage faisait varier le contraste du texte -- 4,9:1 un jour, 3,47 le lendemain. Une surface neutre, et le pictogramme en accent : c'est lui qu'on vient cliquer. */ .box.mod-carte-routeur{ background:var(--mod-panneau,rgba(15,20,35,.05)) !important; color:var(--mod-texte,#1f2430) !important; border:1px solid var(--mod-bord,rgba(15,20,35,.16)); } .box.mod-carte-routeur a, .box.mod-carte-routeur .connect{ color:var(--mod-accent,#7a2fae) !important; } .box.mod-carte-routeur .box-group-icon{ color:var(--mod-accent,#7a2fae) } /* ========================================================================= Les chiffres d'une carte deviennent cliquables ------------------------------------------------------------------------- La carte etait un lien enveloppant tout. Un lien dans un lien n'est pas du HTML : l'enveloppe redevient un `div`, l'en-tete porte le lien vers le profil, et chaque chiffre devient un bouton qui ouvre son detail. ========================================================================= */ /* Le trait d'un ratio se lit mieux en retrait : « 25 / 80 », pas « 25/80 » ou les deux nombres se confondent. */ .mod-carte-chiffres .v .sur{ opacity:.45; font-weight:300; margin:0 1px; } /* ---- deux chiffres, puis la barre d'ecoulement ------------------------- */ /* Mesure : une carte fait 374 px. A trois colonnes, chacune en recevait 115 quand les libelles en reclamaient 164 -- tout etait coupe. A deux, ils tiennent. */ .mod-carte-chiffres{ grid-template-columns:repeat(2,1fr) } /* Dans un `