diff --git a/frontend/current_screen.png b/frontend/current_screen.png index 7f2dbdc5..c4b48299 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 1a9de84b..637a8cae 100644 --- a/frontend/src/shared/shell/KsHeader.vue +++ b/frontend/src/shared/shell/KsHeader.vue @@ -93,18 +93,42 @@ const toggleTheme = () => { - -
+ +
+ + + + +
@@ -297,39 +321,44 @@ const toggleTheme = () => { color: var(--color-primary-500); } -.ks-header__quick-menu { +.ks-header__quick-toolbar { display: flex; align-items: center; - gap: var(--ks-space-2); + gap: 6px; flex: 1; - max-width: 380px; + max-width: 600px; } .ks-header__quick-label { - font-size: var(--ks-font-body); + font-size: 11px; font-weight: 700; color: var(--ks-color-action); white-space: nowrap; + margin-right: 2px; } -.ks-header__quick-select { - flex: 1; - height: var(--ks-control-height); - padding: 0 var(--ks-space-2); +.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); - background: var(--ks-color-surface); - color: var(--ks-color-neutral-900); - font-size: var(--ks-font-body); - font-family: inherit; + color: var(--ks-color-neutral-700); + font-size: 11px; + font-weight: 600; cursor: pointer; - box-sizing: border-box; + white-space: nowrap; transition: all 0.15s ease; } -.ks-header__quick-select:hover { +.ks-header__quick-btn:hover { + background: #e0f2fe; + color: var(--ks-color-action); border-color: var(--ks-color-action); - background: #f8fafc; + box-shadow: 0 1px 2px rgba(37, 99, 235, 0.12); } .ks-header__end {