Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-24 14:50:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

Revamp UI styling to slate/cyan

Browse Source
This commit is contained in:
Smittix
2026-02-04 22:12:25 +00:00
parent 6c358fbfad
commit d620618bb8
9 changed files with 757 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
static/css/ais_dashboard.css
View File

@@ -8,25 +8,26 @@
}
:root {
--font-sans: 'Space Mono', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'Space Mono', 'Fira Code', 'Consolas', monospace;
--bg-dark: #0a0c10;
--bg-panel: #0f1218;
--bg-card: #151a23;
--border-color: #1f2937;
--border-glow: #4a9eff;
--text-primary: #e8eaed;
--text-secondary: #9ca3af;
--text-dim: #4b5563;
--accent-green: #22c55e;
--accent-cyan: #4a9eff;
--accent-orange: #f59e0b;
--accent-red: #ef4444;
--accent-yellow: #eab308;
--accent-amber: #d4a853;
--grid-line: rgba(74, 158, 255, 0.08);
--radar-cyan: #4a9eff;
--radar-bg: #0f1218;
--font-sans: 'IBM Plex Mono', 'Space Mono', ui-monospace, 'SF Mono', 'Consolas', 'Menlo', monospace;
--font-mono: 'IBM Plex Mono', 'Space Mono', ui-monospace, 'SF Mono', 'Consolas', 'Menlo', monospace;
--bg-dark: #0b1118;
--bg-panel: #101823;
--bg-card: #151f2b;
--border-color: #263246;
--border-glow: #4aa3ff;
--text-primary: #d7e0ee;
--text-secondary: #9fb0c7;
--text-dim: #6f7f94;
--accent-green: #38c180;
--accent-cyan: #4aa3ff;
--accent-orange: #d6a85e;
--accent-red: #e25d5d;
--accent-yellow: #e1c26b;
--accent-amber: #d6a85e;
--grid-line: rgba(74, 163, 255, 0.1);
--noise-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='%23ffffff'%20fill-opacity='0.05'%3E%3Ccircle%20cx='3'%20cy='5'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='9'%20r='1'/%3E%3Ccircle%20cx='18'%20cy='3'%20r='1'/%3E%3Ccircle%20cx='26'%20cy='12'%20r='1'/%3E%3Ccircle%20cx='34'%20cy='6'%20r='1'/%3E%3Ccircle%20cx='7'%20cy='19'%20r='1'/%3E%3Ccircle%20cx='15'%20cy='24'%20r='1'/%3E%3Ccircle%20cx='28'%20cy='22'%20r='1'/%3E%3Ccircle%20cx='36'%20cy='18'%20r='1'/%3E%3Ccircle%20cx='5'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='19'%20cy='32'%20r='1'/%3E%3Ccircle%20cx='31'%20cy='34'%20r='1'/%3E%3C/g%3E%3C/svg%3E");
--radar-cyan: #4aa3ff;
--radar-bg: #101823;
}
body {
@@ -45,9 +46,10 @@ body {
right: 0;
bottom: 0;
background-image:
var(--noise-image),
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 50px 50px;
background-size: 40px 40px, 50px 50px, 50px 50px;
pointer-events: none;
z-index: 0;
}
@@ -60,10 +62,12 @@ body {
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
color: var(--accent-cyan);
animation: scan 6s linear infinite;
pointer-events: none;
z-index: 1000;
opacity: 0.3;
opacity: 0.25;
box-shadow: 0 0 8px currentColor;
}
@keyframes scan {
@@ -91,6 +95,18 @@ body {
min-height: 52px;
}
.header::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
opacity: 0.6;
pointer-events: none;
}
@media (min-width: 768px) {
.header {
padding: 12px 20px;
@@ -355,7 +371,7 @@ body {
}
.strip-btn.primary {
background: linear-gradient(135deg, var(--accent-cyan) 0%, #2563eb 100%);
background: linear-gradient(135deg, var(--accent-cyan) 0%, #2b6fb8 100%);
border: none;
color: white;
}