« Modèle:Joueur/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications |
m charte graphique |
||
| (21 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 === */ | |||
.joueur-banniere { | .joueur-banniere { | ||
display: inline-flex; | display: inline-flex; | ||
align-items: center; | |||
align-items: | |||
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%; | |||
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 19 : | Ligne 33 : | ||
} | } | ||
.joueur-droite { | .joueur-banniere.joueur-droite { | ||
float: right; | float: right; | ||
margin | margin: 0 0 8px 12px; | ||
} | } | ||
.joueur-gauche { | .joueur-banniere.joueur-gauche { | ||
float: left; | float: left; | ||
margin- | 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 { | ||
width: var(--joueur-h, | flex: 0 0 var(--joueur-h, 80px); | ||
height: var(--joueur-h, | width: var(--joueur-h, 80px); | ||
height: var(--joueur-h, 80px); | |||
align-self: center; | |||
overflow: hidden; | overflow: hidden; | ||
margin: 0 10px; | |||
} | } | ||
.joueur-avatar a | |||
.joueur-avatar a { | |||
display: block; | display: block; | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
line-height: 0; | |||
margin: 0; | |||
padding: 0 !important; | |||
background: none !important; | background: none !important; | ||
overflow: hidden; | |||
} | } | ||
.joueur-avatar a | .joueur-avatar a::after { | ||
display: none !important; | display: none !important; | ||
} | } | ||
| Ligne 55 : | Ligne 93 : | ||
.joueur-avatar img { | .joueur-avatar img { | ||
display: block; | display: block; | ||
width: | width: 100%; | ||
height: | height: 100%; | ||
image-rendering: pixelated; | image-rendering: pixelated; | ||
object-fit: | object-fit: contain; | ||
} | } | ||
| Ligne 65 : | Ligne 103 : | ||
flex-direction: column; | flex-direction: column; | ||
justify-content: center; | justify-content: center; | ||
padding: | padding: 10px 14px 10px 12px; | ||
gap: | min-height: var(--joueur-h, 80px); | ||
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; | |||
} | |||
/* === MODE AVATAR SEUL === */ | |||
.joueur-avatar-seul { | |||
display: inline-block; | |||
width: var(--joueur-h, 80px); | |||
height: var(--joueur-h, 80px); | |||
background-color: var(--color-surface-2); | |||
border: 1px solid var(--color-surface-3); | |||
border-radius: 8px; | |||
overflow: hidden; | |||
vertical-align: top; | |||
transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; | |||
cursor: default; | |||
} | |||
.joueurs-grille .joueur-avatar-seul { | |||
vertical-align: unset; | |||
} | |||
.joueur-avatar-seul:hover { | |||
background-color: var(--color-surface-3); | |||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); | |||
transform: translateY(-1px); | |||
} | |||
.joueur-avatar-seul.joueur-droite { | |||
float: right; | |||
margin: 0 0 8px 12px; | |||
} | |||
.joueur-avatar-seul.joueur-gauche { | |||
float: left; | |||
margin: 0 12px 8px 0; | |||
} | |||
.joueur-avatar-seul a { | |||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
line-height: 0; | |||
background: none !important; | |||
padding: 0 !important; | |||
} | |||
.joueur-avatar-seul a::after { | |||
display: none !important; | |||
} | |||
.joueur-avatar-seul img { | |||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
image-rendering: pixelated; | |||
} | } | ||
.joueur-erreur { | .joueur-erreur { | ||
color: | color: var(--color-destructive); | ||
font-style: italic; | font-style: italic; | ||
} | } | ||