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

feat: UI/UX overhaul — CSS cleanup, accessibility, error handling, inline style extraction

Browse Source 
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
2026-03-12 13:04:36 +00:00
parent 05412fbfc3
commit e687862043
56 changed files with 2660 additions and 2238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/css/adsb_dashboard.css
View File

@@ -2449,7 +2449,7 @@ body {
font-size: 10px;
}
@media (max-width: 600px) {
@media (max-width: 480px) {
.squawk-item {
grid-template-columns: 45px 80px 1fr;
gap: 8px;

2
static/css/adsb_history.css
View File

@@ -684,7 +684,7 @@ body {
}
}
@media (max-width: 720px) {
@media (max-width: 768px) {
.controls {
flex-direction: column;
align-items: stretch;

4
static/css/components/device-cards.css
View File

@@ -522,7 +522,7 @@
/* ============================================
RESPONSIVE ADJUSTMENTS
============================================ */
@media (max-width: 600px) {
@media (max-width: 480px) {
.device-signal-row {
flex-direction: column;
align-items: stretch;
@@ -841,7 +841,7 @@
/* ============================================
RESPONSIVE MODAL
============================================ */
@media (max-width: 600px) {
@media (max-width: 480px) {
.modal-signal-stats {
grid-template-columns: repeat(2, 1fr);
}

4
static/css/components/signal-cards.css
View File

@@ -1128,7 +1128,7 @@
}
/* Responsive adjustments for aggregated meters */
@media (max-width: 500px) {
@media (max-width: 480px) {
.meter-aggregated-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
@@ -1922,7 +1922,7 @@
}
/* Responsive adjustments */
@media (max-width: 500px) {
@media (max-width: 480px) {
.signal-details-modal-content {
width: 95%;
max-height: 90vh;

4
static/css/components/ux-platform.css
View File

@@ -429,7 +429,7 @@
border-color: rgba(31, 95, 168, 0.45);
}
@media (max-width: 920px) {
@media (max-width: 1023px) {
.run-state-strip {
flex-direction: column;
align-items: stretch;
@@ -440,7 +440,7 @@
}
}
@media (max-width: 640px) {
@media (max-width: 768px) {
.command-palette-overlay {
padding: 8vh 10px 0;
}

155
static/css/core/base.css
View File

@@ -21,36 +21,36 @@ 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-color: var(--bg-primary);
background-image:
radial-gradient(1200px 620px at 8% -12%, var(--ambient-top-left), transparent 62%),
radial-gradient(980px 560px at 92% -16%, var(--ambient-top-right), transparent 64%),
radial-gradient(900px 520px at 50% 126%, var(--ambient-bottom), transparent 68%),
var(--noise-image),
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: auto, auto, auto, 40px 40px, 48px 48px, 48px 48px;
background-attachment: fixed;
min-height: 100vh;
font-variant-numeric: tabular-nums;
-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:
radial-gradient(1200px 620px at 8% -12%, var(--ambient-top-left), transparent 62%),
radial-gradient(980px 560px at 92% -16%, var(--ambient-top-right), transparent 64%),
radial-gradient(900px 520px at 50% 126%, var(--ambient-bottom), transparent 68%),
var(--noise-image),
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: auto, auto, auto, 40px 40px, 48px 48px, 48px 48px;
background-attachment: fixed;
min-height: 100vh;
font-variant-numeric: tabular-nums;
-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);
letter-spacing: 0.01em;
}
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); }
@@ -91,20 +91,23 @@ code, kbd, pre, samp {
font-size: 0.9em;
}
code {
background: var(--bg-elevated);
border: 1px solid var(--border-color);
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);
overflow-x: auto;
max-width: 100%;
}
pre {
background: var(--bg-elevated);
border: 1px solid var(--border-color);
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;
max-width: 100%;
}
pre code {
background: none;
@@ -135,38 +138,38 @@ button:disabled {
opacity: 0.5;
}
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,
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 2px 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='%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;
}
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"] {
@@ -201,18 +204,18 @@ td {
border-bottom: 1px solid var(--border-color);
}
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);
}
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

232
static/css/core/components.css
View File

@@ -80,8 +80,8 @@
}
.btn-danger:hover:not(:disabled) {
background: #dc2626;
border-color: #dc2626;
background: var(--accent-red-hover);
border-color: var(--accent-red-hover);
}
.btn-success {
@@ -91,8 +91,8 @@
}
.btn-success:hover:not(:disabled) {
background: #16a34a;
border-color: #16a34a;
background: var(--accent-green-hover);
border-color: var(--accent-green-hover);
}
/* Button sizes */
@@ -415,6 +415,28 @@
to { transform: rotate(360deg); }
}
/* Button loading state */
.btn-loading {
position: relative;
color: transparent;
pointer-events: none;
}
.btn-loading::after {
content: '';
position: absolute;
width: 14px;
height: 14px;
top: 50%;
left: 50%;
margin-top: -7px;
margin-left: -7px;
border: 2px solid var(--border-color);
border-top-color: var(--accent-cyan);
border-radius: var(--radius-full);
animation: spin 0.8s linear infinite;
}
/* Loading overlay */
.loading-overlay {
position: absolute;
@@ -855,3 +877,205 @@ textarea:focus {
cursor: not-allowed;
filter: grayscale(30%);
}
/* ============================================
CONFIRMATION MODAL
============================================ */
.confirm-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-modal);
animation: fadeIn 0.15s ease-out;
}
.confirm-modal {
background: var(--surface-panel-gradient);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: var(--space-6);
min-width: 320px;
max-width: 440px;
box-shadow: var(--shadow-lg);
}
.confirm-modal-title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: var(--space-3);
}
.confirm-modal-message {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-normal);
margin-bottom: var(--space-6);
}
.confirm-modal-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
}
/* ============================================
MODE SECTION TRANSITIONS
============================================ */
.mode-section {
display: none;
opacity: 0;
transition: opacity var(--transition-fast);
}
.mode-section.active {
display: block;
opacity: 1;
}
/* ============================================
SWITCHMODE TOGGLE CLASSES
Elements hidden by default, shown via .active
============================================ */
/* Stats sections in header (pager, sensor, wifi, satellite, aircraft) */
#pagerStats,
#sensorStats,
#aircraftStats,
#wifiStats,
#satelliteStats {
display: none;
}
#pagerStats.active,
#sensorStats.active,
#aircraftStats.active,
#wifiStats.active,
#satelliteStats.active {
display: flex;
}
/* Signal meter */
#signalMeter {
display: none;
}
#signalMeter.active {
display: block;
}
/* Dashboard buttons in nav */
#adsbDashboardBtn,
#satelliteDashboardBtn {
display: none;
}
#adsbDashboardBtn.active,
#satelliteDashboardBtn.active {
display: inline-flex;
}
/* Layout containers (wifi, bluetooth) */
.wifi-layout-container,
.bt-layout-container {
display: none;
}
.wifi-layout-container.active {
display: flex;
}
.bt-layout-container.active {
display: flex;
}
/* Visuals containers */
#aircraftVisuals {
display: none;
}
#aircraftVisuals.active {
display: grid;
}
#satelliteVisuals {
display: none;
}
#satelliteVisuals.active {
display: block;
}
/* RTL-SDR device section */
#rtlDeviceSection {
display: none;
}
#rtlDeviceSection.active {
display: block;
}
/* Tool status sections */
.tool-status-section {
display: none;
grid-template-columns: auto auto;
gap: 4px 8px;
align-items: center;
}
.tool-status-section.active {
display: grid;
}
/* Output console and status bar — visible when mode is active, hidden for full-visual modes.
switchMode() adds/removes .active; hidden by default until a mode is selected. */
.app-shell #output:not(.active) {
display: none;
}
.app-shell .status-bar:not(.active) {
display: none;
}
/* Recon panel — controlled by switchMode */
.app-shell #reconPanel:not(.active) {
display: none;
}
/* ============================================
UTILITY CLASSES
============================================ */
.hidden { display: none; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.text-center { text-align: center; }
.w-full { width: 100%; }
/* Keyboard focus indicator for list items */
.keyboard-focused {
outline: 2px solid var(--accent-cyan);
outline-offset: -2px;
}
/* Overflow indicator */
.list-overflow-indicator {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-2) var(--space-3);
font-size: var(--text-xs);
color: var(--text-dim);
border-top: 1px solid var(--border-color);
background: var(--bg-secondary);
}
.list-overflow-indicator .btn {
font-size: var(--text-xs);
padding: var(--space-1) var(--space-2);
}

543
static/css/core/layout.css
View File

@@ -22,31 +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: 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 {
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;
@@ -129,29 +129,29 @@
/* ============================================
GLOBAL NAVIGATION
============================================ */
.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 {
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;
@@ -202,14 +202,14 @@
}
/* Dropdown menu */
.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);
.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;
@@ -299,27 +299,27 @@
/* ============================================
MOBILE NAVIGATION
============================================ */
.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 {
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;
@@ -396,13 +396,13 @@
}
/* Sidebar */
.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;
}
.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);
@@ -447,28 +447,28 @@
overflow: hidden;
}
.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 {
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);
@@ -495,10 +495,10 @@
position: relative;
}
.dashboard-sidebar {
width: 320px;
background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
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;
@@ -638,27 +638,32 @@
Used by nav.html partial across all pages
============================================ */
/* NAVIGATION
Mode nav bar, dropdowns, utilities, theme/effects toggles
============================================ */
/* Mode Navigation Bar */
.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;
}
.mode-nav {
display: none;
background: linear-gradient(180deg, rgba(17, 22, 32, 0.92), rgba(15, 20, 28, 0.88));
border-bottom: 1px solid var(--border-color);
padding: 0 20px;
position: relative;
z-index: var(--z-sticky);
backdrop-filter: blur(10px);
}
.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 {
@@ -682,6 +687,7 @@
letter-spacing: 1px;
margin-right: 8px;
font-weight: 500;
font-family: var(--font-mono);
}
.mode-nav-divider {
@@ -692,33 +698,27 @@
}
.mode-nav-btn {
display: flex;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
border-radius: var(--radius-lg);
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.mode-nav-btn .nav-icon {
font-size: 14px;
}
.mode-nav-btn .nav-icon svg {
width: 14px;
height: 14px;
transition: all var(--transition-fast);
text-decoration: none;
}
.mode-nav-btn .nav-label {
text-transform: uppercase;
letter-spacing: 0.5px;
letter-spacing: 0.08em;
font-family: var(--font-mono);
font-size: 10px;
}
.mode-nav-btn:hover {
@@ -728,13 +728,14 @@
}
.mode-nav-btn.active {
background: var(--accent-cyan);
color: var(--bg-primary);
background: var(--bg-elevated);
color: var(--text-primary);
border-color: var(--accent-cyan);
box-shadow: inset 0 -2px 0 var(--accent-cyan);
}
.mode-nav-btn.active .nav-icon {
filter: brightness(0);
color: var(--accent-cyan);
}
.mode-nav-actions {
@@ -749,29 +750,29 @@
gap: 6px;
padding: 8px 14px;
background: var(--bg-elevated);
border: 1px solid var(--accent-cyan);
border-radius: 4px;
color: var(--accent-cyan);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all 0.15s ease;
}
.nav-action-btn .nav-icon {
font-size: 12px;
transition: all var(--transition-fast);
}
.nav-action-btn .nav-label {
text-transform: uppercase;
letter-spacing: 0.5px;
letter-spacing: 0.08em;
font-family: var(--font-mono);
font-size: 10px;
}
.nav-action-btn:hover {
background: var(--accent-cyan);
color: var(--bg-primary);
background: var(--bg-tertiary);
color: var(--text-primary);
box-shadow: var(--shadow-md);
border-color: var(--accent-cyan);
}
/* Dropdown Navigation */
@@ -780,19 +781,41 @@
}
.mode-nav-dropdown-btn {
display: flex;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
border-radius: var(--radius-lg);
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
transition: all var(--transition-fast);
}
.mode-nav-dropdown-btn .nav-label {
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: var(--font-mono);
font-size: 10px;
}
.mode-nav-dropdown-btn .dropdown-arrow {
width: 12px;
height: 12px;
margin-left: 4px;
transition: transform 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mode-nav-dropdown-btn .dropdown-arrow svg {
width: 100%;
height: 100%;
}
.mode-nav-dropdown-btn:hover {
@@ -801,31 +824,6 @@
border-color: var(--border-color);
}
.mode-nav-dropdown-btn .nav-icon {
font-size: 14px;
}
.mode-nav-dropdown-btn .nav-icon svg {
width: 14px;
height: 14px;
}
.mode-nav-dropdown-btn .nav-label {
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mode-nav-dropdown-btn .dropdown-arrow {
font-size: 8px;
margin-left: 4px;
transition: transform 0.2s ease;
}
.mode-nav-dropdown-btn .dropdown-arrow svg {
width: 10px;
height: 10px;
}
.mode-nav-dropdown.open .mode-nav-dropdown-btn {
background: var(--bg-elevated);
color: var(--text-primary);
@@ -837,13 +835,14 @@
}
.mode-nav-dropdown.has-active .mode-nav-dropdown-btn {
background: var(--accent-cyan);
color: var(--bg-primary);
background: var(--bg-elevated);
color: var(--text-primary);
border-color: var(--accent-cyan);
box-shadow: inset 0 -2px 0 var(--accent-cyan);
}
.mode-nav-dropdown.has-active .mode-nav-dropdown-btn .nav-icon {
filter: brightness(0);
color: var(--accent-cyan);
}
.mode-nav-dropdown-menu {
@@ -852,16 +851,17 @@
left: 0;
margin-top: 4px;
min-width: 180px;
background: var(--bg-secondary);
background: var(--surface-glass);
border: 1px solid var(--border-color);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.15s ease;
z-index: 1000;
transition: all var(--transition-fast);
z-index: var(--z-dropdown);
padding: 6px;
backdrop-filter: blur(10px);
}
.mode-nav-dropdown.open .mode-nav-dropdown-menu {
@@ -874,8 +874,7 @@
width: 100%;
justify-content: flex-start;
padding: 10px 12px;
border-radius: 4px;
margin: 0;
border-radius: var(--radius-lg);
}
.mode-nav-dropdown-menu .mode-nav-btn:hover {
@@ -883,8 +882,18 @@
}
.mode-nav-dropdown-menu .mode-nav-btn.active {
background: var(--accent-cyan);
color: var(--bg-primary);
background: var(--bg-elevated);
color: var(--text-primary);
box-shadow: inset 0 -2px 0 var(--accent-cyan);
}
/* Focus-visible states for nav elements */
.mode-nav-btn:focus-visible,
.mode-nav-dropdown-btn:focus-visible,
.nav-action-btn:focus-visible,
.nav-tool-btn:focus-visible {
outline: 2px solid var(--accent-cyan);
outline-offset: 2px;
}
/* Nav Bar Utilities (clock, theme, tools) */
@@ -941,15 +950,15 @@
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 4px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-lg);
background: var(--bg-elevated);
border: 1px solid var(--border-color);
color: var(--text-secondary);
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.15s ease;
display: flex;
transition: all var(--transition-fast);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
@@ -957,27 +966,36 @@
}
.nav-tool-btn:hover {
background: var(--bg-elevated);
border-color: var(--border-color);
background: var(--bg-tertiary);
border-color: var(--accent-cyan);
color: var(--accent-cyan);
box-shadow: var(--shadow-md);
}
/* Nav tool button SVG sizing */
.nav-tool-btn svg {
width: 14px;
height: 14px;
stroke: currentColor;
}
.nav-tool-btn .icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-tool-btn .icon svg {
width: 14px;
height: 14px;
stroke: currentColor;
}
/* Theme toggle icon states in nav bar */
/* Theme toggle icon states */
.nav-tool-btn .icon-sun,
.nav-tool-btn .icon-moon {
position: absolute;
transition: opacity 0.2s, transform 0.2s;
font-size: 14px;
}
.nav-tool-btn .icon-sun {
@@ -1000,7 +1018,7 @@
transform: rotate(90deg);
}
/* Effects toggle icon states */
/* Effects/animations toggle icon states */
.nav-tool-btn .icon-effects-off {
display: none;
}
@@ -1012,3 +1030,114 @@
[data-animations="off"] .nav-tool-btn .icon-effects-off {
display: flex;
}
/* Dashboard Button in Nav */
a.nav-dashboard-btn,
a.nav-dashboard-btn:link,
a.nav-dashboard-btn:visited {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--radius-lg);
background: var(--bg-elevated);
border: 1px solid var(--border-color);
color: var(--text-secondary);
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
text-decoration: none;
}
a.nav-dashboard-btn:hover {
background: var(--bg-tertiary);
border-color: var(--accent-cyan);
color: var(--accent-cyan);
box-shadow: var(--shadow-md);
}
.nav-dashboard-btn .icon {
width: 14px;
height: 14px;
}
.nav-dashboard-btn .icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
}
.nav-dashboard-btn .nav-label {
font-family: var(--font-mono);
letter-spacing: 0.5px;
}
/* ---- Light theme nav overrides ---- */
[data-theme="light"] .mode-nav {
background: linear-gradient(180deg, rgba(240, 244, 250, 0.97) 0%, rgba(232, 238, 247, 0.95) 100%);
}
[data-theme="light"] .mode-nav-btn:hover {
background: rgba(220, 230, 244, 0.8);
}
[data-theme="light"] .mode-nav-btn.active {
background: rgba(220, 230, 244, 0.9);
color: var(--text-primary);
}
[data-theme="light"] .mode-nav-dropdown-btn:hover,
[data-theme="light"] .mode-nav-dropdown.open .mode-nav-dropdown-btn,
[data-theme="light"] .mode-nav-dropdown.has-active .mode-nav-dropdown-btn {
background: rgba(220, 230, 244, 0.9);
color: var(--text-primary);
}
[data-theme="light"] .mode-nav-dropdown-menu {
background: rgba(248, 250, 253, 0.99);
box-shadow: 0 16px 36px rgba(18, 40, 66, 0.15);
}
[data-theme="light"] .mode-nav-dropdown-menu .mode-nav-btn:hover {
background: rgba(220, 230, 244, 0.85);
}
[data-theme="light"] .mode-nav-dropdown-menu .mode-nav-btn.active {
background: rgba(220, 230, 244, 0.95);
color: var(--text-primary);
}
[data-theme="light"] .nav-tool-btn {
background: rgba(235, 241, 250, 0.7);
border-color: var(--border-color);
}
[data-theme="light"] .nav-tool-btn:hover {
background: rgba(220, 230, 244, 0.9);
box-shadow: var(--shadow-sm);
}
[data-theme="light"] .nav-action-btn {
background: rgba(235, 241, 250, 0.85);
border-color: var(--border-color);
}
[data-theme="light"] .nav-action-btn:hover {
background: rgba(220, 230, 244, 0.95);
box-shadow: var(--shadow-sm);
}
[data-theme="light"] a.nav-dashboard-btn,
[data-theme="light"] a.nav-dashboard-btn:link,
[data-theme="light"] a.nav-dashboard-btn:visited {
background: rgba(235, 241, 250, 0.7);
border-color: var(--border-color);
color: var(--text-secondary);
}
[data-theme="light"] a.nav-dashboard-btn:hover {
background: rgba(220, 230, 244, 0.9);
box-shadow: var(--shadow-sm);
}

6
static/css/core/variables.css
View File

@@ -31,8 +31,10 @@
--accent-cyan-dim: rgba(74, 163, 255, 0.16);
--accent-cyan-hover: #6bb3ff;
--accent-green: #38c180;
--accent-green-hover: #16a34a;
--accent-green-dim: rgba(56, 193, 128, 0.18);
--accent-red: #e25d5d;
--accent-red-hover: #dc2626;
--accent-red-dim: rgba(226, 93, 93, 0.16);
--accent-orange: #d6a85e;
--accent-orange-dim: rgba(214, 168, 94, 0.16);
@@ -96,7 +98,7 @@
TYPOGRAPHY
============================================ */
--font-sans: 'Roboto Condensed', 'Arial Narrow', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Roboto Condensed', 'Arial Narrow', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', Consolas, monospace;
/* Font sizes */
--text-xs: 10px;
@@ -189,8 +191,10 @@
--accent-cyan-dim: rgba(31, 95, 168, 0.12);
--accent-cyan-hover: #2c73bf;
--accent-green: #1f8a57;
--accent-green-hover: #167a4a;
--accent-green-dim: rgba(31, 138, 87, 0.12);
--accent-red: #c74444;
--accent-red-hover: #b33a3a;
--accent-red-dim: rgba(199, 68, 68, 0.12);
--accent-orange: #b5863a;
--accent-orange-dim: rgba(181, 134, 58, 0.12);

507
static/css/global-nav.css
View File

@@ -1,507 +0,0 @@
/* ============================================
Global Navigation Styles
Shared across all pages using nav.html
============================================ */
/* Icon base (kept lightweight for nav usage) */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.icon svg {
width: 100%;
height: 100%;
}
.icon--sm {
width: 14px;
height: 14px;
}
/* Mode Navigation Bar */
.mode-nav {
display: none;
background: linear-gradient(180deg, rgba(17, 22, 32, 0.92), rgba(15, 20, 28, 0.88));
border-bottom: 1px solid var(--border-color, #202833);
padding: 0 20px;
position: relative;
z-index: 1100;
backdrop-filter: blur(10px);
}
@media (min-width: 1024px) {
.mode-nav {
display: flex;
align-items: center;
gap: 8px;
height: 44px;
}
}
.mode-nav-label {
font-size: 9px;
color: var(--text-secondary, #b7c1cf);
text-transform: uppercase;
letter-spacing: 1px;
margin-right: 8px;
font-weight: 500;
font-family: var(--font-mono);
}
.mode-nav-divider {
width: 1px;
height: 24px;
background: var(--border-color, #202833);
margin: 0 12px;
}
.mode-nav-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: var(--text-secondary, #b7c1cf);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
}
.mode-nav-btn .nav-label {
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: var(--font-mono);
font-size: 10px;
}
.mode-nav-btn:hover {
background: rgba(27, 36, 51, 0.8);
color: var(--text-primary, #e7ebf2);
border-color: var(--border-color, #202833);
}
.mode-nav-btn.active {
background: rgba(27, 36, 51, 0.9);
color: var(--text-primary, #e7ebf2);
border-color: var(--accent-cyan, #4d7dbf);
box-shadow: inset 0 -2px 0 var(--accent-cyan, #4d7dbf);
}
.mode-nav-btn.active .nav-icon {
color: var(--accent-cyan, #4d7dbf);
}
.mode-nav-actions {
display: flex;
align-items: center;
gap: 16px;
}
.nav-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(24, 31, 44, 0.85);
border: 1px solid var(--border-light, #2b3645);
border-radius: 6px;
color: var(--text-primary, #e7ebf2);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all 0.15s ease;
}
.nav-action-btn .nav-label {
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: var(--font-mono);
font-size: 10px;
}
.nav-action-btn:hover {
background: rgba(27, 36, 51, 0.95);
color: var(--text-primary, #e7ebf2);
box-shadow: 0 8px 16px rgba(5, 9, 15, 0.35);
border-color: var(--accent-cyan, #4d7dbf);
}
/* Dropdown Navigation */
.mode-nav-dropdown {
position: relative;
}
.mode-nav-dropdown-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: var(--text-secondary, #b7c1cf);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.mode-nav-dropdown-btn .nav-label {
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: var(--font-mono);
font-size: 10px;
}
.mode-nav-dropdown-btn .dropdown-arrow {
width: 12px;
height: 12px;
margin-left: 4px;
transition: transform 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mode-nav-dropdown-btn .dropdown-arrow svg {
width: 100%;
height: 100%;
}
.mode-nav-dropdown-btn:hover {
background: rgba(27, 36, 51, 0.8);
color: var(--text-primary, #e7ebf2);
border-color: var(--border-color, #202833);
}
.mode-nav-dropdown.open .mode-nav-dropdown-btn {
background: rgba(27, 36, 51, 0.9);
color: var(--text-primary, #e7ebf2);
border-color: var(--border-color, #202833);
}
.mode-nav-dropdown.open .dropdown-arrow {
transform: rotate(180deg);
}
.mode-nav-dropdown.has-active .mode-nav-dropdown-btn {
background: rgba(27, 36, 51, 0.9);
color: var(--text-primary, #e7ebf2);
border-color: var(--accent-cyan, #4d7dbf);
box-shadow: inset 0 -2px 0 var(--accent-cyan, #4d7dbf);
}
.mode-nav-dropdown.has-active .mode-nav-dropdown-btn .nav-icon {
color: var(--accent-cyan, #4d7dbf);
}
.mode-nav-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
min-width: 180px;
background: rgba(16, 22, 32, 0.98);
border: 1px solid var(--border-color, #202833);
border-radius: 8px;
box-shadow: 0 16px 36px rgba(5, 9, 15, 0.55);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.15s ease;
z-index: 1000;
padding: 6px;
}
.mode-nav-dropdown.open .mode-nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mode-nav-dropdown-menu .mode-nav-btn {
width: 100%;
justify-content: flex-start;
padding: 10px 12px;
border-radius: 6px;
}
.mode-nav-dropdown-menu .mode-nav-btn:hover {
background: rgba(27, 36, 51, 0.85);
}
.mode-nav-dropdown-menu .mode-nav-btn.active {
background: rgba(27, 36, 51, 0.95);
color: var(--text-primary, #e7ebf2);
box-shadow: inset 0 -2px 0 var(--accent-cyan, #4d7dbf);
}
/* Nav Bar Utilities */
.nav-utilities {
display: none;
align-items: center;
gap: 12px;
margin-left: auto;
flex-shrink: 0;
}
@media (min-width: 1024px) {
.nav-utilities {
display: flex;
}
}
.nav-clock {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
flex-shrink: 0;
white-space: nowrap;
}
.nav-clock .utc-label {
font-size: 9px;
color: var(--text-dim, #8a97a8);
text-transform: uppercase;
letter-spacing: 1px;
}
.nav-clock .utc-time {
color: var(--accent-cyan, #4d7dbf);
font-weight: 600;
}
.nav-divider {
width: 1px;
height: 20px;
background: var(--border-color, #202833);
}
.nav-tools {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.nav-tool-btn {
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 6px;
background: rgba(20, 33, 53, 0.6);
border: 1px solid rgba(77, 125, 191, 0.12);
color: var(--text-secondary, #b7c1cf);
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-tool-btn:hover {
background: rgba(27, 36, 51, 0.9);
border-color: var(--accent-cyan, #4d7dbf);
color: var(--accent-cyan, #4d7dbf);
box-shadow: 0 6px 14px rgba(5, 9, 15, 0.35);
}
/* Position relative needed for absolute positioned icon children */
.nav-tool-btn {
position: relative;
}
.mode-nav-btn:focus-visible,
.mode-nav-dropdown-btn:focus-visible,
.nav-action-btn:focus-visible,
.nav-tool-btn:focus-visible {
outline: 2px solid var(--accent-cyan, #4d7dbf);
outline-offset: 2px;
}
/* Nav tool button SVG sizing and styling */
.nav-tool-btn svg {
width: 14px;
height: 14px;
stroke: currentColor;
}
.nav-tool-btn .icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-tool-btn .icon svg {
width: 14px;
height: 14px;
stroke: currentColor;
}
/* Theme toggle icon states */
.nav-tool-btn .icon-sun,
.nav-tool-btn .icon-moon {
position: absolute;
transition: opacity 0.2s, transform 0.2s;
}
.nav-tool-btn .icon-sun {
opacity: 0;
transform: rotate(-90deg);
}
.nav-tool-btn .icon-moon {
opacity: 1;
transform: rotate(0deg);
}
[data-theme="light"] .nav-tool-btn .icon-sun {
opacity: 1;
transform: rotate(0deg);
}
[data-theme="light"] .nav-tool-btn .icon-moon {
opacity: 0;
transform: rotate(90deg);
}
/* ---- Light theme overrides ---- */
[data-theme="light"] .mode-nav {
background: linear-gradient(180deg, rgba(240, 244, 250, 0.97) 0%, rgba(232, 238, 247, 0.95) 100%);
}
[data-theme="light"] .mode-nav-btn:hover {
background: rgba(220, 230, 244, 0.8);
}
[data-theme="light"] .mode-nav-btn.active {
background: rgba(220, 230, 244, 0.9);
color: var(--text-primary);
}
[data-theme="light"] .mode-nav-dropdown-btn:hover,
[data-theme="light"] .mode-nav-dropdown.open .mode-nav-dropdown-btn,
[data-theme="light"] .mode-nav-dropdown.has-active .mode-nav-dropdown-btn {
background: rgba(220, 230, 244, 0.9);
color: var(--text-primary);
}
[data-theme="light"] .mode-nav-dropdown-menu {
background: rgba(248, 250, 253, 0.99);
box-shadow: 0 16px 36px rgba(18, 40, 66, 0.15);
}
[data-theme="light"] .mode-nav-dropdown-menu .mode-nav-btn:hover {
background: rgba(220, 230, 244, 0.85);
}
[data-theme="light"] .mode-nav-dropdown-menu .mode-nav-btn.active {
background: rgba(220, 230, 244, 0.95);
color: var(--text-primary);
}
[data-theme="light"] .nav-tool-btn {
background: rgba(235, 241, 250, 0.7);
border-color: rgba(31, 95, 168, 0.12);
}
[data-theme="light"] .nav-tool-btn:hover {
background: rgba(220, 230, 244, 0.9);
box-shadow: 0 4px 10px rgba(18, 40, 66, 0.1);
}
[data-theme="light"] .nav-action-btn {
background: rgba(235, 241, 250, 0.85);
border-color: rgba(31, 95, 168, 0.14);
}
[data-theme="light"] .nav-action-btn:hover {
background: rgba(220, 230, 244, 0.95);
box-shadow: 0 6px 14px rgba(18, 40, 66, 0.1);
}
[data-theme="light"] a.nav-dashboard-btn,
[data-theme="light"] a.nav-dashboard-btn:link,
[data-theme="light"] a.nav-dashboard-btn:visited {
background: rgba(235, 241, 250, 0.7) !important;
border-color: rgba(31, 95, 168, 0.12) !important;
color: var(--text-secondary) !important;
}
[data-theme="light"] a.nav-dashboard-btn:hover {
background: rgba(220, 230, 244, 0.9) !important;
box-shadow: 0 4px 10px rgba(18, 40, 66, 0.1);
}
/* Effects/animations toggle icon states */
.nav-tool-btn .icon-effects-off {
display: none;
}
[data-animations="off"] .nav-tool-btn .icon-effects-on {
display: none;
}
[data-animations="off"] .nav-tool-btn .icon-effects-off {
display: flex;
}
/* Main Dashboard Button in Nav */
a.nav-dashboard-btn,
a.nav-dashboard-btn:link,
a.nav-dashboard-btn:visited {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 6px;
background: rgba(20, 33, 53, 0.6) !important;
border: 1px solid rgba(77, 125, 191, 0.12) !important;
color: #b7c1cf !important;
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
text-decoration: none !important;
}
a.nav-dashboard-btn:hover {
background: rgba(27, 36, 51, 0.9) !important;
border-color: #4d7dbf !important;
color: #4d7dbf !important;
box-shadow: 0 6px 14px rgba(5, 9, 15, 0.35);
}
.nav-dashboard-btn .icon {
width: 14px;
height: 14px;
}
.nav-dashboard-btn .icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
}
.nav-dashboard-btn .nav-label {
font-family: var(--font-mono, 'Roboto Condensed', 'Arial Narrow', sans-serif);
letter-spacing: 0.5px;
}

8
static/css/index.css
View File

@@ -2739,7 +2739,7 @@ header h1 .tagline {
gap: 15px;
}
@media (max-width: 1100px) {
@media (max-width: 1023px) {
.pass-predictor {
grid-template-columns: 1fr;
}
@@ -4090,13 +4090,13 @@ header h1 .tagline {
}
/* WiFi Responsive */
@media (max-width: 1400px) {
@media (max-width: 1280px) {
.wifi-main-content {
grid-template-columns: minmax(280px, 1fr) 240px 240px;
}
}
@media (max-width: 1200px) {
@media (max-width: 1280px) {
.wifi-layout-container {
flex: 1;
min-height: 0;
@@ -5415,7 +5415,7 @@ header h1 .tagline {
background: var(--bg-secondary, #1a1a2e);
}
@media (max-width: 1200px) {
@media (max-width: 1280px) {
.bt-layout-container {
flex-direction: column;
flex: 1;

2
static/css/modes/bt_locate.css
View File

@@ -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;

2
static/css/modes/meshtastic.css
View File

@@ -1378,7 +1378,7 @@
}
/* Responsive traceroute path */
@media (max-width: 600px) {
@media (max-width: 480px) {
.mesh-traceroute-path {
flex-direction: column;
}

4
static/css/modes/meteor.css
View File

@@ -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);
}

2
static/css/modes/ook.css
View File

@@ -67,7 +67,7 @@
.ook-warning {
font-size: 11px;
color: #ffaa00;
color: var(--accent-orange);
line-height: 1.5;
}

2
static/css/modes/radiosonde.css
View File

@@ -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%;

2
static/css/modes/spy-stations.css
View File

@@ -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;

4
static/css/modes/subghz.css
View File

@@ -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;
}

174
static/css/modes/tscm.css
View File

@@ -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;
}

4
static/css/modes/waterfall.css
View File

@@ -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;

62
static/css/modes/weather-satellite.css
View File

@@ -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 {

64
static/css/modes/wefax.css
View File

@@ -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;
}

2
static/css/modes/wifi_locate.css
View File

@@ -361,7 +361,7 @@
RESPONSIVE
============================================ */
@media (max-width: 900px) {
@media (max-width: 1023px) {
.wfl-rssi-display {
font-size: 48px;
}

261
static/css/responsive.css
View File

@@ -424,30 +424,30 @@
/* ============== MOBILE LAYOUT FIXES ============== */
@media (max-width: 1023px) {
/* Fix main content to allow scrolling on mobile */
.main-content {
height: auto !important;
.app-shell .main-content {
height: auto;
min-height: calc(100dvh - var(--header-height) - var(--nav-height));
overflow-y: auto !important;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.sidebar {
.app-shell .sidebar {
padding: 10px;
gap: 10px;
}
.output-panel {
.app-shell .output-panel {
min-height: 58vh;
}
.output-header {
.app-shell .output-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.header-controls {
.app-shell .header-controls {
width: 100%;
gap: 8px;
overflow-x: auto;
@@ -455,20 +455,21 @@
padding-bottom: 2px;
}
.header-controls .stats {
.app-shell .header-controls .stats {
min-width: max-content;
}
/* Container should not clip content */
.container {
.app-shell .container {
overflow: visible;
height: auto;
min-height: 100dvh;
}
/* Layout containers need to stack vertically on mobile */
.wifi-layout-container,
.bt-layout-container {
/* overrides inline style - JS sets display via style attribute */
.app-shell .wifi-layout-container,
.app-shell .bt-layout-container {
flex-direction: column !important;
height: auto !important;
max-height: none !important;
@@ -478,126 +479,128 @@
}
/* Visual panels should be scrollable, not clipped */
.wifi-visuals,
.bt-visuals-column {
max-height: none !important;
overflow: visible !important;
.app-shell .wifi-visuals,
.app-shell .bt-visuals-column {
max-height: none;
overflow: visible;
margin-bottom: 15px;
}
/* Device lists should have reasonable height on mobile */
.wifi-device-list,
.bt-device-list {
.app-shell .wifi-device-list,
.app-shell .bt-device-list {
max-height: 400px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Visual panels should stack in single column on mobile when visible */
.wifi-visuals,
.bt-visuals-column {
.app-shell .wifi-visuals,
.app-shell .bt-visuals-column {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Only apply flex when aircraft visuals are shown (via JS setting display: grid) */
#aircraftVisuals[style*="grid"] {
display: flex !important;
flex-direction: column !important;
/* Stack aircraft visuals vertically on mobile when active */
#aircraftVisuals.active {
display: flex;
flex-direction: column;
gap: 10px;
}
/* APRS visuals - only when visible */
#aprsVisuals[style*="flex"] {
flex-direction: column !important;
/* APRS visuals stack vertically on mobile */
.app-shell #aprsVisuals {
flex-direction: column;
}
.wifi-visual-panel {
grid-column: auto !important;
.app-shell .wifi-visual-panel {
grid-column: auto;
}
.bt-main-area {
flex-direction: column !important;
min-height: auto !important;
.app-shell .bt-main-area {
flex-direction: column;
min-height: auto;
}
.bt-side-panels {
width: 100% !important;
flex-direction: column !important;
.app-shell .bt-side-panels {
width: 100%;
flex-direction: column;
}
.bt-detail-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
.app-shell .bt-detail-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bt-row-secondary {
padding-left: 0 !important;
white-space: normal !important;
.app-shell .bt-row-secondary {
padding-left: 0;
white-space: normal;
}
.bt-row-actions {
padding-left: 0 !important;
justify-content: flex-start !important;
.app-shell .bt-row-actions {
padding-left: 0;
justify-content: flex-start;
}
.bt-list-summary {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
.app-shell .bt-list-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ============== MOBILE MAP FIXES ============== */
@media (max-width: 1023px) {
/* Aircraft map container needs explicit height on mobile */
.aircraft-map-container {
height: 300px !important;
min-height: 300px !important;
width: 100% !important;
.app-shell .aircraft-map-container {
height: 300px;
min-height: 300px;
width: 100%;
}
#aircraftMap {
height: 100% !important;
width: 100% !important;
.app-shell #aircraftMap {
height: 100%;
width: 100%;
min-height: 250px;
}
/* APRS map container */
#aprsMap {
min-height: 300px !important;
height: 300px !important;
width: 100% !important;
.app-shell #aprsMap {
min-height: 300px;
height: 300px;
width: 100%;
}
/* Satellite embed */
.satellite-dashboard-embed {
height: 400px !important;
min-height: 400px !important;
.app-shell .satellite-dashboard-embed {
height: 400px;
min-height: 400px;
}
/* Map panels should be full width */
/* overrides inline style - HTML sets grid-column via style attribute */
.wifi-visual-panel[style*="grid-column: span 2"] {
grid-column: auto !important;
}
/* Make map container full width when it has ACARS sidebar */
/* overrides inline style - HTML sets flex-direction via style attribute */
.wifi-visual-panel[style*="display: flex"][style*="gap: 0"] {
flex-direction: column !important;
}
/* ACARS sidebar should be below map on mobile */
.main-acars-sidebar {
width: 100% !important;
max-width: none !important;
border-left: none !important;
border-top: 1px solid var(--border-color, #1f2937) !important;
.app-shell .main-acars-sidebar {
width: 100%;
max-width: none;
border-left: none;
border-top: 1px solid var(--border-color, #1f2937);
}
.main-acars-sidebar.collapsed {
width: 100% !important;
.app-shell .main-acars-sidebar.collapsed {
width: 100%;
}
.main-acars-content {
max-height: 200px !important;
.app-shell .main-acars-content {
max-height: 200px;
}
}
@@ -611,55 +614,55 @@
touch-action: manipulation;
}
.leaflet-control-zoom a {
min-width: var(--touch-min, 44px) !important;
min-height: var(--touch-min, 44px) !important;
line-height: var(--touch-min, 44px) !important;
font-size: 18px !important;
.app-shell .leaflet-container .leaflet-control-zoom a {
min-width: var(--touch-min, 44px);
min-height: var(--touch-min, 44px);
line-height: var(--touch-min, 44px);
font-size: 18px;
}
/* ============== MOBILE HEADER STATS ============== */
@media (max-width: 1023px) {
.header-stats {
display: none !important;
}
/* Simplify header on mobile */
header h1 {
font-size: 16px !important;
}
header h1 .tagline,
header h1 .version-badge {
.app-shell .header-stats {
display: none;
}
header .subtitle {
font-size: 10px !important;
/* Simplify header on mobile */
.app-shell header h1 {
font-size: 16px;
}
.app-shell header h1 .tagline,
.app-shell header h1 .version-badge {
display: none;
}
.app-shell header .subtitle {
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
header .logo svg {
width: 30px !important;
height: 30px !important;
.app-shell header .logo svg {
width: 30px;
height: 30px;
}
}
/* ============== MOBILE MODE PANELS ============== */
@media (max-width: 1023px) {
/* Mode panel grids should be single column */
.data-grid,
.stats-grid,
.sensor-grid {
grid-template-columns: 1fr !important;
.app-shell .data-grid,
.app-shell .stats-grid,
.app-shell .sensor-grid {
grid-template-columns: 1fr;
}
/* Section headers should be easier to tap */
.section h3 {
.app-shell .section h3 {
min-height: var(--touch-min);
padding: 12px !important;
padding: 12px;
}
/* Tables need horizontal scroll */
@@ -682,85 +685,85 @@
/* ============== WELCOME PAGE MOBILE ============== */
@media (max-width: 767px) {
.welcome-container {
padding: 15px !important;
max-width: 100% !important;
.app-shell .welcome-container {
padding: 15px;
max-width: 100%;
}
.welcome-header {
.app-shell .welcome-header {
flex-direction: column;
text-align: center;
gap: 10px;
}
.welcome-logo svg {
.app-shell .welcome-logo svg {
width: 50px;
height: 50px;
}
.welcome-title {
font-size: 24px !important;
.app-shell .welcome-title {
font-size: 24px;
}
.welcome-content {
grid-template-columns: 1fr !important;
.app-shell .welcome-content {
grid-template-columns: 1fr;
}
.mode-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
.app-shell .mode-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.mode-card {
padding: 12px 8px !important;
.app-shell .mode-card {
padding: 12px 8px;
}
.mode-icon {
font-size: 20px !important;
.app-shell .mode-icon {
font-size: 20px;
}
.mode-name {
font-size: 11px !important;
.app-shell .mode-name {
font-size: 11px;
}
.mode-desc {
font-size: 9px !important;
.app-shell .mode-desc {
font-size: 9px;
}
.changelog-release {
padding: 10px !important;
.app-shell .changelog-release {
padding: 10px;
}
}
/* ============== TSCM MODE MOBILE ============== */
@media (max-width: 1023px) {
.tscm-layout {
flex-direction: column !important;
height: auto !important;
.app-shell .tscm-layout {
flex-direction: column;
height: auto;
}
.tscm-spectrum-panel,
.tscm-detection-panel {
width: 100% !important;
max-width: none !important;
height: auto !important;
.app-shell .tscm-spectrum-panel,
.app-shell .tscm-detection-panel {
width: 100%;
max-width: none;
height: auto;
min-height: 300px;
}
}
/* ============== LISTENING POST MOBILE ============== */
@media (max-width: 1023px) {
.radio-controls-section {
flex-direction: column !important;
.app-shell .radio-controls-section {
flex-direction: column;
gap: 15px;
}
.knobs-row {
.app-shell .knobs-row {
flex-wrap: wrap;
justify-content: center;
}
.radio-module-box {
width: 100% !important;
.app-shell .radio-module-box {
width: 100%;
}
}

6
static/css/satellite_dashboard.css
View File

@@ -134,7 +134,7 @@ body {
}
/* Mobile header adjustments */
@media (max-width: 800px) {
@media (max-width: 768px) {
.header {
padding: 10px 12px;
flex-wrap: wrap;
@@ -709,7 +709,7 @@ body {
}
/* Responsive */
@media (max-width: 1200px) {
@media (max-width: 1280px) {
.dashboard {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr auto auto;
@@ -745,7 +745,7 @@ body {
}
}
@media (max-width: 800px) {
@media (max-width: 768px) {
.dashboard {
display: flex;
flex-direction: column;

4
static/css/settings.css
View File

@@ -528,13 +528,13 @@ html.map-cyber-enabled .leaflet-container::after {
}
/* Responsive */
@media (max-width: 960px) {
@media (max-width: 1023px) {
.settings-tabs {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
@media (max-width: 768px) {
.settings-modal.active {
padding: 20px 10px;
}