From de977bef18b7ff44e994e6ecd2e6637ee52baa46 Mon Sep 17 00:00:00 2001
From: root <root@nonebot.top>
Date: Tue, 17 Feb 2026 23:08:19 +0800
Subject: [PATCH] =?UTF-8?q?fix(video-ui):=20=E4=BF=AE=E5=A4=8D=E6=8B=BC?=
 =?UTF-8?q?=E6=8E=A5=E6=BB=91=E5=9D=97=E5=81=8F=E7=A7=BB=E5=B9=B6=E6=81=A2?=
 =?UTF-8?q?=E5=A4=8D=E5=88=A0=E9=99=A4=E6=AE=B5=E6=96=9C=E7=BA=B9=E8=AD=A6?=
 =?UTF-8?q?=E6=88=92=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/static/public/css/video.css    | 50 ++++++++++++++++++++++++++++--
 app/static/public/js/video.js      | 11 +------
 app/static/public/pages/video.html |  2 +-
 3 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/app/static/public/css/video.css b/app/static/public/css/video.css
index e0c6c0c..a17b8fe 100644
--- a/app/static/public/css/video.css
+++ b/app/static/public/css/video.css
@@ -679,23 +679,61 @@ body {
   width: 100%;
   appearance: none;
   background: transparent;
-  --timeline-track-bg: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
+  --cut-pct: 0%;
+  --keep-bg: rgba(255, 255, 255, 0.95);
+  --warn-bg: repeating-linear-gradient(135deg, rgba(148, 163, 184, 0.65) 0 6px, rgba(100, 116, 139, 0.9) 6px 12px);
 }
 
 .timeline-delete-zone::-webkit-slider-runnable-track {
   height: 8px;
   border-radius: 999px;
-  background: var(--timeline-track-bg);
+  background: var(--warn-bg);
   border: 1px solid rgba(148, 163, 184, 0.35);
 }
 
 .timeline-delete-zone::-moz-range-track {
   height: 8px;
   border-radius: 999px;
-  background: var(--timeline-track-bg);
+  background: var(--warn-bg);
   border: 1px solid rgba(148, 163, 184, 0.35);
 }
 
+.timeline-delete-zone[data-delete-side="right"]::-webkit-slider-runnable-track {
+  background: linear-gradient(90deg, var(--keep-bg) 0%, var(--keep-bg) var(--cut-pct), transparent var(--cut-pct), transparent 100%), var(--warn-bg);
+}
+
+.timeline-delete-zone[data-delete-side="right"]::-moz-range-track {
+  background: linear-gradient(90deg, var(--keep-bg) 0%, var(--keep-bg) var(--cut-pct), transparent var(--cut-pct), transparent 100%), var(--warn-bg);
+}
+
+.timeline-delete-zone[data-delete-side="left"]::-webkit-slider-runnable-track {
+  background: linear-gradient(90deg, transparent 0%, transparent var(--cut-pct), var(--keep-bg) var(--cut-pct), var(--keep-bg) 100%), var(--warn-bg);
+}
+
+.timeline-delete-zone[data-delete-side="left"]::-moz-range-track {
+  background: linear-gradient(90deg, transparent 0%, transparent var(--cut-pct), var(--keep-bg) var(--cut-pct), var(--keep-bg) 100%), var(--warn-bg);
+}
+
+.timeline-delete-zone::-webkit-slider-thumb {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  background: #111827;
+  margin-top: -5px;
+  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
+}
+
+.timeline-delete-zone::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  background: #111827;
+  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
+}
+
 .timeline-delete-zone.is-disabled {
   cursor: not-allowed;
 }
@@ -710,6 +748,12 @@ body {
   border-color: rgba(148, 163, 184, 0.45);
 }
 
+.timeline-delete-zone.is-disabled::-webkit-slider-thumb,
+.timeline-delete-zone.is-disabled::-moz-range-thumb {
+  background: #64748b;
+  border-color: #cbd5e1;
+}
+
 .edit-meta-grid {
   margin-bottom: 12px;
 }
diff --git a/app/static/public/js/video.js b/app/static/public/js/video.js
index bb58a33..a75d75d 100644
--- a/app/static/public/js/video.js
+++ b/app/static/public/js/video.js
@@ -202,16 +202,7 @@
     const valueRaw = Number(inputEl.value || 0);
     const value = Math.max(0, Math.min(max, Number.isFinite(valueRaw) ? valueRaw : 0));
     const pct = (value / max) * 100;
-    const side = String(inputEl.dataset.deleteSide || 'right');
-    const warnPattern = 'repeating-linear-gradient(135deg, rgba(148,163,184,0.38) 0 7px, rgba(100,116,139,0.58) 7px 14px)';
-    const keep = 'rgba(255,255,255,0.95)';
-    let bg = '';
-    if (side === 'left') {
-      bg = `linear-gradient(90deg, transparent 0%, transparent ${pct}%, ${keep} ${pct}%, ${keep} 100%), ${warnPattern}`;
-    } else {
-      bg = `linear-gradient(90deg, ${keep} 0%, ${keep} ${pct}%, transparent ${pct}%, transparent 100%), ${warnPattern}`;
-    }
-    inputEl.style.setProperty('--timeline-track-bg', bg);
+    inputEl.style.setProperty('--cut-pct', `${pct}%`);
   }
 
   function refreshAllDeleteZoneTracks() {
diff --git a/app/static/public/pages/video.html b/app/static/public/pages/video.html
index 63b68be..a026656 100644
--- a/app/static/public/pages/video.html
+++ b/app/static/public/pages/video.html
@@ -318,7 +318,7 @@
   <script src="/static/common/js/pwa.js?v=0.1.1"></script>
   <script src="/static/vendor/ffmpeg/ffmpeg.js?v=0.1.0"></script>
   <script src="/static/vendor/ffmpeg/ffmpeg-util.js?v=0.1.0"></script>
-  <script src="/static/public/js/video.js?v=0.5.39"></script>
+  <script src="/static/public/js/video.js?v=0.5.40"></script>
 </body>
 
 </html>