Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-06-17 18:09:45 -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/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;
}