beuz/Beuz-Video-Game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: add console colors, state badges, sticky header and clearer actions

Browse Source
This commit is contained in:
Ponte
2026-02-14 23:52:19 +01:00
parent 9d350c2e09
commit 551d42a251
3 changed files with 174 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
styles.css
View File

@@ -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));