From d620618bb8365703adb87db399c9d4c4e00ace2d Mon Sep 17 00:00:00 2001 From: Smittix Date: Wed, 4 Feb 2026 22:12:25 +0000 Subject: [PATCH] Revamp UI styling to slate/cyan --- static/css/adsb_dashboard.css | 62 +++-- static/css/adsb_history.css | 48 ++-- static/css/ais_dashboard.css | 60 +++-- static/css/core/base.css | 137 +++++----- static/css/core/components.css | 415 +++++++++++++++++++---------- static/css/core/layout.css | 196 +++++++++----- static/css/core/variables.css | 141 +++++----- static/css/index.css | 113 ++++---- static/css/satellite_dashboard.css | 58 ++-- 9 files changed, 757 insertions(+), 473 deletions(-) diff --git a/static/css/adsb_dashboard.css b/static/css/adsb_dashboard.css index 1d1cfd4..6ad087c 100644 --- a/static/css/adsb_dashboard.css +++ b/static/css/adsb_dashboard.css @@ -5,25 +5,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 { @@ -42,9 +43,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; } @@ -57,10 +59,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 { @@ -88,6 +92,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; @@ -1483,7 +1499,7 @@ body { } .strip-report-btn { - background: linear-gradient(135deg, var(--accent-cyan) 0%, #2563eb 100%); + background: linear-gradient(135deg, var(--accent-cyan) 0%, #2b6fb8 100%); border: none; color: white; padding: 8px 12px; @@ -1786,7 +1802,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; } diff --git a/static/css/adsb_history.css b/static/css/adsb_history.css index 8cd6117..397747d 100644 --- a/static/css/adsb_history.css +++ b/static/css/adsb_history.css @@ -5,20 +5,21 @@ } :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: #141a24; - --border-color: #1f2937; - --border-glow: rgba(74, 158, 255, 0.6); - --text-primary: #e8eaed; - --text-secondary: #9ca3af; - --text-dim: #4b5563; - --accent-cyan: #4a9eff; - --accent-green: #22c55e; - --accent-amber: #d4a853; - --grid-line: rgba(74, 158, 255, 0.08); + --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: rgba(74, 163, 255, 0.4); + --text-primary: #d7e0ee; + --text-secondary: #9fb0c7; + --text-dim: #6f7f94; + --accent-cyan: #4aa3ff; + --accent-green: #38c180; + --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"); } body { @@ -36,9 +37,10 @@ body { position: fixed; inset: 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; } @@ -50,10 +52,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: 1; - opacity: 0.3; + opacity: 0.25; + box-shadow: 0 0 8px currentColor; } @keyframes scan { @@ -74,6 +78,18 @@ body { gap: 12px; } +.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; +} + .logo { font-size: 18px; font-weight: 700; diff --git a/static/css/ais_dashboard.css b/static/css/ais_dashboard.css index 506b679..319b08a 100644 --- a/static/css/ais_dashboard.css +++ b/static/css/ais_dashboard.css @@ -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; } diff --git a/static/css/core/base.css b/static/css/core/base.css index b6f9a81..bbcb02c 100644 --- a/static/css/core/base.css +++ b/static/css/core/base.css @@ -21,25 +21,34 @@ html { tab-size: 4; } -body { - font-family: var(--font-sans); - font-size: var(--text-base); - line-height: var(--leading-normal); - color: var(--text-primary); - background: var(--bg-primary); - min-height: 100vh; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} +body { + font-family: var(--font-sans); + font-size: var(--text-base); + line-height: var(--leading-normal); + color: var(--text-primary); + background-color: var(--bg-primary); + background-image: + var(--noise-image), + radial-gradient(circle at 15% 0%, var(--grid-dot), transparent 45%), + linear-gradient(180deg, var(--grid-dot), transparent 35%), + linear-gradient(var(--grid-line) 1px, transparent 1px), + linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); + background-size: 40px 40px, auto, auto, 48px 48px, 48px 48px; + background-attachment: fixed; + min-height: 100vh; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} /* ============================================ TYPOGRAPHY ============================================ */ -h1, h2, h3, h4, h5, h6 { - font-weight: var(--font-semibold); - line-height: var(--leading-tight); - color: var(--text-primary); -} +h1, h2, h3, h4, h5, h6 { + font-weight: var(--font-semibold); + line-height: var(--leading-tight); + color: var(--text-primary); + letter-spacing: 0.01em; +} h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } @@ -80,18 +89,20 @@ code, kbd, pre, samp { font-size: 0.9em; } -code { - background: var(--bg-tertiary); - padding: 2px 6px; - border-radius: var(--radius-sm); -} +code { + background: var(--bg-elevated); + border: 1px solid var(--border-color); + padding: 2px 6px; + border-radius: var(--radius-sm); +} -pre { - background: var(--bg-tertiary); - padding: var(--space-4); - border-radius: var(--radius-md); - overflow-x: auto; -} +pre { + background: var(--bg-elevated); + border: 1px solid var(--border-color); + padding: var(--space-4); + border-radius: var(--radius-md); + overflow-x: auto; +} pre code { background: none; @@ -122,38 +133,38 @@ button:disabled { opacity: 0.5; } -input, -select, -textarea { - background: var(--bg-tertiary); - border: 1px solid var(--border-color); - border-radius: var(--radius-md); - padding: var(--space-2) var(--space-3); - color: var(--text-primary); - transition: border-color var(--transition-fast), box-shadow var(--transition-fast); -} +input, +select, +textarea { + background: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + padding: var(--space-2) var(--space-3); + color: var(--text-primary); + transition: border-color var(--transition-fast), box-shadow var(--transition-fast); +} -input:focus, -select:focus, -textarea:focus { - outline: none; - border-color: var(--accent-cyan); - box-shadow: 0 0 0 3px var(--accent-cyan-dim); -} +input:focus, +select:focus, +textarea:focus { + outline: none; + border-color: var(--accent-cyan); + box-shadow: 0 0 0 2px var(--accent-cyan-dim); +} input::placeholder, textarea::placeholder { color: var(--text-dim); } -select { - cursor: pointer; - appearance: none; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 8px center; - padding-right: 28px; -} +select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239fb0c7' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 8px center; + padding-right: 28px; +} input[type="checkbox"], input[type="radio"] { @@ -188,18 +199,18 @@ td { border-bottom: 1px solid var(--border-color); } -th { - font-weight: var(--font-semibold); - color: var(--text-secondary); - background: var(--bg-secondary); - text-transform: uppercase; - font-size: var(--text-xs); - letter-spacing: 0.05em; -} - -tr:hover td { - background: var(--bg-tertiary); -} +th { + font-weight: var(--font-semibold); + color: var(--text-secondary); + background: var(--bg-tertiary); + text-transform: uppercase; + font-size: var(--text-xs); + letter-spacing: 0.05em; +} + +tr:hover td { + background: var(--bg-elevated); +} /* ============================================ LISTS diff --git a/static/css/core/components.css b/static/css/core/components.css index 1d4f576..1adc1ca 100644 --- a/static/css/core/components.css +++ b/static/css/core/components.css @@ -9,21 +9,24 @@ ============================================ */ /* Base button */ -.btn { - display: inline-flex; - align-items: center; - justify-content: center; +.btn { + display: inline-flex; + align-items: center; + justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--font-medium); border-radius: var(--radius-md); border: 1px solid transparent; - cursor: pointer; - transition: all var(--transition-fast); - white-space: nowrap; - text-decoration: none; -} + cursor: pointer; + transition: all var(--transition-fast); + white-space: nowrap; + text-decoration: none; + font-family: var(--font-mono); + text-transform: uppercase; + letter-spacing: 0.06em; +} .btn:focus-visible { outline: 2px solid var(--border-focus); @@ -36,38 +39,39 @@ } /* Button variants */ -.btn-primary { - background: var(--accent-cyan); - color: var(--text-inverse); - border-color: var(--accent-cyan); -} +.btn-primary { + background: var(--accent-cyan); + color: var(--text-inverse); + border-color: var(--accent-cyan); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); +} .btn-primary:hover:not(:disabled) { background: var(--accent-cyan-hover); border-color: var(--accent-cyan-hover); } -.btn-secondary { - background: var(--bg-tertiary); - color: var(--text-primary); - border-color: var(--border-color); -} +.btn-secondary { + background: var(--bg-secondary); + color: var(--text-primary); + border-color: var(--border-color); +} + +.btn-secondary:hover:not(:disabled) { + background: var(--bg-tertiary); + border-color: var(--border-light); +} -.btn-secondary:hover:not(:disabled) { - background: var(--bg-elevated); - border-color: var(--border-light); -} - -.btn-ghost { - background: transparent; - color: var(--text-secondary); - border-color: transparent; -} - -.btn-ghost:hover:not(:disabled) { - background: var(--bg-tertiary); - color: var(--text-primary); -} +.btn-ghost { + background: transparent; + color: var(--text-secondary); + border-color: var(--border-color); +} + +.btn-ghost:hover:not(:disabled) { + background: var(--bg-elevated); + color: var(--text-primary); +} .btn-danger { background: var(--accent-red); @@ -118,21 +122,23 @@ /* ============================================ CARDS / PANELS ============================================ */ -.card { - background: var(--bg-card); - border: 1px solid var(--border-color); - border-radius: var(--radius-lg); - overflow: hidden; -} +.card { + background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-sm); +} -.card-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--space-3) var(--space-4); - border-bottom: 1px solid var(--border-color); - background: var(--bg-secondary); -} +.card-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--border-color); + background: var(--bg-secondary); + position: relative; +} .card-header-title { font-size: var(--text-xs); @@ -153,26 +159,58 @@ } /* Panel variant (used in dashboards) */ -.panel { - background: var(--bg-card); - border: 1px solid var(--border-color); - border-radius: var(--radius-lg); - overflow: hidden; -} +.panel { + background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-secondary) 100%); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: var(--shadow-sm); +} + +@supports (clip-path: polygon(0 0)) { + .card, + .panel { + --notch-size: 6px; + border-radius: 0; + clip-path: polygon( + var(--notch-size) 0, + calc(100% - var(--notch-size)) 0, + 100% var(--notch-size), + 100% calc(100% - var(--notch-size)), + calc(100% - var(--notch-size)) 100%, + var(--notch-size) 100%, + 0 calc(100% - var(--notch-size)), + 0 var(--notch-size) + ); + } +} -.panel-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--space-2) var(--space-3); - border-bottom: 1px solid var(--border-color); - background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%); - font-size: var(--text-xs); - font-weight: var(--font-semibold); - text-transform: uppercase; - letter-spacing: 0.1em; - color: var(--text-secondary); -} +.panel-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-2) var(--space-3); + border-bottom: 1px solid var(--border-color); + background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%); + font-size: var(--text-xs); + font-weight: var(--font-semibold); + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--text-secondary); + position: relative; +} + +.card-header::before, +.panel-header::before { + content: ''; + position: absolute; + top: 0; + left: var(--space-3); + width: 36px; + height: 2px; + background: var(--accent-cyan); + opacity: 0.7; +} .panel-indicator { width: 8px; @@ -193,17 +231,18 @@ /* ============================================ BADGES ============================================ */ -.badge { - display: inline-flex; - align-items: center; - gap: var(--space-1); - padding: 2px var(--space-2); - font-size: var(--text-xs); - font-weight: var(--font-medium); - border-radius: var(--radius-full); - background: var(--bg-tertiary); - color: var(--text-secondary); -} +.badge { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-2); + font-size: var(--text-xs); + font-weight: var(--font-medium); + border-radius: var(--radius-full); + background: var(--bg-tertiary); + color: var(--text-secondary); + border: 1px solid var(--border-color); +} .badge-primary { background: var(--accent-cyan-dim); @@ -220,10 +259,53 @@ color: var(--accent-orange); } -.badge-danger { - background: var(--accent-red-dim); - color: var(--accent-red); -} +.badge-danger { + background: var(--accent-red-dim); + color: var(--accent-red); +} + +/* ============================================ + DATA TAGS + ============================================ */ +.data-tag { + display: inline-flex; + align-items: center; + gap: var(--space-1); + padding: 2px var(--space-2); + font-size: 10px; + font-family: var(--font-mono); + text-transform: uppercase; + letter-spacing: 0.12em; + border-radius: var(--radius-sm); + border: 1px solid var(--border-color); + background: var(--bg-tertiary); + color: var(--text-secondary); + box-shadow: inset 0 0 0 1px var(--border-glow); +} + +.data-tag--accent { + border-color: var(--accent-cyan); + color: var(--accent-cyan); + background: var(--accent-cyan-dim); +} + +.data-tag--warning { + border-color: var(--accent-amber); + color: var(--accent-amber); + background: var(--accent-amber-dim); +} + +.data-tag--success { + border-color: var(--accent-green); + color: var(--accent-green); + background: var(--accent-green-dim); +} + +.data-tag--danger { + border-color: var(--accent-red); + color: var(--accent-red); + background: var(--accent-red-dim); +} /* ============================================ STATUS INDICATORS @@ -236,16 +318,16 @@ flex-shrink: 0; } -.status-dot.online, -.status-dot.active { - background: var(--status-online); - box-shadow: 0 0 6px var(--status-online); -} +.status-dot.online, +.status-dot.active { + background: var(--status-online); + box-shadow: 0 0 4px var(--status-online); +} -.status-dot.warning { - background: var(--status-warning); - box-shadow: 0 0 6px var(--status-warning); -} +.status-dot.warning { + background: var(--status-warning); + box-shadow: 0 0 4px var(--status-warning); +} .status-dot.error, .status-dot.offline { @@ -565,44 +647,69 @@ border-bottom: 1px solid var(--border-color); } -.section-title { - font-size: var(--text-sm); - font-weight: var(--font-semibold); - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--text-secondary); -} +.section-title { + font-size: var(--text-sm); + font-weight: var(--font-semibold); + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--text-secondary); + position: relative; + padding-left: var(--space-3); +} + +.section-title::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + width: 2px; + height: 6px; + background: var(--accent-cyan); + transform: translateY(-50%); + opacity: 0.7; + box-shadow: 0 6px 0 var(--accent-cyan); +} /* ============================================ DIVIDERS ============================================ */ -.divider { - height: 1px; - background: var(--border-color); - margin: var(--space-4) 0; -} - -.divider-vertical { - width: 1px; - height: 100%; - background: var(--border-color); - margin: 0 var(--space-3); -} +.divider { + height: 1px; + background-image: repeating-linear-gradient( + 90deg, + var(--border-light), + var(--border-light) 6px, + transparent 6px, + transparent 12px + ); + margin: var(--space-4) 0; +} + +.divider-vertical { + width: 1px; + height: 100%; + background-image: repeating-linear-gradient( + 180deg, + var(--border-light), + var(--border-light) 6px, + transparent 6px, + transparent 12px + ); + margin: 0 var(--space-3); +} /* ============================================ UX POLISH - ENHANCED INTERACTIONS ============================================ */ /* Button hover lift */ -.btn:hover:not(:disabled) { - transform: translateY(-1px); - box-shadow: var(--shadow-md); -} - -.btn:active:not(:disabled) { - transform: translateY(0); - box-shadow: var(--shadow-sm); -} +.btn:hover:not(:disabled) { + box-shadow: 0 0 0 1px var(--border-light); +} + +.btn:active:not(:disabled) { + box-shadow: inset 0 0 0 1px var(--border-light); +} /* Card/Panel hover effects */ .card, @@ -635,23 +742,23 @@ animation: statusGlow 2s ease-in-out infinite; } -@keyframes statusGlow { - 0%, 100% { - box-shadow: 0 0 6px var(--status-online); - } - 50% { - box-shadow: 0 0 12px var(--status-online), 0 0 20px var(--status-online); - } -} +@keyframes statusGlow { + 0%, 100% { + box-shadow: 0 0 4px var(--status-online); + } + 50% { + box-shadow: 0 0 8px var(--status-online), 0 0 12px var(--status-online); + } +} /* Badge hover effect */ .badge { transition: transform var(--transition-fast), box-shadow var(--transition-fast); } -.badge:hover { - transform: scale(1.05); -} +.badge:hover { + transform: scale(1.02); +} /* Alert entrance animation */ .alert { @@ -680,26 +787,38 @@ } /* Input focus glow */ -input:focus, -select:focus, -textarea:focus { - border-color: var(--accent-cyan); - box-shadow: 0 0 0 3px var(--accent-cyan-dim), 0 0 20px rgba(74, 158, 255, 0.1); -} +input:focus, +select:focus, +textarea:focus { + border-color: var(--accent-cyan); + box-shadow: 0 0 0 2px var(--accent-cyan-dim); +} /* Nav item active indicator */ -.mode-nav-btn.active::after, -.mobile-nav-btn.active::after { - content: ''; - position: absolute; - bottom: -2px; - left: 50%; - transform: translateX(-50%); - width: 60%; - height: 2px; - background: currentColor; - border-radius: var(--radius-full); -} +.nav-item, +.mode-nav-btn, +.mobile-nav-btn { + position: relative; +} + +.nav-item.active::after, +.mode-nav-btn.active::after, +.mobile-nav-btn.active::after { + content: ''; + position: absolute; + left: 12%; + right: 12%; + bottom: 2px; + height: 1px; + background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); + opacity: 0.75; + animation: railPulse 2.6s ease-in-out infinite; +} + +@keyframes railPulse { + 0%, 100% { opacity: 0.45; } + 50% { opacity: 0.9; } +} /* Smooth tooltip appearance */ [data-tooltip]::after { diff --git a/static/css/core/layout.css b/static/css/core/layout.css index e969223..e42937f 100644 --- a/static/css/core/layout.css +++ b/static/css/core/layout.css @@ -22,18 +22,31 @@ /* ============================================ GLOBAL HEADER ============================================ */ -.app-header { - display: flex; - align-items: center; - justify-content: space-between; - height: var(--header-height); - padding: 0 var(--space-4); - background: var(--bg-secondary); - border-bottom: 1px solid var(--border-color); - position: sticky; - top: 0; - z-index: var(--z-sticky); -} +.app-header { + display: flex; + align-items: center; + justify-content: space-between; + height: var(--header-height); + padding: 0 var(--space-4); + background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%); + border-bottom: 1px solid var(--border-color); + position: sticky; + top: 0; + z-index: var(--z-sticky); + box-shadow: var(--shadow-sm); +} + +.app-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; +} .app-header-left { display: flex; @@ -116,16 +129,29 @@ /* ============================================ GLOBAL NAVIGATION ============================================ */ -.app-nav { - display: flex; - align-items: center; - background: var(--bg-tertiary); - border-bottom: 1px solid var(--border-color); - padding: 0 var(--space-4); - height: var(--nav-height); - gap: var(--space-1); - overflow-x: auto; -} +.app-nav { + display: flex; + align-items: center; + background: var(--bg-secondary); + border-bottom: 1px solid var(--border-color); + padding: 0 var(--space-4); + height: var(--nav-height); + gap: var(--space-1); + overflow-x: auto; + position: relative; +} + +.app-nav::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 1px; + background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); + opacity: 0.5; + pointer-events: none; +} .app-nav::-webkit-scrollbar { height: 0; @@ -176,14 +202,14 @@ } /* Dropdown menu */ -.nav-dropdown-menu { - position: absolute; - top: 100%; - left: 0; - min-width: 180px; - background: var(--bg-card); - border: 1px solid var(--border-color); - border-radius: var(--radius-md); +.nav-dropdown-menu { + position: absolute; + top: 100%; + left: 0; + min-width: 180px; + background: var(--bg-elevated); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-1); opacity: 0; @@ -273,14 +299,27 @@ /* ============================================ MOBILE NAVIGATION ============================================ */ -.mobile-nav { - display: none; - background: var(--bg-tertiary); - border-bottom: 1px solid var(--border-color); - padding: var(--space-2) var(--space-3); - overflow-x: auto; - gap: var(--space-2); -} +.mobile-nav { + display: none; + background: var(--bg-secondary); + border-bottom: 1px solid var(--border-color); + padding: var(--space-2) var(--space-3); + overflow-x: auto; + gap: var(--space-2); + position: relative; +} + +.mobile-nav::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 1px; + background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); + opacity: 0.45; + pointer-events: none; +} .mobile-nav::-webkit-scrollbar { height: 0; @@ -357,13 +396,13 @@ } /* Sidebar */ -.app-sidebar { - width: var(--sidebar-width); - background: var(--bg-secondary); - border-right: 1px solid var(--border-color); - overflow-y: auto; - flex-shrink: 0; -} +.app-sidebar { + width: var(--sidebar-width); + background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); + border-right: 1px solid var(--border-color); + overflow-y: auto; + flex-shrink: 0; +} .sidebar-section { padding: var(--space-4); @@ -408,15 +447,28 @@ overflow: hidden; } -.dashboard-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--space-2) var(--space-4); - background: var(--bg-secondary); - border-bottom: 1px solid var(--border-color); - flex-shrink: 0; -} +.dashboard-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-2) var(--space-4); + background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-secondary) 100%); + border-bottom: 1px solid var(--border-color); + flex-shrink: 0; + position: relative; +} + +.dashboard-header::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 2px; + background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); + opacity: 0.55; + pointer-events: none; +} .dashboard-header-logo { font-size: var(--text-lg); @@ -443,10 +495,10 @@ position: relative; } -.dashboard-sidebar { - width: 320px; - background: var(--bg-secondary); - border-left: 1px solid var(--border-color); +.dashboard-sidebar { + width: 320px; + background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); + border-left: 1px solid var(--border-color); overflow-y: auto; display: flex; flex-direction: column; @@ -587,14 +639,26 @@ ============================================ */ /* Mode Navigation Bar */ -.mode-nav { - display: none; - background: #151a23 !important; /* Explicit color - forced to ensure consistency */ - border-bottom: 1px solid var(--border-color); - padding: 0 20px; - position: relative; - z-index: 100; -} +.mode-nav { + display: none; + background: var(--bg-secondary) !important; /* Explicit color - forced to ensure consistency */ + border-bottom: 1px solid var(--border-color); + padding: 0 20px; + position: relative; + z-index: 100; +} + +.mode-nav::after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 1px; + background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); + opacity: 0.5; + pointer-events: none; +} @media (min-width: 1024px) { .mode-nav { diff --git a/static/css/core/variables.css b/static/css/core/variables.css index 0924183..06942b6 100644 --- a/static/css/core/variables.css +++ b/static/css/core/variables.css @@ -10,51 +10,56 @@ ============================================ */ /* Backgrounds - layered depth system */ - --bg-primary: #0a0c10; - --bg-secondary: #0f1218; - --bg-tertiary: #151a23; - --bg-card: #121620; - --bg-elevated: #1a202c; - --bg-overlay: rgba(0, 0, 0, 0.7); + --bg-primary: #0b1118; + --bg-secondary: #101823; + --bg-tertiary: #151f2b; + --bg-card: #121a25; + --bg-elevated: #1b2734; + --bg-overlay: rgba(8, 13, 20, 0.75); /* 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); + --accent-cyan: #4aa3ff; + --accent-cyan-dim: rgba(74, 163, 255, 0.16); --accent-cyan-hover: #6bb3ff; - --accent-green: #22c55e; - --accent-green-dim: rgba(34, 197, 94, 0.15); - --accent-red: #ef4444; - --accent-red-dim: rgba(239, 68, 68, 0.15); - --accent-orange: #f59e0b; - --accent-orange-dim: rgba(245, 158, 11, 0.15); - --accent-amber: #d4a853; - --accent-amber-dim: rgba(212, 168, 83, 0.15); - --accent-yellow: #eab308; - --accent-purple: #a855f7; + --accent-green: #38c180; + --accent-green-dim: rgba(56, 193, 128, 0.18); + --accent-red: #e25d5d; + --accent-red-dim: rgba(226, 93, 93, 0.16); + --accent-orange: #d6a85e; + --accent-orange-dim: rgba(214, 168, 94, 0.16); + --accent-amber: #d6a85e; + --accent-amber-dim: rgba(214, 168, 94, 0.18); + --accent-yellow: #e1c26b; + --accent-purple: #8f7bd6; /* Text hierarchy */ - --text-primary: #e8eaed; - --text-secondary: #9ca3af; - --text-dim: #4b5563; - --text-muted: #374151; - --text-inverse: #0a0c10; + --text-primary: #d7e0ee; + --text-secondary: #9fb0c7; + --text-dim: #6f7f94; + --text-muted: #445266; + --text-inverse: #0b1118; /* Borders */ - --border-color: #1f2937; - --border-light: #374151; - --border-glow: rgba(74, 158, 255, 0.2); + --border-color: #263246; + --border-light: #354458; + --border-glow: rgba(74, 163, 255, 0.25); --border-focus: var(--accent-cyan); /* Status colors */ - --status-online: #22c55e; - --status-warning: #f59e0b; - --status-error: #ef4444; - --status-offline: #6b7280; - --status-info: #3b82f6; + --status-online: #38c180; + --status-warning: #d6a85e; + --status-error: #e25d5d; + --status-offline: #6f7f94; + --status-info: #4aa3ff; + + /* Subtle grid/pattern */ + --grid-line: rgba(74, 163, 255, 0.1); + --grid-dot: rgba(255, 255, 255, 0.03); + --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"); /* ============================================ SPACING SCALE @@ -73,8 +78,8 @@ /* ============================================ TYPOGRAPHY ============================================ */ - --font-sans: 'Space Mono', ui-monospace, 'SF Mono', monospace; - --font-mono: 'Space Mono', ui-monospace, 'SF Mono', 'Consolas', monospace; + --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; /* Font sizes */ --text-xs: 10px; @@ -100,19 +105,19 @@ /* ============================================ BORDERS & RADIUS ============================================ */ - --radius-sm: 4px; - --radius-md: 6px; - --radius-lg: 8px; - --radius-xl: 12px; + --radius-sm: 3px; + --radius-md: 4px; + --radius-lg: 6px; + --radius-xl: 8px; --radius-full: 9999px; /* ============================================ SHADOWS ============================================ */ - --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); - --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); - --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); - --shadow-glow: 0 0 20px rgba(74, 158, 255, 0.15); + --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.35); + --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35); + --shadow-lg: 0 12px 18px rgba(0, 0, 0, 0.45); + --shadow-glow: 0 0 18px rgba(74, 163, 255, 0.16); /* ============================================ TRANSITIONS @@ -147,43 +152,47 @@ LIGHT THEME OVERRIDES ============================================ */ [data-theme="light"] { - --bg-primary: #f8fafc; - --bg-secondary: #f1f5f9; - --bg-tertiary: #e2e8f0; + --bg-primary: #f4f7fb; + --bg-secondary: #e9eef5; + --bg-tertiary: #dde5f0; --bg-card: #ffffff; - --bg-elevated: #f8fafc; - --bg-overlay: rgba(255, 255, 255, 0.9); + --bg-elevated: #f1f4f9; + --bg-overlay: rgba(244, 247, 251, 0.92); /* 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; - --accent-green: #16a34a; - --accent-green-dim: rgba(22, 163, 74, 0.1); - --accent-red: #dc2626; - --accent-red-dim: rgba(220, 38, 38, 0.1); - --accent-orange: #d97706; - --accent-orange-dim: rgba(217, 119, 6, 0.1); - --accent-amber: #b45309; - --accent-amber-dim: rgba(180, 83, 9, 0.1); + --accent-cyan: #1f5fa8; + --accent-cyan-dim: rgba(31, 95, 168, 0.12); + --accent-cyan-hover: #2c73bf; + --accent-green: #1f8a57; + --accent-green-dim: rgba(31, 138, 87, 0.12); + --accent-red: #c74444; + --accent-red-dim: rgba(199, 68, 68, 0.12); + --accent-orange: #b5863a; + --accent-orange-dim: rgba(181, 134, 58, 0.12); + --accent-amber: #b5863a; + --accent-amber-dim: rgba(181, 134, 58, 0.12); - --text-primary: #0f172a; - --text-secondary: #475569; - --text-dim: #94a3b8; - --text-muted: #cbd5e1; - --text-inverse: #f8fafc; + --text-primary: #122034; + --text-secondary: #3a4a5f; + --text-dim: #6b7c93; + --text-muted: #aab6c8; + --text-inverse: #f4f7fb; - --border-color: #e2e8f0; - --border-light: #cbd5e1; - --border-glow: rgba(37, 99, 235, 0.15); + --border-color: #d1d9e6; + --border-light: #c1ccdb; + --border-glow: rgba(31, 95, 168, 0.12); + + --grid-line: rgba(31, 95, 168, 0.14); + --grid-dot: rgba(12, 18, 24, 0.06); + --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='%23000000'%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"); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15); - --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.1); + --shadow-glow: 0 0 18px rgba(31, 95, 168, 0.1); } /* ============================================ diff --git a/static/css/index.css b/static/css/index.css index 5f5e1cb..b68145c 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -5,63 +5,72 @@ } :root { - --font-sans: 'Space Mono', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - --font-mono: 'Space Mono', 'Fira Code', 'Consolas', monospace; + --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; /* Tactical dark palette */ - --bg-primary: #0a0c10; - --bg-secondary: #0f1218; - --bg-tertiary: #151a23; - --bg-card: #121620; - --bg-elevated: #1a202c; + --bg-primary: #0b1118; + --bg-secondary: #101823; + --bg-tertiary: #151f2b; + --bg-card: #121a25; + --bg-elevated: #1b2734; - /* Accent colors - sophisticated blue/amber */ - --accent-cyan: #4a9eff; - --accent-cyan-dim: rgba(74, 158, 255, 0.15); - --accent-green: #22c55e; - --accent-green-dim: rgba(34, 197, 94, 0.15); - --accent-red: #ef4444; - --accent-red-dim: rgba(239, 68, 68, 0.15); - --accent-orange: #f59e0b; - --accent-amber: #d4a853; - --accent-amber-dim: rgba(212, 168, 83, 0.15); + /* Accent colors - slate/cyan */ + --accent-cyan: #4aa3ff; + --accent-cyan-dim: rgba(74, 163, 255, 0.16); + --accent-green: #38c180; + --accent-green-dim: rgba(56, 193, 128, 0.18); + --accent-red: #e25d5d; + --accent-red-dim: rgba(226, 93, 93, 0.16); + --accent-orange: #d6a85e; + --accent-amber: #d6a85e; + --accent-amber-dim: rgba(214, 168, 94, 0.18); /* Text hierarchy */ - --text-primary: #e8eaed; - --text-secondary: #9ca3af; - --text-dim: #4b5563; - --text-muted: #374151; + --text-primary: #d7e0ee; + --text-secondary: #9fb0c7; + --text-dim: #6f7f94; + --text-muted: #445266; /* Borders */ - --border-color: #1f2937; - --border-light: #374151; - --border-glow: rgba(74, 158, 255, 0.2); + --border-color: #263246; + --border-light: #354458; + --border-glow: rgba(74, 163, 255, 0.25); /* Status colors */ - --status-online: #22c55e; - --status-warning: #f59e0b; - --status-error: #ef4444; - --status-offline: #6b7280; + --status-online: #38c180; + --status-warning: #d6a85e; + --status-error: #e25d5d; + --status-offline: #6f7f94; + + /* Subtle grid/pattern */ + --grid-line: rgba(74, 163, 255, 0.1); + --grid-dot: rgba(255, 255, 255, 0.03); + --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"); } [data-theme="light"] { - --bg-primary: #f8fafc; - --bg-secondary: #f1f5f9; - --bg-tertiary: #e2e8f0; + --bg-primary: #f4f7fb; + --bg-secondary: #e9eef5; + --bg-tertiary: #dde5f0; --bg-card: #ffffff; - --bg-elevated: #f8fafc; - --accent-cyan: #2563eb; - --accent-cyan-dim: rgba(37, 99, 235, 0.1); - --accent-green: #16a34a; - --accent-red: #dc2626; - --accent-orange: #d97706; - --accent-amber: #b45309; - --text-primary: #0f172a; - --text-secondary: #475569; - --text-dim: #94a3b8; - --text-muted: #cbd5e1; - --border-color: #e2e8f0; - --border-light: #cbd5e1; - --border-glow: rgba(37, 99, 235, 0.15); + --bg-elevated: #f1f4f9; + --accent-cyan: #1f5fa8; + --accent-cyan-dim: rgba(31, 95, 168, 0.12); + --accent-green: #1f8a57; + --accent-red: #c74444; + --accent-orange: #b5863a; + --accent-amber: #b5863a; + --text-primary: #122034; + --text-secondary: #3a4a5f; + --text-dim: #6b7c93; + --text-muted: #aab6c8; + --border-color: #d1d9e6; + --border-light: #c1ccdb; + --border-glow: rgba(31, 95, 168, 0.12); + + --grid-line: rgba(31, 95, 168, 0.14); + --grid-dot: rgba(12, 18, 24, 0.06); + --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='%23000000'%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"); } [data-theme="light"] body { @@ -74,7 +83,15 @@ body { font-family: var(--font-sans); - background: var(--bg-primary); + background-color: var(--bg-primary); + background-image: + var(--noise-image), + radial-gradient(circle at 15% 0%, var(--grid-dot), transparent 45%), + linear-gradient(180deg, var(--grid-dot), transparent 35%), + linear-gradient(var(--grid-line) 1px, transparent 1px), + linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); + background-size: 40px 40px, auto, auto, 48px 48px, 48px 48px; + background-attachment: fixed; color: var(--text-primary); min-height: 100vh; font-size: 14px; @@ -108,8 +125,8 @@ body { right: 0; bottom: 0; background: - radial-gradient(circle at 50% 50%, rgba(74, 158, 255, 0.03) 0%, transparent 50%), - linear-gradient(180deg, transparent 0%, rgba(0, 212, 255, 0.02) 100%); + radial-gradient(circle at 50% 50%, rgba(74, 163, 255, 0.04) 0%, transparent 50%), + linear-gradient(180deg, transparent 0%, rgba(74, 163, 255, 0.03) 100%); pointer-events: none; } diff --git a/static/css/satellite_dashboard.css b/static/css/satellite_dashboard.css index 427b3da..8a83aed 100644 --- a/static/css/satellite_dashboard.css +++ b/static/css/satellite_dashboard.css @@ -5,23 +5,24 @@ } :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-cyan: #4a9eff; - --accent-green: #22c55e; - --accent-orange: #f59e0b; - --accent-red: #ef4444; - --accent-purple: #a855f7; - --accent-amber: #d4a853; - --grid-line: rgba(74, 158, 255, 0.08); + --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-cyan: #4aa3ff; + --accent-green: #38c180; + --accent-orange: #d6a85e; + --accent-red: #e25d5d; + --accent-purple: #8f7bd6; + --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"); } body { @@ -40,9 +41,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; animation: gridMove 20s linear infinite; pointer-events: none; z-index: 0; @@ -64,12 +66,14 @@ body { top: 0; left: 0; right: 0; - height: 4px; + height: 2px; background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent); - animation: scan 3s linear infinite; + color: var(--accent-cyan); + animation: scan 6s linear infinite; pointer-events: none; z-index: 1000; - opacity: 0.5; + opacity: 0.25; + box-shadow: 0 0 8px currentColor; } @keyframes scan { @@ -94,6 +98,18 @@ body { align-items: center; } +.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; +} + .logo { font-family: var(--font-sans); font-size: 20px;