From c866dc4c539d72134ea690c7c44318a58ec27fd2 Mon Sep 17 00:00:00 2001
From: Paul Buetow <paul@buetow.org>
Date: Thu, 30 Apr 2026 23:16:11 +0300
Subject: mobile: responsive layout, touch-friendly progress bar, collapsible
 filters

- Add mobile breakpoints (860px/520px) with compact header, full-width sidebar overlay,
  flexible search bar, and adaptive toolbar.
- Player now spans full width on mobile and has reduced stage height.
- Progress bar gains touch-drag support (touchstart/move/end) for mobile seeking.
- Collapse advanced filters (tags/duration/filesize) behind a 'Filters' toggle to keep
  the default toolbar KISS. Only type and favorites remain always visible.
---
 web/css/player.css | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

(limited to 'web/css/player.css')

diff --git a/web/css/player.css b/web/css/player.css
index 3221042..706667d 100644
--- a/web/css/player.css
+++ b/web/css/player.css
@@ -97,7 +97,25 @@
   transform: translate(-50%, -50%) scale(1);
 }
 
-/* Volume */
+/* Touch-friendly progress bar */
+.progress-track {
+  touch-action: none;
+}
+
+@media (max-width: 520px) {
+  .player .controls {
+    gap: 0.35rem;
+    padding: 0.4rem 0.5rem;
+  }
+  .volume-slider {
+    width: 3.5rem;
+  }
+  .big-play .play-icon {
+    width: 2.8rem;
+    height: 2.8rem;
+    font-size: 1rem;
+  }
+}
 .volume-control {
   display: flex;
   align-items: center;
-- 
cgit v1.2.3