Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-24 06:40:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix: apply light theme to sidebar, nav, and visual refresh components (#168)

Browse Source 
The visual refresh layer hardcoded dark rgba() gradients that overrode
variable-based backgrounds. Added [data-theme="light"] overrides for
visual refresh CSS variables and comprehensive component backgrounds
in index.css and global-nav.css.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-03-02 14:28:11 +00:00
parent d78ab5cc2c
commit bd67195238
2 changed files with 164 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
static/css/global-nav.css
View File

@@ -382,6 +382,71 @@
transform: rotate(90deg);
}
/* ---- Light theme overrides ---- */
[data-theme="light"] .mode-nav {
background: linear-gradient(180deg, rgba(240, 244, 250, 0.97) 0%, rgba(232, 238, 247, 0.95) 100%);
}
[data-theme="light"] .mode-nav-btn:hover {
background: rgba(220, 230, 244, 0.8);
}
[data-theme="light"] .mode-nav-btn.active {
background: rgba(220, 230, 244, 0.9);
}
[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.has-active .mode-nav-dropdown-btn {
background: rgba(220, 230, 244, 0.9);
}
[data-theme="light"] .mode-nav-dropdown-menu {
background: rgba(248, 250, 253, 0.99);
box-shadow: 0 16px 36px rgba(18, 40, 66, 0.15);
}
[data-theme="light"] .mode-nav-dropdown-menu .mode-nav-btn:hover {
background: rgba(220, 230, 244, 0.85);
}
[data-theme="light"] .mode-nav-dropdown-menu .mode-nav-btn.active {
background: rgba(220, 230, 244, 0.95);
}
[data-theme="light"] .nav-tool-btn {
background: rgba(235, 241, 250, 0.7);
border-color: rgba(31, 95, 168, 0.12);
}
[data-theme="light"] .nav-tool-btn:hover {
background: rgba(220, 230, 244, 0.9);
box-shadow: 0 4px 10px rgba(18, 40, 66, 0.1);
}
[data-theme="light"] .nav-action-btn {
background: rgba(235, 241, 250, 0.85);
border-color: rgba(31, 95, 168, 0.14);
}
[data-theme="light"] .nav-action-btn:hover {
background: rgba(220, 230, 244, 0.95);
box-shadow: 0 6px 14px rgba(18, 40, 66, 0.1);
}
[data-theme="light"] a.nav-dashboard-btn,
[data-theme="light"] a.nav-dashboard-btn:link,
[data-theme="light"] a.nav-dashboard-btn:visited {
background: rgba(235, 241, 250, 0.7) !important;
border-color: rgba(31, 95, 168, 0.12) !important;
color: var(--text-secondary) !important;
}
[data-theme="light"] a.nav-dashboard-btn:hover {
background: rgba(220, 230, 244, 0.9) !important;
box-shadow: 0 4px 10px rgba(18, 40, 66, 0.1);
}
/* Effects/animations toggle icon states */
.nav-tool-btn .icon-effects-off {
display: none;

112
static/css/index.css
View File

@@ -7237,6 +7237,15 @@ body[data-mode="tscm"] {
--mode-ambient-bottom: rgba(181, 134, 58, 0.04);
}
[data-theme="light"] {
--visual-surface-soft: linear-gradient(180deg, rgba(245, 248, 252, 0.95) 0%, rgba(235, 240, 248, 0.97) 100%);
--visual-surface-panel: linear-gradient(160deg, rgba(248, 250, 253, 0.96) 0%, rgba(240, 244, 250, 0.97) 100%);
--visual-edge-cyan: rgba(31, 95, 168, 0.22);
--visual-edge-green: rgba(31, 138, 87, 0.18);
--visual-glow-soft: 0 10px 24px rgba(18, 40, 66, 0.08);
--visual-glow-cyan: 0 0 16px rgba(31, 95, 168, 0.1);
}
.mode-nav {
background: linear-gradient(180deg, rgba(22, 33, 48, 0.96) 0%, rgba(14, 22, 33, 0.98) 100%);
border-bottom-color: rgba(74, 163, 255, 0.24);
@@ -7399,24 +7408,101 @@ body[data-mode="tscm"] {
}
}
[data-theme="light"] .run-state-strip,
[data-theme="light"] .main-content,
[data-theme="light"] .section,
[data-theme="light"] #mainNav.mode-nav,
[data-theme="light"] .output-header,
[data-theme="light"] .status-bar,
[data-theme="light"] .status-indicator,
[data-theme="light"] .control-group {
box-shadow: 0 10px 24px rgba(18, 40, 66, 0.08);
[data-theme="light"] .mode-nav {
background: linear-gradient(180deg, rgba(240, 244, 250, 0.97) 0%, rgba(232, 238, 247, 0.98) 100%);
border-bottom-color: rgba(31, 95, 168, 0.18);
}
[data-theme="light"] #mainNav.mode-nav {
background: linear-gradient(180deg, rgba(245, 248, 253, 0.98) 0%, rgba(238, 243, 250, 0.99) 100%);
border-color: rgba(31, 95, 168, 0.16);
box-shadow: 0 10px 24px rgba(18, 40, 66, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .run-state-strip {
background: linear-gradient(180deg, rgba(245, 248, 253, 0.97) 0%, rgba(238, 243, 250, 0.98) 100%);
border-color: rgba(31, 95, 168, 0.18);
box-shadow: 0 10px 24px rgba(18, 40, 66, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .main-content {
border-color: rgba(31, 95, 168, 0.16);
box-shadow: 0 10px 24px rgba(18, 40, 66, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
[data-theme="light"] .sidebar {
border-right-color: rgba(31, 95, 168, 0.16);
}
[data-theme="light"] .section {
border-color: rgba(31, 95, 168, 0.18);
box-shadow: 0 2px 8px rgba(18, 40, 66, 0.06);
}
[data-theme="light"] .section:hover {
border-color: rgba(31, 95, 168, 0.3);
box-shadow: 0 4px 14px rgba(18, 40, 66, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .section h3 {
background: linear-gradient(180deg, rgba(235, 241, 250, 0.92) 0%, rgba(228, 236, 248, 0.94) 100%);
border-bottom-color: rgba(31, 95, 168, 0.14);
}
[data-theme="light"] .section h3::after {
background: rgba(245, 248, 253, 0.95);
border-color: rgba(31, 95, 168, 0.18);
}
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(31, 95, 168, 0.18);
}
[data-theme="light"] .section,
[data-theme="light"] .stats > div,
[data-theme="light"] .message,
[data-theme="light"] .preset-btn,
[data-theme="light"] .control-btn,
[data-theme="light"] .clear-btn {
border-color: rgba(31, 95, 168, 0.26);
border-color: rgba(31, 95, 168, 0.22);
background: linear-gradient(180deg, rgba(245, 248, 253, 0.92) 0%, rgba(238, 243, 250, 0.94) 100%);
}
[data-theme="light"] .output-panel {
background: linear-gradient(180deg, rgba(250, 252, 255, 0.99) 0%, rgba(245, 248, 253, 0.99) 100%);
}
[data-theme="light"] .output-header {
background: linear-gradient(180deg, rgba(238, 243, 250, 0.96) 0%, rgba(232, 238, 247, 0.98) 100%);
border-bottom-color: rgba(31, 95, 168, 0.16);
box-shadow: 0 10px 24px rgba(18, 40, 66, 0.08);
}
[data-theme="light"] .output-content {
background: linear-gradient(180deg, rgba(250, 252, 255, 0.7) 0%, rgba(250, 252, 255, 0.95) 100%);
}
[data-theme="light"] .stats > div {
border-color: rgba(31, 95, 168, 0.18);
background: linear-gradient(180deg, rgba(245, 248, 253, 0.85) 0%, rgba(240, 244, 250, 0.88) 100%);
}
[data-theme="light"] .message {
border-color: rgba(31, 95, 168, 0.2);
background: linear-gradient(180deg, rgba(248, 250, 253, 0.88) 0%, rgba(242, 246, 252, 0.9) 100%);
box-shadow: 0 4px 12px rgba(18, 40, 66, 0.08);
}
[data-theme="light"] .status-bar {
border-top-color: rgba(31, 95, 168, 0.18);
background: linear-gradient(180deg, rgba(242, 246, 252, 0.97) 0%, rgba(235, 240, 248, 0.98) 100%);
box-shadow: 0 10px 24px rgba(18, 40, 66, 0.08);
}
[data-theme="light"] .status-indicator,
[data-theme="light"] .control-group {
border-color: rgba(31, 95, 168, 0.16);
background: linear-gradient(180deg, rgba(245, 248, 253, 0.82) 0%, rgba(240, 244, 250, 0.85) 100%);
box-shadow: 0 10px 24px rgba(18, 40, 66, 0.08);
}
[data-animations="off"] .mode-content.active {