/* -----------------------------------------------------------------------------
Les pictogrammes des insignes
Poses en CSS et non dans le HTML : les insignes se dessinent a QUATRE
endroits, la barre du haut et la page publique en JavaScript, la liste des
amis et le classement en PHP. Une icone glissee dans le balisage aurait ete
a recopier quatre fois.
Et dans un fichier a part, pas dans app.css : la page des amis a sa propre
feuille, courte et autonome, elle ne charge pas app.css. Recopier ces
dessins dans les deux aurait fait deux verites a maintenir.
Le centrage vertical ne se regle pas au pixel pres ici. .badge est en
inline-flex avec align-items:center : le picto se cale sur le milieu du
texte quelle que soit la police installee sur la machine. Un vertical-align
chiffre aurait donne un resultat different chez chacun.
Ce sont des SVG en pixels, un chemin par ligne de meme couleur, inclus
directement dans la feuille : aucun fichier a televerser, aucune requete de
plus, et le dessin reste net a toutes les tailles et sur tous les ecrans.
shape-rendering:crispEdges empeche le navigateur de lisser les bords. Sans
lui, un carre de 11 px sur un ecran a densite non entiere devient flou et
perd l'aspect pixel.
----------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
LES DESSINS, DECLARES UNE FOIS ET NOMMES
Ils etaient ecrits directement dans la regle qui les utilisait. Ca tenait
tant qu'un dessin ne servait qu'a un endroit ; la Master Ball en sert deux
depuis que la fenetre de l'offre l'affiche a cote de son nom, et une Poke
Ball est apparue la aussi sans qu'aucun insigne ne la porte.
Recopier un data:image dans deux regles, c'est deux verites a corriger le
jour ou le dessin change, et une des deux qu'on oublie. Les voici donc
nommees une fois pour toutes : qui veut une Ball la demande par son nom.
Elles sont sur :root et non sur .badge, pour que app.css puisse les lire
depuis d'autres selecteurs. Toutes les pages qui affichent une Ball
chargent cette feuille — index.php (et u.php qui l'inclut), compte.php,
amis.php — donc aucune ne peut demander un dessin absent.
--------------------------------------------------------------------------- */
:root{
/* La Poke Ball. Elle ne sert a aucun insigne : elle designe l'offre
gratuite dans la fenetre de l'abonnement, en face de la Master Ball. */
--ball-poke:url("data:image/svg+xml,");
--ball-admin:url("data:image/svg+xml,");
--ball-memoire:url("data:image/svg+xml,");
--ball-master:url("data:image/svg+xml,")
}
/* Seuls ces trois insignes ont un dessin. Ecrit sur .badge tout court, la
regle collait aussi une boite vide de 11 px a l'insigne "nouveau" de la
liste des amis, qui n'a pas d'icone : un blanc inexplique en fin de
pastille. */
.badge.adm::after,.badge.pio::after,.badge.pro::after{content:"";display:inline-block;width:11px;height:11px;vertical-align:-1px;background-repeat:no-repeat;background-position:center;background-size:contain}
/* LA COURONNE EST REMPLACEE PAR UNE BALL, comme les deux autres insignes.
Trois insignes cote a cote, deux Ball et une couronne : l'intrus se
remarquait avant de se lire. Ici les trois disent la meme chose de la
meme facon, et c'est la Ball qui change, pas le genre de dessin.
Plus de largeur ni de hauteur a part : la couronne etait plus large que
haute et avait besoin de ses propres mesures. Une Ball rentre dans le
carre commun, elle reprend donc la regle du dessus.
Les couleurs sont celles de la famille — le meme noir que les deux
autres, le blanc et le gris de la Master Ball, le rouge de la Memoire
Ball — et non les valeurs brutes du dessin d'origine : trois pictos
dans la meme rangee ne doivent pas avoir trois blancs differents. */
.badge.adm::after{background-image:var(--ball-admin)}
.badge.pio::after{background-image:var(--ball-memoire)}
.badge.pro::after{background-image:var(--ball-master)}