diff --git a/docs/redesign/README.md b/docs/redesign/README.md index e08d177..91b05ab 100644 --- a/docs/redesign/README.md +++ b/docs/redesign/README.md @@ -11,3 +11,5 @@ Run the frontend with `cd web && bun install --frozen-lockfile && bun run dev`. The chromatic artwork material, artist accents and rounded controls have been restored following visual feedback. The drop button has a centered row beneath the waveform, no arrow, and a 44px minimum height. Chart selectors have dedicated clearance on short mobile screens. The player now uses one waveform-aligned action console on desktop and mobile, with drop centered. A track without detected drops keeps that control disabled to preserve the layout. Primary controls use pl8list's public Pico lime colors (`#a5d601`, hover `#b2e51a`); artist colors still drive the artwork and waveform. Checked desktop and short-mobile layouts with chart selectors visible; the synthetic Chromium fixture reported no page errors. + +Control-row refinement: removed the enclosing panel, aligned icons with their labels/counts, and replaced the solid drop fill with a subdued lime outline. The row retains 48px control heights. Updated desktop/mobile Chromium fixture screenshots; build and TypeScript checks pass. diff --git a/docs/redesign/desktop.png b/docs/redesign/desktop.png index f767f41..c787659 100644 Binary files a/docs/redesign/desktop.png and b/docs/redesign/desktop.png differ diff --git a/docs/redesign/mobile.png b/docs/redesign/mobile.png index 42fb6b0..41690e7 100644 Binary files a/docs/redesign/mobile.png and b/docs/redesign/mobile.png differ diff --git a/docs/redesign/settings.png b/docs/redesign/settings.png index a30c2be..a886684 100644 Binary files a/docs/redesign/settings.png and b/docs/redesign/settings.png differ diff --git a/docs/redesign/short-mobile.png b/docs/redesign/short-mobile.png index f6d67de..21bd1e1 100644 Binary files a/docs/redesign/short-mobile.png and b/docs/redesign/short-mobile.png differ diff --git a/web/src/style.css b/web/src/style.css index 493b2b1..38676de 100644 --- a/web/src/style.css +++ b/web/src/style.css @@ -1349,16 +1349,6 @@ body.zen .content { gap: 0.3rem; } .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) { .bar-end { gap: 0.45rem; } .bar-end .icon-btn, .avatar-btn { width: 2.75rem; height: 2.75rem; } @@ -1392,23 +1382,25 @@ button.danger:not(.link) { background: var(--danger); color: #111; } /* One listening console, aligned to the waveform on every screen. */ .content .actions { position: relative; inset: auto; translate: none; transform: none; - width: 100%; display: grid; grid-template-columns: 1fr 1fr 1.6fr 1fr 1fr; - align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.75rem; - border: 1px solid var(--line); border-radius: 16px; - background: #141416d9; backdrop-filter: blur(16px); + width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); + align-items: center; gap: 0.5rem; margin-top: 0.35rem; padding: 0.75rem 0 0; + border: none; border-top: 1px solid #ffffff26; border-radius: 0; + background: none; } -.content .act { min-width: 0; min-height: 56px; justify-content: center; gap: 0.25rem; border-radius: 8px; } -.content .act .ring { width: 2rem; height: 2rem; background: none; box-shadow: none; border: none; backdrop-filter: none; } -.content .act:hover { background: var(--glass); } +.content .act { min-width: 0; min-height: 48px; flex-direction: row; justify-content: center; gap: 0.4rem; border-radius: 999px; font-size: 0.85rem; color: var(--fg); } +.content .act .ring { width: 1.25rem; height: 1.25rem; background: none; box-shadow: none; border: none; backdrop-filter: none; } +.content .act svg { width: 1.15rem; height: 1.15rem; } +.content .act .n { min-height: 0; line-height: 1.2; text-shadow: none; } +.content .act:hover { background: #ffffff0d; } .content .act.like.on { color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); } .content .act.like.on .ring { color: inherit; background: none; } .content .actions .to-drop { margin: 0; min-width: 0; min-height: 48px; padding: 0.5rem; - border-radius: 10px; background: var(--accent); border: 1px solid transparent; - color: #111; justify-content: center; font: 600 1rem/1.2 var(--font); + border-radius: 999px; background: color-mix(in oklab, var(--accent) 8%, #121412); border: 1px solid color-mix(in oklab, var(--accent) 55%, #333); + color: var(--accent); justify-content: center; font: 600 1rem/1.2 var(--font); } -.content .actions .to-drop:hover { background: var(--accent-hover); } -.content .actions .to-drop:disabled { background: #292b28; border-color: var(--line); color: var(--muted); cursor: default; } +.content .actions .to-drop:hover { background: color-mix(in oklab, var(--accent) 18%, #121412); border-color: var(--accent); } +.content .actions .to-drop:disabled { background: #ffffff05; border-color: var(--line); color: var(--muted); cursor: default; } .content .time { gap: 0.5rem; } .byline .pill { min-height: 32px; padding: 0.3rem 0.7rem; border-radius: 8px; border-color: var(--line); background: #ffffff09; } body.zen .content .actions { display: none; } @@ -1418,7 +1410,8 @@ body.zen .content .actions { display: none; } } @media (max-width: 640px) { .content { margin-bottom: 4.5rem; } - .content .actions { padding: 0.45rem; gap: 0.25rem; margin-top: 0.5rem; } + .content .actions { padding: 0.5rem 0 0; gap: 0.25rem; margin-top: 0.25rem; } + .content .act { gap: 0.25rem; font-size: 0.75rem; } #up-next { bottom: max(0.8rem, env(safe-area-inset-bottom)); } #toast { bottom: calc(max(0.8rem, env(safe-area-inset-bottom)) + 4.6rem); } }