Skip to content

Commit

Permalink
feat(ui): customize ui styles on webkit based browsers
Browse files Browse the repository at this point in the history
mateusfg7 committed Oct 4, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 64187e1 commit 1f99d63
Showing 2 changed files with 30 additions and 1 deletion.
29 changes: 29 additions & 0 deletions src/app/global.css
Original file line number Diff line number Diff line change
@@ -38,4 +38,33 @@
md:h-2 md:w-2
md:group-hover:h-3 md:group-hover:w-3;
}

.styled-scrollbar {
/* WEBKIT */

/* width */
&::-webkit-scrollbar {
@apply w-2 bg-transparent;
}

/* Track */
/*&::-webkit-scrollbar-track {
@apply bg-transparent;
}*/

/* Handle */
&::-webkit-scrollbar-thumb {
@apply cursor-pointer rounded-full bg-neutral-800/40;
}

/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
@apply cursor-grab bg-neutral-800/70;
}

/* Handle on hover */
&::-webkit-scrollbar-thumb:active {
@apply bg-neutral-800/90;
}
}
}
2 changes: 1 addition & 1 deletion src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -18,7 +18,7 @@ export default function Home() {
return (
<div className={container({ background })}>
<Header />
<div className="h-[90vh] space-y-24 overflow-y-scroll pt-16 md:h-[87vh]">
<div className="styled-scrollbar h-[90vh] space-y-24 overflow-y-scroll pt-16 md:h-[87vh]">
<div className="m-auto flex w-fit flex-col items-center gap-3">
<div className="hidden w-full items-center justify-end gap-2 px-4 xs:flex">
<SaveComboButton />

0 comments on commit 1f99d63

Please sign in to comment.