RevelaNetwork/Revelav3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

I HATE the normal scrollbar

Browse source
This commit is contained in:
MotorTruck1221 2024-10-28 23:55:59 -06:00
parent 4e398bc9fd
commit a0cd959a93
No known key found for this signature in database
GPG key ID: 08F417E2B8B61EA4
2 changed files with 55 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/layouts/Layout.astro
View file

@ -93,6 +93,59 @@ const { title, noHeader } = Astro.props;
.roboto { .roboto {
font-family: var(--font-family), Roboto; font-family: var(--font-family), Roboto;
} }
/* Custom scrollbar because the default ones look like ASS */
::-webkit-scrollbar {
width: 0.5rem;
height: 0.5rem;
}
::-webkit-scrollbar-track {
background: var(--navbar-color);
}
::-webkit-scrollbar-thumb {
background: var(--navbar-text-color);
}
::-webkit-scrollbar-thumb:hover {
background: var(--navbar-link-color);
}
::-moz-scrollbar {
width: 0.5rem;
height: 0.5rem;
}
::-moz-scrollbar-track {
background: var(--navbar-color);
}
::-moz-scrollbar-thumb {
background: var(--navbar-text-color);
}
::-moz-scrollbar-thumb:hover {
background: var(--navbar-link-color);
}
::-ms-scrollbar {
width: 0.5rem;
height: 0.5rem;
}
::-ms-scrollbar-track {
background: var(--navbar-color);
}
::-ms-scrollbar-thumb {
background: var(--navbar-text-color);
}
::-ms-scrollbar-thumb:hover {
background: var(--navbar-link-color);
}
::-o-scrollbar {
width: 0.5rem;
height: 0.5rem;
}
::-o-scrollbar-track {
background: var(--navbar-color);
}
::-o-scrollbar-thumb {
background: var(--navbar-text-color);
}
::-o-scrollbar-thumb:hover {
background: var(--navbar-link-color);
}
</style> </style>
</body> </body>
</html> </html>

4
src/layouts/SettingsLayout.astro
View file

@ -9,7 +9,7 @@ import { Icon } from "astro-icon/components";
<div class="flex flex-row font-roboto"> <div class="flex flex-row font-roboto">
<div class="text-text-color mt-16 fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col flex md:flex-row"> <div class="text-text-color mt-16 fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col flex md:flex-row">
<div class="items-center md:p-3 sm:p-3 flex flex-row border-border-color md:gap-10 xl:gap-10 max-sm:gap-5 sm:gap-5 md:p-5 md:border-r-2 max:md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 md:p-0 overflow-x-auto md:overflow-x-hidden overflow-y-hidden max-md:ml-1 max-md:mr-1 max-md:max-h-24 max-md:min-h-24 max-md:justify-left max-md:scroll-ml-3 max-md:scroll-mr-3 max-md:snap-x max-md:snap-mandatory"> <div class="items-center md:p-3 sm:p-3 flex flex-row border-border-color md:gap-10 xl:gap-10 max-sm:gap-5 sm:gap-5 md:border-r-2 max:md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 overflow-x-auto md:overflow-x-hidden overflow-y-hidden max-md:ml-1 max-md:mr-1 max-md:max-h-24 max-md:min-h-24 max-md:justify-left max-md:scroll-ml-3 max-md:scroll-mr-3 max-md:snap-x max-md:snap-mandatory">
<SidebarButton title={t("settings.appearance")} route={`/${lang}/settings/appearance`}> <SidebarButton title={t("settings.appearance")} route={`/${lang}/settings/appearance`}>
<Icon name="ph:palette" class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6" /> <Icon name="ph:palette" class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6" />
</SidebarButton> </SidebarButton>
@ -26,7 +26,7 @@ import { Icon } from "astro-icon/components";
<Icon name="ph:user" class="h-6 w-6 text-text-color transistion duration-500 group-hover:text-text-hover-color md:h-6 md:w=6" /> <Icon name="ph:user" class="h-6 w-6 text-text-color transistion duration-500 group-hover:text-text-hover-color md:h-6 md:w=6" />
</SidebarButton> </SidebarButton>
</div> </div>
<div class="p-8 md:w-10/12 overflow-y-auto"> <div class="p-8 md:pb-2 flex-grow overflow-y-auto">
<p class="text-5xl font-semibold mb-5">{t("settings.settings")}</p> <p class="text-5xl font-semibold mb-5">{t("settings.settings")}</p>
<p class="text-2xl">{title}</p> <p class="text-2xl">{title}</p>
<slot /> <slot />