Skip to content

Commit 1cc8e10

Browse files
mmdaplmmdapl
authored
Merge pull request #70 from 142vip/fix/style
2 parents cf75d9b + 97ee116 commit 1cc8e10

File tree

2 files changed

+137
-205
lines changed

2 files changed

+137
-205
lines changed

‎docs/.vuepress/styles/index.scss‎

Lines changed: 134 additions & 202 deletions
Original file line numberDiff line numberDiff line change
@@ -1,202 +1,134 @@
1-
///* 此处自定义样式，对主题进行覆盖 */
2-
//
3-
//
4-
//// 首页导航按钮
5-
//.actions > a {
6-
// margin-left: 5px;
7-
// margin-right: 5px;
8-
//}
9-
//
10-
//// 隐藏 全文搜索
11-
//.DocSearch-Logo {
12-
// // display:none;不占位隐藏
13-
// visibility: hidden; // 占位隐藏
14-
//}
15-
//
16-
//.DocSearch-Button-Keys {
17-
// visibility: hidden
18-
//}
19-
//
20-
//// 首页title描述
21-
//.home .hero .description {
22-
// max-width: fit-content;
23-
//}
24-
//
25-
//// 搜索框
26-
//#docsearch-container > button {
27-
// border-radius: 5px;
28-
//}
29-
//
30-
//.code-group__nav-tab-active {
31-
// color: var(--c-brand)
32-
//}
33-
//
34-
//.open-info-div {
35-
// text-align: center;
36-
// align-content: center;
37-
//
38-
// a {
39-
// margin: 5px;
40-
// }
41-
//}
42-
//
43-
//
44-
//// 全站主题色
45-
//:root {
46-
// // brand colors
47-
// // --c-brand: #3eaf7c;
48-
// // --c-brand-light: #4abf8a;
49-
//
50-
// --c-brand: #4ce9ad;
51-
// --c-brand-light: #42b983;
52-
//
53-
// // background colors
54-
// --c-bg: #ffffff;
55-
// --c-bg-light: #f3f4f5;
56-
// --c-bg-lighter: #eeeeee;
57-
// --c-bg-navbar: var(--c-bg);
58-
// --c-bg-sidebar: var(--c-bg);
59-
// --c-bg-arrow: #cccccc;
60-
//
61-
// // text colors
62-
// --c-text: #2c3e50;
63-
// --c-text-accent: var(--c-brand);
64-
// --c-text-light: #3a5169;
65-
// --c-text-lighter: #4e6e8e;
66-
// --c-text-lightest: #6a8bad;
67-
// --c-text-quote: #999999;
68-
//
69-
// // border colors
70-
// --c-border: #eaecef;
71-
// --c-border-dark: #dfe2e5;
72-
//
73-
// // custom container colors
74-
// --c-tip: #42b983;
75-
// --c-tip-bg: var(--c-bg-light);
76-
// --c-tip-title: var(--c-text);
77-
// --c-tip-text: var(--c-text);
78-
// --c-tip-text-accent: var(--c-text-accent);
79-
// --c-warning: #e7c000;
80-
// --c-warning-bg: #fffae3;
81-
// --c-warning-title: #ad9000;
82-
// --c-warning-text: #746000;
83-
// --c-warning-text-accent: var(--c-text);
84-
// --c-danger: #cc0000;
85-
// --c-danger-bg: #ffe0e0;
86-
// --c-danger-title: #990000;
87-
// --c-danger-text: #660000;
88-
// --c-danger-text-accent: var(--c-text);
89-
// --c-details-bg: #eeeeee;
90-
//
91-
// // badge component colors
92-
// --c-badge-tip: var(--c-tip);
93-
// --c-badge-warning: var(--c-warning);
94-
// --c-badge-danger: var(--c-danger);
95-
//
96-
// // transition vars
97-
// --t-color: 0.3s ease;
98-
// --t-transform: 0.3s ease;
99-
//
100-
// // code blocks vars
101-
// --code-bg-color: #282c34;
102-
// --code-hl-bg-color: rgba(0, 0, 0, 0.66);
103-
// --code-ln-color: #9e9e9e;
104-
// --code-ln-wrapper-width: 3.5rem;
105-
//
106-
// // font vars
107-
// --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
108-
// Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
109-
// --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
110-
//
111-
// // layout vars
112-
// --navbar-height: 3.6rem;
113-
// --navbar-padding-v: 0.7rem;
114-
// --navbar-padding-h: 1.5rem;
115-
// --sidebar-width: 20rem;
116-
// --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
117-
// --content-width: 740px;
118-
// --homepage-width: 960px;
119-
//}
120-
//
121-
//// plugin-back-to-top
122-
//.back-to-top {
123-
// --back-to-top-color: var(--c-brand);
124-
// --back-to-top-color-hover: var(--c-brand-light);
125-
//}
126-
//
127-
//// plugin-docsearch
128-
//.DocSearch {
129-
// --docsearch-primary-color: var(--c-brand);
130-
// --docsearch-text-color: var(--c-text);
131-
// --docsearch-highlight-color: var(--c-brand);
132-
// --docsearch-muted-color: var(--c-text-quote);
133-
// --docsearch-container-background: rgba(9, 10, 17, 0.8);
134-
// --docsearch-modal-background: var(--c-bg-light);
135-
// --docsearch-searchbox-background: var(--c-bg-lighter);
136-
// --docsearch-searchbox-focus-background: var(--c-bg);
137-
// --docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
138-
// --docsearch-hit-color: var(--c-text-light);
139-
// --docsearch-hit-active-color: var(--c-bg);
140-
// --docsearch-hit-background: var(--c-bg);
141-
// --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
142-
// --docsearch-footer-background: var(--c-bg);
143-
//}
144-
//
145-
//// plugin-external-link-icon
146-
//.external-link-icon {
147-
// --external-link-icon-color: var(--c-text-quote);
148-
//}
149-
//
150-
//// plugin-medium-zoom
151-
//.medium-zoom-overlay {
152-
// --medium-zoom-bg-color: var(--c-bg);
153-
//}
154-
//
155-
//// plugin-nprogress
156-
//#nprogress {
157-
// --nprogress-color: var(--c-brand);
158-
//}
159-
//
160-
//// plugin-pwa-popup
161-
//.pwa-popup {
162-
// --pwa-popup-text-color: var(--c-text);
163-
// --pwa-popup-bg-color: var(--c-bg);
164-
// --pwa-popup-border-color: var(--c-brand);
165-
// --pwa-popup-shadow: 0 4px 16px var(--c-brand);
166-
// --pwa-popup-btn-text-color: var(--c-bg);
167-
// --pwa-popup-btn-bg-color: var(--c-brand);
168-
// --pwa-popup-btn-hover-bg-color: var(--c-brand-light);
169-
//}
170-
//
171-
//// plugin-search
172-
//.search-box {
173-
// --search-bg-color: var(--c-bg);
174-
// --search-accent-color: var(--c-brand);
175-
// --search-text-color: var(--c-text);
176-
// --search-border-color: var(--c-border);
177-
//
178-
// --search-item-text-color: var(--c-text-lighter);
179-
// --search-item-focus-bg-color: var(--c-bg-light);
180-
//}
181-
182-
// 全局修改侧边栏样式
183-
.sidebar {
184-
position: fixed;
185-
top: 0;
186-
bottom: 0;
187-
left: 0;
188-
overflow-y: auto;
189-
width: var(--sidebar-width);
190-
margin: 0;
191-
// 侧边栏始终靠左
192-
-webkit-padding-start: calc(var(--sidebar-space) - var(--sidebar-width));
193-
padding-inline-start: calc(var(--sidebar-space) - var(--sidebar-width));
194-
background: var(--sidebar-bg-color);
195-
box-shadow: 2px 0 8px var(--card-shadow);
196-
font-size: 15px;
197-
transition: background var(--color-transition), box-shadow var(--color-transition), padding var(--transform-transition), transform var(--transform-transition);
198-
-webkit-backdrop-filter: saturate(150%) blur(12px);
199-
backdrop-filter: saturate(150%) blur(12px);
200-
scrollbar-color: var(--theme-color) var(--border-color);
201-
scrollbar-width: thin;
202-
}
1+
/* 此处自定义样式，对主题进行覆盖 */
2+
3+
// 全站主题色
4+
:root {
5+
// brand colors
6+
// --c-brand: #3eaf7c;
7+
// --c-brand-light: #4abf8a;
8+
9+
--c-brand: #4ce9ad;
10+
--c-brand-light: #42b983;
11+
12+
// background colors
13+
--c-bg: #ffffff;
14+
--c-bg-light: #f3f4f5;
15+
--c-bg-lighter: #eeeeee;
16+
--c-bg-navbar: var(--c-bg);
17+
--c-bg-sidebar: var(--c-bg);
18+
--c-bg-arrow: #cccccc;
19+
20+
// text colors
21+
--c-text: #2c3e50;
22+
--c-text-accent: var(--c-brand);
23+
--c-text-light: #3a5169;
24+
--c-text-lighter: #4e6e8e;
25+
--c-text-lightest: #6a8bad;
26+
--c-text-quote: #999999;
27+
28+
// border colors
29+
--c-border: #eaecef;
30+
--c-border-dark: #dfe2e5;
31+
32+
// custom container colors
33+
--c-tip: #42b983;
34+
--c-tip-bg: var(--c-bg-light);
35+
--c-tip-title: var(--c-text);
36+
--c-tip-text: var(--c-text);
37+
--c-tip-text-accent: var(--c-text-accent);
38+
--c-warning: #e7c000;
39+
--c-warning-bg: #fffae3;
40+
--c-warning-title: #ad9000;
41+
--c-warning-text: #746000;
42+
--c-warning-text-accent: var(--c-text);
43+
--c-danger: #cc0000;
44+
--c-danger-bg: #ffe0e0;
45+
--c-danger-title: #990000;
46+
--c-danger-text: #660000;
47+
--c-danger-text-accent: var(--c-text);
48+
--c-details-bg: #eeeeee;
49+
50+
// badge component colors
51+
--c-badge-tip: var(--c-tip);
52+
--c-badge-warning: var(--c-warning);
53+
--c-badge-danger: var(--c-danger);
54+
55+
// transition vars
56+
--t-color: 0.3s ease;
57+
--t-transform: 0.3s ease;
58+
59+
// code blocks vars
60+
--code-bg-color: #282c34;
61+
--code-hl-bg-color: rgba(0, 0, 0, 0.66);
62+
--code-ln-color: #9e9e9e;
63+
--code-ln-wrapper-width: 3.5rem;
64+
65+
// font vars
66+
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
67+
Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
68+
--font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
69+
70+
// layout vars
71+
--navbar-height: 3.6rem;
72+
--navbar-padding-v: 0.7rem;
73+
--navbar-padding-h: 1.5rem;
74+
--sidebar-width: 20rem;
75+
--sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
76+
--content-width: 740px;
77+
--homepage-width: 960px;
78+
}
79+
80+
81+
// plugin-docsearch
82+
.DocSearch {
83+
--docsearch-primary-color: var(--c-brand);
84+
--docsearch-text-color: var(--c-text);
85+
--docsearch-highlight-color: var(--c-brand);
86+
--docsearch-muted-color: var(--c-text-quote);
87+
--docsearch-container-background: rgba(9, 10, 17, 0.8);
88+
--docsearch-modal-background: var(--c-bg-light);
89+
--docsearch-searchbox-background: var(--c-bg-lighter);
90+
--docsearch-searchbox-focus-background: var(--c-bg);
91+
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
92+
--docsearch-hit-color: var(--c-text-light);
93+
--docsearch-hit-active-color: var(--c-bg);
94+
--docsearch-hit-background: var(--c-bg);
95+
--docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
96+
--docsearch-footer-background: var(--c-bg);
97+
}
98+
99+
// plugin-external-link-icon
100+
.external-link-icon {
101+
--external-link-icon-color: var(--c-text-quote);
102+
}
103+
104+
// plugin-medium-zoom
105+
.medium-zoom-overlay {
106+
--medium-zoom-bg-color: var(--c-bg);
107+
}
108+
109+
// plugin-nprogress
110+
#nprogress {
111+
--nprogress-color: var(--c-brand);
112+
}
113+
114+
// plugin-pwa-popup
115+
.pwa-popup {
116+
--pwa-popup-text-color: var(--c-text);
117+
--pwa-popup-bg-color: var(--c-bg);
118+
--pwa-popup-border-color: var(--c-brand);
119+
--pwa-popup-shadow: 0 4px 16px var(--c-brand);
120+
--pwa-popup-btn-text-color: var(--c-bg);
121+
--pwa-popup-btn-bg-color: var(--c-brand);
122+
--pwa-popup-btn-hover-bg-color: var(--c-brand-light);
123+
}
124+
125+
// plugin-search
126+
.search-box {
127+
--search-bg-color: var(--c-bg);
128+
--search-accent-color: var(--c-brand);
129+
--search-text-color: var(--c-text);
130+
--search-border-color: var(--c-border);
131+
132+
--search-item-text-color: var(--c-text-lighter);
133+
--search-item-focus-bg-color: var(--c-bg-light);
134+
}

‎docs/.vuepress/styles/palette.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// 主题色
22
$theme-color: #2196f3;
3-
$sidebar-width: 20rem;
4-
$sidebar-mobile-width: 16rem;
5-
$content-width: 75rem;
3+
//$sidebar-width: 20rem;
4+
//$sidebar-mobile-width: 16rem;
5+
//$content-width: 75rem;
66
$home-page-width:80rem;

0 commit comments

Comments
 (0)