jekyll-vitepress-theme 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +21 -0
  3. data/README.md +93 -0
  4. data/_includes/doc_footer.html +184 -0
  5. data/_includes/head.html +98 -0
  6. data/_includes/home.html +315 -0
  7. data/_includes/local_nav.html +23 -0
  8. data/_includes/nav.html +232 -0
  9. data/_includes/search.html +14 -0
  10. data/_includes/sidebar.html +47 -0
  11. data/_includes/vp_slots/doc_footer.html +0 -0
  12. data/_includes/vp_slots/head.html +1 -0
  13. data/_includes/vp_slots/layout_bottom.html +0 -0
  14. data/_layouts/default.html +127 -0
  15. data/_layouts/home.html +5 -0
  16. data/assets/css/vitepress-components.css +1524 -0
  17. data/assets/css/vitepress-core.css +2149 -0
  18. data/assets/css/vitepress-overrides.css +1408 -0
  19. data/assets/css/vp-icons.css +24 -0
  20. data/assets/images/favicon/apple-touch-icon.png +0 -0
  21. data/assets/images/favicon/favicon-96x96.png +0 -0
  22. data/assets/images/favicon/favicon.ico +0 -0
  23. data/assets/images/favicon/site.webmanifest +21 -0
  24. data/assets/images/favicon/web-app-manifest-192x192.png +0 -0
  25. data/assets/images/favicon/web-app-manifest-512x512.png +0 -0
  26. data/assets/images/file-icons/css.svg +1 -0
  27. data/assets/images/file-icons/default.svg +1 -0
  28. data/assets/images/file-icons/docker.svg +1 -0
  29. data/assets/images/file-icons/env.svg +1 -0
  30. data/assets/images/file-icons/go.svg +1 -0
  31. data/assets/images/file-icons/html.svg +1 -0
  32. data/assets/images/file-icons/java.svg +1 -0
  33. data/assets/images/file-icons/javascript.svg +1 -0
  34. data/assets/images/file-icons/json.svg +1 -0
  35. data/assets/images/file-icons/kotlin.svg +1 -0
  36. data/assets/images/file-icons/make.svg +1 -0
  37. data/assets/images/file-icons/markdown.svg +1 -0
  38. data/assets/images/file-icons/php.svg +1 -0
  39. data/assets/images/file-icons/python.svg +1 -0
  40. data/assets/images/file-icons/ruby.svg +1 -0
  41. data/assets/images/file-icons/rust.svg +1 -0
  42. data/assets/images/file-icons/shell.svg +1 -0
  43. data/assets/images/file-icons/sql.svg +1 -0
  44. data/assets/images/file-icons/text.svg +1 -0
  45. data/assets/images/file-icons/toml.svg +1 -0
  46. data/assets/images/file-icons/typescript.svg +1 -0
  47. data/assets/images/file-icons/vue.svg +1 -0
  48. data/assets/images/file-icons/xml.svg +1 -0
  49. data/assets/images/file-icons/yaml-dark.svg +1 -0
  50. data/assets/images/file-icons/yaml.svg +1 -0
  51. data/assets/images/logo.svg +337 -0
  52. data/assets/images/social-icons/bitbucket.svg +1 -0
  53. data/assets/images/social-icons/bluesky.svg +1 -0
  54. data/assets/images/social-icons/devdotto.svg +1 -0
  55. data/assets/images/social-icons/discord.svg +1 -0
  56. data/assets/images/social-icons/dribbble.svg +1 -0
  57. data/assets/images/social-icons/facebook.svg +1 -0
  58. data/assets/images/social-icons/github.svg +1 -0
  59. data/assets/images/social-icons/gitlab.svg +1 -0
  60. data/assets/images/social-icons/instagram.svg +1 -0
  61. data/assets/images/social-icons/linkedin.svg +1 -0
  62. data/assets/images/social-icons/mastodon.svg +1 -0
  63. data/assets/images/social-icons/medium.svg +1 -0
  64. data/assets/images/social-icons/npm.svg +1 -0
  65. data/assets/images/social-icons/reddit.svg +1 -0
  66. data/assets/images/social-icons/rss.svg +1 -0
  67. data/assets/images/social-icons/slack.svg +1 -0
  68. data/assets/images/social-icons/stackoverflow.svg +1 -0
  69. data/assets/images/social-icons/telegram.svg +1 -0
  70. data/assets/images/social-icons/twitch.svg +1 -0
  71. data/assets/images/social-icons/twitter.svg +1 -0
  72. data/assets/images/social-icons/x.svg +1 -0
  73. data/assets/images/social-icons/youtube.svg +1 -0
  74. data/assets/images/theme/vitepress-logo-large.svg +340 -0
  75. data/assets/images/theme/vitepress-logo-mini.svg +337 -0
  76. data/assets/js/vitepress-theme.js +1301 -0
  77. data/lib/jekyll/vitepress_theme/hooks.rb +111 -0
  78. data/lib/jekyll/vitepress_theme/version.rb +5 -0
  79. data/lib/jekyll-vitepress-theme.rb +3 -0
  80. metadata +143 -0
@@ -0,0 +1,2149 @@
1
+ @font-face {
2
+ font-family: 'Punctuation SC';
3
+ font-weight: 400;
4
+ src:
5
+ local('PingFang SC Regular'), local('Noto Sans CJK SC'),
6
+ local('Microsoft YaHei');
7
+ unicode-range:
8
+ U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
9
+ U+007E, U+002F;
10
+ }
11
+
12
+
13
+ @font-face {
14
+ font-family: 'Punctuation SC';
15
+ font-weight: 500;
16
+ src:
17
+ local('PingFang SC Medium'), local('Noto Sans CJK SC'),
18
+ local('Microsoft YaHei');
19
+ unicode-range:
20
+ U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
21
+ U+007E, U+002F;
22
+ }
23
+
24
+
25
+ @font-face {
26
+ font-family: 'Punctuation SC';
27
+ font-weight: 600;
28
+ src:
29
+ local('PingFang SC Semibold'), local('Noto Sans CJK SC Bold'),
30
+ local('Microsoft YaHei Bold');
31
+ unicode-range:
32
+ U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
33
+ U+007E, U+002F;
34
+ }
35
+
36
+
37
+ @font-face {
38
+ font-family: 'Punctuation SC';
39
+ font-weight: 700;
40
+ src:
41
+ local('PingFang SC Semibold'), local('Noto Sans CJK SC Bold'),
42
+ local('Microsoft YaHei Bold');
43
+ unicode-range:
44
+ U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7,
45
+ U+007E, U+002F;
46
+ }
47
+
48
+
49
+ /**
50
+ * Colors: Solid
51
+ * -------------------------------------------------------------------------- */
52
+
53
+ :root {
54
+ --vp-c-white: #ffffff;
55
+ --vp-c-black: #000000;
56
+
57
+ --vp-c-neutral: var(--vp-c-black);
58
+ --vp-c-neutral-inverse: var(--vp-c-white);
59
+ }
60
+
61
+ .dark {
62
+ --vp-c-neutral: var(--vp-c-white);
63
+ --vp-c-neutral-inverse: var(--vp-c-black);
64
+ }
65
+
66
+ /**
67
+ * Colors: Palette
68
+ *
69
+ * The primitive colors used for accent colors. These colors are referenced
70
+ * by functional colors such as "Text", "Background", or "Brand".
71
+ *
72
+ * Each colors have exact same color scale system with 3 levels of solid
73
+ * colors with different brightness, and 1 soft color.
74
+ *
75
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
76
+ * satisfy the contrast ratio against when used on top of `XXX-soft`.
77
+ *
78
+ * - `XXX-2`: The color used mainly for hover state of the button.
79
+ *
80
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
81
+ * It must satisfy the contrast ratio with pure white (#ffffff) text on
82
+ * top of it.
83
+ *
84
+ * - `XXX-soft`: The color used for subtle background such as custom container
85
+ * or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
86
+ * on top of it.
87
+ *
88
+ * The soft color must be semi transparent alpha channel. This is crucial
89
+ * because it allows adding multiple "soft" colors on top of each other
90
+ * to create a accent, such as when having inline code block inside
91
+ * custom containers.
92
+ * -------------------------------------------------------------------------- */
93
+
94
+ :root {
95
+ --vp-c-gray-1: #dddde3;
96
+ --vp-c-gray-2: #e4e4e9;
97
+ --vp-c-gray-3: #ebebef;
98
+ --vp-c-gray-soft: rgba(142, 150, 170, 0.14);
99
+
100
+ --vp-c-indigo-1: #3451b2;
101
+ --vp-c-indigo-2: #3a5ccc;
102
+ --vp-c-indigo-3: #5672cd;
103
+ --vp-c-indigo-soft: rgba(100, 108, 255, 0.14);
104
+
105
+ --vp-c-purple-1: #6f42c1;
106
+ --vp-c-purple-2: #7e4cc9;
107
+ --vp-c-purple-3: #8e5cd9;
108
+ --vp-c-purple-soft: rgba(159, 122, 234, 0.14);
109
+
110
+ --vp-c-green-1: #18794e;
111
+ --vp-c-green-2: #299764;
112
+ --vp-c-green-3: #30a46c;
113
+ --vp-c-green-soft: rgba(16, 185, 129, 0.14);
114
+
115
+ --vp-c-yellow-1: #915930;
116
+ --vp-c-yellow-2: #946300;
117
+ --vp-c-yellow-3: #9f6a00;
118
+ --vp-c-yellow-soft: rgba(234, 179, 8, 0.14);
119
+
120
+ --vp-c-red-1: #b8272c;
121
+ --vp-c-red-2: #d5393e;
122
+ --vp-c-red-3: #e0575b;
123
+ --vp-c-red-soft: rgba(244, 63, 94, 0.14);
124
+
125
+ --vp-c-sponsor: #db2777;
126
+ }
127
+
128
+ .dark {
129
+ --vp-c-gray-1: #515c67;
130
+ --vp-c-gray-2: #414853;
131
+ --vp-c-gray-3: #32363f;
132
+ --vp-c-gray-soft: rgba(101, 117, 133, 0.16);
133
+
134
+ --vp-c-indigo-1: #a8b1ff;
135
+ --vp-c-indigo-2: #5c73e7;
136
+ --vp-c-indigo-3: #3e63dd;
137
+ --vp-c-indigo-soft: rgba(100, 108, 255, 0.16);
138
+
139
+ --vp-c-purple-1: #c8abfa;
140
+ --vp-c-purple-2: #a879e6;
141
+ --vp-c-purple-3: #8e5cd9;
142
+ --vp-c-purple-soft: rgba(159, 122, 234, 0.16);
143
+
144
+ --vp-c-green-1: #3dd68c;
145
+ --vp-c-green-2: #30a46c;
146
+ --vp-c-green-3: #298459;
147
+ --vp-c-green-soft: rgba(16, 185, 129, 0.16);
148
+
149
+ --vp-c-yellow-1: #f9b44e;
150
+ --vp-c-yellow-2: #da8b17;
151
+ --vp-c-yellow-3: #a46a0a;
152
+ --vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
153
+
154
+ --vp-c-red-1: #f66f81;
155
+ --vp-c-red-2: #f14158;
156
+ --vp-c-red-3: #b62a3c;
157
+ --vp-c-red-soft: rgba(244, 63, 94, 0.16);
158
+ }
159
+
160
+ /**
161
+ * Colors: Background
162
+ *
163
+ * - `bg`: The bg color used for main screen.
164
+ *
165
+ * - `bg-alt`: The alternative bg color used in places such as "sidebar",
166
+ * or "code block".
167
+ *
168
+ * - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
169
+ * such as "dialog".
170
+ *
171
+ * - `bg-soft`: The bg color to slightly distinguish some components from
172
+ * the page. Used for things like "carbon ads" or "table".
173
+ * -------------------------------------------------------------------------- */
174
+
175
+ :root {
176
+ --vp-c-bg: #ffffff;
177
+ --vp-c-bg-alt: #f6f6f7;
178
+ --vp-c-bg-elv: #ffffff;
179
+ --vp-c-bg-soft: #f6f6f7;
180
+ }
181
+
182
+ .dark {
183
+ --vp-c-bg: #1b1b1f;
184
+ --vp-c-bg-alt: #161618;
185
+ --vp-c-bg-elv: #202127;
186
+ --vp-c-bg-soft: #202127;
187
+ }
188
+
189
+ /**
190
+ * Colors: Borders
191
+ *
192
+ * - `divider`: This is used for separators. This is used to divide sections
193
+ * within the same components, such as having separator on "h2" heading.
194
+ *
195
+ * - `border`: This is designed for borders on interactive components.
196
+ * For example this should be used for a button outline.
197
+ *
198
+ * - `gutter`: This is used to divide components in the page. For example
199
+ * the header and the lest of the page.
200
+ * -------------------------------------------------------------------------- */
201
+
202
+ :root {
203
+ --vp-c-border: #c2c2c4;
204
+ --vp-c-divider: #e2e2e3;
205
+ --vp-c-gutter: #e2e2e3;
206
+ }
207
+
208
+ .dark {
209
+ --vp-c-border: #3c3f44;
210
+ --vp-c-divider: #2e2e32;
211
+ --vp-c-gutter: #000000;
212
+ }
213
+
214
+ /**
215
+ * Colors: Text
216
+ *
217
+ * - `text-1`: Used for primary text.
218
+ *
219
+ * - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
220
+ *
221
+ * - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
222
+ * -------------------------------------------------------------------------- */
223
+
224
+ :root {
225
+ --vp-c-text-1: #3c3c43;
226
+ --vp-c-text-2: #67676c;
227
+ --vp-c-text-3: #929295;
228
+ }
229
+
230
+ .dark {
231
+ --vp-c-text-1: #dfdfd6;
232
+ --vp-c-text-2: #98989f;
233
+ --vp-c-text-3: #6a6a71;
234
+ }
235
+
236
+ /**
237
+ * Colors: Function
238
+ *
239
+ * - `default`: The color used purely for subtle indication without any
240
+ * special meanings attached to it such as bg color for menu hover state.
241
+ *
242
+ * - `brand`: Used for primary brand colors, such as link text, button with
243
+ * brand theme, etc.
244
+ *
245
+ * - `tip`: Used to indicate useful information. The default theme uses the
246
+ * brand color for this by default.
247
+ *
248
+ * - `warning`: Used to indicate warning to the users. Used in custom
249
+ * container, badges, etc.
250
+ *
251
+ * - `danger`: Used to show error, or dangerous message to the users. Used
252
+ * in custom container, badges, etc.
253
+ *
254
+ * To understand the scaling system, refer to "Colors: Palette" section.
255
+ * -------------------------------------------------------------------------- */
256
+
257
+ :root {
258
+ --vp-c-default-1: var(--vp-c-gray-1);
259
+ --vp-c-default-2: var(--vp-c-gray-2);
260
+ --vp-c-default-3: var(--vp-c-gray-3);
261
+ --vp-c-default-soft: var(--vp-c-gray-soft);
262
+
263
+ --vp-c-brand-1: var(--vp-c-indigo-1);
264
+ --vp-c-brand-2: var(--vp-c-indigo-2);
265
+ --vp-c-brand-3: var(--vp-c-indigo-3);
266
+ --vp-c-brand-soft: var(--vp-c-indigo-soft);
267
+
268
+ /* DEPRECATED: Use `--vp-c-brand-1` instead. */
269
+ --vp-c-brand: var(--vp-c-brand-1);
270
+
271
+ --vp-c-tip-1: var(--vp-c-brand-1);
272
+ --vp-c-tip-2: var(--vp-c-brand-2);
273
+ --vp-c-tip-3: var(--vp-c-brand-3);
274
+ --vp-c-tip-soft: var(--vp-c-brand-soft);
275
+
276
+ --vp-c-note-1: var(--vp-c-brand-1);
277
+ --vp-c-note-2: var(--vp-c-brand-2);
278
+ --vp-c-note-3: var(--vp-c-brand-3);
279
+ --vp-c-note-soft: var(--vp-c-brand-soft);
280
+
281
+ --vp-c-success-1: var(--vp-c-green-1);
282
+ --vp-c-success-2: var(--vp-c-green-2);
283
+ --vp-c-success-3: var(--vp-c-green-3);
284
+ --vp-c-success-soft: var(--vp-c-green-soft);
285
+
286
+ --vp-c-important-1: var(--vp-c-purple-1);
287
+ --vp-c-important-2: var(--vp-c-purple-2);
288
+ --vp-c-important-3: var(--vp-c-purple-3);
289
+ --vp-c-important-soft: var(--vp-c-purple-soft);
290
+
291
+ --vp-c-warning-1: var(--vp-c-yellow-1);
292
+ --vp-c-warning-2: var(--vp-c-yellow-2);
293
+ --vp-c-warning-3: var(--vp-c-yellow-3);
294
+ --vp-c-warning-soft: var(--vp-c-yellow-soft);
295
+
296
+ --vp-c-danger-1: var(--vp-c-red-1);
297
+ --vp-c-danger-2: var(--vp-c-red-2);
298
+ --vp-c-danger-3: var(--vp-c-red-3);
299
+ --vp-c-danger-soft: var(--vp-c-red-soft);
300
+
301
+ --vp-c-caution-1: var(--vp-c-red-1);
302
+ --vp-c-caution-2: var(--vp-c-red-2);
303
+ --vp-c-caution-3: var(--vp-c-red-3);
304
+ --vp-c-caution-soft: var(--vp-c-red-soft);
305
+ }
306
+
307
+ /**
308
+ * Typography
309
+ * -------------------------------------------------------------------------- */
310
+
311
+ :root {
312
+ --vp-font-family-base:
313
+ 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
314
+ 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
315
+ --vp-font-family-mono:
316
+ ui-monospace, 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono',
317
+ 'Courier New', monospace;
318
+ font-optical-sizing: auto;
319
+ }
320
+
321
+ :root:where(:lang(zh)) {
322
+ --vp-font-family-base:
323
+ 'Punctuation SC', 'Inter', ui-sans-serif, system-ui, sans-serif,
324
+ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
325
+ }
326
+
327
+ /**
328
+ * Shadows
329
+ * -------------------------------------------------------------------------- */
330
+
331
+ :root {
332
+ --vp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
333
+ --vp-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
334
+ --vp-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
335
+ --vp-shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
336
+ --vp-shadow-5:
337
+ 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
338
+ }
339
+
340
+ /**
341
+ * Z-indexes
342
+ * -------------------------------------------------------------------------- */
343
+
344
+ :root {
345
+ --vp-z-index-footer: 10;
346
+ --vp-z-index-local-nav: 20;
347
+ --vp-z-index-nav: 30;
348
+ --vp-z-index-layout-top: 40;
349
+ --vp-z-index-backdrop: 50;
350
+ --vp-z-index-sidebar: 60;
351
+ }
352
+
353
+ @media (min-width: 960px) {
354
+ :root {
355
+ --vp-z-index-sidebar: 25;
356
+ }
357
+ }
358
+
359
+ /**
360
+ * Layouts
361
+ * -------------------------------------------------------------------------- */
362
+
363
+ :root {
364
+ --vp-layout-max-width: 1440px;
365
+ }
366
+
367
+ /**
368
+ * Component: Header Anchor
369
+ * -------------------------------------------------------------------------- */
370
+
371
+ :root {
372
+ --vp-header-anchor-symbol: '#';
373
+ }
374
+
375
+ /**
376
+ * Component: Code
377
+ * -------------------------------------------------------------------------- */
378
+
379
+ :root {
380
+ --vp-code-line-height: 1.7;
381
+ --vp-code-font-size: 0.875em;
382
+ --vp-code-color: var(--vp-c-brand-1);
383
+ --vp-code-link-color: var(--vp-c-brand-1);
384
+ --vp-code-link-hover-color: var(--vp-c-brand-2);
385
+ --vp-code-bg: var(--vp-c-default-soft);
386
+
387
+ --vp-code-block-color: var(--vp-c-text-2);
388
+ --vp-code-block-bg: var(--vp-c-bg-alt);
389
+ --vp-code-block-divider-color: var(--vp-c-gutter);
390
+
391
+ --vp-code-lang-color: var(--vp-c-text-2);
392
+
393
+ --vp-code-line-highlight-color: var(--vp-c-default-soft);
394
+ --vp-code-line-number-color: var(--vp-c-text-2);
395
+
396
+ --vp-code-line-diff-add-color: var(--vp-c-success-soft);
397
+ --vp-code-line-diff-add-symbol-color: var(--vp-c-success-1);
398
+
399
+ --vp-code-line-diff-remove-color: var(--vp-c-danger-soft);
400
+ --vp-code-line-diff-remove-symbol-color: var(--vp-c-danger-1);
401
+
402
+ --vp-code-line-warning-color: var(--vp-c-warning-soft);
403
+ --vp-code-line-error-color: var(--vp-c-danger-soft);
404
+
405
+ --vp-code-copy-code-border-color: var(--vp-c-divider);
406
+ --vp-code-copy-code-bg: var(--vp-c-bg-soft);
407
+ --vp-code-copy-code-hover-border-color: var(--vp-c-divider);
408
+ --vp-code-copy-code-hover-bg: var(--vp-c-bg);
409
+ --vp-code-copy-code-active-text: var(--vp-c-text-2);
410
+ --vp-code-copy-copied-text-content: 'Copied';
411
+
412
+ --vp-code-tab-divider: var(--vp-code-block-divider-color);
413
+ --vp-code-tab-text-color: var(--vp-c-text-2);
414
+ --vp-code-tab-bg: var(--vp-code-block-bg);
415
+ --vp-code-tab-hover-text-color: var(--vp-c-text-1);
416
+ --vp-code-tab-active-text-color: var(--vp-c-text-1);
417
+ --vp-code-tab-active-bar-color: var(--vp-c-brand-1);
418
+ }
419
+
420
+ :lang(es),
421
+ :lang(pt) {
422
+ --vp-code-copy-copied-text-content: 'Copiado';
423
+ }
424
+ :lang(fa) {
425
+ --vp-code-copy-copied-text-content: 'کپی شد';
426
+ }
427
+ :lang(ko) {
428
+ --vp-code-copy-copied-text-content: '복사됨';
429
+ }
430
+ :lang(ru) {
431
+ --vp-code-copy-copied-text-content: 'Скопировано';
432
+ }
433
+ :lang(zh) {
434
+ --vp-code-copy-copied-text-content: '已复制';
435
+ }
436
+
437
+ /**
438
+ * Component: Button
439
+ * -------------------------------------------------------------------------- */
440
+
441
+ :root {
442
+ --vp-button-brand-border: transparent;
443
+ --vp-button-brand-text: var(--vp-c-white);
444
+ --vp-button-brand-bg: var(--vp-c-brand-3);
445
+ --vp-button-brand-hover-border: transparent;
446
+ --vp-button-brand-hover-text: var(--vp-c-white);
447
+ --vp-button-brand-hover-bg: var(--vp-c-brand-2);
448
+ --vp-button-brand-active-border: transparent;
449
+ --vp-button-brand-active-text: var(--vp-c-white);
450
+ --vp-button-brand-active-bg: var(--vp-c-brand-1);
451
+
452
+ --vp-button-alt-border: transparent;
453
+ --vp-button-alt-text: var(--vp-c-text-1);
454
+ --vp-button-alt-bg: var(--vp-c-default-3);
455
+ --vp-button-alt-hover-border: transparent;
456
+ --vp-button-alt-hover-text: var(--vp-c-text-1);
457
+ --vp-button-alt-hover-bg: var(--vp-c-default-2);
458
+ --vp-button-alt-active-border: transparent;
459
+ --vp-button-alt-active-text: var(--vp-c-text-1);
460
+ --vp-button-alt-active-bg: var(--vp-c-default-1);
461
+
462
+ --vp-button-sponsor-border: var(--vp-c-text-2);
463
+ --vp-button-sponsor-text: var(--vp-c-text-2);
464
+ --vp-button-sponsor-bg: transparent;
465
+ --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
466
+ --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
467
+ --vp-button-sponsor-hover-bg: transparent;
468
+ --vp-button-sponsor-active-border: var(--vp-c-sponsor);
469
+ --vp-button-sponsor-active-text: var(--vp-c-sponsor);
470
+ --vp-button-sponsor-active-bg: transparent;
471
+ }
472
+
473
+ /**
474
+ * Component: Custom Block
475
+ * -------------------------------------------------------------------------- */
476
+
477
+ :root {
478
+ --vp-custom-block-font-size: 14px;
479
+ --vp-custom-block-code-font-size: 13px;
480
+
481
+ --vp-custom-block-info-border: transparent;
482
+ --vp-custom-block-info-text: var(--vp-c-text-1);
483
+ --vp-custom-block-info-bg: var(--vp-c-default-soft);
484
+ --vp-custom-block-info-code-bg: var(--vp-c-default-soft);
485
+
486
+ --vp-custom-block-note-border: transparent;
487
+ --vp-custom-block-note-text: var(--vp-c-text-1);
488
+ --vp-custom-block-note-bg: var(--vp-c-default-soft);
489
+ --vp-custom-block-note-code-bg: var(--vp-c-default-soft);
490
+
491
+ --vp-custom-block-tip-border: transparent;
492
+ --vp-custom-block-tip-text: var(--vp-c-text-1);
493
+ --vp-custom-block-tip-bg: var(--vp-c-tip-soft);
494
+ --vp-custom-block-tip-code-bg: var(--vp-c-tip-soft);
495
+
496
+ --vp-custom-block-important-border: transparent;
497
+ --vp-custom-block-important-text: var(--vp-c-text-1);
498
+ --vp-custom-block-important-bg: var(--vp-c-important-soft);
499
+ --vp-custom-block-important-code-bg: var(--vp-c-important-soft);
500
+
501
+ --vp-custom-block-warning-border: transparent;
502
+ --vp-custom-block-warning-text: var(--vp-c-text-1);
503
+ --vp-custom-block-warning-bg: var(--vp-c-warning-soft);
504
+ --vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);
505
+
506
+ --vp-custom-block-danger-border: transparent;
507
+ --vp-custom-block-danger-text: var(--vp-c-text-1);
508
+ --vp-custom-block-danger-bg: var(--vp-c-danger-soft);
509
+ --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);
510
+
511
+ --vp-custom-block-caution-border: transparent;
512
+ --vp-custom-block-caution-text: var(--vp-c-text-1);
513
+ --vp-custom-block-caution-bg: var(--vp-c-caution-soft);
514
+ --vp-custom-block-caution-code-bg: var(--vp-c-caution-soft);
515
+
516
+ --vp-custom-block-details-border: var(--vp-custom-block-info-border);
517
+ --vp-custom-block-details-text: var(--vp-custom-block-info-text);
518
+ --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
519
+ --vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg);
520
+ }
521
+
522
+ /**
523
+ * Component: Input
524
+ * -------------------------------------------------------------------------- */
525
+
526
+ :root {
527
+ --vp-input-border-color: var(--vp-c-border);
528
+ --vp-input-bg-color: var(--vp-c-bg-alt);
529
+
530
+ --vp-input-switch-bg-color: var(--vp-c-default-soft);
531
+ }
532
+
533
+ /**
534
+ * Component: Nav
535
+ * -------------------------------------------------------------------------- */
536
+
537
+ :root {
538
+ --vp-nav-height: 64px;
539
+ --vp-nav-bg-color: var(--vp-c-bg);
540
+ --vp-nav-screen-bg-color: var(--vp-c-bg);
541
+ --vp-nav-logo-height: 24px;
542
+ }
543
+
544
+ .hide-nav {
545
+ --vp-nav-height: 0px;
546
+ }
547
+
548
+ .hide-nav .VPSidebar {
549
+ --vp-nav-height: 22px;
550
+ }
551
+
552
+ /**
553
+ * Component: Local Nav
554
+ * -------------------------------------------------------------------------- */
555
+
556
+ :root {
557
+ --vp-local-nav-bg-color: var(--vp-c-bg);
558
+ }
559
+
560
+ /**
561
+ * Component: Sidebar
562
+ * -------------------------------------------------------------------------- */
563
+
564
+ :root {
565
+ --vp-sidebar-width: 272px;
566
+ --vp-sidebar-bg-color: var(--vp-c-bg-alt);
567
+ }
568
+
569
+ /**
570
+ * Colors Backdrop
571
+ * -------------------------------------------------------------------------- */
572
+
573
+ :root {
574
+ --vp-backdrop-bg-color: rgba(0, 0, 0, 0.6);
575
+ }
576
+
577
+ /**
578
+ * Component: Home
579
+ * -------------------------------------------------------------------------- */
580
+
581
+ :root {
582
+ --vp-home-hero-name-color: var(--vp-c-brand-1);
583
+ --vp-home-hero-name-background: transparent;
584
+
585
+ --vp-home-hero-image-background-image: none;
586
+ --vp-home-hero-image-filter: none;
587
+ }
588
+
589
+ /**
590
+ * Component: Badge
591
+ * -------------------------------------------------------------------------- */
592
+
593
+ :root {
594
+ --vp-badge-info-border: transparent;
595
+ --vp-badge-info-text: var(--vp-c-text-2);
596
+ --vp-badge-info-bg: var(--vp-c-default-soft);
597
+
598
+ --vp-badge-tip-border: transparent;
599
+ --vp-badge-tip-text: var(--vp-c-tip-1);
600
+ --vp-badge-tip-bg: var(--vp-c-tip-soft);
601
+
602
+ --vp-badge-warning-border: transparent;
603
+ --vp-badge-warning-text: var(--vp-c-warning-1);
604
+ --vp-badge-warning-bg: var(--vp-c-warning-soft);
605
+
606
+ --vp-badge-danger-border: transparent;
607
+ --vp-badge-danger-text: var(--vp-c-danger-1);
608
+ --vp-badge-danger-bg: var(--vp-c-danger-soft);
609
+ }
610
+
611
+ /**
612
+ * Component: Carbon Ads
613
+ * -------------------------------------------------------------------------- */
614
+
615
+ :root {
616
+ --vp-carbon-ads-text-color: var(--vp-c-text-1);
617
+ --vp-carbon-ads-poweredby-color: var(--vp-c-text-2);
618
+ --vp-carbon-ads-bg-color: var(--vp-c-bg-soft);
619
+ --vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);
620
+ --vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1);
621
+ }
622
+
623
+ /**
624
+ * Component: Local Search
625
+ * -------------------------------------------------------------------------- */
626
+
627
+ :root {
628
+ --vp-local-search-bg: var(--vp-c-bg);
629
+ --vp-local-search-result-bg: var(--vp-c-bg);
630
+ --vp-local-search-result-border: var(--vp-c-divider);
631
+ --vp-local-search-result-selected-bg: var(--vp-c-bg);
632
+ --vp-local-search-result-selected-border: var(--vp-c-brand-1);
633
+ --vp-local-search-highlight-bg: var(--vp-c-brand-1);
634
+ --vp-local-search-highlight-text: var(--vp-c-neutral-inverse);
635
+ }
636
+ @layer __vitepress_base {
637
+ @media (prefers-reduced-motion: reduce) {
638
+ *,
639
+ ::before,
640
+ ::after {
641
+ animation-delay: -1ms !important;
642
+ animation-duration: 1ms !important;
643
+ animation-iteration-count: 1 !important;
644
+ background-attachment: initial !important;
645
+ scroll-behavior: auto !important;
646
+ transition-duration: 0s !important;
647
+ transition-delay: 0s !important;
648
+ }
649
+ }
650
+
651
+ *,
652
+ ::before,
653
+ ::after {
654
+ box-sizing: border-box;
655
+ }
656
+
657
+ html {
658
+ line-height: 1.4;
659
+ font-size: 16px;
660
+ -webkit-text-size-adjust: 100%;
661
+ }
662
+
663
+ html.dark {
664
+ color-scheme: dark;
665
+ }
666
+
667
+ body {
668
+ margin: 0;
669
+ width: 100%;
670
+ min-width: 320px;
671
+ min-height: 100vh;
672
+ line-height: 24px;
673
+ font-family: var(--vp-font-family-base);
674
+ font-size: 16px;
675
+ font-weight: 400;
676
+ color: var(--vp-c-text-1);
677
+ background-color: var(--vp-c-bg);
678
+ font-synthesis: style;
679
+ text-rendering: optimizeLegibility;
680
+ -webkit-font-smoothing: antialiased;
681
+ -moz-osx-font-smoothing: grayscale;
682
+ }
683
+
684
+ main {
685
+ display: block;
686
+ }
687
+
688
+ h1,
689
+ h2,
690
+ h3,
691
+ h4,
692
+ h5,
693
+ h6 {
694
+ margin: 0;
695
+ line-height: 24px;
696
+ font-size: 16px;
697
+ font-weight: 400;
698
+ }
699
+
700
+ p {
701
+ margin: 0;
702
+ }
703
+
704
+ strong,
705
+ b {
706
+ font-weight: 600;
707
+ }
708
+
709
+ /**
710
+ * Avoid 300ms click delay on touch devices that support the `touch-action`
711
+ * CSS property.
712
+ *
713
+ * In particular, unlike most other browsers, IE11+Edge on Windows 10 on
714
+ * touch devices and IE Mobile 10-11 DON'T remove the click delay when
715
+ * `<meta name="viewport" content="width=device-width">` is present.
716
+ * However, they DO support removing the click delay via
717
+ * `touch-action: manipulation`.
718
+ *
719
+ * See:
720
+ * - http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
721
+ * - http://caniuse.com/#feat=css-touch-action
722
+ * - http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
723
+ */
724
+ a,
725
+ area,
726
+ button,
727
+ [role='button'],
728
+ input,
729
+ label,
730
+ select,
731
+ summary,
732
+ textarea {
733
+ touch-action: manipulation;
734
+ }
735
+
736
+ a {
737
+ color: inherit;
738
+ text-decoration: inherit;
739
+ }
740
+
741
+ ol,
742
+ ul {
743
+ list-style: none;
744
+ margin: 0;
745
+ padding: 0;
746
+ }
747
+
748
+ blockquote {
749
+ margin: 0;
750
+ }
751
+
752
+ pre,
753
+ code,
754
+ kbd,
755
+ samp {
756
+ font-family: var(--vp-font-family-mono);
757
+ }
758
+
759
+ img,
760
+ svg,
761
+ video,
762
+ canvas,
763
+ audio,
764
+ iframe,
765
+ embed,
766
+ object {
767
+ display: block;
768
+ }
769
+
770
+ figure {
771
+ margin: 0;
772
+ }
773
+
774
+ img,
775
+ video {
776
+ max-width: 100%;
777
+ height: auto;
778
+ }
779
+
780
+ button,
781
+ input,
782
+ optgroup,
783
+ select,
784
+ textarea {
785
+ border: 0;
786
+ padding: 0;
787
+ line-height: inherit;
788
+ color: inherit;
789
+ }
790
+
791
+ button {
792
+ padding: 0;
793
+ font-family: inherit;
794
+ background-color: transparent;
795
+ background-image: none;
796
+ }
797
+
798
+ button:enabled,
799
+ [role='button']:enabled {
800
+ cursor: pointer;
801
+ }
802
+
803
+ button:focus,
804
+ button:focus-visible {
805
+ outline: 1px dotted;
806
+ outline: 4px auto -webkit-focus-ring-color;
807
+ }
808
+
809
+ button:focus:not(:focus-visible) {
810
+ outline: none !important;
811
+ }
812
+
813
+ input:focus,
814
+ textarea:focus,
815
+ select:focus {
816
+ outline: none;
817
+ }
818
+
819
+ table {
820
+ border-collapse: collapse;
821
+ }
822
+
823
+ input {
824
+ background-color: transparent;
825
+ }
826
+
827
+ input:-ms-input-placeholder,
828
+ textarea:-ms-input-placeholder {
829
+ color: var(--vp-c-text-3);
830
+ }
831
+
832
+ input::-ms-input-placeholder,
833
+ textarea::-ms-input-placeholder {
834
+ color: var(--vp-c-text-3);
835
+ }
836
+
837
+ input::placeholder,
838
+ textarea::placeholder {
839
+ color: var(--vp-c-text-3);
840
+ }
841
+
842
+ input::-webkit-outer-spin-button,
843
+ input::-webkit-inner-spin-button {
844
+ -webkit-appearance: none;
845
+ margin: 0;
846
+ }
847
+
848
+ input[type='number'] {
849
+ -moz-appearance: textfield;
850
+ }
851
+
852
+ textarea {
853
+ resize: vertical;
854
+ }
855
+
856
+ select {
857
+ -webkit-appearance: none;
858
+ }
859
+
860
+ fieldset {
861
+ margin: 0;
862
+ padding: 0;
863
+ }
864
+
865
+ h1,
866
+ h2,
867
+ h3,
868
+ h4,
869
+ h5,
870
+ h6,
871
+ li,
872
+ p {
873
+ overflow-wrap: break-word;
874
+ }
875
+
876
+ vite-error-overlay {
877
+ z-index: 9999;
878
+ }
879
+
880
+ mjx-container {
881
+ overflow-x: auto;
882
+ }
883
+
884
+ mjx-container > svg {
885
+ display: inline-block;
886
+ margin: auto;
887
+ }
888
+ }
889
+ [class^='vpi-'],
890
+ [class*=' vpi-'],
891
+ .vp-icon {
892
+ width: 1em;
893
+ height: 1em;
894
+ }
895
+ [class^='vpi-'].bg,
896
+ [class*=' vpi-'].bg,
897
+ .vp-icon.bg {
898
+ background-size: 100% 100%;
899
+ background-color: transparent;
900
+ }
901
+ [class^='vpi-']:not(.bg),
902
+ [class*=' vpi-']:not(.bg),
903
+ .vp-icon:not(.bg) {
904
+ -webkit-mask: var(--icon) no-repeat;
905
+ mask: var(--icon) no-repeat;
906
+ -webkit-mask-size: 100% 100%;
907
+ mask-size: 100% 100%;
908
+ background-color: currentColor;
909
+ color: inherit;
910
+ }
911
+
912
+ /* internal icons - used under ISC from https://lucide.dev/ */
913
+ .vpi-align-left {
914
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12H3m14 6H3M21 6H3'/%3E%3C/svg%3E");
915
+ }
916
+ .vpi-arrow-right,
917
+ .vpi-arrow-down,
918
+ .vpi-arrow-left,
919
+ .vpi-arrow-up {
920
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7l7 7l-7 7'/%3E%3C/svg%3E");
921
+ }
922
+ .vpi-chevron-right,
923
+ .vpi-chevron-down,
924
+ .vpi-chevron-left,
925
+ .vpi-chevron-up {
926
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18l6-6l-6-6'/%3E%3C/svg%3E");
927
+ }
928
+ .vpi-chevron-down,
929
+ .vpi-arrow-down {
930
+ /*rtl:ignore*/
931
+ transform: rotate(90deg);
932
+ }
933
+ .vpi-chevron-left,
934
+ .vpi-arrow-left {
935
+ /*rtl:ignore*/
936
+ transform: rotate(180deg);
937
+ }
938
+ .vpi-chevron-up,
939
+ .vpi-arrow-up {
940
+ /*rtl:ignore*/
941
+ transform: rotate(-90deg);
942
+ }
943
+ .vpi-square-pen {
944
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z'/%3E%3C/g%3E%3C/svg%3E");
945
+ }
946
+ .vpi-plus {
947
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7v14'/%3E%3C/svg%3E");
948
+ }
949
+ .vpi-sun {
950
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/g%3E%3C/svg%3E");
951
+ }
952
+ .vpi-moon {
953
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3a6 6 0 0 0 9 9a9 9 0 1 1-9-9'/%3E%3C/svg%3E");
954
+ }
955
+ .vpi-more-horizontal {
956
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/g%3E%3C/svg%3E");
957
+ }
958
+ .vpi-languages {
959
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6'/%3E%3C/svg%3E");
960
+ }
961
+ .vpi-heart {
962
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2c-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
963
+ }
964
+ .vpi-search {
965
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 21l-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/g%3E%3C/svg%3E");
966
+ }
967
+ .vpi-sparkles {
968
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594zM20 2v4m2-2h-4'/%3E%3Ccircle cx='4' cy='20' r='2'/%3E%3C/g%3E%3C/svg%3E");
969
+ }
970
+ .vpi-layout-list {
971
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3Cpath d='M14 4h7m-7 5h7m-7 6h7m-7 5h7'/%3E%3C/g%3E%3C/svg%3E");
972
+ }
973
+ .vpi-delete {
974
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5a2 2 0 0 0-1.344.519l-6.328 5.74a1 1 0 0 0 0 1.481l6.328 5.741A2 2 0 0 0 10 19h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm2 4l6 6m0-6l-6 6'/%3E%3C/svg%3E");
975
+ }
976
+ .vpi-corner-down-left {
977
+ --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M20 4v7a4 4 0 0 1-4 4H4'/%3E%3Cpath d='m9 10l-5 5l5 5'/%3E%3C/g%3E%3C/svg%3E");
978
+ }
979
+ :root {
980
+ /* clipboard */
981
+ --vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/g%3E%3C/svg%3E");
982
+ /* clipboard-check */
983
+ --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E");
984
+ }
985
+ .visually-hidden {
986
+ position: absolute;
987
+ width: 1px;
988
+ height: 1px;
989
+ white-space: nowrap;
990
+ clip: rect(0 0 0 0);
991
+ clip-path: inset(50%);
992
+ overflow: hidden;
993
+ }
994
+ .custom-block {
995
+ border: 1px solid transparent;
996
+ border-radius: 8px;
997
+ padding: 16px 16px 8px;
998
+ line-height: 24px;
999
+ font-size: var(--vp-custom-block-font-size);
1000
+ color: var(--vp-c-text-2);
1001
+ }
1002
+
1003
+ .custom-block.info {
1004
+ border-color: var(--vp-custom-block-info-border);
1005
+ color: var(--vp-custom-block-info-text);
1006
+ background-color: var(--vp-custom-block-info-bg);
1007
+ }
1008
+
1009
+ .custom-block.info a,
1010
+ .custom-block.info code {
1011
+ color: var(--vp-c-brand-1);
1012
+ }
1013
+
1014
+ .custom-block.info a:hover,
1015
+ .custom-block.info a:hover > code {
1016
+ color: var(--vp-c-brand-2);
1017
+ }
1018
+
1019
+ .custom-block.info code {
1020
+ background-color: var(--vp-custom-block-info-code-bg);
1021
+ }
1022
+
1023
+ .custom-block.note {
1024
+ border-color: var(--vp-custom-block-note-border);
1025
+ color: var(--vp-custom-block-note-text);
1026
+ background-color: var(--vp-custom-block-note-bg);
1027
+ }
1028
+
1029
+ .custom-block.note a,
1030
+ .custom-block.note code {
1031
+ color: var(--vp-c-brand-1);
1032
+ }
1033
+
1034
+ .custom-block.note a:hover,
1035
+ .custom-block.note a:hover > code {
1036
+ color: var(--vp-c-brand-2);
1037
+ }
1038
+
1039
+ .custom-block.note code {
1040
+ background-color: var(--vp-custom-block-note-code-bg);
1041
+ }
1042
+
1043
+ .custom-block.tip {
1044
+ border-color: var(--vp-custom-block-tip-border);
1045
+ color: var(--vp-custom-block-tip-text);
1046
+ background-color: var(--vp-custom-block-tip-bg);
1047
+ }
1048
+
1049
+ .custom-block.tip a,
1050
+ .custom-block.tip code {
1051
+ color: var(--vp-c-tip-1);
1052
+ }
1053
+
1054
+ .custom-block.tip a:hover,
1055
+ .custom-block.tip a:hover > code {
1056
+ color: var(--vp-c-tip-2);
1057
+ }
1058
+
1059
+ .custom-block.tip code {
1060
+ background-color: var(--vp-custom-block-tip-code-bg);
1061
+ }
1062
+
1063
+ .custom-block.important {
1064
+ border-color: var(--vp-custom-block-important-border);
1065
+ color: var(--vp-custom-block-important-text);
1066
+ background-color: var(--vp-custom-block-important-bg);
1067
+ }
1068
+
1069
+ .custom-block.important a,
1070
+ .custom-block.important code {
1071
+ color: var(--vp-c-important-1);
1072
+ }
1073
+
1074
+ .custom-block.important a:hover,
1075
+ .custom-block.important a:hover > code {
1076
+ color: var(--vp-c-important-2);
1077
+ }
1078
+
1079
+ .custom-block.important code {
1080
+ background-color: var(--vp-custom-block-important-code-bg);
1081
+ }
1082
+
1083
+ .custom-block.warning {
1084
+ border-color: var(--vp-custom-block-warning-border);
1085
+ color: var(--vp-custom-block-warning-text);
1086
+ background-color: var(--vp-custom-block-warning-bg);
1087
+ }
1088
+
1089
+ .custom-block.warning a,
1090
+ .custom-block.warning code {
1091
+ color: var(--vp-c-warning-1);
1092
+ }
1093
+
1094
+ .custom-block.warning a:hover,
1095
+ .custom-block.warning a:hover > code {
1096
+ color: var(--vp-c-warning-2);
1097
+ }
1098
+
1099
+ .custom-block.warning code {
1100
+ background-color: var(--vp-custom-block-warning-code-bg);
1101
+ }
1102
+
1103
+ .custom-block.danger {
1104
+ border-color: var(--vp-custom-block-danger-border);
1105
+ color: var(--vp-custom-block-danger-text);
1106
+ background-color: var(--vp-custom-block-danger-bg);
1107
+ }
1108
+
1109
+ .custom-block.danger a,
1110
+ .custom-block.danger code {
1111
+ color: var(--vp-c-danger-1);
1112
+ }
1113
+
1114
+ .custom-block.danger a:hover,
1115
+ .custom-block.danger a:hover > code {
1116
+ color: var(--vp-c-danger-2);
1117
+ }
1118
+
1119
+ .custom-block.danger code {
1120
+ background-color: var(--vp-custom-block-danger-code-bg);
1121
+ }
1122
+
1123
+ .custom-block.caution {
1124
+ border-color: var(--vp-custom-block-caution-border);
1125
+ color: var(--vp-custom-block-caution-text);
1126
+ background-color: var(--vp-custom-block-caution-bg);
1127
+ }
1128
+
1129
+ .custom-block.caution a,
1130
+ .custom-block.caution code {
1131
+ color: var(--vp-c-caution-1);
1132
+ }
1133
+
1134
+ .custom-block.caution a:hover,
1135
+ .custom-block.caution a:hover > code {
1136
+ color: var(--vp-c-caution-2);
1137
+ }
1138
+
1139
+ .custom-block.caution code {
1140
+ background-color: var(--vp-custom-block-caution-code-bg);
1141
+ }
1142
+
1143
+ .custom-block.details {
1144
+ border-color: var(--vp-custom-block-details-border);
1145
+ color: var(--vp-custom-block-details-text);
1146
+ background-color: var(--vp-custom-block-details-bg);
1147
+ }
1148
+
1149
+ .custom-block.details a {
1150
+ color: var(--vp-c-brand-1);
1151
+ }
1152
+
1153
+ .custom-block.details a:hover,
1154
+ .custom-block.details a:hover > code {
1155
+ color: var(--vp-c-brand-2);
1156
+ }
1157
+
1158
+ .custom-block.details code {
1159
+ background-color: var(--vp-custom-block-details-code-bg);
1160
+ }
1161
+
1162
+ .custom-block-title {
1163
+ font-weight: 600;
1164
+ }
1165
+
1166
+ .custom-block p + p {
1167
+ margin: 8px 0;
1168
+ }
1169
+
1170
+ .custom-block.details summary {
1171
+ margin: 0 0 8px;
1172
+ font-weight: 700;
1173
+ cursor: pointer;
1174
+ user-select: none;
1175
+ }
1176
+
1177
+ .custom-block.details summary + p {
1178
+ margin: 8px 0;
1179
+ }
1180
+
1181
+ .custom-block a {
1182
+ color: inherit;
1183
+ font-weight: 600;
1184
+ text-decoration: underline;
1185
+ text-underline-offset: 2px;
1186
+ transition: opacity 0.25s;
1187
+ }
1188
+
1189
+ .custom-block a:hover {
1190
+ opacity: 0.75;
1191
+ }
1192
+
1193
+ .custom-block code {
1194
+ font-size: var(--vp-custom-block-code-font-size);
1195
+ }
1196
+
1197
+ .custom-block.custom-block th,
1198
+ .custom-block.custom-block blockquote > p {
1199
+ font-size: var(--vp-custom-block-font-size);
1200
+ color: inherit;
1201
+ }
1202
+ .dark .shiki span {
1203
+ color: var(--shiki-dark, inherit);
1204
+ }
1205
+
1206
+ html:not(.dark) .shiki span {
1207
+ color: var(--shiki-light, inherit);
1208
+ }
1209
+ .vp-code-group {
1210
+ margin-top: 16px;
1211
+ }
1212
+
1213
+ .vp-code-group .tabs {
1214
+ position: relative;
1215
+ display: flex;
1216
+ margin-right: -24px;
1217
+ margin-left: -24px;
1218
+ padding: 0 12px;
1219
+ background-color: var(--vp-code-tab-bg);
1220
+ overflow-x: auto;
1221
+ overflow-y: hidden;
1222
+ box-shadow: inset 0 -1px var(--vp-code-tab-divider);
1223
+ }
1224
+
1225
+ @media (min-width: 640px) {
1226
+ .vp-code-group .tabs {
1227
+ margin-right: 0;
1228
+ margin-left: 0;
1229
+ border-radius: 8px 8px 0 0;
1230
+ }
1231
+ }
1232
+
1233
+ .vp-code-group .tabs input {
1234
+ position: fixed;
1235
+ opacity: 0;
1236
+ pointer-events: none;
1237
+ }
1238
+
1239
+ .vp-code-group .tabs label {
1240
+ position: relative;
1241
+ display: inline-block;
1242
+ border-bottom: 1px solid transparent;
1243
+ padding: 0 12px;
1244
+ line-height: 48px;
1245
+ font-size: 14px;
1246
+ font-weight: 500;
1247
+ color: var(--vp-code-tab-text-color);
1248
+ white-space: nowrap;
1249
+ cursor: pointer;
1250
+ transition: color 0.25s;
1251
+ }
1252
+
1253
+ .vp-code-group .tabs label::after {
1254
+ position: absolute;
1255
+ right: 8px;
1256
+ bottom: -1px;
1257
+ left: 8px;
1258
+ z-index: 1;
1259
+ height: 2px;
1260
+ border-radius: 2px;
1261
+ content: '';
1262
+ background-color: transparent;
1263
+ transition: background-color 0.25s;
1264
+ }
1265
+
1266
+ .vp-code-group label:hover {
1267
+ color: var(--vp-code-tab-hover-text-color);
1268
+ }
1269
+
1270
+ .vp-code-group input:checked + label {
1271
+ color: var(--vp-code-tab-active-text-color);
1272
+ }
1273
+
1274
+ .vp-code-group input:checked + label::after {
1275
+ background-color: var(--vp-code-tab-active-bar-color);
1276
+ }
1277
+
1278
+ .vp-code-group div[class*='language-'],
1279
+ .vp-block {
1280
+ display: none;
1281
+ margin-top: 0 !important;
1282
+ border-top-left-radius: 0 !important;
1283
+ border-top-right-radius: 0 !important;
1284
+ }
1285
+
1286
+ .vp-code-group div[class*='language-'].active,
1287
+ .vp-block.active {
1288
+ display: block;
1289
+ }
1290
+
1291
+ .vp-block {
1292
+ padding: 20px 24px;
1293
+ }
1294
+ /**
1295
+ * Headings
1296
+ * -------------------------------------------------------------------------- */
1297
+
1298
+ .vp-doc h1,
1299
+ .vp-doc h2,
1300
+ .vp-doc h3,
1301
+ .vp-doc h4,
1302
+ .vp-doc h5,
1303
+ .vp-doc h6 {
1304
+ position: relative;
1305
+ font-weight: 600;
1306
+ outline: none;
1307
+ }
1308
+
1309
+ .vp-doc h1 {
1310
+ letter-spacing: -0.02em;
1311
+ line-height: 40px;
1312
+ font-size: 28px;
1313
+ }
1314
+
1315
+ .vp-doc h2 {
1316
+ margin: 48px 0 16px;
1317
+ border-top: 1px solid var(--vp-c-divider);
1318
+ padding-top: 24px;
1319
+ letter-spacing: -0.02em;
1320
+ line-height: 32px;
1321
+ font-size: 24px;
1322
+ }
1323
+
1324
+ .vp-doc h3 {
1325
+ margin: 32px 0 0;
1326
+ letter-spacing: -0.01em;
1327
+ line-height: 28px;
1328
+ font-size: 20px;
1329
+ }
1330
+
1331
+ .vp-doc h4 {
1332
+ margin: 24px 0 0;
1333
+ letter-spacing: -0.01em;
1334
+ line-height: 24px;
1335
+ font-size: 18px;
1336
+ }
1337
+
1338
+ .vp-doc .header-anchor {
1339
+ position: absolute;
1340
+ top: 0;
1341
+ left: 0;
1342
+ margin-left: -0.87em;
1343
+ font-weight: 500;
1344
+ user-select: none;
1345
+ opacity: 0;
1346
+ text-decoration: none;
1347
+ transition:
1348
+ color 0.25s,
1349
+ opacity 0.25s;
1350
+ }
1351
+
1352
+ .vp-doc .header-anchor:before {
1353
+ content: var(--vp-header-anchor-symbol);
1354
+ }
1355
+
1356
+ .vp-doc h1:hover .header-anchor,
1357
+ .vp-doc h1 .header-anchor:focus,
1358
+ .vp-doc h2:hover .header-anchor,
1359
+ .vp-doc h2 .header-anchor:focus,
1360
+ .vp-doc h3:hover .header-anchor,
1361
+ .vp-doc h3 .header-anchor:focus,
1362
+ .vp-doc h4:hover .header-anchor,
1363
+ .vp-doc h4 .header-anchor:focus,
1364
+ .vp-doc h5:hover .header-anchor,
1365
+ .vp-doc h5 .header-anchor:focus,
1366
+ .vp-doc h6:hover .header-anchor,
1367
+ .vp-doc h6 .header-anchor:focus {
1368
+ opacity: 1;
1369
+ }
1370
+
1371
+ @media (min-width: 768px) {
1372
+ .vp-doc h1 {
1373
+ letter-spacing: -0.02em;
1374
+ line-height: 40px;
1375
+ font-size: 32px;
1376
+ }
1377
+ }
1378
+
1379
+ .vp-doc h2 .header-anchor {
1380
+ top: 24px;
1381
+ }
1382
+
1383
+ /**
1384
+ * Paragraph and inline elements
1385
+ * -------------------------------------------------------------------------- */
1386
+
1387
+ .vp-doc p,
1388
+ .vp-doc summary {
1389
+ margin: 16px 0;
1390
+ }
1391
+
1392
+ .vp-doc p {
1393
+ line-height: 28px;
1394
+ }
1395
+
1396
+ .vp-doc blockquote {
1397
+ margin: 16px 0;
1398
+ border-left: 2px solid var(--vp-c-divider);
1399
+ padding-left: 16px;
1400
+ transition: border-color 0.5s;
1401
+ color: var(--vp-c-text-2);
1402
+ }
1403
+
1404
+ .vp-doc blockquote > p {
1405
+ margin: 0;
1406
+ font-size: 16px;
1407
+ transition: color 0.5s;
1408
+ }
1409
+
1410
+ .vp-doc a {
1411
+ font-weight: 500;
1412
+ color: var(--vp-c-brand-1);
1413
+ text-decoration: underline;
1414
+ text-underline-offset: 2px;
1415
+ transition:
1416
+ color 0.25s,
1417
+ opacity 0.25s;
1418
+ }
1419
+
1420
+ .vp-doc a:hover {
1421
+ color: var(--vp-c-brand-2);
1422
+ }
1423
+
1424
+ .vp-doc strong {
1425
+ font-weight: 600;
1426
+ }
1427
+
1428
+ /**
1429
+ * Lists
1430
+ * -------------------------------------------------------------------------- */
1431
+
1432
+ .vp-doc ul,
1433
+ .vp-doc ol {
1434
+ padding-left: 1.25rem;
1435
+ margin: 16px 0;
1436
+ }
1437
+
1438
+ .vp-doc ul {
1439
+ list-style: disc;
1440
+ }
1441
+
1442
+ .vp-doc ol {
1443
+ list-style: decimal;
1444
+ }
1445
+
1446
+ .vp-doc li + li {
1447
+ margin-top: 8px;
1448
+ }
1449
+
1450
+ .vp-doc li > ol,
1451
+ .vp-doc li > ul {
1452
+ margin: 8px 0 0;
1453
+ }
1454
+
1455
+ /**
1456
+ * Table
1457
+ * -------------------------------------------------------------------------- */
1458
+
1459
+ .vp-doc table {
1460
+ display: block;
1461
+ border-collapse: collapse;
1462
+ margin: 20px 0;
1463
+ overflow-x: auto;
1464
+ }
1465
+
1466
+ .vp-doc tr {
1467
+ background-color: var(--vp-c-bg);
1468
+ border-top: 1px solid var(--vp-c-divider);
1469
+ transition: background-color 0.5s;
1470
+ }
1471
+
1472
+ .vp-doc tr:nth-child(2n) {
1473
+ background-color: var(--vp-c-bg-soft);
1474
+ }
1475
+
1476
+ .vp-doc th,
1477
+ .vp-doc td {
1478
+ border: 1px solid var(--vp-c-divider);
1479
+ padding: 8px 16px;
1480
+ }
1481
+
1482
+ .vp-doc th {
1483
+ text-align: left;
1484
+ font-size: 14px;
1485
+ font-weight: 600;
1486
+ color: var(--vp-c-text-2);
1487
+ background-color: var(--vp-c-bg-soft);
1488
+ }
1489
+
1490
+ .vp-doc td {
1491
+ font-size: 14px;
1492
+ }
1493
+
1494
+ /**
1495
+ * Decorational elements
1496
+ * -------------------------------------------------------------------------- */
1497
+
1498
+ .vp-doc hr {
1499
+ margin: 16px 0;
1500
+ border: none;
1501
+ border-top: 1px solid var(--vp-c-divider);
1502
+ }
1503
+
1504
+ /**
1505
+ * Custom Block
1506
+ * -------------------------------------------------------------------------- */
1507
+
1508
+ .vp-doc .custom-block {
1509
+ margin: 16px 0;
1510
+ }
1511
+
1512
+ .vp-doc .custom-block p {
1513
+ margin: 8px 0;
1514
+ line-height: 24px;
1515
+ }
1516
+
1517
+ .vp-doc .custom-block p:first-child {
1518
+ margin: 0;
1519
+ }
1520
+
1521
+ .vp-doc .custom-block div[class*='language-'] {
1522
+ margin: 8px 0 !important;
1523
+ border-radius: 8px;
1524
+ }
1525
+
1526
+ .vp-doc .custom-block div[class*='language-'] code {
1527
+ font-weight: 400;
1528
+ background-color: transparent;
1529
+ }
1530
+
1531
+ .vp-doc .custom-block .vp-code-group,
1532
+ .vp-doc .custom-block [class*='vp-code-block'] {
1533
+ margin-top: 8px;
1534
+ }
1535
+
1536
+ .vp-doc .custom-block .vp-code-group .tabs {
1537
+ margin: 0;
1538
+ border-radius: 8px 8px 0 0;
1539
+ }
1540
+
1541
+ .vp-doc .custom-block .vp-code-group div[class*='language-'],
1542
+ .vp-doc .custom-block [class*='vp-code-block'] div[class*='language-'] {
1543
+ margin-top: 0 !important;
1544
+ }
1545
+
1546
+ /**
1547
+ * Code
1548
+ * -------------------------------------------------------------------------- */
1549
+
1550
+ /* inline code */
1551
+ .vp-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
1552
+ font-size: var(--vp-code-font-size);
1553
+ color: var(--vp-code-color);
1554
+ }
1555
+
1556
+ .vp-doc :not(pre) > code {
1557
+ border-radius: 4px;
1558
+ padding: 3px 6px;
1559
+ background-color: var(--vp-code-bg);
1560
+ transition:
1561
+ color 0.25s,
1562
+ background-color 0.5s;
1563
+ }
1564
+
1565
+ .vp-doc a > code {
1566
+ color: var(--vp-code-link-color);
1567
+ }
1568
+
1569
+ .vp-doc a:hover > code {
1570
+ color: var(--vp-code-link-hover-color);
1571
+ }
1572
+
1573
+ .vp-doc h1 > code,
1574
+ .vp-doc h2 > code,
1575
+ .vp-doc h3 > code,
1576
+ .vp-doc h4 > code {
1577
+ font-size: 0.9em;
1578
+ }
1579
+
1580
+ .vp-doc div[class*='language-'],
1581
+ .vp-block {
1582
+ position: relative;
1583
+ margin: 16px -24px;
1584
+ background-color: var(--vp-code-block-bg);
1585
+ overflow-x: auto;
1586
+ transition: background-color 0.5s;
1587
+ }
1588
+
1589
+ @media (min-width: 640px) {
1590
+ .vp-doc div[class*='language-'],
1591
+ .vp-block {
1592
+ border-radius: 8px;
1593
+ margin: 16px 0;
1594
+ }
1595
+ }
1596
+
1597
+ @media (max-width: 639px) {
1598
+ .vp-doc li div[class*='language-'] {
1599
+ border-radius: 8px 0 0 8px;
1600
+ }
1601
+ }
1602
+
1603
+ .vp-doc div[class*='language-'] + div[class*='language-'],
1604
+ .vp-doc div[class$='-api'] + div[class*='language-'],
1605
+ .vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
1606
+ margin-top: -8px;
1607
+ }
1608
+
1609
+ .vp-doc [class*='language-'] pre,
1610
+ .vp-doc [class*='language-'] code {
1611
+ -moz-tab-size: 4;
1612
+ -o-tab-size: 4;
1613
+ tab-size: 4;
1614
+ }
1615
+
1616
+ .vp-doc [class*='language-'] pre {
1617
+ position: relative;
1618
+ z-index: 1;
1619
+ margin: 0;
1620
+ padding: 20px 0;
1621
+ background: transparent;
1622
+ overflow-x: auto;
1623
+ /*rtl:ignore*/
1624
+ text-align: left;
1625
+ }
1626
+
1627
+ .vp-doc [class*='language-'] code {
1628
+ display: block;
1629
+ padding: 0 24px;
1630
+ width: fit-content;
1631
+ min-width: 100%;
1632
+ line-height: var(--vp-code-line-height);
1633
+ font-size: var(--vp-code-font-size);
1634
+ color: var(--vp-code-block-color);
1635
+ transition: color 0.5s;
1636
+ }
1637
+
1638
+ .vp-doc [class*='language-'] code .highlighted {
1639
+ background-color: var(--vp-code-line-highlight-color);
1640
+ transition: background-color 0.5s;
1641
+ margin: 0 -24px;
1642
+ padding: 0 24px;
1643
+ width: calc(100% + 2 * 24px);
1644
+ display: inline-block;
1645
+ }
1646
+
1647
+ .vp-doc [class*='language-'] code .highlighted.error {
1648
+ background-color: var(--vp-code-line-error-color);
1649
+ }
1650
+
1651
+ .vp-doc [class*='language-'] code .highlighted.warning {
1652
+ background-color: var(--vp-code-line-warning-color);
1653
+ }
1654
+
1655
+ .vp-doc [class*='language-'] code .diff {
1656
+ transition: background-color 0.5s;
1657
+ margin: 0 -24px;
1658
+ padding: 0 24px;
1659
+ width: calc(100% + 2 * 24px);
1660
+ display: inline-block;
1661
+ }
1662
+
1663
+ .vp-doc [class*='language-'] code .diff::before {
1664
+ position: absolute;
1665
+ left: 10px;
1666
+ }
1667
+
1668
+ .vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
1669
+ filter: blur(0.095rem);
1670
+ opacity: 0.4;
1671
+ transition:
1672
+ filter 0.35s,
1673
+ opacity 0.35s;
1674
+ }
1675
+
1676
+ .vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
1677
+ opacity: 0.7;
1678
+ transition:
1679
+ filter 0.35s,
1680
+ opacity 0.35s;
1681
+ }
1682
+
1683
+ .vp-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
1684
+ filter: blur(0);
1685
+ opacity: 1;
1686
+ }
1687
+
1688
+ .vp-doc [class*='language-'] code .diff.remove {
1689
+ background-color: var(--vp-code-line-diff-remove-color);
1690
+ opacity: 0.7;
1691
+ }
1692
+
1693
+ .vp-doc [class*='language-'] code .diff.remove::before {
1694
+ content: '-';
1695
+ color: var(--vp-code-line-diff-remove-symbol-color);
1696
+ }
1697
+
1698
+ .vp-doc [class*='language-'] code .diff.add {
1699
+ background-color: var(--vp-code-line-diff-add-color);
1700
+ }
1701
+
1702
+ .vp-doc [class*='language-'] code .diff.add::before {
1703
+ content: '+';
1704
+ color: var(--vp-code-line-diff-add-symbol-color);
1705
+ }
1706
+
1707
+ .vp-doc div[class*='language-'].line-numbers-mode {
1708
+ /*rtl:ignore*/
1709
+ padding-left: 32px;
1710
+ }
1711
+
1712
+ .vp-doc .line-numbers-wrapper {
1713
+ position: absolute;
1714
+ top: 0;
1715
+ bottom: 0;
1716
+ /*rtl:ignore*/
1717
+ left: 0;
1718
+ z-index: 3;
1719
+ /*rtl:ignore*/
1720
+ border-right: 1px solid var(--vp-code-block-divider-color);
1721
+ padding-top: 20px;
1722
+ width: 32px;
1723
+ text-align: center;
1724
+ font-family: var(--vp-font-family-mono);
1725
+ line-height: var(--vp-code-line-height);
1726
+ font-size: var(--vp-code-font-size);
1727
+ color: var(--vp-code-line-number-color);
1728
+ transition:
1729
+ border-color 0.5s,
1730
+ color 0.5s;
1731
+ }
1732
+
1733
+ .vp-doc [class*='language-'] > button.copy {
1734
+ /*rtl:ignore*/
1735
+ direction: ltr;
1736
+ position: absolute;
1737
+ top: 12px;
1738
+ /*rtl:ignore*/
1739
+ right: 12px;
1740
+ z-index: 3;
1741
+ border: 1px solid var(--vp-code-copy-code-border-color);
1742
+ border-radius: 4px;
1743
+ width: 40px;
1744
+ height: 40px;
1745
+ background-color: var(--vp-code-copy-code-bg);
1746
+ opacity: 0;
1747
+ cursor: pointer;
1748
+ background-image: var(--vp-icon-copy);
1749
+ background-position: 50%;
1750
+ background-size: 20px;
1751
+ background-repeat: no-repeat;
1752
+ transition:
1753
+ border-color 0.25s,
1754
+ background-color 0.25s,
1755
+ opacity 0.25s;
1756
+ }
1757
+
1758
+ .vp-doc [class*='language-']:hover > button.copy,
1759
+ .vp-doc [class*='language-'] > button.copy:focus {
1760
+ opacity: 1;
1761
+ }
1762
+
1763
+ .vp-doc [class*='language-'] > button.copy:hover,
1764
+ .vp-doc [class*='language-'] > button.copy.copied {
1765
+ border-color: var(--vp-code-copy-code-hover-border-color);
1766
+ background-color: var(--vp-code-copy-code-hover-bg);
1767
+ }
1768
+
1769
+ .vp-doc [class*='language-'] > button.copy.copied,
1770
+ .vp-doc [class*='language-'] > button.copy:hover.copied {
1771
+ /*rtl:ignore*/
1772
+ border-radius: 0 4px 4px 0;
1773
+ background-color: var(--vp-code-copy-code-hover-bg);
1774
+ background-image: var(--vp-icon-copied);
1775
+ }
1776
+
1777
+ .vp-doc [class*='language-'] > button.copy.copied::before,
1778
+ .vp-doc [class*='language-'] > button.copy:hover.copied::before {
1779
+ position: relative;
1780
+ top: -1px;
1781
+ /*rtl:ignore*/
1782
+ transform: translateX(calc(-100% - 1px));
1783
+ display: flex;
1784
+ justify-content: center;
1785
+ align-items: center;
1786
+ border: 1px solid var(--vp-code-copy-code-hover-border-color);
1787
+ /*rtl:ignore*/
1788
+ border-right: 0;
1789
+ /*rtl:ignore*/
1790
+ border-radius: 4px 0 0 4px;
1791
+ padding: 0 10px;
1792
+ width: fit-content;
1793
+ height: 40px;
1794
+ text-align: center;
1795
+ font-size: 12px;
1796
+ font-weight: 500;
1797
+ color: var(--vp-code-copy-code-active-text);
1798
+ background-color: var(--vp-code-copy-code-hover-bg);
1799
+ white-space: nowrap;
1800
+ content: var(--vp-code-copy-copied-text-content);
1801
+ }
1802
+
1803
+ .vp-doc [class*='language-'] > span.lang {
1804
+ position: absolute;
1805
+ top: 2px;
1806
+ /*rtl:ignore*/
1807
+ right: 8px;
1808
+ z-index: 2;
1809
+ font-size: 12px;
1810
+ font-weight: 500;
1811
+ user-select: none;
1812
+ color: var(--vp-code-lang-color);
1813
+ transition:
1814
+ color 0.4s,
1815
+ opacity 0.4s;
1816
+ }
1817
+
1818
+ .vp-doc [class*='language-']:hover > button.copy + span.lang,
1819
+ .vp-doc [class*='language-'] > button.copy:focus + span.lang {
1820
+ opacity: 0;
1821
+ }
1822
+
1823
+ /**
1824
+ * Component: Team
1825
+ * -------------------------------------------------------------------------- */
1826
+
1827
+ .vp-doc .VPTeamMembers {
1828
+ margin-top: 24px;
1829
+ }
1830
+
1831
+ .vp-doc .VPTeamMembers.small.count-1 .container {
1832
+ margin: 0 !important;
1833
+ max-width: calc((100% - 24px) / 2) !important;
1834
+ }
1835
+
1836
+ .vp-doc .VPTeamMembers.small.count-2 .container,
1837
+ .vp-doc .VPTeamMembers.small.count-3 .container {
1838
+ max-width: 100% !important;
1839
+ }
1840
+
1841
+ .vp-doc .VPTeamMembers.medium.count-1 .container {
1842
+ margin: 0 !important;
1843
+ max-width: calc((100% - 24px) / 2) !important;
1844
+ }
1845
+
1846
+ /**
1847
+ * External links
1848
+ * -------------------------------------------------------------------------- */
1849
+
1850
+ /* prettier-ignore */
1851
+ :is(.vp-external-link-icon, .vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg)))::after {
1852
+ display: inline-block;
1853
+ margin-top: -1px;
1854
+ margin-left: 4px;
1855
+ width: 11px;
1856
+ height: 11px;
1857
+ background: currentColor;
1858
+ color: var(--vp-c-text-3);
1859
+ flex-shrink: 0;
1860
+ --icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");
1861
+ -webkit-mask-image: var(--icon);
1862
+ mask-image: var(--icon);
1863
+ /*rtl:raw:transform: scaleX(-1);*/
1864
+ }
1865
+
1866
+ .vp-external-link-icon::after {
1867
+ content: '';
1868
+ }
1869
+
1870
+ /* prettier-ignore */
1871
+ .external-link-icon-enabled :is(.vp-doc a[href*='://'], .vp-doc a[target='_blank']):not(:is(.no-icon, svg a, :has(img, svg)))::after {
1872
+ content: '';
1873
+ color: currentColor;
1874
+ }
1875
+ /**
1876
+ * VPSponsors styles are defined as global because a new class gets
1877
+ * allied in onMounted` hook and we can't use scoped style.
1878
+ */
1879
+ .vp-sponsor {
1880
+ border-radius: 16px;
1881
+ overflow: hidden;
1882
+ }
1883
+
1884
+ .vp-sponsor.aside {
1885
+ border-radius: 12px;
1886
+ }
1887
+
1888
+ .vp-sponsor-section + .vp-sponsor-section {
1889
+ margin-top: 4px;
1890
+ }
1891
+
1892
+ .vp-sponsor-tier {
1893
+ margin: 0 0 4px !important;
1894
+ text-align: center;
1895
+ letter-spacing: 1px !important;
1896
+ line-height: 24px;
1897
+ width: 100%;
1898
+ font-weight: 600;
1899
+ color: var(--vp-c-text-2);
1900
+ background-color: var(--vp-c-bg-soft);
1901
+ }
1902
+
1903
+ .vp-sponsor.normal .vp-sponsor-tier {
1904
+ padding: 13px 0 11px;
1905
+ font-size: 14px;
1906
+ }
1907
+
1908
+ .vp-sponsor.aside .vp-sponsor-tier {
1909
+ padding: 9px 0 7px;
1910
+ font-size: 12px;
1911
+ }
1912
+
1913
+ .vp-sponsor-grid + .vp-sponsor-tier {
1914
+ margin-top: 4px;
1915
+ }
1916
+
1917
+ .vp-sponsor-grid {
1918
+ display: flex;
1919
+ flex-wrap: wrap;
1920
+ gap: 4px;
1921
+ }
1922
+
1923
+ .vp-sponsor-grid.xmini .vp-sponsor-grid-link {
1924
+ height: 64px;
1925
+ }
1926
+ .vp-sponsor-grid.xmini .vp-sponsor-grid-image {
1927
+ max-width: 64px;
1928
+ max-height: 22px;
1929
+ }
1930
+
1931
+ .vp-sponsor-grid.mini .vp-sponsor-grid-link {
1932
+ height: 72px;
1933
+ }
1934
+ .vp-sponsor-grid.mini .vp-sponsor-grid-image {
1935
+ max-width: 96px;
1936
+ max-height: 24px;
1937
+ }
1938
+
1939
+ .vp-sponsor-grid.small .vp-sponsor-grid-link {
1940
+ height: 96px;
1941
+ }
1942
+ .vp-sponsor-grid.small .vp-sponsor-grid-image {
1943
+ max-width: 96px;
1944
+ max-height: 24px;
1945
+ }
1946
+
1947
+ .vp-sponsor-grid.medium .vp-sponsor-grid-link {
1948
+ height: 112px;
1949
+ }
1950
+ .vp-sponsor-grid.medium .vp-sponsor-grid-image {
1951
+ max-width: 120px;
1952
+ max-height: 36px;
1953
+ }
1954
+
1955
+ .vp-sponsor-grid.big .vp-sponsor-grid-link {
1956
+ height: 184px;
1957
+ }
1958
+ .vp-sponsor-grid.big .vp-sponsor-grid-image {
1959
+ max-width: 192px;
1960
+ max-height: 56px;
1961
+ }
1962
+
1963
+ .vp-sponsor-grid[data-vp-grid='2'] .vp-sponsor-grid-item {
1964
+ width: calc((100% - 4px) / 2);
1965
+ }
1966
+
1967
+ .vp-sponsor-grid[data-vp-grid='3'] .vp-sponsor-grid-item {
1968
+ width: calc((100% - 4px * 2) / 3);
1969
+ }
1970
+
1971
+ .vp-sponsor-grid[data-vp-grid='4'] .vp-sponsor-grid-item {
1972
+ width: calc((100% - 4px * 3) / 4);
1973
+ }
1974
+
1975
+ .vp-sponsor-grid[data-vp-grid='5'] .vp-sponsor-grid-item {
1976
+ width: calc((100% - 4px * 4) / 5);
1977
+ }
1978
+
1979
+ .vp-sponsor-grid[data-vp-grid='6'] .vp-sponsor-grid-item {
1980
+ width: calc((100% - 4px * 5) / 6);
1981
+ }
1982
+
1983
+ .vp-sponsor-grid-item {
1984
+ flex-shrink: 0;
1985
+ width: 100%;
1986
+ background-color: var(--vp-c-bg-soft);
1987
+ transition: background-color 0.25s;
1988
+ }
1989
+
1990
+ .vp-sponsor-grid-item:hover {
1991
+ background-color: var(--vp-c-default-soft);
1992
+ }
1993
+
1994
+ .vp-sponsor-grid-item:hover .vp-sponsor-grid-image {
1995
+ filter: grayscale(0) invert(0);
1996
+ }
1997
+
1998
+ .vp-sponsor-grid-item.empty:hover {
1999
+ background-color: var(--vp-c-bg-soft);
2000
+ }
2001
+
2002
+ .dark .vp-sponsor-grid-item:hover {
2003
+ background-color: var(--vp-c-white);
2004
+ }
2005
+
2006
+ .dark .vp-sponsor-grid-item.empty:hover {
2007
+ background-color: var(--vp-c-bg-soft);
2008
+ }
2009
+
2010
+ .vp-sponsor-grid-link {
2011
+ display: flex;
2012
+ }
2013
+
2014
+ .vp-sponsor-grid-box {
2015
+ display: flex;
2016
+ justify-content: center;
2017
+ align-items: center;
2018
+ width: 100%;
2019
+ }
2020
+
2021
+ .vp-sponsor-grid-image {
2022
+ max-width: 100%;
2023
+ filter: grayscale(1);
2024
+ transition: filter 0.25s;
2025
+ }
2026
+
2027
+ .dark .vp-sponsor-grid-image {
2028
+ filter: grayscale(1) invert(1);
2029
+ }
2030
+ @import '@docsearch/css/dist/style.css';
2031
+ @import '@docsearch/css/dist/sidepanel.css';
2032
+
2033
+ #vp-docsearch,
2034
+ #vp-docsearch-sidepanel,
2035
+ .DocSearch-SidepanelButton {
2036
+ display: none;
2037
+ }
2038
+
2039
+ :root:root {
2040
+ --docsearch-actions-height: auto;
2041
+ --docsearch-actions-width: auto;
2042
+ --docsearch-background-color: var(--vp-c-bg-soft);
2043
+ --docsearch-container-background: var(--vp-backdrop-bg-color);
2044
+ --docsearch-dropdown-menu-background: var(--vp-c-bg-elv);
2045
+ --docsearch-dropdown-menu-item-hover-background: var(--vp-c-default-soft);
2046
+ --docsearch-focus-color: var(--vp-c-brand-1);
2047
+ --docsearch-footer-background: var(--vp-c-bg-alt);
2048
+ --docsearch-highlight-color: var(--vp-c-brand-1);
2049
+ --docsearch-hit-background: var(--vp-c-bg);
2050
+ --docsearch-hit-color: var(--vp-c-text-1);
2051
+ --docsearch-hit-highlight-color: var(--vp-c-brand-soft);
2052
+ --docsearch-icon-color: var(--vp-c-text-2);
2053
+ --docsearch-key-background: var(--vp-code-bg);
2054
+ --docsearch-modal-background: var(--vp-c-bg-soft);
2055
+ --docsearch-muted-color: var(--vp-c-text-2);
2056
+ --docsearch-primary-color: var(--vp-c-brand-1);
2057
+ --docsearch-searchbox-background: var(--vp-c-bg-alt);
2058
+ --docsearch-searchbox-focus-background: transparent;
2059
+ --docsearch-secondary-text-color: var(--vp-c-text-2);
2060
+ --docsearch-sidepanel-accent-muted: var(--vp-c-text-3);
2061
+ --docsearch-sidepanel-text-base: var(--vp-c-text-1);
2062
+ --docsearch-soft-muted-color: var(--vp-c-default-soft);
2063
+ --docsearch-soft-primary-color: var(--vp-c-brand-soft);
2064
+ --docsearch-subtle-color: var(--vp-c-divider);
2065
+ --docsearch-success-color: var(--vp-c-brand-soft);
2066
+ --docsearch-text-color: var(--vp-c-text-1);
2067
+ }
2068
+
2069
+ :root.dark {
2070
+ --docsearch-modal-shadow: none;
2071
+ }
2072
+
2073
+ .DocSearch-AskAiScreen-RelatedSources-Item-Link {
2074
+ padding: 8px 12px 8px 10px;
2075
+ }
2076
+
2077
+ .DocSearch-AskAiScreen-RelatedSources-Item-Link svg {
2078
+ width: 16px;
2079
+ height: 16px;
2080
+ }
2081
+
2082
+ .DocSearch-AskAiScreen-RelatedSources-Title {
2083
+ padding-bottom: 0;
2084
+ font-size: 12px;
2085
+ }
2086
+
2087
+ .DocSearch-Clear {
2088
+ padding-right: 6px;
2089
+ }
2090
+
2091
+ .DocSearch-Commands-Key {
2092
+ padding: 4px;
2093
+ border: 1px solid var(--docsearch-subtle-color);
2094
+ border-radius: 4px;
2095
+ }
2096
+
2097
+ .DocSearch-Hit a:focus-visible {
2098
+ outline: 2px solid var(--docsearch-focus-color);
2099
+ }
2100
+
2101
+ .DocSearch-Logo [class^='cls-'] {
2102
+ fill: currentColor;
2103
+ }
2104
+
2105
+ .DocSearch-Markdown-Content code {
2106
+ padding: 0.2em 0.4em;
2107
+ }
2108
+
2109
+ .DocSearch-Menu-content {
2110
+ margin-top: -4px;
2111
+ padding: 6px;
2112
+ border: 1px solid var(--vp-c-divider);
2113
+ border-radius: 6px;
2114
+ box-shadow: var(--vp-shadow-2);
2115
+ }
2116
+
2117
+ .DocSearch-Menu-item {
2118
+ border-radius: 4px;
2119
+ }
2120
+
2121
+ .DocSearch-SearchBar + .DocSearch-Footer {
2122
+ border-top-color: transparent;
2123
+ }
2124
+
2125
+ .DocSearch-Sidepanel-Prompt--form {
2126
+ border-color: var(--docsearch-subtle-color);
2127
+ transition: border-color 0.2s;
2128
+ }
2129
+
2130
+ .DocSearch-Sidepanel-Prompt--submit {
2131
+ background-color: var(--docsearch-soft-primary-color);
2132
+ color: var(--docsearch-primary-color);
2133
+ }
2134
+
2135
+ .DocSearch-Sidepanel-Prompt--submit:hover {
2136
+ background-color: var(--vp-button-brand-hover-bg);
2137
+ color: var(--vp-button-brand-text);
2138
+ }
2139
+
2140
+ .DocSearch-Sidepanel-Prompt--submit:disabled,
2141
+ .DocSearch-Sidepanel-Prompt--submit[aria-disabled='true'] {
2142
+ background-color: var(--docsearch-soft-muted-color);
2143
+ color: var(--docsearch-muted-color);
2144
+ }
2145
+
2146
+ .DocSearch-Title {
2147
+ font-size: revert;
2148
+ line-height: revert;
2149
+ }