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