franzz/heos
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove 1 gutter size
Deploy HEOS panel / deploy (push) Successful in 27s
Details

Browse Source
This commit is contained in:
franzz committed 2026-09-18 16:30:32 +02:00
1 parent fcfb14e7ad
commit 8eb09a1c3c
1 file changed
+19 -20
Download Patch File Download Diff File Expand all files Collapse all files
static/panel.css
+19 -20
View File
@@ -7,7 +7,6 @@
--bg: #0a0d14; --bg: #0a0d14;
--card: #151a25; --card: #151a25;
--edge: #232b3b; --edge: #232b3b;
--gutter: 16px; /* from the screen's side to a card, and from one card to the next */
--ink: #eef2f9; --ink: #eef2f9;
--ink-bright: #fff; --ink-bright: #fff;
--ink-bright-muted: rgba(255, 255, 255, .8); --ink-bright-muted: rgba(255, 255, 255, .8);
@@ -20,9 +19,9 @@
/* spacing scale for every gap/padding/margin in the sheet, smallest to /* spacing scale for every gap/padding/margin in the sheet, smallest to
largest: 2xs 4px, sm 8px, md 12px, gutter 16px, lg 24px. */ largest: 2xs 4px, sm 8px, md 12px, gutter 16px, lg 24px. */
--space-xs: 4px; --space-xs: 4px;
--space-lg: 24px;
--space-md: 12px;
--space-sm: 8px; --space-sm: 8px;
--space-md: 12px; /* from the screen's side to a card, and from one card to the next */
--space-lg: 24px;
--toast-bad-bg: #2b1f24; --toast-bad-bg: #2b1f24;
--toast-bad-edge: #52303a; --toast-bad-edge: #52303a;
--toast-bad-ink: #ffd9d4; --toast-bad-ink: #ffd9d4;
@@ -68,11 +67,11 @@ svg { width: 22px; height: 22px; fill: currentColor; }
.app { .app {
max-width: 520px; max-width: 520px;
margin: 0 auto; margin: 0 auto;
padding: max(var(--space-md), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) padding: max(var(--space-md), env(safe-area-inset-top)) max(var(--space-md), env(safe-area-inset-right))
max(var(--space-lg), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); max(var(--space-lg), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--gutter); gap: var(--space-md);
} }
/* A playing card goes to the top. The rest stay in markup order (rooms as /* A playing card goes to the top. The rest stay in markup order (rooms as
room_keys lists them, then the AVR), because items with the same order room_keys lists them, then the AVR), because items with the same order
@@ -83,17 +82,17 @@ svg { width: 22px; height: 22px; fill: currentColor; }
/* --- header ---------------------------------------------------------- */ /* --- header ---------------------------------------------------------- */
.top { order: -2; display: flex; align-items: center; justify-content: center; padding: var(--space-xs) var(--space-xs) 0; } .top { order: -2; display: flex; align-items: center; justify-content: center; padding: var(--space-xs) var(--space-xs) 0; }
.top h1 { margin: 0; line-height: 0; } .top h1 { margin: 0; line-height: 0; }
.top .logo { height: 34px; width: auto; display: block; } .top .logo { height: 44px; width: auto; display: block; }
/* --- cards ----------------------------------------------------------- */ /* --- cards ----------------------------------------------------------- */
.card { .card {
background: var(--card); background: var(--card);
border: 1px solid var(--edge); border: 1px solid var(--edge);
border-radius: var(--radius); border-radius: var(--radius);
padding: var(--gutter); padding: var(--space-md);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--gutter); gap: var(--space-md);
} }
.card.offline { opacity: .5; } .card.offline { opacity: .5; }
/* A tint, not a repaint -- it should read at a glance without competing /* A tint, not a repaint -- it should read at a glance without competing
@@ -110,14 +109,14 @@ svg { width: 22px; height: 22px; fill: currentColor; }
.card-head h2 { .card-head h2 {
display: flex; align-items: center; gap: var(--space-md); display: flex; align-items: center; gap: var(--space-md);
margin: var(--space-sm); min-width: 0; margin: var(--space-sm); min-width: 0;
font-size: 17px; font-weight: 600; font-size: 20px; font-weight: 600;
} }
.card-head h2 .room-icon { flex: 0 0 auto; height: 20px; width: auto; fill: currentColor; } .card-head h2 .room-icon { flex: 0 0 auto; height: 20px; width: auto; fill: currentColor; }
.card-head h2 .room-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-head h2 .room-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* --- now playing, between the room's name and its volume --------------- */ /* --- now playing, between the room's name and its volume --------------- */
.now-playing { .now-playing {
display: flex; align-items: center; gap: var(--gutter); min-width: 0; display: flex; align-items: center; gap: var(--space-md); min-width: 0;
} }
.cover { .cover {
flex: 0 0 auto; flex: 0 0 auto;
@@ -172,7 +171,7 @@ svg { width: 22px; height: 22px; fill: currentColor; }
} }
.progress-time.elapsed { bottom: 9px; } .progress-time.elapsed { bottom: 9px; }
.progress-time.remaining { top: 9px; } .progress-time.remaining { top: 9px; }
.progress.known { padding: var(--gutter) 0; } /* room for the labels above and below the cursor */ .progress.known { padding: var(--space-md) 0; } /* room for the labels above and below the cursor */
.progress.known .progress-cursor, .progress.known .progress-cursor,
.progress.known .progress-time, .progress.known .progress-time,
.progress.known .progress-total { display: block; } .progress.known .progress-total { display: block; }
@@ -183,14 +182,14 @@ svg { width: 22px; height: 22px; fill: currentColor; }
it lights up and follows the finger without easing after it. */ it lights up and follows the finger without easing after it. */
.progress.seekable .progress-cursor, .progress.seekable .progress-cursor,
.progress.seekable .progress-time { cursor: grab; touch-action: pan-y; } .progress.seekable .progress-time { cursor: grab; touch-action: pan-y; }
.progress.seekable .progress-cursor::before { content: ''; position: absolute; inset: calc(var(--gutter) * -1); } .progress.seekable .progress-cursor::before { content: ''; position: absolute; inset: calc(var(--space-md) * -1); }
.progress.dragging .progress-cursor, .progress.dragging .progress-cursor,
.progress.dragging .progress-time { transition: none; cursor: grabbing; } .progress.dragging .progress-time { transition: none; cursor: grabbing; }
.progress.dragging .progress-cursor { background: var(--ink); transform: translateY(-50%) scale(1.6); } .progress.dragging .progress-cursor { background: var(--ink); transform: translateY(-50%) scale(1.6); }
.progress.dragging .progress-time { color: var(--ink); } .progress.dragging .progress-time { color: var(--ink); }
/* --- volume ---------------------------------------------------------- */ /* --- volume ---------------------------------------------------------- */
.volume { display: flex; align-items: center; gap: var(--gutter); } .volume { display: flex; align-items: center; gap: var(--space-md); }
.control-btn { .control-btn {
flex: 0 0 auto; flex: 0 0 auto;
@@ -274,7 +273,7 @@ button.sources-btn.loading .icon { display: none; }
.input-select { .input-select {
display: flex; align-items: center; gap: var(--space-md); display: flex; align-items: center; gap: var(--space-md);
width: 100%; min-height: 50px; width: 100%; min-height: 50px;
padding: var(--space-md) var(--gutter); padding: var(--space-md) var(--space-md);
border-radius: 16px; border-radius: 16px;
background: var(--raised); background: var(--raised);
text-align: left; text-align: left;
@@ -286,13 +285,13 @@ button.sources-btn.loading .icon { display: none; }
.input-select .chevron { color: var(--muted); } .input-select .chevron { color: var(--muted); }
/* --- rooms merged into the AVR's card --------------------------------- */ /* --- rooms merged into the AVR's card --------------------------------- */
.joined { display: flex; flex-direction: column; gap: var(--gutter); } .joined { display: flex; flex-direction: column; gap: var(--space-md); }
/* In here a room is an outline rather than a card: its border is what says /* In here a room is an outline rather than a card: its border is what says
it is playing with the AVR, and the fill -- a tint too, when it plays -- it is playing with the AVR, and the fill -- a tint too, when it plays --
belongs to the group's card instead. Same specificity as belongs to the group's card instead. Same specificity as
.card.room.playing, so being later is what wins. */ .card.room.playing, so being later is what wins. */
.joined .card.room { background: none; border-color: var(--ink); border-radius: 18px; padding: var(--gutter); gap: var(--space-md); } .joined .card.room { background: none; border-color: var(--ink); border-radius: 18px; padding: var(--space-md); gap: var(--space-md); }
.joined .card-head h2 { font-size: 15px; font-weight: 550; color: var(--muted); } .joined .card-head h2 { font-size: 15px; font-weight: 550; color: var(--muted); }
.joined .cover { width: 52px; height: 52px; border-radius: 10px; } .joined .cover { width: 52px; height: 52px; border-radius: 10px; }
.joined .song { font-size: 18px; } .joined .song { font-size: 18px; }
@@ -321,7 +320,7 @@ button.sources-btn.loading .icon { display: none; }
background: var(--card); background: var(--card);
border: 1px solid var(--edge); border: 1px solid var(--edge);
border-radius: 28px 28px 0 0; border-radius: 28px 28px 0 0;
padding: var(--space-md) var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom)); padding: var(--space-md) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom));
max-height: 82vh; max-height: 82vh;
display: flex; flex-direction: column; gap: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md);
animation: rise .22s cubic-bezier(.22, .68, .3, 1); animation: rise .22s cubic-bezier(.22, .68, .3, 1);
@@ -334,7 +333,7 @@ button.sources-btn.loading .icon { display: none; }
.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); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.option { .option {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
min-height: 58px; padding: 0 var(--gutter); min-height: 58px; padding: 0 var(--space-md);
border-radius: 16px; background: var(--raised); border-radius: 16px; background: var(--raised);
font-size: 17px; text-align: left; font-size: 17px; text-align: left;
} }
@@ -352,7 +351,7 @@ button.sources-btn.loading .icon { display: none; }
position: fixed; left: 50%; transform: translateX(-50%); position: fixed; left: 50%; transform: translateX(-50%);
bottom: calc(22px + env(safe-area-inset-bottom)); bottom: calc(22px + env(safe-area-inset-bottom));
z-index: 20; max-width: 90vw; z-index: 20; max-width: 90vw;
padding: var(--space-md) var(--gutter); border-radius: 14px; padding: var(--space-md) var(--space-md); border-radius: 14px;
background: var(--toast-bad-bg); border: 1px solid var(--toast-bad-edge); color: var(--toast-bad-ink); background: var(--toast-bad-bg); border: 1px solid var(--toast-bad-edge); color: var(--toast-bad-ink);
font-size: 14px; box-shadow: 0 10px 30px var(--shadow); font-size: 14px; box-shadow: 0 10px 30px var(--shadow);
} }