diff --git a/src/app/components/ui/scroll-area.tsx b/src/app/components/ui/scroll-area.tsx index f791725..434f6a1 100644 --- a/src/app/components/ui/scroll-area.tsx +++ b/src/app/components/ui/scroll-area.tsx @@ -40,16 +40,16 @@ function ScrollBar({ className={cn( "flex touch-none p-px transition-colors select-none", orientation === "vertical" && - "h-full w-2.5 border-l border-l-transparent", + "h-full w-3.5 border-l border-l-[rgba(32,227,255,0.10)] bg-[#070e1b]", orientation === "horizontal" && - "h-2.5 flex-col border-t border-t-transparent", + "h-3.5 flex-col border-t border-t-[rgba(32,227,255,0.10)] bg-[#070e1b]", className, )} {...props} > ); diff --git a/src/styles/theme.css b/src/styles/theme.css index 72cd3ab..15bcd48 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -573,45 +573,34 @@ * { scrollbar-width: thin; - scrollbar-color: rgba(145, 175, 196, 0.42) transparent; + scrollbar-color: rgba(116, 132, 154, 0.9) rgba(7, 14, 27, 0.96); } *::-webkit-scrollbar { - width: 10px; - height: 10px; + width: 14px; + height: 14px; } *::-webkit-scrollbar-track { - background: transparent; + background: #070e1b; + border-left: 1px solid rgba(32, 227, 255, 0.10); } *::-webkit-scrollbar-thumb { min-height: 56px; - border: 3px solid transparent; + border: 4px solid #070e1b; border-radius: 999px; - background: - linear-gradient( - 180deg, - rgba(234, 247, 255, 0.54), - rgba(32, 227, 255, 0.36) - ) - padding-box; - box-shadow: inset 0 0 0 1px rgba(234, 247, 255, 0.12); + background: #74849a; + box-shadow: + inset 0 0 0 1px rgba(234, 247, 255, 0.10), + 0 0 14px rgba(32, 227, 255, 0.08); } *::-webkit-scrollbar-thumb:hover { - background: - linear-gradient( - 180deg, - rgba(234, 247, 255, 0.68), - rgba(32, 227, 255, 0.5) - ) - padding-box; + background: #8fa0b8; } *::-webkit-scrollbar-corner, *::-webkit-scrollbar-button { - display: none; - width: 0; - height: 0; + background: #070e1b; }