Harmonize button active state

static/panel.css

@@ -59,7 +59,9 @@ button {
   background: none;
   cursor: pointer;
   touch-action: manipulation;
+  box-shadow: 1px 1px 1px 0px var(--shadow);
 }
+button:active { transform: scale(.96); }
 
 /* Every icon is a Font Awesome glyph: a solid shape, filled, never stroked. */
 svg { width: 22px; height: 22px; fill: currentColor; }
@@ -80,9 +82,8 @@ 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-xs) var(--space-xs) 0; }
+.top { order: -2; display: flex; align-items: center; justify-content: center; }
-.top h1 { margin: 0; line-height: 0; }
+.top .logo { height: 44px; width: auto; display: block; margin: var(--space-xs); }
-.top .logo { height: 44px; width: auto; display: block; }
 
 /* --- cards ----------------------------------------------------------- */
 .card {
@@ -199,7 +200,6 @@ svg { width: 22px; height: 22px; fill: currentColor; }
   display: grid; place-items: center;
 }
 .control-btn svg { width: 20px; height: 20px; }
-.control-btn:active { background: var(--accent); transform: scale(.96); }
 .control-btn:disabled { opacity: .5; }
 
 .meter { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--bg); }
@@ -251,7 +251,6 @@ svg { width: 22px; height: 22px; fill: currentColor; }
   display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
   font-size: 15px; font-weight: 550;
 }
-.sources-btn:active { transform: scale(.985); }
 .sources-btn:disabled { opacity: .5; }
 .sources-btn svg { flex: 0 0 auto; color: var(--ink-bright); }
 .sources-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -278,7 +277,6 @@ button.sources-btn.loading .icon { display: none; }
   background: var(--raised);
   text-align: left;
 }
-.input-select:active { transform: scale(.985); }
 .input-select .eyebrow { font-size: 11px; 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 .value { flex: 1; font-size: 19px; font-weight: 600; }
@@ -306,7 +304,6 @@ button.sources-btn.loading .icon { display: none; }
 /* --- misc ------------------------------------------------------------- */
 .wide { width: 100%; height: 50px; border-radius: 16px; font-size: 15px; }
 .ghost { background: transparent; border: 1px solid var(--edge); color: var(--muted); }
-.ghost:active { background: var(--card); color: var(--ink); }
 
 .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); }
@@ -337,7 +334,6 @@ button.sources-btn.loading .icon { display: none; }
   border-radius: 16px; background: var(--raised);
   font-size: 17px; text-align: left;
 }
-.option:active { transform: scale(.985); }
 .option[aria-current="true"] { background: var(--accent); color: var(--ink-bright); }
 .option-label { display: flex; align-items: center; gap: var(--space-md); min-width: 0; overflow: hidden; }
 .option-label svg { flex: 0 0 auto; height: 18px; width: 18px; fill: currentColor; color: var(--muted); }

templates/index.html

@@ -48,7 +48,7 @@
 
 <div class="app">
   <header class="top">
-    <h1><img class="logo" src="{{ url_for('static', filename='logo.svg') }}" alt="{{ app_name }}"></h1>
+    <img class="logo" src="{{ url_for('static', filename='logo.svg') }}" alt="{{ app_name }}">
   </header>
 
   {% for room in rooms %}