fix: dark-mode contrast on blue pills, brand logo, stable channel chip
All checks were successful
Deploy content to live site / deploy (push) Successful in 3s
All checks were successful
Deploy content to live site / deploy (push) Successful in 3s
- index.html: stable channel chip referenced --color-primary, which is undefined; falling back to the browser-default visited-link color rendered it purple. Switch to the actually-defined --color-accent. - css/style.css: lift dark-mode pill backgrounds (--color-accent-soft, --color-Tracking, --color-Title) so pills have a visible edge against the near-black page bg (~1.5:1 → ~2.2:1 adjacency contrast). Accent text on the lighter pills stays at 3.6:1, fine for short labels. - css/style.css: brand-logo's navy <rect> blends into the page bg in dark mode; override its fill to a lighter steel-blue so the rounded square stays visible. Light mode is untouched. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
c275afc4a3
commit
a0815ced5d
2 changed files with 21 additions and 11 deletions
|
|
@ -1017,13 +1017,13 @@ tr:nth-child(even) td {
|
|||
|
||||
--color-accent: #58a6ff;
|
||||
--color-accent-hover: #3d84c2;
|
||||
--color-accent-soft: #1a3550;
|
||||
--color-accent-soft: #1f4d7a;
|
||||
--color-accent-dark: #79c0ff;
|
||||
|
||||
--color-Tracking: #1e3a5f;
|
||||
--color-Tracking: #264e7d;
|
||||
--color-Revision: #134a29;
|
||||
--color-Status: #5c4a00;
|
||||
--color-Title: #2d3440;
|
||||
--color-Title: #3a4659;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1039,13 +1039,23 @@ html[data-theme="dark"] {
|
|||
|
||||
--color-accent: #58a6ff;
|
||||
--color-accent-hover: #3d84c2;
|
||||
--color-accent-soft: #1a3550;
|
||||
--color-accent-soft: #1f4d7a;
|
||||
--color-accent-dark: #79c0ff;
|
||||
|
||||
--color-Tracking: #1e3a5f;
|
||||
--color-Tracking: #264e7d;
|
||||
--color-Revision: #134a29;
|
||||
--color-Status: #5c4a00;
|
||||
--color-Title: #2d3440;
|
||||
--color-Title: #3a4659;
|
||||
}
|
||||
|
||||
/* Brand logo's navy bg-rect blends into the dark page bg; lift it. */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]):not([data-theme="dark"]) .brand-logo > rect {
|
||||
fill: #2a5a8a;
|
||||
}
|
||||
}
|
||||
html[data-theme="dark"] .brand-logo > rect {
|
||||
fill: #2a5a8a;
|
||||
}
|
||||
|
||||
/* ── Pain badge dark mode ── */
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
.channel-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.9rem; }
|
||||
.channel-row a { display: inline-block; padding: 0.25rem 0.625rem; border-radius: 999px; text-decoration: none; border: 1px solid var(--color-border); color: var(--color-text); }
|
||||
.channel-row a:hover { background: var(--color-bg-subtle); }
|
||||
.channel-row .channel-stable { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
|
||||
.channel-row .channel-stable { border-color: var(--color-accent); color: var(--color-accent); font-weight: 600; }
|
||||
.channel-row .channel-beta, .channel-row .channel-alpha { color: var(--color-text-muted); }
|
||||
.install-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); margin-top: var(--spacing-md); }
|
||||
.install-card { padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-subtle); }
|
||||
|
|
|
|||
Loading…
Reference in a new issue