Nate EmmertandClaude Sonnet 5.5
5ed673bacc
Publish Container / publish (push) Successful in 2m51s
- Install banner (phones), Settings guide and dialog with iPhone/iPad and Android steps, native Install button where supported; steps also on the dashboard Account page - apple-touch-icon now a PNG (iOS ignores SVG icons) - Shared pwa-safe.css: dark cap behind the status bar/Dynamic Island in the installed app, inset-aware offline banner, pull-to-refresh, bottom bars, full-screen map, dialogs - Landscape-aware content gutters; measured top-bar height; viewport-fit=cover on every page Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
31 lines
2.0 KiB
CSS
31 lines
2.0 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: keep controls off the notch, corners and home indicator */
|
||
body.map-fs #tab-unified-map { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
|
||
body.map-fs .unified-map-wrap { height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
|
||
|
||
/* 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; }
|