fix: version-badge link contrast in nav stats bar

Style .version-badge anchor elements to use --nav-text-muted color
instead of browser-default blue. Adds hover state using --nav-text.
Works with both light and dark themes via existing CSS variables.

fixes #139

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Kpa-clawbot
2026-03-27 10:14:50 -07:00
parent 7807063967
commit 9ca7777851
3 changed files with 49 additions and 27 deletions

View File

@@ -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=1774630476">
<link rel="stylesheet" href="home.css?v=1774630476">
<link rel="stylesheet" href="live.css?v=1774630476">
<link rel="stylesheet" href="style.css?v=1774631638">
<link rel="stylesheet" href="home.css?v=1774631638">
<link rel="stylesheet" href="live.css?v=1774631638">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin="anonymous">
@@ -81,29 +81,29 @@
<main id="app" role="main"></main>
<script src="vendor/qrcode.js"></script>
<script src="roles.js?v=1774630476"></script>
<script src="customize.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="region-filter.js?v=1774630476"></script>
<script src="hop-resolver.js?v=1774630476"></script>
<script src="hop-display.js?v=1774630476"></script>
<script src="app.js?v=1774630476"></script>
<script src="home.js?v=1774630476"></script>
<script src="packet-filter.js?v=1774630476"></script>
<script src="packets.js?v=1774630476"></script>
<script src="map.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="channels.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="nodes.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="traces.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="analytics.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio-v1-constellation.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio-v2-constellation.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio-lab.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="live.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="observers.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="observer-detail.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="compare.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="node-analytics.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="perf.js?v=1774630476" onerror="console.error('Failed to load:', this.src)"></script>
<script src="roles.js?v=1774631638"></script>
<script src="customize.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="region-filter.js?v=1774631638"></script>
<script src="hop-resolver.js?v=1774631638"></script>
<script src="hop-display.js?v=1774631638"></script>
<script src="app.js?v=1774631638"></script>
<script src="home.js?v=1774631638"></script>
<script src="packet-filter.js?v=1774631638"></script>
<script src="packets.js?v=1774631638"></script>
<script src="map.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="channels.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="nodes.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="traces.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="analytics.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio-v1-constellation.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio-v2-constellation.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio-lab.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="live.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="observers.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="observer-detail.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="compare.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="node-analytics.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
<script src="perf.js?v=1774631638" onerror="console.error('Failed to load:', this.src)"></script>
</body>
</html>

View File

@@ -171,6 +171,12 @@ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible
padding: 1px 5px; border-radius: var(--badge-radius);
letter-spacing: 0.5px;
}
.nav-stats .version-badge a {
color: var(--nav-text-muted); text-decoration: none;
}
.nav-stats .version-badge a:hover {
color: var(--nav-text); text-decoration: underline;
}
/* === Layout === */
#app { height: calc(100vh - 52px); height: calc(100dvh - 52px); overflow: hidden; }

View File

@@ -1271,6 +1271,22 @@ console.log('\n=== app.js: formatVersionBadge ===');
});
}
// ===== CSS: version-badge link contrast (issue #139) =====
console.log('\n=== style.css: version-badge link contrast ===');
{
const cssContent = fs.readFileSync(__dirname + '/public/style.css', 'utf8');
test('version-badge a has explicit color', () => {
assert.ok(cssContent.includes('.version-badge a'), 'should have .version-badge a rule');
assert.ok(/\.version-badge a\s*\{[^}]*color:\s*var\(--nav-text-muted\)/.test(cssContent),
'link color should use var(--nav-text-muted)');
});
test('version-badge a has hover state', () => {
assert.ok(cssContent.includes('.version-badge a:hover'), 'should have .version-badge a:hover rule');
assert.ok(/\.version-badge a:hover\s*\{[^}]*color:\s*var\(--nav-text\)/.test(cssContent),
'hover color should use var(--nav-text)');
});
}
// ===== SUMMARY =====
console.log(`\n${'═'.repeat(40)}`);
console.log(` Frontend helpers: ${passed} passed, ${failed} failed`);