From 2c6f2adce15816fce3a73f33a474bb3701cc2f7a Mon Sep 17 00:00:00 2001 From: Broque Thomas <26755000+Nezreka@users.noreply.github.com> Date: Fri, 13 Mar 2026 15:55:26 -0700 Subject: [PATCH] Redesign watchlist modal with polished cards, gradient overlays, and rate limit modal --- webui/static/mobile.css | 10 +- webui/static/script.js | 21 +-- webui/static/style.css | 284 +++++++++++++++++++++++++++++++++++----- 3 files changed, 271 insertions(+), 44 deletions(-) diff --git a/webui/static/mobile.css b/webui/static/mobile.css index 3612725c..f1e0c912 100644 --- a/webui/static/mobile.css +++ b/webui/static/mobile.css @@ -1475,7 +1475,8 @@ } .watchlist-card-info { - padding: 10px 12px; + padding: 0 12px 6px; + margin-top: -28px; } .watchlist-card-name { @@ -1923,16 +1924,17 @@ } .watchlist-card-info { - padding: 8px 10px; + padding: 0 10px 4px; + margin-top: -24px; } .watchlist-pill { font-size: 8px; - padding: 1px 4px; + padding: 2px 5px; } .watchlist-card-pills { - padding: 0 10px 6px; + padding: 2px 10px 8px; } .watchlist-detail-content { diff --git a/webui/static/script.js b/webui/static/script.js index 39074dca..36a8846b 100644 --- a/webui/static/script.js +++ b/webui/static/script.js @@ -31710,7 +31710,7 @@ async function showWatchlistModal() {
-

👁️ Watchlist

+

Watchlist

${countData.count} artist${countData.count !== 1 ? 's' : ''} Next Auto${countdownText ? ': ' + countdownText : ''} @@ -31757,24 +31757,26 @@ async function showWatchlistModal() {
-
- - -
@@ -31787,10 +31789,11 @@ async function showWatchlistModal() {
+
diff --git a/webui/static/style.css b/webui/static/style.css index acd53710..97bb92fb 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -11144,6 +11144,7 @@ body { max-height: 95vh; position: relative; overflow: hidden; + border-top: 1px solid rgba(255, 255, 255, 0.15); } /* Override playlist-modal-body within watchlist to allow grid scrolling */ @@ -11153,6 +11154,153 @@ body { min-height: 0; } +/* ── Header polish ─────────────────────────────── */ +.watchlist-fullscreen .playlist-header-content h2 { + font-size: 26px; + letter-spacing: -0.3px; + padding-bottom: 12px; + position: relative; + display: flex; + align-items: center; + gap: 10px; +} + +.watchlist-fullscreen .playlist-header-content h2::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 48px; + height: 3px; + background: linear-gradient(90deg, rgb(var(--accent-rgb)), transparent); + border-radius: 2px; +} + +.watchlist-header-icon { + flex-shrink: 0; + filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.4)); +} + +.watchlist-fullscreen .playlist-quick-info { + gap: 10px; +} + +.watchlist-fullscreen .playlist-track-count, +.watchlist-fullscreen .playlist-owner { + background: rgba(255, 255, 255, 0.05); + padding: 4px 14px; + border-radius: 20px; + font-size: 12px; + font-weight: 600; + letter-spacing: 0.3px; +} + +.watchlist-fullscreen .playlist-track-count { + border: 1px solid rgba(var(--accent-rgb), 0.2); +} + +.watchlist-fullscreen .playlist-owner { + border: 1px solid rgba(255, 255, 255, 0.08); +} + +/* ── Close button ──────────────────────────────── */ +.watchlist-fullscreen .playlist-modal-close { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + background: rgba(255, 255, 255, 0.06); + transition: all 0.25s ease; + font-size: 20px; +} + +.watchlist-fullscreen .playlist-modal-close:hover { + background: rgba(255, 59, 48, 0.15); + color: #ff6b6b; + transform: rotate(90deg) scale(1.1); +} + +/* ── Action buttons ────────────────────────────── */ +.watchlist-actions { + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + padding-bottom: 16px !important; +} + +.watchlist-actions .playlist-modal-btn { + display: inline-flex; + align-items: center; + gap: 8px; + white-space: nowrap; +} + +.watchlist-actions .playlist-modal-btn svg { + flex-shrink: 0; +} + +/* Scan button: shimmer on hover */ +.watchlist-btn-scan { + position: relative; + overflow: hidden; +} + +.watchlist-btn-scan::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); + transform: translateX(-100%); + transition: none; +} + +.watchlist-btn-scan:not(:disabled):hover::before { + transform: translateX(100%); + transition: transform 0.6s ease; +} + +/* Similar Artists button: discovery blue identity */ +.watchlist-btn-similar { + border: 1px solid rgba(99, 179, 237, 0.15) !important; + transition: all 0.25s ease !important; +} + +.watchlist-btn-similar:not(:disabled):hover { + background: rgba(99, 179, 237, 0.1) !important; + border-color: rgba(99, 179, 237, 0.35) !important; + color: #90cdf4 !important; + box-shadow: 0 0 20px rgba(99, 179, 237, 0.08); +} + +/* Settings button: subtle warm */ +.watchlist-btn-settings { + transition: all 0.25s ease !important; +} + +.watchlist-btn-settings:hover { + background: rgba(255, 255, 255, 0.1) !important; +} + +/* ── Search bar ────────────────────────────────── */ +.watchlist-search-container { + padding: 0 32px; + position: relative; +} + +.watchlist-search-icon { + position: absolute; + left: 48px; + top: 50%; + transform: translateY(-50%); + pointer-events: none; + transition: fill 0.2s ease; + z-index: 1; +} + +.watchlist-search-container:focus-within .watchlist-search-icon { + fill: rgb(var(--accent-rgb)); +} + /* Card grid */ .watchlist-artists-grid { display: grid; @@ -11161,7 +11309,7 @@ body { padding: 24px 32px 32px; } -/* Individual artist card */ +/* ── Artist cards ──────────────────────────────── */ .watchlist-artist-card { position: relative; border-radius: 16px; @@ -11169,23 +11317,56 @@ body { cursor: pointer; background: rgba(18, 18, 18, 1); border: 1px solid rgba(255, 255, 255, 0.06); - transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; + transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), + border-color 0.3s ease, + box-shadow 0.3s ease; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } .watchlist-artist-card:hover { - transform: translateY(-4px); - border-color: rgba(var(--accent-rgb), 0.25); - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), - 0 0 20px rgba(var(--accent-rgb), 0.1); + transform: translateY(-6px); + border-color: rgba(var(--accent-rgb), 0.3); + box-shadow: + 0 16px 40px rgba(0, 0, 0, 0.5), + 0 0 30px rgba(var(--accent-rgb), 0.12), + 0 0 60px rgba(var(--accent-rgb), 0.05); } .watchlist-artist-card:active { - transform: translateY(-1px); + transform: translateY(-2px); } -/* Image container — normal flow, sets the card height */ +/* Card entrance animation */ +@keyframes watchlistCardIn { + from { + opacity: 0; + transform: translateY(16px) scale(0.97); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +.watchlist-artist-card { + animation: watchlistCardIn 0.35s ease-out backwards; +} + +.watchlist-artist-card:nth-child(1) { animation-delay: 0.02s; } +.watchlist-artist-card:nth-child(2) { animation-delay: 0.04s; } +.watchlist-artist-card:nth-child(3) { animation-delay: 0.06s; } +.watchlist-artist-card:nth-child(4) { animation-delay: 0.08s; } +.watchlist-artist-card:nth-child(5) { animation-delay: 0.10s; } +.watchlist-artist-card:nth-child(6) { animation-delay: 0.12s; } +.watchlist-artist-card:nth-child(7) { animation-delay: 0.14s; } +.watchlist-artist-card:nth-child(8) { animation-delay: 0.16s; } +.watchlist-artist-card:nth-child(9) { animation-delay: 0.18s; } +.watchlist-artist-card:nth-child(10) { animation-delay: 0.20s; } +.watchlist-artist-card:nth-child(n+11) { animation-delay: 0.22s; } + +/* Image container with gradient fade */ .watchlist-card-image { + position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; @@ -11194,11 +11375,30 @@ body { rgba(20, 20, 20, 1) 100%); } +.watchlist-card-image::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 55%; + background: linear-gradient(to top, rgba(18, 18, 18, 1) 0%, rgba(18, 18, 18, 0.5) 45%, transparent 100%); + pointer-events: none; + z-index: 1; +} + .watchlist-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; + transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), + filter 0.4s ease; +} + +.watchlist-artist-card:hover .watchlist-card-image img { + transform: scale(1.05); + filter: brightness(1.1); } /* Image fallback */ @@ -11212,13 +11412,16 @@ body { color: rgba(255, 255, 255, 0.3); } -/* Info below the image — normal flow */ +/* Info overlapping the gradient fade */ .watchlist-card-info { - padding: 14px 16px; + position: relative; + z-index: 2; + margin-top: -36px; + padding: 0 16px 8px; display: flex; flex-direction: column; gap: 3px; - background: rgba(18, 18, 18, 1); + background: transparent; } .watchlist-card-name { @@ -11229,40 +11432,56 @@ body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + transition: color 0.25s ease; + text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); +} + +.watchlist-artist-card:hover .watchlist-card-name { + color: rgb(var(--accent-light-rgb)); } .watchlist-card-meta { font-size: 11px; color: rgba(255, 255, 255, 0.5); font-weight: 500; + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } /* Card release-type pills */ .watchlist-card-pills { + position: relative; + z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; - padding: 0 16px 10px; + padding: 4px 16px 12px; } .watchlist-pill { font-size: 9px; - font-weight: 600; + font-weight: 700; text-transform: uppercase; - padding: 2px 6px; - border-radius: 6px; + padding: 3px 8px; + border-radius: 20px; line-height: 1.3; - letter-spacing: 0.3px; + letter-spacing: 0.5px; + transition: transform 0.15s ease; +} + +.watchlist-pill:hover { + transform: scale(1.08); } .watchlist-pill-active { - background: rgba(var(--accent-rgb), 0.15); - color: rgb(var(--accent-rgb)); + background: rgba(var(--accent-rgb), 0.18); + color: rgb(var(--accent-light-rgb)); + box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.12); } .watchlist-pill-filter { background: rgba(255, 152, 0, 0.15); - color: #ff9800; + color: #ffb74d; + box-shadow: 0 0 8px rgba(255, 152, 0, 0.08); } /* Checkbox — top-left, hidden until hover or checked */ @@ -11311,12 +11530,13 @@ body { right: 10px; z-index: 3; opacity: 0; - transition: opacity 0.15s ease, background 0.15s ease; + transition: opacity 0.2s ease, background 0.2s ease; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); + backdrop-filter: blur(8px); color: rgba(255, 255, 255, 0.7); font-size: 18px; line-height: 1; @@ -11342,12 +11562,13 @@ body { right: 10px; z-index: 3; opacity: 0; - transition: opacity 0.15s ease, background 0.15s ease; + transition: opacity 0.2s ease, background 0.2s ease, transform 0.3s ease; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); + backdrop-filter: blur(8px); color: rgba(255, 255, 255, 0.7); cursor: pointer; display: flex; @@ -11363,6 +11584,7 @@ body { .watchlist-card-gear:hover { background: rgba(var(--accent-rgb), 0.7); color: #ffffff; + transform: rotate(45deg); } .watchlist-card-gear svg { @@ -11641,12 +11863,13 @@ body { /* Live activity classes (replaces inline styles) */ .watchlist-live-activity { display: flex; - gap: 15px; + gap: 18px; margin-top: 15px; - padding: 15px; - background: #2a2a2a; - border-radius: 8px; - border: 1px solid #444; + padding: 16px 20px; + background: rgba(255, 255, 255, 0.03); + border-radius: 12px; + border: 1px solid rgba(var(--accent-rgb), 0.15); + backdrop-filter: blur(8px); justify-content: center; align-items: flex-start; } @@ -11663,6 +11886,7 @@ body { height: 80px; border-radius: 50%; border: 2px solid rgb(var(--accent-rgb)); + box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.25); object-fit: cover; background: #1a1a1a; } @@ -11670,8 +11894,9 @@ body { .watchlist-live-activity-album-img { width: 80px; height: 80px; - border-radius: 6px; + border-radius: 8px; border: 2px solid #ffc107; + box-shadow: 0 0 16px rgba(255, 193, 7, 0.2); object-fit: cover; background: #1a1a1a; } @@ -11772,13 +11997,10 @@ body { } /* Watchlist Search */ -.watchlist-search-container { - padding: 0 32px; -} .watchlist-search-input { width: 100%; - padding: 12px 16px; + padding: 12px 16px 12px 40px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px;