diff options
| author | Adam Soltys <[email protected]> | 2026-08-02 23:14:26 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-08-02 23:14:26 -0700 |
| commit | 64823b30c167d8dd0ec8747bb4b7aa5d975e98a3 (patch) | |
| tree | 1d4a8d4d388c8fc0c36f2e68368d8f9df7e4e0d3 /src/style.css | |
| parent | bae797fb402e0d9b86c43c5c1dd356cb056e2838 (diff) | |
| download | coinosv3-64823b30c167d8dd0ec8747bb4b7aa5d975e98a3.tar.gz coinosv3-64823b30c167d8dd0ec8747bb4b7aa5d975e98a3.zip | |
Swipe between Receive / Send / History
Horizontal-dominant quick swipes move through the main tabs, sliding
the page in from the swipe's direction (the nav animation picks a
directional variant when a gesture caused it). Gated to the wallet's
own tab pages — never chat, profiles, takeovers, or offline-forced
settings — with a vertical-dominance test so scrolling never
navigates, a touchcancel reset, and overscroll-behavior-x: none so the
browser's edge-back gesture doesn't fight ours.
Co-Authored-By: Claude Fable 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Wvj4aoeMZwA7VUGdJP9Swi
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 8 |
1 files changed, 7 insertions, 1 deletions
diff --git a/src/style.css b/src/style.css index f01df60..1325118 100644 --- a/src/style.css +++ b/src/style.css @@ -457,6 +457,8 @@ input[type=text], input[type=password], input[type=number], textarea, select { t body { background-image: radial-gradient(900px 420px at 50% -160px, var(--wash), transparent 70%); background-attachment: fixed; + /* our swipe-nav owns horizontal gestures; keep the browser's edge-back out */ + overscroll-behavior-x: none; } body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 2147483647; @@ -465,6 +467,10 @@ body::after { } @media (prefers-reduced-motion: reduce) { - .anim-page, .anim-menu, .anim-unfold, .amt-flash, .check-badge, .balance::before { animation: none !important; } + .anim-page, .anim-menu, .anim-unfold, .anim-slide-left, .anim-slide-right, .amt-flash, .check-badge, .balance::before { animation: none !important; } *, *::before, *::after { transition-duration: .01ms !important; } } +@keyframes slide-in-left { from { opacity: 0; transform: translateX(30px); } } +@keyframes slide-in-right { from { opacity: 0; transform: translateX(-30px); } } +.anim-slide-left { animation: slide-in-left .28s cubic-bezier(.16, .84, .3, 1) both; } +.anim-slide-right { animation: slide-in-right .28s cubic-bezier(.16, .84, .3, 1) both; } |