diff --git a/frontend/current_screen.png b/frontend/current_screen.png index 3c745e6d..2e00bea8 100644 Binary files a/frontend/current_screen.png and b/frontend/current_screen.png differ diff --git a/frontend/src/shared/shell/KsHeader.vue b/frontend/src/shared/shell/KsHeader.vue index 637a8cae..70d43a89 100644 --- a/frontend/src/shared/shell/KsHeader.vue +++ b/frontend/src/shared/shell/KsHeader.vue @@ -93,42 +93,24 @@ const toggleTheme = () => { - - +
@@ -321,44 +303,48 @@ const toggleTheme = () => { color: var(--color-primary-500); } -.ks-header__quick-toolbar { +.ks-header__search { display: flex; align-items: center; - gap: 6px; flex: 1; - max-width: 600px; + max-width: 300px; + background-color: var(--color-background-primary); + border: 1px solid var(--color-border-primary); + border-radius: var(--border-radius-base); + padding: 0 var(--spacing-3); + gap: var(--spacing-2); } -.ks-header__quick-label { - font-size: 11px; - font-weight: 700; - color: var(--ks-color-action); - white-space: nowrap; - margin-right: 2px; +.ks-header__search-input { + flex: 1; + border: none; + background: transparent; + outline: none; + color: var(--color-text-primary); + font-size: var(--font-size-sm); + padding: var(--spacing-2) 0; } -.ks-header__quick-btn { - display: inline-flex; - align-items: center; - gap: 4px; - height: 24px; - padding: 0 8px; - background: var(--ks-color-surface); - border: 1px solid var(--ks-color-neutral-300); - border-radius: var(--ks-radius-sm); - color: var(--ks-color-neutral-700); - font-size: 11px; - font-weight: 600; +.ks-header__search-input::placeholder { + color: var(--color-text-tertiary); +} + +.ks-header__search-btn { + background: transparent; + border: none; cursor: pointer; - white-space: nowrap; - transition: all 0.15s ease; + font-size: 16px; + color: var(--color-primary-500); + padding: var(--spacing-1); + transition: all var(--transition-base); } -.ks-header__quick-btn:hover { - background: #e0f2fe; - color: var(--ks-color-action); - border-color: var(--ks-color-action); - box-shadow: 0 1px 2px rgba(37, 99, 235, 0.12); +.ks-header__search-btn:hover { + color: var(--color-primary-600); +} + +.ks-header__search-btn:active { + color: var(--color-primary-700); } .ks-header__end {