dandri/meshcore-analyzer
1
0
Fork 0
mirror of https://github.com/Kpa-clawbot/meshcore-analyzer.git synced 2026-05-14 17:55:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: nav bar text fully customizable via --nav-text (Basic)

Browse Source 
Added --nav-text and --nav-text-muted CSS variables. All nav
selectors (.top-nav, .nav-brand, .nav-link, .nav-btn, .nav-stats)
use these instead of --text/--text-muted. Nav Text is in Basic
settings. Nav Muted Text in Advanced.

This is separate from page text because nav sits on a dark
background — page text color would be unreadable on the nav.
This commit is contained in:
you
2026-03-23 03:49:12 +00:00
parent ea274dbd7f
commit 403b9c8d71
3 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/customize.js
+12 -6
View File
@@ -15,18 +15,18 @@
faviconUrl: ''
},
theme: {
accent: '#4a9eff', navBg: '#0f0f23', background: '#f4f5f7', text: '#1a1a2e',
accent: '#4a9eff', navBg: '#0f0f23', navText: '#ffffff', background: '#f4f5f7', text: '#1a1a2e',
statusGreen: '#22c55e', statusYellow: '#eab308', statusRed: '#ef4444',
accentHover: '#6db3ff', navBg2: '#1a1a2e', textMuted: '#5b6370', border: '#e2e5ea',
accentHover: '#6db3ff', navBg2: '#1a1a2e', navTextMuted: '#cbd5e1', textMuted: '#5b6370', border: '#e2e5ea',
surface1: '#ffffff', surface2: '#ffffff', cardBg: '#ffffff', contentBg: '#f4f5f7',
detailBg: '#ffffff', inputBg: '#ffffff', rowStripe: '#f9fafb', rowHover: '#eef2ff', selectedBg: '#dbeafe',
font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
mono: '"SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace',
},
themeDark: {
accent: '#4a9eff', navBg: '#0f0f23', background: '#0f0f23', text: '#e2e8f0',
accent: '#4a9eff', navBg: '#0f0f23', navText: '#ffffff', background: '#0f0f23', text: '#e2e8f0',
statusGreen: '#22c55e', statusYellow: '#eab308', statusRed: '#ef4444',
accentHover: '#6db3ff', navBg2: '#1a1a2e', textMuted: '#a8b8cc', border: '#334155',
accentHover: '#6db3ff', navBg2: '#1a1a2e', navTextMuted: '#cbd5e1', textMuted: '#a8b8cc', border: '#334155',
surface1: '#1a1a2e', surface2: '#232340', cardBg: '#1a1a2e', contentBg: '#0f0f23',
detailBg: '#232340', inputBg: '#1e1e34', rowStripe: '#1e1e34', rowHover: '#2d2d50', selectedBg: '#1e3a5f',
font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
@@ -71,6 +71,7 @@
// Basic
accent: '--accent',
navBg: '--nav-bg',
navText: '--nav-text',
background: '--surface-0',
text: '--text',
statusGreen: '--status-green',
@@ -79,6 +80,7 @@
// Advanced (derived from basic by default)
accentHover: '--accent-hover',
navBg2: '--nav-bg2',
navTextMuted: '--nav-text-muted',
textMuted: '--text-muted',
border: '--border',
surface1: '--surface-1',
@@ -94,13 +96,14 @@
mono: '--mono',
};
const BASIC_KEYS = ['accent', 'navBg', 'background', 'text', 'statusGreen', 'statusYellow', 'statusRed'];
const ADVANCED_KEYS = ['accentHover', 'navBg2', 'textMuted', 'border', 'surface1', 'surface2', 'cardBg', 'contentBg', 'detailBg', 'inputBg', 'rowStripe', 'rowHover', 'selectedBg'];
const BASIC_KEYS = ['accent', 'navBg', 'navText', 'background', 'text', 'statusGreen', 'statusYellow', 'statusRed'];
const ADVANCED_KEYS = ['accentHover', 'navBg2', 'navTextMuted', 'textMuted', 'border', 'surface1', 'surface2', 'cardBg', 'contentBg', 'detailBg', 'inputBg', 'rowStripe', 'rowHover', 'selectedBg'];
const FONT_KEYS = ['font', 'mono'];
const THEME_LABELS = {
accent: 'Brand Color',
navBg: 'Navigation',
navText: 'Nav Text',
background: 'Background',
text: 'Text',
statusGreen: 'Healthy',
@@ -108,6 +111,7 @@
statusRed: 'Error',
accentHover: 'Accent Hover',
navBg2: 'Nav Gradient End',
navTextMuted: 'Nav Muted Text',
textMuted: 'Muted Text',
border: 'Borders',
surface1: 'Cards',
@@ -126,6 +130,7 @@
const THEME_HINTS = {
accent: 'Buttons, links, active tabs, badges, charts — your primary brand color',
navBg: 'Top navigation bar',
navText: 'Nav bar text, links, brand name, buttons',
background: 'Main page background',
text: 'Primary text — muted text auto-derives',
statusGreen: 'Healthy/online indicators',
@@ -133,6 +138,7 @@
statusRed: 'Error/offline indicators',
accentHover: 'Hover state for accent elements',
navBg2: 'Darker end of nav gradient',
navTextMuted: 'Inactive nav links, nav buttons',
textMuted: 'Labels, timestamps, secondary text',
border: 'Dividers, table borders, card borders',
surface1: 'Card and panel backgrounds',
public/index.html
+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=1774236560">
<link rel="stylesheet" href="style.css?v=1774237752">
<link rel="stylesheet" href="home.css?v=1774236560">
<link rel="stylesheet" href="live.css?v=1774236560">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
@@ -82,7 +82,7 @@
<script src="vendor/qrcode.js"></script>
<script src="roles.js?v=1774236560"></script>
<script src="customize.js?v=1774237289" onerror="console.error('Failed to load:', this.src)"></script>
<script src="customize.js?v=1774237752" onerror="console.error('Failed to load:', this.src)"></script>
<script src="region-filter.js?v=1774325000"></script>
<script src="hop-resolver.js?v=1774223973"></script>
<script src="hop-display.js?v=1774221932"></script>
public/style.css
+9 -7
View File
@@ -3,6 +3,8 @@
:root {
--nav-bg: #0f0f23;
--nav-bg2: #1a1a2e;
--nav-text: #ffffff;
--nav-text-muted: #cbd5e1;
--accent: #4a9eff;
--status-green: #22c55e;
--status-yellow: #eab308;
@@ -96,12 +98,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: var(--text); padding: 0 20px; height: 52px;
background: linear-gradient(135deg, var(--nav-bg) 0%, var(--nav-bg2) 100%); color: var(--nav-text); 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: var(--text); font-weight: 700; font-size: 16px; }
.nav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--nav-text); font-weight: 700; font-size: 16px; }
.brand-icon { font-size: 20px; }
.live-dot {
width: 8px; height: 8px; border-radius: 50%; background: #555;
@@ -116,12 +118,12 @@ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
color: var(--text-muted); text-decoration: none; padding: 14px 12px; font-size: 14px;
color: var(--nav-text-muted); text-decoration: none; padding: 14px 12px; font-size: 14px;
border-bottom: 2px solid transparent; transition: all .15s;
background: none; border-top: none; border-left: none; border-right: none;
cursor: pointer; font-family: var(--font);
}
.nav-link:hover { color: var(--text); }
.nav-link:hover { color: var(--nav-text); }
.nav-link.active {
color: #fff;
border-bottom-color: transparent;
@@ -145,17 +147,17 @@ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-btn {
background: none; border: 1px solid #444; color: var(--text-muted); padding: 6px 12px;
background: none; border: 1px solid #444; color: var(--nav-text-muted); padding: 6px 12px;
border-radius: 6px; cursor: pointer; font-size: 14px; transition: all .15s;
min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.nav-btn:hover { background: #333; color: var(--text); }
.nav-btn:hover { background: #333; color: var(--nav-text); }
/* === Nav Stats === */
.nav-stats {
display: flex; gap: 12px; align-items: center; font-size: 12px; color: #94a3b8;
font-family: var(--mono); margin-right: 4px;
}
.nav-stats .stat-val { color: #e2e8f0; font-weight: 600; transition: color 0.3s ease; }
.nav-stats .stat-val { color: var(--nav-text); font-weight: 600; transition: color 0.3s ease; }
.nav-stats .stat-val.updated { color: var(--accent); }
/* === Layout === */