Skip to content

Commit 5dbed35

Browse files
authored
fix: 메인 스크롤바 ui 변경
1 parent c885128 commit 5dbed35

2 files changed

Lines changed: 15 additions & 26 deletions

File tree

src/app/components/ui/scroll-area.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,16 @@ function ScrollBar({
4040
className={cn(
4141
"flex touch-none p-px transition-colors select-none",
4242
orientation === "vertical" &&
43-
"h-full w-2.5 border-l border-l-transparent",
43+
"h-full w-3.5 border-l border-l-[rgba(32,227,255,0.10)] bg-[#070e1b]",
4444
orientation === "horizontal" &&
45-
"h-2.5 flex-col border-t border-t-transparent",
45+
"h-3.5 flex-col border-t border-t-[rgba(32,227,255,0.10)] bg-[#070e1b]",
4646
className,
4747
)}
4848
{...props}
4949
>
5050
<ScrollAreaPrimitive.ScrollAreaThumb
5151
data-slot="scroll-area-thumb"
52-
className="bg-border relative flex-1 rounded-full"
52+
className="relative flex-1 rounded-full border-4 border-[#070e1b] bg-[#74849a]"
5353
/>
5454
</ScrollAreaPrimitive.ScrollAreaScrollbar>
5555
);

src/styles/theme.css

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -573,45 +573,34 @@
573573

574574
* {
575575
scrollbar-width: thin;
576-
scrollbar-color: rgba(145, 175, 196, 0.42) transparent;
576+
scrollbar-color: rgba(116, 132, 154, 0.9) rgba(7, 14, 27, 0.96);
577577
}
578578

579579
*::-webkit-scrollbar {
580-
width: 10px;
581-
height: 10px;
580+
width: 14px;
581+
height: 14px;
582582
}
583583

584584
*::-webkit-scrollbar-track {
585-
background: transparent;
585+
background: #070e1b;
586+
border-left: 1px solid rgba(32, 227, 255, 0.10);
586587
}
587588

588589
*::-webkit-scrollbar-thumb {
589590
min-height: 56px;
590-
border: 3px solid transparent;
591+
border: 4px solid #070e1b;
591592
border-radius: 999px;
592-
background:
593-
linear-gradient(
594-
180deg,
595-
rgba(234, 247, 255, 0.54),
596-
rgba(32, 227, 255, 0.36)
597-
)
598-
padding-box;
599-
box-shadow: inset 0 0 0 1px rgba(234, 247, 255, 0.12);
593+
background: #74849a;
594+
box-shadow:
595+
inset 0 0 0 1px rgba(234, 247, 255, 0.10),
596+
0 0 14px rgba(32, 227, 255, 0.08);
600597
}
601598

602599
*::-webkit-scrollbar-thumb:hover {
603-
background:
604-
linear-gradient(
605-
180deg,
606-
rgba(234, 247, 255, 0.68),
607-
rgba(32, 227, 255, 0.5)
608-
)
609-
padding-box;
600+
background: #8fa0b8;
610601
}
611602

612603
*::-webkit-scrollbar-corner,
613604
*::-webkit-scrollbar-button {
614-
display: none;
615-
width: 0;
616-
height: 0;
605+
background: #070e1b;
617606
}

0 commit comments

Comments
 (0)