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

[fix](trx-frontend-http): use theme-aware CSS variables for spectrum overlay styling

Browse Source 
Replace hardcoded rgba(15, 23, 42, ...) backgrounds and #b31217/#ff7b7b
colors with color-mix() using CSS custom properties (--card-bg, --bg,
--text, --accent-red). This ensures RDS overlays, decoder bar overlays
(APRS, AIS, VDES, FT8, CW), header-main, and tab containers all
respect the selected color scheme and light/dark theme.

https://claude.ai/code/session_01L8XeLh7iHnX3LGLbqswLPu
Signed-off-by: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
2026-04-01 10:50:29 +00:00
committed by Stan Grams
parent 25c59405b5
commit c12cdb4c57
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+18 -18
View File
@@ -678,10 +678,10 @@ small { color: var(--text-muted); }
margin-left: -0.3rem; margin-left: -0.3rem;
transform: translateY(-10px); transform: translateY(-10px);
border-radius: 0.95rem; border-radius: 0.95rem;
background: rgba(15, 23, 42, 0.92); background: color-mix(in srgb, var(--card-bg) 92%, transparent);
box-shadow: box-shadow:
0 8px 20px color-mix(in srgb, #000000 18%, transparent), 0 8px 20px color-mix(in srgb, var(--bg) 18%, transparent),
inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent); inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
} }
.header-text { .header-text {
width: auto; width: auto;
@@ -796,10 +796,10 @@ small { color: var(--text-muted); }
padding: 0.34rem 0.9rem 0.28rem; padding: 0.34rem 0.9rem 0.28rem;
border: 1px solid color-mix(in srgb, var(--border-light) 72%, transparent); border: 1px solid color-mix(in srgb, var(--border-light) 72%, transparent);
border-radius: 6px; border-radius: 6px;
background: rgba(15, 23, 42, 0.92); background: color-mix(in srgb, var(--card-bg) 92%, transparent);
box-shadow: box-shadow:
0 8px 18px color-mix(in srgb, #000000 16%, transparent), 0 8px 18px color-mix(in srgb, var(--bg) 16%, transparent),
inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent); inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
text-shadow: 0 1px 10px color-mix(in srgb, var(--bg) 68%, transparent); text-shadow: 0 1px 10px color-mix(in srgb, var(--bg) 68%, transparent);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -863,10 +863,10 @@ small { color: var(--text-muted); }
letter-spacing: 0.03em; letter-spacing: 0.03em;
} }
.rds-flag-active { .rds-flag-active {
color: #ffd7d7; color: color-mix(in srgb, var(--accent-red) 30%, #fff);
background: color-mix(in srgb, #b31217 68%, transparent); background: color-mix(in srgb, var(--accent-red) 68%, transparent);
border-color: color-mix(in srgb, #ff7b7b 46%, transparent); border-color: color-mix(in srgb, var(--accent-red) 46%, transparent);
box-shadow: 0 0 10px color-mix(in srgb, #b31217 28%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent-red) 28%, transparent);
} }
.rds-flag-inactive { .rds-flag-inactive {
color: var(--text-muted); color: var(--text-muted);
@@ -893,11 +893,11 @@ small { color: var(--text-muted); }
padding: 0.22rem 0.55rem 0.24rem; padding: 0.22rem 0.55rem 0.24rem;
border: 1px solid color-mix(in srgb, var(--border-light) 72%, transparent); border: 1px solid color-mix(in srgb, var(--border-light) 72%, transparent);
border-radius: 6px; border-radius: 6px;
background: rgba(15, 23, 42, 0.92); background: color-mix(in srgb, var(--card-bg) 92%, transparent);
box-shadow: box-shadow:
0 10px 24px color-mix(in srgb, #000000 14%, transparent), 0 10px 24px color-mix(in srgb, var(--bg) 14%, transparent),
inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent),
inset 0 0 0 1px color-mix(in srgb, #ffffff 4%, transparent); inset 0 0 0 1px color-mix(in srgb, var(--text) 4%, transparent);
max-height: min(58%, 9.5rem); max-height: min(58%, 9.5rem);
overflow-y: auto; overflow-y: auto;
flex-direction: column; flex-direction: column;
@@ -907,7 +907,7 @@ small { color: var(--text-muted); }
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
background: rgba(15, 23, 42, 0.95); background: color-mix(in srgb, var(--card-bg) 95%, transparent);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
@@ -2813,10 +2813,10 @@ button:focus-visible, input:focus-visible, select:focus-visible {
padding: 0.38rem; padding: 0.38rem;
border: 1px solid color-mix(in srgb, var(--border-light) 82%, transparent); border: 1px solid color-mix(in srgb, var(--border-light) 82%, transparent);
border-radius: 1rem; border-radius: 1rem;
background: rgba(15, 23, 42, 0.95); background: color-mix(in srgb, var(--card-bg) 95%, transparent);
box-shadow: box-shadow:
0 12px 28px color-mix(in srgb, #000000 22%, transparent), 0 12px 28px color-mix(in srgb, var(--bg) 22%, transparent),
inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent); inset 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
overflow: visible; overflow: visible;
} }
.tab { .tab {