diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md index 70bf8fd..c99a1a1 100644 --- a/DESIGN_SYSTEM.md +++ b/DESIGN_SYSTEM.md @@ -805,6 +805,7 @@ Date picker et menus compacts : - la grille utilise un minimum de 220 px pour afficher cinq colonnes à 1920 px, puis réduit le nombre de colonnes sur les petits écrans ; limiter les cartes à 280 px de largeur ; le recto fixe leur hauteur avec le portrait et un pied de 96 px, indépendamment des noms et des variantes ; - le nom de forme revient à la ligne au recto, dans le pied fixe de 96 px ; - le recto affiche uniquement les icônes d'éléments, centrées dans le pied de carte, avec texte alternatif et infobulle ; +- le numéro Aniimo reste un texte HTML visible en bas à gauche du portrait, afin de rester accessible à la recherche du navigateur ; - les onglets affichent des initiales ou une abréviation de trois lettres pour les formes à un seul mot (PLA, PRA, PRI) ; le nom complet reste accessible via `Tooltip`, au survol et au focus ; - placer les onglets au-dessus du contrôle de retournement, avec navigation clavier ; une grille de colonnes égales affiche les sept formes sur une ligne sans couper les libellés ; - la forme Prismana est la dernière entrée des variantes dans le JSON ; son onglet reçoit un léger fond et un soulignement arc-en-ciel statiques, sans masquer la sélection ou le focus ; diff --git a/website/src/features/games/aniimo/AniimoCard.jsx b/website/src/features/games/aniimo/AniimoCard.jsx index 9aa2be9..3539a78 100644 --- a/website/src/features/games/aniimo/AniimoCard.jsx +++ b/website/src/features/games/aniimo/AniimoCard.jsx @@ -36,7 +36,11 @@ function CardFaces({ variant, t, content, checklist, statsMax }) {
{flipButton(false, frontButton)} -
{t(variant.name)}
+
+ {t(variant.name)} + N° {variant.aniimoId} + +

{t(variant.name)}

{t(variant.form)}

diff --git a/website/src/styles/_aniimo.scss b/website/src/styles/_aniimo.scss index 894651c..322f934 100644 --- a/website/src/styles/_aniimo.scss +++ b/website/src/styles/_aniimo.scss @@ -136,6 +136,7 @@ } .aniimo-portrait { @include surfaces.card-cover-divider; + position: relative; aspect-ratio: 3 / 4; max-height: 250px; width: 100%; @@ -143,6 +144,22 @@ overflow: hidden; img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } } +.aniimo-number { + position: absolute; + bottom: 10px; + left: 10px; + z-index: 2; + padding: 3px 7px; + border: 1px solid var(--color-border-hover); + border-radius: var(--radius-sm); + background: rgba(7, 9, 19, 0.82); + color: var(--color-text-primary); + font-size: var(--font-size-xs); + font-weight: 700; + font-variant-numeric: tabular-nums; + line-height: 1.2; + pointer-events: none; +} // Les deux portraits de Petit Esprit de Feu ont davantage de vide sous le personnage. .aniimo-result[data-aniimo="11001"] .aniimo-portrait img { object-position: center 20%; } .aniimo-card-body {