mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 22:59:59 -07:00
feat: UI/UX overhaul — CSS cleanup, accessibility, error handling, inline style extraction
Phase 0 — CSS-only fixes: - Fix --font-mono to use real monospace stack (JetBrains Mono, Fira Code, etc.) - Replace hardcoded hex colors with CSS variables across 16+ files - Merge global-nav.css (507 lines) into layout.css, delete original - Reduce !important in responsive.css from 71 to 8 via .app-shell specificity - Standardize breakpoints to 480/768/1024/1280px Phase 1 — Loading states & SSE connection feedback: - Add centralized SSEManager (sse-manager.js) with exponential backoff - Add SSE status indicator dot in nav bar - Add withLoadingButton() + .btn-loading CSS spinner - Add mode section crossfade transitions Phase 2 — Accessibility: - Add aria-labels to icon-only buttons across mode partials - Add for/id associations to 42 form labels in 5 mode partials - Add aria-live on toast stack, enableListKeyNav() utility Phase 3 — Destructive action guards & list overflow: - Add confirmAction() styled modal, replace all 25 native confirm() calls - Add toast cap at 5 simultaneous toasts - Add list overflow indicator CSS Phase 4 — Inline style extraction: - Refactor switchMode() in app.js and index.html to use classList.toggle() - Add CSS toggle rules for all switchMode-controlled elements - Remove inline style="display:none" from 7+ HTML elements - Add utility classes (.hidden, .d-flex, .d-grid, etc.) Phase 5 — Mobile UX polish: - pre/code overflow handling already in place - Touch target sizing via --touch-min variable Phase 6 — Error handling consistency: - Add reportActionableError() to user-facing catch blocks in 5 mode JS files - 28 error toast additions alongside existing console.error calls Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Smittix
@@ -513,7 +513,7 @@
|
||||
RESPONSIVE — stack HUD vertically on narrow
|
||||
============================================ */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@media (max-width: 1023px) {
|
||||
.btl-hud {
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
|
||||
@@ -1378,7 +1378,7 @@
|
||||
}
|
||||
|
||||
/* Responsive traceroute path */
|
||||
@media (max-width: 600px) {
|
||||
@media (max-width: 480px) {
|
||||
.mesh-traceroute-path {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@@ -451,7 +451,7 @@
|
||||
|
||||
/* ── Responsive ── */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@media (max-width: 1023px) {
|
||||
.ms-stats-strip {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
@@ -460,7 +460,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@media (max-width: 480px) {
|
||||
.ms-stats-strip {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@@ -67,7 +67,7 @@
|
||||
|
||||
.ook-warning {
|
||||
font-size: 11px;
|
||||
color: #ffaa00;
|
||||
color: var(--accent-orange);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
@@ -221,7 +221,7 @@
|
||||
}
|
||||
|
||||
/* Responsive: stack cards on narrow screens */
|
||||
@media (max-width: 600px) {
|
||||
@media (max-width: 480px) {
|
||||
.radiosonde-card {
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
|
||||
@@ -408,7 +408,7 @@
|
||||
}
|
||||
|
||||
/* Small tablet / large phone (640px) */
|
||||
@media (max-width: 640px) {
|
||||
@media (max-width: 768px) {
|
||||
.spy-station-footer {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
@@ -1582,13 +1582,13 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@media (max-width: 1280px) {
|
||||
.subghz-rx-info-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@media (max-width: 1023px) {
|
||||
.subghz-decode-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@@ -22,13 +22,13 @@
|
||||
opacity: 0.7;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.threat-card.critical { border-color: #ff3366; color: #ff3366; }
|
||||
.threat-card.critical { border-color: var(--severity-critical); color: var(--severity-critical); }
|
||||
.threat-card.critical.active { background: rgba(255,51,102,0.2); }
|
||||
.threat-card.high { border-color: #ff9933; color: #ff9933; }
|
||||
.threat-card.high { border-color: var(--severity-high); color: var(--severity-high); }
|
||||
.threat-card.high.active { background: rgba(255,153,51,0.2); }
|
||||
.threat-card.medium { border-color: #ffcc00; color: #ffcc00; }
|
||||
.threat-card.medium { border-color: var(--severity-medium); color: var(--severity-medium); }
|
||||
.threat-card.medium.active { background: rgba(255,204,0,0.2); }
|
||||
.threat-card.low { border-color: #00ff88; color: #00ff88; }
|
||||
.threat-card.low { border-color: var(--severity-low); color: var(--severity-low); }
|
||||
.threat-card.low.active { background: rgba(0,255,136,0.2); }
|
||||
|
||||
/* TSCM Dashboard */
|
||||
@@ -105,26 +105,26 @@
|
||||
background: rgba(74,158,255,0.1);
|
||||
}
|
||||
.tscm-device-item.new {
|
||||
border-left-color: #ff9933;
|
||||
border-left-color: var(--severity-high);
|
||||
animation: pulse-glow 2s infinite;
|
||||
}
|
||||
.tscm-device-item.threat {
|
||||
border-left-color: #ff3366;
|
||||
border-left-color: var(--severity-critical);
|
||||
}
|
||||
.tscm-device-item.baseline {
|
||||
border-left-color: #00ff88;
|
||||
border-left-color: var(--neon-green);
|
||||
}
|
||||
/* Classification colors */
|
||||
.tscm-device-item.classification-green {
|
||||
border-left-color: #00cc00;
|
||||
border-left-color: var(--accent-green);
|
||||
background: rgba(0, 204, 0, 0.1);
|
||||
}
|
||||
.tscm-device-item.classification-yellow {
|
||||
border-left-color: #ffcc00;
|
||||
border-left-color: var(--severity-medium);
|
||||
background: rgba(255, 204, 0, 0.1);
|
||||
}
|
||||
.tscm-device-item.classification-red {
|
||||
border-left-color: #ff3333;
|
||||
border-left-color: var(--accent-red);
|
||||
background: rgba(255, 51, 51, 0.15);
|
||||
animation: pulse-glow 2s infinite;
|
||||
}
|
||||
@@ -182,7 +182,7 @@
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.tscm-action-btn:hover {
|
||||
background: #2ecc71;
|
||||
background: var(--accent-green-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.tscm-device-reasons {
|
||||
@@ -202,7 +202,7 @@
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 51, 102, 0.2);
|
||||
color: #ff3366;
|
||||
color: var(--severity-critical);
|
||||
border: 1px solid rgba(255, 51, 102, 0.4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
@@ -213,7 +213,7 @@
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
background: rgba(74, 158, 255, 0.2);
|
||||
color: #4a9eff;
|
||||
color: var(--accent-cyan);
|
||||
border: 1px solid rgba(74, 158, 255, 0.4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
@@ -224,7 +224,7 @@
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
background: rgba(0, 255, 136, 0.2);
|
||||
color: #00ff88;
|
||||
color: var(--neon-green);
|
||||
border: 1px solid rgba(0, 255, 136, 0.4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
@@ -268,20 +268,20 @@
|
||||
}
|
||||
.score-badge.score-low {
|
||||
background: rgba(0, 204, 0, 0.2);
|
||||
color: #00cc00;
|
||||
color: var(--accent-green);
|
||||
}
|
||||
.score-badge.score-medium {
|
||||
background: rgba(255, 204, 0, 0.2);
|
||||
color: #ffcc00;
|
||||
color: var(--severity-medium);
|
||||
}
|
||||
.score-badge.score-high {
|
||||
background: rgba(255, 51, 51, 0.2);
|
||||
color: #ff3333;
|
||||
color: var(--accent-red);
|
||||
}
|
||||
.tscm-action {
|
||||
margin-top: 4px;
|
||||
font-size: 10px;
|
||||
color: #ff9933;
|
||||
color: var(--severity-high);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -290,12 +290,12 @@
|
||||
padding: 12px;
|
||||
background: rgba(255, 153, 51, 0.1);
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ff9933;
|
||||
border: 1px solid var(--severity-high);
|
||||
}
|
||||
.tscm-correlations h4 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 12px;
|
||||
color: #ff9933;
|
||||
color: var(--severity-high);
|
||||
}
|
||||
.correlation-item {
|
||||
padding: 8px;
|
||||
@@ -332,9 +332,9 @@
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.summary-stat.high-interest .count { color: #ff3333; }
|
||||
.summary-stat.needs-review .count { color: #ffcc00; }
|
||||
.summary-stat.informational .count { color: #00cc00; }
|
||||
.summary-stat.high-interest .count { color: var(--accent-red); }
|
||||
.summary-stat.needs-review .count { color: var(--severity-medium); }
|
||||
.summary-stat.informational .count { color: var(--accent-green); }
|
||||
.tscm-assessment {
|
||||
padding: 10px 14px;
|
||||
margin: 12px 0;
|
||||
@@ -343,18 +343,18 @@
|
||||
}
|
||||
.tscm-assessment.high-interest {
|
||||
background: rgba(255, 51, 51, 0.15);
|
||||
border: 1px solid #ff3333;
|
||||
color: #ff3333;
|
||||
border: 1px solid var(--accent-red);
|
||||
color: var(--accent-red);
|
||||
}
|
||||
.tscm-assessment.needs-review {
|
||||
background: rgba(255, 204, 0, 0.15);
|
||||
border: 1px solid #ffcc00;
|
||||
color: #ffcc00;
|
||||
border: 1px solid var(--severity-medium);
|
||||
color: var(--severity-medium);
|
||||
}
|
||||
.tscm-assessment.informational {
|
||||
background: rgba(0, 204, 0, 0.15);
|
||||
border: 1px solid #00cc00;
|
||||
color: #00cc00;
|
||||
border: 1px solid var(--accent-green);
|
||||
color: var(--accent-green);
|
||||
}
|
||||
.tscm-disclaimer {
|
||||
font-size: 10px;
|
||||
@@ -452,16 +452,16 @@
|
||||
justify-content: center;
|
||||
border: 3px solid;
|
||||
}
|
||||
.score-circle.high { border-color: #ff3333; background: rgba(255, 51, 51, 0.1); }
|
||||
.score-circle.medium { border-color: #ffcc00; background: rgba(255, 204, 0, 0.1); }
|
||||
.score-circle.low { border-color: #00cc00; background: rgba(0, 204, 0, 0.1); }
|
||||
.score-circle.high { border-color: var(--accent-red); background: rgba(255, 51, 51, 0.1); }
|
||||
.score-circle.medium { border-color: var(--severity-medium); background: rgba(255, 204, 0, 0.1); }
|
||||
.score-circle.low { border-color: var(--accent-green); background: rgba(0, 204, 0, 0.1); }
|
||||
.score-circle .score-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.score-circle.high .score-value { color: #ff3333; }
|
||||
.score-circle.medium .score-value { color: #ffcc00; }
|
||||
.score-circle.low .score-value { color: #00cc00; }
|
||||
.score-circle.high .score-value { color: var(--accent-red); }
|
||||
.score-circle.medium .score-value { color: var(--severity-medium); }
|
||||
.score-circle.low .score-value { color: var(--accent-green); }
|
||||
.score-circle .score-label {
|
||||
font-size: 8px;
|
||||
color: var(--text-muted);
|
||||
@@ -521,7 +521,7 @@
|
||||
}
|
||||
.indicator-type {
|
||||
background: rgba(255, 153, 51, 0.2);
|
||||
color: #ff9933;
|
||||
color: var(--severity-high);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
@@ -550,7 +550,7 @@
|
||||
.tscm-threat-action {
|
||||
margin-top: 6px;
|
||||
font-size: 10px;
|
||||
color: #ff9933;
|
||||
color: var(--severity-high);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -606,7 +606,7 @@
|
||||
font-size: 9px;
|
||||
padding: 2px 6px;
|
||||
background: rgba(74, 158, 255, 0.2);
|
||||
color: #4a9eff;
|
||||
color: var(--accent-cyan);
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -614,7 +614,7 @@
|
||||
font-size: 9px;
|
||||
padding: 2px 6px;
|
||||
background: rgba(255, 153, 51, 0.2);
|
||||
color: #ff9933;
|
||||
color: var(--severity-high);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.correlation-detail-item {
|
||||
@@ -634,10 +634,10 @@
|
||||
background: rgba(0,0,0,0.2);
|
||||
border: 1px solid;
|
||||
}
|
||||
.tscm-threat-item.critical { border-color: #ff3366; background: rgba(255,51,102,0.1); }
|
||||
.tscm-threat-item.high { border-color: #ff9933; background: rgba(255,153,51,0.1); }
|
||||
.tscm-threat-item.medium { border-color: #ffcc00; background: rgba(255,204,0,0.1); }
|
||||
.tscm-threat-item.low { border-color: #00ff88; background: rgba(0,255,136,0.1); }
|
||||
.tscm-threat-item.critical { border-color: var(--severity-critical); background: rgba(255,51,102,0.1); }
|
||||
.tscm-threat-item.high { border-color: var(--severity-high); background: rgba(255,153,51,0.1); }
|
||||
.tscm-threat-item.medium { border-color: var(--severity-medium); background: rgba(255,204,0,0.1); }
|
||||
.tscm-threat-item.low { border-color: var(--severity-low); background: rgba(0,255,136,0.1); }
|
||||
.tscm-threat-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -807,7 +807,7 @@
|
||||
.meeting-pulse {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ff3366;
|
||||
background: var(--severity-critical);
|
||||
border-radius: 50%;
|
||||
animation: pulse-dot 1.5s ease-in-out infinite;
|
||||
}
|
||||
@@ -819,7 +819,7 @@
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
color: #ff3366;
|
||||
color: var(--severity-critical);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.meeting-info {
|
||||
@@ -865,15 +865,15 @@
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.cap-status.available { color: #00cc00; }
|
||||
.cap-status.limited { color: #ffcc00; }
|
||||
.cap-status.unavailable { color: #ff3333; }
|
||||
.cap-status.available { color: var(--accent-green); }
|
||||
.cap-status.limited { color: var(--severity-medium); }
|
||||
.cap-status.unavailable { color: var(--accent-red); }
|
||||
.cap-limitations {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #ff9933;
|
||||
color: var(--severity-high);
|
||||
font-size: 10px;
|
||||
}
|
||||
.cap-warn {
|
||||
@@ -907,15 +907,15 @@
|
||||
}
|
||||
.health-badge.healthy {
|
||||
background: rgba(0, 204, 0, 0.2);
|
||||
color: #00cc00;
|
||||
color: var(--accent-green);
|
||||
}
|
||||
.health-badge.noisy {
|
||||
background: rgba(255, 204, 0, 0.2);
|
||||
color: #ffcc00;
|
||||
color: var(--severity-medium);
|
||||
}
|
||||
.health-badge.stale {
|
||||
background: rgba(255, 51, 51, 0.2);
|
||||
color: #ff3333;
|
||||
color: var(--accent-red);
|
||||
}
|
||||
.health-age {
|
||||
color: var(--text-muted);
|
||||
@@ -998,9 +998,9 @@
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid var(--border-color);
|
||||
}
|
||||
.cap-detail-item.available { border-left-color: #00cc00; }
|
||||
.cap-detail-item.limited { border-left-color: #ffcc00; }
|
||||
.cap-detail-item.unavailable { border-left-color: #ff3333; }
|
||||
.cap-detail-item.available { border-left-color: var(--accent-green); }
|
||||
.cap-detail-item.limited { border-left-color: var(--severity-medium); }
|
||||
.cap-detail-item.unavailable { border-left-color: var(--accent-red); }
|
||||
.cap-detail-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -1016,9 +1016,9 @@
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.cap-detail-status.available { background: rgba(0, 204, 0, 0.2); color: #00cc00; }
|
||||
.cap-detail-status.limited { background: rgba(255, 204, 0, 0.2); color: #ffcc00; }
|
||||
.cap-detail-status.unavailable { background: rgba(255, 51, 51, 0.2); color: #ff3333; }
|
||||
.cap-detail-status.available { background: rgba(0, 204, 0, 0.2); color: var(--accent-green); }
|
||||
.cap-detail-status.limited { background: rgba(255, 204, 0, 0.2); color: var(--severity-medium); }
|
||||
.cap-detail-status.unavailable { background: rgba(255, 51, 51, 0.2); color: var(--accent-red); }
|
||||
.cap-detail-limits {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
@@ -1034,7 +1034,7 @@
|
||||
margin-bottom: 6px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid #00cc00;
|
||||
border-left: 3px solid var(--accent-green);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -1064,7 +1064,7 @@
|
||||
}
|
||||
.known-device-btn.remove {
|
||||
background: rgba(255, 51, 51, 0.2);
|
||||
color: #ff3333;
|
||||
color: var(--accent-red);
|
||||
}
|
||||
.known-device-btn.remove:hover {
|
||||
background: rgba(255, 51, 51, 0.4);
|
||||
@@ -1083,9 +1083,9 @@
|
||||
.case-item:hover {
|
||||
background: rgba(74, 158, 255, 0.1);
|
||||
}
|
||||
.case-item.priority-high { border-left-color: #ff3333; }
|
||||
.case-item.priority-normal { border-left-color: #4a9eff; }
|
||||
.case-item.priority-low { border-left-color: #00cc00; }
|
||||
.case-item.priority-high { border-left-color: var(--accent-red); }
|
||||
.case-item.priority-normal { border-left-color: var(--accent-cyan); }
|
||||
.case-item.priority-low { border-left-color: var(--accent-green); }
|
||||
.case-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -1102,8 +1102,8 @@
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.case-status.open { background: rgba(0, 204, 0, 0.2); color: #00cc00; }
|
||||
.case-status.closed { background: rgba(128, 128, 128, 0.2); color: #888; }
|
||||
.case-status.open { background: rgba(0, 204, 0, 0.2); color: var(--accent-green); }
|
||||
.case-status.closed { background: rgba(128, 128, 128, 0.2); color: var(--text-secondary); }
|
||||
.case-meta {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
@@ -1117,7 +1117,7 @@
|
||||
margin-bottom: 8px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid #ff9933;
|
||||
border-left: 3px solid var(--severity-high);
|
||||
}
|
||||
.playbook-header {
|
||||
display: flex;
|
||||
@@ -1135,9 +1135,9 @@
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.playbook-risk.high_interest { background: rgba(255, 51, 51, 0.2); color: #ff3333; }
|
||||
.playbook-risk.needs_review { background: rgba(255, 204, 0, 0.2); color: #ffcc00; }
|
||||
.playbook-risk.informational { background: rgba(0, 204, 0, 0.2); color: #00cc00; }
|
||||
.playbook-risk.high_interest { background: rgba(255, 51, 51, 0.2); color: var(--accent-red); }
|
||||
.playbook-risk.needs_review { background: rgba(255, 204, 0, 0.2); color: var(--severity-medium); }
|
||||
.playbook-risk.informational { background: rgba(0, 204, 0, 0.2); color: var(--accent-green); }
|
||||
.playbook-desc {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
@@ -1153,7 +1153,7 @@
|
||||
border-radius: 3px;
|
||||
}
|
||||
.playbook-step-num {
|
||||
color: #ff9933;
|
||||
color: var(--severity-high);
|
||||
font-weight: 600;
|
||||
margin-right: 6px;
|
||||
}
|
||||
@@ -1223,19 +1223,19 @@
|
||||
}
|
||||
.proximity-badge.very_close {
|
||||
background: rgba(255, 51, 51, 0.2);
|
||||
color: #ff3333;
|
||||
color: var(--accent-red);
|
||||
}
|
||||
.proximity-badge.close {
|
||||
background: rgba(255, 153, 51, 0.2);
|
||||
color: #ff9933;
|
||||
color: var(--severity-high);
|
||||
}
|
||||
.proximity-badge.moderate {
|
||||
background: rgba(255, 204, 0, 0.2);
|
||||
color: #ffcc00;
|
||||
color: var(--severity-medium);
|
||||
}
|
||||
.proximity-badge.far {
|
||||
background: rgba(0, 204, 0, 0.2);
|
||||
color: #00cc00;
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
/* Add to Known Device Button */
|
||||
@@ -1243,7 +1243,7 @@
|
||||
padding: 4px 8px;
|
||||
font-size: 10px;
|
||||
background: rgba(0, 204, 0, 0.2);
|
||||
color: #00cc00;
|
||||
color: var(--accent-green);
|
||||
border: 1px solid rgba(0, 204, 0, 0.3);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
@@ -1307,15 +1307,15 @@
|
||||
/* Modal Header Classification Colors */
|
||||
.device-detail-header.classification-cyan {
|
||||
background: linear-gradient(135deg, rgba(0, 204, 255, 0.2) 0%, rgba(0, 150, 200, 0.1) 100%);
|
||||
border-bottom: 2px solid #00ccff;
|
||||
border-bottom: 2px solid var(--accent-cyan);
|
||||
}
|
||||
.device-detail-header.classification-orange {
|
||||
background: linear-gradient(135deg, rgba(255, 153, 51, 0.2) 0%, rgba(200, 120, 40, 0.1) 100%);
|
||||
border-bottom: 2px solid #ff9933;
|
||||
border-bottom: 2px solid var(--severity-high);
|
||||
}
|
||||
.device-detail-header.classification-green {
|
||||
background: linear-gradient(135deg, rgba(0, 204, 0, 0.2) 0%, rgba(0, 150, 0, 0.1) 100%);
|
||||
border-bottom: 2px solid #00cc00;
|
||||
border-bottom: 2px solid var(--accent-green);
|
||||
}
|
||||
|
||||
/* Playbook Enhancements */
|
||||
@@ -1330,7 +1330,7 @@
|
||||
font-size: 9px;
|
||||
padding: 2px 6px;
|
||||
background: rgba(255, 153, 51, 0.2);
|
||||
color: #ff9933;
|
||||
color: var(--severity-high);
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -1360,7 +1360,7 @@
|
||||
font-size: 9px;
|
||||
padding: 2px 6px;
|
||||
background: rgba(74, 158, 255, 0.2);
|
||||
color: #4a9eff;
|
||||
color: var(--accent-cyan);
|
||||
border-radius: 3px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
@@ -1404,7 +1404,7 @@
|
||||
|
||||
/* Recording State */
|
||||
.icon-recording {
|
||||
color: #ff3366;
|
||||
color: var(--severity-critical);
|
||||
}
|
||||
|
||||
.icon-recording.active svg {
|
||||
@@ -1418,11 +1418,11 @@
|
||||
|
||||
/* Anomaly Indicator */
|
||||
.icon-anomaly {
|
||||
color: #ff9933;
|
||||
color: var(--severity-high);
|
||||
}
|
||||
|
||||
.icon-anomaly.critical {
|
||||
color: #ff3366;
|
||||
color: var(--severity-critical);
|
||||
}
|
||||
|
||||
/* Export Icon */
|
||||
@@ -1508,7 +1508,7 @@
|
||||
}
|
||||
|
||||
.recording-status.active {
|
||||
color: #ff3366;
|
||||
color: var(--severity-critical);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -1526,12 +1526,12 @@
|
||||
|
||||
.anomaly-flag.needs-review {
|
||||
background: rgba(255, 153, 51, 0.2);
|
||||
color: #ff9933;
|
||||
color: var(--severity-high);
|
||||
}
|
||||
|
||||
.anomaly-flag.high-interest {
|
||||
background: rgba(255, 51, 51, 0.2);
|
||||
color: #ff3333;
|
||||
color: var(--accent-red);
|
||||
}
|
||||
|
||||
.anomaly-flag .icon {
|
||||
@@ -1639,7 +1639,7 @@
|
||||
}
|
||||
.tscm-summary-risk {
|
||||
font-size: 10px;
|
||||
color: #ff9933;
|
||||
color: var(--severity-high);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
|
||||
@@ -763,7 +763,7 @@
|
||||
border: 1px solid rgba(74, 163, 255, 0.22);
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
@media (max-width: 1023px) {
|
||||
.wf-monitor-strip {
|
||||
grid-template-columns: repeat(2, minmax(220px, 1fr));
|
||||
grid-auto-rows: minmax(70px, auto);
|
||||
@@ -778,7 +778,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
@media (max-width: 768px) {
|
||||
.wf-headline {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -32,12 +32,12 @@
|
||||
}
|
||||
|
||||
.wxsat-strip-dot.capturing {
|
||||
background: #00ff88;
|
||||
background: var(--neon-green);
|
||||
animation: wxsat-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.wxsat-strip-dot.decoding {
|
||||
background: #00d4ff;
|
||||
background: var(--accent-cyan);
|
||||
animation: wxsat-pulse 0.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -70,8 +70,8 @@
|
||||
}
|
||||
|
||||
.wxsat-strip-btn.stop {
|
||||
border-color: #ff4444;
|
||||
color: #ff4444;
|
||||
border-color: var(--accent-red);
|
||||
color: var(--accent-red);
|
||||
}
|
||||
|
||||
.wxsat-strip-btn.stop:hover {
|
||||
@@ -124,7 +124,7 @@
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
accent-color: #00ff88;
|
||||
accent-color: var(--neon-green);
|
||||
}
|
||||
|
||||
.wxsat-schedule-toggle input:checked + .wxsat-toggle-label {
|
||||
@@ -207,12 +207,12 @@
|
||||
}
|
||||
|
||||
.wxsat-countdown-box.imminent {
|
||||
border-color: #ffbb00;
|
||||
border-color: var(--accent-yellow);
|
||||
box-shadow: 0 0 8px rgba(255, 187, 0, 0.2);
|
||||
}
|
||||
|
||||
.wxsat-countdown-box.active {
|
||||
border-color: #00ff88;
|
||||
border-color: var(--neon-green);
|
||||
box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
|
||||
animation: wxsat-glow 1.5s ease-in-out infinite;
|
||||
}
|
||||
@@ -293,14 +293,14 @@
|
||||
|
||||
.wxsat-timeline-pass.apt { background: rgba(0, 212, 255, 0.6); }
|
||||
.wxsat-timeline-pass.lrpt { background: rgba(0, 255, 136, 0.6); }
|
||||
.wxsat-timeline-pass.scheduled { border: 1px solid #ffbb00; }
|
||||
.wxsat-timeline-pass.scheduled { border: 1px solid var(--accent-yellow); }
|
||||
|
||||
.wxsat-timeline-cursor {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background: #ff4444;
|
||||
background: var(--accent-red);
|
||||
border-radius: 1px;
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -375,7 +375,7 @@
|
||||
|
||||
.wxsat-pass-card.active,
|
||||
.wxsat-pass-card.selected {
|
||||
border-color: #00ff88;
|
||||
border-color: var(--neon-green);
|
||||
background: rgba(0, 255, 136, 0.05);
|
||||
}
|
||||
|
||||
@@ -385,7 +385,7 @@
|
||||
padding: 1px 4px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 187, 0, 0.15);
|
||||
color: #ffbb00;
|
||||
color: var(--accent-yellow);
|
||||
margin-left: 6px;
|
||||
font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
|
||||
text-transform: uppercase;
|
||||
@@ -414,12 +414,12 @@
|
||||
|
||||
.wxsat-pass-mode.apt {
|
||||
background: rgba(0, 212, 255, 0.15);
|
||||
color: #00d4ff;
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.wxsat-pass-mode.lrpt {
|
||||
background: rgba(0, 255, 136, 0.15);
|
||||
color: #00ff88;
|
||||
color: var(--neon-green);
|
||||
}
|
||||
|
||||
.wxsat-pass-details {
|
||||
@@ -450,17 +450,17 @@
|
||||
|
||||
.wxsat-pass-quality.excellent {
|
||||
background: rgba(0, 255, 136, 0.15);
|
||||
color: #00ff88;
|
||||
color: var(--neon-green);
|
||||
}
|
||||
|
||||
.wxsat-pass-quality.good {
|
||||
background: rgba(0, 212, 255, 0.15);
|
||||
color: #00d4ff;
|
||||
color: var(--accent-cyan);
|
||||
}
|
||||
|
||||
.wxsat-pass-quality.fair {
|
||||
background: rgba(255, 187, 0, 0.15);
|
||||
color: #ffbb00;
|
||||
color: var(--accent-yellow);
|
||||
}
|
||||
|
||||
/* ===== Center Panel (Polar + Map) ===== */
|
||||
@@ -900,7 +900,7 @@
|
||||
|
||||
.wxsat-modal-btn.delete:hover {
|
||||
background: rgba(255, 68, 68, 0.9);
|
||||
border-color: #ff4444;
|
||||
border-color: var(--accent-red);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
@@ -920,12 +920,12 @@
|
||||
}
|
||||
|
||||
.wxsat-gallery-clear-btn:hover {
|
||||
color: #ff4444;
|
||||
color: var(--accent-red);
|
||||
background: rgba(255, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
/* ===== Responsive ===== */
|
||||
@media (max-width: 1100px) {
|
||||
@media (max-width: 1023px) {
|
||||
.wxsat-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -1041,8 +1041,8 @@
|
||||
}
|
||||
|
||||
.wxsat-phase-step.active {
|
||||
color: #00ff88;
|
||||
border-color: #00ff88;
|
||||
color: var(--neon-green);
|
||||
border-color: var(--neon-green);
|
||||
background: rgba(0, 255, 136, 0.1);
|
||||
box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
|
||||
}
|
||||
@@ -1055,8 +1055,8 @@
|
||||
}
|
||||
|
||||
.wxsat-phase-step.error {
|
||||
color: #ff4444;
|
||||
border-color: #ff4444;
|
||||
color: var(--accent-red);
|
||||
border-color: var(--accent-red);
|
||||
background: rgba(255, 68, 68, 0.1);
|
||||
box-shadow: 0 0 8px rgba(255, 68, 68, 0.2);
|
||||
}
|
||||
@@ -1115,8 +1115,8 @@
|
||||
}
|
||||
|
||||
.wxsat-console-entry.wxsat-log-signal {
|
||||
border-left-color: #00ff88;
|
||||
color: #00ff88;
|
||||
border-left-color: var(--neon-green);
|
||||
color: var(--neon-green);
|
||||
}
|
||||
|
||||
.wxsat-console-entry.wxsat-log-progress {
|
||||
@@ -1125,18 +1125,18 @@
|
||||
}
|
||||
|
||||
.wxsat-console-entry.wxsat-log-save {
|
||||
border-left-color: #ffbb00;
|
||||
color: #ffbb00;
|
||||
border-left-color: var(--accent-yellow);
|
||||
color: var(--accent-yellow);
|
||||
}
|
||||
|
||||
.wxsat-console-entry.wxsat-log-error {
|
||||
border-left-color: #ff4444;
|
||||
color: #ff4444;
|
||||
border-left-color: var(--accent-red);
|
||||
color: var(--accent-red);
|
||||
}
|
||||
|
||||
.wxsat-console-entry.wxsat-log-warning {
|
||||
border-left-color: #ff8800;
|
||||
color: #ff8800;
|
||||
border-left-color: var(--neon-orange);
|
||||
color: var(--neon-orange);
|
||||
}
|
||||
|
||||
.wxsat-console-entry.wxsat-log-debug {
|
||||
|
||||
@@ -41,15 +41,15 @@
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #444;
|
||||
background: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wefax-strip-dot.scanning { background: #ffaa00; animation: wefax-pulse 1.5s ease-in-out infinite; }
|
||||
.wefax-strip-dot.phasing { background: #ffcc44; animation: wefax-pulse 0.8s ease-in-out infinite; }
|
||||
.wefax-strip-dot.receiving { background: #00cc66; animation: wefax-pulse 1s ease-in-out infinite; }
|
||||
.wefax-strip-dot.complete { background: #00cc66; }
|
||||
.wefax-strip-dot.error { background: #f44; }
|
||||
.wefax-strip-dot.scanning { background: var(--accent-orange); animation: wefax-pulse 1.5s ease-in-out infinite; }
|
||||
.wefax-strip-dot.phasing { background: var(--accent-yellow); animation: wefax-pulse 0.8s ease-in-out infinite; }
|
||||
.wefax-strip-dot.receiving { background: var(--accent-green); animation: wefax-pulse 1s ease-in-out infinite; }
|
||||
.wefax-strip-dot.complete { background: var(--accent-green); }
|
||||
.wefax-strip-dot.error { background: var(--accent-red); }
|
||||
|
||||
@keyframes wefax-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
@@ -81,17 +81,17 @@
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.wefax-strip-btn.start { color: #ffaa00; border-color: #ffaa0044; }
|
||||
.wefax-strip-btn.start:hover { background: #ffaa0015; border-color: #ffaa00; }
|
||||
.wefax-strip-btn.start { color: var(--accent-orange); border-color: #ffaa0044; }
|
||||
.wefax-strip-btn.start:hover { background: #ffaa0015; border-color: var(--accent-orange); }
|
||||
.wefax-strip-btn.start.wefax-strip-btn-error {
|
||||
border-color: #ffaa00;
|
||||
color: #ffaa00;
|
||||
border-color: var(--accent-orange);
|
||||
color: var(--accent-orange);
|
||||
box-shadow: 0 0 8px rgba(255, 170, 0, 0.3);
|
||||
animation: wefax-pulse 0.6s ease-in-out 3;
|
||||
}
|
||||
|
||||
.wefax-strip-btn.stop { color: #f44; border-color: #f4444444; }
|
||||
.wefax-strip-btn.stop:hover { background: #f4441a; border-color: #f44; }
|
||||
.wefax-strip-btn.stop { color: var(--accent-red); border-color: #f4444444; }
|
||||
.wefax-strip-btn.stop:hover { background: #f4441a; border-color: var(--accent-red); }
|
||||
|
||||
.wefax-strip-divider {
|
||||
width: 1px;
|
||||
@@ -114,7 +114,7 @@
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.wefax-strip-value.accent-amber { color: #ffaa00; }
|
||||
.wefax-strip-value.accent-amber { color: var(--accent-orange); }
|
||||
|
||||
.wefax-strip-label {
|
||||
font-family: var(--font-mono, monospace);
|
||||
@@ -141,11 +141,11 @@
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
accent-color: #ffaa00;
|
||||
accent-color: var(--accent-orange);
|
||||
}
|
||||
|
||||
.wefax-schedule-toggle input:checked + span {
|
||||
color: #ffaa00;
|
||||
color: var(--accent-orange);
|
||||
}
|
||||
|
||||
/* --- Visuals Container --- */
|
||||
@@ -185,7 +185,7 @@
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #ffaa00;
|
||||
color: var(--accent-orange);
|
||||
}
|
||||
|
||||
.wefax-schedule-list {
|
||||
@@ -209,7 +209,7 @@
|
||||
|
||||
.wefax-schedule-entry.active {
|
||||
background: #ffaa0010;
|
||||
border-left: 3px solid #ffaa00;
|
||||
border-left: 3px solid var(--accent-orange);
|
||||
}
|
||||
|
||||
.wefax-schedule-entry.upcoming {
|
||||
@@ -221,7 +221,7 @@
|
||||
}
|
||||
|
||||
.wefax-schedule-time {
|
||||
color: #ffaa00;
|
||||
color: var(--accent-orange);
|
||||
min-width: 45px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
@@ -241,7 +241,7 @@
|
||||
|
||||
.wefax-schedule-badge.live {
|
||||
background: #ffaa0030;
|
||||
color: #ffaa00;
|
||||
color: var(--accent-orange);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -279,7 +279,7 @@
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #ffaa00;
|
||||
color: var(--accent-orange);
|
||||
}
|
||||
|
||||
.wefax-live-content {
|
||||
@@ -298,7 +298,7 @@
|
||||
.wefax-idle-state svg {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: #ffaa0033;
|
||||
color: rgba(214, 168, 94, 0.2);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@@ -341,7 +341,7 @@
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #ffaa00;
|
||||
color: var(--accent-orange);
|
||||
}
|
||||
|
||||
.wefax-gallery-controls {
|
||||
@@ -370,8 +370,8 @@
|
||||
}
|
||||
|
||||
.wefax-gallery-clear-btn:hover {
|
||||
border-color: #f44;
|
||||
color: #f44;
|
||||
border-color: var(--accent-red);
|
||||
color: var(--accent-red);
|
||||
}
|
||||
|
||||
.wefax-gallery-grid {
|
||||
@@ -442,7 +442,7 @@
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #ccc;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
@@ -451,8 +451,8 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wefax-gallery-action:hover { color: #fff; }
|
||||
.wefax-gallery-action.delete:hover { color: #f44; }
|
||||
.wefax-gallery-action:hover { color: var(--text-primary); }
|
||||
.wefax-gallery-action.delete:hover { color: var(--accent-red); }
|
||||
|
||||
/* --- Countdown Bar + Timeline --- */
|
||||
.wefax-countdown-bar {
|
||||
@@ -490,12 +490,12 @@
|
||||
}
|
||||
|
||||
.wefax-countdown-box.imminent {
|
||||
border-color: #ffaa00;
|
||||
border-color: var(--accent-orange);
|
||||
box-shadow: 0 0 8px rgba(255, 170, 0, 0.2);
|
||||
}
|
||||
|
||||
.wefax-countdown-box.active {
|
||||
border-color: #ffaa00;
|
||||
border-color: var(--accent-orange);
|
||||
box-shadow: 0 0 8px rgba(255, 170, 0, 0.3);
|
||||
animation: wefax-glow 1.5s ease-in-out infinite;
|
||||
}
|
||||
@@ -530,7 +530,7 @@
|
||||
.wefax-countdown-content {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #ffaa00;
|
||||
color: var(--accent-orange);
|
||||
font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
|
||||
}
|
||||
|
||||
@@ -576,7 +576,7 @@
|
||||
|
||||
.wefax-timeline-broadcast.active {
|
||||
background: rgba(255, 170, 0, 0.85);
|
||||
border: 1px solid #ffaa00;
|
||||
border: 1px solid var(--accent-orange);
|
||||
}
|
||||
|
||||
.wefax-timeline-cursor {
|
||||
@@ -584,7 +584,7 @@
|
||||
top: 2px;
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background: #ff4444;
|
||||
background: var(--accent-red);
|
||||
border-radius: 1px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@@ -361,7 +361,7 @@
|
||||
RESPONSIVE
|
||||
============================================ */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@media (max-width: 1023px) {
|
||||
.wfl-rssi-display {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user