Harmonise le jeu Memory avec le style ambre du site et corrige le titre
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.
This commit is contained in:
@@ -16,7 +16,7 @@
|
||||
color: var(--text);
|
||||
margin: 0 auto 32px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 3px solid var(--teal-mid);
|
||||
border-bottom: 3px solid var(--amber-mid);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
.tab-btn {
|
||||
padding: 10px 20px;
|
||||
background: var(--white);
|
||||
border: 2px solid var(--teal-light);
|
||||
border: 2px solid var(--amber-light);
|
||||
border-radius: 8px;
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 12px;
|
||||
@@ -47,13 +47,13 @@
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
border-color: var(--teal-mid);
|
||||
color: var(--teal-mid);
|
||||
border-color: var(--amber-mid);
|
||||
color: var(--amber-mid);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
|
||||
border-color: var(--teal-dark);
|
||||
background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
|
||||
border-color: var(--amber-dark);
|
||||
color: var(--white);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
@@ -62,10 +62,10 @@
|
||||
LEADERBOARD LIST
|
||||
============================================ */
|
||||
.leaderboard {
|
||||
background: linear-gradient(135deg, var(--teal-light), var(--white));
|
||||
background: linear-gradient(135deg, var(--amber-light), var(--white));
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
border: 2px solid var(--teal-mid);
|
||||
border: 2px solid var(--amber-mid);
|
||||
margin-bottom: 48px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
text-align: left;
|
||||
@@ -86,7 +86,7 @@
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid var(--teal-light);
|
||||
border-left: 4px solid var(--amber-light);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -98,14 +98,14 @@
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(29, 158, 117, 0.1), transparent);
|
||||
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(15, 110, 86, 0.15);
|
||||
border-left-color: var(--teal-mid);
|
||||
box-shadow: 0 4px 12px rgba(186, 117, 23, 0.15);
|
||||
border-left-color: var(--amber-mid);
|
||||
}
|
||||
|
||||
.rank-item:hover::before {
|
||||
@@ -116,7 +116,7 @@
|
||||
.rank-number {
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
color: var(--teal-mid);
|
||||
color: var(--amber-mid);
|
||||
text-align: center;
|
||||
font-family: 'Syne', sans-serif;
|
||||
}
|
||||
@@ -171,7 +171,7 @@
|
||||
/* Score et difficulté */
|
||||
.rank-score {
|
||||
font-weight: 700;
|
||||
color: var(--teal-dark);
|
||||
color: var(--amber-dark);
|
||||
font-size: 18px;
|
||||
font-family: 'Syne', sans-serif;
|
||||
min-width: 60px;
|
||||
@@ -185,8 +185,8 @@
|
||||
letter-spacing: 0.05em;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--teal-light);
|
||||
color: var(--teal-dark);
|
||||
background: var(--amber-light);
|
||||
color: var(--amber-dark);
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -197,8 +197,8 @@
|
||||
}
|
||||
|
||||
.rank-difficulty.normal {
|
||||
background: var(--teal-light);
|
||||
color: var(--teal-dark);
|
||||
background: var(--amber-light);
|
||||
color: var(--amber-dark);
|
||||
}
|
||||
|
||||
.rank-difficulty.hard {
|
||||
@@ -232,17 +232,17 @@
|
||||
PLAYER STATS SECTION
|
||||
============================================ */
|
||||
.player-stats {
|
||||
background: linear-gradient(135deg, rgba(15, 110, 86, 0.05), transparent);
|
||||
background: linear-gradient(135deg, rgba(186, 117, 23, 0.05), transparent);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
border: 2px solid var(--teal-light);
|
||||
border: 2px solid var(--amber-light);
|
||||
}
|
||||
|
||||
.player-stats h3 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--teal);
|
||||
color: var(--amber);
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -255,7 +255,7 @@
|
||||
|
||||
.stat-card {
|
||||
background: var(--white);
|
||||
border: 2px solid var(--teal-light);
|
||||
border: 2px solid var(--amber-light);
|
||||
border-radius: 10px;
|
||||
padding: 14px 8px;
|
||||
text-align: center;
|
||||
@@ -268,7 +268,7 @@
|
||||
.stat-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--teal-mid);
|
||||
border-color: var(--amber-mid);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
@@ -288,7 +288,7 @@
|
||||
.stat-value {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, var(--teal-mid), var(--teal-dark));
|
||||
background: linear-gradient(135deg, var(--amber-mid), var(--amber-dark));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
||||
Reference in New Issue
Block a user