/* COPIE AUTOMATIQUE DE public/base/elements-retenus.css -- NE PAS EDITER ICI.
La source est au banc ; `python tools/base/porter_reprise.py` refait
cette copie, et son mode `verifier` signale toute divergence. */
/* =========================================================================
CE QUE CETTE FEUILLE LIT SANS LE POSER — le contrat
=========================================================================
`--row-rgb` la teinte d'une ligne de liste ; posee par quinze gabarits et
par `admin-dashboard.css`, et desormais par `socle-retenu.css`
pour le cas ou personne ne la pose : elle vaut `--teinte-bleue`.
`--step-rgb` la teinte de l'etape en cours ; posee par `journey.css`, sept
fois. Absente, `--second-teinte` tombe et le bouton second
reprend son filet blanc : la ligne reste lisible.
`--pastille-rgb` la teinte d'une pastille ; posee douze fois ci-dessous et
par `lk.css` et `journey.css`. C'est un POINT D EXTENSION :
toute variante qui veut sa couleur n'a qu'a la nommer, et
celle qui n'en veut pas ne casse rien -- sa declaration tombe.
========================================================================= */
/* =========================================================================
LES ELEMENTS RETENUS
=========================================================================
LA DEUXIEME DES TROIS COUCHES. Les jetons disent des VALEURS
(`socle-retenu.css`), cette feuille dit des RECETTES, et la feuille de page
ne dit plus que ce qui est propre a un ecran. L'ordre de chargement est
toujours le meme, donc deux feuilles de page ne peuvent jamais se battre.
CE QUI ENTRE ICI, ET LE TEST. Une recette y a sa place quand elle designe un
ROLE qu'on retrouve sur plusieurs ecrans. « Le pied de bloc » et
« Enregistrer » le sont : mesure faite, il y a trois pieds sur le seul
tableau de bord praticien, et trente boutons « Enregistrer » dans les
gabarits. Les laisser dans une feuille de page aurait garanti qu'une
deuxieme page les redefinisse un peu differemment.
L ECHELLE DES ACTIONS, telle qu'elle sort des bancs :
l'APLAT cyan ce qui fait AVANCER, une seule chose par ecran
l'ardoise BORDEE ce qui ENGAGE un changement, autant que de
formulaires
le LIEN cyan ce qui mene AILLEURS
le rouge ce qui DETRUIT
Ce classement ne parle pas d'importance mais de NATURE du geste, ce qui evite
d'avoir a arbitrer page par page.
========================================================================= */
/* --- Le pied de bloc : un lien, pas un bouton ----------------------------
-------------------------------------------------------------------------
Retenu sur `pied-de-bloc.html`, cas F5.
POURQUOI PLUS DE BOUTON. Un aplat gris pese autant qu'un vrai bouton
d'action alors que ces liens-la ne font que DEPLACER. Sur le tableau de bord
ils ajoutaient des surfaces pleines a onze deja colorees, et ne se
rattachaient a rien : ni au contenu du bloc, ni aux boutons de ligne, ni au
cyan du produit.
POURQUOI LE CYAN ET PAS LE BLANC. Le blanc a 74 % tombe exactement sur la
valeur des libelles d'activite voisins : le pied s'y noyait. Le cyan est la
seule chose cyan du bas de page, donc reperable d'un coup, et il ne peut pas
etre pris pour un statut : les statuts sont bleu, turquoise et vert, et ils
vivent sur les rails de ligne, jamais en texte nu.
ET LA REGLE DU CYAN RESERVE TIENT. Elle vise ce qui est CERCLE : une seule
chose cerclee de cyan par page. En texte, l'accent ne couvre que des
jambages, c'est son usage le moins couteux.
------------------------------------------------------------------------- */
.dashboard-card__foot .dashboard-card__link {
background: none;
border: 0;
padding-left: 0;
padding-right: 0;
/* L ENCRE DE L ACCENT, PAS SA SURFACE. En sombre les deux jetons sont le
meme cyan et l'ecart ne se voyait pas ; en clair `--portal-accent-rgb`
devient l'or des aplats (214, 175, 74), qui rend 1,84 sur le fond de
page. Huit liens de pied de carte, sur le tableau de bord de
l'administration et sur celui du praticien. */
color: rgb(var(--accent-texte-rgb, var(--portal-accent-rgb)));
font-weight: var(--graisse-moyenne);
}
/* L ECART EST UN PADDING, PAS UNE MARGE. Une marge appartiendrait a la ligne du
parent, et un soulignage la traverserait pour aller mourir sous la fleche. Un
padding est a l'interieur du bloc en ligne atomique, ou le trait n'entre pas.
La fleche est un signe de direction, pas une lettre du libelle. */
.dashboard-card__foot .dashboard-card__link::after {
content: "›";
display: inline-block;
padding-left: .38em;
opacity: .8;
transition: transform .16s;
}
/* DEUX SIGNAUX AU SURVOL, et il en faut deux : un chevron qui avance de 3 px
est trop discret seul. Le libelle PALIT vers le blanc, parce que le cyan pur
est deja au maximum de sa vivacite : monter ne peut vouloir dire qu'aller
vers le blanc, ce qui sur fond sombre est un gain de contraste. La teinte ne
change pas, seule sa saturation baisse.
PAS DE SOULIGNAGE : il rendait le pied plus bavard que le contenu qu'il
termine, et ramenait une ligne horizontale de plus sur une page qui vient
d'en perdre partout. */
/* LE SURVOL S ECLAIRCIT SUR SOMBRE ET DOIT S ASSOMBRIR SUR CLAIR : melanger
vers la lumiere sur un sol clair rapproche l'encre de son fond au lieu de
l'en detacher. `--texte-vif` est l'encre qui se lit sur le sol courant, donc
le melange va dans le bon sens des deux cotes. */
.dashboard-card__foot .dashboard-card__link:hover {
color: color-mix(in srgb,
rgb(var(--accent-texte-rgb, var(--portal-accent-rgb))) 68%,
var(--texte-vif, var(--lumiere)));
}
.dashboard-card__foot .dashboard-card__link:hover::after {
transform: translateX(3px);
opacity: 1;
}
/* L enfoncement est le seul moment ou un element a le droit de PERDRE en
presence : il confirme que le clic est pris, il n'appelle plus. */
.dashboard-card__foot .dashboard-card__link:active {
color: color-mix(in srgb, rgb(var(--portal-accent-rgb)) 78%, var(--accent-sombre));
}
/* UN BOUTON INACTIF PERD SA RAMPE. Elle dit « ceci part » ; sur un bouton
qu'on ne peut pas presser, elle ment. Le plein retombe sur l'aplat neutre. */
.appel-anime.est-inactif,
.appel-anime:disabled,
.bouton--appel.est-inactif,
.bouton--appel:disabled,
.diagnostic-viewer-tool-btn--primary:disabled,
.lk-content .therapy-submit-btn:disabled {
background: rgba(var(--white-rgb), var(--voile-4));
border-color: transparent;
}
.appel-anime.est-inactif::before,
.appel-anime:disabled::before,
.bouton--appel.est-inactif::before,
.bouton--appel:disabled::before,
.diagnostic-viewer-tool-btn--primary:disabled::before,
.lk-content .therapy-submit-btn:disabled::before {
content: none;
}
@media (prefers-reduced-motion: reduce) {
.dashboard-card__foot .dashboard-card__link::after { transition: none; }
.dashboard-card__foot .dashboard-card__link:hover::after { transform: none; }
}
/* --- « Enregistrer » : PERIME, la famille ordinaire s'en charge -----------
-------------------------------------------------------------------------
CE QUI ETAIT ECRIT ICI, et pourquoi ce n'est plus vrai.
Cette section posait une ardoise opaque a 92 %, retenue sur
`bouton-enregistrer.html` cas E5, avec un argument qui tenait : plusieurs
ecrans portent DEUX OU TROIS « Enregistrer » (facturation, reglages,
traductions, profil, boutique), ce n'est pas l'action vedette d'une page mais
la validation d'UN formulaire, et l'aplat cyan ferait trois vedettes sur une
page de reglages.
CET ARGUMENT VISAIT L APLAT, ET IL RESTE JUSTE CONTRE LUI. Mais la hierarchie
arretee le 28/08 compte TROIS niveaux, pas deux : l'aplat presque plein pour
ce qui fait avancer, le cyan VOILE a 16 % pour le secondaire important, le
voile blanc pour le secondaire discret. « Enregistrer » prend le deuxieme.
Il engage sans faire avancer, et le voile a 16 % ne fait pas une vedette :
trois d'entre eux sur une page de reglages se lisent comme trois boutons de
meme poids, ce qu'ils sont.
ELLE ETAIT DEJA MORTE AVANT D ETRE RETIREE. La famille ordinaire, plus bas
dans cette feuille, pose exactement cette peau sur
`.lk-body .btn:not(:where(.btn-danger, .dashboard-card__link))`, avec la meme
specificite et plus tard dans le fichier : elle gagnait donc deja. La planche
`boutons-retenus` rendait du cyan pendant que son propre texte annonçait
l'ardoise, et c'est ce desaccord qui a mis la chose au jour.
« PUBLIER » N EST PAS DANS CETTE FAMILLE, et le croire a coute une passe.
`project-news.css` le peint en degrade bleu par une regle de meme poids
chargee APRES `lk.css` : elle gagne, quoi qu'on ecrive ici. Et ce n'est pas
un oubli, c'est une doctrine assumee dans cette feuille-la, ou la couleur dit
L ACTION et non son rang : bleu pour poster et envoyer, vert pour les
resultats, or pour les programmes, rouge pour l irreversible. Les deux
systemes se croisent sur ce bouton ; tant que ce n'est pas arbitre, on ne
laisse pas ici un selecteur qui n'a jamais rien peint.
------------------------------------------------------------------------- */
.partner-client-notifications__actions .btn[type="submit"]:not(.btn-danger) {
background: rgba(var(--portal-accent-rgb), var(--voile-5));
border: var(--filet-epaisseur) solid rgba(var(--portal-accent-rgb), var(--voile-9));
color: rgba(var(--white-rgb), var(--voile-12));
font-weight: var(--graisse-moyenne);
}
.partner-client-notifications__actions .btn[type="submit"]:not(.btn-danger):hover {
background: rgba(var(--portal-accent-rgb), var(--voile-7));
border-color: rgba(var(--portal-accent-rgb), 0.52);
color: rgba(var(--white-rgb), 0.98);
}
.partner-client-notifications__actions .btn[type="submit"]:not(.btn-danger):active {
background: rgba(var(--portal-accent-rgb), var(--voile-8));
border-color: rgba(var(--portal-accent-rgb), 0.66);
color: rgba(var(--white-rgb), 1);
}
/* --- L'interrupteur : celui du produit, piste cyan -----------------------
-------------------------------------------------------------------------
Retenu sur `interrupteur.html`, cas I3.
CE QU IL REMPLACE. Les quatre cases du bloc « Notifications » etaient
NATIVES : `appearance: auto`, donc le navigateur dessinait la boite, le
crochet et le rayon des angles, et `accent-color` etait le seul levier. Le
rendu changeait d'un systeme a l'autre alors que tout le reste de la page est
dessine par nous. Et une case DECOCHEE y etait presque invisible sur fond
sombre, alors qu'elle porte autant d'information que la cochee.
ON NE REDESSINE RIEN : la recette du curseur vient de `.partage-interrupteur`
(`diagnostic-viewer.css`), l'interrupteur du partage, valide et fige. On
reprend ses classes telles quelles, y compris le rebond du pouce. Une copie
aurait derive de son modele des la premiere retouche.
CE QUI CHANGE : la piste allumee passe du vert au CYAN. Le vert du partage
veut dire « visible par le client » dans le viewer ; ici il se serait ajoute
a la pastille « ACTIVEES » et au chiffre du bloc, soit trois verts disant
trois choses. Le cyan separe proprement : le vert dit l'ETAT du bloc, le cyan
dit ce qu'on MANIPULE.
CE QUE CETTE RECETTE DEMANDE AU BALISAGE. Un interrupteur ne se fabrique pas
en CSS seul : il faut `` suivi de ``. Le
changement est donc a porter dans les gabarits au moment de l'application ;
il est deja fait dans la maquette.
------------------------------------------------------------------------- */
.partner-client-notifications__option.partage-interrupteur {
/* La classe apporte aussi une mise en page en `inline-flex` prevue pour une
rangee d'onglets. La ligne garde la sienne. */
display: flex;
gap: 12px;
align-items: flex-start;
font-size: inherit;
color: inherit;
white-space: normal;
}
.partner-client-notifications__option .partage-interrupteur__glissiere {
margin-top: 2px;
}
.partner-client-notifications__option input:checked + .partage-interrupteur__glissiere {
background: rgb(var(--portal-accent-rgb));
border-color: rgb(var(--portal-accent-rgb));
}
/* --- La pastille : une geometrie, deux formes ----------------------------
-------------------------------------------------------------------------
Retenu sur `pastille.html` : rectangle 7 px, fond teinte 0,16.
CE QU ELLE REMPLACE. 150 noms de classes dans cette famille a travers les
feuilles (badge, pastille, chip, tag, puce). Les seules gelules ambre etaient
onze, chacune avec ses valeurs : rembourrage 2, 3, 4 ou 5 px, fond a 0,13 /
0,14 / 0,16 / 0,18, filet a 0,24 / 0,42 / 0,55. Et sur la seule page de
l'espace praticien, TROIS registres coexistaient pour trois metiers qu'on ne
distinguait justement pas.
POURQUOI LE RECTANGLE. La gelule dit « mention posee a cote » : ses bouts
ronds la detachent de tout alignement. Le rectangle dit « element parmi
d'autres » et s'aligne sur les champs, boutons et cartes, qui ont tous 10 a
12 px de rayon ici. Une rangee de tags rectangulaires se lit comme une LISTE,
la meme en gelules comme un semis. 7 px et pas 10 : la pastille fait la
moitie de la hauteur d'un champ, donc a rayon egal elle paraitrait bien plus
ronde ; 7 sur 24 px donne le meme rapport que 12 sur 42.
POURQUOI PAS L ARDOISE PLEINE, l'autre candidate. Elle pese presque autant
qu'un bouton, or « Enregistrer » porte exactement cette ardoise. Deux objets
au meme poids visuel dont l'un se clique et l'autre pas.
------------------------------------------------------------------------- */
.pastille,
.dashboard-card__state,
.journey-pill,
.partner-client-activity-state,
.partner-journey-step__status {
/* LE LIBELLE ECLAIRCI DE 18 %, ET C EST UNE MESURE.
La teinte pleine sur son propre fond a 16 % donne, quand une orbe du fond
eclaircit le bloc dessous : rouge 3,97, violet 3,93, bleu 4,18. Trois
teintes sous le seuil AA de 4,5, et ce sont celles qui portent le plus de
sens ; les cinq autres passaient entre 5,1 et 7,1.
Corriger ces trois-la une par une, c'est exactement ce qui a produit les
onze gelules ambre. 82 % de teinte amene le plus faible a 4,75 au pire
cas, sans qu'on lise un changement de couleur, et la regle couvre les
teintes qu'on n'a pas encore inventees.
LECON PLUS LARGE : sur un fond anime, un contraste ne se calcule pas sur
le fond nominal. L'orbe deplace le resultat de 0,7 point. Une capture ne
le montre jamais, parce qu'elle fige l'orbe a un endroit. */
/* UNE TEINTE PAR DEFAUT, ET CE N EST PAS UN CONFORT.
`rgba(var(--pastille-rgb), 0.16)` avec une variable NON DEFINIE n'est pas
une couleur invalide qu'on verrait : la declaration entiere est jetee, en
silence, et l'element se retrouve sans fond ni filet. C'est arrive des la
premiere application, sur `.journey-pill--done` du parcours, qui ne
nomme pas de teinte : les quatre pastilles « Effectue » se sont videes.
Le defaut neutre garantit qu'une pastille sans teinte declaree reste une
pastille. Toute variante qui veut sa couleur n'a plus qu'a nommer
`--pastille-rgb`, et celle qui n'en veut pas ne casse rien. */
--pastille-rgb: 226, 232, 240;
/* LA CIBLE DU MELANGE EST UN JETON, PAS UNE CONSTANTE. Ce libelle se
melange vers le BLANC : juste sur un sol sombre, faux sur un sol clair,
ou un vert eclairci a 82 % rend 1,41 sur son propre voile. La teinte
reste -- elle dit l'etat -- mais ce vers quoi elle s'eclaircit, et de
combien, appartiennent au theme. Ils se posent sur la racine, et ils
descendent jusqu'ici : la definition du libelle, elle, vit sur la
pastille, donc une valeur posee sur la racine ne la remplacerait pas. */
--pastille-libelle: color-mix(in srgb,
rgb(var(--pastille-rgb)) var(--pastille-part, 82%),
var(--pastille-vers, var(--texte-vif, var(--lumiere))));
/* Une pastille est une note en marge, pas un titre : assez petite pour ne
pas deteindre sur ce qu'elle qualifie, quelle que soit sa teinte. Une
couleur ne domine pas par son intensite mais par son AIRE, c'est la meme
regle que l'accent en aplat contre l'accent en filet. */
/* LE CENTRAGE VERTICAL SE FAIT SUR LA BANDE CAPITALE, PAS SUR LA BOITE.
CE QUI SE PASSAIT. Avec un rembourrage egal le texte tombait haut, et
aucun reglage de `padding` ne pouvait le corriger proprement : mesure au
canvas, la bande « haut des capitales -> ligne de base » demandait 1,69 px
de descente pour le tag et 0,56 px pour l'etat. Deux formes, deux
corrections OPPOSEES, parce que leurs hauteurs de capitale different
(9 px contre 8).
POURQUOI `align-items: center` NE SUFFIT PAS. Il centre la BOITE DE
LIGNE, qui reserve la place d'un jambage (le p, le g) meme quand le mot
n'en a pas, et cette reserve depasse la marge au-dessus des capitales. La
boite est donc bien centree, le texte ne l'est pas. Et l'ecart change avec
le MOT : « Test » tombait 1,77 px trop haut, « Suivi programme » etait
juste. Aucune valeur fixe ne pouvait convenir aux deux.
LA REPONSE EXACTE. `text-box: trim-both cap alphabetic` coupe la boite au
ras du haut des capitales et de la ligne de base : il ne reste que la
bande que l'oeil lit, et un rembourrage EGAL la centre vraiment. Plus de
correction a regler, plus de dependance a la police ni au mot.
IL FAUT `inline-block`, et c'est mesure : en `inline-flex` la coupe ne
s'applique pas, le texte y devenant un element de flex anonyme. Meme
reglage, la boite tombait a 19,84 px en `inline-block` et restait a
25,98 en `inline-flex`. On perd `gap`, dont aucune pastille ne se sert :
elles ne portent que du texte.
5,7 px de rembourrage rend a la pastille les 22 px de haut qu'elle avait
avant la coupe. */
display: inline-block;
text-box: trim-both cap alphabetic;
padding: 5.7px 9px;
min-height: 0;
border-radius: 7px;
border: var(--filet-epaisseur) solid transparent;
line-height: 1.25;
white-space: nowrap;
}
/* L ETAT : capitales. LES CAPITALES NE SONT PAS UN ORNEMENT, elles distinguent
l'etat du tag meme sans couleur, donc en noir et blanc, a l'impression, et
pour qui distingue mal les teintes. Une difference qui ne tient qu'a la
couleur n'en est pas une.
ELLE NE S EMPLOIE QUE LA OU LA PASTILLE EST SEULE : en tete de bloc, ou une
mention en capitales se detache du titre. Voir la regle d'une seule forme par
ligne, plus bas. */
.pastille--etat,
.dashboard-card__state {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
background: rgba(var(--pastille-rgb), var(--voile-5));
border-color: rgba(var(--pastille-rgb), var(--voile-9));
color: var(--pastille-libelle);
}
/* Les variantes existantes ne font plus QUE nommer une teinte : chacune
declarait ses trois valeurs, elles pouvaient donc diverger une a une. */
.dashboard-card__state--ok { --pastille-rgb: var(--share-bright-rgb); }
.dashboard-card__state--attention { --pastille-rgb: var(--amber-rgb); }
.dashboard-card__state--alerte { --pastille-rgb: var(--red-rgb); }
/* LE TAG : casse normale. Meme traitement de couleur que l'etat, teinte
assumee jusque sur le libelle : ce qui separe les deux roles est la
typographie, pas l'intensite. */
/* LES COMPTEURS DES NOUVELLES EN SONT SORTIS, et le rapprochement etait faux.
Un tag NOMME quelque chose : un etat, une etape, un role, et c'est pour cela
qu'il porte une surface, il faut le distinguer du texte autour. « Affiche
2 », « Lu 0 », « Reactions 0 » ne nomment rien : ce sont trois MESURES,
c'est-a-dire du texte de la meme nature que le titre au-dessus.
Les enfermer chacun dans une gelule faisait trois petits objets la ou il y a
trois chiffres, sur une ligne qui porte deja un rail et une mention d'etat.
Ils redeviennent du texte, et l'oeil retrouve un seul objet : la ligne. */
.admin-news-draft__latest-stats > span {
background: none;
border: 0;
border-radius: 0;
padding: 0;
font-size: 12px;
/* LE CRAN 10 EST CELUI DU SOMBRE. Sur le fond creme de la carte
d'actualites il rend 3,98 -- « Affiche », « Lu », « Reactions »,
trois mentions cote a cote sous le meme compte. `--texte-second`
porte le cran que le theme calibre pour SON sol : 0,56 en sombre,
0,76 en clair. */
color: var(--texte-second);
}
.admin-news-draft__latest-stats > span strong {
color: rgba(var(--white-rgb), 0.82);
font-weight: var(--graisse-moyenne);
}
.pastille--tag,
.journey-pill {
font-size: 11.5px;
font-weight: var(--graisse-moyenne);
text-transform: none;
letter-spacing: normal;
background: rgba(var(--pastille-rgb), var(--voile-5));
border-color: rgba(var(--pastille-rgb), var(--voile-9));
color: var(--pastille-libelle);
}
/* La teinte d'un tag d'etape vient de l'etape elle-meme, celle que porte deja
le rail de la ligne. Les deux autres variantes du parcours nommaient leur
couleur en dur, elles ne nomment plus qu'une teinte. */
.journey-pill--theme { --pastille-rgb: var(--journey-accent-rgb); }
.journey-pill--done { --pastille-rgb: var(--green-state-rgb); }
.journey-pill--muted {
--pastille-rgb: 226, 232, 240;
background: rgba(var(--white-rgb), var(--voile-3));
border-color: rgba(var(--white-rgb), var(--voile-5));
color: rgba(var(--white-rgb), 0.82);
}
/* UNE CLASSE SEULE NE GAGNE PAS, troisieme fois dans ce chantier.
`admin-dashboard.css` reprend le tag des lignes clients avec
.partner-clients-table tbody tr.partner-client-row .journey-pill--theme
soit trois classes et deux elements. Ma regle `.journey-pill` fait une
classe : elle perdait en silence, et la pastille gardait ses 0,18 / 0,34 et
son libelle blanc pendant que tout le reste passait a la nouvelle recette.
On RECOPIE le selecteur a l'identique. Ecrire plus court, meme en croyant
viser la meme chose, c'est se garantir une divergence qu'aucune mesure ne
signale. */
.partner-clients-table tbody tr.partner-client-row .journey-pill--theme {
--pastille-rgb: var(--row-rgb);
background: rgba(var(--pastille-rgb), var(--voile-5));
border-color: rgba(var(--pastille-rgb), var(--voile-9));
color: var(--pastille-libelle);
}
/* LA VARIANTE NEUTRE. Ce n'est pas un repli : un tag sans teinte est un tag qui
ne ment pas sur une classification qui n'existe pas. */
.pastille--neutre,
.dashboard-card__state--muet,
.partner-client-activity-state,
.partner-journey-step__status {
font-size: 11.5px;
font-weight: var(--graisse-moyenne);
text-transform: none;
letter-spacing: normal;
background: rgba(var(--white-rgb), var(--voile-3));
border-color: rgba(var(--white-rgb), var(--voile-5));
color: rgba(var(--white-rgb), 0.82);
}
/* UNE SEULE FORME PAR LIGNE. Sur une ligne client, l'etat d'activite cotoie le
tag d'etape a quinze pixels : a cette distance, l'ecart entre capitales et
casse normale ne se lit plus comme un ROLE, il se lit comme une inconstance.
L'etat y prend donc la forme du tag, et ce sont les FAMILLES DE TEINTE qui
distinguent : semantique pour l'etat, d'identite pour le tag.
`.dashboard-card__state--muet` garde ses capitales, lui : il est seul en tete
de bloc. La regle ne vise que la cohabitation. */
.dashboard-card__state--muet {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
/* UN TAG N EST JAMAIS ROUGE. Les teintes SEMANTIQUES portent un jugement (vert
tout va bien, ambre il faut regarder, rouge c'est casse) et sont reservees
aux etats. Les teintes D IDENTITE ne jugent rien, elles nomment, et vont aux
tags. Sans cette separation, la couleur d'alerte finit sur une simple
classification et plus rien ne se distingue d'urgent. */
.pastille--ok { --pastille-rgb: var(--share-bright-rgb); }
.pastille--attente { --pastille-rgb: var(--amber-rgb); }
.pastille--probleme { --pastille-rgb: var(--red-rgb); }
/* --- Le repli, pour un navigateur sans `text-box` ------------------------
La coupe est recente (Chrome 133). Sans elle on revient au centrage
approche : `inline-flex` et une correction de 0,8 px prise en bas pour etre
rendue en haut. Le texte y reste 0,9 px trop haut sur le tag. Approximatif,
mais jamais casse, et la pastille garde exactement la meme hauteur.
------------------------------------------------------------------------- */
@supports not (text-box: trim-both cap alphabetic) {
.pastille,
.dashboard-card__state,
.journey-pill,
.partner-client-activity-state,
.partner-journey-step__status {
display: inline-flex;
align-items: center;
padding: 3.8px 9px 2.2px;
}
}
/* --- La barre de progression : le trace suffit ---------------------------
-------------------------------------------------------------------------
Elle portait un fond blanc a 0,08 ET un filet blanc a 0,08 de 1 px, sur les
deux pages a la fois. Trois surfaces empilees pour dire un pourcentage : le
bloc, la piste, la portion faite.
LE FILET NE SERVAIT RIEN. Sur une hauteur de 14 px, 1 px de bord fait un
septieme de l'objet, et il est de la MEME couleur et de la MEME valeur que la
piste qu'il cerne. Il ne la delimitait donc pas, il l'epaississait.
LA PISTE RESTE, MAIS CHANGE DE CAMP. Premiere version : fond retire aussi.
Vu en capture, le resultat ne dit pas « zero pour cent », il dit « il n'y a
pas de barre » : elle occupe 12 px ou rien ne se passe, et le bloc se termine
sur 36 px de vide. Une barre de progression a zero doit montrer LE CHEMIN
RESTANT, sinon elle ne montre rien.
Elle revient donc, mais EN CREUX. Deuxieme version essayee : cyan a 0,16,
soit plus CLAIR que le bloc. Vu en capture sur les deux pages, a zero sur
onze la barre se lit comme PLEINE : l'oeil prend la teinte claire pour la
progression. Un vide qui parait rempli est pire qu'un vide invisible.
Une piste doit s'enfoncer, pas ressortir : le sillon est plus sombre que la
surface, la portion faite est plus claire. C'est la seule facon que l'etat a
zero et l'etat a cent se distinguent sans lire le chiffre.
------------------------------------------------------------------------- */
.partner-journey-widget__bar {
background: rgba(var(--black-rgb), var(--voile-7));
border: 0;
}
/* LA PORTION FAITE PARLE CYAN. Elle etait un degrade bleu clair vers vert,
c'est-a-dire deux teintes etrangeres dans un bloc cyan, et le vert y disait
« acquis » alors qu'il dit « effectue » sur les pastilles trois lignes plus
bas. Une seule teinte, celle de la page : sur 12 px de haut l'aire est trop
faible pour que le cyan plein vire au fluo. */
.partner-journey-widget__bar span {
background: rgb(var(--portal-accent-rgb));
}
/* --- Le repli « En savoir plus » : un lien, dans TOUS ses etats -----------
-------------------------------------------------------------------------
TROIS NOMS POUR LE MEME OBJET selon l'ecran : `__step__details` (onze fois
sur le parcours praticien), `__now__details` et `__widget__details`. Les
reprendre page par page a produit exactement ce qu'on evite : le repos
corrige a trois endroits, et le SURVOL oublie aux trois.
CE QUI RESTAIT. `admin-dashboard.css` pose
`summary:hover { background: rgba(var(--white-rgb), 0.06); color: var(--white) }`.
Au repos le lien etait donc propre, et il reprenait sa gelule des qu'on
passait dessus : le seul etat ou l'objet redevenait un bouton etait celui ou
on s'appretait a cliquer.
LE COMPORTEMENT EST CELUI DU PIED DE BLOC, la reference des liens de sortie
du produit : au survol il PALIT vers le blanc, a l'appui il FONCE. Jamais de
surface, a aucun etat. Un lien se signale par sa couleur ; s'il lui faut un
fond pour se faire remarquer, c'est un bouton.
------------------------------------------------------------------------- */
.partner-journey-step__details,
.partner-journey-now__details,
.partner-journey-widget__details {
background: none;
border: 0;
padding: 0;
/* ET LE FILTRE, QUI N EST PAS UN FOND. `backdrop-filter: blur(14px)
saturate(1.2)` ne declare aucune couleur : il SATURE de 20 % ce qui est
derriere. Le repli ouvert avait donc une zone plus claire, avec un bord
net, sans qu'aucune regle de fond ne l'explique.
DEUXIEME FOIS DANS CE CHANTIER, apres la carte de progression. La lecon
est la meme : quand une teinte se voit sans qu'une regle de fond la
porte, chercher `backdrop-filter` avant de conclure qu'il n'y a rien. */
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.partner-journey-step__details > summary,
.partner-journey-now__details > summary,
.partner-journey-widget__details > summary {
padding: 0;
background: none;
border: 0;
border-radius: 0;
color: rgb(var(--portal-accent-rgb));
font-weight: var(--graisse-moyenne);
font-size: 12.5px;
}
/* Les trois etats, et la surface reste absente aux trois. */
.partner-journey-step__details > summary:hover,
.partner-journey-now__details > summary:hover,
.partner-journey-widget__details > summary:hover {
background: none;
color: color-mix(in srgb, rgb(var(--portal-accent-rgb)) 68%, var(--lumiere));
}
.partner-journey-step__details > summary:active,
.partner-journey-now__details > summary:active,
.partner-journey-widget__details > summary:active {
background: none;
color: color-mix(in srgb, rgb(var(--portal-accent-rgb)) 78%, var(--accent-sombre));
}
/* OUVERT N EST PAS SURVOLE. `details[open] > summary` heritait lui aussi d'un
fond dans la feuille d'origine : le repli ouvert restait donc une gelule
tant qu'on ne le refermait pas. */
.partner-journey-step__details[open] > summary,
.partner-journey-now__details[open] > summary,
.partner-journey-widget__details[open] > summary {
background: none;
margin-bottom: 8px;
}
/* =========================================================================
CE QUI SUIT VIENT DE `praticien-essai.css`, ou ces recettes etaient nees.
Elles n'y avaient plus leur place : `.dashboard-card`, `.btn.ligne-action`
et `.admin-latest-user__actions .btn` sont les MEMES classes sur l'espace
praticien et sur l'administration. Les laisser dans la feuille d'une page,
c'etait garantir qu'en reprenant l'autre on les redecouvre et qu'on les
redecide differemment. Elles montent donc d'un etage.
========================================================================= */
/* --- 5. Les blocs passent en surface levée (B4) -------------------------
RETENU APRES COMPARAISON de quatorze traitements sur `blocs.html`.
Aucune bordure, un fond clair a 4 %, une ombre portee. Trois raisons l'ont
emporte :
il supporte d'etre REPETE. Sept blocs sur cette page : sept cadres se
disputent l'attention, sept surfaces posees ne se disputent rien ;
il est PREVISIBLE. La vraie carte porte `backdrop-filter: blur(14px)`,
qui floute et sature ce qui passe derriere : sa couleur depend donc de
l'orbe du fond qui passe dessous, et deux cartes cote a cote n'ont pas la
meme teinte. Un fond fixe leur rend la meme.
il coute moins cher a peindre. Six cartes floutees par page, plus la
barre du haut : le navigateur recompose la zone derriere chacune a
chaque image.
LE CYAN N EST PAS ICI. Il reste a ce qui appelle un geste, et un bloc de
contenu n'en appelle pas.
------------------------------------------------------------------------ */
.dashboard-card {
/* UNE LUMIERE, PAS UNE COULEUR.
Un aplat de cyan teinte la surface uniformement : le bloc devient
« legerement cyan », donc quelque chose qu'on remarque. Un degrade qui
s'eteint donne une lumiere : le coin haut gauche est effleure, le reste
ne l'est pas, et l'oeil lit une surface eclairee, pas coloree.
C'est le geste des cartes de support du parcours, repris a 4 % au lieu
de 13 : celles-la font 350 px et signalent un contact, ces blocs-ci en
font 1300 et ne signalent rien. La meme intensite sur une surface
quatre fois plus grande cesserait d'etre un effleurement.
L'extinction a 60 % : au-dela, le degrade se lit comme une transition
entre deux couleurs, alors qu'on veut une source qui s'eteint. Le blanc
a 3 % dessous garde au bloc son elevation, que le cyan seul ne donne
pas. */
background:
linear-gradient(135deg,
rgba(var(--portal-accent-rgb), var(--voile-2)),
rgba(var(--portal-accent-rgb), 0) 60%),
rgba(var(--white-rgb), var(--voile-2));
box-shadow: 0 10px 30px rgba(var(--black-rgb), var(--voile-8));
backdrop-filter: none;
-webkit-backdrop-filter: none;
/* PAS DE FILET : L OMBRE FAIT LE BORD.
Le filet avait ete pose parce que le bloc « flottait » : le fond n'a pas
la meme clarte d'un bout de page a l'autre, et un coin se perd la ou une
orbe passe. Mais c'est l'ombre qui repond deja a ce probleme, et elle y
repond mieux : elle assombrit le fond AUTOUR du bloc, donc l'ecart se
creuse la ou le fond est clair, exactement la ou le bord risquait de se
perdre. Un filet, lui, a la meme opacite partout : il compense le moins
la ou il faudrait le plus.
Reste que l'ombre est portee vers le BAS (0 10px 30px). Le bord haut
n'en recoit presque rien, et c'est le seul endroit ou l'on peut encore
voir le bloc s'arreter sans transition. C'est ce qu'il faut regarder
pour juger.
Pour revenir en arriere : `border: var(--filet-epaisseur) solid
var(--filet-large);`. Le palier reste defini dans `socle-retenu.css`,
il sert toujours aux cartes d'etape du parcours. */
border: 0;
}
/* --- 9. Les boutons d'une ligne prennent la couleur de leur ligne --------
------------------------------------------------------------------------
DEUX FAMILLES, UNE SEULE REGLE : les trois boutons a icone des lignes
clients, et le bouton « Ouvrir » de chaque echange de la messagerie. Ils
n'ont ni la meme forme ni la meme taille, mais ils tiennent le meme role :
agir SUR la ligne qui les porte. C'est ce role qui decide de la teinte, pas
la forme, d'ou une regle commune plutot que deux reglages qui se
ressembleraient.
AUJOURD HUI ils sont gris ardoise : `.btn-secondary` leur donne
`rgb(58, 78, 88)`, la meme valeur pour toutes les lignes. Le rail de gauche
de la ligne, lui, est deja colore par `--row-rgb`, qui vaut la teinte de
l'etape du client : bleu pour le test principal, turquoise pour la demo,
vert pour le retest. La ligne dit donc une chose que ses boutons ignorent.
LA RECETTE EST CELLE DU BOUTON « Ouvrir le chat » du parcours : un fond
teinte a 12 %, un filet de la meme teinte a 24 %, le libelle en blanc. Ce
qui change ici est la SOURCE de la teinte : `--row-rgb` au lieu de l'accent
de la page, donc chaque ligne colore ses propres boutons.
POURQUOI 12 ET 24 ET PAS PLUS. Trois boutons par ligne, cinq lignes : quinze
surfaces colorees dans un meme bloc. A cette densite la teinte doit se lire
comme une APPARTENANCE (« ces boutons sont a cette ligne »), pas comme un
appel. 12 % suffit a rattacher, au-dela le tableau devient un damier.
LE REPLI COMPTE. `var(--row-rgb, var(--teinte-bleue))` : une ligne sans
theme reconnu garde le bleu par defaut plutot que de tomber sur une couleur
invalide, qui rendrait le bouton transparent.
------------------------------------------------------------------------ */
/* La peau des actions de ligne ne s'ecrit plus ici : elles sont devenues une
BRANCHE de la famille du bouton second, plus bas dans cette feuille. Ce
qu'elles avaient de propre, la teinte de leur ligne, est justement ce que la
famille sait faire ; ce qu'elles avaient de different, un fond TEINTE plutot
que blanc, est ce que le banc a ecarte. Reste ici la seule chose qui leur
appartienne vraiment : le halo du survol, qui dit « cette ligne repond ». */
.btn.ligne-action:hover,
.admin-latest-user__actions .btn:hover {
box-shadow: 0 0 0 3px rgba(var(--row-rgb, var(--teinte-bleue)), 0.10);
}
/* CE QUE LA MESSAGERIE NE DIT PAS ENCORE. Chaque echange porte
`style="--row-rgb: var(--teinte-bleue)"` ECRIT EN DUR dans le gabarit : les
deux items sont donc bleus quel que soit l'etape du client, la ou les lignes
clients, elles, changent de teinte. La regle ci-dessus est prete a suivre le
jour ou le gabarit passera la vraie etape ; c'est une correction cote Blade,
pas cote feuille, donc elle n'a pas sa place ici. */
/* --- Le champ de saisie : un creux, pas une surface ----------------------
-------------------------------------------------------------------------
RETENU SUR `champs.html` (C1) apres comparaison de cinq matieres.
CE QU IL REMPLACE. 225 regles visent un champ dans les dix-huit feuilles du
produit, et elles portent 41 recettes distinctes de fond, filet et rayon.
Quelques-unes, relevees telles quelles : `rgba(black,0.34)` filet blanc 0,12
rayon 12 dans `portal.css`, `rgba(white,0.07)` filet 0,12 rayon 10 dans
`business.css`, `rgba(white,0.04)` filet 0,10 rayon 12 dans
`admin-dashboard.css`, `rgba(ink-900,0.36)` avec un rayon `12px 0 0 12px`.
Aucune ne reprend la precedente. Sur la seule page d'administration, six
champs en portaient deja deux.
POURQUOI LE CREUX. Un champ doit dire « on peut ecrire ici », un bouton dit
« on peut agir ici », et les deux vivent cote a cote dans les memes blocs.
Les quatre autres candidats les distinguaient par le DEGRE : un peu plus
clair, un peu moins clair, un filet plus fin. Le creux les distingue par le
SENS : le bouton ressort, le champ s'enfonce. C'est la seule des cinq qui ne
puisse pas etre confondue de loin, et elle ne peut pas deriver, parce qu'il
n'y a pas de demi-creux.
Elle reprend en outre une decision deja prise la veille, celle de la piste
de la barre de progression : ce qui attend d'etre rempli se creuse. Une
regle de plus qui redit une regle existante coute moins qu'une regle neuve.
CE QUE LE SELECTEUR NE TOUCHE PAS : les cases a cocher, les boutons radio,
les curseurs et les selecteurs de fichier, qui ne sont pas des champs de
saisie et que le navigateur dessine autrement.
------------------------------------------------------------------------- */
.lk-body input[type="text"],
.lk-body input[type="search"],
.lk-body input[type="email"],
.lk-body input[type="password"],
.lk-body input[type="number"],
.lk-body input[type="tel"],
.lk-body input[type="url"],
.lk-body input[type="date"],
.lk-body input[type="time"],
.lk-body input[type="datetime-local"],
.lk-body input:not([type]),
.lk-body select,
.lk-body textarea {
/* LE CREUX A DEJA SA PROFONDEUR PAR THEME, ET IL FALLAIT LA LIRE.
Ce fond etait ecrit `--voile-7`, soit 24 % de noir, quel que soit le
sol. Sur l'ardoise du theme sombre, c'est le creux discret qu'on
cherchait ; sur une carte blanche, 24 % de noir font un GRIS MOYEN --
le champ ne s'enfonce plus, il tache, et le formulaire se lit comme une
suite de rectangles gris.
`--creux-fond` porte exactement cette decision, prise pour le theme :
« 28 % de noir sur un sol clair ferait un trou, 9 % suffisent et se
lisent tres bien ». Le champ la lit maintenant au lieu de la redire de
travers. Le repli garde la valeur d'avant pour les pages servies sans
les couches retenues. */
background: var(--champ-fond, rgba(var(--black-rgb), var(--voile-7)));
border: var(--filet-epaisseur) solid var(--champ-filet, var(--filet-large));
/* LE RAYON EST CELUI DES BLOCS. Il valait 12 px en dur, l'axe retenu en
donne 8 : un champ plus arrondi que la carte qui le porte se lit comme
une gelule posee dessus. */
border-radius: var(--rayon-bloc);
color: rgba(var(--white-rgb), var(--voile-12));
/* LA POLICE EST HERITEE, ET CE N EST PAS UN DETAIL. Un `textarea` sans
cette ligne prend `monospace`, la valeur par defaut du navigateur : sur
l'administration, la zone « Court message sur les changements » etait
rendue en chasse fixe au milieu d'un formulaire en Arial. Un champ dont
le texte n'a pas la police de la page se lit comme un bloc de code. */
font-family: inherit;
/* LE CREUX SE DIT PAR UNE OMBRE INTERIEURE, LA OU LE FOND NE PEUT PLUS LE
DIRE. En clair le champ est blanc, donc plus clair que sa carte : sans ce
filet d'ombre sous le bord haut, il n'aurait plus aucune profondeur. En
sombre le fond s'en charge deja, et ce role y vaut `none`. */
box-shadow: var(--champ-relief, none);
/* Le flou de verre part avec le reste : il rendait la teinte du champ
dependante de l'orbe du fond qui passait derriere, donc deux champs
cote a cote n'avaient pas la meme. */
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.lk-body input[type="text"]::placeholder,
.lk-body input[type="search"]::placeholder,
.lk-body input[type="email"]::placeholder,
.lk-body input[type="password"]::placeholder,
.lk-body input[type="number"]::placeholder,
.lk-body input[type="tel"]::placeholder,
.lk-body input:not([type])::placeholder,
.lk-body textarea::placeholder {
color: rgba(var(--white-rgb), var(--voile-9));
}
/* AU SURVOL, LE FILET SEUL BOUGE. Le fond ne change pas : un creux qui
s'eclaircit au passage de la souris se lit comme un bouton qui s'allume. */
.lk-body input[type="text"]:hover,
.lk-body input[type="search"]:hover,
.lk-body input[type="email"]:hover,
.lk-body input[type="password"]:hover,
.lk-body input[type="number"]:hover,
.lk-body input[type="tel"]:hover,
.lk-body input:not([type]):hover,
.lk-body select:hover,
.lk-body textarea:hover {
border-color: var(--filet-petit);
}
/* EN SAISIE, LE FILET PREND L ACCENT ET UN HALO DE 3 px. C'est le seul endroit
du produit ou `--filet-action` apparait sans etre le cadre appuye d'un bloc,
et c'est justifie : pendant qu'on ecrit, le champ EST l'action de la page. */
.lk-body input[type="text"]:focus,
.lk-body input[type="search"]:focus,
.lk-body input[type="email"]:focus,
.lk-body input[type="password"]:focus,
.lk-body input[type="number"]:focus,
.lk-body input[type="tel"]:focus,
.lk-body input:not([type]):focus,
.lk-body select:focus,
.lk-body textarea:focus {
outline: none;
border-color: var(--filet-action);
box-shadow: 0 0 0 3px rgba(var(--portal-accent-rgb), var(--voile-5));
}
/* La liste deroulee d'un `select` est dessinee par le systeme : le fond doit y
etre opaque, sinon Windows la rend en blanc sur blanc. */
.lk-body select option {
background: rgb(var(--slate-mid-rgb));
color: rgba(var(--white-rgb), var(--voile-12));
}
/* --- La ligne d'une liste : le rail dit de quoi il s'agit ----------------
-------------------------------------------------------------------------
RETENU SUR `actualite.html` (N2).
L'administration porte DEUX listes dans la meme colonne : les derniers
comptes et les dernieres actualites. La premiere avait deja sa recette,
posee en reprenant l'espace praticien : fond a la teinte de la ligne, filet
a 0,14, rail gauche de 4 px a 0,76. La seconde etait une carte grise dans la
carte, `rgba(blanc,0.04)` filet `rgba(blanc,0.043)` rayon 12, soit trois
niveaux d'emboitement pour un titre, un etat et trois compteurs.
CE QUI CHANGE N EST PAS LA FORME, C EST LA SOURCE DE LA TEINTE. La ligne de
compte lit l'etape du client, la ligne d'actualite lit son etat. Le rail
fait donc le meme travail dans les deux listes : dire d'un coup d'oeil de
quoi il s'agit, sans qu'on ait a lire le mot ecrit a droite.
POURQUOI L AMBRE POUR LE BROUILLON ET PAS POUR L ARCHIVE. L'ambre est la
couleur d'attention du produit. Un brouillon attend une action, donc il la
merite ; une actualite archivee n'attend rien, elle prend le gris neutre.
Inverser les deux ferait signaler ce qui est termine et taire ce qui reste a
faire.
CE QUE CETTE RECETTE DEMANDE AU BALISAGE. La ligne doit porter son etat en
classe, ce que le gabarit ne fait pas encore :
avec `draft`, `published` ou `archived`, les trois valeurs du modele. Sans
cette classe la ligne prend le cyan, qui est le defaut : une actualite
publiee est le cas courant, donc l'oubli reste juste.
------------------------------------------------------------------------- */
.admin-news-draft__latest-item {
--n-rgb: var(--portal-accent-rgb);
background: rgba(var(--n-rgb), var(--voile-3));
border: var(--filet-epaisseur) solid rgba(var(--n-rgb), var(--voile-5));
border-left: 4px solid rgba(var(--n-rgb), var(--voile-11));
border-radius: 14px;
padding: 12px 14px;
}
.admin-news-draft__latest-item.est-archived { --n-rgb: 148, 163, 184; }
.admin-news-draft__latest-item.est-draft { --n-rgb: var(--amber-rgb); }
/* Les lignes se suivent avec l'ecart interieur d'un bloc, pas colle a colle. */
.admin-news-draft__latest-item + .admin-news-draft__latest-item {
margin-top: var(--espace-s);
}
/* LA SORTIE DOIT REMETTRE, PAS SEULEMENT S EXCLURE. Retirer la case de la
regle retenue ne suffisait pas : `lk.css` porte la MEME regle, sans la
sortie, et continuait donc a l'habiller en interrupteur. Une exception qui
ne fait que se retirer d'une regle laisse la suivante s'appliquer -- il faut
redire ce qu'on veut. Mesure : la case rendait encore 34 x 20 px en pilule.
`revert-layer` ne s'applique pas ici (aucune couche n'est declaree) : on
repose donc l'apparence native, et `accent-color` la met a la teinte. */
.lk-body input[type="checkbox"].case-a-cocher {
appearance: auto;
-webkit-appearance: auto;
width: 15px;
height: 15px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
accent-color: rgb(var(--accent-surface-rgb));
cursor: pointer;
}
.lk-body input[type="checkbox"].case-a-cocher::before { content: none; }
/* UNE SORTIE NOMMEE : `.case-a-cocher`.
La regle qui suit habille TOUTE case native en interrupteur. C'est juste
pour un reglage qu'on bascule, et faux pour une liste ou l'on en coche
plusieurs : les deux gestes deviennent le meme objet, et le lecteur doit
essayer pour savoir lequel il tient.
Le produit le sait deja sans le dire : `lk.css` remet la case a 18 px avec
son `accent-color` a CINQ endroits (`.checkbox-row`, `.boutique-produit`,
`.declaration__case`, la facturation, la synthese experte). Cinq exceptions
ecrites une par une sont le signe qu'une regle generale est trop large.
On ne renverse pas la regle aujourd'hui -- ce serait repeindre toutes les
pages d'un coup. On lui donne une sortie qui porte son sens : ce qui est
marque `case-a-cocher` reste une case. Le jour ou l'on inverse, ces cinq
endroits sont deja nommes. */
/* --- La case a cocher : l'interrupteur, dessine par nous -----------------
-------------------------------------------------------------------------
RETENU SUR `interrupteur.html` (I3), et applique ici aux cases NATIVES.
Le banc avait deja tranche pour les quatre cases du bloc « Notifications par
e-mail » de l'espace praticien. La page « Mon compte » en porte cinq de plus,
dans le meme role exactement : activer ou desactiver un envoi. Elles etaient
restees natives, `appearance: auto`, avec `accent-color` en bleu : le
navigateur dessine la boite, le crochet et le rayon, et le rendu change entre
Windows, macOS et Firefox alors que tout le reste de la page est dessine par
nous.
POURQUOI L INTERRUPTEUR ET PAS UNE CASE REDESSINEE. Une case dit « cochez ce
qui vous concerne » dans une liste ou plusieurs reponses coexistent ; un
interrupteur dit « ceci est allume ou eteint », ce qui est exactement ce que
font ces reglages. Le produit en possede deja un, valide et fige, celui du
partage dans le viewer : on reprend sa forme et sa couleur au lieu d'en
inventer une seconde.
CE QUE CETTE VERSION NE DEMANDE PAS AU BALISAGE. L'interrupteur du viewer a
besoin d'un `` en plus de l'``. Celui-ci se dessine sur l'input
seul : `appearance: none` le sort du rendu natif, la piste est son fond, le
curseur est son `::before`. Aucun gabarit a toucher, donc aucune page ou on
pourrait oublier de le faire.
L EXCLUSION EST NECESSAIRE : la ou l'interrupteur dessine existe deja, son
input est masque derriere le ``. Lui redonner une taille le ferait
reapparaitre a cote de lui-meme.
------------------------------------------------------------------------- */
.lk-body input[type="checkbox"]:not(.partage-interrupteur input):not([hidden]):not(.case-a-cocher) {
appearance: none;
-webkit-appearance: none;
flex: none;
width: 34px;
height: 20px;
margin: 0;
border-radius: 999px;
background: rgba(var(--black-rgb), var(--voile-8));
border: var(--filet-epaisseur) solid var(--filet-petit);
position: relative;
cursor: pointer;
transition: background .16s, border-color .16s;
}
.lk-body input[type="checkbox"]:not(.partage-interrupteur input):not([hidden]):not(.case-a-cocher)::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(var(--white-rgb), 0.62);
/* LE MEME MOUVEMENT QUE LA PLANCHE. Trois interrupteurs coexistaient avec
trois courses : 0,16 s lineaire ici, 0,2 s avec depassement au modele,
0,42 s avec rebond sur le partage. Celui-ci prend la courbe retenue --
elle depasse legerement a l'arrivee, donc le bouton se POSE au lieu de
s'arreter net, et 0,2 s sur quatorze pixels ne traine pas. */
transition: transform .2s cubic-bezier(.32, .72, .32, 1.1), background .16s;
}
/* ALLUME : la piste prend le cyan PLEIN. Sur 34 par 20 px l'aire est trop
faible pour que le cyan vire au fluo, et c'est la valeur retenue au banc. */
.lk-body input[type="checkbox"]:not(.partage-interrupteur input):not([hidden]):not(.case-a-cocher):checked {
background: rgb(var(--portal-accent-rgb));
border-color: rgb(var(--portal-accent-rgb));
}
.lk-body input[type="checkbox"]:not(.partage-interrupteur input):not([hidden]):not(.case-a-cocher):checked::before {
transform: translateX(14px);
background: var(--lumiere);
}
/* A l'appui le bouton s'allonge vers sa destination : le geste se sent avant
d'etre fini. Meme detail que sur la planche. */
.lk-body input[type="checkbox"]:not(.partage-interrupteur input):not([hidden]):not(.case-a-cocher):active::before {
width: 17px;
}
.lk-body input[type="checkbox"]:not(.partage-interrupteur input):not([hidden]):not(.case-a-cocher):checked:active::before {
transform: translateX(11px);
}
.lk-body input[type="checkbox"]:not(.partage-interrupteur input):not([hidden]):not(.case-a-cocher):disabled {
opacity: .5;
cursor: default;
}
.lk-body input[type="checkbox"]:not(.partage-interrupteur input):not([hidden]):not(.case-a-cocher):focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--portal-accent-rgb), var(--voile-6));
}
@media (prefers-reduced-motion: reduce) {
.lk-body input[type="checkbox"],
.lk-body input[type="checkbox"]::before { transition: none; }
}
/* --- L'initiale, quand il n'y a pas de photo ------------------------------
-------------------------------------------------------------------------
Elle portait `linear-gradient(135deg, rgba(bleu,0.92), rgba(violet,0.92))`,
soit deux teintes qui n'existent nulle part ailleurs dans la charte, sur le
seul objet que TOUS les ecrans affichent : le menu du haut, le profil, les
lignes clients, la messagerie.
CE QUE LE GABARIT DEMANDE, et il a raison : « l'initiale n'est pas un
pis-aller, c'est le repli normal, et elle doit avoir l'air voulue ». Un
simple gris l'aurait fait passer pour une image qui n'a pas charge.
POURQUOI PAS UN AVATAR CYAN. Le cyan dit « le produit ». Le poser en aplat
sur le visage de chaque personne ferait de chaque personne un element du
produit, et surtout il entrerait en concurrence avec les teintes de ligne
la ou les avatars s'alignent dans une liste.
L ARDOISE PORTE, LE CYAN NOMME. La surface reste neutre, comme une photo
sombre le serait ; c'est la LETTRE qui prend l'accent. L'objet a l'air
dessine, il ne prend la place de rien, et il reste lisible a 24 px comme a
96 px puisque seule la lettre est coloree.
------------------------------------------------------------------------- */
.avatar--initiale {
background: rgba(var(--slate-mid-rgb), var(--voile-12));
border: var(--filet-epaisseur) solid var(--filet-petit);
/*
* LA LETTRE DESCEND A 78 %, ET CE N'EST PAS UN REGLAGE DE GOUT.
*
* En cyan plein elle affichait 7,77 de contraste avec son rond. C'est le
* niveau qu'on donne a un LIBELLE qu'on doit lire ; or personne ne lit une
* initiale, on la reconnait. A ce niveau elle criait plus fort que le nom
* ecrit a cote, qui est pourtant l'information.
*
* A 78 % elle tombe a 5,27 : encore au-dessus de 4,5, donc parfaitement
* lisible, mais elle cesse de dominer sa ligne. Mesures intermediaires :
* 86 % -> 6,14 ; 70 % -> 4,54, ce qui commence a etre juste sur les fonds
* les plus clairs.
*/
/* L ENCRE D ACCENT PREND LE ROLE QUI SE RETOURNE, ET SANS VOILE. L'accent
brut vaut l'or CLAIR en theme clair : la lettre rendait 1,73 sur le blanc
de son rond. `--texte-accent` est l'or FONCE, calibre a pleine opacite
(6,75 sur blanc) ; le voile de 0,76 le ramenait a 3,89. En sombre les
deux jetons sont le meme cyan, seul le voile tombe. */
color: var(--texte-accent, rgba(var(--portal-accent-rgb), var(--voile-11)));
font-weight: 700;
box-sizing: border-box;
}
/* --- Le compteur de nouveautes (T2) --------------------------------------
-------------------------------------------------------------------------
RETENU SUR `indicateurs.html`.
Le produit disait « il y a du nouveau » de TROIS facons sur le meme ecran :
une pastille ambre sur l'avatar du menu, un rectangle
`rgba(107,40,189,0.9)` a cote du titre de section, et une puce ronde
`rgba(168,85,247,0.95)` devant la ligne non lue. Trois teintes, trois formes,
une seule information, et le violet n'existe plus nulle part depuis la
reprise.
LE COMPTEUR EST PLEIN, et c'est le seul objet plein de la page.
PREMIERE VERSION ESSAYEE : la recette de pastille en cyan translucide, fond
a 0,16. Vue en place, elle se lisait mal, et la mesure le disait deja : ce
compteur-la se detachait de son bloc a 1,37 de contraste, la valeur de
n'importe quelle pastille. C'est voulu pour une mention posee a cote d'un
titre, qui ne demande rien ; c'est faux pour le seul objet du produit qu'on
CHERCHE DU REGARD en arrivant sur la page.
L aplat monte ce contraste a 9,44, sept fois plus. Sur 21 px de haut l'aire
est trop faible pour que le cyan vire au fluo, contrairement a un bouton :
c'est la meme couleur, ce n'est pas la meme surface.
LE CHIFFRE EST SOMBRE, pas blanc. Sur du cyan plein, un chiffre blanc tombe
a 2,1 de contraste ; en `#06222b` il monte a 8,74.
------------------------------------------------------------------------- */
/* TROIS ENDROITS, PAS DEUX. Trouve en ouvrant le menu du compte : le meme
compteur y apparait une troisieme fois, a cote de « Mon compte », sous le nom
`lk-menu__pastille`. Il remplace celui de l'avatar tant que le menu est
ouvert. Les trois portent la meme recette, sans quoi le compteur changerait
d'apparence entre le moment ou on le voit et celui ou on va le chercher. */
.notifications-count,
.lk-top-bar__pastille,
.lk-menu__pastille {
--pastille-rgb: var(--portal-accent-rgb);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 21px;
height: 21px;
padding: 0 6px;
box-sizing: border-box;
border-radius: 7px;
background: rgb(var(--pastille-rgb));
border: var(--filet-epaisseur) solid rgb(var(--pastille-rgb));
color: var(--encre-sur-teinte);
font-size: 11.5px;
font-weight: 700;
line-height: 1;
}
/* Sur l'avatar elle mord le bord du rond : elle reste ronde, sinon un
rectangle pose sur un cercle fait un accident de forme. */
.lk-top-bar__pastille {
border-radius: 999px;
min-width: 18px;
height: 18px;
padding: 0 4px;
font-size: 10.5px;
}
/* --- Le compteur du menu : un seul a la fois ------------------------------
-------------------------------------------------------------------------
DEUX CORRECTIONS, trouvees en ouvrant le menu et en survolant l'onglet.
1. L ANNEAU CLAIR AU SURVOL. `lk.css` pose
`box-shadow: 0 0 0 2px rgba(slate-light, 0.9)` sur la pastille des que
l'onglet est survole. Au repos l'anneau vaut `rgba(15,23,42,0.96)`,
c'est-a-dire la couleur de la barre : il sert a DETACHER la pastille de la
photo qu'elle chevauche, et il fait son travail sans se voir. En passant au
gris clair il cesse de detacher pour se montrer, et il enferme la pastille
cyan dans un cerne qui n'appartient a rien.
L'anneau garde donc sa valeur de repos dans tous les etats. Ce qui change au
survol est l'onglet, pas ce qu'il contient.
2. LE DOUBLE COMPTEUR. Le meme chiffre est affiche deux fois des que le menu
s'ouvre : sur l'avatar, et a cote de « Notifications » dans le menu. Deux
fois le meme nombre au meme instant, a trois centimetres l'un de l'autre,
pose la question de savoir s'il s'agit du meme.
CELUI DU HAUT S EFFACE. Il sert a signaler tant qu'on ne regarde pas ; des
que le menu est ouvert, on regarde, et c'est celui du menu qui dit OU aller.
Les deux portent la meme recette, donc l'oeil suit le meme objet qui se
deplace au lieu d'en voir deux.
------------------------------------------------------------------------- */
.lk-top-bar__compte-bouton:hover .lk-top-bar__pastille,
.lk-top-bar__compte-bouton[aria-expanded="true"] .lk-top-bar__pastille {
box-shadow:
0 0 0 2px rgba(var(--slate-rgb), var(--voile-12)),
0 1px 3px rgba(var(--black-rgb), 0.45);
}
.lk-top-bar__compte-bouton[aria-expanded="true"] .lk-top-bar__pastille,
.lk-top-bar__compte.is-open .lk-top-bar__pastille,
.lk-top-bar__compte:has(.lk-menu.is-open) .lk-top-bar__pastille {
display: none;
}
/* --- La note de l'etat du service ----------------------------------------
-------------------------------------------------------------------------
« Cette page tourne sur le serveur qu'elle observe : une panne complete du
serveur ne s'afficherait pas ici. » Elle est posee en pied de CHAQUE page du
produit, sous l'indicateur d'etat.
Elle dit une chose vraie et sans usage. Le lecteur a qui elle s'adresse est
celui qui voit la page : s'il la voit, le serveur repond, donc l'avertissement
ne peut jamais le concerner au moment ou il le lit. Et le seul cas qu'elle
couvre, la panne complete, est precisement celui ou personne ne la lira.
ON MASQUE EN MAQUETTE. A l'application, c'est la clef `etat.note` qui part,
dans les quatre langues.
------------------------------------------------------------------------- */
.etat-systeme__note {
display: none;
}
/* --- Le retour redevient un lien -----------------------------------------
-------------------------------------------------------------------------
« Retour vers Espace praticien » etait rendu en BOUTON : ardoise pleine
`rgb(55, 71, 80)`, filet clair, rayon 8 px, libelle blanc plein. Il pesait
donc autant que « Tableau de bord praticien » juste en dessous, qui lui est
une vraie action. Deux objets au meme poids dont l'un revient en arriere et
l'autre avance.
PAS DE CYAN NON PLUS. Le cyan des liens est pris par le pied de bloc, qui
dit « aller voir plus loin ». Revenir n'est pas aller plus loin, et surtout
ce lien est le premier element de la page : lui donner la teinte du produit
en ferait le point d'entree du regard, alors qu'il est une sortie.
Il prend donc le blanc a 0,72, celui des textes secondaires, et remonte a
0,96 au survol. Il reste lisible, il cesse de reclamer.
------------------------------------------------------------------------- */
.lk-retour {
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: rgba(var(--white-rgb), 0.72);
}
.lk-retour:hover {
background: none;
color: rgba(var(--white-rgb), var(--voile-12));
/* `lk.css` ajoute `translateY(-1px)` et `brightness(1.08)` : un souleve de
bouton, sur un objet qui n'en est plus un. */
transform: none;
filter: none;
}
/* --- La fleche du retour, centree sur les capitales -----------------------
-------------------------------------------------------------------------
Les boites sont deja centrees : le conteneur est en `flex` avec
`align-items: center`, et l'ecart entre le centre de la boite de la fleche et
celui du libelle vaut exactement zero. Le defaut n'est donc pas dans la mise
en page, il est dans le GLYPHE.
MESURE EN PIXELS SUR LA CAPTURE, et c'est la seule facon de le voir : la
fleche peinte occupe les lignes 105 a 110, centre 107,5 ; la capitale « R »
de « Retour » occupe 102 a 111, centre 106,5. La fleche est un pixel plus
bas.
POURQUOI. « ← » est un caractere mathematique : son trait est cale sur la
barre des operateurs, c'est-a-dire au milieu de la hauteur d'x. Une capitale,
elle, monte plus haut. Centrer les boites aligne donc deux choses qui ne sont
pas au meme endroit dans leur boite.
ATTENTION AU TRANSFORM QUI EN REMPLACE UN AUTRE. `lk.css` pose
`transform: translateX(-3px)` au survol : une propriete `transform` REMPLACE
la precedente, elle ne s'y ajoute pas. Poser le decalage vertical au repos
seul l'aurait donc annule des qu'on survole, et la fleche serait redescendue
d'un pixel au passage de la souris. Les deux etats portent les deux
translations.
------------------------------------------------------------------------- */
.lk-retour__fleche {
transform: translateY(-1px);
}
.lk-retour:hover .lk-retour__fleche {
transform: translateX(-3px) translateY(-1px);
}
/* --- LE BLOC DE BASE, pour de bon --------------------------------------
-------------------------------------------------------------------------
RETENU AU BANC `blocs.html` (B4), et pose ici APRES l'avoir corrige trois
fois page par page. C'est la vraie lecon de la journee.
CE QUI S EST PASSE. Le traitement etait ecrit sur `.dashboard-card`, la
classe de l'espace praticien et de l'administration. Toutes les autres pages
emploient `.card` nu, donc elles gardaient l'ANCIEN traitement, ardoise
`rgba(30,41,59,0.7)` et `blur(14px)`, sans que rien ne le signale : un bloc
en retard n'a pas de couleur fautive, il a juste la mauvaise matiere. Je l'ai
donc redecouvert sur « Mon compte », puis sur les notifications, puis sur la
liste des comptes, en le corrigeant localement chaque fois.
TROIS CORRECTIONS LOCALES VALENT UN AVEU : la regle etait au mauvais etage.
POURQUOI JE NE L AVAIS PAS FAIT PLUS TOT, et pourquoi c'est possible
maintenant : `.card` accompagne, sur les pages deja validees, des classes qui
ont leur propre decision, et deux d'entre elles ne declarent pas leur ombre.
Elles en auraient donc herite. Les exclusions ci-dessous les nomment une par
une, ce qui est verifiable, plutot que de laisser la regle au mauvais etage,
ce qui ne l'est pas.
DETTE A RESORBER : chaque classe exclue devrait declarer son bloc en entier,
fond ET ombre, dans sa propre feuille. Le jour ou elles le feront, ces
`:not()` tomberont d'eux-memes.
------------------------------------------------------------------------- */
/* `:not(.mb-3:not(.diagnostic-viewer-header-card):not(.consultation-viewer-notice))` ECARTE LES CARTES-CADRES, comme dans `cartes-retenues.css`.
Les deux regles peignent, les deux doivent donc l'ecarter : n'en corriger
qu'une laisse l'autre repeindre, et l'on croit la correction faite.
IL EST HORS DU `:where()` A DESSEIN. Ce qui est dedans ne compte pas dans la
specificite -- c'est ce qu'on veut pour une liste d'exceptions -- mais ce
`:not()`-ci, lui, doit peser : il croise une regle voisine de meme poids, et
a poids egal c'est la derniere feuille lue qui gagne. */
/* LES TROIS CARTES DE TITRE SONT EXCLUES ICI AUSSI, et il a fallu une capture
pour s'en apercevoir. `cartes-retenues.css` les depouille -- c'est le
traitement « nue », retenu a l'atelier pour la carte qui OUVRE une page --
mais cette regle-ci peint toutes les cartes, pese davantage et est lue apres.
« Nue » ne s'appliquait donc sur AUCUNE page : chaque en-tete restait un
bloc peint, avec son ombre de trente pixels.
Mesure sur « Mes clients », modele contre produit, a 1440 en sombre :
transparent et sans ombre d'un cote, `rgba(255,255,255,.04)` plus degrade
plus `0 10px 30px rgba(0,0,0,.28)` de l'autre.
ELLES ENTRENT DANS LE `:where()`, avec les six autres : ce qui est dedans ne
compte pas dans la specificite, donc la liste des exceptions s'allonge sans
deplacer le poids de la regle -- et sans relancer la course aux poids que ces
deux feuilles ont deja perdue trois fois. */
.lk-body .card:not(.mb-3:not(.diagnostic-viewer-header-card):not(.consultation-viewer-notice)):not(:where(.btn-danger, .journey-stage-card, .journey-section-card,
.journey-testing-start-section, .partner-journey-widget,
.partner-journey-summary-card,
.admin-dashboard__hero, .diagnostic-viewer-header-card,
header, .consultation-viewer-notice)) {
background:
linear-gradient(135deg,
rgba(var(--portal-accent-rgb), var(--voile-2)),
rgba(var(--portal-accent-rgb), 0) 60%),
rgba(var(--white-rgb), var(--voile-2));
border: 0;
box-shadow: 0 10px 30px rgba(var(--black-rgb), var(--voile-8));
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* --- LE BOUTON PAR DEFAUT ------------------------------------------------
-------------------------------------------------------------------------
TROUVE PAR AUDIT sur les douze sous-pages de l'administration : `bleu vif`
revenait sur cinq d'entre elles, environ deux cents fois, et toujours sur la
meme classe, `.btn` NU. C'est le bouton par defaut de `lk.css`, et c'est la
source de tous les boutons bleus que j'ai corriges un par un depuis ce matin,
sur le tableau de bord, sur le profil, sur l'intro du test.
J'AI REPEINT SIX FOIS LE MEME OBJET avant de regarder d'ou il venait. Le
defaut d'une famille ne se corrige pas dans ses exemplaires.
LE DEFAUT DEVIENT L ARDOISE, pas l'aplat cyan, et c'est le point important :
un bouton sans qualificatif est un bouton ORDINAIRE, et la grande majorite
des boutons du produit le sont. L'aplat reste ce qu'on POSE, explicitement,
sur l'unique bouton d'appel d'un ecran. Prendre l'inverse comme defaut, c'est
ce qui donne quinze boutons de premier rang par page.
CE QUI NE BOUGE PAS : les boutons d'appel deja poses. « Passer le test de
suivi », « Continuer », « Traiter les demandes d'acces », « Commencer le
test » portent tous une regle propre, plus specifique que celle-ci.
LES DEUX EXCLUSIONS SONT UNE CORRECTION, pas une precaution. Premiere version
sans elles : comparaison de pixels sur les quatre pages validees, trois
avaient bouge. En regardant la zone changee, les boutons d'action des lignes
avaient perdu la teinte de leur ligne, bleutes sur la ligne bleue, violets
sur la violette, tous devenus ardoise. Ma regle a deux classes battait
`.btn.ligne-action`, qui en a deux aussi, simplement parce qu'elle est ecrite
apres.
C'est precisement ce que la regle du socle interdit : j'ai neutralise une
couleur qui etait de la DONNEE. Le pied de bloc est exclu pour la meme
raison, c'est un lien, pas un bouton.
LES DEUX EXCLUSIONS SONT EN `:where()`, ET C'EST LE POINT DELICAT.
Ecrites en `:not()` simple, elles faisaient passer la regle de deux classes
a QUATRE. Elle battait alors les regles de page, qui en ont trois, et le
bouton d'appel de chaque ecran retombait en ardoise : « Commencer le test »
sur l'intro du test, « Passer le test de suivi » sur le parcours, les
boutons d'etape. Un defaut par defaut, si l'on peut dire : la regle du
bouton ORDINAIRE avait pris le pas sur celle du bouton d'APPEL.
`:where()` ne pese rien. L'exclusion fonctionne toujours, le poids reste a
deux classes, et l'ordre des feuilles suffit a battre `.btn.ligne-action`
sans ecraser ce qui vient au-dessus.
QUATRIEME ET CINQUIEME, TROUVEES PAR MESURE et non par l'oeil.
`.btn-danger` : « Supprimer » et « Reprendre » perdaient leur rouge et
devenaient des boutons ordinaires. Le rouge d'une action destructrice n'est
pas une decoration, c'est l'avertissement lui-meme ; le neutraliser retire
la seule chose qui distingue « Supprimer » de « Enregistrer ». C'est le
troisieme cas du socle, le retour d'action, comme le vert de « Copier ».
`.admin-latest-user__actions .btn` : le bouton « Ouvrir » de la messagerie,
sur l'espace praticien. Sa recette existe pourtant vingt lignes plus haut
dans CETTE feuille, avec la teinte de sa ligne. Deux classes contre deux :
c'est l'ordre qui tranchait, et l'ordre etait contre elle. Le defaut ne
venait donc pas d'un changement, il etait la depuis que la regle existe, et
aucune comparaison avant/apres ne pouvait le voir. Il a fallu retirer la
regle du document rendu pour savoir ce qu'elle recouvrait.
TROISIEME EXCLUSION, MEME RAISON QUE LA PREMIERE : les boutons des cinq
etapes du parcours. Ils portent `rgba(var(--step-rgb), 0.28)`, c'est-a-dire
la teinte de LEUR etape, posee par une variable que la carte leur donne.
Cette teinte est de la donnee : deux exemplaires du meme bouton, sur deux
etapes differentes, n'ont pas la meme couleur, et c'est le test du socle.
`.journey-step__action` n'a qu'une classe, elle perdait donc contre celle-ci
et les cinq boutons devenaient ardoise.
------------------------------------------------------------------------- */
/* --- LE CREUX CYAN, POUR CE QUI ENGAGE ------------------------------------
-------------------------------------------------------------------------
RETENU SUR `banc-secondaire.html` (R5), puis deplace d'un cran.
IL ETAIT D ABORD ALLE AU BOUTON SECOND, et l'Admin l'a repris en regardant
« Mon compte » : le bouton qui ACCOMPAGNE et le bouton qui ENGAGE ne peuvent
pas porter la meme peau. Le creux est donc monte d'un rang.
TROIS RANGS SUR LE FOND DE BASE, ET C'EST UNE ECHELLE DE CYAN, ce qui la
rend lisible sans qu'on ait a l'apprendre :
le second aucun cyan, un blanc a 13 % il accompagne
l'ordinaire un creux a 16 %, filet a 38 % il engage
l'appel l'aplat plein a 62 % il fait avancer
« Enregistrer », « Publier », « Appliquer » sont au rang du milieu : ils
engagent quelque chose sans faire avancer, on reste sur la page.
CE QU'IL REMPLACE, ET POURQUOI. L'ardoise opaque a 92 %. Etant OPAQUE, son
ecart avec son fond dependait du fond : 1,55 sur un bloc colore, 1,26 sur le
fond de page, et 1,00 sur une tuile ambre, c'est-a-dire la luminance exacte
de sa carte. Un bouton qu'on ne voyait plus. Pire, l'ecart entre elle et le
bouton second tombait a 1,13 sur le fond de page : les deux rangs se
confondaient la ou ils sont le plus souvent voisins.
38 % ET NON 52. La peau vient du bouton « Enregistrer » d'une carte de
coupon, qui portait 52 %, c'est-a-dire `--filet-action`. Ce palier designe
LA chose importante d'un ecran ; trente boutons de soumission le videraient
de son sens. A 38 % le trait garde son dessin sans confisquer le palier, et
52 ne revient qu'a l'appui, le temps d'un clic.
------------------------------------------------------------------------- */
.lk-body .btn:not(:where(.btn-danger, .dashboard-card__link)) {
background: rgba(var(--portal-accent-rgb), var(--voile-5));
border: var(--filet-epaisseur) solid rgba(var(--portal-accent-rgb), var(--voile-9));
color: rgba(var(--white-rgb), var(--voile-12));
font-weight: var(--graisse-moyenne);
}
.lk-body .btn:not(:where(.btn-danger, .dashboard-card__link)):hover {
background: rgba(var(--portal-accent-rgb), var(--voile-7));
border-color: rgba(var(--portal-accent-rgb), 0.52);
color: rgba(var(--white-rgb), 0.98);
}
/* L'appui, qui manquait a cette famille comme il manquait a l'autre. */
.lk-body .btn:not(:where(.btn-danger, .dashboard-card__link)):active {
background: rgba(var(--portal-accent-rgb), var(--voile-8));
border-color: rgba(var(--portal-accent-rgb), 0.66);
color: rgba(var(--white-rgb), 1);
}
/* --- LES PASTILLES D ETAT DES MODULES ------------------------------------
-------------------------------------------------------------------------
Chaque module a ecrit la sienne, et toutes sont des gelules : l'etat d'un
courriel, celui d'un parcours de praticien, le type d'une transaction, la
capacite d'un praticien, l'etat d'une connexion. Les TEINTES sont deja
justes, vert pour ce qui est parti, gris pour ce qui est annule : c'est de la
donnee, elle garde sa couleur. Seule la forme rejoint la famille.
------------------------------------------------------------------------- */
.status,
.admin-email-status,
.admin-partner-journey-status,
.processing-transaction-type,
.capacites-pastille,
.connexions-ligne__etat,
.liste-carte__etat {
border-radius: 7px;
padding: 5.7px 9px;
font-size: 11.5px;
font-weight: var(--graisse-moyenne);
line-height: 1;
min-height: 0;
}
/* --- LE TEXTE SECONDAIRE -------------------------------------------------
-------------------------------------------------------------------------
`.muted` porte `rgb(148,163,184)`, un gris BLEUTE opaque, et l'audit le
trouve 620 fois sur huit pages. Notre echelle de texte secondaire est du
blanc translucide : les deux se ressemblent assez pour qu'on ne les distingue
pas isolement, et assez peu pour qu'une page qui melange les deux paraisse
avoir deux gris.
0,54 de blanc : la meme valeur que les sous-titres de bloc, mesuree a 5,9 de
contraste sur la surface levee, donc AA large.
------------------------------------------------------------------------- */
.lk-content .muted {
/* ETAIT `rgba(var(--white-rgb), .54)`, recopie du produit : 0,54 de blanc
retourne en 0,54 d'encre en clair, soit 3,71 sur le fond de page. Le role
de mention de la base fait le meme travail et passe 4,5 dans les deux
themes. Mesure au contraste sur « C'est ici que la ressource... ». */
color: var(--texte-second);
}
/* --- LA TAILLE DES CHAMPS ------------------------------------------------
-------------------------------------------------------------------------
L'audit signale `13,3333px` sur neuf pages, soit `0.8333em` non arrondi, et
`12,16px` ailleurs. Aucune des deux n'appartient a une echelle : ce sont des
restes de calculs relatifs empiles.
14 px, la taille du texte courant des formulaires. La recette du champ ne la
fixait pas, ce qui laissait chaque page en heriter autrement.
------------------------------------------------------------------------- */
.lk-body input[type="text"],
.lk-body input[type="search"],
.lk-body input[type="email"],
.lk-body input[type="password"],
.lk-body input[type="number"],
.lk-body input[type="tel"],
.lk-body input[type="url"],
.lk-body input[type="date"],
.lk-body input:not([type]),
.lk-body select,
.lk-body textarea {
font-size: 14px;
}
/* --- LES ETIQUETTES DE TABLEAU ET DE FORMULAIRE ---------------------------
-------------------------------------------------------------------------
TROUVE PAR AUDIT sur sept pages, environ quatre cents fois : les en-tetes de
colonne (`TH`), les etiquettes de champ (`LABEL`) et les libelles que le
tableau replie affiche en mode etroit (`.responsive-table__label`) portent
`rgb(148,163,184)`, le meme gris BLEUTE opaque que `.muted`.
Ce sont tous des textes secondaires : ils nomment ce qu'on regarde, ils ne
sont pas ce qu'on regarde. Ils prennent la valeur de l'echelle, 0,54 de
blanc, la meme que les sous-titres de bloc.
POURQUOI PAS AVEC `.muted` : `.muted` est une classe posee a la main, les
trois autres sont structurelles. Une page peut employer les unes sans les
autres, donc les regrouper dans une seule regle aurait laisse passer les
pages qui n'utilisent pas `.muted`, ce qui est exactement ce qui vient
d'arriver.
------------------------------------------------------------------------- */
/* LES LIBELLES, LES EN-TETES ET LES ETIQUETTES DE TABLEAU : leur correction
de contraste est descendue dans `lk.css`, a la regle fautive, parce que
quarante-trois pages sur soixante-dix ne chargent pas cette couche-ci. Rien
a ecrire ici : le produit porte deja la bonne valeur, et la dupliquer
ferait deux endroits a changer le jour ou elle bouge. */
/* --- LES DERNIERES PASTILLES DE MODULE -----------------------------------
-------------------------------------------------------------------------
Trois modules avaient garde la leur, en bleu vif et en gelule : les langues
de l'aide, les capacites d'un praticien, l'etat d'un parcours. Meme geste que
pour les etats de courriel : la forme rejoint la famille, la teinte suit ce
qu'elle dit.
LE BLEU VIF SORT, parce qu'ici il ne distingue rien : les trois pastilles de
langue sont bleues, les six de capacite aussi. Une couleur qui ne varie pas
entre deux exemplaires du meme objet est de l'interface, donc elle prend la
teinte de la page.
------------------------------------------------------------------------- */
.admin-help-locale-pill,
.capacites-pastille,
.connexions-fenetre__choix,
.admin-dashboard__badge {
border-radius: 7px;
padding: 5.7px 9px;
font-size: 11.5px;
font-weight: var(--graisse-moyenne);
line-height: 1;
min-height: 0;
background: rgba(var(--white-rgb), var(--voile-3));
border: var(--filet-epaisseur) solid rgba(var(--white-rgb), var(--voile-5));
color: rgba(var(--white-rgb), 0.82);
}
.admin-help-locale-pill.is-active,
.capacites-pastille.is-active,
.connexions-fenetre__choix.is-active,
.admin-help-locale-pill[aria-pressed="true"] {
background: rgba(var(--portal-accent-rgb), var(--voile-5));
border-color: var(--filet-action);
color: rgba(var(--white-rgb), 0.98);
}
/* LES DEUX REGLAGES DE L ECRAN DES CONNEXIONS SE RANGENT PAREIL.
-------------------------------------------------------------------------
Ils repondent a la meme question -- combien j'en vois -- l'un dans le temps,
l'autre en hauteur, et ils sont cote a cote pour cette raison. Mais le second
est un `