feat(world): add map lod graphics presets
This commit is contained in:
Tom Boullay
+194
-49
@@ -1218,22 +1218,49 @@ canvas {
|
||||
z-index: 40;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
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);
|
||||
color: #ffffff;
|
||||
pointer-events: auto;
|
||||
backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
.game-settings-menu__panel {
|
||||
width: min(460px, 100%);
|
||||
max-height: calc(100vh - 40px);
|
||||
position: relative;
|
||||
width: min(760px, 100%);
|
||||
max-height: calc(100vh - clamp(36px, 8vw, 84px));
|
||||
overflow-y: auto;
|
||||
padding: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 24px;
|
||||
background: rgba(8, 8, 8, 0.94);
|
||||
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
|
||||
padding: clamp(16px, 2.4vw, 22px);
|
||||
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);
|
||||
box-shadow:
|
||||
0 28px 90px rgba(0, 0, 0, 0.58),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.05),
|
||||
0 0 34px rgba(56, 189, 248, 0.16);
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(125, 211, 252, 0.55) transparent;
|
||||
}
|
||||
|
||||
.game-settings-menu__panel::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
border-radius: 8px;
|
||||
background: repeating-linear-gradient(
|
||||
180deg,
|
||||
rgba(125, 211, 252, 0.08) 0,
|
||||
rgba(125, 211, 252, 0.08) 1px,
|
||||
transparent 1px,
|
||||
transparent 8px
|
||||
);
|
||||
content: "";
|
||||
opacity: 0.35;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.game-settings-menu__header {
|
||||
@@ -1241,21 +1268,26 @@ canvas {
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 4px 4px 16px;
|
||||
padding: 4px 2px 18px;
|
||||
}
|
||||
|
||||
.game-settings-menu__header span {
|
||||
color: #8f8f8f;
|
||||
font-size: 0.7rem;
|
||||
color: #7dd3fc;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.game-settings-menu__header h2 {
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: -0.06em;
|
||||
font-family: "Nersans One", var(--font-primary);
|
||||
font-size: clamp(2rem, 4vw, 3.2rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
line-height: 0.92;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.game-settings-menu__close {
|
||||
@@ -1263,26 +1295,59 @@ canvas {
|
||||
place-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: 999px;
|
||||
background: #111111;
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(125, 211, 252, 0.35);
|
||||
border-radius: 8px;
|
||||
background: rgba(10, 22, 34, 0.84);
|
||||
color: #dff7ff;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 160ms ease,
|
||||
border-color 160ms ease,
|
||||
color 160ms ease;
|
||||
}
|
||||
|
||||
.game-settings-menu__close:hover,
|
||||
.game-settings-menu__close:focus-visible {
|
||||
border-color: rgba(255, 255, 255, 0.78);
|
||||
background: rgba(125, 211, 252, 0.18);
|
||||
color: #ffffff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.game-settings-menu__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.game-settings-menu__section {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 16px 4px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
align-content: start;
|
||||
padding: 14px;
|
||||
border: 1px solid rgba(125, 211, 252, 0.2);
|
||||
border-radius: 8px;
|
||||
background: rgba(5, 14, 24, 0.64);
|
||||
}
|
||||
|
||||
.game-settings-menu__section--wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.game-settings-menu__section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #7dd3fc;
|
||||
}
|
||||
|
||||
.game-settings-menu__section h3 {
|
||||
margin: 0;
|
||||
color: #d7d7d7;
|
||||
color: #dff7ff;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -1297,19 +1362,28 @@ canvas {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
color: #f2f2f2;
|
||||
color: #edfaff;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.game-settings-menu__slider em {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.game-settings-menu__slider strong {
|
||||
color: #8f8f8f;
|
||||
color: #7dd3fc;
|
||||
font-size: 0.78rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.game-settings-menu__slider input[type="range"] {
|
||||
width: 100%;
|
||||
accent-color: #ffffff;
|
||||
accent-color: #7dd3fc;
|
||||
}
|
||||
|
||||
.game-settings-menu__checkbox {
|
||||
@@ -1320,7 +1394,7 @@ canvas {
|
||||
.game-settings-menu__checkbox input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: #ffffff;
|
||||
accent-color: #7dd3fc;
|
||||
}
|
||||
|
||||
.game-settings-menu__choice-group {
|
||||
@@ -1329,36 +1403,91 @@ canvas {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.game-settings-menu__choice-group--stacked {
|
||||
grid-template-columns: 1fr;
|
||||
.game-settings-menu__choice-group--presets {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.game-settings-menu__choice-group button,
|
||||
.game-settings-menu__restart,
|
||||
.game-settings-menu__quit {
|
||||
width: 100%;
|
||||
padding: 11px 12px;
|
||||
border: 1px solid #242424;
|
||||
border-radius: 14px;
|
||||
background: #101010;
|
||||
color: #f2f2f2;
|
||||
cursor: pointer;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 680;
|
||||
}
|
||||
|
||||
.game-settings-menu__choice-group button.active {
|
||||
border-color: #ffffff;
|
||||
background: #ffffff;
|
||||
color: #050505;
|
||||
}
|
||||
|
||||
.game-settings-menu__restart {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
padding: 11px 12px;
|
||||
border: 1px solid rgba(125, 211, 252, 0.2);
|
||||
border-radius: 8px;
|
||||
background: rgba(6, 18, 30, 0.72);
|
||||
color: #edfaff;
|
||||
cursor: pointer;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 680;
|
||||
transition:
|
||||
background 160ms ease,
|
||||
border-color 160ms ease,
|
||||
color 160ms ease,
|
||||
transform 120ms ease;
|
||||
}
|
||||
|
||||
.game-settings-menu__choice-group--presets button {
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
gap: 4px;
|
||||
min-height: 72px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.game-settings-menu__choice-group button span {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.game-settings-menu__choice-group button small {
|
||||
color: rgba(223, 247, 255, 0.62);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.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 {
|
||||
border-color: rgba(255, 255, 255, 0.64);
|
||||
background: rgba(125, 211, 252, 0.16);
|
||||
color: #ffffff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.game-settings-menu__choice-group button:active,
|
||||
.game-settings-menu__restart:active,
|
||||
.game-settings-menu__quit:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.game-settings-menu__choice-group button.active {
|
||||
border-color: rgba(125, 211, 252, 0.92);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(125, 211, 252, 0.28),
|
||||
rgba(14, 116, 144, 0.22)
|
||||
);
|
||||
color: #ffffff;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.08),
|
||||
0 0 22px rgba(56, 189, 248, 0.22);
|
||||
}
|
||||
|
||||
.game-settings-menu__choice-group button.active small {
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
}
|
||||
|
||||
.game-settings-menu__restart {
|
||||
margin-top: 12px;
|
||||
border-color: rgba(96, 165, 250, 0.35);
|
||||
color: #bfdbfe;
|
||||
}
|
||||
@@ -1369,6 +1498,22 @@ canvas {
|
||||
color: #fecaca;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.game-settings-menu {
|
||||
align-items: stretch;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.game-settings-menu__panel {
|
||||
max-height: calc(100vh - 28px);
|
||||
}
|
||||
|
||||
.game-settings-menu__grid,
|
||||
.game-settings-menu__choice-group--presets {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Debug overlay panels */
|
||||
.debug-overlay-layout {
|
||||
position: fixed;
|
||||
|
||||
Reference in New Issue
Block a user