« Modèle:Joueur/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications |
mAucun résumé des modifications |
||
| Ligne 1 : | Ligne 1 : | ||
/* === BANNIÈRE NORMALE === */ | |||
.joueur-banniere { | |||
display: inline-flex; | |||
align-items: stretch; | |||
background-color: var(--color-surface-2); | |||
border: 1px solid var(--color-surface-3); | |||
border-radius: 6px; | |||
overflow: hidden; | |||
vertical-align: middle; | |||
max-width: 100%; | |||
transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; | |||
cursor: default; | |||
} | |||
.joueur-banniere:hover { | |||
background-color: var(--color-surface-3); | |||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); | |||
transform: translateY(-1px); | |||
} | |||
.joueur-banniere.joueur-droite { | |||
float: right; | |||
margin: 0 0 8px 12px; | |||
} | |||
.joueur-banniere.joueur-gauche { | |||
float: left; | |||
margin: 0 12px 8px 0; | |||
} | |||
.joueur-avatar { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.joueur-avatar a.external { | |||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
background: none !important; | |||
padding: 0 !important; | |||
} | |||
.joueur-avatar a.external::after { | |||
display: none !important; | |||
} | |||
.joueur-avatar img { | |||
display: block; | |||
width: var(--joueur-h, 60px); | |||
height: var(--joueur-h, 60px); | |||
image-rendering: pixelated; | |||
object-fit: cover; | |||
} | |||
.joueur-contenu { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
padding: 6px 16px; | |||
gap: 2px; | |||
min-width: 0; | |||
} | |||
.joueur-nom { | |||
font-weight: 700; | |||
font-size: 0.95em; | |||
color: var(--color-emphasized); | |||
line-height: 1.3; | |||
white-space: nowrap; | |||
} | |||
.joueur-grade { | |||
font-size: 0.8em; | |||
line-height: 1.2; | |||
} | |||
.joueur-grade a { | |||
color: var(--color-link); | |||
text-decoration: none; | |||
} | |||
.joueur-grade a:hover { | |||
text-decoration: underline; | |||
} | |||
.joueur-texte { | |||
font-size: 0.75em; | |||
color: var(--color-subtle); | |||
line-height: 1.2; | |||
white-space: nowrap; | |||
} | |||
/* === MODE AVATAR SEUL === */ | |||
.joueur-avatar-seul { | .joueur-avatar-seul { | ||
display: inline-block; | display: inline-block; | ||
width: var(--joueur-h, 60px); | width: var(--joueur-h, 60px); | ||
height: var(--joueur-h, 60px); | height: var(--joueur-h, 60px); | ||
background-color: var(--color-surface-2); | |||
border: 1px solid var(--color-surface-3); | |||
border-radius: 8px; | border-radius: 8px; | ||
overflow: hidden; | overflow: hidden; | ||
vertical-align: middle; | vertical-align: middle; | ||
transition: box-shadow 0.2s, transform 0.2s; | transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; | ||
cursor: default; | cursor: default; | ||
} | } | ||
.joueur-avatar-seul:hover { | .joueur-avatar-seul:hover { | ||
background-color: var(--color-surface-3); | |||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); | ||
transform: translateY(-1px); | 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; | |||
} | } | ||
| Ligne 33 : | Ligne 141 : | ||
image-rendering: pixelated; | image-rendering: pixelated; | ||
object-fit: cover; | object-fit: cover; | ||
} | |||
.joueur-erreur { | |||
color: #d33; | |||
font-style: italic; | |||
} | } | ||