1
+ @import url (https://fonts.googleapis.com/css?family=Space+Mono:regular, italic, 700 , 700italic );
2
+ @import url (https://fonts.googleapis.com/css?family=Space+Grotesk:regular, italic, 700 , 700italic );
3
+
4
+ /* Customize default theme styling by overriding CSS variables:
5
+ https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
6
+ */
7
+
8
+ /* Layouts */
9
+
10
+ /*
11
+ :root {
12
+ --vp-layout-max-width: 1440px;
13
+ } */
14
+
15
+ .VPHero .clip {
16
+ white-space : pre;
17
+ max-width : 500px ;
18
+ }
19
+
20
+ /* Fonts */
21
+
22
+ : root {
23
+ /* Typography */
24
+ --vp-font-family-base : "Barlow" , "Inter var experimental" , "Inter var" ,
25
+ -apple-system, BlinkMacSystemFont, "Segoe UI" , Roboto, Oxygen, Ubuntu,
26
+ Cantarell, "Fira Sans" , "Droid Sans" , "Helvetica Neue" , sans-serif;
27
+
28
+ /* Code Snippet font */
29
+ --vp-font-family-mono : "Space Mono" , Menlo, Monaco, Consolas, "Courier New" ,
30
+ monospace;
31
+ }
32
+
33
+ /* Colors */
34
+ /**
35
+ * Colors
36
+ * -------------------------------------------------------------------------- */
37
+
38
+ : root {
39
+ --c-yellow-1 : # ffd859 ;
40
+ --c-yellow-2 : # f7d336 ;
41
+ --c-yellow-3 : # dec96e ;
42
+ --c-yellow-soft-1 : # ecb732 ;
43
+ --c-yellow-soft-2 : # c99513 ;
44
+
45
+ --c-teal : # 086367 ;
46
+ --c-teal-light : # 33898d ;
47
+
48
+ --c-white-dark : # f8f8f8 ;
49
+ --c-black-darker : # 0d121b ;
50
+ --c-black : # 111827 ;
51
+ --c-black-light : # 161f32 ;
52
+ --c-black-lighter : # 262a44 ;
53
+
54
+ --c-green-1 : # 52ce63 ;
55
+ --c-green-2 : # 8ae99c ;
56
+ --c-green-3 : # 51a256 ;
57
+ --c-green-soft : # 316334 ;
58
+
59
+ /* light theme is a bit different */
60
+ --vp-c-brand-1 : var (--vp-c-green-1 );
61
+ --vp-c-brand-2 : var (--vp-c-green-2 );
62
+ --vp-c-brand-3 : var (--vp-c-green-3 );
63
+ --vp-c-brand-soft : var (--vp-c-green-soft );
64
+
65
+ --c-text-dark-1 : # d9e6eb ;
66
+ --c-text-dark-2 : # c4dde6 ;
67
+ --c-text-dark-3 : # abc4cc ;
68
+ --c-text-light-1 : # 2c3e50 ;
69
+ --c-text-light-2 : # 476582 ;
70
+ --c-text-light-3 : # 90a4b7 ;
71
+
72
+ --vp-c-brand-dark : var (--c-green-soft );
73
+ --vp-c-brand-darker : var (--c-green-soft );
74
+ --vp-c-brand-dimm : rgba (100 , 108 , 255 , 0.08 );
75
+ --vp-c-brand-text : var (--c-text-light-1 );
76
+ --c-bg-accent : var (--c-white-dark );
77
+ --code-bg-color : var (--c-white-dark );
78
+ --code-inline-bg-color : var (--c-white-dark );
79
+ --code-font-family : 'dm' , source-code-pro, Menlo, Monaco, Consolas,
80
+ 'Courier New' , monospace;
81
+ --code-font-size : 16px ;
82
+
83
+ --vp-code-block-bg : var (--vp-c-bg-alt );
84
+ --vp-code-line-highlight-color : rgba (0 , 0 , 0 , 0.075 );
85
+ --vp-code-color : var (--vp-text-color );
86
+ }
87
+
88
+ html .dark : root {
89
+ /* --c-black: #ffffff;
90
+ --c-white: #000000; */
91
+ /* --c-divider-light: rgba(60, 60, 67, 0.12);
92
+ --c-divider-dark: rgba(84, 84, 88, 0.48); */
93
+ /* --c-brand-light: var(--c-yellow-light); */
94
+
95
+ --vp-c-brand-1 : var (--c-yellow-1 );
96
+ --vp-c-brand-2 : var (--c-yellow-2 );
97
+ --vp-c-brand-3 : var (--c-yellow-3 );
98
+
99
+ --vp-c-bg-alpha-with-backdrop : rgba (20 , 25 , 36 , 0.7 );
100
+ --vp-c-bg-alpha-without-backdrop : rgba (20 , 25 , 36 , 0.9 );
101
+
102
+ --vp-code-line-highlight-color : rgba (0 , 0 , 0 , 0.5 );
103
+
104
+ --vp-c-text-1 : var (--c-text-dark-1 );
105
+ --vp-c-brand-text : var (--c-text-light-1 );
106
+ --c-text-light : var (--c-text-dark-2 );
107
+ --c-text-lighter : var (--c-text-dark-3 );
108
+ --c-divider : var (--c-divider-dark );
109
+ --c-bg-accent : var (--c-black-light );
110
+ /* --vp-code-inline-bg: var(--vp-c-black-light); */
111
+
112
+ --vp-c-bg : var (--c-black );
113
+ --vp-c-bg-soft : var (--c-black-light );
114
+ --vp-c-bg-soft-up : var (--c-black-lighter );
115
+ --vp-c-bg-mute : var (--c-black-light );
116
+ --vp-c-bg-soft-mute : var (--c-black-lighter );
117
+ --vp-c-bg-alt : # 0d121b ;
118
+ --vp-c-bg-elv : var (--vp-c-bg-soft );
119
+ --vp-c-bg-elv-mute : var (--vp-c-bg-soft-mute );
120
+ --vp-c-mute : var (--vp-c-bg-mute );
121
+ --vp-c-mute-dark : var (--c-black-lighter );
122
+ --vp-c-mute-darker : var (--c-black-darker );
123
+
124
+ --vp-home-hero-name-background : -webkit-linear-gradient (78deg ,
125
+ var (--c-yellow-2 ) 30% ,
126
+ var (--c-green-3 ));
127
+ }
128
+
129
+ html .dark .DocSearch {
130
+ --docsearch-hit-active-color : var (--c-text-light-1 );
131
+ }
132
+
133
+ /**
134
+ * Component: Button
135
+ * -------------------------------------------------------------------------- */
136
+
137
+ : root {
138
+ --vp-button-brand-border : var (--c-yellow-soft-1 );
139
+ --vp-button-brand-text : var (--c-black );
140
+ --vp-button-brand-bg : var (--c-yellow-1 );
141
+ --vp-button-brand-hover-border : var (--c-yellow-2 );
142
+ --vp-button-brand-hover-text : var (--c-black-darker );
143
+ --vp-button-brand-hover-bg : var (--c-yellow-2 );
144
+ --vp-button-brand-active-border : var (--c-yellow-soft-1 );
145
+ --vp-button-brand-active-text : var (--c-black-darker );
146
+ --vp-button-brand-active-bg : var (--vp-button-brand-bg );
147
+ }
148
+
149
+ /**
150
+ * Component: Home
151
+ * -------------------------------------------------------------------------- */
152
+
153
+ : root {
154
+ --vp-home-hero-name-color : transparent;
155
+ --vp-home-hero-name-background : linear-gradient (292deg ,
156
+ var (--c-text-light-2 ) 50% ,
157
+ var (--c-green-2 ));
158
+ --vp-home-hero-image-background-image : linear-gradient (15deg ,
159
+ var (--c-yellow-2 ) 35% ,
160
+ var (--c-text-light-2 ) 15% );
161
+ --vp-home-hero-image-filter : blur (40px );
162
+ }
163
+
164
+ .VPHero .VPImage .image-src {
165
+ max-height : 192px ;
166
+ }
167
+
168
+ @media (min-width : 640px ) {
169
+ : root {
170
+ --vp-home-hero-image-filter : blur (56px );
171
+ }
172
+
173
+ .VPHero .VPImage .image-src {
174
+ max-height : 256px ;
175
+ }
176
+ }
177
+
178
+ @media (min-width : 960px ) {
179
+ : root {
180
+ --vp-home-hero-image-filter : blur (72px );
181
+ }
182
+
183
+ .VPHero .VPImage .image-src {
184
+ max-height : 320px ;
185
+ }
186
+ }
187
+
188
+ .become-sponsor {
189
+ font-size : 0.9em ;
190
+ font-weight : 700 ;
191
+ width : auto;
192
+ text-align : center;
193
+ background-color : transparent;
194
+ padding : 0.75em 2em ;
195
+ border-radius : 2em ;
196
+ transition : all 0.15s ease;
197
+ box-sizing : border-box;
198
+ border : 2px solid var (--c-yellow-2 );
199
+ }
200
+
201
+ .become-sponsor : hover {
202
+ background-color : var (--c-yellow-1 );
203
+ text-decoration : none;
204
+ border-color : var (--c-yellow-1 );
205
+ color : var (--c-text-light-1 );
206
+ }
207
+
208
+ .vp-doc a {
209
+ text-decoration : none;
210
+ }
211
+
212
+ .vp-doc a : hover {
213
+ text-decoration : underline;
214
+ }
215
+
216
+ .sponsors-top .become-sponsor {
217
+ font-size : 0.75em ;
218
+ padding : 0.2em ;
219
+ width : auto;
220
+ max-width : 150px ;
221
+ }
222
+
223
+ kbd {
224
+ display : inline-block;
225
+ padding : 3px 5px ;
226
+ font-size : 0.65em ;
227
+ color : var (--vp-c-text-1 );
228
+ vertical-align : middle;
229
+ background-color : var (--vp-c-bg-mute );
230
+ border : solid 1px var (--vp-c-bg-soft-mute );
231
+ border-radius : 6px ;
232
+ box-shadow : inset 0 -1px 0 var (--vp-c-bg-soft-mute );
233
+ line-height : 0.95em ;
234
+ }
0 commit comments