From 8eb09a1c3c962b23a9d5c18d5f104280dca20017 Mon Sep 17 00:00:00 2001 From: franzz Date: Fri, 18 Sep 2026 16:30:32 +0200 Subject: [PATCH] Remove 1 gutter size --- static/panel.css | 39 +++++++++++++++++++-------------------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/static/panel.css b/static/panel.css index 93038dc..08e471b 100644 --- a/static/panel.css +++ b/static/panel.css @@ -7,7 +7,6 @@ --bg: #0a0d14; --card: #151a25; --edge: #232b3b; - --gutter: 16px; /* from the screen's side to a card, and from one card to the next */ --ink: #eef2f9; --ink-bright: #fff; --ink-bright-muted: rgba(255, 255, 255, .8); @@ -20,9 +19,9 @@ /* spacing scale for every gap/padding/margin in the sheet, smallest to largest: 2xs 4px, sm 8px, md 12px, gutter 16px, lg 24px. */ --space-xs: 4px; - --space-lg: 24px; - --space-md: 12px; --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-edge: #52303a; --toast-bad-ink: #ffd9d4; @@ -68,11 +67,11 @@ svg { width: 22px; height: 22px; fill: currentColor; } .app { max-width: 520px; margin: 0 auto; - padding: max(var(--space-md), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) - max(var(--space-lg), env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left)); + 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(--space-md), env(safe-area-inset-left)); display: flex; 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 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 ---------------------------------------------------------- */ .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 .logo { height: 34px; width: auto; display: block; } +.top .logo { height: 44px; width: auto; display: block; } /* --- cards ----------------------------------------------------------- */ .card { background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius); - padding: var(--gutter); + padding: var(--space-md); display: flex; flex-direction: column; - gap: var(--gutter); + gap: var(--space-md); } .card.offline { opacity: .5; } /* 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 { display: flex; align-items: center; gap: var(--space-md); 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-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- now playing, between the room's name and its volume --------------- */ .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 { flex: 0 0 auto; @@ -172,7 +171,7 @@ svg { width: 22px; height: 22px; fill: currentColor; } } .progress-time.elapsed { bottom: 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-time, .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. */ .progress.seekable .progress-cursor, .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-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); } /* --- volume ---------------------------------------------------------- */ -.volume { display: flex; align-items: center; gap: var(--gutter); } +.volume { display: flex; align-items: center; gap: var(--space-md); } .control-btn { flex: 0 0 auto; @@ -274,7 +273,7 @@ button.sources-btn.loading .icon { display: none; } .input-select { display: flex; align-items: center; gap: var(--space-md); width: 100%; min-height: 50px; - padding: var(--space-md) var(--gutter); + padding: var(--space-md) var(--space-md); border-radius: 16px; background: var(--raised); text-align: left; @@ -286,13 +285,13 @@ button.sources-btn.loading .icon { display: none; } .input-select .chevron { color: var(--muted); } /* --- 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 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 .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 .cover { width: 52px; height: 52px; border-radius: 10px; } .joined .song { font-size: 18px; } @@ -321,7 +320,7 @@ button.sources-btn.loading .icon { display: none; } background: var(--card); border: 1px solid var(--edge); 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; display: flex; flex-direction: column; gap: var(--space-md); 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; } .option { 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); font-size: 17px; text-align: left; } @@ -352,7 +351,7 @@ button.sources-btn.loading .icon { display: none; } position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(22px + env(safe-area-inset-bottom)); 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); font-size: 14px; box-shadow: 0 10px 30px var(--shadow); }