From bd67195238f062e88e80eddf7111c3a653aa0216 Mon Sep 17 00:00:00 2001 From: Smittix Date: Mon, 2 Mar 2026 14:28:11 +0000 Subject: [PATCH] fix: apply light theme to sidebar, nav, and visual refresh components (#168) 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 --- static/css/global-nav.css | 65 ++++++++++++++++++++++ static/css/index.css | 112 +++++++++++++++++++++++++++++++++----- 2 files changed, 164 insertions(+), 13 deletions(-) diff --git a/static/css/global-nav.css b/static/css/global-nav.css index ccccd64..79e298c 100644 --- a/static/css/global-nav.css +++ b/static/css/global-nav.css @@ -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; diff --git a/static/css/index.css b/static/css/index.css index 6160bbf..84a60b6 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -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 {