Nate EmmertandClaude Sonnet 5.5
8252017417
Publish Container / publish (push) Successful in 2m58s
- Map fills everything between the top bar and bottom nav; no page scroll on this tab - Floating round controls (layers, my location, full screen), readout chips top-left, layers sheet beside the controls, weather summary + radar timeline floating at the bottom - Safe-area aware in full-screen mode; zoom buttons tucked away on touch devices Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
29 lines
1.7 KiB
CSS
29 lines
1.7 KiB
CSS
/* Shared PWA safe-area rules: notch / Dynamic Island, rounded corners, home indicator (iPhone 14–17 etc.).
|
||
Needs <meta name="viewport" content="..., viewport-fit=cover"> on the page. */
|
||
|
||
/* Installed iPhone apps draw under the status bar with white text (black-translucent).
|
||
A dark cap behind that zone keeps the clock and battery readable on light themes too. */
|
||
@media (display-mode: standalone) {
|
||
body::before {
|
||
content: ''; position: fixed; top: 0; left: 0; right: 0; z-index: 100000; pointer-events: none;
|
||
height: env(safe-area-inset-top, 0px); background: #070c14;
|
||
}
|
||
}
|
||
|
||
/* Never let page content slide under the sensor housing or rounded corners in landscape */
|
||
/* (main app and dashboard add side insets to their own containers; simple pages use .safe-sides) */
|
||
.safe-sides { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
|
||
|
||
/* Fixed overlays that hug the top / sides / bottom */
|
||
.offline-banner { padding-top: calc(0.4rem + env(safe-area-inset-top, 0px)); }
|
||
.ptr-indicator { top: env(safe-area-inset-top, 0px); }
|
||
.learn-back-top { right: max(1rem, calc(0.6rem + env(safe-area-inset-right, 0px))); }
|
||
|
||
/* Bottom bars: clear the home indicator and the rounded bottom corners */
|
||
.bottom-nav { padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }
|
||
|
||
/* (Full-screen map: the map runs edge to edge; its floating controls add the insets themselves) */
|
||
|
||
/* Modal dialogs: stay inside the safe area on short (landscape) screens */
|
||
dialog { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1.5rem); overflow: auto; }
|