/* ============================================================ * /walking-sim — full-shell dfl wrapper. * * Same pattern as `.ts-flush-shell` (see assets/tile_selector.css): * a position:fixed host that escapes the page Container in app.py * and pins flush against the AppShell header + navbar offsets, so * the DashFlexLayout uses every remaining pixel of AppShellMain. * The walker map gets the left pane (67%); HUD + Controls tabs * share the right (33%). * ============================================================ */ .ws-flush-shell { position: fixed; top: var(--app-shell-header-offset, 56px); left: var(--app-shell-navbar-offset, 0px); right: 0; bottom: 0; z-index: 10; background: var(--mantine-color-body); border-top: 1px solid var(--mantine-color-default-border); border-left: 1px solid var(--mantine-color-default-border); overflow: hidden; } /* DashFlexLayout fills its host. */ .ws-flush-shell > .flexlayout__layout, .ws-flush-shell > div { height: 100%; width: 100%; } /* The dfl is now mounted into ``#ws-flex-host`` (a callback fills it once * the viewport resolves), one level deeper than the flush-shell — give * the FlexLayout it holds the full box. */ #ws-flex-host > .flexlayout__layout { height: 100%; width: 100%; } /* The map pane wrapper — relative-positioned so the touch joystick (.dl2-joystick is absolutely positioned) anchors to the map, not the dfl tab. height:100% so the dl2.Map fills the pane. */ .ws-map-pane { position: relative; height: 100%; width: 100%; overflow: hidden; } .ws-map-pane > .leaflet-container, .ws-map-pane > div[id="ws-map"] { height: 100% !important; width: 100% !important; } /* Right-pane panes — let the HUD / Controls stacks scroll if the viewport gets short, while the dfl tab itself remains fixed. */ .ws-side-pane { height: 100%; width: 100%; overflow: auto; } /* ============================================================ * Mode-gated chrome. * * WALK mode: the user is driving the character; pan/zoom are NOT theirs * to touch (the rAF loop drives camera-follow), so the +/- zoom * control would be misleading. Hide it. * EXPLORE mode: the map is a normal dl2 map (pan/zoom freely). The zoom * control reappears. * * Class is set by the ws-mode -> className clientside callback in * docs/walking-sim/example.py. Animated so the swap doesn't jar. * ============================================================ */ .ws-flush-shell .leaflet-control-zoom { transition: opacity 180ms ease, transform 180ms ease; } .ws-mode-walk .leaflet-control-zoom { opacity: 0; transform: translateY(-4px) scale(0.94); pointer-events: none; } /* ============================================================ * Liquid-glass DashRCJoystick overlay. * * The on-map joystick lives in the bottom-right corner of the * walker map (above Leaflet controls). Its container is the * .ws-joystick-overlay div; the inner DashRCJoystick exposes * its base + controller via className / controllerClassName * (set in pages/map/walking_sim.py::_joystick_overlay). * * The look is the same "liquid glass" treatment used on the * harbor map and the drop-a-pin drawer (`map_index.css`): * translucent body tint + backdrop-filter blur. Light mode is * a soft white pane over the satellite imagery; dark mode * inverts to a smoked-charcoal pane. The controller (the puck * the user drags) gets a brass-tinted core in light mode and * a tidal-blue core in dark mode so it reads as the affordance * regardless of theme. * ============================================================ */ .ws-joystick-overlay { position: absolute; bottom: 20px; right: 20px; z-index: 1100; /* above leaflet controls (1000) */ user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; pointer-events: auto; /* The joystick fades back a hair when idle so it doesn't compete with the map; hover/touch nudges it back to full. */ opacity: 0.82; transition: opacity 160ms ease, transform 160ms ease; } .ws-joystick-overlay:hover, .ws-joystick-overlay:active, .ws-joystick-overlay:focus-within { opacity: 1; } /* Hide the whole overlay in EXPLORE mode — the rAF loop sits out and the user is panning the map freely; the joystick has nothing to drive. Mirrors the dl2-joystick visibility rule. */ .ws-mode-explore .ws-joystick-overlay { opacity: 0; pointer-events: none; transform: translateY(8px) scale(0.94); } /* === The base (the disc you drag inside of) === */ .ws-rc-joystick-base { /* Mantine body-tinted glass: 55% body color over whatever the map is showing, with a strong blur + saturation pump so the satellite imagery behind reads as out-of-focus glass. */ background: color-mix(in srgb, var(--mantine-color-body, #ffffff) 55%, transparent) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); /* Subtle harbor-tinted border so the disc is legible against water + land alike. */ border: 1px solid color-mix(in srgb, var(--mantine-color-harbor-6, #1c7ed6) 55%, transparent) !important; box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.32); border-radius: 50%; cursor: grab; } .ws-rc-joystick-base:active { cursor: grabbing; } /* === The controller (the puck the user drags) === */ .ws-rc-joystick-controller { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--mantine-color-brass-3, #fcc419) 92%, transparent) 0%, color-mix(in srgb, var(--mantine-color-brass-6, #f59f00) 88%, transparent) 78%, color-mix(in srgb, var(--mantine-color-brass-8, #e67700) 92%, transparent) 100% ) !important; border: 2px solid color-mix(in srgb, var(--mantine-color-body, #ffffff) 80%, transparent) !important; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45); } /* === Dark-mode treatment === * Mantine sets `data-mantine-color-scheme="dark"` on ; we key * off that so the joystick reads as a smoked-glass pane with a * tidal-blue puck against the satellite imagery. The light-mode * defaults above stay in place for everyone else. */ :where(html[data-mantine-color-scheme="dark"]) .ws-rc-joystick-base { background: color-mix(in srgb, var(--mantine-color-dark-7, #1a1b1e) 55%, transparent) !important; border-color: color-mix(in srgb, var(--mantine-color-harbor-4, #4dabf7) 60%, transparent) !important; box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10); } :where(html[data-mantine-color-scheme="dark"]) .ws-rc-joystick-controller { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--mantine-color-tidal-3, #74c0fc) 92%, transparent) 0%, color-mix(in srgb, var(--mantine-color-tidal-5, #339af0) 88%, transparent) 78%, color-mix(in srgb, var(--mantine-color-tidal-8, #1864ab) 92%, transparent) 100% ) !important; border-color: color-mix(in srgb, var(--mantine-color-dark-2, #c9c9c9) 70%, transparent) !important; } /* On phones, scoot the joystick a touch further from the edges so the user's thumb has room and the puck doesn't get clipped by the browser's pull-to-refresh affordance. */ @media (max-width: 640px) { .ws-joystick-overlay { bottom: 28px; right: 16px; } }