franzz committed
1 parent
5d57ba5d8f
commit
6c76121863
3 files changed
+40
-61
No files matched your search
+35
-56
@@ -108,16 +108,14 @@ button {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
background: none;
|
||||
background: var(--raised);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
box-shadow: var(--lift);
|
||||
}
|
||||
button:active { transform: scale(.96); }
|
||||
button[aria-pressed="true"], button[aria-current="true"] { box-shadow: none; }
|
||||
|
||||
/* For a keyboard, including the one on an iPad, and VoiceOver's cursor. */
|
||||
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
button[aria-pressed="true"], button[aria-current="true"] { background: var(--accent); color: var(--ink-bright); box-shadow: none; }
|
||||
|
||||
svg { width: 22px; height: 22px; fill: currentColor; }
|
||||
|
||||
@@ -132,7 +130,7 @@ svg { width: 22px; height: 22px; fill: currentColor; }
|
||||
}
|
||||
|
||||
.wide { width: 100%; min-height: 50px; border-radius: var(--radius-lg); font-size: var(--text-sm); }
|
||||
.ghost { background: transparent; border: 1px solid var(--outline); color: var(--muted); box-shadow: none; } /* nothing to lift */
|
||||
.ghost { background: transparent; border: 1px solid var(--outline); color: var(--muted); box-shadow: none; }
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@keyframes rise { from { transform: translateY(100%); opacity: .4; } }
|
||||
@@ -161,6 +159,8 @@ header .logo { height: 44px; width: auto; display: block; margin: var(--space-xs
|
||||
background: linear-gradient(135deg, var(--playing) 0%, var(--card) 70%);
|
||||
}
|
||||
|
||||
/* Card - Header */
|
||||
|
||||
.card-head { display: flex; align-items: center; justify-content: center; gap: var(--space-md); }
|
||||
.card-head h2 {
|
||||
display: flex; align-items: center; gap: var(--space-md);
|
||||
@@ -196,6 +196,7 @@ header .logo { height: 44px; width: auto; display: block; margin: var(--space-xs
|
||||
.track span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.song { font-size: var(--text-md); font-weight: 600; }
|
||||
.artist { font-size: var(--text-sm); color: var(--muted); }
|
||||
|
||||
.progress { display: flex; align-items: center; gap: var(--space-md); }
|
||||
.progress-line { position: relative; flex: 1; height: 3px; border-radius: 2px; background: var(--muted); }
|
||||
.progress-fill {
|
||||
@@ -212,8 +213,7 @@ header .logo { height: 44px; width: auto; display: block; margin: var(--space-xs
|
||||
transform: translateY(-50%);
|
||||
transition: left .12s ease-out;
|
||||
}
|
||||
.progress-time,
|
||||
.progress-total {
|
||||
.progress-time, .progress-total {
|
||||
display: none;
|
||||
font-size: var(--text-xs); line-height: 1; color: var(--muted);
|
||||
font-variant-numeric: tabular-nums; white-space: nowrap;
|
||||
@@ -226,34 +226,30 @@ header .logo { height: 44px; width: auto; display: block; margin: var(--space-xs
|
||||
}
|
||||
.progress-time.elapsed { bottom: 9px; }
|
||||
.progress-time.remaining { top: 9px; }
|
||||
/* Room for the labels above and below the cursor: what they need at 13px,
|
||||
plus whatever a larger Dynamic Type size adds to them. */
|
||||
.progress.known { padding: calc(var(--space-md) + max(0px, var(--text-xs) - 13px)) 0; }
|
||||
.progress.known .progress-cursor,
|
||||
.progress.known .progress-time,
|
||||
.progress.known .progress-total { display: block; }
|
||||
.progress.seekable .progress-cursor,
|
||||
.progress.seekable .progress-time { cursor: grab; touch-action: pan-y; }
|
||||
/* The cursor is 7px; this grows what a finger can grab to the 44pt Apple asks for. */
|
||||
.progress.seekable .progress-cursor::before { content: ''; position: absolute; inset: -19px; }
|
||||
.progress.dragging .progress-cursor,
|
||||
.progress.dragging .progress-time { transition: none; cursor: grabbing; }
|
||||
.progress.dragging .progress-cursor { background: var(--ink); transform: translateY(-50%) scale(1.6); }
|
||||
.progress.dragging .progress-time { color: var(--ink); }
|
||||
.progress.dragging .progress-cursor { transition: none; cursor: grabbing; background: var(--ink); transform: translateY(-50%) scale(1.6); }
|
||||
.progress.dragging .progress-time { transition: none; cursor: grabbing; color: var(--ink); }
|
||||
|
||||
/* Card - Volume */
|
||||
/* Card - Volume & Navigation */
|
||||
|
||||
.volume { display: flex; align-items: center; gap: var(--space-md); }
|
||||
.navigation { display: flex; align-items: stretch; justify-content: center; gap: var(--space-md); }
|
||||
|
||||
.control-btn {
|
||||
flex: 0 0 auto;
|
||||
width: 72px; height: 62px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--raised);
|
||||
width: 62px; height: 62px;
|
||||
display: grid; place-items: center;
|
||||
}
|
||||
.control-btn svg { width: 20px; height: 20px; }
|
||||
.control-btn:disabled { opacity: .5; }
|
||||
.control-btn .icon-pause { display: none; }
|
||||
.control-btn.playing .icon-play { display: none; }
|
||||
.control-btn.playing .icon-pause { display: block; }
|
||||
|
||||
.meter { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--track); }
|
||||
.meter i {
|
||||
@@ -261,6 +257,9 @@ header .logo { height: 44px; width: auto; display: block; margin: var(--space-xs
|
||||
border-radius: 999px; background: var(--accent);
|
||||
transition: width .12s ease-out;
|
||||
}
|
||||
.meter.dragging i,
|
||||
.meter.dragging .knob { transition: none; }
|
||||
.meter.dragging .knob { cursor: grabbing; transform: translateY(-50%) scale(1.12); }
|
||||
|
||||
.knob {
|
||||
position: absolute; top: 50%;
|
||||
@@ -283,54 +282,36 @@ header .logo { height: 44px; width: auto; display: block; margin: var(--space-xs
|
||||
position: absolute;
|
||||
inset: calc(var(--space-md) * -1) calc(var(--space-sm) * -1);
|
||||
}
|
||||
.meter.dragging i,
|
||||
.meter.dragging .knob { transition: none; }
|
||||
.meter.dragging .knob { cursor: grabbing; transform: translateY(-50%) scale(1.12); }
|
||||
|
||||
/* Card - Navigation */
|
||||
|
||||
.actions { display: flex; align-items: stretch; justify-content: center; gap: var(--space-md); }
|
||||
|
||||
.control-btn .icon-pause { display: none; }
|
||||
.control-btn.playing .icon-play { display: none; }
|
||||
.control-btn.playing .icon-pause { display: block; }
|
||||
|
||||
/* Card - Sources */
|
||||
|
||||
.sources { display: flex; gap: var(--space-md); }
|
||||
.sources-btn {
|
||||
|
||||
.source-btn {
|
||||
flex: 1; min-width: 0;
|
||||
min-height: 50px; border-radius: var(--radius-lg);
|
||||
background: var(--raised);
|
||||
min-height: 50px;
|
||||
display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
|
||||
font-size: var(--text-sm); font-weight: 600;
|
||||
}
|
||||
.sources-btn:disabled { opacity: .5; }
|
||||
.sources-btn svg { flex: 0 0 auto; }
|
||||
.sources-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.sources-btn .spinner { display: none; }
|
||||
button.sources-btn.loading .icon { display: none; }
|
||||
.sources-btn.loading .spinner { display: block; animation: spin 1s steps(8) infinite; }
|
||||
|
||||
.spotify[aria-pressed="true"] { border: 2px solid var(--ink); }
|
||||
.source-btn:disabled { opacity: .5; }
|
||||
.source-btn svg { flex: 0 0 auto; }
|
||||
.source-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.source-btn .spinner { display: none; }
|
||||
.source-btn.loading .icon { display: none; }
|
||||
.source-btn.loading .spinner { display: block; animation: spin 1s steps(8) infinite; }
|
||||
|
||||
.toggle .leave { display: none; }
|
||||
.toggle[aria-pressed="true"] { background: var(--accent); color: var(--ink-bright); }
|
||||
|
||||
/* AVR */
|
||||
|
||||
/* AVR - Input */
|
||||
/* Card - AVR Input */
|
||||
|
||||
.input-select {
|
||||
display: flex; align-items: center; gap: var(--space-md);
|
||||
width: 100%; min-height: 50px;
|
||||
padding: var(--space-md) var(--space-md);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--raised);
|
||||
padding: var(--space-md);
|
||||
text-align: left;
|
||||
}
|
||||
.input-select .eyebrow { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
|
||||
.input-select [data-role="input-icon"] { flex: 0 0 auto; height: 18px; width: 18px; fill: currentColor; color: var(--muted); }
|
||||
.input-select .eyebrow { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
|
||||
.input-select .value { flex: 1; font-size: var(--text-lg); font-weight: 600; }
|
||||
.input-select .chevron { color: var(--muted); }
|
||||
|
||||
@@ -351,15 +332,13 @@ button.sources-btn.loading .icon { display: none; }
|
||||
.grabber { width: 38px; height: 4px; border-radius: 999px; background: var(--outline); margin: var(--space-xs) auto var(--space-xs); }
|
||||
.sheet h3 { margin: 0 var(--space-xs); font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
|
||||
|
||||
.options { display: flex; flex-direction: column; gap: var(--space-sm); overflow-y: auto; -webkit-overflow-scrolling: touch; }
|
||||
.options { display: flex; flex-direction: column; gap: var(--space-sm); }
|
||||
.option {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
|
||||
min-height: 58px; padding: 0 var(--space-md);
|
||||
border-radius: var(--radius-lg); background: var(--raised);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--text-md); text-align: left;
|
||||
}
|
||||
.option[aria-current="true"] { background: var(--accent); color: var(--ink-bright); }
|
||||
.option[aria-current="true"]:focus-visible { outline: none; }
|
||||
.option[aria-current="true"] .option-label svg { color: var(--ink-bright); }
|
||||
.option[aria-current="true"] .code { color: var(--ink-bright); }
|
||||
.option-label { display: flex; align-items: center; gap: var(--space-md); min-width: 0; overflow: hidden; }
|
||||
@@ -367,7 +346,7 @@ button.sources-btn.loading .icon { display: none; }
|
||||
.option-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.option .code { font-size: var(--text-xs); color: var(--muted); flex: 0 0 auto; }
|
||||
|
||||
/* AVR - Grouped Room */
|
||||
/* Card - AVR Grouped Room */
|
||||
|
||||
.joined { display: flex; flex-direction: column; gap: var(--space-md); }
|
||||
.joined .card.room { background: none; border-color: var(--ink); border-radius: var(--radius-lg); padding: var(--space-md); gap: var(--space-md); }
|
||||
@@ -394,4 +373,4 @@ footer.bad { color: var(--warn); }
|
||||
background: var(--toast-bad-bg); border: 1px solid var(--toast-bad-edge); color: var(--toast-bad-ink);
|
||||
font-size: var(--text-sm); box-shadow: 0 10px 30px var(--shadow);
|
||||
}
|
||||
.toast.ok { background: var(--toast-ok-bg); border-color: var(--toast-ok-edge); color: var(--toast-ok-ink); }
|
||||
.toast.ok { background: var(--toast-ok-bg); border-color: var(--toast-ok-edge); color: var(--toast-ok-ink); }
|
||||
Reference in new issue
Block a user