diff --git a/src/web-ui/src/app/components/NavPanel/NavPanel.scss b/src/web-ui/src/app/components/NavPanel/NavPanel.scss index 8ddf0ed6..dee5e9f2 100644 --- a/src/web-ui/src/app/components/NavPanel/NavPanel.scss +++ b/src/web-ui/src/app/components/NavPanel/NavPanel.scss @@ -2011,10 +2011,6 @@ $_section-header-height: 24px; @include btn-primary.btn-primary-surface-default; transform: scale(1); transform-origin: center; - transition: background $motion-fast $easing-standard, - color $motion-fast $easing-standard, - box-shadow $motion-fast $easing-standard, - transform 0.4s $easing-bounce; .bitfun-nav-panel__top-action-btn:hover & { @include btn-primary.btn-primary-surface-hover; @@ -2024,9 +2020,5 @@ $_section-header-height: 24px; .bitfun-nav-panel__top-action-btn:active & { @include btn-primary.btn-primary-surface-active; transform: scale(0.86); - transition: background $motion-instant $easing-accelerate, - color $motion-instant $easing-accelerate, - box-shadow $motion-instant $easing-accelerate, - transform 0.09s $easing-accelerate; } } diff --git a/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss b/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss index 01918215..2c6715ac 100644 --- a/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss +++ b/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss @@ -254,7 +254,7 @@ } // ── Trigger button (NavPanel brand-header) ─────────────────────────────────── -// Opens the search dialog — compact surface (not a text field): bg distinguishes from nav strip. +// Opens the search dialog — capsule + scene surface (matches .bitfun-scene-viewport / dialog search). .bitfun-nav-panel__search-trigger { display: flex; @@ -265,9 +265,9 @@ min-height: 32px; padding: 0 $size-gap-2; border: none; - border-radius: $size-radius-base; - background: var(--element-bg-soft); - box-shadow: none; + border-radius: $size-radius-full; + background: var(--color-bg-scene); + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-subtle) 65%, transparent); cursor: text; color: var(--color-text-primary); font-size: var(--font-size-sm); @@ -276,15 +276,18 @@ box-sizing: border-box; transition: background $motion-fast $easing-standard, + box-shadow $motion-fast $easing-standard, color $motion-fast $easing-standard; &:hover { - background: var(--element-bg-medium); + background: color-mix(in srgb, var(--color-bg-scene) 88%, var(--element-bg-medium)); + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 55%, transparent); color: var(--color-text-primary); } &:active { - background: var(--element-bg-strong); + background: color-mix(in srgb, var(--color-bg-scene) 82%, var(--element-bg-medium)); + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-medium) 68%, transparent); } &:focus-visible { diff --git a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss index 342c8424..0e31dfa3 100644 --- a/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss +++ b/src/web-ui/src/app/components/NavPanel/sections/sessions/SessionsSection.scss @@ -65,7 +65,7 @@ background: transparent; color: var(--color-text-primary); font-size: var(--font-size-sm); - font-weight: 500; + font-weight: 400; cursor: pointer; width: 100%; text-align: left;