math-pixel/La-Fabrik
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

polish(ui): refine pause settings menu

Browse Source
This commit is contained in:
Tom Boullay
2026-05-31 21:42:59 +02:00
parent f11ed67452
commit efcbf9e972
3 changed files with 106 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+30 -21
View File
@@ -1220,8 +1220,8 @@ canvas {
place-items: center;
padding: clamp(18px, 4vw, 42px);
background:
linear-gradient(180deg, rgba(4, 10, 18, 0.64), rgba(2, 6, 12, 0.86)),
rgba(0, 0, 0, 0.72);
linear-gradient(180deg, rgba(4, 10, 18, 0.72), rgba(2, 6, 12, 0.9)),
rgba(0, 0, 0, 0.82);
color: #ffffff;
pointer-events: auto;
backdrop-filter: blur(14px);
@@ -1236,8 +1236,8 @@ canvas {
border: 1px solid rgba(125, 211, 252, 0.38);
border-radius: 8px;
background:
linear-gradient(180deg, rgba(8, 20, 34, 0.94), rgba(3, 8, 14, 0.96)),
rgba(4, 8, 12, 0.96);
linear-gradient(180deg, rgba(8, 20, 34, 0.98), rgba(3, 8, 14, 0.99)),
rgba(4, 8, 12, 0.99);
box-shadow:
0 28px 90px rgba(0, 0, 0, 0.58),
inset 0 0 0 1px rgba(255, 255, 255, 0.05),
@@ -1327,13 +1327,17 @@ canvas {
padding: 14px;
border: 1px solid rgba(125, 211, 252, 0.2);
border-radius: 8px;
background: rgba(5, 14, 24, 0.64);
background: rgba(5, 14, 24, 0.78);
}
.game-settings-menu__section--wide {
grid-column: 1 / -1;
}
.game-settings-menu__section--right {
grid-column: 2;
}
.game-settings-menu__section-title {
display: flex;
align-items: center;
@@ -1408,8 +1412,7 @@ canvas {
}
.game-settings-menu__choice-group button,
.game-settings-menu__restart,
.game-settings-menu__quit {
.game-settings-menu__restart {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -1419,7 +1422,7 @@ canvas {
padding: 11px 12px;
border: 1px solid rgba(125, 211, 252, 0.2);
border-radius: 8px;
background: rgba(6, 18, 30, 0.72);
background: rgba(6, 18, 30, 0.84);
color: #edfaff;
cursor: pointer;
font-size: 0.88rem;
@@ -1451,12 +1454,21 @@ canvas {
line-height: 1.35;
}
.game-settings-menu__choice-group--hand-tracking button {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
justify-content: start;
text-align: left;
}
.game-settings-menu__choice-group--hand-tracking button small {
grid-column: 2;
}
.game-settings-menu__choice-group button:hover,
.game-settings-menu__choice-group button:focus-visible,
.game-settings-menu__restart:hover,
.game-settings-menu__restart:focus-visible,
.game-settings-menu__quit:hover,
.game-settings-menu__quit:focus-visible {
.game-settings-menu__restart:focus-visible {
border-color: rgba(255, 255, 255, 0.64);
background: rgba(125, 211, 252, 0.16);
color: #ffffff;
@@ -1464,8 +1476,7 @@ canvas {
}
.game-settings-menu__choice-group button:active,
.game-settings-menu__restart:active,
.game-settings-menu__quit:active {
.game-settings-menu__restart:active {
transform: translateY(1px);
}
@@ -1488,14 +1499,8 @@ canvas {
.game-settings-menu__restart {
margin-top: 12px;
border-color: rgba(96, 165, 250, 0.35);
color: #bfdbfe;
}
.game-settings-menu__quit {
margin-top: 8px;
border-color: rgba(248, 113, 113, 0.35);
color: #fecaca;
border-color: rgba(125, 211, 252, 0.35);
color: #dff7ff;
}
@media (max-width: 720px) {
@@ -1512,6 +1517,10 @@ canvas {
.game-settings-menu__choice-group--presets {
grid-template-columns: 1fr;
}
.game-settings-menu__section--right {
grid-column: auto;
}
}
/* Debug overlay panels */