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

Harmonize button active state
Deploy HEOS panel / deploy (push) Successful in 27s
Details

Browse Source
This commit is contained in:
franzz committed 2026-09-18 17:23:03 +02:00
1 parent 8eb09a1c3c
commit d4959b4ac3
2 files changed
+5 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

static/panel.css
+4 -8
View File
@@ -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 h1 { margin: 0; line-height: 0; }
.top .logo { height: 44px; width: auto; display: block; }
.top { order: -2; display: flex; align-items: center; justify-content: center; }
.top .logo { height: 44px; width: auto; display: block; margin: var(--space-xs); }
/* --- 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); }