From 403b9c8d71cd75eff3935d882b09691c5235a7db Mon Sep 17 00:00:00 2001 From: you Date: Mon, 23 Mar 2026 03:49:12 +0000 Subject: [PATCH] Fix: nav bar text fully customizable via --nav-text (Basic) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- public/customize.js | 18 ++++++++++++------ public/index.html | 4 ++-- public/style.css | 16 +++++++++------- 3 files changed, 23 insertions(+), 15 deletions(-) diff --git a/public/customize.js b/public/customize.js index aac15874..c14829a8 100644 --- a/public/customize.js +++ b/public/customize.js @@ -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', diff --git a/public/index.html b/public/index.html index d49f0083..b757e142 100644 --- a/public/index.html +++ b/public/index.html @@ -22,7 +22,7 @@ - + - + diff --git a/public/style.css b/public/style.css index ba8e9f99..fa55a6de 100644 --- a/public/style.css +++ b/public/style.css @@ -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 === */