/* Avatar d'un joueur : la couleur et l'icône choisies dans l'application ou
sur la page de suivi (voir includes/avatars.php).
Une feuille à part, et non un morceau de score.css : la popup de modification
vit dans un shadow DOM, qui ne voit aucune règle de la page. Sans ce fichier
autonome à lier des deux côtés, les pastilles du sélecteur s'y afficheraient
vides — et une pastille vide ne se distingue pas d'un défaut de chargement. */
/* L'icône est peinte par un pseudo-élément, et non par l'élément lui-même :
la pastille porte déjà un fond — la même couleur très diluée — que le masque
effacerait avec le reste.
Icônes Font Awesome Free 6.7.2, CC BY 4.0 - https://fontawesome.com/license/free
Copyright 2024 Fonticons, Inc. */
.c-score__player-icon {
position: relative;
}
.c-score__player-icon::before {
content: "";
position: absolute;
/* Un carré inscrit dans le disque, avec de l'air autour. */
inset: 22%;
background-color: var(--color);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
.c-score__player-icon--chat::before {
mask-image: url('data:image/svg+xml,');
}
.c-score__player-icon--poisson::before {
mask-image: url('data:image/svg+xml,');
}
.c-score__player-icon--etoile::before {
mask-image: url('data:image/svg+xml,');
}
.c-score__player-icon--coeur::before {
mask-image: url('data:image/svg+xml,');
}
.c-score__player-icon--fusee::before {
mask-image: url('data:image/svg+xml,');
}
.c-score__player-icon--feuille::before {
mask-image: url('data:image/svg+xml,');
}
.c-score__player-icon--ballon::before {
mask-image: url('data:image/svg+xml,');
}
.c-score__player-icon--musique::before {
mask-image: url('data:image/svg+xml,');
}
.c-score__player-icon--eclair::before {
mask-image: url('data:image/svg+xml,');
}
.c-score__player-icon--robot::before {
mask-image: url('data:image/svg+xml,');
}
.c-score__player-icon--gateau::before {
mask-image: url('data:image/svg+xml,');
}
.c-score__player-icon--trophee::before {
mask-image: url('data:image/svg+xml,');
}
/* ── Sélecteur de couleur et d'icône (popup « Modifier le joueur ») ───────
Les vingt-deux pastilles sont montrées d'un coup, sans menu ni carrousel :
c'est un choix qu'on fait à l'œil, et une liste déroulante obligerait à
ouvrir pour voir. Le même parti que l'écran de l'application. */
.avatar-picker {
display: flex;
flex-direction: column;
gap: 0.5em;
text-align: left;
}
.avatar-picker__head {
display: flex;
align-items: center;
gap: 0.75em;
}
/* L'aperçu : la pastille exacte que portera le joueur, montrée pendant
qu'on la compose. */
.avatar-picker__preview {
flex-shrink: 0;
width: 3em;
height: 3em;
border-radius: 50%;
background-color: color-mix(in srgb, var(--color) 20%, transparent);
}
.avatar-picker__name {
flex-grow: 1;
min-width: 0;
}
.avatar-picker__legend {
font-size: 0.75em;
font-weight: bold;
letter-spacing: 0.08em;
opacity: 0.6;
margin-bottom: -0.25em;
}
.avatar-picker__row {
display: flex;
flex-wrap: wrap;
gap: 0.35em;
}
/* Une vraie cible de doigt : ce sont les seules commandes de la popup qu'on
vise sans lire. */
.avatar-picker__swatch {
width: 2.5em;
height: 2.5em;
flex-shrink: 0;
padding: 0;
border: 2px solid rgba(0, 0, 0, 0.08);
border-radius: 50%;
background: none;
cursor: pointer;
position: relative;
}
.avatar-picker__swatch--color {
background-color: var(--color);
}
.avatar-picker__swatch--icon {
background-color: color-mix(in srgb, var(--color) 20%, transparent);
}
.avatar-picker__swatch[aria-pressed="true"] {
border-color: #f0a500;
border-width: 3px;
}
.avatar-picker__swatch:focus-visible {
outline: 2px solid #0356b3;
outline-offset: 2px;
}