mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-08-28 22:48:17 +00:00
fix: replace all hardcoded colors with CSS variables
- Move --status-green/yellow/red from home.css to style.css :root (light+dark) - Replace hardcoded status colors in style.css (.tl-snr, .health-dot, .byop-err, .badge-hash-*, .fav-star.on, .spark-fill) with CSS variable references - Replace hardcoded colors in live.css (VCR mode, stat pills, fdc-link, playhead) - Replace --primary/--bg-secondary/--text-primary/--text-secondary dead vars with canonical --accent/--input-bg/--text/--text-muted in style.css, map.js, live.js, traces.js, packets.js - Fix nodes.js legend colors to use ROLE_COLORS globals instead of hardcoded hex - Replace hardcoded hex in home.js (SNR), perf.js (indicators), map.js (accuracy circles) with CSS variable references via getComputedStyle or var() - Add --detail-bg to customizer (THEME_CSS_MAP, DEFAULTS, ADVANCED_KEYS, labels) - Move font/mono out of ADVANCED_KEYS into separate Fonts section in customizer - Remove debug console.log lines from customize.js - Bump cache busters in index.html
This commit is contained in:
you
+16
-4
@@ -19,7 +19,7 @@
|
||||
statusGreen: '#22c55e', statusYellow: '#eab308', statusRed: '#ef4444',
|
||||
accentHover: '#6db3ff', navBg2: '#1a1a2e', textMuted: '#5b6370', border: '#e2e5ea',
|
||||
surface1: '#ffffff', surface2: '#ffffff', cardBg: '#ffffff', contentBg: '#f4f5f7',
|
||||
inputBg: '#ffffff', rowStripe: '#f9fafb', rowHover: '#eef2ff', selectedBg: '#dbeafe',
|
||||
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',
|
||||
},
|
||||
@@ -28,7 +28,7 @@
|
||||
statusGreen: '#22c55e', statusYellow: '#eab308', statusRed: '#ef4444',
|
||||
accentHover: '#6db3ff', navBg2: '#1a1a2e', textMuted: '#a8b8cc', border: '#334155',
|
||||
surface1: '#1a1a2e', surface2: '#232340', cardBg: '#1a1a2e', contentBg: '#0f0f23',
|
||||
inputBg: '#1e1e34', rowStripe: '#1e1e34', rowHover: '#2d2d50', selectedBg: '#1e3a5f',
|
||||
detailBg: '#232340', inputBg: '#1e1e34', rowStripe: '#1e1e34', rowHover: '#2d2d50', selectedBg: '#1e3a5f',
|
||||
font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
mono: '"SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace',
|
||||
},
|
||||
@@ -85,6 +85,7 @@
|
||||
surface2: '--surface-2',
|
||||
cardBg: '--card-bg',
|
||||
contentBg: '--content-bg',
|
||||
detailBg: '--detail-bg',
|
||||
inputBg: '--input-bg',
|
||||
rowStripe: '--row-stripe',
|
||||
rowHover: '--row-hover',
|
||||
@@ -94,7 +95,8 @@
|
||||
};
|
||||
|
||||
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', 'textMuted', 'border', 'surface1', 'surface2', 'cardBg', 'contentBg', 'detailBg', 'inputBg', 'rowStripe', 'rowHover', 'selectedBg'];
|
||||
const FONT_KEYS = ['font', 'mono'];
|
||||
|
||||
const THEME_LABELS = {
|
||||
accent: 'Brand Color',
|
||||
@@ -112,6 +114,7 @@
|
||||
surface2: 'Panels',
|
||||
cardBg: 'Card Fill',
|
||||
contentBg: 'Content Area',
|
||||
detailBg: 'Detail Panels',
|
||||
inputBg: 'Inputs',
|
||||
rowStripe: 'Table Stripe',
|
||||
rowHover: 'Row Hover',
|
||||
@@ -136,6 +139,7 @@
|
||||
surface2: 'Nested surfaces, secondary panels',
|
||||
cardBg: 'Detail panels, modals',
|
||||
contentBg: 'Content area behind cards',
|
||||
detailBg: 'Modal, packet detail, side panels',
|
||||
inputBg: 'Text inputs, dropdowns',
|
||||
rowStripe: 'Alternating table rows',
|
||||
rowHover: 'Table row hover',
|
||||
@@ -259,7 +263,6 @@
|
||||
_autoSaveTimer = null;
|
||||
try {
|
||||
var data = buildExport();
|
||||
console.log('[customize] autoSave:', Object.keys(data), data.nodeColors, data.typeColors);
|
||||
localStorage.setItem('meshcore-user-theme', JSON.stringify(data));
|
||||
} catch (e) { console.error('[customize] autoSave error:', e); }
|
||||
}, 500);
|
||||
@@ -425,6 +428,12 @@
|
||||
advancedRows += renderColorRow(akey, current[akey] || defs[akey] || '#000000', defs[akey] || '#000000', 'theme');
|
||||
}
|
||||
|
||||
var fontRows = '';
|
||||
for (var f = 0; f < FONT_KEYS.length; f++) {
|
||||
var fkey = FONT_KEYS[f];
|
||||
fontRows += renderColorRow(fkey, current[fkey] || defs[fkey] || '', defs[fkey] || '', 'theme');
|
||||
}
|
||||
|
||||
return '<div class="cust-panel' + (activeTab === 'theme' ? ' active' : '') + '" data-panel="theme">' +
|
||||
'<p class="cust-section-title">' + modeLabel + '</p>' +
|
||||
'<p style="font-size:11px;color:var(--text-muted);margin:0 0 10px">Toggle ☀️/🌙 in nav to edit the other mode.</p>' +
|
||||
@@ -432,6 +441,9 @@
|
||||
'<details class="cust-advanced"><summary style="font-size:12px;font-weight:600;cursor:pointer;color:var(--text-muted);margin:12px 0 8px">Advanced (' + ADVANCED_KEYS.length + ' options)</summary>' +
|
||||
advancedRows +
|
||||
'</details>' +
|
||||
'<details class="cust-fonts" style="margin-top:12px"><summary style="font-size:12px;font-weight:600;cursor:pointer;color:var(--text-muted);margin:12px 0 8px">Fonts</summary>' +
|
||||
fontRows +
|
||||
'</details>' +
|
||||
'<button class="cust-reset-preview" id="custResetPreview">↩ Reset Preview</button>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
@@ -25,12 +25,6 @@
|
||||
.chooser-btn span:last-child { font-size: .8rem; color: var(--text-muted); }
|
||||
.home-level-toggle { margin-top: 16px; }
|
||||
|
||||
:root {
|
||||
--status-green: #22c55e;
|
||||
--status-yellow: #eab308;
|
||||
--status-red: #ef4444;
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.home-hero {
|
||||
text-align: center;
|
||||
|
||||
+1
-1
@@ -264,7 +264,7 @@
|
||||
// SNR quality label
|
||||
const snrVal = stats.avgSnr;
|
||||
const snrLabel = snrVal != null ? (snrVal > 10 ? 'Excellent' : snrVal > 0 ? 'Good' : snrVal > -5 ? 'Marginal' : 'Poor') : null;
|
||||
const snrColor = snrVal != null ? (snrVal > 10 ? '#22c55e' : snrVal > 0 ? '#3b82f6' : snrVal > -5 ? '#f59e0b' : '#ef4444') : '#6b7280';
|
||||
const snrColor = snrVal != null ? (snrVal > 10 ? 'var(--status-green)' : snrVal > 0 ? 'var(--accent)' : snrVal > -5 ? 'var(--status-yellow)' : 'var(--status-red)') : '#6b7280';
|
||||
|
||||
// Build sparkline from recent packets (packet timestamps → hourly buckets)
|
||||
const sparkHtml = buildSparkline(h.recentPackets || []);
|
||||
|
||||
+12
-12
@@ -22,9 +22,9 @@
|
||||
<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=1774235104">
|
||||
<link rel="stylesheet" href="home.css">
|
||||
<link rel="stylesheet" href="live.css?v=1774058575">
|
||||
<link rel="stylesheet" href="style.css?v=1774236560">
|
||||
<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"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||
crossorigin="anonymous">
|
||||
@@ -81,26 +81,26 @@
|
||||
<main id="app" role="main"></main>
|
||||
|
||||
<script src="vendor/qrcode.js"></script>
|
||||
<script src="roles.js?v=1774233807"></script>
|
||||
<script src="roles.js?v=1774236560"></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>
|
||||
<script src="app.js?v=1774234100"></script>
|
||||
<script src="home.js?v=1774233807"></script>
|
||||
<script src="packets.js?v=1774231586"></script>
|
||||
<script src="map.js?v=1774231586" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="home.js?v=1774236560"></script>
|
||||
<script src="packets.js?v=1774236560"></script>
|
||||
<script src="map.js?v=1774236560" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="channels.js?v=1774331200" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="nodes.js?v=1774221131" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="traces.js?v=1774135052" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="nodes.js?v=1774236560" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="traces.js?v=1774236560" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="audio.js?v=1774208460" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="audio-v1-constellation.js?v=1774207165" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="audio-lab.js?v=1774229396" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="live.js?v=1774231586" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="live.js?v=1774236560" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="observers.js?v=1774290000" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<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=1774236352" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="perf.js?v=1774236560" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
<script src="customize.js?v=1774236560" onerror="console.error('Failed to load:', this.src)"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+14
-14
@@ -80,11 +80,11 @@
|
||||
.live-stat-pill span {
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: #60a5fa;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.live-stat-pill.anim-pill span { color: #f59e0b; }
|
||||
.live-stat-pill.rate-pill span { color: #22c55e; }
|
||||
.live-stat-pill.anim-pill span { color: var(--status-yellow); }
|
||||
.live-stat-pill.rate-pill span { color: var(--status-green); }
|
||||
|
||||
.live-sound-btn {
|
||||
background: color-mix(in srgb, var(--text) 8%, transparent);
|
||||
@@ -375,7 +375,7 @@
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
background: rgba(59,130,246,0.15);
|
||||
color: #60a5fa;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
@@ -486,7 +486,7 @@
|
||||
|
||||
.vcr-live-btn {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #f87171;
|
||||
color: var(--status-red);
|
||||
font-weight: 700;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.05em;
|
||||
@@ -501,15 +501,15 @@
|
||||
border-radius: 4px;
|
||||
margin-left: auto;
|
||||
}
|
||||
.vcr-mode-live { color: #22c55e; }
|
||||
.vcr-mode-paused { color: #fbbf24; background: rgba(251,191,36,0.1); }
|
||||
.vcr-mode-replay { color: #60a5fa; background: rgba(96,165,250,0.1); }
|
||||
.vcr-mode-live { color: var(--status-green); }
|
||||
.vcr-mode-paused { color: var(--status-yellow); background: rgba(251,191,36,0.1); }
|
||||
.vcr-mode-replay { color: var(--accent); background: rgba(96,165,250,0.1); }
|
||||
|
||||
.vcr-live-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #22c55e;
|
||||
background: var(--status-green);
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
animation: vcr-pulse 1.5s ease-in-out infinite;
|
||||
@@ -551,7 +551,7 @@
|
||||
}
|
||||
.vcr-lcd-pkts {
|
||||
font-size: 0.6rem;
|
||||
color: #fbbf24;
|
||||
color: var(--status-yellow);
|
||||
text-shadow: 0 0 4px rgba(251, 191, 36, 0.5);
|
||||
font-weight: 700;
|
||||
min-height: 0.7rem;
|
||||
@@ -559,7 +559,7 @@
|
||||
.vcr-missed {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
color: #fbbf24;
|
||||
color: var(--status-yellow);
|
||||
background: rgba(251,191,36,0.15);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
@@ -587,7 +587,7 @@
|
||||
}
|
||||
.vcr-scope-btn.active {
|
||||
background: rgba(59,130,246,0.2);
|
||||
color: #60a5fa;
|
||||
color: var(--accent);
|
||||
border-color: rgba(59,130,246,0.3);
|
||||
}
|
||||
|
||||
@@ -613,7 +613,7 @@
|
||||
top: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: #f87171;
|
||||
background: var(--status-red);
|
||||
border-radius: 1px;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 0 4px rgba(248,113,113,0.5);
|
||||
@@ -631,7 +631,7 @@
|
||||
.vcr-prompt-btn {
|
||||
background: rgba(59,130,246,0.15);
|
||||
border: 1px solid rgba(59,130,246,0.25);
|
||||
color: #60a5fa;
|
||||
color: var(--accent);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 4px 12px;
|
||||
|
||||
+1
-1
@@ -1210,7 +1210,7 @@
|
||||
const isThis = h.pubkey === n.public_key || (h.prefix && n.public_key.toLowerCase().startsWith(h.prefix.toLowerCase()));
|
||||
const name = escapeHtml(h.name || h.prefix);
|
||||
if (isThis) return `<strong style="color:var(--accent)">${name}</strong>`;
|
||||
return h.pubkey ? `<a href="#/nodes/${h.pubkey}" style="color:var(--text-primary);text-decoration:none">${name}</a>` : name;
|
||||
return h.pubkey ? `<a href="#/nodes/${h.pubkey}" style="color:var(--text);text-decoration:none">${name}</a>` : name;
|
||||
}).join(' → ');
|
||||
return `<div style="padding:3px 0;font-size:11px;line-height:1.4">${chain} <span style="color:var(--text-muted)">(${p.count}×)</span></div>`;
|
||||
}).join('');
|
||||
|
||||
+4
-4
@@ -238,7 +238,7 @@
|
||||
const closeBtn = L.control({ position: 'topright' });
|
||||
closeBtn.onAdd = function () {
|
||||
const div = L.DomUtil.create('div', 'leaflet-bar');
|
||||
div.innerHTML = '<a href="#" title="Close route" style="font-size:18px;font-weight:bold;text-decoration:none;display:block;width:36px;height:36px;line-height:36px;text-align:center;background:var(--bg-secondary,#1e293b);color:var(--text-primary,#e2e8f0);border-radius:4px">✕</a>';
|
||||
div.innerHTML = '<a href="#" title="Close route" style="font-size:18px;font-weight:bold;text-decoration:none;display:block;width:36px;height:36px;line-height:36px;text-align:center;background:var(--input-bg,#1e293b);color:var(--text,#e2e8f0);border-radius:4px">✕</a>';
|
||||
L.DomEvent.on(div, 'click', function (e) {
|
||||
L.DomEvent.preventDefault(e);
|
||||
routeLayer.clearLayers();
|
||||
@@ -317,7 +317,7 @@
|
||||
positions.forEach((p, i) => {
|
||||
const isOrigin = i === 0 && p.isOrigin;
|
||||
const isLast = i === positions.length - 1 && positions.length > 1;
|
||||
const color = isOrigin ? '#06b6d4' : isLast ? '#ef4444' : i === 0 ? '#22c55e' : '#f59e0b';
|
||||
const color = isOrigin ? '#06b6d4' : isLast ? (getComputedStyle(document.documentElement).getPropertyValue('--status-red').trim() || '#ef4444') : i === 0 ? (getComputedStyle(document.documentElement).getPropertyValue('--status-green').trim() || '#22c55e') : '#f59e0b';
|
||||
const radius = isOrigin ? 14 : 10;
|
||||
const label = isOrigin ? 'Sender' : isLast ? 'Last Hop' : `Hop ${isOrigin ? i : i}`;
|
||||
|
||||
@@ -575,12 +575,12 @@
|
||||
|
||||
if (m.offset > 10) {
|
||||
const line = L.polyline([m.latLng, pos], {
|
||||
color: '#ef4444', weight: 2, dashArray: '6,4', opacity: 0.85
|
||||
color: getComputedStyle(document.documentElement).getPropertyValue('--status-red').trim() || '#ef4444', weight: 2, dashArray: '6,4', opacity: 0.85
|
||||
});
|
||||
markerLayer.addLayer(line);
|
||||
// Small dot at true GPS position
|
||||
const dot = L.circleMarker(m.latLng, {
|
||||
radius: 3, fillColor: '#ef4444', fillOpacity: 0.9, stroke: true, color: '#fff', weight: 1
|
||||
radius: 3, fillColor: getComputedStyle(document.documentElement).getPropertyValue('--status-red').trim() || '#ef4444', fillOpacity: 0.9, stroke: true, color: '#fff', weight: 1
|
||||
});
|
||||
markerLayer.addLayer(dot);
|
||||
}
|
||||
|
||||
+4
-4
@@ -327,10 +327,10 @@
|
||||
const el = document.getElementById('nodeCounts');
|
||||
if (!el) return;
|
||||
el.innerHTML = [
|
||||
{ k: 'repeaters', l: 'Repeaters', c: '#3b82f6' },
|
||||
{ k: 'rooms', l: 'Rooms', c: '#6b7280' },
|
||||
{ k: 'companions', l: 'Companions', c: '#22c55e' },
|
||||
{ k: 'sensors', l: 'Sensors', c: '#f59e0b' },
|
||||
{ k: 'repeaters', l: 'Repeaters', c: ROLE_COLORS.repeater },
|
||||
{ k: 'rooms', l: 'Rooms', c: ROLE_COLORS.room || '#6b7280' },
|
||||
{ k: 'companions', l: 'Companions', c: ROLE_COLORS.companion },
|
||||
{ k: 'sensors', l: 'Sensors', c: ROLE_COLORS.sensor },
|
||||
].map(r => `<span class="node-count-pill" style="background:${r.c}">${counts[r.k] || 0} ${r.l}</span>`).join('');
|
||||
}
|
||||
|
||||
|
||||
+2
-2
@@ -1184,7 +1184,7 @@
|
||||
const hopLabel = decoded.path_len != null ? `${decoded.path_len} hops` : '';
|
||||
const snrLabel = snr != null ? `SNR ${snr} dB` : '';
|
||||
const meta = [chLabel, hopLabel, snrLabel].filter(Boolean).join(' · ');
|
||||
messageHtml = `<div class="detail-message" style="padding:12px;margin:8px 0;background:var(--card-bg);border-radius:8px;border-left:3px solid var(--primary)">
|
||||
messageHtml = `<div class="detail-message" style="padding:12px;margin:8px 0;background:var(--card-bg);border-radius:8px;border-left:3px solid var(--accent)">
|
||||
<div style="font-size:1.1em">${escapeHtml(decoded.text)}</div>
|
||||
${meta ? `<div style="font-size:0.85em;color:var(--muted);margin-top:4px">${meta}</div>` : ''}
|
||||
</div>`;
|
||||
@@ -1724,7 +1724,7 @@
|
||||
if (newHops.length) await resolveHops(newHops);
|
||||
const container = document.createElement('div');
|
||||
container.style.cssText = 'max-width:800px;margin:0 auto;padding:20px';
|
||||
container.innerHTML = `<div style="margin-bottom:16px"><a href="#/packets" style="color:var(--primary);text-decoration:none">← Back to packets</a></div>`;
|
||||
container.innerHTML = `<div style="margin-bottom:16px"><a href="#/packets" style="color:var(--accent);text-decoration:none">← Back to packets</a></div>`;
|
||||
const detail = document.createElement('div');
|
||||
container.appendChild(detail);
|
||||
await renderDetail(detail, data);
|
||||
|
||||
+4
-4
@@ -34,8 +34,8 @@
|
||||
// System health (memory, event loop, WS)
|
||||
if (health) {
|
||||
const m = health.memory, el = health.eventLoop;
|
||||
const elColor = el.p95Ms > 500 ? '#ef4444' : el.p95Ms > 100 ? '#f59e0b' : '#22c55e';
|
||||
const memColor = m.heapUsed > m.heapTotal * 0.85 ? '#ef4444' : m.heapUsed > m.heapTotal * 0.7 ? '#f59e0b' : '#22c55e';
|
||||
const elColor = el.p95Ms > 500 ? 'var(--status-red)' : el.p95Ms > 100 ? 'var(--status-yellow)' : 'var(--status-green)';
|
||||
const memColor = m.heapUsed > m.heapTotal * 0.85 ? 'var(--status-red)' : m.heapUsed > m.heapTotal * 0.7 ? 'var(--status-yellow)' : 'var(--status-green)';
|
||||
html += `<h3>System Health</h3><div style="display:flex;gap:16px;flex-wrap:wrap;margin:8px 0;">
|
||||
<div class="perf-card"><div class="perf-num" style="color:${memColor}">${m.heapUsed}MB</div><div class="perf-label">Heap Used / ${m.heapTotal}MB</div></div>
|
||||
<div class="perf-card"><div class="perf-num">${m.rss}MB</div><div class="perf-label">RSS</div></div>
|
||||
@@ -54,7 +54,7 @@
|
||||
<div class="perf-card"><div class="perf-num">${c.size}</div><div class="perf-label">Server Entries</div></div>
|
||||
<div class="perf-card"><div class="perf-num">${c.hits}</div><div class="perf-label">Server Hits</div></div>
|
||||
<div class="perf-card"><div class="perf-num">${c.misses}</div><div class="perf-label">Server Misses</div></div>
|
||||
<div class="perf-card"><div class="perf-num" style="color:${c.hitRate > 50 ? '#22c55e' : c.hitRate > 20 ? '#f59e0b' : '#ef4444'}">${c.hitRate}%</div><div class="perf-label">Server Hit Rate</div></div>
|
||||
<div class="perf-card"><div class="perf-num" style="color:${c.hitRate > 50 ? 'var(--status-green)' : c.hitRate > 20 ? 'var(--status-yellow)' : 'var(--status-red)'}">${c.hitRate}%</div><div class="perf-label">Server Hit Rate</div></div>
|
||||
<div class="perf-card"><div class="perf-num">${c.staleHits || 0}</div><div class="perf-label">Stale Hits (SWR)</div></div>
|
||||
<div class="perf-card"><div class="perf-num">${c.recomputes || 0}</div><div class="perf-label">Recomputes</div></div>
|
||||
<div class="perf-card"><div class="perf-num">${clientCache}</div><div class="perf-label">Client Entries</div></div>
|
||||
@@ -63,7 +63,7 @@
|
||||
html += `<div style="display:flex;gap:16px;flex-wrap:wrap;margin:8px 0;">
|
||||
<div class="perf-card"><div class="perf-num">${client.cacheHits || 0}</div><div class="perf-label">Client Hits</div></div>
|
||||
<div class="perf-card"><div class="perf-num">${client.cacheMisses || 0}</div><div class="perf-label">Client Misses</div></div>
|
||||
<div class="perf-card"><div class="perf-num" style="color:${(client.cacheHitRate||0) > 50 ? '#22c55e' : '#f59e0b'}">${client.cacheHitRate || 0}%</div><div class="perf-label">Client Hit Rate</div></div>
|
||||
<div class="perf-card"><div class="perf-num" style="color:${(client.cacheHitRate||0) > 50 ? 'var(--status-green)' : 'var(--status-yellow)'}">${client.cacheHitRate || 0}%</div><div class="perf-label">Client Hit Rate</div></div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
+28
-19
@@ -4,6 +4,9 @@
|
||||
--nav-bg: #0f0f23;
|
||||
--nav-bg2: #1a1a2e;
|
||||
--accent: #4a9eff;
|
||||
--status-green: #22c55e;
|
||||
--status-yellow: #eab308;
|
||||
--status-red: #ef4444;
|
||||
--accent-hover: #6db3ff;
|
||||
--text: #1a1a2e;
|
||||
--text-muted: #5b6370;
|
||||
@@ -30,6 +33,9 @@
|
||||
When changing dark theme variables, update BOTH blocks below. */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--status-green: #22c55e;
|
||||
--status-yellow: #eab308;
|
||||
--status-red: #ef4444;
|
||||
--surface-0: #0f0f23;
|
||||
--surface-1: #1a1a2e;
|
||||
--surface-2: #232340;
|
||||
@@ -50,6 +56,9 @@
|
||||
}
|
||||
/* ⚠️ DARK THEME VARIABLES — KEEP IN SYNC with @media block above */
|
||||
[data-theme="dark"] {
|
||||
--status-green: #22c55e;
|
||||
--status-yellow: #eab308;
|
||||
--status-red: #ef4444;
|
||||
--surface-0: #0f0f23;
|
||||
--surface-1: #1a1a2e;
|
||||
--surface-2: #232340;
|
||||
@@ -666,9 +675,9 @@ button.ch-item.selected { background: var(--selected-bg); }
|
||||
}
|
||||
.tl-delta { font-size: 11px; color: var(--text-muted); text-align: right; }
|
||||
.tl-snr { font-size: 12px; font-weight: 600; text-align: right; }
|
||||
.tl-snr.good { color: #16a34a; }
|
||||
.tl-snr.ok { color: #ca8a04; }
|
||||
.tl-snr.bad { color: #dc2626; }
|
||||
.tl-snr.good { color: var(--status-green); }
|
||||
.tl-snr.ok { color: var(--status-yellow); }
|
||||
.tl-snr.bad { color: var(--status-red); }
|
||||
.tl-rssi { font-size: 12px; color: var(--text-muted); text-align: right; }
|
||||
|
||||
/* === Scrollbar === */
|
||||
@@ -682,15 +691,15 @@ button.ch-item.selected { background: var(--selected-bg); }
|
||||
.obs-summary { display: flex; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
|
||||
.obs-stat { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-muted); }
|
||||
.health-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
|
||||
.health-dot.health-green { background: #22c55e; box-shadow: 0 0 6px #22c55e80; }
|
||||
.health-dot.health-yellow { background: #eab308; box-shadow: 0 0 6px #eab30880; }
|
||||
.health-dot.health-red { background: #ef4444; box-shadow: 0 0 6px #ef444480; }
|
||||
.health-dot.health-green { background: var(--status-green); box-shadow: 0 0 6px #22c55e80; }
|
||||
.health-dot.health-yellow { background: var(--status-yellow); box-shadow: 0 0 6px #eab30880; }
|
||||
.health-dot.health-red { background: var(--status-red); box-shadow: 0 0 6px #ef444480; }
|
||||
.obs-table td:first-child { white-space: nowrap; }
|
||||
.obs-table td:nth-child(6) { max-width: none; overflow: visible; }
|
||||
.col-observer { min-width: 70px; max-width: none; }
|
||||
.spark-bar { position: relative; min-width: 60px; max-width: 100px; flex: 1; height: 18px; background: var(--border); border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; }
|
||||
@media (max-width: 640px) { .spark-bar { max-width: 60px; } }
|
||||
.spark-fill { height: 100%; background: linear-gradient(90deg, #3b82f6, #60a5fa); border-radius: 4px; transition: width 0.3s; }
|
||||
.spark-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hover, #60a5fa)); border-radius: 4px; transition: width 0.3s; }
|
||||
.spark-label { position: absolute; right: 4px; top: 0; line-height: 18px; font-size: 11px; color: var(--text); font-weight: 500; }
|
||||
|
||||
/* === Dark mode input overrides === */
|
||||
@@ -900,7 +909,7 @@ button.ch-item.selected { background: var(--selected-bg); }
|
||||
transition: color .15s, transform .15s;
|
||||
}
|
||||
.fav-star:hover { transform: scale(1.2); }
|
||||
.fav-star.on { color: #f5a623; }
|
||||
.fav-star.on { color: var(--status-yellow); }
|
||||
|
||||
/* BYOP Decode Modal */
|
||||
.byop-modal { max-width: 560px; }
|
||||
@@ -914,7 +923,7 @@ button.ch-item.selected { background: var(--selected-bg); }
|
||||
color: var(--text);
|
||||
}
|
||||
.byop-input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
|
||||
.byop-err { color: #ef4444; font-size: .85rem; }
|
||||
.byop-err { color: var(--status-red); font-size: .85rem; }
|
||||
.byop-decoded { margin-top: 8px; }
|
||||
.byop-section { margin-bottom: 14px; }
|
||||
.byop-section-title {
|
||||
@@ -1048,9 +1057,9 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
|
||||
.hash-cell.hash-active:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||||
.hash-cell.hash-selected { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: 0 0 6px var(--accent); }
|
||||
.hash-bar-value { min-width: 120px; text-align: right; font-size: 13px; font-weight: 600; }
|
||||
.badge-hash-1 { background: #ef444420; color: #ef4444; }
|
||||
.badge-hash-2 { background: #22c55e20; color: #22c55e; }
|
||||
.badge-hash-3 { background: #3b82f620; color: #3b82f6; }
|
||||
.badge-hash-1 { background: #ef444420; color: var(--status-red); }
|
||||
.badge-hash-2 { background: #22c55e20; color: var(--status-green); }
|
||||
.badge-hash-3 { background: #3b82f620; color: var(--accent); }
|
||||
.timeline-legend { display: flex; gap: 16px; justify-content: center; margin-top: 8px; font-size: 12px; }
|
||||
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
|
||||
.timeline-chart svg { display: block; }
|
||||
@@ -1157,12 +1166,12 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
|
||||
|
||||
/* Clickable hop links */
|
||||
.hop-link {
|
||||
color: var(--primary, #3b82f6);
|
||||
color: var(--accent, #3b82f6);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.hop-link:hover { color: var(--accent, #60a5fa); text-decoration: underline; }
|
||||
.hop-link:hover { color: var(--accent-hover, #60a5fa); text-decoration: underline; }
|
||||
|
||||
/* Detail map link */
|
||||
.detail-map-link {
|
||||
@@ -1183,7 +1192,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
|
||||
padding: 5px 12px;
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
border: 1px solid rgba(59, 130, 246, 0.25);
|
||||
color: var(--primary, #3b82f6);
|
||||
color: var(--accent, #3b82f6);
|
||||
border-radius: 6px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
@@ -1359,7 +1368,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border, #333);
|
||||
background: var(--bg-card, #1e1e1e);
|
||||
background: var(--card-bg, #1e1e1e);
|
||||
color: var(--text, #fff);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
@@ -1604,7 +1613,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--text-secondary, #6b7280);
|
||||
color: var(--text-muted, #6b7280);
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1625,8 +1634,8 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
|
||||
|
||||
/* Audio voice selector */
|
||||
.audio-voice-select {
|
||||
background: var(--bg-secondary, #1f2937);
|
||||
color: var(--text-primary, #e5e7eb);
|
||||
background: var(--input-bg, #1f2937);
|
||||
color: var(--text, #e5e7eb);
|
||||
border: 1px solid var(--border, #374151);
|
||||
border-radius: 4px;
|
||||
padding: 2px 4px;
|
||||
|
||||
+2
-2
@@ -239,8 +239,8 @@
|
||||
for (const [node, pos] of nodePos) {
|
||||
const isEndpoint = node === 'Origin' || node === 'Dest';
|
||||
const r = isEndpoint ? 18 : 14;
|
||||
const fill = isEndpoint ? 'var(--primary, #3b82f6)' : 'var(--surface-2, #374151)';
|
||||
const stroke = isEndpoint ? 'var(--primary, #3b82f6)' : 'var(--border, #4b5563)';
|
||||
const fill = isEndpoint ? 'var(--accent, #3b82f6)' : 'var(--surface-2, #374151)';
|
||||
const stroke = isEndpoint ? 'var(--accent, #3b82f6)' : 'var(--border, #4b5563)';
|
||||
const label = isEndpoint ? node : node;
|
||||
nodesSvg += `<circle cx="${pos.x}" cy="${pos.y}" r="${r}" fill="${fill}" stroke="${stroke}" stroke-width="2"/>`;
|
||||
nodesSvg += `<text x="${pos.x}" y="${pos.y + 4}" text-anchor="middle" fill="white" font-size="${isEndpoint ? 10 : 9}" font-weight="${isEndpoint ? 700 : 500}">${escapeHtml(label)}</text>`;
|
||||
|
||||
Reference in New Issue
Block a user