diff --git a/neode-ui/src/style.css b/neode-ui/src/style.css index 057512f8..f0da200d 100644 --- a/neode-ui/src/style.css +++ b/neode-ui/src/style.css @@ -65,7 +65,6 @@ .sidebar-nav-item:focus-visible, .path-action-button:focus-visible, .path-option-card:focus-visible, -.mode-switcher-btn:focus-visible, .kiosk-app-tile:focus-visible, input:focus-visible, textarea:focus-visible, @@ -191,10 +190,10 @@ input[type="radio"]:active + * { font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.45); - transition: color 0.2s ease, background-color 0.2s ease; + transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; cursor: pointer; text-align: center; - border: none; + border: 1px solid transparent; background: transparent; } @@ -211,9 +210,22 @@ input[type="radio"]:active + * { } .mode-switcher-btn-active { - background: rgba(255, 255, 255, 0.15); + background: rgba(251, 146, 60, 0.15); color: rgba(255, 255, 255, 0.95); - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); + box-shadow: + 0 1px 4px rgba(0, 0, 0, 0.3), + 0 0 8px rgba(251, 146, 60, 0.12), + inset 0 1px 0 rgba(251, 146, 60, 0.2); + border-color: rgba(251, 146, 60, 0.25); + } + + .mode-switcher-btn:focus-visible { + background: rgba(251, 146, 60, 0.1); + color: rgba(255, 255, 255, 0.9); + box-shadow: + 0 0 0 1px rgba(251, 146, 60, 0.4), + 0 0 12px rgba(251, 146, 60, 0.2); + border-color: rgba(251, 146, 60, 0.3); } /* Chat launcher button — sidebar (desktop) */ @@ -967,17 +979,15 @@ input[type="radio"]:active + * { transform: translateY(1px); } - /* Active Navigation Tab Style — orange glass */ + /* Active Navigation Tab Style — sidebar selected item */ .nav-tab-active { position: relative; - background: rgba(251, 146, 60, 0.15) !important; + background: rgba(0, 0, 0, 0.35) !important; box-shadow: - 0 6px 16px rgba(0, 0, 0, 0.5), - 0 0 12px rgba(251, 146, 60, 0.15), - inset 0 1px 0 rgba(251, 146, 60, 0.3) !important; + 0 6px 16px rgba(0, 0, 0, 0.6), + inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; color: rgba(255, 255, 255, 1) !important; font-weight: 600 !important; - border: 1px solid rgba(251, 146, 60, 0.3) !important; } .nav-tab-active::before { @@ -986,7 +996,7 @@ input[type="radio"]:active + * { inset: 0; border-radius: inherit; padding: 2px; - background: linear-gradient(135deg, rgba(251, 146, 60, 0.4), rgba(251, 146, 60, 0.05)); + background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); @@ -995,17 +1005,14 @@ input[type="radio"]:active + * { pointer-events: none; } - /* Sidebar nav items: grow + glow on gamepad focus */ + /* Sidebar nav items: grow + glow on gamepad focus (same as containers) */ .sidebar-nav-item { - transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; + transition: transform 0.2s ease, box-shadow 0.2s ease; } .sidebar-nav-item:focus-visible { outline: none !important; - background: rgba(251, 146, 60, 0.12) !important; + background: rgba(255, 255, 255, 0.1) !important; color: white !important; - box-shadow: - 0 0 0 1px rgba(251, 146, 60, 0.3), - 0 0 12px rgba(251, 146, 60, 0.15) !important; } }