mirror of
https://github.com/smittix/intercept.git
synced 2026-04-26 07:40:01 -07:00
style: nav active state → left-border cyan glow, hover → glow bg
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user