Vue catalogue
- 0 jeu
+ 0 jeu affiche
diff --git a/styles.css b/styles.css
index cdd4830..a001438 100644
--- a/styles.css
+++ b/styles.css
@@ -439,6 +439,50 @@ button {
align-items: center;
}
+.console-theme-default {
+ background: #ffffff;
+}
+
+.console-theme-ps5 {
+ background: linear-gradient(165deg, #eef6ff 0%, #ffffff 52%);
+}
+
+.console-theme-ps4 {
+ background: linear-gradient(165deg, #f1f6ff 0%, #ffffff 54%);
+}
+
+.console-theme-ps3 {
+ background: linear-gradient(165deg, #f6f7ff 0%, #ffffff 54%);
+}
+
+.console-theme-ps2 {
+ background: linear-gradient(165deg, #f2f0ff 0%, #ffffff 56%);
+}
+
+.console-theme-ps1 {
+ background: linear-gradient(165deg, #f3f5ff 0%, #ffffff 56%);
+}
+
+.console-theme-switch {
+ background: linear-gradient(165deg, #fff0f1 0%, #ffffff 56%);
+}
+
+.console-theme-xbox {
+ background: linear-gradient(165deg, #ecfff6 0%, #ffffff 56%);
+}
+
+.console-theme-wii {
+ background: linear-gradient(165deg, #edf9ff 0%, #ffffff 56%);
+}
+
+.console-theme-snes {
+ background: linear-gradient(165deg, #f5f2ff 0%, #ffffff 56%);
+}
+
+.console-theme-nes {
+ background: linear-gradient(165deg, #f7f7f7 0%, #ffffff 56%);
+}
+
.game-cover {
width: 56px;
height: 76px;
@@ -619,6 +663,47 @@ button {
border-color: #ffe6b9;
}
+.status-badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.2rem 0.5rem;
+ border-radius: 999px;
+ font-size: 0.73rem;
+ font-weight: 700;
+ letter-spacing: 0.01em;
+ border: 1px solid transparent;
+}
+
+.status-badge.status-good {
+ background: #e5f9ef;
+ color: #126948;
+ border-color: #c3efd9;
+}
+
+.status-badge.status-medium {
+ background: #ebf7ff;
+ color: #135b84;
+ border-color: #cae9fa;
+}
+
+.status-badge.status-warning {
+ background: #fff6e6;
+ color: #915f12;
+ border-color: #ffe5b6;
+}
+
+.status-badge.status-low {
+ background: #ffecef;
+ color: #9a2d41;
+ border-color: #ffcfd9;
+}
+
+.status-badge.status-neutral {
+ background: #edf1f7;
+ color: #2f4255;
+ border-color: #d8e1ed;
+}
+
.toast-container {
position: fixed;
right: 1rem;
@@ -666,9 +751,9 @@ body.ui-v2 .game-card {
}
body.ui-v2 .game-card:hover {
- transform: translateY(-2px);
+ transform: translateY(-1px);
border-color: #d3cef9;
- box-shadow: 0 12px 24px rgba(50, 50, 93, 0.14);
+ box-shadow: 0 8px 16px rgba(50, 50, 93, 0.1);
}
body.ui-v2 .game-cover {
@@ -681,6 +766,12 @@ body.ui-v2 .game-actions {
grid-template-columns: 1fr;
}
+body.ui-v2 .hero {
+ position: sticky;
+ top: 4.2rem;
+ z-index: 15;
+}
+
@media (max-width: 1100px) {
body.ui-v2 .games-list {
grid-template-columns: repeat(2, minmax(0, 1fr));