style: nav active state → left-border cyan glow, hover → glow bg

This commit is contained in:
James Smith
2026-04-13 18:18:38 +01:00
parent bfff092657
commit 4a3a7127ca

View File

@@ -741,16 +741,18 @@
} }
.mode-nav-btn:hover { .mode-nav-btn:hover {
background: var(--bg-elevated); background: var(--accent-cyan-glow);
color: var(--text-primary); color: var(--text-primary);
border-color: var(--border-color); border-color: var(--border-color);
} }
.mode-nav-btn.active { .mode-nav-btn.active {
background: var(--bg-elevated); background: var(--accent-cyan-glow);
color: var(--text-primary); color: var(--text-primary);
border-color: var(--accent-cyan); border-color: transparent;
box-shadow: inset 0 -2px 0 var(--accent-cyan); border-left: 2px solid var(--accent-cyan);
box-shadow: -2px 0 8px rgba(74, 163, 255, 0.2);
padding-left: 12px; /* compensate for 2px border */
} }
.mode-nav-btn.active .nav-icon { .mode-nav-btn.active .nav-icon {
@@ -838,7 +840,7 @@
} }
.mode-nav-dropdown-btn:hover { .mode-nav-dropdown-btn:hover {
background: var(--bg-elevated); background: var(--accent-cyan-glow);
color: var(--text-primary); color: var(--text-primary);
border-color: var(--border-color); border-color: var(--border-color);
} }
@@ -854,10 +856,11 @@
} }
.mode-nav-dropdown.has-active .mode-nav-dropdown-btn { .mode-nav-dropdown.has-active .mode-nav-dropdown-btn {
background: var(--bg-elevated); background: var(--accent-cyan-glow);
color: var(--text-primary); color: var(--text-primary);
border-color: var(--accent-cyan); border-color: transparent;
box-shadow: inset 0 -2px 0 var(--accent-cyan); border-left: 2px solid var(--accent-cyan);
box-shadow: -2px 0 8px rgba(74, 163, 255, 0.2);
} }
.mode-nav-dropdown.has-active .mode-nav-dropdown-btn .nav-icon { .mode-nav-dropdown.has-active .mode-nav-dropdown-btn .nav-icon {
@@ -901,9 +904,11 @@
} }
.mode-nav-dropdown-menu .mode-nav-btn.active { .mode-nav-dropdown-menu .mode-nav-btn.active {
background: var(--bg-elevated); background: var(--accent-cyan-glow);
color: var(--text-primary); color: var(--text-primary);
box-shadow: inset 0 -2px 0 var(--accent-cyan); border-left: 2px solid var(--accent-cyan);
box-shadow: -2px 0 6px rgba(74, 163, 255, 0.15);
padding-left: 10px;
} }
/* Focus-visible states for nav elements */ /* Focus-visible states for nav elements */
@@ -1103,15 +1108,18 @@ a.nav-dashboard-btn:hover {
} }
[data-theme="light"] .mode-nav-btn.active { [data-theme="light"] .mode-nav-btn.active {
background: rgba(220, 230, 244, 0.9); background: rgba(31, 95, 168, 0.08);
color: var(--text-primary); border-left: 2px solid var(--accent-cyan);
box-shadow: -2px 0 6px rgba(31, 95, 168, 0.15);
padding-left: 12px;
} }
[data-theme="light"] .mode-nav-dropdown-btn:hover, [data-theme="light"] .mode-nav-dropdown-btn:hover,
[data-theme="light"] .mode-nav-dropdown.open .mode-nav-dropdown-btn, [data-theme="light"] .mode-nav-dropdown.open .mode-nav-dropdown-btn,
[data-theme="light"] .mode-nav-dropdown.has-active .mode-nav-dropdown-btn { [data-theme="light"] .mode-nav-dropdown.has-active .mode-nav-dropdown-btn {
background: rgba(220, 230, 244, 0.9); background: rgba(31, 95, 168, 0.06);
color: var(--text-primary); border-left: 2px solid var(--accent-cyan);
box-shadow: -2px 0 6px rgba(31, 95, 168, 0.12);
} }
[data-theme="light"] .mode-nav-dropdown-menu { [data-theme="light"] .mode-nav-dropdown-menu {
@@ -1124,8 +1132,9 @@ a.nav-dashboard-btn:hover {
} }
[data-theme="light"] .mode-nav-dropdown-menu .mode-nav-btn.active { [data-theme="light"] .mode-nav-dropdown-menu .mode-nav-btn.active {
background: rgba(220, 230, 244, 0.95); background: rgba(31, 95, 168, 0.08);
color: var(--text-primary); border-left: 2px solid var(--accent-cyan);
padding-left: 10px;
} }
[data-theme="light"] .nav-tool-btn { [data-theme="light"] .nav-tool-btn {