Skip to content

Commit 7008dba

Browse files
YuKongAYuKongA
committed
docs: Update web style
1 parent f1cea00 commit 7008dba

File tree

5 files changed

+71
-72
lines changed

5 files changed

+71
-72
lines changed

‎docs/.vitepress/theme/index.mts‎ renamed to ‎docs/.vitepress/theme/index.ts‎

File renamed without changes.

‎docs/.vitepress/theme/style/blur.css‎

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,60 @@
11
:root {
22

3+
/* 亮色模式主要模糊颜色 */
4+
--miuix-color-blur: rgba(255, 255, 255, 0.7);
5+
6+
/* 亮色模式文档页左侧顶部颜色 */
7+
--miuix-color-blur-top: rgba(246, 246, 247, 0.7);
8+
39
/* 亮色模式搜索框颜色 */
410
--miuix-color-search-button: rgba(255, 255, 255, 0.5);
511

6-
/* 首页下滑后导航透明 */
7-
.VPNavBar:not(.has-sidebar):not(.home.top) {
8-
background-color: rgba(255, 255, 255, 0);
9-
backdrop-filter: blur(15px)
10-
}
1112

12-
/* 搜索框透明 */
13+
/* 搜索框模糊 */
1314
.DocSearch-Button {
1415
background-color: var(--miuix-color-search-button);
15-
backdrop-filter: blur(15px)
1616
}
1717

18-
/* Feature 透明 */
19-
.VPFeature {
20-
border: none;
21-
box-shadow: 0 10px 30px 0 rgb(0 0 0 / 15%);
22-
background-color: transparent;
18+
/* 文档页侧边栏顶部模糊 */
19+
.curtain {
20+
background-color: var(--miuix-color-blur-top);
21+
backdrop-filter: blur(12px);
2322
}
2423

25-
/* 文档页侧边栏顶部透明 */
26-
.curtain {
27-
background-color: rgba(255, 255, 255, 0);
28-
backdrop-filter: blur(15px)
24+
/* 移动端大纲栏模糊 */
25+
.VPLocalNav {
26+
background-color: var(--miuix-color-blur);
27+
backdrop-filter: blur(12px);
28+
-webkit-backdrop-filter: blur(12px);
2929
}
3030

3131
@media (min-width: 960px) {
3232

33-
/* 文档页导航中间透明 */
34-
.VPNavBar:not(.home.top) .content-body {
35-
background-color: rgba(255, 255, 255, 0);
36-
backdrop-filter: blur(15px)
33+
/* 首页下滑后导航栏模糊 */
34+
.VPNavBar:not(.has-sidebar):not(.home .top) {
35+
background-color: var(--miuix-color-blur);
36+
backdrop-filter: blur(12px);
37+
-webkit-backdrop-filter: blur(12px);
3738
}
38-
}
3939

40-
/* 移动端大纲栏透明 */
41-
.VPLocalNav {
42-
background-color: rgba(255, 255, 255, 0);
43-
backdrop-filter: blur(15px)
40+
/* 文档页导航中间模糊 */
41+
.VPNavBar:not(.home.top):not(.home) .content-body {
42+
background-color: var(--miuix-color-blur);
43+
backdrop-filter: blur(12px);
44+
-webkit-backdrop-filter: blur(12px);
45+
}
4446
}
47+
4548
}
4649

4750

4851
.dark {
52+
/* 深色模式主要模糊颜色 */
53+
--miuix-color-blur: rgba(30, 30, 30, 0.7);
54+
55+
/* 亮色模式文档页左侧顶部颜色 */
56+
--miuix-color-blur-top: rgba(22, 22, 24, 0.7);
57+
4958
/* 深色模式搜索框颜色 */
50-
--miuix-color-search-button: rgba(0, 0, 0, 0.2);
59+
--miuix-color-search-button: rgba(30, 30, 30, 0.5);
5160
}

‎docs/.vitepress/theme/style/hidden.css‎

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,4 @@
11
:root {
2-
3-
/* 文档页Logo出文字下横条 */
4-
@media (min-width: 960px) {
5-
.VPNavBarTitle.has-sidebar .title {
6-
border-bottom-color: transparent;
7-
}
8-
}
9-
10-
/* 页脚横条隐藏
11-
.VPFooter {
12-
border-top: none;
13-
} */
14-
152
/* 手机端菜单栏顶部横条隐藏 */
163
.VPNavBar.screen-open {
174
border-bottom: none;
@@ -26,16 +13,4 @@
2613
.VPNavScreenMenuGroup {
2714
border-bottom: none;
2815
}
29-
30-
/* 手机端大纲栏横条隐藏 */
31-
.VPLocalNav {
32-
border-bottom: none;
33-
}
34-
35-
}
36-
37-
38-
/* 导航栏下划线隐藏 */
39-
.divider {
40-
display: none;
4116
}

‎docs/.vitepress/theme/style/var.css‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,50 @@
11
:root {
22

3-
/* 亮色模式主题色 */
3+
/* 亮色模式主题色系统 */
44
--miuix-color-primary: #3482FF;
5+
--miuix-color-primary-container: #5D9BFF;
6+
--miuix-color-on-tertiary-container: #3482FF;
7+
--miuix-color-outline: #D9D9D9;
8+
--miuix-color-divider-line: #E0E0E0;
59

610
/* 主要字体 */
711
--vp-font-family-base: 'MiSans VF', 'Inter', ui-sans-serif, system-ui, sans-serif,
812
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
913

1014
/* 主要主题色 */
1115
--vp-c-brand-1: var(--miuix-color-primary);
16+
--vp-c-brand-2: var(--miuix-color-primary-container);
17+
--vp-c-brand-3: var(--miuix-color-on-tertiary-container);
1218

13-
/* 快速开始按钮颜色 */
14-
--vp-button-brand-bg: var(--miuix-color-primary);
15-
16-
/* hero 标题颜色 */
17-
--vp-home-hero-name-color: transparent;
18-
--vp-home-hero-name-background: var(--miuix-color-primary);
19+
/* 边框和分隔线颜色 */
20+
--vp-c-divider: var(--miuix-color-divider-line);
21+
--vp-c-gutter: var(--miuix-color-outline);
1922

2023
/* hero logo 背景颜色 */
21-
--vp-home-hero-image-background-image: linear-gradient(var(--miuix-color-primary), var(--miuix-color-primary));
24+
--vp-home-hero-image-background-image: linear-gradient(to right bottom, var(--miuix-color-primary), var(--miuix-color-primary-container));
2225
--vp-home-hero-image-filter: blur(40px);
26+
27+
/* 搜索框边框描边颜色 */
28+
@media (min-width: 960px) {
29+
.DocSearch-Button {
30+
border: 1px solid var(--miuix-color-outline);
31+
}
32+
}
33+
2334
}
2435

2536
/* 深色模式主题色 */
2637
.dark {
2738
--miuix-color-primary: #277AF7;
39+
--miuix-color-primary-container: #338FE4;
40+
--miuix-color-on-tertiary-container: #277AF7;
41+
--miuix-color-outline: #404040;
42+
--miuix-color-divider-line: #393939;
2843
}
2944

3045
/* 标题颜色 */
3146
.VPDoc h1 {
32-
background: var(--miuix-color-primary);
47+
background: linear-gradient(120deg, var(--miuix-color-primary), var(--miuix-color-primary-container));
3348
background-clip: text;
3449
-webkit-background-clip: text;
3550
-webkit-text-fill-color: transparent;

‎docs/zh_CN/components/basiccomponent.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -83,18 +83,18 @@ BasicComponent(
8383

8484
### BasicComponent 属性
8585

86-
| 属性名 | 类型 | 说明 | 默认值 | 是否必须 |
87-
| ----------------- | ------------------------------- | -------------------- | --------------------------------------- | -------- |
88-
| modifier | Modifier | 应用于组件的修饰符 | Modifier | 否 |
89-
| insideMargin | PaddingValues | 组件内部边距 | BasicComponentDefaults.InsideMargin | 否 |
90-
| title | String? | 组件标题 | null | 否 |
91-
| titleColor | BasicComponentColors | 标题颜色配置 | BasicComponentDefaults.titleColor() | 否 |
92-
| summary | String? | 组件摘要 | null | 否 |
93-
| summaryColor | BasicComponentColors | 摘要颜色配置 | BasicComponentDefaults.summaryColor() | 否 |
94-
| leftAction | @Composable (() -> Unit?)? | 组件左侧的可组合内容 | null | 否 |
95-
| rightActions | @Composable RowScope.() -> Unit | 组件右侧的可组合内容 | {} | 否 |
96-
| onClick | (() -> Unit)? | 点击组件时触发的回调 | null | 否 |
97-
| enabled | Boolean | 组件是否可用 | true | 否 |
86+
| 属性名 | 类型 | 说明 | 默认值 | 是否必须 |
87+
| ----------------- | ------------------------------- | -------------------- | ---------------------------------------- | -------- |
88+
| modifier | Modifier | 应用于组件的修饰符 | Modifier | 否 |
89+
| insideMargin | PaddingValues | 组件内部边距 | BasicComponentDefaults.InsideMargin | 否 |
90+
| title | String? | 组件标题 | null | 否 |
91+
| titleColor | BasicComponentColors | 标题颜色配置 | BasicComponentDefaults.titleColor() | 否 |
92+
| summary | String? | 组件摘要 | null | 否 |
93+
| summaryColor | BasicComponentColors | 摘要颜色配置 | BasicComponentDefaults.summaryColor() | 否 |
94+
| leftAction | @Composable (() -> Unit?)? | 组件左侧的可组合内容 | null | 否 |
95+
| rightActions | @Composable RowScope.() -> Unit | 组件右侧的可组合内容 | {} | 否 |
96+
| onClick | (() -> Unit)? | 点击组件时触发的回调 | null | 否 |
97+
| enabled | Boolean | 组件是否可用 | true | 否 |
9898
| interactionSource | MutableInteractionSource | 组件的交互源 | remember \{ MutableInteractionSource() } | 否 |
9999

100100
### BasicComponentDefaults 对象

0 commit comments

Comments
 (0)