1
0
mirror of https://github.com/h3poteto/whalebird-desktop synced 2024-12-26 16:53:59 +01:00

Change scrollbar design

This commit is contained in:
AkiraFukushima 2023-12-02 15:13:28 +09:00
parent 555fb288d1
commit 9576406eb1
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
3 changed files with 29 additions and 1 deletions

View File

@ -35,3 +35,30 @@
.raw-html .invisible {
display: none;
}
.timeline-scrollable {
overflow-y: auto;
overflow-x: auto;
&::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(203 213 225);
border-radius: 4px !important;
opacity: 0;
}
&::-webkit-scrollbar-track {
border-radius: 4px !important;
background-color: rgb(241 245 249);
}
&:hover {
&::-webkit-scrollbar-thumb {
opacity: 1;
}
}
}

View File

@ -55,7 +55,7 @@ export default function Profile(props: Props) {
}
return (
<div style={{ height: 'calc(100% - 50px)' }} className="overflow-y-auto">
<div style={{ height: 'calc(100% - 50px)' }} className="overflow-y-auto timeline-scrollable">
<Flowbite theme={{ theme: customTheme }}>
{user && relationship && (
<>

View File

@ -173,6 +173,7 @@ export default function Timeline(props: Props) {
scrollerRef={ref => {
scrollerRef.current = ref as HTMLElement
}}
className="timeline-scrollable"
firstItemIndex={firstItemIndex}
atTopStateChange={prependUnreads}
data={statuses}