diff --git a/webui/static/style.css b/webui/static/style.css index 9ab05d53..21012c08 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -14594,22 +14594,11 @@ body { } .download-missing-modal-content { - /* Premium glassmorphic foundation matching playlist modal */ - background: linear-gradient(135deg, - rgba(20, 20, 20, 0.95) 0%, - rgba(12, 12, 12, 0.98) 100%); - backdrop-filter: blur(20px) saturate(1.2); - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.12); - border-top: 1px solid rgba(255, 255, 255, 0.18); - - /* Premium shadow effect */ - box-shadow: - 0 25px 80px rgba(0, 0, 0, 0.7), - 0 10px 40px rgba(0, 0, 0, 0.5), - 0 0 50px rgba(var(--accent-rgb), 0.15), - inset 0 1px 0 rgba(255, 255, 255, 0.15); - + background: rgba(16, 16, 20, 0.96); + backdrop-filter: blur(20px); + border-radius: 18px; + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); width: 1400px; height: 900px; max-width: 95vw; @@ -14617,26 +14606,18 @@ body { display: flex; flex-direction: column; overflow: hidden; - - /* Smooth animation */ transform: scale(1); transition: transform 0.4s ease-in-out; } .download-missing-modal-header { - /* Enhanced gradient with subtle transparency and glow */ - background: linear-gradient(135deg, - rgba(45, 45, 45, 0.8) 0%, - rgba(26, 26, 26, 0.9) 100%); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(20, 20, 24, 0.9); + border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; - - /* Subtle inner glow */ - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Hero Section for Context-Aware Display */ @@ -14811,68 +14792,54 @@ body { CONTEXT-SPECIFIC STYLING =============================== */ -/* Artist Album Context - Music theme with artist/album colors */ +/* Artist Album Context */ .download-missing-modal-content[data-context="artist_album"] .download-missing-modal-hero-bg { - opacity: 0.2; + opacity: 0.15; } .download-missing-modal-content[data-context="artist_album"] .download-missing-modal-hero { - background: linear-gradient(135deg, - rgba(45, 45, 45, 0.9) 0%, - rgba(26, 26, 26, 0.95) 100%); + background: rgba(20, 20, 24, 0.9); } .download-missing-modal-content[data-context="artist_album"] .download-missing-modal-hero-detail { - background: rgba(var(--accent-rgb), 0.15); - border-color: rgba(var(--accent-rgb), 0.3); - box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.2); + background: rgba(var(--accent-rgb), 0.08); + border-color: rgba(var(--accent-rgb), 0.15); } -/* Playlist Context - Spotify green theme */ +/* Playlist Context */ .download-missing-modal-content[data-context="playlist"] .download-missing-modal-hero { - background: linear-gradient(135deg, - rgba(var(--accent-rgb), 0.1) 0%, - rgba(26, 26, 26, 0.95) 100%); + background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06) 0%, rgba(20, 20, 24, 0.9) 100%); } .download-missing-modal-content[data-context="playlist"] .download-missing-modal-hero-icon { - background: linear-gradient(135deg, - rgba(var(--accent-rgb), 0.25) 0%, - rgba(var(--accent-light-rgb), 0.15) 100%); - border-color: rgba(var(--accent-rgb), 0.4); - box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.25); -} - -.download-missing-modal-content[data-context="playlist"] .download-missing-modal-hero-detail { background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.25); } -/* Wishlist Context - Eye/watch theme with purple accents */ +.download-missing-modal-content[data-context="playlist"] .download-missing-modal-hero-detail { + background: rgba(var(--accent-rgb), 0.08); + border-color: rgba(var(--accent-rgb), 0.15); +} + +/* Wishlist Context */ .download-missing-modal-content[data-context="wishlist"] .download-missing-modal-hero { - background: linear-gradient(135deg, - rgba(123, 31, 162, 0.1) 0%, - rgba(26, 26, 26, 0.95) 100%); + background: linear-gradient(135deg, rgba(123, 31, 162, 0.06) 0%, rgba(20, 20, 24, 0.9) 100%); } .download-missing-modal-content[data-context="wishlist"] .download-missing-modal-hero-icon { - background: linear-gradient(135deg, - rgba(123, 31, 162, 0.25) 0%, - rgba(142, 36, 170, 0.15) 100%); - border-color: rgba(123, 31, 162, 0.4); - color: #DA70D6; - box-shadow: 0 8px 24px rgba(123, 31, 162, 0.25); -} - -.download-missing-modal-content[data-context="wishlist"] .download-missing-modal-hero-detail { background: rgba(123, 31, 162, 0.12); border-color: rgba(123, 31, 162, 0.25); color: #DA70D6; } +.download-missing-modal-content[data-context="wishlist"] .download-missing-modal-hero-detail { + background: rgba(123, 31, 162, 0.08); + border-color: rgba(123, 31, 162, 0.15); + color: #DA70D6; +} + .download-missing-modal-content[data-context="wishlist"] .stat-total .dashboard-stat-number { color: #DA70D6; - text-shadow: 0 0 20px rgba(218, 112, 214, 0.4); } /* =============================== @@ -15339,61 +15306,43 @@ body { font-weight: 700; margin-bottom: 0; line-height: 1.2; - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } .dashboard-stat-label { font-size: 10px; - color: #e0e0e0; + color: rgba(255, 255, 255, 0.5); font-weight: 600; text-transform: uppercase; - letter-spacing: 0.5px; - opacity: 0.8; + letter-spacing: 0.05em; } -/* Enhanced stat colors with glow effects */ +/* Stat colors */ .stat-total .dashboard-stat-number { color: rgb(var(--accent-light-rgb)); - text-shadow: 0 0 20px rgba(var(--accent-light-rgb), 0.4); } .stat-found .dashboard-stat-number { color: #4CAF50; - text-shadow: 0 0 20px rgba(76, 175, 80, 0.4); } .stat-missing .dashboard-stat-number { color: #FF6B35; - text-shadow: 0 0 20px rgba(255, 107, 53, 0.4); } .stat-downloaded .dashboard-stat-number { color: #2196F3; - text-shadow: 0 0 20px rgba(33, 150, 243, 0.4); } /* Progress Section */ .download-progress-section { - /* Premium glassmorphic card matching stats */ - background: linear-gradient(135deg, - rgba(35, 35, 35, 0.7) 0%, - rgba(25, 25, 25, 0.8) 100%); - backdrop-filter: blur(10px) saturate(1.1); - border: 1px solid rgba(255, 255, 255, 0.1); - border-top: 1px solid rgba(255, 255, 255, 0.15); + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; - - /* Premium shadow with subtle glow */ - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.4), - 0 4px 16px rgba(0, 0, 0, 0.2), - 0 0 20px rgba(var(--accent-rgb), 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.1); } .progress-item { @@ -15765,65 +15714,94 @@ body { } .download-control-btn { - padding: 12px 20px; + padding: 10px 20px; border-radius: 10px; - font-size: 14px; + font-size: 13px; font-weight: 600; cursor: pointer; - transition: all 0.2s ease; - border: none; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + border: 1px solid rgba(255, 255, 255, 0.1); min-width: 120px; + position: relative; + overflow: hidden; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%); + color: rgba(255, 255, 255, 0.8); +} + +.download-control-btn::before { + content: ''; + position: absolute; + inset: 0; + border-radius: 10px; + opacity: 0; + transition: opacity 0.3s; +} + +.download-control-btn:hover:not(:disabled)::before { + opacity: 1; +} + +.download-control-btn:hover:not(:disabled) { + color: #fff; + transform: translateY(-1px); +} + +.download-control-btn.primary::before { + background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25) 0%, rgba(var(--accent-rgb), 0.08) 100%); } .download-control-btn.primary { - background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb))); - color: #000000; - box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3); + border-color: rgba(var(--accent-rgb), 0.2); + color: rgb(var(--accent-light-rgb)); } -.download-control-btn.primary:hover { - transform: translateY(-1px); - box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4); +.download-control-btn.primary:hover:not(:disabled) { + border-color: rgba(var(--accent-rgb), 0.4); + box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.2); } -.download-control-btn.secondary { - background: #404040; - color: #ffffff; - border: 1px solid #666666; +.download-control-btn.secondary::before { + background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); } -.download-control-btn.secondary:hover { - background: #505050; - border-color: #777777; - transform: translateY(-1px); +.download-control-btn.secondary:hover:not(:disabled) { + border-color: rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.download-control-btn.danger::before { + background: linear-gradient(135deg, rgba(244, 67, 54, 0.2) 0%, rgba(244, 67, 54, 0.05) 100%); } .download-control-btn.danger { - background: #f44336; - color: #ffffff; + border-color: rgba(244, 67, 54, 0.2); + color: rgba(244, 67, 54, 0.8); } -.download-control-btn.danger:hover { - background: #d32f2f; - transform: translateY(-1px); +.download-control-btn.danger:hover:not(:disabled) { + border-color: rgba(244, 67, 54, 0.4); + color: #ff6b6b; + box-shadow: 0 4px 16px rgba(244, 67, 54, 0.15); +} + +.download-control-btn.export::before { + background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.08) 100%); } .download-control-btn.export { - background: linear-gradient(135deg, #667eea, #764ba2); - color: #ffffff; - border: 1px solid rgba(118, 75, 162, 0.3); - box-shadow: 0 4px 16px rgba(102, 126, 234, 0.25); + border-color: rgba(102, 126, 234, 0.2); + color: rgba(142, 160, 255, 0.85); } -.download-control-btn.export:hover { - background: linear-gradient(135deg, #7c8ff0, #8a5ab8); - transform: translateY(-1px); - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35); +.download-control-btn.export:hover:not(:disabled) { + border-color: rgba(102, 126, 234, 0.4); + box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15); } .download-control-btn:disabled { - background: #333333; - color: #666666; + background: rgba(255, 255, 255, 0.03); + border-color: rgba(255, 255, 255, 0.04); + color: rgba(255, 255, 255, 0.15); cursor: not-allowed; transform: none; box-shadow: none; @@ -20036,26 +20014,13 @@ body { width: 900px; max-width: 90vw; max-height: 85vh; - border-radius: 20px; + border-radius: 18px; overflow: hidden; position: relative; - - /* Premium glassmorphic foundation matching download modal */ - background: linear-gradient(135deg, - rgba(20, 20, 20, 0.95) 0%, - rgba(12, 12, 12, 0.98) 100%); - backdrop-filter: blur(20px) saturate(1.2); - - /* Enhanced borders */ - border: 1px solid rgba(255, 255, 255, 0.12); - - /* Premium shadow effect matching download modal */ - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.6), - 0 8px 32px rgba(0, 0, 0, 0.4), - 0 0 40px rgba(var(--accent-rgb), 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.15); - + background: rgba(16, 16, 20, 0.96); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); transform: scale(0.9); opacity: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); @@ -20068,13 +20033,10 @@ body { /* Modal Header */ .add-to-wishlist-modal-header { - /* Enhanced gradient with subtle transparency and glow */ - background: linear-gradient(135deg, - rgba(45, 45, 45, 0.8) 0%, - rgba(26, 26, 26, 0.9) 100%); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - border-top-left-radius: 20px; - border-top-right-radius: 20px; + background: rgba(20, 20, 24, 0.9); + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + border-top-left-radius: 18px; + border-top-right-radius: 18px; position: relative; overflow: hidden; }