From e9ea9786e99be56ef7022d13bd004fb23d355be0 Mon Sep 17 00:00:00 2001 From: Xin Date: Wed, 13 Sep 2023 19:01:38 -0400 Subject: [PATCH] feat: enhance scrollbar style (#56) * feat: enhance scrollbar style * chore: set `color-scheme` for document element --- assets/css/compiled/main.css | 27 +++++++++++++++++++++++++++ assets/css/components/scrollbar.css | 21 +++++++++++++++++++++ assets/css/styles.css | 1 + assets/js/theme.js | 4 ++++ exampleSite/hugo_stats.json | 3 ++- layouts/partials/head.html | 2 ++ layouts/partials/search.html | 2 +- layouts/partials/sidebar.html | 2 +- layouts/partials/toc.html | 2 +- 9 files changed, 60 insertions(+), 4 deletions(-) create mode 100644 assets/css/components/scrollbar.css diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index b045e97..f79a779 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -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; diff --git a/assets/css/components/scrollbar.css b/assets/css/components/scrollbar.css new file mode 100644 index 0000000..e60c1d1 --- /dev/null +++ b/assets/css/components/scrollbar.css @@ -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; + } +} diff --git a/assets/css/styles.css b/assets/css/styles.css index 7713e4b..f756cee 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -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; diff --git a/assets/js/theme.js b/assets/js/theme.js index bba443e..be29277 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -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"); } } diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index b584439..c5b31f1 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -277,6 +277,7 @@ "hextra-filetree", "hextra-filetree-folder", "hextra-footer", + "hextra-scrollbar", "hextra-sidebar-collapsible-button", "hextra-toc", "hidden", @@ -580,4 +581,4 @@ ], "ids": null } -} \ No newline at end of file +} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index d482027..cf3904a 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -24,8 +24,10 @@ /* Initialize light/dark mode */ if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) { document.documentElement.classList.add("dark"); + document.documentElement.style.colorScheme = "dark"; } else { document.documentElement.classList.remove("dark"); + document.documentElement.style.colorScheme = "light"; } diff --git a/layouts/partials/search.html b/layouts/partials/search.html index 2a6be2d..6a68568 100644 --- a/layouts/partials/search.html +++ b/layouts/partials/search.html @@ -19,7 +19,7 @@
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index ace794f..f0e49da 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -15,7 +15,7 @@
{{ partial "search.html" }}
-
+
    {{ template "sidebar-main" (dict "context" site.Home "pageURL" $pageURL "page" $context "toc" true) -}} diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html index 457d698..bb3759d 100644 --- a/layouts/partials/toc.html +++ b/layouts/partials/toc.html @@ -6,7 +6,7 @@