From 897a81b1cab77a9bf5bf7609c8f409b885c46ca3 Mon Sep 17 00:00:00 2001
From: CN-JS-HuiBai <huyang@littlediary.cn>
Date: Fri, 3 Apr 2026 22:54:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=A0=B7=E5=BC=8F=E8=A1=A8?=
 =?UTF-8?q?=E6=B6=88=E5=A4=B1=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/style.css | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 3ba0492..4b09ccf 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -677,11 +677,11 @@ header p {
     flex-wrap: nowrap;
     opacity: 1;
     transition: opacity 0.2s ease, transform 0.2s ease;
-    overflow-x: auto;
+    overflow: visible;
 }
 
 .custom-controls.controls-faded,
-.custom-seek-container.controls-faded {
+.control-seek.controls-faded {
     opacity: 0;
     transform: translateY(12px);
     pointer-events: none;
@@ -702,6 +702,7 @@ header p {
     display: flex;
     align-items: center;
     gap: 0.75rem;
+    min-height: 2rem;
 }
 
 .control-time {
@@ -817,6 +818,11 @@ header p {
     white-space: nowrap;
 }
 
+.volume-popover .popover-panel {
+    left: 0;
+    transform: translateX(0) translateY(6px);
+}
+
 .control-popover:hover .popover-panel,
 .control-popover:focus-within .popover-panel {
     opacity: 1;
@@ -824,6 +830,11 @@ header p {
     transform: translateX(-50%) translateY(0);
 }
 
+.volume-popover:hover .popover-panel,
+.volume-popover:focus-within .popover-panel {
+    transform: translateX(0) translateY(0);
+}
+
 .volume-control {
     display: flex;
     align-items: center;
@@ -1118,11 +1129,14 @@ header p {
         align-items: center;
         margin: -6.25rem 0.75rem 0;
         width: calc(100% - 1.5rem);
+        flex-wrap: wrap;
+        row-gap: 0.75rem;
     }
 
     .controls-left,
     .controls-right {
         width: auto;
+        flex: 1 1 auto;
     }
 
     .controls-right {
@@ -1145,6 +1159,8 @@ header p {
     }
 
     .control-seek {
-        min-width: 220px;
+        order: 3;
+        width: 100%;
+        min-width: 0;
     }
 }