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

fix(ui): soften overflow scrollbars

This commit is contained in:
t8y2 2026-06-11 22:20:16 +08:00
parent cee8cbb95a
commit 098d125bcb
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/desktop/src/components/grid/DataGrid.vue
View File

@ -7757,7 +7757,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
.data-grid-horizontal-scrollbar {
position: absolute;
inset-inline: calc(var(--row-num-w) + 8px) 10px;
bottom: 8px;
bottom: 2px;
z-index: 30;
height: 10px;
cursor: pointer;
@ -7771,7 +7771,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
top: 4px;
height: 2px;
border-radius: 999px;
background: color-mix(in oklch, var(--foreground) 12%, transparent);
background: color-mix(in oklch, var(--foreground) 7%, transparent);
}
.data-grid-horizontal-scrollbar__thumb {
@ -7780,7 +7780,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
height: 4px;
min-width: 24px;
border-radius: 999px;
background: color-mix(in oklch, var(--foreground) 42%, transparent);
background: color-mix(in oklch, var(--foreground) 24%, transparent);
transition:
height 120ms ease,
background-color 120ms ease,
@ -7791,7 +7791,7 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
.data-grid-horizontal-scrollbar--dragging .data-grid-horizontal-scrollbar__thumb {
top: 2px;
height: 6px;
background: color-mix(in oklch, var(--foreground) 62%, transparent);
background: color-mix(in oklch, var(--foreground) 42%, transparent);
}
.canvas-grid-surface {

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

@ -267,7 +267,7 @@ function activateTab(tabId: string) {
<template>
<div v-if="queryStore.tabs.length > 0 || showDriverStore" class="relative flex border-b shrink-0" :class="settingsStore.editorSettings.appLayout === 'classic' ? 'h-9 items-stretch bg-muted' : 'h-10 items-center bg-background px-2'">
<div class="relative h-full min-w-0 flex-1">
<div class="app-tab-strip relative h-full min-w-0 flex-1">
<div v-if="showTabOverflowControls" class="app-tab-scrollbar" :class="{ 'app-tab-scrollbar--dragging': isScrollbarDragging }" @pointerdown="startScrollbarDrag">
<div class="app-tab-scrollbar__thumb" :style="tabScrollbarThumbStyle" />
</div>
@ -401,7 +401,17 @@ function activateTab(tabId: string) {
z-index: 20;
height: 6px;
cursor: pointer;
opacity: 0;
pointer-events: none;
touch-action: none;
transition: opacity 140ms ease;
}
.app-tab-strip:hover .app-tab-scrollbar,
.app-tab-strip:focus-within .app-tab-scrollbar,
.app-tab-scrollbar--dragging {
opacity: 1;
pointer-events: auto;
}
.app-tab-scrollbar::before {