From a7f068c896be7f59520fdfe186a23037353bca13 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Wed, 2 Sep 2026 19:32:50 -0700 Subject: The balance grows a card carousel: Spending and Savings become side-by-side faces with the neighbor peeking at the card's edge, dragged and snapped by native scroll-snap — settling on a face IS the account switch, programmatic switches glide the carousel to match, and the old swipe-to-flip gesture yields to the carousel's own drag (it still serves single-face wallets) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01MrkLsNScXe9b6BviUSdmMr --- src/style.css | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index 1ed2195..933fa69 100644 --- a/src/style.css +++ b/src/style.css @@ -441,6 +441,16 @@ hr.divider { margin: 16px 0; } /* Inline move-money panel on the balance card. */ .balance-move { gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); text-align: left; } +/* 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. */ +.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; + 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; } .balance-move .seg { display: flex; width: 100%; } .balance-move .seg button { flex: 1; } .send-suggest { max-height: 260px; overflow-y: auto; } -- cgit v1.2.3