/* ============================================================ (Frontend) Common/CSS/compte-a-rebours.css Z7-COUNTDOWN — LE COMPTE A REBOURS COMMUN ============================================================ CE QU'IL EST. Quatre cases — jours, heures, minutes, secondes — chacune portant sa valeur et son unite. Jamais une ligne de texte « 02:23:59:48 », qui se lit mal et ne dit pas ce qu'elle compte. D'OU IL VIENT. Il etait enferme dans `Common/CSS/carte-une.css`, ou il s'appelait `.z7-une-chrono` et ne servait qu'au composant `Z7-TOURNAMENT-FEATURED`. La carte de defi 1V1 avait, elle, son propre decompte, qui ne lui ressemblait pas. Deux dessins pour une seule idee : c'est exactement ce que le registre appelle une divergence. CE FICHIER EST DESORMAIS LA SEULE SOURCE DE SON APPARENCE. Les declarations qui suivent sont celles de `carte-une.css`, deplacees SANS EN CHANGER UNE SEULE VALEUR — la preuve etant que le rendu du composant fige est mesure identique, avant et apres. L'ALIAS, ET POURQUOI IL EXISTE. `Z7-TOURNAMENT-FEATURED` est FIGE : son balisage ne bouge pas sans une demande qui le nomme. Ses classes `.z7-une-chrono` / `.z7-une-case` sont donc conservees, et reprises ici comme SYNONYMES de `.z7-cd` / `.z7-cd-case`. Le style est mutualise aujourd'hui ; le renommage du balisage reste a faire, et il est inscrit au registre comme tel. L'UNITE. `--z7-cd-u` vaut 1px par defaut : le composant se mesure alors en pixels, ce qui convient a une carte de taille fixe. La carte mise en avant, elle, se redimensionne en entier par son unite `--z7-u` ; l'alias la branche dessus, et le decompte suit l'echelle de la carte comme avant. LES VARIANTES NE REDECLARENT RIEN. Elles ne changent que des NOMBRES — pas une propriete n'est reecrite. C'est ce qui garantit qu'une correction faite au dessin par defaut profite aussi au compact, et qu'aucune des deux ne derive de l'autre. ============================================================ */ .z7-cd, .z7-une-chrono { /* L'unite de mesure. Tout ce qui suit en est un multiple. */ --z7-cd-u: 1px; /* LES NOMBRES DU DESSIN PAR DEFAUT. Ce sont ceux que portait `carte-une.css` : 6 d'ecart, 2 de marge interieure, 7 de rayon, 16 pour la valeur, 7,5 pour l'unite. */ --z7-cd-ecart: 6; --z7-cd-marge: 2; --z7-cd-rayon: 7; --z7-cd-val: 16; --z7-cd-lbl: 7.5; --z7-cd-lbl-marge: 1; --z7-cd-lbl-pistage: 0.4; /* LES COULEURS. L'indigo du site, celui des jauges et des pastilles de regle. */ --z7-cd-encre: #c7cbff; --z7-cd-fond: rgba(99, 102, 241, 0.1); --z7-cd-bord: rgba(99, 102, 241, 0.25); --z7-cd-encre-lbl: rgba(255, 255, 255, 0.38); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--z7-cd-ecart) * var(--z7-cd-u)); } .z7-cd-case, .z7-une-case { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: calc(var(--z7-cd-marge) * var(--z7-cd-u)); border-radius: calc(var(--z7-cd-rayon) * var(--z7-cd-u)); background: var(--z7-cd-fond); border: 1px solid var(--z7-cd-bord); } .z7-cd-val, .z7-une-case-val { font-family: Arial, sans-serif; font-size: calc(var(--z7-cd-val) * var(--z7-cd-u)); font-weight: 900; line-height: 1.05; color: var(--z7-cd-encre); font-variant-numeric: tabular-nums; } .z7-cd-lbl, .z7-une-case-lbl { margin-top: calc(var(--z7-cd-lbl-marge) * var(--z7-cd-u)); font-family: Arial, sans-serif; font-size: calc(var(--z7-cd-lbl) * var(--z7-cd-u)); font-weight: 700; letter-spacing: calc(var(--z7-cd-lbl-pistage) * var(--z7-cd-u)); text-transform: uppercase; color: var(--z7-cd-encre-lbl); line-height: 1.1; } /* ------------------------------------------------------------ L'ALIAS DU COMPOSANT FIGE ------------------------------------------------------------ Il ne change RIEN au dessin : il branche seulement le decompte sur l'unite de la carte mise en avant, qui se reduit en entier. C'est ce que faisait `calc(6 * var(--z7-u))` dans l'ancien fichier. Place apres le bloc commun, a specificite egale : c'est l'ordre qui decide, et c'est voulu. */ .z7-une-chrono { --z7-cd-u: var(--z7-u); } /* ------------------------------------------------------------ VARIANTE compact ------------------------------------------------------------ Pour une carte etroite — la carte de defi 1V1 fait 325 px a 1920, quand la carte mise en avant en fait 520. On ne redeclare aucune propriete : seuls les nombres changent. Les quatre unites restent ecrites en toutes lettres — « SECONDES » tient en 6,5 px dans une case de 70 px, c'est mesure. */ .z7-cd--compact { --z7-cd-ecart: 3; --z7-cd-marge: 2; --z7-cd-rayon: 6; --z7-cd-val: 13; --z7-cd-lbl: 6; --z7-cd-lbl-pistage: 0.2; } /* POURQUOI CES NOMBRES-LA, ET PAS D'AUTRES. La variante compacte doit tenir A COTE de l'adversaire, pas en dessous : la rangee passait a la ligne, et ce retour coutait 43 px de hauteur a chaque carte. La case la plus large est celle des secondes — « SECONDES » fait huit lettres, et c'est elle qui fixe la largeur des quatre. 6,5 px donnaient un decompte de 185 px. Il tenait a cote de l'adversaire, mais ne lui laissait que 61 px de nom : « Z7 NAYKO » s'affichait « Z7 NAY... » sur une capture a 390 px. A 6 px, le decompte fait 166 px et le nom en recoit 85 — assez pour les pseudos du site. Les quatre unites restent ecrites en toutes lettres. C'est mesure aux quatre largeurs, et c'est la largeur de 1920 — la plus etroite des quatre, parce que la grille y tient quatre colonnes — qui commande. */ /* ------------------------------------------------------------ LES DEUX ETATS ------------------------------------------------------------ `est-urgent` : l'echeance approche. Le rouge est celui des erreurs du site, on n'en invente pas un autre. `est-fini` : il n'y a plus rien a compter. */ .z7-cd.est-urgent { --z7-cd-encre: #ff6b6b; --z7-cd-fond: rgba(220, 53, 69, 0.12); --z7-cd-bord: rgba(220, 53, 69, 0.35); } .z7-cd.est-fini { display: block; font-family: Arial, sans-serif; font-size: calc(11 * var(--z7-cd-u)); font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; color: #ff6b6b; }