fix: update scrollbar styles for consistency and improved appearance

This commit is contained in:
mlogclub
2026-06-19 13:25:20 +08:00
parent 2fa8a06166
commit 832007e841
+8 -22
View File
@@ -1,15 +1,15 @@
// Native thin scrollbar aligned with the widget, used by chat message lists. // Native scrollbar aligned with the Base UI ScrollArea used by lists.
// Imported from app/layout.tsx with the rest of the global styles. // Imported from app/layout.tsx with the rest of the global styles.
$thumb: #cbd5e1; $scrollbar-thumb: var(--border);
$thumb-hover: #94a3b8;
.agent-desk-scrollbar { .agent-desk-scrollbar {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: $thumb transparent; scrollbar-color: $scrollbar-thumb transparent;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 6px; width: 10px;
height: 10px;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
@@ -17,28 +17,14 @@ $thumb-hover: #94a3b8;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
border: 2px solid transparent; border: 1px solid transparent;
border-radius: 999px; border-radius: 999px;
background: $thumb; background: $scrollbar-thumb;
background-clip: padding-box; background-clip: padding-box;
} }
&::-webkit-scrollbar-thumb:hover { &::-webkit-scrollbar-thumb:hover {
background: $thumb-hover; background: $scrollbar-thumb;
background-clip: padding-box;
}
}
.dark .agent-desk-scrollbar {
scrollbar-color: hsl(var(--border)) transparent;
&::-webkit-scrollbar-thumb {
background: hsl(var(--border));
background-clip: padding-box;
}
&::-webkit-scrollbar-thumb:hover {
background: hsl(var(--muted-foreground) / 0.45);
background-clip: padding-box; background-clip: padding-box;
} }
} }