Updated scrollbar styles.

This commit is contained in:
Mike Cao 2023-04-01 20:40:01 -07:00
parent 8397102bac
commit 2411aeae8d
3 changed files with 15 additions and 24 deletions

View File

@ -19,7 +19,3 @@
height: calc(100vh - 60px); height: calc(100vh - 60px);
overflow-y: auto; overflow-y: auto;
} }
.body::-webkit-scrollbar-track {
border: 0;
}

View File

@ -6,7 +6,7 @@ export default function ShareLayout({ children }) {
return ( return (
<Container> <Container>
<Header /> <Header />
{children} <main>{children}</main>
<Footer /> <Footer />
</Container> </Container>
); );

View File

@ -62,34 +62,29 @@ svg {
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 16px; width: 15px;
height: 16px; background: var(--base50);
background: transparent;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: transparent; border: 7px solid rgba(0, 0, 0, 0);
border-right: 2px solid var(--base200); background-color: var(--base300);
background-clip: padding-box;
} }
::-webkit-scrollbar-track:hover { body::-webkit-scrollbar-track,
border-right: 2px solid var(--base300); main::-webkit-scrollbar-track {
background-color: var(--base50);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
position: relative; border: 7px solid rgba(0, 0, 0, 0);
border-right: 2px solid var(--base600); background-color: var(--base600);
background-clip: padding-box;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
border-right: 8px solid var(--base700); border: 4px solid rgba(0, 0, 0, 0);
} background-color: var(--base800);
background-clip: padding-box;
::-webkit-scrollbar-thumb:horizontal {
position: relative;
border-bottom: 2px solid var(--base600);
}
::-webkit-scrollbar-thumb:horizontal:hover {
border-bottom: 8px solid var(--base700);
} }