Fix the iOS install sheet: exact Safari flow, chips, iOS blue, layout
Steps - iOS now uses the exact flow: Safari users get 4 steps (⋯ → Share/More → Add to Home Screen → Add); non-Safari (CriOS/FxiOS/EdgiOS/in-app) get a first 'Open this page in Safari' step and 5 total. The vague 'in some browsers it's under…' wording is gone. Chips and icons - The ⋯ chip renders a single three-dot icon (icon-only pill) instead of the icon plus an '⋯' character (which showed two sets of dots). - The More chip uses a chevron-down icon instead of the rounded-square. - The accent pill uses real iOS blue: #0A84FF dark / #007AFF light, still the only coloured element. - Steps and chips share one 16px type scale; chip labels are medium weight. Typography and layout - Numbers are small muted circles in a fixed 24px column, aligned with the first text line via matching line-height. - Removed trailing periods after chips; steps tightened. - Bottom padding is calc(24px + env(safe-area-inset-bottom)) and a secondary 'Maybe later' button sits below the steps. - max-height 90dvh with inner scrolling; 36×4px low-contrast handle with real swipe-down-to-close (momentum off, spring back). - App card shows the hostname only (no port), truncated. Themes - Dark (default): layered surfaces #1c1c1e sheet / #2c2c2e card / #3a3a3c chips with 8% white borders; subtle logo tile instead of solid white; backdrop is 50% black with 4px blur. - Light only when the app theme was explicitly set to light, ignoring the system preference; borders #e0e0e0, chip fills #f2f2f2. Also fixes a crash the test pressure exposed: a 429 (rate-limited) /api/health response crashed Settings at health.vision.available. fetchHealth now rejects non-OK/malformed responses so the dialog shows its error banner instead of the app error screen. Install-sheet suite now 64 checks; pwa/final-ux/security/contrast green.
This commit is contained in:
parent
26e36bc0c0
commit
f98795436d
4 changed files with 85 additions and 39 deletions
|
|
@ -113,6 +113,11 @@
|
|||
--field: #f3f3f4;
|
||||
--field-border: #e2e2e4;
|
||||
--shadow-gate: 0 28px 70px -36px rgb(13 13 13 / 0.3), 0 1px 2px rgb(13 13 13 / 0.05);
|
||||
/* Install sheet: light variant (dark is the default, see .dark). */
|
||||
--install-sheet: #ffffff;
|
||||
--install-card: #f7f7f8;
|
||||
--install-chip: #f2f2f2;
|
||||
--install-border: #e0e0e0;
|
||||
--shadow-card: 0 1px 2px rgb(13 13 13 / 0.06), 0 1px 3px rgb(13 13 13 / 0.04);
|
||||
--shadow-card-hover: 0 10px 28px -14px rgb(13 13 13 / 0.22), 0 1px 2px rgb(13 13 13 / 0.06);
|
||||
}
|
||||
|
|
@ -145,6 +150,11 @@
|
|||
--field: #242425;
|
||||
--field-border: rgb(255 255 255 / 0.1);
|
||||
--shadow-gate: 0 30px 80px -40px rgb(0 0 0 / 0.85), 0 1px 2px rgb(0 0 0 / 0.4);
|
||||
/* Install sheet: layered dark surfaces (default theme for the sheet). */
|
||||
--install-sheet: #1c1c1e;
|
||||
--install-card: #2c2c2e;
|
||||
--install-chip: #3a3a3c;
|
||||
--install-border: rgb(255 255 255 / 0.08);
|
||||
--shadow-card: 0 1px 2px rgb(0 0 0 / 0.25);
|
||||
--shadow-card-hover: 0 10px 28px -16px rgb(0 0 0 / 0.55), 0 1px 2px rgb(0 0 0 / 0.3);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue