全屏Banner的导航栏美化

 1/* 仅首页全屏 Banner 时的导航栏样式美化 */
 2.tk-layout .VPNavBar.home.full-img-nav-bar:not(.screen-open) {
 3  /* 控制文字的阴影颜色 */
 4  .VPNavBarTitle .title,
 5  .VPNavBarMenuLink,
 6  .VPNavBarMenuGroup .text,
 7  .VPSocialLink {
 8    color: var(--vp-c-white) !important;
 9    text-shadow:
10      2px 2px 4px rgba(0, 0, 0, 0.5),
11      -2px 2px 4px rgba(0, 0, 0, 0.5),
12      2px -2px 4px rgba(0, 0, 0, 0.5),
13      -2px -2px 4px rgba(0, 0, 0, 0.5);
14
15    /* 添加平滑过渡动画 */
16    transition:
17      color 0.3s ease,
18      text-shadow 0.3s ease;
19
20    /* 控制鼠标悬停文字后的文字颜色 */
21    &.active,
22    &:hover {
23      color: rgba(0, 110, 255, 1) !important; // 修改文字颜色
24      text-shadow: none !important;
25    }
26  }
27
28  /* 控制搜索栏的阴影颜色 */
29  .DocSearch-Button,
30  .DocSearch-Input {
31    background-color: rgba(0, 0, 0, 0.5);
32    border-radius: 8px;
33    padding: 0.5rem 1rem;
34    color: var(--vp-c-white);
35    text-shadow:
36      2px 2px 4px rgba(0, 0, 0, 0.5),
37      -2px 2px 4px rgba(0, 0, 0, 0.5),
38      2px -2px 4px rgba(0, 0, 0, 0.5),
39      -2px -2px 4px rgba(0, 0, 0, 0.5);
40  }
41
42  .DocSearch-Button-Placeholder {
43    text-shadow:
44      2px 2px 4px rgba(0, 0, 0, 0.5),
45      -2px 2px 4px rgba(0, 0, 0, 0.5),
46      2px -2px 4px rgba(0, 0, 0, 0.5),
47      -2px -2px 4px rgba(0, 0, 0, 0.5);
48  }
49
50  /* 控制配置切换图标的描边颜色 */
51  .tk-icon {
52    cursor: pointer;
53    filter: drop-shadow(0 0 1px rgba(255, 0, 212, 0.5)) // 可修改描边颜色🔽颜色要与下面保持一致
54      drop-shadow(0 0 0.5px rgba(255, 0, 212, 0.5)); // 可修改描边颜色🔼颜色要与上面保持一致
55  }
56
57  /* 控制时钟容器背景色 */
58  #clock {
59    display: inline-flex;
60    align-items: center;
61    gap: 0.2rem;
62    position: relative;
63    border-radius: 0.5rem;
64    padding: 0.2rem 0.5rem;
65    background-color: rgba(0, 0, 0, 0.2); //可修改背景色
66  }
67
68  /* 控制时钟文字颜色 */
69  #clock .hour,
70  #clock .minute,
71  #clock .second,
72  #clock .separator {
73    color: rgba(255, 255, 255, 1); // 可修改文字颜色
74  }
75}

1docs\.vitepress\theme\style\index.scss