diff options
| author | dax <me@dax.ist> | 2026-08-04 10:38:09 +0000 |
|---|---|---|
| committer | dax <me@dax.ist> | 2026-08-04 10:38:09 +0000 |
| commit | 43ec71f91b70fd65e180a4e2f6a4df80dad04b27 (patch) | |
| tree | c2650afbce8a6343fae53cb0ad3f1a347daf94a2 /public/app.css | |
| parent | 56b3a602c8e992a2bc197844e1ab3de8743b8012 (diff) | |
Touch interaction model for coarse pointers, desktop unchanged
Gated on matchMedia("(hover: none)") so mouse/trackpad behavior is
untouched:
- Nav zones + edge markers only on the current tile; tapping any other
tile selects it first. No more accidental traverses on touch.
- Edges always visible on touch (the hover glow becomes the tap
affordance), glow while pressed via :active. Bands modestly shrunk so
tile centers stay grab-to-pan.
- No hover ghost preview and no dropzones on touch (they were invisible
tap traps without hover).
- Two-finger pinch to zoom (pointer-count based, works everywhere).
- Double-tap on empty space resets zoom, mirroring desktop dblclick.
- Kill iOS tap-highlight and long-press callout.
Adds /tmp/touchtest.mjs (15 checks) covering select/traverse/pinch/
double-tap/pan; domtest 52/52, exhaust 9/9, splash 6/6, fuzz clean.
Diffstat (limited to 'public/app.css')
| -rw-r--r-- | public/app.css | 18 |
1 files changed, 18 insertions, 0 deletions
diff --git a/public/app.css b/public/app.css index a2df38d..6d5e992 100644 --- a/public/app.css +++ b/public/app.css @@ -91,6 +91,24 @@ html, body { filter: drop-shadow(0 0 8px rgba(125, 211, 252, .9)); } +@media (hover: none) { + #stage { + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; + } + .nav-zone-N { height: 25%; } + .nav-zone-S { height: 25%; } + .nav-zone-E { top: 26%; height: 48%; width: 25%; } + .nav-zone-W { top: 26%; height: 48%; width: 25%; } + .nav-edge { + opacity: 1; + filter: drop-shadow(0 0 6px rgba(125, 211, 252, .45)); + } + .nav-zone:active .nav-edge { + filter: drop-shadow(0 0 12px rgba(125, 211, 252, 1)); + } +} + #splash { position: fixed; inset: 0; |
