c-fu/arah2
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(07-02): landscape cockpit geometry block — CSS-only, tokens binding (PX-04/D-03)

Browse Source 
- @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
This commit is contained in:
araharah-executor
2026-10-25 03:52:17 +08:00
parent 99e28de6a1
commit 13ba0bbee5
1 changed files with 42 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/shell.css
+42 -1
View File
@@ -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; }
}