From 975f81f476133113e825c522a7ab696469093c05 Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Fri, 19 Jun 2026 08:13:24 -0700 Subject: [PATCH] video downloads: quality profile resolution/source rows reuse the hybrid-source-item styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Consistency — the Resolution order and Preferred-source order lists now use the exact same .hybrid-source-item markup/CSS (card + arrows + priority number + pill toggle) as the Download Source hybrid list, instead of the bespoke .vq-row styling. Resolution keeps its enable toggle; source is order-only (no toggle), no brand icon (they're not branded sources). Removed the now-dead .vq-row/.vq-arrow/.vq-toggle/.vq-rows CSS. Pure UI; data-vq-* hooks preserved so the existing delegation/handlers are unchanged. --- webui/index.html | 4 ++-- webui/static/video/video-settings.js | 26 +++++++++++++------------- webui/static/video/video-side.css | 25 ++----------------------- 3 files changed, 17 insertions(+), 38 deletions(-) diff --git a/webui/index.html b/webui/index.html index 1bdf382f..5cfefd25 100644 --- a/webui/index.html +++ b/webui/index.html @@ -6114,11 +6114,11 @@
Resolutions to accept toggle on what you want · order = preference (best first)
-
+
Preferred source tie-breaker when two releases match the same resolution
-
+
diff --git a/webui/static/video/video-settings.js b/webui/static/video/video-settings.js index 81019fb8..b5453232 100644 --- a/webui/static/video/video-settings.js +++ b/webui/static/video/video-settings.js @@ -452,27 +452,27 @@ }); resHost.innerHTML = keys.map(function (k, i) { var r = p.resolutions[k]; - return '
' + - '' + - '' + - '' + + return '
' + + '' + + '' + + '' + '' + - '' + (RES_LABEL[k] || k) + '' + - '' + (i + 1) + '' + - '' + + '' + (RES_LABEL[k] || k) + '' + + '' + (i + 1) + '' + + '' + '
'; }).join(''); } var srcHost = document.getElementById('vq-source-rows'); if (srcHost) { srcHost.innerHTML = p.source_priority.map(function (s, i) { - return '
' + - '' + - '' + - '' + + return '
' + + '' + + '' + + '' + '' + - '' + (SRC_LABEL[s] || s) + '' + - '' + (i + 1) + '' + + '' + (SRC_LABEL[s] || s) + '' + + '' + (i + 1) + '' + '
'; }).join(''); } diff --git a/webui/static/video/video-side.css b/webui/static/video/video-side.css index ec554f39..6485a8a9 100644 --- a/webui/static/video/video-side.css +++ b/webui/static/video/video-side.css @@ -2969,29 +2969,8 @@ body[data-side="video"] #soulsync-toggle { display: none; } color: rgba(255,255,255,0.65); margin-bottom: 9px; display: flex; align-items: center; gap: 10px; } .vq-hint { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.4); } -.vq-rows { display: flex; flex-direction: column; gap: 7px; } -.vq-row { display: flex; align-items: center; gap: 12px; padding: 9px 13px; border-radius: 11px; - background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07); - transition: background 0.15s, opacity 0.15s; } -.vq-row--off { opacity: 0.5; } -.vq-arrows { display: inline-flex; flex-direction: column; gap: 1px; } -.vq-arrow { width: 22px; height: 15px; display: grid; place-items: center; cursor: pointer; - background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; - color: rgba(255,255,255,0.6); font-size: 8px; line-height: 1; padding: 0; transition: all 0.12s; } -.vq-arrow:hover:not(:disabled) { background: rgba(var(--accent-rgb),0.25); color: #fff; } -.vq-arrow:disabled { opacity: 0.25; cursor: default; } -.vq-row-name { flex: 1; font-size: 14px; font-weight: 600; color: #fff; } -.vq-row-prio { font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; color: rgba(255,255,255,0.4); - min-width: 18px; text-align: center; } -/* pill toggle */ -.vq-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 40px; cursor: pointer; } -.vq-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } -.vq-toggle-track { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.13); - transition: background 0.18s; } -.vq-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; - border-radius: 50%; background: #fff; transition: transform 0.18s; } -.vq-toggle input:checked + .vq-toggle-track { background: rgb(var(--accent-rgb)); } -.vq-toggle input:checked + .vq-toggle-track::after { transform: translateX(18px); } +/* Resolution + source rows reuse music's .hybrid-source-item styling (set in the + shared style.css) for parity with the Download Source list — no custom row CSS. */ /* codec + hdr row */ .vq-grid { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin: 16px 0; } .vq-seg { display: inline-flex; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);