forked from c-fu/arah2
99 lines
6.1 KiB
CSS
99 lines
6.1 KiB
CSS
/*
|
|
* shell.css — the Rams chrome (UI-SPEC §Shell Layout & Register Bands).
|
|
* -----------------------------------------------------------------------
|
|
* Every value is a token reference (var(--color-*) / var(--spacing-*) /
|
|
* var(--type-*)); the only literals are the machined-border geometry the
|
|
* UI-SPEC enumerates (1px/2px rules, 8px lamp/gantry/notch, 40x40 plate,
|
|
-2px hit slop, 320px card max-width, 20px dot as SVG r=10). Zero
|
|
* roundedness (the one `border-radius: 0` reset pins MapLibre's chrome),
|
|
* zero transition/animation — state changes are instant hard swaps.
|
|
*
|
|
* D-10 / PX-02: NO MapLibre rule participates in theme slots. The map
|
|
* style is Rams-constant; only --shell-bg / --shell-on-surface re-slot
|
|
* behind [data-tg-theme].
|
|
*/
|
|
|
|
/* tokens.css wins; mockups lose. Value discipline per theme/src/components.css lines 9-15. */
|
|
@import "@araharah/theme/dist/rams.css";
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { height: 100%; margin: 0; }
|
|
body {
|
|
background: var(--shell-bg);
|
|
color: var(--shell-on-surface);
|
|
font: var(--type-body-md);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* PX-02 dark-slot activation (extends theme.css's media-query default) */
|
|
[data-tg-theme="light"] { --shell-bg: var(--color-surface); --shell-on-surface: var(--color-on-surface); }
|
|
[data-tg-theme="dark"] { --shell-bg: var(--color-surface-dark); --shell-on-surface: var(--color-inverse-on-surface); }
|
|
[data-tg-theme="dark"] .card { background: var(--color-inverse-surface); color: var(--color-inverse-on-surface); border-color: var(--color-inverse-on-surface); }
|
|
[data-tg-theme="dark"] .card-header { border-bottom-color: var(--color-inverse-on-surface); color: var(--color-inverse-on-surface); }
|
|
/* NO MapLibre rule here, by design (D-10 / RESEARCH Pitfall 7). */
|
|
|
|
/* Research Open Question 1 — WebGL2 absent: shell renders over a Rams-tinted field */
|
|
body[data-map="absent"] main { background: var(--color-surface-dim); }
|
|
|
|
/* map register: full-bleed, the dominant surface */
|
|
main { position: fixed; inset: 0; }
|
|
#map { position: absolute; inset: 0; }
|
|
/* MapLibre's stylesheet lands AFTER shell.css in the bundle (map.ts imports
|
|
it at module scope), so the Rams chip override needs the #map-scoped
|
|
specificity to win the cascade — flat matte-black chip, no translucency. */
|
|
#map .maplibregl-ctrl-attrib { border-radius: 0; background: var(--color-matte-black); color: var(--color-pure-white); font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); text-transform: uppercase; }
|
|
#map .maplibregl-ctrl-attrib a { color: var(--color-pure-white); }
|
|
#map .maplibregl-ctrl-attrib-button { background-color: var(--color-matte-black); }
|
|
|
|
/* top register: status strip */
|
|
.strip {
|
|
position: absolute; top: calc(var(--safe-top, 0px) + var(--spacing-space-sm)); left: 0; right: 0;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: var(--spacing-space-sm) var(--spacing-space-md);
|
|
min-height: 32px;
|
|
background: var(--color-matte-black); color: var(--color-inverse-on-surface);
|
|
font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); text-transform: uppercase;
|
|
}
|
|
.strip .left { display: flex; align-items: center; gap: var(--spacing-space-xs); }
|
|
.strip .lamp { width: 8px; height: 8px; border: 1px solid var(--color-pure-white); }
|
|
.strip .lamp[data-state="acquiring"], .strip .lamp[data-state="validating"], .strip .lamp[data-state="awaiting"] { background: var(--color-signal-orange); }
|
|
.strip .lamp[data-state="live"] { background: var(--color-olive-green); }
|
|
.strip .lamp[data-state="lost"], .strip .lamp[data-state="denied"] { background: var(--color-functional-red); }
|
|
.strip .telemetry { font: var(--type-label-sm); }
|
|
|
|
/* center register: boot / denied / lost card */
|
|
.card-stack { position: absolute; left: var(--spacing-margin); right: var(--spacing-margin); top: 50%; transform: translateY(-50%); max-width: 320px; margin-inline: auto; }
|
|
.card .gantry { width: 8px; height: 8px; border: 1px solid var(--color-matte-black); }
|
|
.card .gantry[data-fill="on"] { background: var(--color-signal-orange); }
|
|
.card-actions { display: flex; gap: var(--spacing-space-sm); padding-top: var(--spacing-space-sm); }
|
|
|
|
/* bottom register: recenter control (40x40 plate, >=44x44 hit target) */
|
|
.recenter {
|
|
position: absolute; right: var(--spacing-margin); bottom: calc(var(--safe-bottom, 0px) + var(--spacing-space-sm));
|
|
width: 40px; height: 40px; padding: 0; border: 0; border-radius: 0;
|
|
background: var(--color-matte-black); color: var(--color-pure-white);
|
|
display: flex; align-items: center; justify-content: center;
|
|
z-index: 2; /* above MapLibre's own chrome; the attrib chip lives bottom-left */
|
|
}
|
|
.recenter::after { content: ""; position: absolute; inset: -2px; }
|
|
.recenter .notch { width: 8px; height: 8px; background: var(--color-signal-orange); }
|
|
.recenter[data-follow="free"] .notch { display: none; }
|
|
/* UI-SPEC §Follow/Recenter Control, third notch state: live-but-LOST (no fix).
|
|
soft-beige, NOT red — red is reserved for the strip/degraded registers; the notch
|
|
reads "unlocked, not error" (RESEARCH Pitfall 8 orange discipline). */
|
|
.recenter[data-fix="lost"] .notch { background: var(--color-soft-beige); }
|
|
.recenter:active { background: var(--color-signal-orange); color: var(--color-matte-black); }
|
|
|
|
/* position marker (DOM Marker children) */
|
|
.pos-accuracy { fill: var(--color-matte-black); fill-opacity: 0.06; stroke: var(--color-matte-black); stroke-opacity: 0.30; stroke-width: 1; }
|
|
.pos-dot { fill: var(--color-matte-black); }
|
|
.pos-cone { fill: var(--color-signal-orange); }
|
|
.pos-group[data-stale="true"] { opacity: 0.4; }
|
|
|
|
/* No CSS transition or animation anywhere — state changes are instant hard swaps. */
|
|
|
|
/* DEBUG-ROUND probe — on-screen category-only telemetry for the device-matrix
|
|
loop (no dev-tools in a phone webview). Removed at the exit. Layout-only
|
|
positioning; the label typography is the existing label-sm token. */
|
|
.diag-probe { position: absolute; left: var(--spacing-margin); bottom: calc(var(--safe-bottom, 0px) + var(--spacing-space-sm)); font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); color: var(--color-soft-beige); z-index: 10; pointer-events: none; }
|