Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-06-16 01:19:46 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix: introduce --accent-cyan-rgb to make all opacity variants theme-aware

Browse Source 
All files used hardcoded rgba(74, 163/158, 255, X) values in actual CSS
rules that CSS variable overrides couldn't touch. Solution: add
--accent-cyan-rgb triplet to variables.css root/light/enhanced blocks,
then replace every rgba(74,1xx,255,) occurrence across all CSS files
with rgba(var(--accent-cyan-rgb),). Enhanced tier sets the triplet to
200, 150, 40 (amber), so tscm.css panel bg, index.css card borders,
and all other tinted surfaces go amber automatically.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
James Smith
2026-05-20 08:53:25 +01:00
parent 9d41ffbb59
commit 5100f55586
20 changed files with 250 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/modes/acars.css
+6 -6
View File
@@ -28,7 +28,7 @@
transition: background 0.2s;
}
.main-acars-collapse-btn:hover {
background: rgba(74, 158, 255, 0.15);
background: rgba(var(--accent-cyan-rgb), 0.15);
}
.main-acars-collapse-label {
writing-mode: vertical-rl;
@@ -67,7 +67,7 @@
animation: fadeInMsg 0.3s ease;
}
.main-acars-msg:hover {
background: rgba(74, 158, 255, 0.05);
background: rgba(var(--accent-cyan-rgb), 0.05);
}
@keyframes fadeInMsg {
from { opacity: 0; transform: translateY(-3px); }
@@ -86,8 +86,8 @@
background: var(--accent-red) !important;
}
@keyframes acars-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 158, 255, 0.7); }
50% { opacity: 0.6; box-shadow: 0 0 6px 3px rgba(74, 158, 255, 0.3); }
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--accent-cyan-rgb), 0.7); }
50% { opacity: 0.6; box-shadow: 0 0 6px 3px rgba(var(--accent-cyan-rgb), 0.3); }
}
/* ACARS Standalone Message Feed */
@@ -106,10 +106,10 @@
transition: background 0.15s;
}
.acars-feed-card:hover {
background: rgba(74, 158, 255, 0.05);
background: rgba(var(--accent-cyan-rgb), 0.05);
}
/* Clickable ACARS sidebar messages (linked to tracked aircraft) */
.acars-message-item[style*="cursor: pointer"]:hover {
background: rgba(74, 158, 255, 0.1);
background: rgba(var(--accent-cyan-rgb), 0.1);
}
static/css/modes/aprs.css
+11 -11
View File
@@ -18,14 +18,14 @@
flex-direction: column;
align-items: center;
padding: 4px 10px;
background: rgba(74, 158, 255, 0.05);
border: 1px solid rgba(74, 158, 255, 0.15);
background: rgba(var(--accent-cyan-rgb), 0.05);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.15);
border-radius: 4px;
min-width: 55px;
}
.aprs-strip .strip-stat:hover {
background: rgba(74, 158, 255, 0.1);
border-color: rgba(74, 158, 255, 0.3);
background: rgba(var(--accent-cyan-rgb), 0.1);
border-color: rgba(var(--accent-cyan-rgb), 0.3);
}
.aprs-strip .strip-value {
font-family: var(--font-mono);
@@ -114,8 +114,8 @@
/* Buttons */
.aprs-strip .strip-btn {
background: rgba(74, 158, 255, 0.1);
border: 1px solid rgba(74, 158, 255, 0.2);
background: rgba(var(--accent-cyan-rgb), 0.1);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
color: var(--text-primary);
padding: 6px 12px;
border-radius: 4px;
@@ -126,8 +126,8 @@
white-space: nowrap;
}
.aprs-strip .strip-btn:hover:not(:disabled) {
background: rgba(74, 158, 255, 0.2);
border-color: rgba(74, 158, 255, 0.4);
background: rgba(var(--accent-cyan-rgb), 0.2);
border-color: rgba(var(--accent-cyan-rgb), 0.4);
}
.aprs-strip .strip-btn.primary {
background: linear-gradient(135deg, var(--accent-green) 0%, #10b981 100%);
@@ -223,8 +223,8 @@
.aprs-status-dot.tracking { background: var(--accent-green); }
.aprs-status-dot.error { background: var(--accent-red); }
@keyframes aprs-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 158, 255, 0.7); }
50% { opacity: 0.6; box-shadow: 0 0 8px 4px rgba(74, 158, 255, 0.3); }
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--accent-cyan-rgb), 0.7); }
50% { opacity: 0.6; box-shadow: 0 0 8px 4px rgba(var(--accent-cyan-rgb), 0.3); }
}
.aprs-status-text {
font-size: 10px;
@@ -339,7 +339,7 @@
gap: 5px;
padding: 2px 7px 2px 5px;
border-radius: 999px;
border: 1px solid rgba(74, 158, 255, 0.35);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.35);
background: rgba(10, 18, 28, 0.88);
color: var(--text-primary);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
static/css/modes/meshtastic.css
+4 -4
View File
@@ -650,9 +650,9 @@
}
.mesh-badge-primary {
background: rgba(74, 158, 255, 0.15);
background: rgba(var(--accent-cyan-rgb), 0.15);
color: var(--accent-cyan);
border: 1px solid rgba(74, 158, 255, 0.3);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
}
.mesh-badge-secondary {
@@ -1349,7 +1349,7 @@
}
.mesh-traceroute-snr.snr-ok {
background: rgba(74, 158, 255, 0.15);
background: rgba(var(--accent-cyan-rgb), 0.15);
color: var(--accent-cyan);
}
@@ -1572,7 +1572,7 @@
}
.mesh-network-neighbor-snr.snr-ok {
background: rgba(74, 158, 255, 0.15);
background: rgba(var(--accent-cyan-rgb), 0.15);
color: var(--accent-cyan);
}
static/css/modes/spy-stations.css
+2 -2
View File
@@ -128,9 +128,9 @@
}
.spy-badge-number {
background: rgba(74, 158, 255, 0.15);
background: rgba(var(--accent-cyan-rgb), 0.15);
color: var(--accent-cyan);
border: 1px solid rgba(74, 158, 255, 0.3);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
}
.spy-badge-diplomatic {
static/css/modes/tscm.css
+13 -13
View File
@@ -102,7 +102,7 @@
transition: background 0.2s;
}
.tscm-device-item:hover {
background: rgba(74,158,255,0.1);
background: rgba(var(--accent-cyan-rgb),0.1);
}
.tscm-device-item.new {
border-left-color: var(--severity-high);
@@ -212,9 +212,9 @@
font-size: 9px;
padding: 1px 4px;
border-radius: 3px;
background: rgba(74, 158, 255, 0.2);
background: rgba(var(--accent-cyan-rgb), 0.2);
color: var(--accent-cyan);
border: 1px solid rgba(74, 158, 255, 0.4);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.4);
text-transform: uppercase;
letter-spacing: 0.4px;
}
@@ -544,8 +544,8 @@
padding: 12px 16px;
font-size: 10px;
color: var(--text-secondary);
background: rgba(74, 158, 255, 0.1);
border-top: 1px solid rgba(74, 158, 255, 0.3);
background: rgba(var(--accent-cyan-rgb), 0.1);
border-top: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
}
.tscm-threat-action {
margin-top: 6px;
@@ -605,7 +605,7 @@
.protocol-badge {
font-size: 9px;
padding: 2px 6px;
background: rgba(74, 158, 255, 0.2);
background: rgba(var(--accent-cyan-rgb), 0.2);
color: var(--accent-cyan);
border-radius: 3px;
text-transform: uppercase;
@@ -709,7 +709,7 @@
}
.scanner-track {
fill: none;
stroke: rgba(74,158,255,0.1);
stroke: rgba(var(--accent-cyan-rgb),0.1);
stroke-width: 4;
}
.scanner-progress {
@@ -1081,7 +1081,7 @@
transition: background 0.2s;
}
.case-item:hover {
background: rgba(74, 158, 255, 0.1);
background: rgba(var(--accent-cyan-rgb), 0.1);
}
.case-item.priority-high { border-left-color: var(--accent-red); }
.case-item.priority-normal { border-left-color: var(--accent-cyan); }
@@ -1359,7 +1359,7 @@
.known-device-type {
font-size: 9px;
padding: 2px 6px;
background: rgba(74, 158, 255, 0.2);
background: rgba(var(--accent-cyan-rgb), 0.2);
color: var(--accent-cyan);
border-radius: 3px;
margin-left: 8px;
@@ -1557,8 +1557,8 @@
gap: 8px;
padding: 8px 10px;
margin-bottom: 10px;
background: rgba(74, 158, 255, 0.12);
border: 1px solid rgba(74, 158, 255, 0.3);
background: rgba(var(--accent-cyan-rgb), 0.12);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
border-radius: 6px;
font-size: 11px;
}
@@ -1569,9 +1569,9 @@
margin-left: auto;
font-size: 9px;
padding: 2px 6px;
background: rgba(74, 158, 255, 0.2);
background: rgba(var(--accent-cyan-rgb), 0.2);
color: #9ed0ff;
border: 1px solid rgba(74, 158, 255, 0.4);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.4);
border-radius: 3px;
cursor: pointer;
}
static/css/modes/vdl2.css
+3 -3
View File
@@ -12,8 +12,8 @@
background: var(--accent-red) !important;
}
@keyframes vdl2-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 158, 255, 0.7); }
50% { opacity: 0.6; box-shadow: 0 0 6px 3px rgba(74, 158, 255, 0.3); }
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--accent-cyan-rgb), 0.7); }
50% { opacity: 0.6; box-shadow: 0 0 6px 3px rgba(var(--accent-cyan-rgb), 0.3); }
}
/* VDL2 message animation */
@@ -23,7 +23,7 @@
animation: vdl2FadeIn 0.3s ease;
}
.vdl2-msg:hover {
background: rgba(74, 158, 255, 0.05);
background: rgba(var(--accent-cyan-rgb), 0.05);
}
@keyframes vdl2FadeIn {
from { opacity: 0; transform: translateY(-3px); }
static/css/modes/waterfall.css
+16 -16
View File
@@ -39,8 +39,8 @@
.wf-headline-tag {
border-radius: 999px;
padding: 1px 8px;
border: 1px solid rgba(74, 163, 255, 0.45);
background: rgba(74, 163, 255, 0.13);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.45);
background: rgba(var(--accent-cyan-rgb), 0.13);
color: #8ec5ff;
font-size: 10px;
font-family: var(--font-mono, monospace);
@@ -404,12 +404,12 @@
}
.wf-step-btn:hover {
background: rgba(74, 163, 255, 0.17);
border-color: rgba(74, 163, 255, 0.45);
background: rgba(var(--accent-cyan-rgb), 0.17);
border-color: rgba(var(--accent-cyan-rgb), 0.45);
}
.wf-step-btn:active {
background: rgba(74, 163, 255, 0.28);
background: rgba(var(--accent-cyan-rgb), 0.28);
}
.wf-zoom-btn {
@@ -422,7 +422,7 @@
align-items: center;
gap: 5px;
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(74, 163, 255, 0.28);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.28);
border-radius: 5px;
padding: 3px 8px;
flex-shrink: 0;
@@ -652,7 +652,7 @@
.wf-resize-handle:hover,
.wf-resize-handle.dragging {
background: rgba(74, 163, 255, 0.14);
background: rgba(var(--accent-cyan-rgb), 0.14);
}
.wf-resize-grip {
@@ -665,7 +665,7 @@
.wf-resize-handle:hover .wf-resize-grip,
.wf-resize-handle.dragging .wf-resize-grip {
background: rgba(74, 163, 255, 0.6);
background: rgba(var(--accent-cyan-rgb), 0.6);
}
/* Waterfall canvas */
@@ -705,7 +705,7 @@
.wf-tune-line {
left: calc(50% - 0.5px);
background: rgba(130, 220, 255, 0.75);
box-shadow: 0 0 8px rgba(74, 163, 255, 0.4);
box-shadow: 0 0 8px rgba(var(--accent-cyan-rgb), 0.4);
opacity: 0;
transition: opacity 140ms ease;
}
@@ -760,7 +760,7 @@
display: none;
z-index: 10;
white-space: nowrap;
border: 1px solid rgba(74, 163, 255, 0.22);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.22);
}
@media (max-width: 1023px) {
@@ -904,13 +904,13 @@
.wf-side-box {
margin-top: 8px;
padding: 8px;
border: 1px solid rgba(74, 163, 255, 0.2);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
border-radius: 6px;
background: rgba(0, 0, 0, 0.25);
}
.wf-side-box-muted {
border-color: rgba(74, 163, 255, 0.14);
border-color: rgba(var(--accent-cyan-rgb), 0.14);
background: rgba(0, 0, 0, 0.2);
}
@@ -984,7 +984,7 @@
align-items: center;
gap: 6px;
background: rgba(0, 0, 0, 0.24);
border: 1px solid rgba(74, 163, 255, 0.16);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.16);
border-radius: 5px;
padding: 5px 7px;
min-width: 0;
@@ -1067,7 +1067,7 @@
.wf-scan-metric-card {
background: rgba(0, 0, 0, 0.24);
border: 1px solid rgba(74, 163, 255, 0.18);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.18);
border-radius: 6px;
padding: 7px 6px;
text-align: center;
@@ -1092,7 +1092,7 @@
margin-top: 8px;
max-height: 145px;
overflow: auto;
border: 1px solid rgba(74, 163, 255, 0.16);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.16);
border-radius: 6px;
}
@@ -1146,7 +1146,7 @@
margin-top: 8px;
max-height: 130px;
overflow-y: auto;
border: 1px solid rgba(74, 163, 255, 0.16);
border: 1px solid rgba(var(--accent-cyan-rgb), 0.16);
border-radius: 6px;
background: rgba(0, 0, 0, 0.2);
padding: 6px;