feat: overlay scrollbar
This commit is contained in:
saicaca
parent
3798fd6b64
commit
569a606586
|
|
@ -19,6 +19,7 @@
|
|||
"astro-icon": "1.0.0-next.2",
|
||||
"colorjs.io": "^0.4.5",
|
||||
"mdast-util-to-string": "^4.0.0",
|
||||
"overlayscrollbars": "^2.4.4",
|
||||
"reading-time": "^1.5.0",
|
||||
"rehype-katex": "^7.0.0",
|
||||
"remark-math": "^6.0.0",
|
||||
|
|
|
|||
|
|
@ -29,6 +29,9 @@ dependencies:
|
|||
mdast-util-to-string:
|
||||
specifier: ^4.0.0
|
||||
version: 4.0.0
|
||||
overlayscrollbars:
|
||||
specifier: ^2.4.4
|
||||
version: 2.4.4
|
||||
reading-time:
|
||||
specifier: ^1.5.0
|
||||
version: 1.5.0
|
||||
|
|
@ -4285,6 +4288,10 @@ packages:
|
|||
lcid: 1.0.0
|
||||
dev: false
|
||||
|
||||
/overlayscrollbars@2.4.4:
|
||||
resolution: {integrity: sha512-792lwASLr3FlZER+/P7NseFQjffDEcQOg6HtyBSLrnb3crH+Ybk0tzaljQVQZs0pjGF/xFjyvMKin6whkL0RnQ==}
|
||||
dev: false
|
||||
|
||||
/p-limit@2.3.0:
|
||||
resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
|
||||
engines: {node: '>=6'}
|
||||
|
|
|
|||
|
|
@ -95,6 +95,18 @@ color_set({
|
|||
|
||||
--float-panel-bg: white oklch(0.19 0.015 var(--hue))
|
||||
|
||||
--scrollbar-bg-light: black(0.4)
|
||||
--scrollbar-bg-hover-light: black(0.5)
|
||||
--scrollbar-bg-active-light: black(0.6)
|
||||
|
||||
--scrollbar-bg-dark: white(0.4)
|
||||
--scrollbar-bg-hover-dark: white(0.5)
|
||||
--scrollbar-bg-active-dark: white(0.6)
|
||||
|
||||
--scrollbar-bg: var(--scrollbar-bg-light) var(--scrollbar-bg-dark)
|
||||
--scrollbar-bg-hover: var(--scrollbar-bg-hover-light) var(--scrollbar-bg-hover-dark)
|
||||
--scrollbar-bg-active: var(--scrollbar-bg-active-light) var(--scrollbar-bg-active-dark)
|
||||
|
||||
--color-selection-bar: rainbow-light rainbow-dark
|
||||
|
||||
--display-light-icon: 1 0
|
||||
|
|
@ -106,6 +118,55 @@ color_set({
|
|||
::selection
|
||||
background-color: var(--selection-bg)
|
||||
|
||||
.scrollbar-base.os-scrollbar
|
||||
transition: width 0.15s ease-in-out, height 0.15s ease-in-out, opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s;
|
||||
pointer-events: unset;
|
||||
&.os-scrollbar-horizontal
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
height: 16px;
|
||||
.os-scrollbar-track .os-scrollbar-handle
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
&:hover
|
||||
.os-scrollbar-track .os-scrollbar-handle
|
||||
height: 8px;
|
||||
&.px-2
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
&.os-scrollbar-vertical
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
width: 16px;
|
||||
.os-scrollbar-track .os-scrollbar-handle
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
&:hover
|
||||
.os-scrollbar-track .os-scrollbar-handle
|
||||
width: 8px;
|
||||
&.py-1
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
|
||||
.scrollbar-auto
|
||||
&.os-scrollbar
|
||||
--os-handle-bg: var(--scrollbar-bg);
|
||||
--os-handle-bg-hover: var(--scrollbar-bg-hover);
|
||||
--os-handle-bg-active: var(--scrollbar-bg-active);
|
||||
|
||||
.scrollbar-dark
|
||||
&.os-scrollbar
|
||||
--os-handle-bg: var(--scrollbar-bg-dark);
|
||||
--os-handle-bg-hover: var(--scrollbar-bg-hover-dark);
|
||||
--os-handle-bg-active: var(--scrollbar-bg-active-dark);
|
||||
|
||||
.scrollbar-light
|
||||
&.os-scrollbar
|
||||
--os-handle-bg: var(--scrollbar-bg-light);
|
||||
--os-handle-bg-hover: var(--scrollbar-bg-hover-light);
|
||||
--os-handle-bg-active: var(--scrollbar-bg-active-light);
|
||||
|
||||
|
||||
</style>
|
||||
<style is:global>
|
||||
@tailwind base;
|
||||
|
|
|
|||
|
|
@ -156,6 +156,14 @@ html::view-transition-new(banner-ani) {
|
|||
}
|
||||
</style>
|
||||
<script>
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
import {
|
||||
OverlayScrollbars,
|
||||
ScrollbarsHidingPlugin,
|
||||
SizeObserverPlugin,
|
||||
ClickScrollPlugin
|
||||
} from 'overlayscrollbars';
|
||||
|
||||
/* Preload fonts */
|
||||
// (async function() {
|
||||
// try {
|
||||
|
|
@ -270,22 +278,42 @@ function setBannerHeight() {
|
|||
}
|
||||
}
|
||||
|
||||
/* Load settings when entering the site */
|
||||
function initCustomScrollbar() {
|
||||
OverlayScrollbars(document.querySelector('body'), {
|
||||
scrollbars: {
|
||||
theme: 'scrollbar-base scrollbar-auto py-1',
|
||||
autoHide: 'move',
|
||||
autoHideDelay: 1300,
|
||||
autoHideSuspend: false
|
||||
}
|
||||
});
|
||||
document.querySelectorAll('pre').forEach((ele) => {
|
||||
OverlayScrollbars(ele, {
|
||||
scrollbars: {
|
||||
theme: 'scrollbar-base scrollbar-dark px-2',
|
||||
autoHide: 'leave',
|
||||
autoHideDelay: 1300,
|
||||
autoHideSuspend: false
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
// disableAnimation()() // TODO
|
||||
setBannerHeight();
|
||||
loadTheme();
|
||||
loadHue();
|
||||
activateDisplaySettings();
|
||||
initCustomScrollbar();
|
||||
}
|
||||
|
||||
/* Load settings when entering the site */
|
||||
init();
|
||||
|
||||
/* Load settings before swapping */
|
||||
/* astro:after-swap event happened before swap animation */
|
||||
document.addEventListener('astro:after-swap', () => {
|
||||
setBannerHeight();
|
||||
loadTheme();
|
||||
loadHue();
|
||||
// disableAnimation()(); // TODO
|
||||
activateDisplaySettings();
|
||||
});
|
||||
document.addEventListener('astro:after-swap', init);
|
||||
</script>
|
||||
|
||||
<style is:global lang="stylus">
|
||||
|
|
|
|||
Loading…
Reference in New Issue