Tweak room title

static/app.js

@@ -53,7 +53,6 @@ els('[data-icon]').forEach((svg) => paintIcon(svg, ICONS[svg.dataset.icon]));
 const ui = {
   foot: el('[data-role="foot"]'),
   toast: el('[data-role="toast"]'),
-  avrStatus: el('[data-role="avr-status"]'),
   inputButton: el('[data-role="input-button"]'),
   inputName: el('[data-role="input-name"]'),
   inputIcon: el('[data-role="input-icon"]'),
@@ -770,8 +769,6 @@ function render(state) {
   currentInput = avr.input || null;
   ui.inputName.textContent = currentInput ? currentInput.name : '—';
   setInputIcon(currentInput ? currentInput.code : null);
-  ui.avrStatus.textContent = avr.connected ? 'ready' : 'offline';
-  ui.avrStatus.classList.toggle('on', Boolean(avr.connected));
   avrNowPlaying = avr.now_playing || null;
   renderTrack(avrNowPlaying, avrTrack);
   paintGrouping();   // after avrNowPlaying, which decides where the AVR's card sits

static/panel.css

@@ -19,7 +19,7 @@
   --shadow: rgba(0, 0, 0, .45);
   /* spacing scale for every gap/padding/margin in the sheet, smallest to
      largest: 2xs 4px, sm 8px, md 12px, gutter 16px, lg 24px. */
-  --space-2xs: 4px;
+  --space-xs: 4px;
   --space-lg: 24px;
   --space-md: 12px;
   --space-sm: 8px;
@@ -81,7 +81,7 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .app > .on-top { order: -1; }
 
 /* --- header ---------------------------------------------------------- */
-.top { order: -2; display: flex; align-items: center; justify-content: center; padding: var(--space-2xs) var(--space-2xs) 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 .logo { height: 34px; width: auto; display: block; }
 
@@ -106,22 +106,15 @@ svg { width: 22px; height: 22px; fill: currentColor; }
     var(--card) 70%);
 }
 
-.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
+.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);
-  margin: 0; min-width: 0;
+  margin: var(--space-sm); min-width: 0;
   font-size: 17px; 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; }
 
-.pill {
-  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
-  color: var(--muted); background: var(--raised);
-  padding: var(--space-2xs) var(--space-sm); border-radius: 999px;
-}
-.pill.on { color: var(--live); }
-
 /* --- now playing, between the room's name and its volume --------------- */
 .now-playing {
   display: flex; align-items: center; gap: var(--gutter); min-width: 0;
@@ -138,8 +131,8 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .cover.poster { width: 50px; height: 75px; border-radius: 9px; }
 .track { display: flex; flex-direction: column; min-width: 0; }
 .track span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.song { font-size: 20px; font-weight: 550; }
+.song { font-size: 17px; font-weight: 550; }
-.artist { font-size: 17px; color: var(--muted); }
+.artist { font-size: 15px; color: var(--muted); }
 
 /* Doubles as the line between the song and the volume -- it goes with the
    block, when nothing is playing. Muted throughout, so it never competes
@@ -316,7 +309,7 @@ button.sources-btn.loading .icon { display: none; }
 .ghost { background: transparent; border: 1px solid var(--edge); color: var(--muted); }
 .ghost:active { background: var(--card); color: var(--ink); }
 
-.foot { margin: var(--space-2xs) var(--space-2xs) 0; min-height: 18px; font-size: 12px; color: var(--muted); text-align: center; }
+.foot { margin: var(--space-xs) var(--space-xs) 0; min-height: 18px; font-size: 12px; color: var(--muted); text-align: center; }
 .foot.bad { color: var(--warn); }
 
 /* --- input sheet ------------------------------------------------------ */
@@ -335,8 +328,8 @@ button.sources-btn.loading .icon { display: none; }
 }
 @keyframes rise { from { transform: translateY(14%); opacity: .4; } }
 
-.grabber { width: 38px; height: 4px; border-radius: 999px; background: var(--edge); margin: var(--space-2xs) auto var(--space-2xs); }
+.grabber { width: 38px; height: 4px; border-radius: 999px; background: var(--edge); margin: var(--space-xs) auto var(--space-xs); }
-.sheet h3 { margin: 0 var(--space-2xs); font-size: 14px; font-weight: 600; color: var(--muted); }
+.sheet h3 { margin: 0 var(--space-xs); font-size: 14px; font-weight: 600; color: var(--muted); }
 
 .options { display: flex; flex-direction: column; gap: var(--space-sm); overflow-y: auto; -webkit-overflow-scrolling: touch; }
 .option {

templates/index.html

@@ -110,7 +110,6 @@
   <section class="card avr">
     <div class="card-head">
       <h2><svg class="room-icon" data-icon="{{ host.kind }}" viewBox="0 0 512 512" aria-hidden="true"><path d=""/></svg><span class="room-label">{{ host.label }}</span></h2>
-      <span class="pill" data-role="avr-status">offline</span>
     </div>
     <div class="now-playing" data-role="avr-now-playing" hidden>
       <img class="cover poster" data-role="avr-cover" alt="" hidden>