mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 11:12:54 +02:00
feat: add overlay scrollbar for body and code block
This commit is contained in:
radishzzz
parent
bc20bcc211
commit
743d17639d
6 changed files with 92 additions and 71 deletions
|
|
@ -35,7 +35,7 @@
|
|||
"@antfu/eslint-config": "^4.11.0",
|
||||
"@astrojs/check": "^0.9.4",
|
||||
"@types/markdown-it": "^14.1.2",
|
||||
"@types/node": "^22.13.13",
|
||||
"@types/node": "^22.13.14",
|
||||
"@types/sanitize-html": "^2.13.0",
|
||||
"@unocss/eslint-plugin": "66.1.0-beta.7",
|
||||
"@unocss/preset-attributify": "66.1.0-beta.7",
|
||||
|
|
|
|||
74
pnpm-lock.yaml
generated
74
pnpm-lock.yaml
generated
|
|
@ -10,7 +10,7 @@ importers:
|
|||
dependencies:
|
||||
'@astrojs/mdx':
|
||||
specifier: ^4.2.2
|
||||
version: 4.2.2(astro@5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))
|
||||
version: 4.2.2(astro@5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))
|
||||
'@astrojs/partytown':
|
||||
specifier: ^2.1.4
|
||||
version: 2.1.4
|
||||
|
|
@ -25,13 +25,13 @@ importers:
|
|||
version: 3.5.6(typescript@5.8.2)
|
||||
astro:
|
||||
specifier: ^5.5.5
|
||||
version: 5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
version: 5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
astro-compress:
|
||||
specifier: ^2.3.6
|
||||
version: 2.3.6(@types/node@22.13.13)(jiti@2.4.2)(rollup@4.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
version: 2.3.6(@types/node@22.13.14)(jiti@2.4.2)(rollup@4.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
astro-og-canvas:
|
||||
specifier: ^0.7.0
|
||||
version: 0.7.0(astro@5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))
|
||||
version: 0.7.0(astro@5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))
|
||||
astro-robots-txt:
|
||||
specifier: ^1.0.0
|
||||
version: 1.0.0
|
||||
|
|
@ -70,8 +70,8 @@ importers:
|
|||
specifier: ^14.1.2
|
||||
version: 14.1.2
|
||||
'@types/node':
|
||||
specifier: ^22.13.13
|
||||
version: 22.13.13
|
||||
specifier: ^22.13.14
|
||||
version: 22.13.14
|
||||
'@types/sanitize-html':
|
||||
specifier: ^2.13.0
|
||||
version: 2.13.0
|
||||
|
|
@ -110,7 +110,7 @@ importers:
|
|||
version: 5.8.2
|
||||
unocss:
|
||||
specifier: 66.1.0-beta.7
|
||||
version: 66.1.0-beta.7(postcss@8.5.3)(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
|
||||
version: 66.1.0-beta.7(postcss@8.5.3)(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
|
||||
unocss-preset-theme:
|
||||
specifier: ^0.14.1
|
||||
version: 0.14.1(@unocss/core@66.1.0-beta.7)
|
||||
|
|
@ -907,8 +907,8 @@ packages:
|
|||
'@types/node@22.10.5':
|
||||
resolution: {integrity: sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==}
|
||||
|
||||
'@types/node@22.13.13':
|
||||
resolution: {integrity: sha512-ClsL5nMwKaBRwPcCvH8E7+nU4GxHVx1axNvMZTFHMEfNI7oahimt26P5zjVCRrjiIWj6YFXfE1v3dEp94wLcGQ==}
|
||||
'@types/node@22.13.14':
|
||||
resolution: {integrity: sha512-Zs/Ollc1SJ8nKUAgc7ivOEdIBM8JAKgrqqUYi2J997JuKO7/tpQC+WCetQ1sypiKCQWHdvdg9wBNpUPEWZae7w==}
|
||||
|
||||
'@types/normalize-package-data@2.4.4':
|
||||
resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
|
||||
|
|
@ -1682,8 +1682,8 @@ packages:
|
|||
duplexer@0.1.2:
|
||||
resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
|
||||
|
||||
electron-to-chromium@1.5.124:
|
||||
resolution: {integrity: sha512-riELkpDUqBi00gqreV3RIGoowxGrfueEKBd6zPdOk/I8lvuFpBGNkYoHof3zUHbiTBsIU8oxdIIL/WNrAG1/7A==}
|
||||
electron-to-chromium@1.5.125:
|
||||
resolution: {integrity: sha512-A2+qEsSUc95QvyFDl7PNwkDDNphIKBVfBBtWWkPGRbiWEgzLo0SvLygYF6HgzVduHd+4WGPB/WD64POFgwzY3g==}
|
||||
|
||||
emmet@2.4.11:
|
||||
resolution: {integrity: sha512-23QPJB3moh/U9sT4rQzGgeyyGIrcM+GH5uVYg2C6wZIxAIJq7Ng3QLT79tl8FUwDXhyq9SusfknOrofAKqvgyQ==}
|
||||
|
|
@ -3912,12 +3912,12 @@ snapshots:
|
|||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@astrojs/mdx@4.2.2(astro@5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))':
|
||||
'@astrojs/mdx@4.2.2(astro@5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0))':
|
||||
dependencies:
|
||||
'@astrojs/markdown-remark': 6.3.1
|
||||
'@mdx-js/mdx': 3.1.0(acorn@8.14.1)
|
||||
acorn: 8.14.1
|
||||
astro: 5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
astro: 5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
es-module-lexer: 1.6.0
|
||||
estree-util-visit: 2.0.0
|
||||
hast-util-to-html: 9.0.5
|
||||
|
|
@ -4572,7 +4572,7 @@ snapshots:
|
|||
dependencies:
|
||||
undici-types: 6.20.0
|
||||
|
||||
'@types/node@22.13.13':
|
||||
'@types/node@22.13.14':
|
||||
dependencies:
|
||||
undici-types: 6.20.0
|
||||
|
||||
|
|
@ -4584,7 +4584,7 @@ snapshots:
|
|||
|
||||
'@types/sax@1.2.7':
|
||||
dependencies:
|
||||
'@types/node': 22.13.13
|
||||
'@types/node': 22.13.14
|
||||
|
||||
'@types/unist@2.0.11': {}
|
||||
|
||||
|
|
@ -4671,13 +4671,13 @@ snapshots:
|
|||
|
||||
'@ungap/structured-clone@1.3.0': {}
|
||||
|
||||
'@unocss/astro@66.1.0-beta.7(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
|
||||
'@unocss/astro@66.1.0-beta.7(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
|
||||
dependencies:
|
||||
'@unocss/core': 66.1.0-beta.7
|
||||
'@unocss/reset': 66.1.0-beta.7
|
||||
'@unocss/vite': 66.1.0-beta.7(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
|
||||
'@unocss/vite': 66.1.0-beta.7(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
|
||||
optionalDependencies:
|
||||
vite: 6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
|
||||
vite: 6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
|
||||
transitivePeerDependencies:
|
||||
- vue
|
||||
|
||||
|
|
@ -4828,7 +4828,7 @@ snapshots:
|
|||
dependencies:
|
||||
'@unocss/core': 66.1.0-beta.7
|
||||
|
||||
'@unocss/vite@66.1.0-beta.7(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
|
||||
'@unocss/vite@66.1.0-beta.7(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))':
|
||||
dependencies:
|
||||
'@ampproject/remapping': 2.3.0
|
||||
'@unocss/config': 66.1.0-beta.7
|
||||
|
|
@ -4838,7 +4838,7 @@ snapshots:
|
|||
magic-string: 0.30.17
|
||||
tinyglobby: 0.2.12
|
||||
unplugin-utils: 0.2.4
|
||||
vite: 6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
|
||||
vite: 6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
|
||||
transitivePeerDependencies:
|
||||
- vue
|
||||
|
||||
|
|
@ -5086,12 +5086,12 @@ snapshots:
|
|||
|
||||
astring@1.9.0: {}
|
||||
|
||||
astro-compress@2.3.6(@types/node@22.13.13)(jiti@2.4.2)(rollup@4.37.0)(typescript@5.8.2)(yaml@2.7.0):
|
||||
astro-compress@2.3.6(@types/node@22.13.14)(jiti@2.4.2)(rollup@4.37.0)(typescript@5.8.2)(yaml@2.7.0):
|
||||
dependencies:
|
||||
'@playform/pipe': 0.1.2
|
||||
'@types/csso': 5.0.4
|
||||
'@types/html-minifier-terser': 7.0.2
|
||||
astro: 5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
astro: 5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
commander: 13.0.0
|
||||
csso: 5.0.5
|
||||
deepmerge-ts: 7.1.3
|
||||
|
|
@ -5151,9 +5151,9 @@ snapshots:
|
|||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
astro-og-canvas@0.7.0(astro@5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)):
|
||||
astro-og-canvas@0.7.0(astro@5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)):
|
||||
dependencies:
|
||||
astro: 5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
astro: 5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0)
|
||||
canvaskit-wasm: 0.39.1
|
||||
deterministic-object-hash: 2.0.2
|
||||
entities: 4.5.0
|
||||
|
|
@ -5163,7 +5163,7 @@ snapshots:
|
|||
valid-filename: 4.0.0
|
||||
zod: 3.24.2
|
||||
|
||||
astro@5.5.5(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0):
|
||||
astro@5.5.5(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(rollup@4.37.0)(terser@5.37.0)(typescript@5.8.2)(yaml@2.7.0):
|
||||
dependencies:
|
||||
'@astrojs/compiler': 2.11.0
|
||||
'@astrojs/internal-helpers': 0.6.1
|
||||
|
|
@ -5214,8 +5214,8 @@ snapshots:
|
|||
unist-util-visit: 5.0.0
|
||||
unstorage: 1.15.0
|
||||
vfile: 6.0.3
|
||||
vite: 6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
|
||||
vitefu: 1.0.6(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))
|
||||
vite: 6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
|
||||
vitefu: 1.0.6(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))
|
||||
xxhash-wasm: 1.1.0
|
||||
yargs-parser: 21.1.1
|
||||
yocto-spinner: 0.2.1
|
||||
|
|
@ -5304,7 +5304,7 @@ snapshots:
|
|||
browserslist@4.24.4:
|
||||
dependencies:
|
||||
caniuse-lite: 1.0.30001707
|
||||
electron-to-chromium: 1.5.124
|
||||
electron-to-chromium: 1.5.125
|
||||
node-releases: 2.0.19
|
||||
update-browserslist-db: 1.1.3(browserslist@4.24.4)
|
||||
|
||||
|
|
@ -5563,7 +5563,7 @@ snapshots:
|
|||
|
||||
duplexer@0.1.2: {}
|
||||
|
||||
electron-to-chromium@1.5.124: {}
|
||||
electron-to-chromium@1.5.125: {}
|
||||
|
||||
emmet@2.4.11:
|
||||
dependencies:
|
||||
|
|
@ -7886,9 +7886,9 @@ snapshots:
|
|||
'@unocss/core': 66.1.0-beta.7
|
||||
'@unocss/rule-utils': 0.63.6
|
||||
|
||||
unocss@66.1.0-beta.7(postcss@8.5.3)(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2)):
|
||||
unocss@66.1.0-beta.7(postcss@8.5.3)(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2)):
|
||||
dependencies:
|
||||
'@unocss/astro': 66.1.0-beta.7(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
|
||||
'@unocss/astro': 66.1.0-beta.7(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
|
||||
'@unocss/cli': 66.1.0-beta.7
|
||||
'@unocss/core': 66.1.0-beta.7
|
||||
'@unocss/postcss': 66.1.0-beta.7(postcss@8.5.3)
|
||||
|
|
@ -7906,9 +7906,9 @@ snapshots:
|
|||
'@unocss/transformer-compile-class': 66.1.0-beta.7
|
||||
'@unocss/transformer-directives': 66.1.0-beta.7
|
||||
'@unocss/transformer-variant-group': 66.1.0-beta.7
|
||||
'@unocss/vite': 66.1.0-beta.7(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
|
||||
'@unocss/vite': 66.1.0-beta.7(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
|
||||
optionalDependencies:
|
||||
vite: 6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
|
||||
vite: 6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
|
||||
transitivePeerDependencies:
|
||||
- postcss
|
||||
- supports-color
|
||||
|
|
@ -7984,22 +7984,22 @@ snapshots:
|
|||
'@types/unist': 3.0.3
|
||||
vfile-message: 4.0.2
|
||||
|
||||
vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0):
|
||||
vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0):
|
||||
dependencies:
|
||||
esbuild: 0.25.1
|
||||
postcss: 8.5.3
|
||||
rollup: 4.37.0
|
||||
optionalDependencies:
|
||||
'@types/node': 22.13.13
|
||||
'@types/node': 22.13.14
|
||||
fsevents: 2.3.3
|
||||
jiti: 2.4.2
|
||||
lightningcss: 1.28.2
|
||||
terser: 5.37.0
|
||||
yaml: 2.7.0
|
||||
|
||||
vitefu@1.0.6(vite@6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)):
|
||||
vitefu@1.0.6(vite@6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)):
|
||||
optionalDependencies:
|
||||
vite: 6.2.3(@types/node@22.13.13)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
|
||||
vite: 6.2.3(@types/node@22.13.14)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0)
|
||||
|
||||
volar-service-css@0.0.62(@volar/language-service@2.4.12):
|
||||
dependencies:
|
||||
|
|
|
|||
|
|
@ -2,11 +2,6 @@
|
|||
import { defaultLocale, themeConfig } from '@/config'
|
||||
import { walineLocaleMap } from '@/i18n/config'
|
||||
|
||||
const {
|
||||
light: { primary: lightPrimary, secondary: lightSecondary, background: lightBackground },
|
||||
dark: { primary: darkPrimary, secondary: darkSecondary, background: darkBackground },
|
||||
} = themeConfig.color
|
||||
|
||||
const {
|
||||
serverURL = '',
|
||||
emoji = [],
|
||||
|
|
@ -207,4 +202,4 @@ document.addEventListener('astro:after-swap', initWaline)
|
|||
/* Rendering Options */
|
||||
--waline-avatar-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,59 +1,83 @@
|
|||
<script>
|
||||
import { OverlayScrollbars } from 'overlayscrollbars'
|
||||
|
||||
function initScrollbar() {
|
||||
function setupScrollbar() {
|
||||
const bodyElement = document.body
|
||||
const scrollbarTheme = document.documentElement.classList.contains('dark') ? 'scrollbar-dark' : 'scrollbar-light'
|
||||
if (!bodyElement.hasAttribute('data-scrollbar-initialized')) {
|
||||
OverlayScrollbars({
|
||||
target: bodyElement,
|
||||
cancel: {
|
||||
// don't initialize the overlay scrollbar if there is a native one
|
||||
nativeScrollbarsOverlaid: true,
|
||||
},
|
||||
}, {
|
||||
scrollbars: {
|
||||
theme: scrollbarTheme,
|
||||
theme: 'scrollbar-body',
|
||||
autoHide: 'scroll',
|
||||
autoHideDelay: 800,
|
||||
},
|
||||
overflow: {
|
||||
x: 'hidden',
|
||||
},
|
||||
})
|
||||
|
||||
bodyElement.setAttribute('data-scrollbar-initialized', 'true')
|
||||
}
|
||||
|
||||
const preElements = document.querySelectorAll('pre')
|
||||
preElements.forEach((pre) => {
|
||||
if (!pre.hasAttribute('data-scrollbar-initialized')) {
|
||||
OverlayScrollbars({
|
||||
target: pre,
|
||||
cancel: {
|
||||
nativeScrollbarsOverlaid: true,
|
||||
},
|
||||
}, {
|
||||
scrollbars: {
|
||||
theme: 'scrollbar-code',
|
||||
autoHide: 'leave',
|
||||
autoHideDelay: 500,
|
||||
},
|
||||
})
|
||||
|
||||
pre.setAttribute('data-scrollbar-initialized', 'true')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
initScrollbar()
|
||||
document.addEventListener('astro:after-swap', initScrollbar)
|
||||
setupScrollbar()
|
||||
document.addEventListener('astro:after-swap', setupScrollbar)
|
||||
</script>
|
||||
|
||||
<style is:global>
|
||||
@import 'overlayscrollbars/overlayscrollbars.css';
|
||||
|
||||
.scrollbar-light,
|
||||
.scrollbar-dark {
|
||||
--os-size: 1rem;
|
||||
.scrollbar-body {
|
||||
--os-size: 0.9rem;
|
||||
--os-padding-perpendicular: 0.2rem;
|
||||
--os-padding-axis: 0.4rem;
|
||||
--os-handle-border-radius: 0.7rem;
|
||||
--os-handle-perpendicular-size-hover: 160%;
|
||||
--os-handle-perpendicular-size-active: 160%;
|
||||
--os-handle-interactive-area-offset: 3px;
|
||||
--os-handle-border-radius: 99rem;
|
||||
--os-handle-perpendicular-size: 75%;
|
||||
--os-handle-perpendicular-size-hover: 100%;
|
||||
--os-handle-perpendicular-size-active: 100%;
|
||||
--os-handle-interactive-area-offset: 0.2rem;
|
||||
--os-handle-bg: oklch(var(--un-preset-theme-colors-secondary) / 0.25);
|
||||
--os-handle-bg-hover: oklch(var(--un-preset-theme-colors-secondary) / 0.40);
|
||||
--os-handle-bg-active: oklch(var(--un-preset-theme-colors-secondary) / 0.40);
|
||||
--os-handle-max-size: 60%;
|
||||
--os-handle-min-size: 12%;
|
||||
}
|
||||
|
||||
.scrollbar-light {
|
||||
--os-handle-bg: #CFC5BD;
|
||||
--os-handle-bg-hover: #ADA49E;
|
||||
--os-handle-bg-active: #ADA49E;
|
||||
}
|
||||
|
||||
.scrollbar-dark {
|
||||
--os-handle-bg: #2C2C2C;
|
||||
--os-handle-bg-hover: #3C3C3C;
|
||||
--os-handle-bg-active: #3C3C3C;
|
||||
.scrollbar-code {
|
||||
--os-size: 0.6rem;
|
||||
--os-padding-perpendicular: 0.1rem;
|
||||
--os-padding-axis: 0.2rem;
|
||||
--os-handle-border-radius: 99rem;
|
||||
--os-handle-perpendicular-size: 75%;
|
||||
--os-handle-perpendicular-size-hover: 100%;
|
||||
--os-handle-perpendicular-size-active: 100%;
|
||||
--os-handle-interactive-area-offset: 0.1rem;
|
||||
--os-handle-bg: oklch(var(--un-preset-theme-colors-secondary) / 0.20);
|
||||
--os-handle-bg-hover: oklch(var(--un-preset-theme-colors-secondary) / 0.35);
|
||||
--os-handle-bg-active: oklch(var(--un-preset-theme-colors-secondary) / 0.35);
|
||||
--os-handle-max-size: 60%;
|
||||
--os-handle-min-size: 12%;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import Button from '@/components/Button.astro'
|
|||
import Footer from '@/components/Footer.astro'
|
||||
import Header from '@/components/Header.astro'
|
||||
import Navbar from '@/components/Navbar.astro'
|
||||
import Scrollbar from '@/components/Widgets/Scrollbar.astro'
|
||||
import themeConfig from '@/config'
|
||||
import Head from '@/layouts/Head.astro'
|
||||
import { getPageInfo } from '@/utils/page'
|
||||
|
|
@ -45,6 +46,7 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
|
|||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
<Scrollbar />
|
||||
<Button supportedLangs={supportedLangs} />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -300,4 +300,4 @@ html.dark .heti u {
|
|||
}
|
||||
.heti details summary::marker {
|
||||
content: '';
|
||||
} */
|
||||
} */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue