From 9ca77778511193b8e8b3ca27d6b2cddc6a7cf463 Mon Sep 17 00:00:00 2001 From: Kpa-clawbot <259247574+Kpa-clawbot@users.noreply.github.com> Date: Fri, 27 Mar 2026 10:14:50 -0700 Subject: [PATCH] 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> --- public/index.html | 54 ++++++++++++++++++++-------------------- public/style.css | 6 +++++ test-frontend-helpers.js | 16 ++++++++++++ 3 files changed, 49 insertions(+), 27 deletions(-) diff --git a/public/index.html b/public/index.html index 15f20a9..d885663 100644 --- a/public/index.html +++ b/public/index.html @@ -22,9 +22,9 @@ - - - + + + @@ -81,29 +81,29 @@
- - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/style.css b/public/style.css index cb7cf9a..d05bf15 100644 --- a/public/style.css +++ b/public/style.css @@ -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; } diff --git a/test-frontend-helpers.js b/test-frontend-helpers.js index 02ec51e..7a6e5d4 100644 --- a/test-frontend-helpers.js +++ b/test-frontend-helpers.js @@ -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`);