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

Polish settings page styling — premium header, toggle switches, refined inputs

Browse source
This commit is contained in:
Broque Thomas 2026-03-13 16:29:02 -07:00
parent 9261d1f182
commit 4dfefc70df
3 changed files with 148 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
webui/index.html
View file

@ -3284,10 +3284,15 @@
<!-- Settings Page --> <!-- Settings Page -->
<div class="page" id="settings-page"> <div class="page" id="settings-page">
<div class="page-header"> <div class="dashboard-header">
<h2><img src="/static/settings.png" class="page-header-icon" alt=""><span>Settings</span></h2> <div class="header-text">
<button class="save-button" onclick="document.getElementById('save-settings').click()">💾 Save <h2 class="header-title"><img src="/static/settings.png" class="page-header-icon" alt=""><span>Settings</span></h2>
Settings</button> <p class="header-subtitle">Configure services, downloads, and preferences</p>
</div>
<div class="header-spacer"></div>
<div class="header-actions">
<button class="save-button" onclick="document.getElementById('save-settings').click()">Save Settings</button>
</div>
</div> </div>
<div class="settings-content"> <div class="settings-content">
<!-- Two Column Layout --> <!-- Two Column Layout -->
@ -3559,7 +3564,7 @@
<label>API Timeout (seconds):</label> <label>API Timeout (seconds):</label>
<input type="number" id="jellyfin-timeout" placeholder="120" min="15" <input type="number" id="jellyfin-timeout" placeholder="120" min="15"
max="300" value="120"> max="300" value="120">
<small style="color: #888; display: block; margin-top: 5px;">Timeout for <small class="settings-hint">Timeout for
bulk API requests during database sync (15-300s). Increase if your bulk API requests during database sync (15-300s). Increase if your
Jellyfin server is slow to respond.</small> Jellyfin server is slow to respond.</small>
</div> </div>
@ -3716,14 +3721,14 @@
<label>Search Timeout (seconds):</label> <label>Search Timeout (seconds):</label>
<input type="number" id="soulseek-search-timeout" placeholder="60" min="15" <input type="number" id="soulseek-search-timeout" placeholder="60" min="15"
max="300" value="60"> max="300" value="60">
<small style="color: #888; display: block; margin-top: 5px;">How long to search <small class="settings-hint">How long to search
for tracks (15-300 seconds)</small> for tracks (15-300 seconds)</small>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Search Timeout Buffer (seconds):</label> <label>Search Timeout Buffer (seconds):</label>
<input type="number" id="soulseek-search-timeout-buffer" placeholder="15" <input type="number" id="soulseek-search-timeout-buffer" placeholder="15"
min="5" max="60" value="15"> min="5" max="60" value="15">
<small style="color: #888; display: block; margin-top: 5px;">Extra time to wait <small class="settings-hint">Extra time to wait
for late results (5-60 seconds)</small> for late results (5-60 seconds)</small>
</div> </div>
<div class="form-actions" style="margin-top: 8px;"> <div class="form-actions" style="margin-top: 8px;">
@ -4033,7 +4038,7 @@
<label>Album Path Template:</label> <label>Album Path Template:</label>
<input type="text" id="template-album-path" <input type="text" id="template-album-path"
placeholder="$albumartist/$albumartist - $album/$track - $title"> placeholder="$albumartist/$albumartist - $album/$track - $title">
<small style="color: #888;">Variables: $albumartist, $artist, $artistletter, $album, $title, <small class="settings-hint">Variables: $albumartist, $artist, $artistletter, $album, $title,
$track, $disc, $year, $quality (filename only)</small> $track, $disc, $year, $quality (filename only)</small>
</div> </div>
@ -4041,14 +4046,14 @@
<label>Single Path Template:</label> <label>Single Path Template:</label>
<input type="text" id="template-single-path" <input type="text" id="template-single-path"
placeholder="$artist/$artist - $title/$title"> placeholder="$artist/$artist - $title/$title">
<small style="color: #888;">Variables: $artist, $artistletter, $title, $album, $year, $quality (filename only)</small> <small class="settings-hint">Variables: $artist, $artistletter, $title, $album, $year, $quality (filename only)</small>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Playlist Path Template:</label> <label>Playlist Path Template:</label>
<input type="text" id="template-playlist-path" <input type="text" id="template-playlist-path"
placeholder="$playlist/$artist - $title"> placeholder="$playlist/$artist - $title">
<small style="color: #888;">Variables: $playlist, $artist, $artistletter, $title, $year, $quality (filename only)</small> <small class="settings-hint">Variables: $playlist, $artist, $artistletter, $title, $year, $quality (filename only)</small>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -4057,7 +4062,7 @@
<option value="Disc">Disc (e.g., Disc 1/)</option> <option value="Disc">Disc (e.g., Disc 1/)</option>
<option value="CD">CD (e.g., CD 1/)</option> <option value="CD">CD (e.g., CD 1/)</option>
</select> </select>
<small style="color: #888;">Label used for auto-created disc subfolders on multi-disc albums.</small> <small class="settings-hint">Label used for auto-created disc subfolders on multi-disc albums.</small>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -4065,7 +4070,7 @@
style="background: #666;"> style="background: #666;">
🔄 Reset to Defaults 🔄 Reset to Defaults
</button> </button>
<small style="color: #888; display: block; margin-top: 8px;"> <small class="settings-hint">
Restores original path structure. Your downloads will be organized like before. Restores original path structure. Your downloads will be organized like before.
</small> </small>
</div> </div>
@ -4177,7 +4182,7 @@
</select> </select>
<div class="accent-preview-swatch" id="accent-preview-swatch"></div> <div class="accent-preview-swatch" id="accent-preview-swatch"></div>
</div> </div>
<small style="color: #888;">Changes the accent color across the entire UI</small> <small class="settings-hint">Changes the accent color across the entire UI</small>
</div> </div>
<div class="form-group" id="custom-color-group" style="display:none;"> <div class="form-group" id="custom-color-group" style="display:none;">
<label>Custom Color:</label> <label>Custom Color:</label>
@ -4193,14 +4198,14 @@
<option value="equalizer">Equalizer</option> <option value="equalizer">Equalizer</option>
<option value="none">None</option> <option value="none">None</option>
</select> </select>
<small style="color: #888;">Audio-reactive visualizer on the sidebar edge when music is playing</small> <small class="settings-hint">Audio-reactive visualizer on the sidebar edge when music is playing</small>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="checkbox-label"> <label class="checkbox-label">
<input type="checkbox" id="particles-enabled" checked> <input type="checkbox" id="particles-enabled" checked>
Background Particles Background Particles
</label> </label>
<small style="color: #888;">Animated particle effects behind each page. Disable to reduce GPU usage.</small> <small class="settings-hint">Animated particle effects behind each page. Disable to reduce GPU usage.</small>
</div> </div>
</div> </div>
@ -4340,7 +4345,7 @@
<!-- Save Button --> <!-- Save Button -->
<div class="settings-actions"> <div class="settings-actions">
<button class="save-button" id="save-settings">💾 Save Settings</button> <button class="save-button" id="save-settings">Save Settings</button>
</div> </div>
</div> </div>
</div> </div>

1
webui/static/script.js
View file

@ -751,6 +751,7 @@ function initAccentColorListeners() {
if (particlesCheckbox) { if (particlesCheckbox) {
particlesCheckbox.addEventListener('change', () => { particlesCheckbox.addEventListener('change', () => {
applyParticlesSetting(particlesCheckbox.checked); applyParticlesSetting(particlesCheckbox.checked);
// Server save handled by the global debouncedAutoSaveSettings listener on all checkboxes
}); });
} }
} }

176
webui/static/style.css
View file

@ -1634,12 +1634,13 @@ body {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 4px;
} }
.settings-columns { .settings-columns {
display: flex; display: flex;
gap: 24px; gap: 20px;
margin-bottom: 32px; margin-bottom: 24px;
} }
.settings-left-column, .settings-left-column,
@ -1649,7 +1650,7 @@ body {
min-width: 380px; min-width: 380px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 18px; gap: 16px;
} }
/* Glassmorphic cards */ /* Glassmorphic cards */
@ -1679,57 +1680,63 @@ body {
.settings-group:hover { .settings-group:hover {
border-color: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--accent-rgb), 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.07); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 16px rgba(var(--accent-rgb), 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.07);
transform: translateY(-1px);
} }
.settings-group h3 { .settings-group h3 {
font-family: 'SF Pro Display', -apple-system, sans-serif; font-family: 'SF Pro Display', -apple-system, sans-serif;
font-size: 14px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: #ffffff; color: rgba(255, 255, 255, 0.95);
margin-bottom: 14px; margin-bottom: 14px;
margin-top: 8px; margin-top: 6px;
padding-left: 10px; padding-left: 10px;
padding-right: 5px; padding-right: 5px;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 2px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
position: relative; position: relative;
text-transform: uppercase;
letter-spacing: 0.8px;
display: flex;
align-items: center;
gap: 8px;
} }
.settings-group h3::after { .settings-group h3::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -2px; bottom: -1px;
left: 10px; left: 10px;
width: 50px; width: 40px;
height: 2px; height: 1px;
background: linear-gradient(90deg, background: linear-gradient(90deg,
rgba(var(--accent-rgb), 0.8) 0%, rgba(var(--accent-rgb), 0.7) 0%,
transparent 100%); transparent 100%);
} }
/* API Service Frames - upgraded inner cards */ /* API Service Frames - upgraded inner cards */
.api-service-frame { .api-service-frame {
background: linear-gradient(135deg, rgba(40, 40, 40, 0.5), rgba(25, 25, 25, 0.7)); background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px; border-radius: 10px;
padding: 12px 14px 14px 14px; padding: 12px 14px 14px 14px;
margin-bottom: 12px; margin-bottom: 10px;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.api-service-frame:hover { .api-service-frame:hover {
border-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.03);
} }
.service-title { .service-title {
font-family: 'SF Pro Text', -apple-system, sans-serif; font-family: 'SF Pro Text', -apple-system, sans-serif;
font-size: 12px; font-size: 11px;
font-weight: 700; font-weight: 700;
margin-bottom: 8px; margin-bottom: 10px;
margin-top: 0; margin-top: 0;
letter-spacing: 0.2px; letter-spacing: 0.5px;
text-transform: uppercase;
} }
.spotify-title { .spotify-title {
@ -1876,6 +1883,17 @@ body {
margin-bottom: 12px; margin-bottom: 12px;
} }
.form-group small,
.settings-group small,
.settings-hint {
display: block;
font-size: 10px;
color: rgba(255, 255, 255, 0.35);
line-height: 1.4;
margin-top: 5px;
padding-left: 1px;
}
.form-group { .form-group {
option { option {
color: black; color: black;
@ -1889,45 +1907,54 @@ body {
.form-group label { .form-group label {
display: block; display: block;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 600;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.6);
margin-bottom: 4px; margin-bottom: 5px;
letter-spacing: 0.2px;
} }
.form-group input, .form-group input:not([type="checkbox"]):not([type="color"]),
.form-group select { .form-group select {
width: 100%; width: 100%;
padding: 8px 12px; padding: 9px 12px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px; border-radius: 10px;
color: #ffffff; color: #ffffff;
font-size: 12px; font-size: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.25s ease;
} }
.form-group input:focus, .form-group input:not([type="checkbox"]):hover,
.form-group select:hover {
border-color: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.06);
}
.form-group input:not([type="checkbox"]):not([type="color"]):focus,
.form-group select:focus { .form-group select:focus {
outline: none; outline: none;
border-color: rgba(var(--accent-rgb), 0.6); border-color: rgba(var(--accent-rgb), 0.5);
background: rgba(var(--accent-rgb), 0.05); background: rgba(var(--accent-rgb), 0.06);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12), 0 0 16px rgba(var(--accent-rgb), 0.08); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1), 0 0 12px rgba(var(--accent-rgb), 0.06);
} }
.form-group input::placeholder { .form-group input:not([type="checkbox"])::placeholder {
color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.25);
} }
/* Checkbox Styling */ /* Checkbox Styling — toggle switch */
.checkbox-label { .checkbox-label {
display: flex !important; display: flex !important;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
cursor: pointer; cursor: pointer;
font-size: 12px !important; font-size: 12px !important;
font-weight: 500;
margin-bottom: 0 !important; margin-bottom: 0 !important;
padding: 4px 0; padding: 6px 0;
transition: color 0.2s ease; transition: color 0.2s ease;
color: rgba(255, 255, 255, 0.8);
} }
.checkbox-label:hover { .checkbox-label:hover {
@ -1935,11 +1962,43 @@ body {
} }
.checkbox-label input[type="checkbox"] { .checkbox-label input[type="checkbox"] {
width: 16px !important; -webkit-appearance: none;
height: 16px !important; -moz-appearance: none;
appearance: none;
width: 34px !important;
height: 18px !important;
min-height: 0 !important;
margin: 0 !important; margin: 0 !important;
accent-color: rgb(var(--accent-light-rgb)); padding: 0 !important;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 18px;
cursor: pointer; cursor: pointer;
position: relative;
transition: all 0.3s ease;
flex-shrink: 0;
}
.checkbox-label input[type="checkbox"]::before {
content: '';
position: absolute;
height: 12px;
width: 12px;
left: 2px;
top: 2px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
transition: all 0.3s ease;
}
.checkbox-label input[type="checkbox"]:checked {
background: rgba(var(--accent-rgb), 0.5);
border-color: rgba(var(--accent-rgb), 0.5);
}
.checkbox-label input[type="checkbox"]:checked::before {
transform: translateX(16px);
background: rgb(var(--accent-light-rgb));
} }
/* Accent Color Selector */ /* Accent Color Selector */
@ -2033,9 +2092,19 @@ body {
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.2s ease;
border: none; border: 1px solid rgba(255, 255, 255, 0.1);
white-space: nowrap; white-space: nowrap;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.8);
}
.test-button:hover,
.detect-button:hover {
background: rgba(var(--accent-rgb), 0.15);
border-color: rgba(var(--accent-rgb), 0.3);
color: rgb(var(--accent-light-rgb));
transform: translateY(-1px);
} }
/* ===== QUALITY PROFILE STYLES ===== */ /* ===== QUALITY PROFILE STYLES ===== */
@ -2325,21 +2394,28 @@ body {
/* Save Button - gradient with glow */ /* Save Button - gradient with glow */
.save-button { .save-button {
background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb))); background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
border: none; border: 1.5px solid rgba(255, 255, 255, 0.15);
border-radius: 16px; border-radius: 12px;
color: #000000; color: #000000;
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
padding: 12px 32px; padding: 10px 28px;
cursor: pointer; cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3); box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
letter-spacing: 0.3px;
backdrop-filter: blur(12px);
position: relative;
} }
.save-button:hover { .save-button:hover {
background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), #22e968); background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
transform: translateY(-1px); transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.4); box-shadow: 0 6px 28px rgba(var(--accent-rgb), 0.5), 0 3px 10px rgba(0, 0, 0, 0.25);
}
.save-button:active {
transform: translateY(0) scale(0.97);
} }
.settings-actions { .settings-actions {