aboutsummaryrefslogtreecommitdiff
path: root/public/app.css
diff options
context:
space:
mode:
authordax <me@dax.ist>2026-08-04 10:38:09 +0000
committerdax <me@dax.ist>2026-08-04 10:38:09 +0000
commit43ec71f91b70fd65e180a4e2f6a4df80dad04b27 (patch)
treec2650afbce8a6343fae53cb0ad3f1a347daf94a2 /public/app.css
parent56b3a602c8e992a2bc197844e1ab3de8743b8012 (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.css18
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;