Claudio Ortolina
880 lines
25 KiB
HTML
880 lines
25 KiB
HTML
<style>
|
|
:root {
|
|
--z-50: #fafafa;
|
|
--z-100: #f4f4f5;
|
|
--z-200: #e4e4e7;
|
|
--z-300: #d4d4d8;
|
|
--z-400: #a1a1aa;
|
|
--z-500: #71717a;
|
|
--z-600: #52525b;
|
|
--z-700: #3f3f46;
|
|
--z-800: #27272a;
|
|
--z-900: #18181b;
|
|
--z-950: #09090b;
|
|
--blue-500: #3b82f6;
|
|
--blue-600: #2563eb;
|
|
--blue-700: #1d4ed8;
|
|
--blue-soft: #dbeafe;
|
|
|
|
--surface: #ffffff;
|
|
--surface-muted: var(--z-50);
|
|
--surface-elevated: var(--z-100);
|
|
--border-c: var(--z-200);
|
|
--text: var(--z-900);
|
|
--text-muted: var(--z-500);
|
|
--text-subtle: var(--z-400);
|
|
--primary: var(--blue-600);
|
|
--primary-soft-bg: var(--blue-soft);
|
|
--primary-soft-text: var(--blue-700);
|
|
--accent-row: #eff6ff;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--surface: var(--z-900);
|
|
--surface-muted: var(--z-800);
|
|
--surface-elevated: #1f1f22;
|
|
--border-c: var(--z-700);
|
|
--text: var(--z-100);
|
|
--text-muted: var(--z-400);
|
|
--text-subtle: var(--z-500);
|
|
--primary: #60a5fa;
|
|
--primary-soft-bg: rgba(59, 130, 246, 0.15);
|
|
--primary-soft-text: #93c5fd;
|
|
--accent-row: rgba(59, 130, 246, 0.08);
|
|
}
|
|
}
|
|
|
|
.ml-sheet {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border-c);
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
font-size: 0.82rem;
|
|
color: var(--text);
|
|
font-family:
|
|
ui-sans-serif,
|
|
system-ui,
|
|
-apple-system,
|
|
sans-serif;
|
|
box-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 0.04),
|
|
0 8px 24px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.ml-sheet-header {
|
|
padding: 0.9rem 1rem;
|
|
border-bottom: 1px solid var(--border-c);
|
|
background: var(--surface);
|
|
}
|
|
.ml-title-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.ml-title {
|
|
font-weight: 600;
|
|
font-size: 0.98rem;
|
|
color: var(--text);
|
|
line-height: 1.2;
|
|
}
|
|
.ml-subtitle {
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
margin-top: 0.15rem;
|
|
}
|
|
.ml-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.ml-picker {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
padding: 0.35rem 0.6rem 0.35rem 0.5rem;
|
|
background: var(--surface-muted);
|
|
border: 1px solid var(--border-c);
|
|
border-radius: 8px;
|
|
font-size: 0.76rem;
|
|
color: var(--text);
|
|
cursor: default;
|
|
white-space: nowrap;
|
|
}
|
|
.ml-picker svg {
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
.ml-picker-label {
|
|
color: var(--text-muted);
|
|
font-size: 0.7rem;
|
|
}
|
|
.ml-picker-value {
|
|
font-weight: 500;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.ml-picker-caret {
|
|
color: var(--text-subtle);
|
|
margin-left: 0.1rem;
|
|
}
|
|
|
|
.ml-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.35rem;
|
|
padding: 0.4rem 0.7rem;
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
border-radius: 8px;
|
|
border: 1px solid transparent;
|
|
cursor: default;
|
|
white-space: nowrap;
|
|
font-family: inherit;
|
|
}
|
|
.ml-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.ml-btn-solid {
|
|
background: var(--primary);
|
|
color: white;
|
|
border-color: var(--primary);
|
|
}
|
|
.ml-btn-soft {
|
|
background: var(--primary-soft-bg);
|
|
color: var(--primary-soft-text);
|
|
border-color: transparent;
|
|
}
|
|
.ml-btn-outline {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border-color: var(--border-c);
|
|
}
|
|
.ml-btn-ghost {
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
}
|
|
.ml-btn.icon-only {
|
|
padding: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
.ml-btn.disabled {
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.ml-btn-group {
|
|
display: inline-flex;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
/* Medium header */
|
|
.ml-medium-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
padding: 0.65rem 1rem;
|
|
background: var(--surface-muted);
|
|
border-bottom: 1px solid var(--border-c);
|
|
}
|
|
.ml-medium-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
font-weight: 600;
|
|
font-size: 0.82rem;
|
|
}
|
|
.ml-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
padding: 0.1rem 0.45rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border-c);
|
|
border-radius: 999px;
|
|
font-size: 0.65rem;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
/* Checkbox */
|
|
.ml-chk {
|
|
appearance: none;
|
|
width: 15px;
|
|
height: 15px;
|
|
border: 1.5px solid var(--z-400);
|
|
border-radius: 4px;
|
|
position: relative;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
background: var(--surface);
|
|
flex-shrink: 0;
|
|
}
|
|
.ml-chk.checked {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
}
|
|
.ml-chk.checked::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 3px;
|
|
top: 0px;
|
|
width: 5px;
|
|
height: 9px;
|
|
border: solid white;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/* Track row */
|
|
.ml-track {
|
|
padding: 0.55rem 1rem 0.55rem 1rem;
|
|
border-bottom: 1px solid var(--border-c);
|
|
display: grid;
|
|
grid-template-columns: 15px 22px 1fr auto;
|
|
gap: 0.6rem;
|
|
align-items: center;
|
|
font-size: 0.8rem;
|
|
}
|
|
.ml-track:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.ml-track.selected {
|
|
background: var(--accent-row);
|
|
}
|
|
.ml-track-num {
|
|
color: var(--text-subtle);
|
|
font-size: 0.72rem;
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.ml-track-title {
|
|
color: var(--text);
|
|
}
|
|
.ml-track-dur {
|
|
color: var(--text-muted);
|
|
font-size: 0.72rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Sticky selection bar */
|
|
.ml-sticky {
|
|
position: sticky;
|
|
bottom: 0;
|
|
background: var(--surface);
|
|
border-top: 1px solid var(--border-c);
|
|
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
|
|
padding: 0.65rem 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
}
|
|
.ml-sticky-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 1.2;
|
|
}
|
|
.ml-sticky-count {
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
.ml-sticky-meta {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.ml-body {
|
|
max-height: 520px;
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
/* Viewport frames */
|
|
.viewport-frame {
|
|
border: 1px solid var(--border-c);
|
|
border-radius: 14px;
|
|
background: var(--surface-muted);
|
|
padding: 0.8rem;
|
|
}
|
|
.viewport-label {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.viewport-label .dim {
|
|
color: var(--text-subtle);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.grid-two {
|
|
display: grid;
|
|
grid-template-columns: 1fr 380px;
|
|
gap: 1.5rem;
|
|
align-items: start;
|
|
}
|
|
@media (max-width: 1000px) {
|
|
.grid-two {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.annotation {
|
|
background: var(--primary-soft-bg);
|
|
color: var(--primary-soft-text);
|
|
border-left: 3px solid var(--primary);
|
|
padding: 0.6rem 0.8rem;
|
|
font-size: 0.78rem;
|
|
margin-top: 0.75rem;
|
|
border-radius: 4px;
|
|
}
|
|
.annotation strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hierarchy-diagram {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border-c);
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
margin-top: 1rem;
|
|
font-size: 0.82rem;
|
|
}
|
|
.h-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.4rem 0;
|
|
}
|
|
.h-label {
|
|
font-weight: 600;
|
|
width: 130px;
|
|
color: var(--text);
|
|
}
|
|
.h-arrow {
|
|
color: var(--text-subtle);
|
|
}
|
|
.h-scope {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Mobile-specific overrides on narrow viewport mock */
|
|
.m-narrow .ml-title-row {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.m-narrow .ml-title-row .ml-actions-top {
|
|
justify-content: space-between;
|
|
}
|
|
.m-narrow .ml-picker {
|
|
flex: 1;
|
|
justify-content: flex-start;
|
|
}
|
|
.m-narrow .ml-btn-row {
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.m-narrow .ml-btn-row .ml-picker {
|
|
flex: 1;
|
|
}
|
|
.m-narrow .ml-btn-row .ml-btn-solid {
|
|
flex: 0 0 auto;
|
|
}
|
|
</style>
|
|
|
|
<h2>Option A — v2, app-styled + mobile layout + explicit "Scrobble release"</h2>
|
|
<p class="subtitle">
|
|
Addresses the three iteration asks: using the app's zinc/blue palette and
|
|
Fluxon button variants, dedicated mobile layout, and a clear top-level
|
|
"Scrobble release" action.
|
|
</p>
|
|
|
|
<div class="hierarchy-diagram">
|
|
<div
|
|
style="
|
|
font-size: 0.72rem;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.4rem;
|
|
"
|
|
>
|
|
Action hierarchy
|
|
</div>
|
|
<div class="h-row">
|
|
<span class="h-label">Header action</span>
|
|
<span class="h-arrow">→</span>
|
|
<span class="ml-btn ml-btn-solid" style="padding: 0.2rem 0.5rem"
|
|
><svg viewBox="0 0 20 20" fill="currentColor" width="12" height="12">
|
|
<path d="M6 4l10 6-10 6V4z" />
|
|
</svg>
|
|
Scrobble release</span
|
|
>
|
|
<span class="h-scope">all tracks, one submission</span>
|
|
</div>
|
|
<div class="h-row">
|
|
<span class="h-label">Per-medium action</span>
|
|
<span class="h-arrow">→</span>
|
|
<span class="ml-btn ml-btn-soft" style="padding: 0.2rem 0.5rem"
|
|
><svg viewBox="0 0 20 20" fill="currentColor" width="12" height="12">
|
|
<path d="M6 4l10 6-10 6V4z" />
|
|
</svg>
|
|
Scrobble disc</span
|
|
>
|
|
<span class="h-scope">tracks of that medium</span>
|
|
</div>
|
|
<div class="h-row">
|
|
<span class="h-label">Selection action</span>
|
|
<span class="h-arrow">→</span>
|
|
<span class="ml-btn ml-btn-solid" style="padding: 0.2rem 0.5rem"
|
|
><svg viewBox="0 0 20 20" fill="currentColor" width="12" height="12">
|
|
<path d="M6 4l10 6-10 6V4z" />
|
|
</svg>
|
|
Scrobble selected</span
|
|
>
|
|
<span class="h-scope"
|
|
>only ticked rows — appears only when something is ticked</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-two" style="margin-top: 1.5rem">
|
|
<!-- DESKTOP -->
|
|
<div>
|
|
<div class="viewport-label">
|
|
<span>Desktop · sheet width ~520px</span>
|
|
<span class="dim"
|
|
>Fluxon variants: solid primary / soft primary / outline</span
|
|
>
|
|
</div>
|
|
<div class="viewport-frame">
|
|
<div class="ml-sheet">
|
|
<div class="ml-sheet-header">
|
|
<div class="ml-title-row">
|
|
<div>
|
|
<div class="ml-title">Kid A Mnesia</div>
|
|
<div class="ml-subtitle">Radiohead · 2 CDs · 2021</div>
|
|
</div>
|
|
<div class="ml-actions">
|
|
<span class="ml-picker" title="Click to change">
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
width="14"
|
|
height="14"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .2.08.39.22.53l3 3a.75.75 0 101.06-1.06l-2.78-2.78V5z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span class="ml-picker-label">Finished at</span>
|
|
<span class="ml-picker-value">Now · Apr 22, 14:30</span>
|
|
<span class="ml-picker-caret">▾</span>
|
|
</span>
|
|
<button class="ml-btn ml-btn-solid">
|
|
<svg viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M6 4l10 6-10 6V4z" />
|
|
</svg>
|
|
Scrobble release
|
|
</button>
|
|
<button class="ml-btn ml-btn-outline icon-only" title="More">
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
width="14"
|
|
height="14"
|
|
>
|
|
<circle cx="10" cy="4" r="1.5" />
|
|
<circle cx="10" cy="10" r="1.5" />
|
|
<circle cx="10" cy="16" r="1.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ml-body">
|
|
<div class="ml-medium-header">
|
|
<div class="ml-medium-title">
|
|
<span class="ml-chk"></span>
|
|
Disc 1
|
|
<span class="ml-badge">CD</span>
|
|
</div>
|
|
<div class="ml-btn-group">
|
|
<button class="ml-btn ml-btn-soft">
|
|
<svg viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M6 4l10 6-10 6V4z" />
|
|
</svg>
|
|
Scrobble disc
|
|
</button>
|
|
<button class="ml-btn ml-btn-outline icon-only">
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
width="14"
|
|
height="14"
|
|
>
|
|
<circle cx="10" cy="4" r="1.5" />
|
|
<circle cx="10" cy="10" r="1.5" />
|
|
<circle cx="10" cy="16" r="1.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ml-track selected">
|
|
<span class="ml-chk checked"></span>
|
|
<span class="ml-track-num">1</span>
|
|
<span class="ml-track-title">How to Disappear Completely</span>
|
|
<span class="ml-track-dur">5:56</span>
|
|
</div>
|
|
<div class="ml-track">
|
|
<span class="ml-chk"></span>
|
|
<span class="ml-track-num">2</span>
|
|
<span class="ml-track-title">The National Anthem</span>
|
|
<span class="ml-track-dur">5:51</span>
|
|
</div>
|
|
<div class="ml-track">
|
|
<span class="ml-chk"></span>
|
|
<span class="ml-track-num">3</span>
|
|
<span class="ml-track-title">Everything in Its Right Place</span>
|
|
<span class="ml-track-dur">4:11</span>
|
|
</div>
|
|
|
|
<div class="ml-medium-header">
|
|
<div class="ml-medium-title">
|
|
<span class="ml-chk"></span>
|
|
Disc 2
|
|
<span class="ml-badge">CD</span>
|
|
</div>
|
|
<div class="ml-btn-group">
|
|
<button class="ml-btn ml-btn-soft">
|
|
<svg viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M6 4l10 6-10 6V4z" />
|
|
</svg>
|
|
Scrobble disc
|
|
</button>
|
|
<button class="ml-btn ml-btn-outline icon-only">
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
width="14"
|
|
height="14"
|
|
>
|
|
<circle cx="10" cy="4" r="1.5" />
|
|
<circle cx="10" cy="10" r="1.5" />
|
|
<circle cx="10" cy="16" r="1.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ml-track selected">
|
|
<span class="ml-chk checked"></span>
|
|
<span class="ml-track-num">1</span>
|
|
<span class="ml-track-title">Pyramid Song</span>
|
|
<span class="ml-track-dur">4:49</span>
|
|
</div>
|
|
<div class="ml-track">
|
|
<span class="ml-chk"></span>
|
|
<span class="ml-track-num">2</span>
|
|
<span class="ml-track-title">Idioteque</span>
|
|
<span class="ml-track-dur">5:09</span>
|
|
</div>
|
|
<div class="ml-track">
|
|
<span class="ml-chk"></span>
|
|
<span class="ml-track-num">3</span>
|
|
<span class="ml-track-title">Like Spinning Plates</span>
|
|
<span class="ml-track-dur">3:57</span>
|
|
</div>
|
|
|
|
<div class="ml-sticky">
|
|
<div class="ml-sticky-info">
|
|
<span class="ml-sticky-count">2 tracks selected</span>
|
|
<span class="ml-sticky-meta">across 2 discs · 10:45</span>
|
|
</div>
|
|
<button class="ml-btn ml-btn-solid">
|
|
<svg viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M6 4l10 6-10 6V4z" />
|
|
</svg>
|
|
Scrobble selected
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="annotation">
|
|
<strong>Scrobble release</strong> sits in the header beside the "Finished
|
|
at" picker. Solid primary to mark the default action. Per-medium
|
|
<strong>Scrobble disc</strong> uses the soft variant to stay a visible
|
|
shortcut without competing with the primary.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MOBILE -->
|
|
<div>
|
|
<div class="viewport-label">
|
|
<span>Mobile · 360px width</span>
|
|
<span class="dim">iPhone SE class</span>
|
|
</div>
|
|
<div class="viewport-frame" style="padding: 0.5rem">
|
|
<div class="ml-sheet m-narrow" style="font-size: 0.8rem">
|
|
<div class="ml-sheet-header" style="padding: 0.8rem 0.75rem">
|
|
<div class="ml-title-row">
|
|
<div
|
|
class="ml-actions-top"
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: start;
|
|
gap: 0.5rem;
|
|
"
|
|
>
|
|
<div>
|
|
<div class="ml-title" style="font-size: 0.92rem">
|
|
Kid A Mnesia
|
|
</div>
|
|
<div class="ml-subtitle">Radiohead · 2 CDs</div>
|
|
</div>
|
|
<button class="ml-btn ml-btn-outline icon-only" title="More">
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
width="14"
|
|
height="14"
|
|
>
|
|
<circle cx="10" cy="4" r="1.5" />
|
|
<circle cx="10" cy="10" r="1.5" />
|
|
<circle cx="10" cy="16" r="1.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="ml-btn-row">
|
|
<span
|
|
class="ml-picker"
|
|
style="flex: 1; justify-content: space-between"
|
|
>
|
|
<span
|
|
style="display: inline-flex; align-items: center; gap: 0.4rem"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
width="14"
|
|
height="14"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .2.08.39.22.53l3 3a.75.75 0 101.06-1.06l-2.78-2.78V5z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<span>
|
|
<span class="ml-picker-label">Finished at</span>
|
|
<span class="ml-picker-value" style="margin-left: 0.25rem"
|
|
>Now</span
|
|
>
|
|
</span>
|
|
</span>
|
|
<span class="ml-picker-caret">▾</span>
|
|
</span>
|
|
<button
|
|
class="ml-btn ml-btn-solid"
|
|
style="padding: 0.4rem 0.65rem"
|
|
>
|
|
<svg viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M6 4l10 6-10 6V4z" />
|
|
</svg>
|
|
Release
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ml-body" style="max-height: 360px">
|
|
<div class="ml-medium-header" style="padding: 0.55rem 0.75rem">
|
|
<div class="ml-medium-title" style="font-size: 0.78rem">
|
|
<span class="ml-chk"></span>
|
|
Disc 1
|
|
<span class="ml-badge">CD</span>
|
|
</div>
|
|
<div class="ml-btn-group">
|
|
<button
|
|
class="ml-btn ml-btn-soft icon-only"
|
|
title="Scrobble disc"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
width="14"
|
|
height="14"
|
|
>
|
|
<path d="M6 4l10 6-10 6V4z" />
|
|
</svg>
|
|
</button>
|
|
<button class="ml-btn ml-btn-outline icon-only">
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
width="14"
|
|
height="14"
|
|
>
|
|
<circle cx="10" cy="4" r="1.5" />
|
|
<circle cx="10" cy="10" r="1.5" />
|
|
<circle cx="10" cy="16" r="1.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="ml-track selected"
|
|
style="
|
|
padding: 0.5rem 0.75rem;
|
|
grid-template-columns: 15px 20px 1fr auto;
|
|
"
|
|
>
|
|
<span class="ml-chk checked"></span>
|
|
<span class="ml-track-num">1</span>
|
|
<span class="ml-track-title">How to Disappear Completely</span>
|
|
<span class="ml-track-dur">5:56</span>
|
|
</div>
|
|
<div
|
|
class="ml-track"
|
|
style="
|
|
padding: 0.5rem 0.75rem;
|
|
grid-template-columns: 15px 20px 1fr auto;
|
|
"
|
|
>
|
|
<span class="ml-chk"></span>
|
|
<span class="ml-track-num">2</span>
|
|
<span class="ml-track-title">The National Anthem</span>
|
|
<span class="ml-track-dur">5:51</span>
|
|
</div>
|
|
|
|
<div class="ml-medium-header" style="padding: 0.55rem 0.75rem">
|
|
<div class="ml-medium-title" style="font-size: 0.78rem">
|
|
<span class="ml-chk"></span>
|
|
Disc 2
|
|
<span class="ml-badge">CD</span>
|
|
</div>
|
|
<div class="ml-btn-group">
|
|
<button
|
|
class="ml-btn ml-btn-soft icon-only"
|
|
title="Scrobble disc"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
width="14"
|
|
height="14"
|
|
>
|
|
<path d="M6 4l10 6-10 6V4z" />
|
|
</svg>
|
|
</button>
|
|
<button class="ml-btn ml-btn-outline icon-only">
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
width="14"
|
|
height="14"
|
|
>
|
|
<circle cx="10" cy="4" r="1.5" />
|
|
<circle cx="10" cy="10" r="1.5" />
|
|
<circle cx="10" cy="16" r="1.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="ml-track selected"
|
|
style="
|
|
padding: 0.5rem 0.75rem;
|
|
grid-template-columns: 15px 20px 1fr auto;
|
|
"
|
|
>
|
|
<span class="ml-chk checked"></span>
|
|
<span class="ml-track-num">1</span>
|
|
<span class="ml-track-title">Pyramid Song</span>
|
|
<span class="ml-track-dur">4:49</span>
|
|
</div>
|
|
|
|
<div class="ml-sticky" style="padding: 0.55rem 0.75rem">
|
|
<div class="ml-sticky-info">
|
|
<span class="ml-sticky-count" style="font-size: 0.78rem"
|
|
>2 selected</span
|
|
>
|
|
<span class="ml-sticky-meta">10:45</span>
|
|
</div>
|
|
<button class="ml-btn ml-btn-solid" style="padding: 0.4rem 0.65rem">
|
|
<svg viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M6 4l10 6-10 6V4z" />
|
|
</svg>
|
|
Scrobble
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="annotation">
|
|
<strong>Mobile reflow:</strong> title row stacks title + ⋯; the picker and
|
|
"Release" button share a full-width row (picker grows, button hugs).
|
|
Per-medium scrobble becomes icon-only to fit. Sticky bar label shortens to
|
|
"Scrobble" + count + duration.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style="
|
|
margin-top: 1.5rem;
|
|
padding: 0.9rem 1rem;
|
|
background: var(--surface);
|
|
border-radius: 10px;
|
|
border: 1px solid var(--border-c);
|
|
font-size: 0.8rem;
|
|
color: var(--text);
|
|
"
|
|
>
|
|
<strong>Design language notes</strong><br />
|
|
<ul style="margin-top: 0.4rem; padding-left: 1.2rem; line-height: 1.6">
|
|
<li>
|
|
Surfaces use the zinc palette (zinc-50 / zinc-200 / zinc-800) seen across
|
|
the app.
|
|
</li>
|
|
<li>
|
|
Buttons use Fluxon variants: solid primary (release + selection), soft
|
|
primary (per-medium shortcut), outline (menu & picker).
|
|
</li>
|
|
<li>
|
|
Icons are hero-style (outline-filled), matching existing `hero-play`,
|
|
`hero-ellipsis-vertical`, `hero-clock`.
|
|
</li>
|
|
<li>
|
|
Selected rows use a subtle blue-tinted background — matches the
|
|
dimmed-accent pattern already in the Collection list.
|
|
</li>
|
|
<li>
|
|
Dark mode swaps to zinc-900/800/700 and a lighter blue-400 primary; the
|
|
mockup honours `prefers-color-scheme`.
|
|
</li>
|
|
</ul>
|
|
</div>
|