feat: customize scrollbar

This commit is contained in:
kunish 2023-09-06 23:49:23 +08:00
parent 474d4da65d
commit c27b19259b
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
3 changed files with 21 additions and 4 deletions

View File

@ -111,7 +111,7 @@ export const Header = () => {
const [openedDrawer, setOpenedDrawer] = createSignal(false)
return (
<ul class="navbar rounded-box sticky inset-x-0 top-0 z-50 flex w-auto items-center justify-center bg-base-300 px-4">
<ul class="navbar sticky inset-x-0 top-0 z-50 flex w-auto items-center justify-center bg-base-300 px-4">
<div class="navbar-start gap-4">
<div class={twMerge('drawer w-auto lg:hidden', '')}>
<input

View File

@ -10,6 +10,23 @@
src: url('assets/Twemoji.Mozilla.ttf') format('truetype');
}
::-webkit-scrollbar {
display: none;
:root {
scrollbar-width: thin;
scrollbar-color: hsl(var(--p)) transparent;
}
::-webkit-scrollbar {
background: transparent;
}
::-webkit-scrollbar-thumb {
@apply rounded-box bg-primary;
}
::-webkit-scrollbar:vertical {
width: 6px;
}
::-webkit-scrollbar:horizontal {
height: 6px;
}

View File

@ -306,7 +306,7 @@ export default () => {
]
return (
<div class="flex h-full flex-col gap-4 p-1">
<div class="flex h-full flex-col gap-2 p-1">
<div class="tabs-boxed tabs gap-2">
<For each={tabs()}>
{(tab) => (