From db931c3806e4e73737e5146eea2daa27bb1c2760 Mon Sep 17 00:00:00 2001 From: Smittix Date: Fri, 30 Jan 2026 09:31:45 +0000 Subject: [PATCH] fix: Add navigation styles to dashboards - Add mode navigation CSS to core/layout.css so it's available on all pages - Import layout.css in dashboard stylesheets (ADSB, AIS, Satellite) - Fixes nav partial appearing unstyled on dashboard pages Co-Authored-By: Claude Opus 4.5 --- static/css/adsb_dashboard.css | 1 + static/css/ais_dashboard.css | 1 + static/css/core/layout.css | 366 +++++++++++++++++++++++++++++ static/css/satellite_dashboard.css | 1 + 4 files changed, 369 insertions(+) diff --git a/static/css/adsb_dashboard.css b/static/css/adsb_dashboard.css index 9ac3982..1b285fe 100644 --- a/static/css/adsb_dashboard.css +++ b/static/css/adsb_dashboard.css @@ -3,6 +3,7 @@ * Imports design tokens for consistency, with dashboard-specific overrides */ @import url('./core/variables.css'); +@import url('./core/layout.css'); * { margin: 0; diff --git a/static/css/ais_dashboard.css b/static/css/ais_dashboard.css index c14f5e7..6451b98 100644 --- a/static/css/ais_dashboard.css +++ b/static/css/ais_dashboard.css @@ -3,6 +3,7 @@ * Imports design tokens for consistency, with dashboard-specific overrides */ @import url('./core/variables.css'); +@import url('./core/layout.css'); * { margin: 0; diff --git a/static/css/core/layout.css b/static/css/core/layout.css index 86e01e6..452ba6d 100644 --- a/static/css/core/layout.css +++ b/static/css/core/layout.css @@ -580,3 +580,369 @@ .back-link:hover { color: var(--accent-cyan); } + +/* ============================================ + MODE NAVIGATION (from index.css) + Used by nav.html partial across all pages + ============================================ */ + +/* Mode Navigation Bar */ +.mode-nav { + display: none; + background: var(--bg-tertiary); + border-bottom: 1px solid var(--border-color); + padding: 0 20px; +} + +@media (min-width: 1024px) { + .mode-nav { + display: flex; + align-items: center; + gap: 8px; + height: 44px; + } +} + +.mode-nav-group { + display: flex; + align-items: center; + gap: 4px; +} + +.mode-nav-label { + font-size: 9px; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 1px; + margin-right: 8px; + font-weight: 500; +} + +.mode-nav-divider { + width: 1px; + height: 24px; + background: var(--border-color); + margin: 0 12px; +} + +.mode-nav-btn { + display: flex; + align-items: center; + gap: 6px; + padding: 8px 14px; + background: transparent; + border: 1px solid transparent; + border-radius: 4px; + 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; +} + +.mode-nav-btn .nav-label { + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.mode-nav-btn:hover { + background: var(--bg-elevated); + color: var(--text-primary); + border-color: var(--border-color); +} + +.mode-nav-btn.active { + background: var(--accent-cyan); + color: var(--bg-primary); + border-color: var(--accent-cyan); +} + +.mode-nav-btn.active .nav-icon { + filter: brightness(0); +} + +.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: var(--bg-elevated); + border: 1px solid var(--accent-cyan); + border-radius: 4px; + color: var(--accent-cyan); + 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; +} + +.nav-action-btn .nav-label { + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.nav-action-btn:hover { + background: var(--accent-cyan); + color: var(--bg-primary); +} + +/* Dropdown Navigation */ +.mode-nav-dropdown { + position: relative; +} + +.mode-nav-dropdown-btn { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 14px; + background: transparent; + border: 1px solid transparent; + border-radius: 4px; + color: var(--text-secondary); + font-family: var(--font-sans); + font-size: 11px; + font-weight: 500; + cursor: pointer; + transition: all 0.15s ease; +} + +.mode-nav-dropdown-btn:hover { + background: var(--bg-elevated); + color: var(--text-primary); + 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); + border-color: var(--border-color); +} + +.mode-nav-dropdown.open .dropdown-arrow { + transform: rotate(180deg); +} + +.mode-nav-dropdown.has-active .mode-nav-dropdown-btn { + background: var(--accent-cyan); + color: var(--bg-primary); + border-color: var(--accent-cyan); +} + +.mode-nav-dropdown.has-active .mode-nav-dropdown-btn .nav-icon { + filter: brightness(0); +} + +.mode-nav-dropdown-menu { + position: absolute; + top: 100%; + left: 0; + margin-top: 4px; + min-width: 180px; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: 6px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); + 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: 4px; + margin: 0; +} + +.mode-nav-dropdown-menu .mode-nav-btn:hover { + background: var(--bg-elevated); +} + +.mode-nav-dropdown-menu .mode-nav-btn.active { + background: var(--accent-cyan); + color: var(--bg-primary); +} + +/* Nav Bar Utilities (clock, theme, tools) */ +.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); + text-transform: uppercase; + letter-spacing: 1px; +} + +.nav-clock .utc-time { + color: var(--accent-cyan); + font-weight: 600; +} + +.nav-divider { + width: 1px; + height: 20px; + background: var(--border-color); +} + +.nav-tools { + display: flex; + align-items: center; + gap: 6px; + flex-shrink: 0; +} + +.nav-tool-btn { + width: 28px; + height: 28px; + min-width: 28px; + border-radius: 4px; + background: transparent; + border: 1px solid transparent; + color: var(--text-secondary); + font-size: 14px; + font-weight: bold; + cursor: pointer; + transition: all 0.15s ease; + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; +} + +.nav-tool-btn:hover { + background: var(--bg-elevated); + border-color: var(--border-color); + color: var(--accent-cyan); +} + +.nav-tool-btn svg { + width: 14px; + height: 14px; +} + +.nav-tool-btn .icon svg { + width: 14px; + height: 14px; +} + +/* Theme toggle icon states in nav bar */ +.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 { + 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); +} + +/* Effects 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; +} diff --git a/static/css/satellite_dashboard.css b/static/css/satellite_dashboard.css index bc9fa33..6ffa657 100644 --- a/static/css/satellite_dashboard.css +++ b/static/css/satellite_dashboard.css @@ -3,6 +3,7 @@ * Imports design tokens for consistency, with dashboard-specific overrides */ @import url('./core/variables.css'); +@import url('./core/layout.css'); * { margin: 0;