« Modèle:Joueur/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications |
m charte graphique |
||
| (13 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
/* === CONTENEUR GRILLE === */ | |||
.joueurs-grille { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 10px; | |||
align-items: stretch; | |||
} | |||
/* === BANNIÈRE NORMALE === */ | /* === BANNIÈRE NORMALE === */ | ||
.joueur-banniere { | .joueur-banniere { | ||
| Ligne 5 : | Ligne 13 : | ||
background-color: var(--color-surface-2); | background-color: var(--color-surface-2); | ||
border: 1px solid var(--color-surface-3); | border: 1px solid var(--color-surface-3); | ||
border-radius: | border-radius: 10px; | ||
overflow: hidden; | overflow: hidden; | ||
vertical-align: | vertical-align: top; | ||
max-width: 100%; | max-width: 100%; | ||
min-height: var(--joueur-h, | width: 300px; | ||
min-height: var(--joueur-h, 80px); | |||
transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; | transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; | ||
cursor: default; | cursor: default; | ||
} | |||
.joueurs-grille .joueur-banniere { | |||
vertical-align: unset; | |||
} | } | ||
| Ligne 28 : | Ligne 41 : | ||
float: left; | float: left; | ||
margin: 0 12px 8px 0; | margin: 0 12px 8px 0; | ||
} | |||
/* === BANNIÈRE CLIQUABLE === */ | |||
.joueur-banniere.joueur-lien { | |||
position: relative; | |||
cursor: pointer; | |||
} | |||
.joueur-lien-overlay { | |||
position: absolute; | |||
inset: 0; | |||
z-index: 2; | |||
display: block; | |||
} | |||
/* Masquer les styles par défaut du lien wiki */ | |||
.joueur-banniere.joueur-lien > a { | |||
color: inherit; | |||
text-decoration: none; | |||
} | |||
.joueur-lien-overlay::after { | |||
display: none !important; | |||
} | } | ||
.joueur-avatar { | .joueur-avatar { | ||
flex: 0 0 var(--joueur-h, | flex: 0 0 var(--joueur-h, 80px); | ||
width: var(--joueur-h, | width: var(--joueur-h, 80px); | ||
height: var(--joueur-h, | height: var(--joueur-h, 80px); | ||
align-self: center; | |||
overflow: hidden; | overflow: hidden; | ||
margin: 0 10px; | |||
} | } | ||
.joueur-avatar a { | .joueur-avatar a { | ||
| Ligne 46 : | Ligne 84 : | ||
padding: 0 !important; | padding: 0 !important; | ||
background: none !important; | background: none !important; | ||
overflow: hidden; | |||
} | } | ||
.joueur-avatar a::after { | .joueur-avatar a::after { | ||
| Ligne 58 : | Ligne 96 : | ||
height: 100%; | height: 100%; | ||
image-rendering: pixelated; | image-rendering: pixelated; | ||
object-fit: contain; | |||
} | } | ||
| Ligne 64 : | Ligne 103 : | ||
flex-direction: column; | flex-direction: column; | ||
justify-content: center; | justify-content: center; | ||
padding: | padding: 10px 14px 10px 12px; | ||
min-height: var(--joueur-h, | min-height: var(--joueur-h, 80px); | ||
gap: | gap: 3px; | ||
min-width: 0; | min-width: 0; | ||
flex: 1; | |||
overflow: hidden; | |||
} | } | ||
.joueur-nom { | .joueur-nom { | ||
font-weight: 700; | font-weight: 700; | ||
font-size: | font-size: 1em; | ||
color: var(--color-emphasized); | color: var(--color-emphasized); | ||
line-height: 1.3; | line-height: 1.3; | ||
white-space: nowrap; | white-space: nowrap; | ||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | |||
.joueur-alias { | |||
font-size: 0.75em; | |||
font-style: italic; | |||
color: var(--color-subtle); | |||
font-weight: 400; | |||
} | } | ||
.joueur-grade { | .joueur-grade { | ||
font-size: 0. | font-size: 0.82em; | ||
line-height: 1. | line-height: 1.3; | ||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | } | ||
| Ligne 86 : | Ligne 139 : | ||
color: var(--color-link); | color: var(--color-link); | ||
text-decoration: none; | text-decoration: none; | ||
position: relative; | |||
z-index: 3; | |||
} | } | ||
| Ligne 93 : | Ligne 148 : | ||
.joueur-texte { | .joueur-texte { | ||
font-size: 0. | font-size: 0.78em; | ||
color: var(--color-subtle); | color: var(--color-subtle); | ||
line-height: 1. | line-height: 1.35; | ||
white-space: | white-space: normal; | ||
word-wrap: break-word; | |||
overflow-wrap: break-word; | |||
margin-top: 2px; | |||
} | } | ||
| Ligne 102 : | Ligne 160 : | ||
.joueur-avatar-seul { | .joueur-avatar-seul { | ||
display: inline-block; | display: inline-block; | ||
width: var(--joueur-h, | width: var(--joueur-h, 80px); | ||
height: var(--joueur-h, | height: var(--joueur-h, 80px); | ||
background-color: var(--color-surface-2); | background-color: var(--color-surface-2); | ||
border: 1px solid var(--color-surface-3); | border: 1px solid var(--color-surface-3); | ||
border-radius: 8px; | border-radius: 8px; | ||
overflow: hidden; | overflow: hidden; | ||
vertical-align: | vertical-align: top; | ||
transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; | transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; | ||
cursor: default; | cursor: default; | ||
} | |||
.joueurs-grille .joueur-avatar-seul { | |||
vertical-align: unset; | |||
} | } | ||
| Ligne 150 : | Ligne 212 : | ||
.joueur-erreur { | .joueur-erreur { | ||
color: | color: var(--color-destructive); | ||
font-style: italic; | font-style: italic; | ||
} | } | ||