-
🧭
-
-
Adventurousness
-
Balanced
-
+
+
🧭
+
+ Adventurousness
+ Balanced
-
- Safe
-
- Adventurous
-
-
Pushes popular artists down so obscure picks surface in your recommendations
+
Safe
+
+
Adventurous
+
30%
diff --git a/webui/static/discover.js b/webui/static/discover.js
index e43ce8d9..97fad8d0 100644
--- a/webui/static/discover.js
+++ b/webui/static/discover.js
@@ -31,11 +31,14 @@ function _advState(v) {
return { word: 'Deep cuts only', icon: '🔮' };
}
function onAdvDialInput(value) {
- const s = _advState(parseFloat(value));
+ const v = parseFloat(value);
+ const s = _advState(v);
const stateEl = document.getElementById('adv-dial-state');
if (stateEl) stateEl.textContent = s.word;
const iconEl = document.getElementById('adv-dial-icon');
if (iconEl) iconEl.textContent = s.icon;
+ const valEl = document.getElementById('adv-dial-val');
+ if (valEl) valEl.textContent = Math.round(v * 100) + '%';
}
let _advCommitTimer = null;
function onAdvDialCommit(value) {
diff --git a/webui/static/style.css b/webui/static/style.css
index f305353f..b11d7834 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -35167,52 +35167,58 @@ div.artist-hero-badge {
Gradient slider (Safe green → accent → hot orange) with a glowing thumb, a rotating
compass that swaps with the level, and a live state word. Syncs with Settings → Discovery. */
.adv-dial {
+ display: flex; align-items: center; gap: 16px;
+ max-width: 880px;
margin: 0 0 26px;
- padding: 16px 22px;
- border-radius: 18px;
- background: linear-gradient(135deg, rgba(var(--accent-rgb),0.10), rgba(255,255,255,0.02));
- border: 1px solid rgba(255,255,255,0.07);
- box-shadow: 0 10px 34px rgba(0,0,0,0.28);
- display: grid;
- grid-template-columns: auto 1fr;
- grid-template-areas: "head slider" "head hint";
- align-items: center;
- column-gap: 26px; row-gap: 4px;
+ padding: 13px 20px;
+ border-radius: 16px;
+ background: linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(255,255,255,0.02));
+ border: 1px solid rgba(255,255,255,0.08);
+ box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
-.adv-dial-head { grid-area: head; display: flex; align-items: center; gap: 14px; min-width: 188px; }
.adv-dial-icon {
- width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
- display: flex; align-items: center; justify-content: center; font-size: 25px;
+ width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
+ display: flex; align-items: center; justify-content: center; font-size: 22px;
background: rgba(var(--accent-rgb),0.16);
box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.22);
transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.adv-dial:hover .adv-dial-icon { transform: rotate(-14deg) scale(1.06); }
-.adv-dial-title { font-size: 15px; font-weight: 700; color: #fff; }
-.adv-dial-state { font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 2px; transition: color 0.2s; }
-.adv-dial-slider-wrap { grid-area: slider; display: flex; align-items: center; gap: 14px; }
-.adv-dial-end { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.4); white-space: nowrap; }
-.adv-dial-hint { grid-area: hint; font-size: 12px; color: rgba(255,255,255,0.45); }
+.adv-dial-label { display: flex; flex-direction: column; min-width: 142px; flex-shrink: 0; }
+.adv-dial-title { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; }
+.adv-dial-state { font-size: 12px; font-weight: 600; color: var(--accent); margin-top: 1px; transition: color 0.2s; }
+.adv-dial-end { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.4); white-space: nowrap; flex-shrink: 0; }
+.adv-dial-val { min-width: 44px; text-align: right; font-size: 14px; font-weight: 800; color: var(--accent); flex-shrink: 0; }
+/* Track styled via the pseudo-elements (the input's own background does NOT render as the track when
+ appearance is none on Chromium — that was the invisible-track bug). */
.adv-dial-slider {
- flex: 1; height: 8px; border-radius: 5px; cursor: pointer;
- -webkit-appearance: none; appearance: none; outline: none;
+ flex: 1; min-width: 100px; height: 8px; cursor: pointer;
+ -webkit-appearance: none; appearance: none; outline: none; background: transparent;
+}
+.adv-dial-slider::-webkit-slider-runnable-track {
+ height: 8px; border-radius: 5px;
+ background: linear-gradient(90deg, #1DB954 0%, var(--accent) 52%, #ff7a45 100%);
+}
+.adv-dial-slider::-moz-range-track {
+ height: 8px; border-radius: 5px;
background: linear-gradient(90deg, #1DB954 0%, var(--accent) 52%, #ff7a45 100%);
}
.adv-dial-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
- width: 22px; height: 22px; border-radius: 50%; background: #fff;
- box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.28), 0 3px 10px rgba(0,0,0,0.45);
+ width: 20px; height: 20px; margin-top: -6px; border-radius: 50%; background: #fff;
+ box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.28), 0 3px 9px rgba(0,0,0,0.45);
cursor: grab; transition: transform 0.15s, box-shadow 0.2s;
}
-.adv-dial-slider::-webkit-slider-thumb:hover { transform: scale(1.16); box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0.32), 0 4px 14px rgba(0,0,0,0.55); }
+.adv-dial-slider::-webkit-slider-thumb:hover { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0.34), 0 4px 12px rgba(0,0,0,0.55); }
.adv-dial-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.adv-dial-slider::-moz-range-thumb {
- width: 22px; height: 22px; border-radius: 50%; border: none; background: #fff;
- box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.28), 0 3px 10px rgba(0,0,0,0.45); cursor: grab;
+ width: 20px; height: 20px; border-radius: 50%; border: none; background: #fff;
+ box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.28), 0 3px 9px rgba(0,0,0,0.45); cursor: grab;
}
@media (max-width: 760px) {
- .adv-dial { grid-template-columns: 1fr; grid-template-areas: "head" "slider" "hint"; row-gap: 12px; }
- .adv-dial-head { min-width: 0; }
+ .adv-dial { flex-wrap: wrap; gap: 10px 14px; }
+ .adv-dial-label { min-width: 0; }
+ .adv-dial-slider { flex: 1 1 100%; order: 5; }
}
/* Watchlist toggle on recommended-artist .ya-cards — corner pill, appears on hover,