--
:
--
:
--
增加顶部渐变色和滚动条样式
最后更新于:
增加顶部渐变色和滚动条样式
2025年1月2日已解决。
次功能由《Hydoc的小站》前端大佬贡献，感谢大佬。💖💖
环境
自己开源的 《vuepress-theme-vdoing-one-public》网站模板。
此模板是在Young Kbt blog的开源项目《Kele-Bingtang.github.io》基础上修改为自己的风格而成，感谢大佬开源的模板&感谢原作者开源的vdoing主题。❤️❤️
预览
配置
在docs\.vuepress\styles\palette.styl文件后面添加如下代码：
1/* 顶部渐变色 */
2.reading-progress .progress {
3 background: linear-gradient( 114.2deg,
4 rgba(184,215,21,1) -15.3%,
5 rgba(148,187,233,1) 14.5%,
6 rgba(21,215,182,1) 38.7%,
7 rgba(129,189,240,1) 58.8%,
8 rgba(219,108,205,1) 77.3%,
9 rgba(240,129,129,1) 88.5% ) !important;
10}
11
12
13/* 全局滚动条样式 */
14::-webkit-scrollbar {
15 width: 0.4rem;
16 height: 0.4rem;
17}
18
19::-webkit-scrollbar-track {
20 border-radius: 2em;
21}
22
23/* 滚动条滑块样式 */
24::-webkit-scrollbar-thumb {
25 background-color: var(--color-pink-light) !important;
26 background-image: -webkit-linear-gradient(
27 45deg,
28 hsla(0, 0%, 100%, 0.4) 25%,
29 transparent 0,
30 transparent 50%,
31 hsla(0, 0%, 100%, 0.4) 0,
32 hsla(0, 0%, 100%, 0.4) 75%,
33 transparent 0,
34 transparent
35 );
36 border-radius: 2em;
37}
38
39/* 滚动条滑块悬停效果 */
40::-webkit-scrollbar-thumb:hover {
41 background: #aaaaaa;
42 background-image: -webkit-linear-gradient(
43 45deg,
44 hsla(0, 0%, 100%, 0.4) 25%,
45 transparent 0,
46 transparent 50%,
47 hsla(0, 0%, 100%, 0.4) 0,
48 hsla(0, 0%, 100%, 0.4) 75%,
49 transparent 0,
50 transparent
51 );
52 border-radius: 2em;
53}
在次文件里搜索theme-mode-light：
1 添加如下一行代码：
2 --color-pink-light: #0085AD; /* 定义亮色主题下的滚动条颜色 */
📡
推荐使用微信支付
推荐使用支付宝
