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

fix: Resolve TSCM function strip visibility and clipping issues

Browse Source 
- Fix function strip content being clipped by changing overflow to visible
- Add min-height and increased padding to function strip
- Add explicit colors for TSCM strip stat values and labels
- Fix output-panel overflow for TSCM mode using :has() selector
- Add CSS variables --bg-dark and --bg-panel aliases
- Clean up sidebar section margins for consistent spacing
- Add unique IDs to WiFi/Bluetooth export sections for restore function

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-30 15:40:10 +00:00
parent 68d831dbe3
commit 978e6cdaea
17 changed files with 704 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/components/function-strip.css
+30 -8
View File
@@ -6,9 +6,10 @@
background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-dark) 100%);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 6px 12px;
padding: 8px 12px;
margin-bottom: 10px;
overflow-x: auto;
overflow: visible;
min-height: 44px;
}
.function-strip-inner {
@@ -23,7 +24,7 @@
display: flex;
flex-direction: column;
align-items: center;
padding: 4px 10px;
padding: 6px 10px;
background: rgba(74, 158, 255, 0.05);
border: 1px solid rgba(74, 158, 255, 0.15);
border-radius: 4px;
@@ -307,16 +308,37 @@
color: var(--accent-orange);
}
.function-strip.tscm-strip {
margin-top: 4px; /* Extra clearance to prevent top clipping */
}
.function-strip.tscm-strip .strip-stat {
background: rgba(255, 59, 48, 0.05);
border-color: rgba(255, 59, 48, 0.15);
background: rgba(255, 59, 48, 0.15);
border: 1px solid rgba(255, 59, 48, 0.4);
}
.function-strip.tscm-strip .strip-stat:hover {
background: rgba(255, 59, 48, 0.1);
border-color: rgba(255, 59, 48, 0.3);
background: rgba(255, 59, 48, 0.25);
border-color: rgba(255, 59, 48, 0.6);
}
.function-strip.tscm-strip .strip-value {
color: var(--accent-red);
color: #ef4444; /* Explicit red color */
}
.function-strip.tscm-strip .strip-label {
color: #9ca3af; /* Explicit light gray */
}
.function-strip.tscm-strip .strip-select {
color: #e8eaed; /* Explicit white for selects */
background: rgba(0, 0, 0, 0.4);
}
.function-strip.tscm-strip .strip-btn {
color: #e8eaed; /* Explicit white for buttons */
}
.function-strip.tscm-strip .strip-tool {
color: #e8eaed; /* Explicit white for tool indicators */
}
.function-strip.tscm-strip .strip-time,
.function-strip.tscm-strip .strip-status span {
color: #9ca3af; /* Explicit gray for status/time */
}
.function-strip.rtlamr-strip .strip-stat {
static/css/core/layout.css
+1 -1
View File
@@ -593,7 +593,7 @@
border-bottom: 1px solid var(--border-color);
padding: 0 20px;
position: relative;
z-index: 10;
z-index: 100;
}
@media (min-width: 1024px) {
static/css/core/variables.css
+8
View File
@@ -17,6 +17,10 @@
--bg-elevated: #1a202c;
--bg-overlay: rgba(0, 0, 0, 0.7);
/* Background aliases for components */
--bg-dark: var(--bg-primary);
--bg-panel: var(--bg-secondary);
/* Accent colors */
--accent-cyan: #4a9eff;
--accent-cyan-dim: rgba(74, 158, 255, 0.15);
@@ -150,6 +154,10 @@
--bg-elevated: #f8fafc;
--bg-overlay: rgba(255, 255, 255, 0.9);
/* Background aliases for components */
--bg-dark: var(--bg-primary);
--bg-panel: var(--bg-secondary);
--accent-cyan: #2563eb;
--accent-cyan-dim: rgba(37, 99, 235, 0.1);
--accent-cyan-hover: #1d4ed8;
static/css/index.css
+96
View File
@@ -1414,6 +1414,7 @@ header h1 .tagline {
overflow: visible;
padding: 12px;
position: relative;
margin: 0; /* Reset any inherited margins - spacing handled by parent gap */
}
.section h3 {
@@ -1590,6 +1591,101 @@ header h1 .tagline {
border-color: var(--accent-cyan);
}
/* WiFi Mode Tab Buttons */
.wifi-mode-tab {
flex: 1;
padding: 8px;
font-size: 11px;
font-family: 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: 0.05em;
background: var(--bg-tertiary);
color: var(--text-secondary);
border: 1px solid var(--border-color);
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
}
.wifi-mode-tab:hover {
background: var(--bg-secondary);
color: var(--text-primary);
border-color: var(--accent-cyan);
}
.wifi-mode-tab.active {
background: var(--accent-green);
color: #000;
border-color: var(--accent-green);
}
.wifi-mode-tab.active:hover {
background: #1db954;
border-color: #1db954;
}
/* WiFi Start/Stop Buttons */
.wifi-start-btn {
background: var(--accent-green) !important;
color: #000 !important;
border-color: var(--accent-green) !important;
}
.wifi-start-btn:hover {
background: #1db954 !important;
border-color: #1db954 !important;
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}
.wifi-stop-btn {
background: var(--accent-red) !important;
color: #fff !important;
border-color: var(--accent-red) !important;
}
.wifi-stop-btn:hover {
background: #e62e50 !important;
border-color: #e62e50 !important;
box-shadow: 0 2px 8px rgba(255, 51, 102, 0.3);
}
/* WiFi Monitor Mode Buttons */
.wifi-monitor-btn {
background: var(--accent-green) !important;
color: #000 !important;
border-color: var(--accent-green) !important;
}
.wifi-monitor-btn:hover {
background: #1db954 !important;
border-color: #1db954 !important;
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}
.wifi-monitor-stop-btn {
background: var(--accent-orange) !important;
color: #000 !important;
border-color: var(--accent-orange) !important;
}
.wifi-monitor-stop-btn:hover {
background: #e68a00 !important;
border-color: #e68a00 !important;
box-shadow: 0 2px 8px rgba(255, 159, 28, 0.3);
}
/* WiFi Danger/Attack Buttons */
.wifi-danger-btn {
border-color: var(--accent-red) !important;
color: var(--accent-red) !important;
}
.wifi-danger-btn:hover {
background: var(--accent-red) !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(255, 51, 102, 0.3);
}
.run-btn {
width: 100%;
padding: 12px;
static/css/modes/tscm.css
+7 -2
View File
@@ -32,12 +32,17 @@
.threat-card.low.active { background: rgba(0,255,136,0.2); }
/* TSCM Dashboard */
/* Ensure output-panel doesn't clip TSCM content */
.output-panel:has(.tscm-dashboard) {
overflow: visible;
}
.tscm-dashboard {
display: flex;
flex-direction: column;
gap: 16px;
overflow-y: auto;
padding-bottom: 80px; /* Space for status bar */
overflow: visible;
padding: 20px 16px 80px 16px; /* Extra top padding for function strip visibility */
}
.tscm-threat-banner {
display: flex;