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`);