Fix what the review confirmed: anchoring, overlap, honesty, one voice
Fourteen findings from an adversarial review pass, applied together because most share two roots — geometry written against assumptions the renderer does not hold, and a design language spelled out longhand until it drifted. Correctness. The leader line pointed at empty space: CSS2DObject centres a label on its anchor by default, and margin only nudges the centred box — the overlay now anchors the left edge (center 0, 0.5) so the hairline meets the star. The info panel and not-found panel returned to top-4 at sm, under a search field that is 26rem wide and centred, covering the back button on every viewport from 640 to 1088px; they now wait for xl. The search empty state asserted "nothing matches" while the catalogues were still loading — and forever if they failed — so it now waits for the index. "Matches 8" was the page size wearing the costume of a count; the header now reports the real total, with the cap stated when it bites. The nameplate un-hides at lg instead of sm, clear of the rail and the object card. theme-color matches the void again. Accessibility. Tabbing to search changed one hairline's hue; the wrapper now carries the old ring as a visible focus indicator. Structure. hud-surface names the panel recipe that had been inlined at seven sites and had already forked into /85 and /92; the backdrop blur it carried is gone from every near-opaque panel — the canvas beneath redraws every frame, so each blur was re-sampled continuously for an effect the fill hid — and survives only as blur-sm on the genuinely translucent search shell. type-label and type-eyebrow name the two label voices, retiring 0.14em and the stray hover:bg-accent/10. The Measured/Derived rows both cards pasted twice each live once in ReadoutSectionsComponent; the reticle and chevron each draw from a single geometry, the reticle's stroke held in screen pixels so one mark serves every size. The acquire wipe plays once per search, not once per keystroke, because both outcomes now share one panel. hud-banner, which styled nothing since the rule was deleted, is a data-testid — the convention its own file already used. 527 unit tests, 6/6 end-to-end, production build, and a driven screenshot: every label now hangs off its star with the hairline touching the point. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WaySiNst4HhDXBHnMy8p5G
This commit is contained in:
+29
-1
@@ -27,6 +27,31 @@ body {
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
/* The panel surface every HUD element shares: a hairline border over a near-opaque fill. One
|
||||
* definition, because spelling the recipe out per call site is how it forked into /85 and /92
|
||||
* variants within a single change. Deliberately no backdrop blur: the canvas underneath is
|
||||
* redrawn every frame by the render loop, so a blur here is re-sampled continuously — a
|
||||
* standing GPU cost for an effect a 92%-opaque fill mostly hides anyway. */
|
||||
@utility hud-surface {
|
||||
border: 1px solid color-mix(in oklab, var(--color-border) 60%, transparent);
|
||||
background-color: color-mix(in oklab, var(--color-panel) 92%, transparent);
|
||||
}
|
||||
|
||||
/* The two label voices of the single-face type system, named so call sites cannot drift a few
|
||||
* thousandths of an em apart. `type-label` is the working voice — section headings, readout
|
||||
* labels, buttons; `type-eyebrow` is the wider-tracked identity line above a title. */
|
||||
@utility type-label {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@utility type-eyebrow {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* The HUD's signature: four corner tick brackets cut into a panel's hairline frame. Drawn as
|
||||
* eight background gradients so any panel (or the viewport frame) picks them up without the
|
||||
* eight extra DOM nodes the same mark would otherwise cost. Override `--hud-tick` per element
|
||||
@@ -116,10 +141,13 @@ body {
|
||||
0 0 3px var(--color-void);
|
||||
}
|
||||
|
||||
/* Geometry assumes the label's left edge sits at the star — StarLabelOverlay sets the
|
||||
* CSS2DObject's center to (0, 0.5) to make that true. Under the default (0.5, 0.5) the
|
||||
* renderer keeps the box centred on the point and this line floats in empty space. */
|
||||
.map-label::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
top: 50%;
|
||||
left: -0.75rem;
|
||||
height: 1px;
|
||||
width: 0.625rem;
|
||||
|
||||
Reference in New Issue
Block a user