/* Mobile-First Responsive CSS for Personal Tune Management */ /* ============================================ BASE STYLES (Mobile & Desktop) ============================================ */ /* Prevent page bounce/overscroll and pull-to-refresh on mobile only */ @media (max-width: 768px) { html, body { overscroll-behavior-y: none; /* Prevent pull-to-refresh */ overscroll-behavior-x: none; /* Prevent horizontal bounce */ /* Use `clip` rather than `hidden`: `overflow-x: hidden` forces overflow-y to compute to `auto`, turning into a scroll container sized to its content. Combined with `overscroll-behavior-y: none`, that traps wheel/touch scrolling and the page becomes unscrollable. `clip` prevents horizontal scroll without creating a scroll container, so vertical page scroll works. */ overflow-x: clip; /* Prevent horizontal scroll when swiping cards */ } } /* Ensure header and hamburger menu stay fixed during swipe gestures */ /* Using z-index: 2000 from the z-index scale in theme.css (--z-header) */ .header.fixed-top { position: fixed; width: 100%; z-index: 2000 !important; /* Isolate from transforms applied to page content */ transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; } /* Full width on desktop, the same as /sessions and /tunes. .docs-content is already the page's content box — 40px in from each edge — so a second 1200px cap centred inside it just made Tunes a visibly narrower page than Sessions, with nothing on screen to explain why. Horizontal padding goes for the same reason: it would inset these rows 20px further than the rows on either of those pages. */ .my-tunes-container { padding: 20px 0; } .btn { padding: 4px 12px; background-color: var(--primary-fill); color: white !important; text-decoration: none; border-radius: 4px; border: none; cursor: pointer; font-size: 13px; transition: background-color 0.2s; white-space: nowrap; line-height: 1.2; } .btn:hover { background-color: var(--primary-fill-hover, #437342); color: white !important; text-decoration: none; } .btn-secondary { background-color: var(--secondary, #6c757d); color: white !important; } .btn-secondary:hover { background-color: var(--secondary-dark, #5a6268); color: white !important; } .filters-container { margin-bottom: 20px; } /* New top row layout: search + filter icon */ .filter-top-row { display: flex; gap: 8px; align-items: center; margin-bottom: 0; } /* The kit SearchField wrapper takes the input's old flex slot in the row */ .filter-top-row .kit-search { flex: 1; min-width: 0; } .filter-search-input { flex: 1; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 14px; background-color: var(--bg-color); color: var(--text-color); min-width: 0; } /* The session People box used to carry its own skin, and a focus border was the one thing that skin had which this one did not. Kept, and given to every search box that wears this class rather than to one of them. */ .filter-search-input:focus { outline: none; border-color: var(--primary); } .filter-panel-toggle { padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--bg-color); color: var(--text-color); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; width: 40px; height: 40px; } .filter-panel-toggle:hover { background-color: var(--hover-bg); } .filter-panel-toggle.active { background-color: var(--primary-fill); color: white; border-color: var(--primary-fill); } .filter-panel-toggle svg { display: block; } /* Filter panel - slides down when opened */ .filter-panel { margin-top: 12px; padding: 12px; border: 1px solid var(--border-color); border-radius: 4px; background-color: var(--bg-color); /* overflow:visible so the custom instrument dropdown can overlay rows below it; the slide animation clips via overflow:hidden on .opening/.closing (only for 0.3s). */ transition: all 0.3s ease-out; } .filter-panel.opening { animation: slideDown 0.3s ease-out; overflow: hidden; } .filter-panel.closing { animation: slideUp 0.3s ease-out; overflow: hidden; } /* Custom instrument-filter dropdown (native