Pause menu: shared map blur, PC back, Xbox glyphs
Wrap map art and markers in a new .map-world so blur, pan and zoom animate together; add a PC-facing top-left ESC BACK button and a map-mode prompt bar using Xbox PNG glyphs. Implement JS glyph-tinting, map-mode enter/exit logic, and pan/zoom handlers; update styles for .map-world, markers, prompt bars, and the PC back button. Add Xbox icon assets and update deploy/stage scripts to copy them. Update changelog and dev-log entries to document the changes.
This commit is contained in:
@@ -69,12 +69,37 @@ body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Map layers ──────────────────────────────────────────────── */
|
||||
/* ── Map world (map art + markers, one shared blur/pan/zoom) ── */
|
||||
|
||||
.map-world {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
filter: brightness(0.74) contrast(1.04) saturate(0.55);
|
||||
transform: translate(var(--map-pan-x, 0px), var(--map-pan-y, 0px))
|
||||
scale(var(--map-zoom, 1));
|
||||
transform-origin: center center;
|
||||
transition: transform 160ms ease-out, filter 200ms ease-out;
|
||||
cursor: grab;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.map-world.is-interactive {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.map-world.is-blurred {
|
||||
filter: brightness(0.74) contrast(1.04) saturate(0.55) blur(12px);
|
||||
}
|
||||
|
||||
.pause-screen.is-panning .map-world {
|
||||
transition: none;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.map-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
/*
|
||||
* "contain" keeps the whole regional map visible (Fallout 76-style full
|
||||
* overview) instead of "cover" cropping it down to a tight, zoomed-in
|
||||
@@ -84,12 +109,6 @@ body {
|
||||
background:
|
||||
url("assets/map.png") center center / contain no-repeat;
|
||||
background-color: #0b100c;
|
||||
filter: brightness(0.74) contrast(1.04) saturate(0.55);
|
||||
transform: translate(var(--map-pan-x, 0px), var(--map-pan-y, 0px))
|
||||
scale(var(--map-zoom, 1));
|
||||
transform-origin: center center;
|
||||
transition: transform 160ms ease-out;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.map-overlay {
|
||||
@@ -109,24 +128,12 @@ body {
|
||||
}
|
||||
|
||||
/* ── Map markers ───────────────────────────────────────────── */
|
||||
/* Shares the same pan/zoom transform (inherited custom properties) as
|
||||
.map-layer so markers stay pinned to their map position while navigating. */
|
||||
/* Inside .map-world so they share the same filter and transform as the map. */
|
||||
|
||||
.map-markers {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
transform: translate(var(--map-pan-x, 0px), var(--map-pan-y, 0px))
|
||||
scale(var(--map-zoom, 1));
|
||||
transform-origin: center center;
|
||||
transition: transform 160ms ease-out;
|
||||
}
|
||||
|
||||
.pause-screen.is-panning .map-layer,
|
||||
.pause-screen.is-panning .map-markers {
|
||||
transition: none;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.marker {
|
||||
@@ -243,6 +250,12 @@ body {
|
||||
rgba(8, 14, 10, 0.55) 70%,
|
||||
var(--co-panel-fade) 100%
|
||||
);
|
||||
transition: opacity 200ms ease-out, visibility 200ms ease-out;
|
||||
}
|
||||
|
||||
.left-panel.is-hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
@@ -321,11 +334,11 @@ body {
|
||||
box-shadow: 0 0 12px rgba(196, 168, 75, 0.25);
|
||||
}
|
||||
|
||||
.menu-item:hover:not(.is-selected) {
|
||||
.menu-item:hover {
|
||||
color: var(--co-text-pale);
|
||||
}
|
||||
|
||||
.menu-item:hover:not(.is-selected) .menu-item__bar {
|
||||
.menu-item:hover .menu-item__bar {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) scaleX(1);
|
||||
}
|
||||
@@ -431,6 +444,16 @@ body {
|
||||
rgba(6, 10, 8, 0.88) 100%
|
||||
);
|
||||
border-top: 1px solid rgba(201, 168, 74, 0.15);
|
||||
transition: opacity 200ms ease-out, visibility 200ms ease-out;
|
||||
}
|
||||
|
||||
.prompt-bar[hidden] {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.prompt-bar--map-mode {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
@@ -454,15 +477,30 @@ body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.prompt__glyph--rs {
|
||||
border-radius: 4px;
|
||||
font-size: calc(9px * var(--co-ui-scale));
|
||||
letter-spacing: 0.02em;
|
||||
min-width: calc(26px * var(--co-ui-scale));
|
||||
/* Xbox PNG glyphs (from ui/Icons); white pixels are tinted amber in script.js */
|
||||
.prompt__glyph--icon {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
min-width: calc(28px * var(--co-ui-scale));
|
||||
width: calc(28px * var(--co-ui-scale));
|
||||
height: calc(28px * var(--co-ui-scale));
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.prompt__glyph--round {
|
||||
font-size: calc(10px * var(--co-ui-scale));
|
||||
/* Stick glyphs have more detail (arrows/rings) and read better slightly larger */
|
||||
.prompt__glyph--icon-stick {
|
||||
min-width: calc(34px * var(--co-ui-scale));
|
||||
width: calc(34px * var(--co-ui-scale));
|
||||
height: calc(34px * var(--co-ui-scale));
|
||||
}
|
||||
|
||||
.prompt__glyph-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.prompt__label {
|
||||
@@ -473,6 +511,96 @@ body {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* ── Map mode PC back button ─────────────────────────────────── */
|
||||
/*
|
||||
* Fades in after the left panel (logo) finishes hiding (200ms), and
|
||||
* fades out immediately on exit so it never sits on top of the logo.
|
||||
*/
|
||||
|
||||
.map-pc-back {
|
||||
position: absolute;
|
||||
top: calc(28px * var(--co-ui-scale));
|
||||
left: calc(28px * var(--co-ui-scale));
|
||||
z-index: 12;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(12px * var(--co-ui-scale));
|
||||
padding:
|
||||
calc(10px * var(--co-ui-scale))
|
||||
calc(16px * var(--co-ui-scale));
|
||||
border: 1px solid var(--co-border);
|
||||
background: rgba(6, 12, 8, 0.82);
|
||||
box-shadow:
|
||||
inset 0 0 16px rgba(0, 0, 0, 0.35),
|
||||
0 2px 8px rgba(0, 0, 0, 0.35);
|
||||
color: var(--co-text-pale);
|
||||
font-family: inherit;
|
||||
font-size: calc(14px * var(--co-ui-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.16em;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition:
|
||||
color var(--co-transition),
|
||||
border-color var(--co-transition),
|
||||
background var(--co-transition),
|
||||
opacity 150ms ease-out,
|
||||
visibility 0ms linear 150ms;
|
||||
}
|
||||
|
||||
.map-pc-back.is-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transition:
|
||||
color var(--co-transition),
|
||||
border-color var(--co-transition),
|
||||
background var(--co-transition),
|
||||
opacity 200ms ease-out 200ms,
|
||||
visibility 0ms linear 200ms;
|
||||
}
|
||||
|
||||
.map-pc-back__key {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: calc(36px * var(--co-ui-scale));
|
||||
padding:
|
||||
calc(3px * var(--co-ui-scale))
|
||||
calc(8px * var(--co-ui-scale));
|
||||
border: 1px solid var(--co-amber-muted);
|
||||
border-radius: 2px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
color: var(--co-amber);
|
||||
font-size: calc(11px * var(--co-ui-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.map-pc-back__label {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.map-pc-back:hover {
|
||||
color: var(--co-green);
|
||||
border-color: var(--co-green-dim);
|
||||
background: rgba(8, 18, 10, 0.9);
|
||||
}
|
||||
|
||||
.map-pc-back:hover .map-pc-back__key {
|
||||
color: var(--co-green);
|
||||
border-color: var(--co-green-dim);
|
||||
}
|
||||
|
||||
.map-pc-back:focus-visible {
|
||||
outline: 1px solid var(--co-green-dim);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ── Responsive tweaks ───────────────────────────────────────── */
|
||||
/*
|
||||
* Sizing is already fluid via --co-ui-scale (see :root), which now scales
|
||||
|
||||
Reference in New Issue
Block a user