sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[style](trx-frontend-http): system font, button states, scrollbars, phosphor theme

Browse Source 
System font stack: replace bare 'sans-serif' with system-ui / -apple-system
/ BlinkMacSystemFont / Segoe UI chain — sharper rendering on all platforms
at zero extra load cost.

Button hover/active: add transition (100ms) + color-mix hover brightening
+ active depression (translateY 1px) to all buttons. Previously buttons had
zero visual feedback on interaction.

Scrollbar styling: thin (6px) custom scrollbars via ::-webkit-scrollbar and
scrollbar-width/color for Firefox. Thumb uses border-color tinted with the
accent on hover — matches each theme automatically via CSS variables.

Phosphor theme: classic green-phosphor CRT aesthetic — near-black background,
#39ff14 neon-green accent, glow text-shadow on the freq display, matching
spectrum/waterfall canvas palette. Both dark and light variants included.
Registered in the style picker select, setStyle() valid list, and
CANVAS_PALETTE.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-10 18:23:15 +01:00
parent 03a5bff4cc
commit 5a3c013db5
3 changed files with 99 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+19 -1
View File
@@ -586,6 +586,24 @@ const CANVAS_PALETTE = {
waterfallHue: [4, 24], waterfallSat: 82, waterfallLight: [92, 40], waterfallAlpha: [0.34, 0.84],
},
},
phosphor: {
dark: {
bg: "#010501",
spectrumLine: "#39ff14", spectrumFill: "rgba(57,255,20,0.13)",
spectrumGrid: "rgba(57,255,20,0.07)", spectrumLabel: "rgba(168,230,168,0.55)",
waveformLine: "rgba(57,255,20,0.92)", waveformPeak: "rgba(184,240,96,0.88)",
waveformGrid: "rgba(57,255,20,0.08)", waveformLabel: "rgba(168,230,168,0.65)",
waterfallHue: [115, 90], waterfallSat: 100, waterfallLight: [5, 52], waterfallAlpha: [0.28, 0.92],
},
light: {
bg: "#e0f0e0",
spectrumLine: "#1a7a1a", spectrumFill: "rgba(26,122,26,0.13)",
spectrumGrid: "rgba(10,42,10,0.08)", spectrumLabel: "rgba(10,42,10,0.52)",
waveformLine: "rgba(20,110,20,0.95)", waveformPeak: "rgba(74,138,0,0.90)",
waveformGrid: "rgba(10,42,10,0.10)", waveformLabel: "rgba(10,42,10,0.65)",
waterfallHue: [115, 90], waterfallSat: 90, waterfallLight: [92, 40], waterfallAlpha: [0.34, 0.82],
},
},
};
function currentStyle() {
@@ -604,7 +622,7 @@ function setStyle(style) {
: style === "monokai" ? "lime"
: style === "blood" ? "fire"
: style;
const valid = ["original", "arctic", "lime", "contrast", "neon-disco", "golden-rain", "amber", "fire"];
const valid = ["original", "arctic", "lime", "contrast", "neon-disco", "golden-rain", "amber", "fire", "phosphor"];
const next = valid.includes(remapped) ? remapped : "original";
if (next === "original") {
document.documentElement.removeAttribute("data-style");
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+1
View File
@@ -51,6 +51,7 @@
<option value="golden-rain">Donald</option>
<option value="amber">Amber</option>
<option value="fire">Fire</option>
<option value="phosphor">Phosphor</option>
</select>
</div>
<button id="theme-toggle" class="header-bar-btn" type="button" aria-label="Toggle dark or light theme">Light</button>
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+79 -2
View File
@@ -62,7 +62,7 @@
}
body {
font-family: sans-serif;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
min-height: 100vh;
min-height: 100dvh;
@@ -371,7 +371,9 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
align-items: center;
margin-top: 0.4rem;
}
button { padding: 0.5rem 0.9rem; border-radius: 6px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--text); cursor: pointer; height: var(--control-height); }
button { padding: 0.5rem 0.9rem; border-radius: 6px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--text); cursor: pointer; height: var(--control-height); transition: background 100ms ease, border-color 100ms ease, color 100ms ease, box-shadow 100ms ease; }
button:hover:not(:disabled) { background: color-mix(in srgb, var(--btn-bg) 75%, var(--accent-green)); border-color: color-mix(in srgb, var(--btn-border) 60%, var(--accent-green)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-green) 18%, transparent); }
button:active:not(:disabled) { background: color-mix(in srgb, var(--btn-bg) 55%, var(--accent-green)); border-color: var(--accent-green); box-shadow: none; transform: translateY(1px); }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.hint { color: var(--text-muted); font-size: 0.85rem; }
.inline { display: flex; gap: 0.5rem; align-items: center; }
@@ -1801,6 +1803,13 @@ button:focus-visible, input:focus-visible, select:focus-visible {
outline-offset: 2px;
}
/* ── Scrollbars ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--border-light) 70%, transparent); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent-green) 55%, var(--border-light)); }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--border-light) 70%, transparent) transparent; }
@media (max-width: 900px) {
.card { width: 100%; padding-left: 0.9rem; padding-right: 0.9rem; }
}
@@ -3174,3 +3183,71 @@ button:focus-visible, input:focus-visible, select:focus-visible {
--wavelength-fg: #9d5547;
--spectrum-bg: #ffede5;
}
/* ── Phosphor style ───────────────────────────────────────────────────── */
/* Classic green-phosphor CRT terminal aesthetic */
[data-style="phosphor"] {
--bg: #030a03;
--card-bg: #060e06;
--input-bg: #030a03;
--border: #0f2e0f;
--border-light: #1a4a1a;
--text: #a8e6a8;
--text-muted: #5a9a5a;
--text-heading: #c8f0c8;
--btn-bg: #0a1e0a;
--btn-border: #1e4a1e;
--accent-green: #39ff14;
--accent-yellow: #b8f060;
--accent-red: #ff4444;
--jog-hi: #0e2a0e;
--jog-lo: #081808;
--jog-shadow: rgba(0,0,0,0.65);
--jog-inset: rgba(57,255,20,0.07);
--audio-level-bg: #060e06;
--audio-level-border: #1a4a1a;
--audio-level-fill-start: #39ff14;
--audio-level-fill-end: #b8f060;
--filter-bg: #0a1e0a;
--filter-fg: #a8e6a8;
--filter-border: #1e4a1e;
--wavelength-fg: #4a8a4a;
--spectrum-bg: #010501;
}
[data-style="phosphor"] #freq {
color: #39ff14;
text-shadow: 0 0 8px rgba(57,255,20,0.55), 0 0 20px rgba(57,255,20,0.2);
}
[data-style="phosphor"] .signal-bar-fill,
[data-style="phosphor"] .meter-fill {
background: linear-gradient(90deg, #39ff14, #b8f060);
box-shadow: 0 0 6px rgba(57,255,20,0.45);
}
[data-style="phosphor"][data-theme="light"] {
--bg: #e8f5e8;
--card-bg: #f0faf0;
--input-bg: #dff0df;
--border: #b0d8b0;
--border-light: #80c080;
--text: #0a2a0a;
--text-muted: #2a6a2a;
--text-heading: #062006;
--btn-bg: #d0ebd0;
--btn-border: #4a8a4a;
--accent-green: #1a7a1a;
--accent-yellow: #4a8a00;
--accent-red: #cc2222;
--jog-hi: #d0ebd0;
--jog-lo: #bcdabc;
--jog-shadow: rgba(10,42,10,0.15);
--jog-inset: rgba(255,255,255,0.72);
--audio-level-bg: #d8edd8;
--audio-level-border: #80c080;
--audio-level-fill-start: #1a7a1a;
--audio-level-fill-end: #4a8a00;
--filter-bg: #d0ebd0;
--filter-fg: #0a2a0a;
--filter-border: #4a8a4a;
--wavelength-fg: #3a7a3a;
--spectrum-bg: #e0f0e0;
}