From 1d9361bd865f590c636287d92e16007baef44bae Mon Sep 17 00:00:00 2001
From: GCWing <gcwing@foxmail.com>
Date: Fri, 3 Apr 2026 11:08:15 +0800
Subject: [PATCH] style(web-ui): NavPanel search trigger matches scene surface;
 trim top-action transitions

- Search trigger: full radius, --color-bg-scene, subtle inset border; hover/active mix

- Remove redundant transitions on brand top-action icon

- Sessions row title font-weight 400
---
 .../src/app/components/NavPanel/NavPanel.scss     |  8 --------
 .../app/components/NavPanel/NavSearchDialog.scss  | 15 +++++++++------
 .../sections/sessions/SessionsSection.scss        |  2 +-
 3 files changed, 10 insertions(+), 15 deletions(-)

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;