[fix](trx-frontend-http): add CSS variables, focus states, and mobile breakpoints

Replace all hardcoded colors with CSS custom properties on :root for
easier theming. Add focus-visible outlines for keyboard accessibility.
Add mobile breakpoints for screens <= 480px.

Fix PTT button styling to use theme-aware colors (var(--accent-red))
instead of hardcoded light-theme colors (#ffefef, #f3f3f3).

Remove unused .value, .controls, and .section-title CSS classes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>
This commit is contained in:
2026-02-07 14:51:18 +01:00
parent 20fbd3c2cd
commit 83342628fa
2 changed files with 52 additions and 22 deletions
@@ -171,9 +171,15 @@ function render(update) {
if (update.status && typeof update.status.tx_en === "boolean") {
lastTxEn = update.status.tx_en;
pttBtn.textContent = update.status.tx_en ? "PTT On" : "PTT Off";
pttBtn.style.background = update.status.tx_en ? "#ffefef" : "#f3f3f3";
pttBtn.style.borderColor = update.status.tx_en ? "#d22" : "#999";
pttBtn.style.color = update.status.tx_en ? "#a00" : "#222";
if (update.status.tx_en) {
pttBtn.style.background = "var(--accent-red)";
pttBtn.style.borderColor = "var(--accent-red)";
pttBtn.style.color = "white";
} else {
pttBtn.style.background = "";
pttBtn.style.borderColor = "";
pttBtn.style.color = "";
}
}
if (update.status && update.status.vfo && Array.isArray(update.status.vfo.entries)) {
const entries = update.status.vfo.entries;