From 6c76121863019d88781f713d09a23e319251c74c Mon Sep 17 00:00:00 2001 From: franzz Date: Wed, 23 Sep 2026 14:28:55 +0200 Subject: [PATCH] Minor CSS fixes --- static/app.js | 4 +- static/panel.css | 91 +++++++++++++++++--------------------------- templates/index.html | 6 +-- 3 files changed, 40 insertions(+), 61 deletions(-) diff --git a/static/app.js b/static/app.js index 0390ca7..64565fc 100644 --- a/static/app.js +++ b/static/app.js @@ -114,7 +114,7 @@ els('.card[data-room]').forEach((node) => { avr: node.classList.contains('avr'), level: el('[data-role="level"]', node), meter: el('[data-role="meter"]', node), - actions: el('[data-role="actions"]', node), + navigation: el('[data-role="navigation"]', node), toggle: el('[data-role="group"]', node), toggleLabel: el('[data-role="group-label"]', node), prev: el('[data-role="prev"]', node), @@ -188,7 +188,7 @@ function paintTransport(room) { room.play.disabled = !room.available || !state; room.play.setAttribute( 'aria-label', `${room.node.querySelector('h2').textContent}: ${playing ? 'pause' : 'play'}`); - room.actions.hidden = room.avr + room.navigation.hidden = room.avr ? !state : !(room.onSpotify && room.spotifyAccount && !room.grouped); if (room.prev) room.prev.disabled = !room.available; diff --git a/static/panel.css b/static/panel.css index 587c4bf..dfb7a73 100644 --- a/static/panel.css +++ b/static/panel.css @@ -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); } \ No newline at end of file +.toast.ok { background: var(--toast-ok-bg); border-color: var(--toast-ok-edge); color: var(--toast-ok-ink); } diff --git a/templates/index.html b/templates/index.html index d5e2435..349792e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -33,7 +33,7 @@ {%- endmacro %} {% macro host_toggle() -%} - -