mirror of
https://github.com/narrrl/pl8list-rewind.git
synced 2026-11-13 17:17:03 +01:00
fix(ui issues)
This commit is contained in:
nvrl committed
1 parent
0a3b43a37a
commit
3b89fd792b
14 files changed
+86
-76
No files matched your search
@@ -141,7 +141,7 @@ export class Caustics {
|
||||
gl.uniform1f(u.uHue, look.hue);
|
||||
gl.uniform1f(u.uIri, look.iri);
|
||||
gl.uniform1f(u.uHeat, look.heat);
|
||||
gl.uniform1f(u.uAmount, c.amount * look.caustics * 0.22);
|
||||
gl.uniform1f(u.uAmount, c.amount * look.caustics * 0.65);
|
||||
gl.disable(gl.DEPTH_TEST);
|
||||
gl.depthMask(false);
|
||||
gl.bindVertexArray(this.vao);
|
||||
|
||||
+7
-10
@@ -265,25 +265,22 @@ void main() {
|
||||
// Looking through the surface bends the artwork like water does.
|
||||
vec2 bend = n.xy * (0.22 + 0.1 * uDrop) * uMorph;
|
||||
vec2 uv = 0.5 + vec2(vObj.x, -vObj.y) * 0.48 - vec2(bend.x, -bend.y) * 0.5;
|
||||
vec2 split = n.xy * (0.001 + 0.003 * uKick + 0.002 * uSnare) * uMorph;
|
||||
vec2 split = n.xy * (0.008 + 0.025 * uKick + 0.015 * uSnare + 0.01 * uGrowl * uBass) * uMorph;
|
||||
// Turned sideways the projection smears; blur it into flowing colour instead.
|
||||
float blur = 4.0 * pow(1.0 - abs(vObj.z), 3.0) * uMorph;
|
||||
vec3 art = vec3(texture(uArt, uv + split, blur).r, texture(uArt, uv, blur).g, texture(uArt, uv - split, blur).b);
|
||||
float luminance = dot(art, vec3(0.2126, 0.7152, 0.0722));
|
||||
vec3 trace = mix(vec3(luminance), art, 0.22);
|
||||
// Preserve the flat artwork during entry; blackened metal takes over as it morphs.
|
||||
art = mix(art, vec3(0.035, 0.038, 0.042) + trace * 0.22, uMorph);
|
||||
art = mix(art, smoothstep(0.0, 1.0, art), 0.6 * uDrop);
|
||||
|
||||
vec3 light = normalize(vec3(-0.5, 0.7, 0.6));
|
||||
float spec = pow(max(dot(n, normalize(light + v)), 0.0), mix(40.0, 140.0, uMetal)) * mix(0.35, 0.8, uMetal);
|
||||
// The hue sways around the accent but never leaves it, so the drop stays in the
|
||||
// card's colours.
|
||||
vec3 rim = hueRotate(mix(vec3(0.72), uAccent, 0.16), uHue + uIri * (fres + 0.5 * sin(uTime * 0.3)));
|
||||
vec3 rim = hueRotate(uAccent, uHue + uIri * (fres + 0.5 * sin(uTime * 0.3)));
|
||||
rim = mix(rim, vec3(1.0, 0.35, 0.1), uHeat * 0.6);
|
||||
// Oil-slick fringes: each channel cycles at its own phase across the edge, worn
|
||||
// over the accent, more for iridescent tracks.
|
||||
vec3 slick = 0.5 + 0.5 * cos(6.2831853 * (fres * 1.6 + vec3(0.0, 0.33, 0.67) + uTime * 0.05));
|
||||
rim = mix(rim, rim * 0.4 + slick * length(rim) * 0.75, 0.035 + 0.08 * uIri);
|
||||
rim = mix(rim, rim * 0.4 + slick * length(rim) * 0.75, 0.25 + 0.5 * uIri);
|
||||
// The fresnel per channel, red reaching in further than blue: a lens fringe.
|
||||
float nv = 1.0 - max(dot(n, v), 0.0);
|
||||
vec3 fresC = vec3(nv * nv * nv * mix(1.0, nv, -0.35), fres, nv * nv * nv * mix(1.0, nv, 0.35));
|
||||
@@ -293,13 +290,13 @@ void main() {
|
||||
// Out on a spike the liquid turns to ink, like ferrofluid: the artwork darkens and
|
||||
// the gloss takes over.
|
||||
vec3 col = art * mix(1.0, 0.45, fres * uMorph) * (1.0 - 0.6 * vSpike);
|
||||
col += rim * fresC * (0.3 + 0.35 * uKick + 0.15 * uDrop + 0.12 * uBass) * uMorph;
|
||||
col += mix(rim, vec3(1.0), 0.5) * edge * (0.15 + 0.45 * uKick + 0.25 * uDrop) * uMorph;
|
||||
col += rim * fresC * (0.65 + 0.9 * uKick + 0.5 * uDrop + 0.5 * uBass) * uMorph;
|
||||
col += mix(rim, vec3(1.0), 0.5) * edge * (0.3 + 1.2 * uKick + 0.8 * uDrop) * uMorph;
|
||||
col += spec * (1.0 + 0.8 * vSpike) * uMorph;
|
||||
// Gloss: a dark room lit by the accent from above, and one soft window. They stay
|
||||
// put while the surface turns under them, which is what makes a spin read.
|
||||
vec3 r = reflect(-v, n);
|
||||
vec3 env = mix(vec3(0.015), mix(vec3(0.5), uAccent * 0.5, 0.12), pow(smoothstep(-0.4, 1.0, r.y), 2.0));
|
||||
vec3 env = mix(vec3(0.015), uAccent * 0.5, pow(smoothstep(-0.4, 1.0, r.y), 2.0));
|
||||
env += 0.5 * smoothstep(0.92, 0.985, dot(r, normalize(vec3(-0.5, 0.7, 0.5))));
|
||||
col += env * (0.1 + 0.5 * fres + 0.5 * vSpike) * uMorph;
|
||||
// The icon sits on a disc of frosted glass, painted onto the surface so it turns
|
||||
|
||||
+1
-1
@@ -283,7 +283,7 @@ export class Card {
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
const data = this.track.waveform || [];
|
||||
const max = Math.max(1, ...data);
|
||||
const accent = getComputedStyle(canvas).getPropertyValue("--accent").trim() || "#e9e8e3";
|
||||
const accent = getComputedStyle(canvas).getPropertyValue("--card-accent").trim() || "#ff4d6d";
|
||||
const base = Math.round(h * (1 - MIRROR)) - 1;
|
||||
const below = h - base - 2;
|
||||
const level = (i: number) => (data.length ? data[Math.floor((i / bars) * data.length)] / max : 0.15);
|
||||
|
||||
+2
-2
@@ -50,8 +50,8 @@ async function compute(src: string): Promise<string | null> {
|
||||
|
||||
const BACKDROP = 64; // px square; it is shown blurred, so this is plenty
|
||||
const BLUR = 2; // px each side, per box blur pass at that size
|
||||
const DIM = 0.16;
|
||||
const SATURATE = 0.15;
|
||||
const DIM = 0.45;
|
||||
const SATURATE = 1.3;
|
||||
|
||||
/// The card's background from the artist image, as a data URL: cropped square,
|
||||
/// blurred and darkened here, once, as `.bg`'s CSS filter would do on every frame.
|
||||
|
||||
+1
-1
@@ -1319,7 +1319,7 @@ function signedIn(user: User, pl8list?: Pl8Status): void {
|
||||
startEl.classList.remove("welcome");
|
||||
accountBtn.textContent = guest ? "sign in" : (user.name || user.handle)[0]?.toUpperCase() ?? "?";
|
||||
accountBtn.classList.toggle("guest", guest);
|
||||
accountBtn.style.backgroundColor = guest ? "var(--glass-strong)" : "var(--accent)";
|
||||
accountBtn.style.backgroundColor = guest ? "var(--glass-strong)" : accentForName(user.handle);
|
||||
accountBtn.title = guest ? "listening as a guest: sign in, or forget me" : `@${user.handle}`;
|
||||
$("account-handle").textContent = guest ? "listening as a guest" : `@${user.handle}`;
|
||||
$("delete-handle").textContent = user.handle;
|
||||
|
||||
+68
-57
@@ -5,21 +5,20 @@
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #090a0b;
|
||||
--bg: #000;
|
||||
--fg: #f2f2f2;
|
||||
--muted: #b5b5b8;
|
||||
--faint: #96969a;
|
||||
--accent: #e9e8e3;
|
||||
--danger: #ff8b8b;
|
||||
--panel: #141517;
|
||||
--accent: #ff4d6d;
|
||||
--panel: rgba(18, 18, 20, 0.94);
|
||||
--line: #ffffff1f;
|
||||
--line-strong: #333;
|
||||
--scrim: #000b;
|
||||
--glass: rgba(255, 255, 255, 0.1);
|
||||
--glass-strong: rgba(255, 255, 255, 0.2);
|
||||
--radius-s: 4px;
|
||||
--radius-m: 6px;
|
||||
--radius-l: 6px;
|
||||
--radius-s: 8px;
|
||||
--radius-m: 14px;
|
||||
--radius-l: 18px;
|
||||
--shadow: 0 16px 40px #000a;
|
||||
--font: Barlow, system-ui, sans-serif;
|
||||
--font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
|
||||
@@ -50,7 +49,7 @@ button {
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 5px;
|
||||
border-radius: 999px;
|
||||
padding: 0.35em 0.9em;
|
||||
}
|
||||
|
||||
@@ -94,7 +93,7 @@ body.zen :is(#discovery-options, #active-filters) { display: none; }
|
||||
display: flex;
|
||||
gap: 0.2rem;
|
||||
padding: 0.2rem;
|
||||
border-radius: 5px;
|
||||
border-radius: 999px;
|
||||
background: var(--glass);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
@@ -151,7 +150,7 @@ body.zen :is(#discovery-options, #active-filters) { display: none; }
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: linear-gradient(90deg, var(--fg) var(--v), #ffffff30 var(--v)) center / 100% 4px no-repeat;
|
||||
border-radius: 5px;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#volume-slider::-webkit-slider-thumb {
|
||||
@@ -251,7 +250,7 @@ body.zen :is(#discovery-options, #active-filters) { display: none; }
|
||||
flex: 1 1 10rem;
|
||||
min-width: 0;
|
||||
padding: 0.55em 0.9em;
|
||||
border-radius: 5px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line-strong);
|
||||
background: #111;
|
||||
}
|
||||
@@ -262,7 +261,7 @@ body.zen :is(#discovery-options, #active-filters) { display: none; }
|
||||
.modes input { position: absolute; opacity: 0; pointer-events: none; }
|
||||
.modes label:has(input) {
|
||||
padding: 0.3em 0.9em;
|
||||
border-radius: 5px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #ffffff40;
|
||||
font-size: 0.85rem;
|
||||
transition: background var(--fast);
|
||||
@@ -278,7 +277,7 @@ body.zen :is(#discovery-options, #active-filters) { display: none; }
|
||||
width: 2.6rem;
|
||||
height: 1.5rem;
|
||||
margin: 0;
|
||||
border-radius: 5px;
|
||||
border-radius: 999px;
|
||||
background: #ffffff26;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@@ -439,7 +438,7 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
|
||||
position: absolute;
|
||||
inset: -40px;
|
||||
background: #111 center / cover no-repeat;
|
||||
filter: blur(40px) brightness(0.16) saturate(0.15);
|
||||
filter: blur(40px) brightness(0.45) saturate(1.3);
|
||||
}
|
||||
/* Already blurred and darkened (color.ts): a CSS blur over the whole screen would
|
||||
be worked out again whenever anything on top of it moves. */
|
||||
@@ -450,7 +449,7 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(55% 40% at 50% 40%, color-mix(in oklab, var(--card-accent) 55%, transparent), transparent 70%);
|
||||
opacity: calc(0.03 + var(--energy) * 0.07);
|
||||
opacity: calc(0.18 + var(--energy) * 0.55);
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
@@ -506,11 +505,11 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
|
||||
.card.liquid .art::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -25%;
|
||||
inset: -65%;
|
||||
background: radial-gradient(closest-side, color-mix(in oklab, var(--card-accent) 83%, transparent), transparent);
|
||||
/* Pulses through transform and opacity only, so it never has to be painted again. */
|
||||
transform: scale(calc(0.87 + var(--energy) * 0.13));
|
||||
opacity: calc(0.06 + var(--energy) * 0.12);
|
||||
opacity: calc(0.34 + var(--energy) * 0.66);
|
||||
will-change: transform, opacity;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -611,27 +610,27 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
|
||||
gap: 0.3em;
|
||||
font-size: 0.75rem;
|
||||
padding: 0.2em 0.75em 0.2em 0.55em;
|
||||
border-radius: 5px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #ffffff40;
|
||||
background: transparent;
|
||||
transition: background var(--fast), border-color var(--fast);
|
||||
}
|
||||
.pill svg { width: 0.95em; height: 0.95em; }
|
||||
.pill:hover { background: var(--glass); }
|
||||
.follow.on { background: var(--accent); color: #111; border-color: transparent; }
|
||||
.follow.on { background: color-mix(in oklab, var(--card-accent) 25%, transparent); border-color: transparent; }
|
||||
|
||||
.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
|
||||
.chips span {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.1em 0.6em;
|
||||
border-radius: 5px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.chips .free { background: #1f7a4d; }
|
||||
.chips .new { background: var(--fg); color: #000; font-weight: 700; }
|
||||
.chips span:first-child { background: #252729; }
|
||||
.chips span:first-child { background: color-mix(in oklab, var(--card-accent) 35%, transparent); }
|
||||
.chips .preview { background: #6a4b16; }
|
||||
.chips .tag { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
|
||||
.chips .tag { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--card-accent) 60%, transparent); }
|
||||
|
||||
.desc {
|
||||
margin: 0;
|
||||
@@ -791,7 +790,7 @@ body.no-wave-comments :is(.wave-comments, .wc-bubble), body.zen :is(.wave-commen
|
||||
margin-right: auto;
|
||||
padding: 0.05em 0.6em;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 5px;
|
||||
border-radius: 999px;
|
||||
background: none;
|
||||
color: var(--fg);
|
||||
font-size: inherit;
|
||||
@@ -889,7 +888,7 @@ body.no-wave-comments :is(.wave-comments, .wc-bubble), body.zen :is(.wave-commen
|
||||
bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.4rem);
|
||||
transform: translate(-50%, 1rem);
|
||||
padding: 0.6em 1.1em;
|
||||
border-radius: 5px;
|
||||
border-radius: 999px;
|
||||
background: #222e;
|
||||
border: 1px solid #ffffff22;
|
||||
font-size: 0.9rem;
|
||||
@@ -1010,7 +1009,7 @@ body.zen #up-next { display: none; }
|
||||
}
|
||||
.start-welcome a { color: inherit; }
|
||||
/* A guest's account button says what it is for. */
|
||||
.avatar-btn.guest { width: auto; padding: 0 0.9rem; border-radius: 5px; font-weight: 600; font-size: 0.85rem; color: var(--fg); }
|
||||
.avatar-btn.guest { width: auto; padding: 0 0.9rem; border-radius: 999px; font-weight: 600; font-size: 0.85rem; color: var(--fg); }
|
||||
|
||||
/* Radio sheet: a bottom sheet on phones, a centred box elsewhere. */
|
||||
#station {
|
||||
@@ -1144,7 +1143,10 @@ button.primary:disabled { opacity: 0.35; cursor: default; }
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1rem;
|
||||
background: var(--bg);
|
||||
background:
|
||||
radial-gradient(60rem 40rem at 20% 10%, #ff4d6d33, transparent 60%),
|
||||
radial-gradient(50rem 40rem at 90% 90%, #4d6dff2e, transparent 60%),
|
||||
#050507;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
@@ -1225,7 +1227,7 @@ button.primary:disabled { opacity: 0.35; cursor: default; }
|
||||
width: 2.6rem;
|
||||
height: 0.3rem;
|
||||
margin: 0.55rem auto 0;
|
||||
border-radius: 5px;
|
||||
border-radius: 999px;
|
||||
background: #fff5;
|
||||
}
|
||||
.content { width: calc(100vw - 2rem); margin-bottom: 6.5rem; gap: 0.6rem; }
|
||||
@@ -1269,7 +1271,7 @@ body.zen .content { gap: 0.3rem; }
|
||||
.bar-end {
|
||||
gap: 0.15rem;
|
||||
padding: 0.25rem;
|
||||
border-radius: 5px;
|
||||
border-radius: 999px;
|
||||
background: var(--glass);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
@@ -1333,38 +1335,47 @@ body.zen .content { gap: 0.3rem; }
|
||||
.wc-bubble::before { display: none; }
|
||||
}
|
||||
|
||||
/* Monochrome soundsystem surfaces. Keep the controls still around the sculpture. */
|
||||
.logo, .start-logo, .login-box h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.025em; }
|
||||
.title { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: 0.015em; }
|
||||
.time, .counts, .chips, .station-kicker, .up-next-label { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; }
|
||||
#mode-tabs, .bar-end, #up-next { background: var(--panel); border: 1px solid var(--line); backdrop-filter: none; }
|
||||
button { min-height: 2.75rem; }
|
||||
button:hover { border-color: #737578; }
|
||||
button:active { filter: brightness(0.85); }
|
||||
button:disabled { cursor: default; opacity: 0.45; }
|
||||
.icon-btn { min-width: 2.75rem; min-height: 2.75rem; }
|
||||
.chips span { border-radius: 3px; background: #202225; color: var(--fg); border: 1px solid var(--line); }
|
||||
.chips span.free, .chips span.new { background: #252729; color: var(--fg); }
|
||||
.act .ring { background: #191b1d; border: 1px solid var(--line); backdrop-filter: none; }
|
||||
.art { box-shadow: 0 12px 35px #0009, 0 0 0 1px #ffffff24; scale: 1; }
|
||||
/* Fade the canvas spill before the title or navigation, including the caustics. */
|
||||
.liquid-canvas { mask-image: linear-gradient(transparent 2%, #000 18% 72%, transparent 88%); }
|
||||
.card.liquid .art { margin-bottom: 2.8rem; }
|
||||
.sheet, .station-box { box-shadow: 0 20px 80px #000b; }
|
||||
.track-row { padding-block: 0.7rem; }
|
||||
.login-box button[type=submit], .help-box button { color: #111; }
|
||||
.link.danger, #login-error { color: var(--danger); }
|
||||
button.danger:not(.link) { background: var(--danger); color: #111; }
|
||||
#login input { border-radius: var(--radius-s); }
|
||||
/* Color belongs to the artist; controls keep their own clear spacing. */
|
||||
.title { font-family: var(--font-display); line-height: 1.08; }
|
||||
.card.liquid .art { margin-bottom: 2rem; }
|
||||
.byline { gap: 0.6rem; row-gap: 0.65rem; }
|
||||
.bar-end { gap: 0.45rem; }
|
||||
.bar-end .icon-btn, .avatar-btn { flex-shrink: 0; border-radius: 50%; }
|
||||
#discovery-options { top: 4.8rem; }
|
||||
#active-filters { top: 7.8rem; }
|
||||
.time { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.75rem 0.5rem; }
|
||||
.time .cur { grid-column: 1; grid-row: 1; justify-self: start; }
|
||||
.time .counts { grid-column: 2; grid-row: 1; text-align: center; overflow-wrap: anywhere; }
|
||||
.time .dur { grid-column: 3; grid-row: 1; justify-self: end; }
|
||||
.time .to-drop {
|
||||
grid-column: 1 / -1; grid-row: 2; justify-self: center;
|
||||
margin: 0.25rem 0 0; min-width: 8rem; min-height: 44px;
|
||||
justify-content: center; padding: 0.5rem 1.5rem;
|
||||
font: 600 1rem/1.2 var(--font); border-radius: 999px;
|
||||
background: color-mix(in oklab, var(--card-accent) 18%, #111);
|
||||
border-color: color-mix(in oklab, var(--card-accent) 65%, #555);
|
||||
color: var(--fg);
|
||||
}
|
||||
.time .to-drop:hover { background: color-mix(in oklab, var(--card-accent) 35%, #111); color: var(--fg); }
|
||||
@media (max-width: 640px) {
|
||||
#mode-tabs button { padding-inline: 0.7em; }
|
||||
.content { margin-top: 3rem; }
|
||||
.bar-end { gap: 0.45rem; }
|
||||
.bar-end .icon-btn, .avatar-btn { width: 2.75rem; height: 2.75rem; }
|
||||
.art { width: min(14rem, 29dvh, 58vw); }
|
||||
.card.liquid .art { margin-bottom: 1.8rem; }
|
||||
.actions { gap: 0.5rem; }
|
||||
.card.liquid .art { margin-bottom: 1.5rem; }
|
||||
.content { margin-top: 2.5rem; }
|
||||
#discovery-options { top: calc(max(0.6rem, env(safe-area-inset-top)) + 6.4rem); gap: 0.75rem; }
|
||||
#active-filters { top: calc(max(0.6rem, env(safe-area-inset-top)) + 9.2rem); }
|
||||
}
|
||||
@media (max-width: 640px) and (max-height: 700px) {
|
||||
.art { width: min(10rem, 22dvh, 48vw); }
|
||||
.card.liquid .art { margin-bottom: 1.2rem; }
|
||||
.art { width: min(9rem, 21dvh, 48vw); }
|
||||
.card.liquid .art { margin-bottom: 1rem; }
|
||||
.content { gap: 0.25rem; }
|
||||
}
|
||||
/* Chart selectors occupy a third header row on phones. */
|
||||
@media (max-width: 640px) {
|
||||
body:has(#discovery-options:not([hidden])) .content { margin-top: 7rem; }
|
||||
body:has(#discovery-options:not([hidden])) .art { width: min(12rem, 25dvh, 52vw); }
|
||||
}
|
||||
@media (max-width: 640px) and (max-height: 700px) {
|
||||
body:has(#discovery-options:not([hidden])) .art { width: min(8rem, 18dvh, 44vw); }
|
||||
}
|
||||
Reference in new issue
Block a user