myron/tomtomgames
1
0
Fork 0
mirror of https://github.com/myronblair/tomtomgames synced 2026-06-30 17:51:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix token package pill scroller not swiping

Browse Source 
- pay-form: overflow:hidden -> overflow:visible so it no longer blocks
  horizontal touch events on the pkg-scroll child
- pay-form-header: gets its own top border-radius to maintain visual
  corner clipping without relying on parent overflow:hidden
- pkg-scroll: added touch-action:pan-x so browser hands horizontal
  swipe gestures to this element rather than the page scroll

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Myron Blair
2026-06-06 11:28:39 +00:00
parent cc49a381c6
commit 3610187699
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+3 -3
View File
@@ -225,15 +225,15 @@ body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(
.play-btn{font-size:12px;color:var(--text2);font-weight:600;letter-spacing:.5px}
/* ─── PAYMENT FORM (milkyswipe style) ─── */
.pay-form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:14px}
.pay-form-header{background:linear-gradient(135deg,#0d1a2e,#0a1220);padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.pay-form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:visible;margin-bottom:14px}
.pay-form-header{background:linear-gradient(135deg,#0d1a2e,#0a1220);padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;border-radius:var(--radius) var(--radius) 0 0}
.pay-form-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--gold),#d4a017);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.pay-form-title{font-family:'Exo 2',sans-serif;font-weight:700;font-size:17px;color:var(--text)}
.pay-form-sub{font-size:14px;color:var(--text2);margin-top:1px}
.pay-form-body{padding:18px}
/* Package pills */
.pkg-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pkg-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x}
.pkg-scroll::-webkit-scrollbar{display:none}
.pkg-pill{flex-shrink:0;background:var(--bg3);border:1.5px solid var(--border);border-radius:30px;padding:8px 16px;cursor:pointer;transition:all .2s;text-align:center;min-width:72px}
.pkg-pill.popular{border-color:var(--gold)}