fix: update scrollbar styles for consistency and improved appearance
This commit is contained in:
+8
-22
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user