侧边栏hover美化

 1// 导入包含混合器定义的文件
 2@use "./var";
 3
 4/* 侧边栏缩放效果 */
 5.group:has([role="button"]) .VPSidebarItem.level-0 .items {
 6    padding-left: 15px !important;
 7    border-left: 1px solid var(--vp-c-divider);
 8    border-radius: 2px;
 9    transition: all 0.25s ease;
10}
11
12/* 侧边栏项基本样式 */
13#VPSidebarNav .VPSidebarItem > .item {
14    align-items: center;
15    border-radius: 4px;
16    transition: all 0.2s ease;
17}
18
19#VPSidebarNav .VPSidebarItem > .item:hover {
20    transform: translateX(4px);
21}
22
23/* 侧边栏项激活状态 */
24#VPSidebarNav .VPSidebarItem.is-active > .item {
25    color: var(--vp-c-brand);
26}
27
28/* 侧边栏项图标基本样式 */
29#VPSidebarNav .VPSidebarItem > .item::before {
30    content: "";
31    width: 16px;
32    height: 16px;
33    display: inline-block;
34    vertical-align: middle;
35    background-size: cover;
36    margin-right: 6px;
37    flex-shrink: 0;
38    transition: transform 0.2s ease;
39}
40
41#VPSidebarNav .VPSidebarItem > .item:hover::before {
42    transform: scale(1.1);
43}
44
45/* 文档项图标 - 折叠状态 */
46#VPSidebarNav .VPSidebarItem:not(.is-link).collapsed > .item::before {
47    background-image: url("/svg/document.svg");
48}
49
50/* 文档项图标 - 展开状态 */
51#VPSidebarNav .VPSidebarItem:not(.is-link) > .item::before {
52    background-image: url("/svg/document-open.svg");
53}
54
55/* 链接项图标 */
56#VPSidebarNav .VPSidebarItem.is-link > .item::before {
57    background-image: url("/svg/file.svg");
58}
59
60/* 深色模式支持 */
61.dark #VPSidebarNav .VPSidebarItem > .item::before {
62    filter: brightness(0.8);
63}
64
65.dark #VPSidebarNav .VPSidebarItem.is-active > .item::before {
66    filter: brightness(1) hue-rotate(180deg);
67}
68
69// 侧边栏二级菜单激活左侧|激活样式
70// #VPSidebarNav .VPSidebarItem .items {
71//     overflow: hidden;
72// }
73
74//使用混合器为侧边栏一级标题应用渐变文本
75// .VPSidebarItem.level-0 .text {
76//     // @include var.text-gradient;
77//     color: var(--vp-c-brand-1) !important;
78// }
79
80// 一级文件夹hover渐变效果
81.VPSidebarItem.level-0 .item:hover .text {
82    @include var.text-gradient;
83    opacity: 0.9;
84}
85
86// 或者为激活状态的侧边栏项应用渐变
87.VPSidebarItem.level-0.is-active .text {
88    @include var.text-gradient;
89}

1@use "./sidebar.scss" as *; // 侧边栏样式