nate/weather
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use semi-transparent accent fill on nav button hover

Browse Source 
color-mix(accent 18%, transparent) keeps text readable and gives a
ghost-button tint instead of a full solid fill.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Nate EmmertandClaude Sonnet 4.6 committed 2026-08-24 15:49:03 -04:00
1 parent e4a5a9c4bb
commit 3c927b3e27
3 files changed
+8 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/public/conditions.html
+4 -4
View File
@@ -87,9 +87,9 @@ html, body {
transition: background .15s, border-color .15s, color .15s; transition: background .15s, border-color .15s, color .15s;
} }
.hdr-back:hover { .hdr-back:hover {
background: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent);
border-color: var(--accent); border-color: var(--accent);
color: #fff; color: var(--accent);
} }
.hdr-sep { .hdr-sep {
color: var(--border); color: var(--border);
@@ -152,9 +152,9 @@ html, body {
transition: background .15s, border-color .15s, color .15s; transition: background .15s, border-color .15s, color .15s;
} }
.hdr-dash-link:hover { .hdr-dash-link:hover {
background: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent);
border-color: var(--accent); border-color: var(--accent);
color: #fff; color: var(--accent);
} }
/* ── Hero ────────────────────────────────────────────────── */ /* ── Hero ────────────────────────────────────────────────── */
app/public/dashboard.html
+2 -2
View File
@@ -41,9 +41,9 @@ a { color: var(--cool); text-decoration: none; }
transition: background .15s, border-color .15s, color .15s; transition: background .15s, border-color .15s, color .15s;
} }
.logout:hover { .logout:hover {
background: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent);
border-color: var(--accent); border-color: var(--accent);
color: #fff; color: var(--accent);
} }
/* ── Wrapper ── */ /* ── Wrapper ── */
app/public/style.css
+2 -2
View File
@@ -128,9 +128,9 @@ a:hover { text-decoration: underline; }
transition: background .15s, border-color .15s, color .15s; transition: background .15s, border-color .15s, color .15s;
} }
.station-link:hover { .station-link:hover {
background: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent);
border-color: var(--accent); border-color: var(--accent);
color: #fff; color: var(--accent);
} }
.settings-nav-links { .settings-nav-links {