drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-06-20 01:21:25 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: enhance scrollbar style (#56)

Browse Source 
* feat: enhance scrollbar style

* chore: set `color-scheme` for document element
This commit is contained in:
Xin
2023-09-13 19:01:38 -04:00
committed by GitHub
parent 84ac7fe773
commit e9ea9786e9
9 changed files with 60 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
assets/css/compiled/main.css
View File

@ -2515,6 +2515,33 @@ nav .search-wrapper {
.hamburger-menu svg.open > g:nth-of-type(2) path {
transform: translate3d(0, -4px, 0);
}
.hextra-scrollbar {
scrollbar-width: thin; /* Firefox */
scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */
scrollbar-gutter: stable;
}
.hextra-scrollbar::-webkit-scrollbar {
height: 0.75rem;
width: 0.75rem;
}
.hextra-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}
.hextra-scrollbar::-webkit-scrollbar-thumb {
border-radius: 10px;
}
.hextra-scrollbar:hover::-webkit-scrollbar-thumb {
border: 3px solid transparent;
background-color: var(--tw-shadow-color);
background-clip: content-box;
--tw-shadow-color: rgb(115 115 115 / 0.2);
--tw-shadow: var(--tw-shadow-colored);
}
.hextra-scrollbar:hover::-webkit-scrollbar-thumb:hover {
--tw-shadow-color: rgb(115 115 115 / 0.4);
--tw-shadow: var(--tw-shadow-colored);
}
html {
font-size: 1rem;
-webkit-font-smoothing: antialiased;

21
assets/css/components/scrollbar.css Normal file
View File

@ -0,0 +1,21 @@
.hextra-scrollbar {
scrollbar-width: thin; /* Firefox */
scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */
scrollbar-gutter: stable;
&::-webkit-scrollbar {
@apply w-3 h-3;
}
&::-webkit-scrollbar-track {
@apply bg-transparent;
}
&::-webkit-scrollbar-thumb {
@apply rounded-[10px];
}
&:hover::-webkit-scrollbar-thumb {
border: 3px solid transparent;
background-color: var(--tw-shadow-color);
background-clip: content-box;
@apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
}
}

1
assets/css/styles.css
View File

@ -7,6 +7,7 @@
@import "components/search.css";
@import "components/sidebar.css";
@import "components/navbar.css";
@import "components/scrollbar.css";
html {
@apply text-base antialiased;

4
assets/js/theme.js
View File

@ -17,17 +17,21 @@ themeToggleButtons.forEach((el) => {
if (localStorage.getItem("color-theme")) {
if (localStorage.getItem("color-theme") === "light") {
document.documentElement.classList.add("dark");
document.documentElement.style.colorScheme = "dark";
localStorage.setItem("color-theme", "dark");
} else {
document.documentElement.classList.remove("dark");
document.documentElement.style.colorScheme = "light";
localStorage.setItem("color-theme", "light");
}
} else {
if (document.documentElement.classList.contains("dark")) {
document.documentElement.classList.remove("dark");
document.documentElement.style.colorScheme = "light";
localStorage.setItem("color-theme", "light");
} else {
document.documentElement.classList.add("dark");
document.documentElement.style.colorScheme = "dark";
localStorage.setItem("color-theme", "dark");
}
}