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

Redesign download missing and wishlist modals with unified glass style

Browse source
This commit is contained in:
Broque Thomas 2026-03-22 22:16:25 -07:00
parent 8d3d623f10
commit 203f317236
1 changed files with 103 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

244
webui/static/style.css
View file

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