From 13ba0bbee57ef4e7ab43f730cde496cc9e37e78b Mon Sep 17 00:00:00 2001 From: araharah-executor Date: Sun, 25 Oct 2026 03:52:17 +0800 Subject: [PATCH] =?UTF-8?q?feat(07-02):=20landscape=20cockpit=20geometry?= =?UTF-8?q?=20block=20=E2=80=94=20CSS-only,=20tokens=20binding=20(PX-04/D-?= =?UTF-8?q?03)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - @media (orientation: landscape) and (max-height: 560px) block appends to shell.css - banner 72px min-height + safe-left/right edge padding via max(); plate 40px/glyph 28px - strip rides under 72px chrome; guide-list 100dvh-bounded; bottom register inside landscape height - sanctioned literal list extended in the cockpit header comment - no radius/shadow/blur/transition, no MapLibre rule; theme audit stays clean --- web/src/shell.css | 43 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/web/src/shell.css b/web/src/shell.css index 6cdefae..2852483 100644 --- a/web/src/shell.css +++ b/web/src/shell.css @@ -144,7 +144,10 @@ main { position: fixed; inset: 0; } min-height 96px, arrow plate 48px + glyph 32px, compact strip 24px, row 48px + glyph 24px, next-row lamp 8px, panel max 320px/480px, bar 4px, 1px rules). States are instant hard swaps — zero motion, zero depth, zero - rounded corners (buttons are radius-reset in the theme base layer). ————— */ + rounded corners (buttons are radius-reset in the theme base layer). + Sanctioned list extended by Phase 7 (07-02/PX-04/D-03) — the landscape + literals: landscape banner min-height 72px, plate 40px + glyph 28px, + landscape chrome offset 104px. ————— */ /* the banner band: full-bleed matte-black chassis under the safe inset; the whole banner is the list toggle (the 96px band is the >=44px hit target) */ @@ -205,3 +208,41 @@ main { position: fixed; inset: 0; } .guide-progress { height: 4px; margin: var(--spacing-space-xs) var(--spacing-space-md) 0; background: var(--color-chassis-subtle); border: 1px solid var(--color-matte-black); } /* checkbox geometry — distinguishable without color */ [data-tg-theme="dark"] .guide-progress { border-color: var(--color-inverse-on-surface); } .guide-progress-fill { height: 100%; background: var(--color-signal-orange); } + +/* ————— Phase 7 landscape geometry (PX-04/D-03) ————— + Landscape is an ADDITIONAL CONSTRAINT, never a separate screen: portrait + remains the default and every rule below only ADAPTS the cockpit/banner/ + card geometry. The map cartography stays Rams-constant (D-10) — NO + MapLibre rule appears in this block. Every value is a token reference or + a sanctioned geometry literal; the map's cartography is untouched. */ + +@media (orientation: landscape) and (max-height: 560px) { + /* the banner band: shorter in landscape, and the horizontal safe insets + are honoured on both edges (max() with the token padding as the floor) */ + .guide-banner { + min-height: 72px; + padding-left: max(var(--spacing-space-md), var(--safe-left, 0px)); + padding-right: max(var(--spacing-space-md), var(--safe-right, 0px)); + } + .guide-banner .guide-plate { width: 40px; height: 40px; } + .guide-banner .guide-plate svg { width: 28px; height: 28px; } + + /* the compact strip rides directly under the shorter banner */ + [data-guidance="active"] .strip { + top: calc(var(--safe-top, 0px) + var(--spacing-space-sm) + 72px + 1px); + } + + /* the maneuver list: a landscape-height-bounded panel that clears the + banner and the strip instead of overlapping them */ + .guide-list { + max-height: calc(100dvh - 104px - var(--safe-top, 0px) - var(--safe-bottom, 0px)); + margin-top: calc(var(--safe-top, 0px) + var(--spacing-space-sm) + 72px + 1px + 24px + var(--spacing-space-sm)); + } + + /* the bottom register (the guidance card / the confirm card) sits inside + the landscape height instead of overflowing past it */ + .route-stack[data-register="bottom"] { + bottom: calc(var(--safe-bottom, 0px) + var(--spacing-space-sm)); + } + .route-stack[data-register="center"] { max-width: 320px; } +}