Skip to content

Commit 0b6eed6

Browse files
appleboyclaude
andcommitted
fix(css): improve admin navbar contrast in dark mode
- Override hardcoded amber colors in admin dropdown for dark backgrounds - Brighten ADMIN badge chip, dropdown items, and trigger button - Fix navbar link hover and active border visibility - Adjust logout button hover to use lighter red tones Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 71a90df commit 0b6eed6

1 file changed

Lines changed: 63 additions & 0 deletions

File tree

internal/templates/static/css/components/dark-mode.css

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,69 @@
2525
background: rgba(13, 17, 23, 0.95);
2626
}
2727

28+
/* Navbar link hover border — hardcoded rgba */
29+
[data-theme="dark"] .navbar-link:hover {
30+
border-color: rgba(88, 166, 255, 0.25);
31+
}
32+
33+
[data-theme="dark"] .navbar-link.active {
34+
border-color: rgba(88, 166, 255, 0.35);
35+
box-shadow: 0 2px 8px -2px rgba(88, 166, 255, 0.2);
36+
}
37+
38+
/* Admin dropdown — amber tones need bright variants on dark */
39+
[data-theme="dark"] .navbar-dropdown-trigger--admin {
40+
color: #FBBF24;
41+
background: rgba(251, 191, 36, 0.1);
42+
border-color: rgba(251, 191, 36, 0.2);
43+
}
44+
45+
[data-theme="dark"] .navbar-dropdown-trigger--admin:hover,
46+
[data-theme="dark"] .navbar-dropdown-trigger--admin.active {
47+
color: #FCD34D;
48+
background: rgba(251, 191, 36, 0.15);
49+
border-color: rgba(251, 191, 36, 0.35);
50+
}
51+
52+
/* ADMIN badge chip */
53+
[data-theme="dark"] .navbar-admin-badge {
54+
color: #FCD34D;
55+
background: rgba(251, 191, 36, 0.15);
56+
border-color: rgba(251, 191, 36, 0.3);
57+
}
58+
59+
/* Admin dropdown panel border */
60+
[data-theme="dark"] .navbar-dropdown-menu--admin {
61+
border-top-color: #FBBF24;
62+
}
63+
64+
/* Admin dropdown items */
65+
[data-theme="dark"] .navbar-dropdown-item.admin:hover,
66+
[data-theme="dark"] .navbar-dropdown-item.admin.active {
67+
color: #FCD34D;
68+
background: rgba(251, 191, 36, 0.12);
69+
}
70+
71+
/* Admin hover trigger (desktop) */
72+
@media (hover: hover) {
73+
[data-theme="dark"] .navbar-dropdown--admin:hover .navbar-dropdown-trigger--admin {
74+
color: #FCD34D;
75+
background: rgba(251, 191, 36, 0.15);
76+
border-color: rgba(251, 191, 36, 0.35);
77+
}
78+
}
79+
80+
/* Logout button */
81+
[data-theme="dark"] .navbar-logout {
82+
border-color: var(--color-border);
83+
}
84+
85+
[data-theme="dark"] .navbar-logout:hover {
86+
color: #f87171;
87+
border-color: rgba(248, 113, 113, 0.4);
88+
background: rgba(248, 113, 113, 0.1);
89+
}
90+
2891
/* OAuth buttons — ensure contrast on dark cards */
2992
[data-theme="dark"] .btn-oauth.btn-github {
3093
background-color: #30363d;

0 commit comments

Comments
 (0)