diff options
| author | Adam Soltys <[email protected]> | 2026-09-02 19:41:58 -0700 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2026-09-02 19:41:58 -0700 |
| commit | 1326188e0ffe08398943da2ef051b5553427d1a9 (patch) | |
| tree | 4c7fcffeec9f72152b1553593b6871d0890b9719 /src/style.css | |
| parent | a7f068c896be7f59520fdfe186a23037353bca13 (diff) | |
| download | coinosv3-1326188e0ffe08398943da2ef051b5553427d1a9.tar.gz coinosv3-1326188e0ffe08398943da2ef051b5553427d1a9.zip | |
The carousel becomes what it was meant to be: two separate balance CARDS riding a full-bleed strip — the neighbor card peeks in from the screen edge and snaps into place, instead of two faces crowding one card's chrome. The active card carries the move/top-up buttons and unfold panel; the peeking one stays a clean preview
Co-Authored-By: Claude Fable 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01MrkLsNScXe9b6BviUSdmMr
Diffstat (limited to 'src/style.css')
| -rw-r--r-- | src/style.css | 11 |
1 files changed, 8 insertions, 3 deletions
diff --git a/src/style.css b/src/style.css index 933fa69..e21835b 100644 --- a/src/style.css +++ b/src/style.css @@ -444,13 +444,18 @@ hr.divider { margin: 16px 0; } /* balance carousel: the other face peeks at the card's edge and drags into place — native scroll-snap does the physics. Full-bleed inside the card so the peeking neighbor touches the card wall. */ +/* A page-level strip of whole balance CARDS: full-bleed past the app column + so the neighbor card peeks in from the screen edge. The negative margins + + matching padding enlarge the clip box so card shadows aren't cropped. */ .bal-carousel { - display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; - margin: -20px; padding: 20px; scrollbar-width: none; -ms-overflow-style: none; + position: relative; /* offsetParent for the slides: offsetLeft math stays container-relative */ + display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; + margin: -16px; padding: 16px; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-x pan-y; } .bal-carousel::-webkit-scrollbar { display: none; } -.bal-slide { flex: 0 0 calc(100% - 34px); scroll-snap-align: center; min-width: 0; } +.bal-slide { flex: 0 0 calc(100% - 40px); scroll-snap-align: center; min-width: 0; } +.bal-carousel .card + .card { margin-top: 0; } .balance-move .seg { display: flex; width: 100%; } .balance-move .seg button { flex: 1; } .send-suggest { max-height: 260px; overflow-y: auto; } |