Nav text uses --nav-text variable, customizable in Advanced

Defaults to white. Admin can change it for light nav backgrounds.
Nav bar brand, links, buttons all use var(--nav-text, #fff).
This commit is contained in:
you
2026-03-23 02:59:22 +00:00
parent 8e990f61d4
commit 318a70c7d0
3 changed files with 10 additions and 7 deletions
+6 -3
View File
@@ -17,7 +17,7 @@
theme: {
accent: '#4a9eff', navBg: '#0f0f23', background: '#f4f5f7', text: '#1a1a2e',
statusGreen: '#22c55e', statusYellow: '#eab308', statusRed: '#ef4444',
accentHover: '#6db3ff', navBg2: '#1a1a2e', textMuted: '#5b6370', border: '#e2e5ea',
accentHover: '#6db3ff', navBg2: '#1a1a2e', navText: '#ffffff', textMuted: '#5b6370', border: '#e2e5ea',
surface1: '#ffffff', surface2: '#ffffff', cardBg: '#ffffff', contentBg: '#f4f5f7',
inputBg: '#ffffff', rowStripe: '#f9fafb', rowHover: '#eef2ff', selectedBg: '#dbeafe',
font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
@@ -26,7 +26,7 @@
themeDark: {
accent: '#4a9eff', navBg: '#0f0f23', background: '#0f0f23', text: '#e2e8f0',
statusGreen: '#22c55e', statusYellow: '#eab308', statusRed: '#ef4444',
accentHover: '#6db3ff', navBg2: '#1a1a2e', textMuted: '#a8b8cc', border: '#334155',
accentHover: '#6db3ff', navBg2: '#1a1a2e', navText: '#ffffff', textMuted: '#a8b8cc', border: '#334155',
surface1: '#1a1a2e', surface2: '#232340', cardBg: '#1a1a2e', contentBg: '#0f0f23',
inputBg: '#1e1e34', rowStripe: '#1e1e34', rowHover: '#2d2d50', selectedBg: '#1e3a5f',
font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
@@ -79,6 +79,7 @@
// Advanced (derived from basic by default)
accentHover: '--accent-hover',
navBg2: '--nav-bg2',
navText: '--nav-text',
textMuted: '--text-muted',
border: '--border',
surface1: '--surface-1',
@@ -94,7 +95,7 @@
};
const BASIC_KEYS = ['accent', 'navBg', 'background', 'text', 'statusGreen', 'statusYellow', 'statusRed'];
const ADVANCED_KEYS = ['accentHover', 'navBg2', 'textMuted', 'border', 'surface1', 'surface2', 'cardBg', 'contentBg', 'inputBg', 'rowStripe', 'rowHover', 'selectedBg', 'font', 'mono'];
const ADVANCED_KEYS = ['accentHover', 'navBg2', 'navText', 'textMuted', 'border', 'surface1', 'surface2', 'cardBg', 'contentBg', 'inputBg', 'rowStripe', 'rowHover', 'selectedBg', 'font', 'mono'];
const THEME_LABELS = {
accent: 'Brand Color',
@@ -106,6 +107,7 @@
statusRed: 'Error',
accentHover: 'Accent Hover',
navBg2: 'Nav Gradient End',
navText: 'Nav Text',
textMuted: 'Muted Text',
border: 'Borders',
surface1: 'Cards',
@@ -130,6 +132,7 @@
statusRed: 'Error/offline indicators',
accentHover: 'Hover state for accent elements',
navBg2: 'Darker end of nav gradient',
navText: 'Navigation bar text, links, brand name',
textMuted: 'Labels, timestamps, secondary text',
border: 'Dividers, table borders, card borders',
surface1: 'Card and panel backgrounds',
+2 -2
View File
@@ -22,7 +22,7 @@
<meta name="twitter:title" content="MeshCore Analyzer">
<meta name="twitter:description" content="Real-time MeshCore LoRa mesh network analyzer — live packet visualization, node tracking, channel decryption, and route analysis.">
<meta name="twitter:image" content="https://raw.githubusercontent.com/Kpa-clawbot/meshcore-analyzer/master/public/og-image.png">
<link rel="stylesheet" href="style.css?v=1774232985">
<link rel="stylesheet" href="style.css?v=1774234762">
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="live.css?v=1774058575">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
@@ -101,6 +101,6 @@
<script src="observer-detail.js?v=1774219440" onerror="console.error('Failed to load:', this.src)"></script>
<script src="node-analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
<script src="perf.js?v=1773985649" onerror="console.error('Failed to load:', this.src)"></script>
<script src="customize.js?v=1774234619" onerror="console.error('Failed to load:', this.src)"></script>
<script src="customize.js?v=1774234762" onerror="console.error('Failed to load:', this.src)"></script>
</body>
</html>
+2 -2
View File
@@ -87,12 +87,12 @@ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible
/* === Nav === */
.top-nav {
display: flex; align-items: center; justify-content: space-between;
background: linear-gradient(135deg, var(--nav-bg) 0%, var(--nav-bg2) 100%); color: #fff; padding: 0 20px; height: 52px;
background: linear-gradient(135deg, var(--nav-bg) 0%, var(--nav-bg2) 100%); color: var(--nav-text, #fff); padding: 0 20px; height: 52px;
position: sticky; top: 0; z-index: 1100;
box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.nav-left { display: flex; align-items: center; gap: 24px; }
.nav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; font-weight: 700; font-size: 16px; }
.nav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--nav-text, #fff); font-weight: 700; font-size: 16px; }
.brand-icon { font-size: 20px; }
.live-dot {
width: 8px; height: 8px; border-radius: 50%; background: #555;