From d3c875919fde367d8f1abd2af336823e90833c4b Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Tue, 16 Jun 2026 16:23:21 -0700 Subject: [PATCH] Wishlist page: header identical to the watchlist (kill the harsh glow) My head glow was unblurred + mis-centered, so it read as a harsh purple band with a gap above. Mirror the watchlist's exact head/glow/tabs/toolbar: blurred accent radial clipped by the header, 36px title, pill tabs with count badges, matching gutters + 900px breakpoint. Same chrome, different content. --- webui/static/video/video-side.css | 38 ++++++++++++++++++------------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/webui/static/video/video-side.css b/webui/static/video/video-side.css index d9edd4e4..82bc5437 100644 --- a/webui/static/video/video-side.css +++ b/webui/static/video/video-side.css @@ -2421,23 +2421,29 @@ body[data-side="video"] #soulsync-toggle { display: none; } ══════════════════════════════════════════════════════════════════════════ */ .vwsh-page { color: var(--text-primary, #fff); padding: 0 0 70px; } .vwsh-head { position: relative; padding: 30px 40px 0; overflow: hidden; } -.vwsh-head-glow { position: absolute; top: -190px; left: 50%; transform: translateX(-50%); width: 620px; height: 360px; - pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb, 29, 185, 84), 0.16), transparent 70%); } -.vwsh-head-row { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } -.vwsh-title { font-size: 30px; font-weight: 900; letter-spacing: -0.025em; color: #fff; margin: 0; } -.vwsh-sub { font-size: 14px; color: rgba(255, 255, 255, 0.5); margin: 6px 0 0; } -.vwsh-tabs { display: inline-flex; gap: 6px; background: rgba(255, 255, 255, 0.04); padding: 5px; - border-radius: 13px; border: 1px solid rgba(255, 255, 255, 0.07); } -.vwsh-tab { padding: 9px 18px; border: none; background: none; cursor: pointer; border-radius: 9px; - font-size: 13.5px; font-weight: 800; color: rgba(255, 255, 255, 0.55); transition: color 0.15s ease, background 0.15s ease; } -.vwsh-tab:hover { color: #fff; } -.vwsh-tab--on { color: #fff; background: rgba(var(--accent-rgb, 29, 185, 84), 0.9); - box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb, 29, 185, 84), 0.7); } -.vwsh-tab-n { font-size: 11px; font-weight: 800; opacity: 0.7; margin-left: 4px; } +.vwsh-head-glow { position: absolute; top: -190px; left: 50%; transform: translateX(-50%); + width: 860px; height: 390px; pointer-events: none; z-index: 0; + background: radial-gradient(56% 70% at 50% 0%, rgba(var(--accent-rgb, 88 101 242), 0.22), transparent 70%); filter: blur(10px); } +.vwsh-head-row { position: relative; z-index: 1; display: flex; align-items: flex-end; + justify-content: space-between; gap: 20px; flex-wrap: wrap; } +.vwsh-title { font-size: 36px; font-weight: 800; letter-spacing: -0.025em; margin: 0; } +.vwsh-sub { margin: 7px 0 0; color: rgba(255, 255, 255, 0.55); font-size: 14px; font-weight: 600; } -.vwsh-toolbar { display: flex; gap: 12px; padding: 18px 40px 0; } +.vwsh-tabs { display: inline-flex; gap: 3px; padding: 4px; border-radius: 13px; + background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); } +.vwsh-tab { border: 0; background: transparent; color: rgba(255, 255, 255, 0.7); + font-size: 13px; font-weight: 800; padding: 8px 16px; border-radius: 9px; cursor: pointer; + display: inline-flex; align-items: center; gap: 8px; transition: all 0.15s ease; } +.vwsh-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } +.vwsh-tab--on { color: #fff; background: rgba(var(--accent-rgb, 88 101 242), 0.9); + box-shadow: 0 4px 14px rgba(var(--accent-rgb, 88 101 242), 0.32); } +.vwsh-tab-n { font-size: 11px; font-weight: 800; min-width: 20px; text-align: center; + padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); color: inherit; } +.vwsh-tab--on .vwsh-tab-n { background: rgba(0, 0, 0, 0.28); } + +.vwsh-toolbar { padding: 18px 40px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .vwsh-body { padding: 26px 40px 0; } -.vwsh-search { position: relative; flex: 1; max-width: 360px; } +.vwsh-search { position: relative; flex: 1; max-width: 420px; min-width: 220px; } .vwsh-search-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.35); } .vwsh-search-input { width: 100%; padding: 11px 14px 11px 38px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-size: 13.5px; outline: none; transition: border-color 0.15s ease; } @@ -2518,7 +2524,7 @@ body[data-side="video"] #soulsync-toggle { display: none; } .vwsh-season-head .vwsh-rm, .vwsh-ep .vwsh-rm { width: 24px; height: 24px; font-size: 15px; } .vwsh-season-head .vwsh-rm { margin-left: 10px; } @media (hover: none) { .vwsh-movie-art .vwsh-rm { opacity: 1; } } -@media (max-width: 700px) { +@media (max-width: 900px) { .vwsh-head, .vwsh-toolbar, .vwsh-body { padding-left: 18px; padding-right: 18px; } .vwsh-grid--movies { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 18px 14px; } }