gauthier.chombart
9140d2f468
Le jeu utilisait le teal comme couleur dominante (titres, bordures, boutons, cartes) alors que le reste du site n'emploie le teal que ponctuellement (état de succès) et repose sur l'ambre comme couleur principale. Remplace toutes les références teal par l'ambre déjà défini dans header-style.css, et réaffecte le teal à son rôle habituel de couleur de succès (paire trouvée), à la place du vert générique utilisé jusqu'ici. Renomme aussi le titre en "Memory pictogrammes", augmente la marge sous le header pour éviter tout chevauchement, et ajoute un paramètre de version aux feuilles de style du jeu pour éviter les soucis de cache navigateur lors des prochaines mises à jour.
449 lines
8.3 KiB
CSS
449 lines
8.3 KiB
CSS
/* ============================================
|
|
LEADERBOARD & PLAYER STATS
|
|
============================================ */
|
|
|
|
.leaderboard-section {
|
|
margin-top: 80px;
|
|
animation: fadeInUp 0.6s ease-out 0.6s both;
|
|
text-align: center;
|
|
}
|
|
|
|
.leaderboard-section h2 {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: clamp(24px, 5vw, 32px);
|
|
font-weight: 800;
|
|
letter-spacing: -0.5px;
|
|
color: var(--text);
|
|
margin: 0 auto 32px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 3px solid var(--amber-mid);
|
|
display: inline-block;
|
|
}
|
|
|
|
/* ============================================
|
|
TABS (Filtre par difficulté)
|
|
============================================ */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
margin-bottom: 32px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tab-btn {
|
|
padding: 10px 20px;
|
|
background: var(--white);
|
|
border: 2px solid var(--amber-light);
|
|
border-radius: 8px;
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.tab-btn:hover {
|
|
border-color: var(--amber-mid);
|
|
color: var(--amber-mid);
|
|
}
|
|
|
|
.tab-btn.active {
|
|
background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
|
|
border-color: var(--amber-dark);
|
|
color: var(--white);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* ============================================
|
|
LEADERBOARD LIST
|
|
============================================ */
|
|
.leaderboard {
|
|
background: linear-gradient(135deg, var(--amber-light), var(--white));
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
border: 2px solid var(--amber-mid);
|
|
margin-bottom: 48px;
|
|
box-shadow: var(--shadow-sm);
|
|
text-align: left;
|
|
}
|
|
|
|
.leaderboard-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.rank-item {
|
|
display: grid;
|
|
grid-template-columns: 50px 1fr auto auto;
|
|
align-items: center;
|
|
gap: 16px;
|
|
background: var(--white);
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
border-left: 4px solid var(--amber-light);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rank-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(186, 117, 23, 0.1), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.rank-item:hover {
|
|
transform: translateX(8px);
|
|
box-shadow: 0 4px 12px rgba(186, 117, 23, 0.15);
|
|
border-left-color: var(--amber-mid);
|
|
}
|
|
|
|
.rank-item:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
/* Rang numéro ou médaille */
|
|
.rank-number {
|
|
font-weight: 800;
|
|
font-size: 18px;
|
|
color: var(--amber-mid);
|
|
text-align: center;
|
|
font-family: 'Syne', sans-serif;
|
|
}
|
|
|
|
.rank-number.medal-1 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.rank-number.medal-1::before {
|
|
content: '🥇';
|
|
display: block;
|
|
}
|
|
|
|
.rank-number.medal-2::before {
|
|
content: '🥈';
|
|
display: block;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.rank-number.medal-3::before {
|
|
content: '🥉';
|
|
display: block;
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* Infos joueur */
|
|
.rank-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.player-name {
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.rank-meta {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.rank-meta span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* Score et difficulté */
|
|
.rank-score {
|
|
font-weight: 700;
|
|
color: var(--amber-dark);
|
|
font-size: 18px;
|
|
font-family: 'Syne', sans-serif;
|
|
min-width: 60px;
|
|
text-align: right;
|
|
}
|
|
|
|
.rank-difficulty {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
background: var(--amber-light);
|
|
color: var(--amber-dark);
|
|
min-width: 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
.rank-difficulty.easy {
|
|
background: #C8E6C9;
|
|
color: #2E7D32;
|
|
}
|
|
|
|
.rank-difficulty.normal {
|
|
background: var(--amber-light);
|
|
color: var(--amber-dark);
|
|
}
|
|
|
|
.rank-difficulty.hard {
|
|
background: #FFCCBC;
|
|
color: #D84315;
|
|
}
|
|
|
|
/* Message si pas de scores */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.empty-state-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.empty-state-text {
|
|
font-size: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.empty-state-hint {
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ============================================
|
|
PLAYER STATS SECTION
|
|
============================================ */
|
|
.player-stats {
|
|
background: linear-gradient(135deg, rgba(186, 117, 23, 0.05), transparent);
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
border: 2px solid var(--amber-light);
|
|
}
|
|
|
|
.player-stats h3 {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--amber);
|
|
margin-bottom: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--white);
|
|
border: 2px solid var(--amber-light);
|
|
border-radius: 10px;
|
|
padding: 14px 8px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--amber-mid);
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 22px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-muted);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-family: 'Syne', sans-serif;
|
|
}
|
|
|
|
.stat-card.high-value .stat-value {
|
|
font-size: 22px;
|
|
animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
/* ============================================
|
|
NO DATA STATE
|
|
============================================ */
|
|
.no-stats {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.no-stats-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.no-stats-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.no-stats-desc {
|
|
font-size: 13px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE DESIGN
|
|
============================================ */
|
|
@media (max-width: 768px) {
|
|
.leaderboard-section h2 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.tabs {
|
|
gap: 6px;
|
|
}
|
|
|
|
.tab-btn {
|
|
padding: 8px 16px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.rank-item {
|
|
grid-template-columns: 40px 1fr auto;
|
|
gap: 12px;
|
|
}
|
|
|
|
.rank-difficulty {
|
|
display: none;
|
|
}
|
|
|
|
.rank-number {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.rank-score {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.player-stats {
|
|
padding: 20px;
|
|
}
|
|
|
|
.player-stats h3 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.stat-card {
|
|
padding: 14px 10px;
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 24px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.leaderboard {
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.tabs {
|
|
gap: 4px;
|
|
}
|
|
|
|
.tab-btn {
|
|
padding: 6px 12px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.rank-item {
|
|
grid-template-columns: 40px 1fr;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.rank-score {
|
|
grid-column: 1 / -1;
|
|
text-align: left;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.rank-number {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.player-name {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.player-stats {
|
|
padding: 16px;
|
|
}
|
|
|
|
.player-stats h3 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.stat-card {
|
|
padding: 12px 8px;
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 18px;
|
|
}
|
|
}
|