danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Wishlist page: header identical to the watchlist (kill the harsh glow)

Browse source 
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.
This commit is contained in:
BoulderBadgeDad 2026-06-16 16:23:21 -07:00
parent 772703464b
commit d3c875919f
1 changed files with 22 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
webui/static/video/video-side.css
View file

@ -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; }
}