xiaoxue_admin
/
dbx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): improve VS Code wrapped tab contrast

This commit is contained in:
zipg 2026-07-20 16:25:41 +08:00 committed by GitHub
parent 0d1d6e18a4
commit 662fe49a53
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/desktop/src/components/layout/AppTabBar.vue
View File

@ -569,7 +569,7 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
<Tooltip>
<TooltipTrigger as-child>
<div
class="group flex items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap select-none"
class="app-tab-pill group flex items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap select-none"
:class="
isClassicLayout
? [
@ -644,13 +644,14 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
<div :class="isClassicLayout ? 'h-full' : ''" @contextmenu="onContextMenu">
<div
data-settings-page-tab
class="group flex min-w-36 items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap"
class="app-tab-pill group flex min-w-36 items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap"
:class="
isClassicLayout
? ['h-full border-r border-border/80 dark:border-border/45 font-medium', settingsPageActive ? 'bg-background text-foreground' : 'text-foreground/70 hover:text-foreground/90']
: ['h-7 rounded-md border font-medium', settingsPageActive ? 'border-ring text-foreground' : 'border-border/60 text-foreground/70 hover:border-border hover:text-foreground/90']
"
:style="isClassicLayout && settingsPageActive ? { boxShadow: '0 1px 0 0 var(--color-background)' } : {}"
:data-active-tab="settingsPageActive"
@click="emit('activate-settings-page')"
@mousedown.middle.prevent="emit('close-settings-page')"
>
@ -670,13 +671,14 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
<div :class="isClassicLayout ? 'h-full' : ''" @contextmenu="onContextMenu">
<div
data-driver-store-tab
class="group flex min-w-38 items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap"
class="app-tab-pill group flex min-w-38 items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap"
:class="
isClassicLayout
? ['h-full border-r border-border/80 dark:border-border/45 font-medium', driverStoreActive ? 'bg-background text-foreground' : 'text-foreground/70 hover:text-foreground/90']
: ['h-7 rounded-md border font-medium', driverStoreActive ? 'border-ring text-foreground' : 'border-border/60 text-foreground/70 hover:border-border hover:text-foreground/90']
"
:style="isClassicLayout && driverStoreActive ? { boxShadow: '0 1px 0 0 var(--color-background)' } : {}"
:data-active-tab="driverStoreActive"
@click="emit('activate-driver-store')"
@mousedown.middle.prevent="emit('close-driver-store')"
>
@ -760,7 +762,7 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
<Tooltip>
<TooltipTrigger as-child>
<div
class="group flex items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap select-none"
class="app-tab-pill group flex items-center gap-1 px-2 text-xs cursor-pointer transition-colors whitespace-nowrap select-none"
:class="
isClassicLayout
? [

5
apps/desktop/src/styles/globals.css
View File

@ -676,6 +676,7 @@ html.theme-vscode {
--dbx-editor-toolbar: rgb(246 246 246);
--dbx-gutter: rgb(229 229 229);
--dbx-sidebar-header: rgb(236 236 236);
--dbx-tab-outline: rgb(178 178 178);
}
html.theme-vscode.dark {
@ -716,6 +717,7 @@ html.theme-vscode.dark {
--dbx-editor-toolbar: rgb(37 37 38);
--dbx-gutter: rgb(27 27 28);
--dbx-sidebar-header: rgb(45 45 48);
--dbx-tab-outline: rgb(92 92 92);
}
html.theme-idea {
@ -1873,6 +1875,9 @@ body.dbx-table-reference-dragging * {
:is(.theme-soft, .theme-graphite, .theme-cobalt, .theme-sage, .theme-amber, .theme-blush, .theme-vscode, .theme-idea, .theme-xcode, .theme-jetbrains, .theme-cursor, .theme-claude) .app-layout-classic > .flex-1 {
background: var(--dbx-content);
}
html.theme-vscode .app-tab-scroll.wrap-mode .app-tab-pill[data-active-tab="false"] {
border-color: var(--dbx-tab-outline);
}
.app-layout-classic .panel-resize-handle {
width: 3px;
}