diff options
| author | dax <me@dax.ist> | 2026-08-04 10:14:08 +0000 |
|---|---|---|
| committer | dax <me@dax.ist> | 2026-08-04 10:14:08 +0000 |
| commit | 6261bf6fcd96a9c4380f2361a79afdae840d0aaa (patch) | |
| tree | a72a04b45a718130866e77f3345ca48e9311ccf6 /public/app.css | |
| parent | a35909c6b15402174f364be372ad2dad83a39441 (diff) | |
pathways: replace floating edge chevrons with full-edge glow segments on the tile
the arrows in the gap were pointless - that is exactly where the ghost
photo preview appears, so they only collided with it. now the current tile
shows a thin glowing segment running corner-to-corner along each free edge,
drawn ON the tile just inside the border: subtle at rest, bright on hover,
fades out while its preview ghost is showing. occupied directions get no
segment. the ghost still renders in the gap, so nothing overlaps it.
Diffstat (limited to 'public/app.css')
| -rw-r--r-- | public/app.css | 37 |
1 files changed, 16 insertions, 21 deletions
diff --git a/public/app.css b/public/app.css index 3a8f684..d5f12dc 100644 --- a/public/app.css +++ b/public/app.css @@ -70,32 +70,27 @@ html, body { position: absolute; pointer-events: auto; } -.nav-zone-N { top: -44px; left: 0; width: 100%; height: calc(30% + 44px); } -.nav-zone-S { bottom: -44px; left: 0; width: 100%; height: calc(30% + 44px); } -.nav-zone-E { top: 30%; right: -44px; width: calc(30% + 44px); height: 40%; } -.nav-zone-W { top: 30%; left: -44px; width: calc(30% + 44px); height: 40%; } +.nav-zone-N { top: 0; left: 0; width: 100%; height: 30%; } +.nav-zone-S { bottom: 0; left: 0; width: 100%; height: 30%; } +.nav-zone-E { top: 30%; right: 0; width: 30%; height: 40%; } +.nav-zone-W { top: 30%; left: 0; width: 30%; height: 40%; } -.nav-chev { +.nav-edge { position: absolute; - width: 44px; - height: 44px; - color: rgba(255, 255, 255, .85); - opacity: .3; - filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65)); + background: linear-gradient(rgba(255, 255, 255, .9), rgba(125, 211, 252, .55)); + opacity: .35; pointer-events: none; - transition: opacity .15s, filter .15s, color .15s; + transition: opacity .15s, filter .15s; } -.nav-chev svg { width: 100%; height: 100%; display: block; } -.nav-zone-N .nav-chev { top: 0; left: 50%; translate: -50% -100%; } -.nav-zone-E .nav-chev { top: 50%; right: 0; translate: 100% -50%; } -.nav-zone-S .nav-chev { bottom: 0; left: 50%; translate: -50% 100%; } -.nav-zone-W .nav-chev { top: 50%; left: 0; translate: -100% -50%; } -.nav-zone:hover .nav-chev { - opacity: 1; - color: #fff; - filter: drop-shadow(0 0 9px rgba(125, 211, 252, .6)); +.nav-zone-N .nav-edge { top: 4px; left: 6px; right: 6px; height: 3px; border-radius: 2px; } +.nav-zone-S .nav-edge { bottom: 4px; left: 6px; right: 6px; height: 3px; border-radius: 2px; } +.nav-zone-E .nav-edge { right: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; } +.nav-zone-W .nav-edge { left: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; } +.nav-zone:hover .nav-edge { + opacity: .95; + filter: drop-shadow(0 0 7px rgba(125, 211, 252, .8)); } -.nav-zone.preview .nav-chev { +.nav-zone.preview .nav-edge { opacity: 0; } |