cosmos-docusaurus-theme 2.0.2 → 2.0.3
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.
- package/CHANGELOG.md +25 -1
- package/README.md +34 -33
- package/package.json +12 -3
- package/src/css/theme.css +1061 -259
- package/src/index.js +57 -9
package/src/css/theme.css
CHANGED
|
@@ -17,125 +17,126 @@
|
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
19
|
/* ── Outfit + JetBrains Mono fonts ───────────────────────────────────────── */
|
|
20
|
-
@import 'https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=
|
|
20
|
+
@import 'https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap';
|
|
21
21
|
|
|
22
22
|
/* ── Light mode ──────────────────────────────────────────────────────────── */
|
|
23
23
|
:root {
|
|
24
24
|
/* Brand palette (indigo) — matches Rackscope accent color */
|
|
25
|
-
--ifm-color-primary:
|
|
26
|
-
--ifm-color-primary-dark:
|
|
27
|
-
--ifm-color-primary-darker:
|
|
25
|
+
--ifm-color-primary: #465fff;
|
|
26
|
+
--ifm-color-primary-dark: #3641f5;
|
|
27
|
+
--ifm-color-primary-darker: #2a31d8;
|
|
28
28
|
--ifm-color-primary-darkest: #252dae;
|
|
29
|
-
--ifm-color-primary-light:
|
|
29
|
+
--ifm-color-primary-light: #7592ff;
|
|
30
30
|
--ifm-color-primary-lighter: #9cb9ff;
|
|
31
|
-
--ifm-color-primary-lightest
|
|
31
|
+
--ifm-color-primary-lightest: #dde9ff;
|
|
32
32
|
|
|
33
33
|
/* Typography — Outfit + JetBrains Mono, same as Rackscope app */
|
|
34
|
-
--ifm-font-family-base:
|
|
35
|
-
--ifm-font-family-monospace: '
|
|
36
|
-
--ifm-font-size-base:
|
|
37
|
-
--ifm-font-weight-bold:
|
|
38
|
-
--ifm-line-height-base:
|
|
39
|
-
--ifm-code-font-size:
|
|
40
|
-
--ifm-h1-font-size:
|
|
41
|
-
--ifm-h2-font-size:
|
|
42
|
-
--ifm-h3-font-size:
|
|
34
|
+
--ifm-font-family-base: 'Outfit', system-ui, -apple-system, sans-serif;
|
|
35
|
+
--ifm-font-family-monospace: 'IBM Plex Mono', 'Fira Code', monospace;
|
|
36
|
+
--ifm-font-size-base: 16.5px;
|
|
37
|
+
--ifm-font-weight-bold: 600;
|
|
38
|
+
--ifm-line-height-base: 1.7;
|
|
39
|
+
--ifm-code-font-size: 93%;
|
|
40
|
+
--ifm-h1-font-size: 2.2rem;
|
|
41
|
+
--ifm-h2-font-size: 1.6rem;
|
|
42
|
+
--ifm-h3-font-size: 1.25rem;
|
|
43
43
|
|
|
44
44
|
/* Background — Slate: Tailwind gray-50 / white */
|
|
45
|
-
--ifm-background-color:
|
|
46
|
-
--ifm-background-surface-color:
|
|
45
|
+
--ifm-background-color: #f9fafb;
|
|
46
|
+
--ifm-background-surface-color: #fff;
|
|
47
47
|
|
|
48
48
|
/* Text — Slate: warm brown tones (not cold blue-gray) */
|
|
49
|
-
--ifm-font-color-base:
|
|
50
|
-
--ifm-font-color-secondary: #5c574f;
|
|
49
|
+
--ifm-font-color-base: #1a1714; /* warm near-black */
|
|
50
|
+
--ifm-font-color-secondary: #5c574f; /* warm muted brown */
|
|
51
51
|
|
|
52
52
|
/* Navbar — 72px height */
|
|
53
|
-
--ifm-navbar-height:
|
|
54
|
-
--ifm-navbar-background-color:
|
|
55
|
-
--ifm-navbar-shadow:
|
|
56
|
-
--ifm-navbar-link-color:
|
|
57
|
-
--ifm-navbar-link-hover-color:
|
|
58
|
-
--ifm-navbar-link-active-color:
|
|
53
|
+
--ifm-navbar-height: 72px;
|
|
54
|
+
--ifm-navbar-background-color: #fff;
|
|
55
|
+
--ifm-navbar-shadow: 0px 1px 3px 0px rgb(16, 24, 40, 0.1), 0px 1px 2px 0px rgb(16, 24, 40, 0.06);
|
|
56
|
+
--ifm-navbar-link-color: #2c2822; /* warm dark text */
|
|
57
|
+
--ifm-navbar-link-hover-color: #465fff;
|
|
58
|
+
--ifm-navbar-link-active-color: #465fff;
|
|
59
59
|
|
|
60
60
|
/* Sidebar */
|
|
61
|
-
--ifm-sidebar-width:
|
|
62
|
-
--doc-sidebar-width:
|
|
63
|
-
--ifm-sidebar-padding:
|
|
64
|
-
--docusaurus-collapse-button-bg-hover-color: #f3f4f6;
|
|
61
|
+
--ifm-sidebar-width: 280px;
|
|
62
|
+
--doc-sidebar-width: 280px;
|
|
63
|
+
--ifm-sidebar-padding: 16px;
|
|
64
|
+
--docusaurus-collapse-button-bg-hover-color: #f3f4f6;
|
|
65
65
|
|
|
66
66
|
/* Links */
|
|
67
|
-
--ifm-link-color:
|
|
68
|
-
--ifm-link-hover-color:
|
|
67
|
+
--ifm-link-color: #465fff;
|
|
68
|
+
--ifm-link-hover-color: #3641f5;
|
|
69
69
|
|
|
70
70
|
/* Borders — Slate: Tailwind gray-200 */
|
|
71
|
-
--ifm-toc-border-color:
|
|
72
|
-
--ifm-hr-border-color:
|
|
71
|
+
--ifm-toc-border-color: #e5e7eb;
|
|
72
|
+
--ifm-hr-border-color: #e5e7eb;
|
|
73
73
|
--ifm-color-emphasis-300: #e5e7eb;
|
|
74
74
|
--ifm-color-emphasis-600: #5c574f;
|
|
75
75
|
|
|
76
76
|
/* Code blocks */
|
|
77
|
-
--ifm-code-background:
|
|
78
|
-
--prism-background-color
|
|
77
|
+
--ifm-code-background: #f3f4f6; /* Tailwind gray-100 */
|
|
78
|
+
--prism-background-color: #1f2937; /* Void gray-800 — dark code on light pages */
|
|
79
79
|
--docusaurus-highlighted-code-line-bg: rgb(70, 95, 255, 0.1);
|
|
80
80
|
|
|
81
81
|
/* Shadows */
|
|
82
|
-
--ifm-global-shadow-md:
|
|
83
|
-
|
|
82
|
+
--ifm-global-shadow-md:
|
|
83
|
+
0px 4px 8px -2px rgb(16, 24, 40, 0.1), 0px 2px 4px -2px rgb(16, 24, 40, 0.06);
|
|
84
|
+
--ifm-global-shadow-lw: 0px 1px 2px 0px rgb(16, 24, 40, 0.05);
|
|
84
85
|
|
|
85
86
|
/* Menu item spacing */
|
|
86
87
|
--ifm-menu-link-padding-horizontal: 12px;
|
|
87
|
-
--ifm-menu-link-padding-vertical:
|
|
88
|
+
--ifm-menu-link-padding-vertical: 8px;
|
|
88
89
|
|
|
89
90
|
/* Table */
|
|
90
|
-
--ifm-table-border-color:
|
|
91
|
+
--ifm-table-border-color: #e5e7eb;
|
|
91
92
|
--ifm-table-head-background: #f9fafb;
|
|
92
93
|
}
|
|
93
94
|
|
|
94
95
|
/* ── Dark mode ───────────────────────────────────────────────────────────── */
|
|
95
96
|
[data-theme='dark'] {
|
|
96
97
|
/* Primary — lighter variant for readability on dark backgrounds */
|
|
97
|
-
--ifm-color-primary:
|
|
98
|
-
--ifm-color-primary-dark:
|
|
99
|
-
--ifm-color-primary-darker:
|
|
98
|
+
--ifm-color-primary: #7592ff;
|
|
99
|
+
--ifm-color-primary-dark: #465fff;
|
|
100
|
+
--ifm-color-primary-darker: #3641f5;
|
|
100
101
|
--ifm-color-primary-darkest: #2a31d8;
|
|
101
|
-
--ifm-color-primary-light:
|
|
102
|
+
--ifm-color-primary-light: #9cb9ff;
|
|
102
103
|
--ifm-color-primary-lighter: #c2d6ff;
|
|
103
|
-
--ifm-color-primary-lightest
|
|
104
|
+
--ifm-color-primary-lightest: #dde9ff;
|
|
104
105
|
--docusaurus-highlighted-code-line-bg: rgb(117, 146, 255, 0.15);
|
|
105
106
|
|
|
106
107
|
/* Background — Void: Tailwind gray-950 / gray-900 neutral blacks */
|
|
107
|
-
--ifm-background-color:
|
|
108
|
-
--ifm-background-surface-color: #111827;
|
|
109
|
-
--ifm-navbar-background-color:
|
|
110
|
-
--ifm-footer-background-color:
|
|
108
|
+
--ifm-background-color: #030712; /* gray-950 — deepest background */
|
|
109
|
+
--ifm-background-surface-color: #111827; /* gray-900 — cards, sidebar, panels */
|
|
110
|
+
--ifm-navbar-background-color: #111827;
|
|
111
|
+
--ifm-footer-background-color: #030712;
|
|
111
112
|
|
|
112
113
|
/* Text — neutral grays, no blue tint */
|
|
113
|
-
--ifm-font-color-base:
|
|
114
|
-
--ifm-font-color-secondary: #a3a3a3;
|
|
114
|
+
--ifm-font-color-base: #e5e5e5; /* neutral light */
|
|
115
|
+
--ifm-font-color-secondary: #a3a3a3; /* neutral muted */
|
|
115
116
|
|
|
116
117
|
/* Borders — Void: Tailwind gray-800 */
|
|
117
|
-
--ifm-toc-border-color:
|
|
118
|
-
--ifm-hr-border-color:
|
|
118
|
+
--ifm-toc-border-color: #1f2937;
|
|
119
|
+
--ifm-hr-border-color: #1f2937;
|
|
119
120
|
--ifm-color-emphasis-300: #1f2937;
|
|
120
121
|
--ifm-color-emphasis-600: #a3a3a3;
|
|
121
122
|
--ifm-table-border-color: #1f2937;
|
|
122
123
|
--ifm-table-head-background: #111827;
|
|
123
124
|
|
|
124
125
|
/* Links */
|
|
125
|
-
--ifm-link-color:
|
|
126
|
+
--ifm-link-color: #7592ff;
|
|
126
127
|
--ifm-link-hover-color: #9cb9ff;
|
|
127
128
|
|
|
128
129
|
/* Navbar */
|
|
129
|
-
--ifm-navbar-link-color:
|
|
130
|
+
--ifm-navbar-link-color: #e5e5e5;
|
|
130
131
|
--ifm-navbar-link-hover-color: #7592ff;
|
|
131
|
-
--ifm-navbar-link-active-color
|
|
132
|
+
--ifm-navbar-link-active-color: #7592ff;
|
|
132
133
|
--ifm-navbar-shadow: 0px 1px 0px 0px #1f2937;
|
|
133
134
|
|
|
134
135
|
/* Code */
|
|
135
136
|
--ifm-code-background: #1f2937;
|
|
136
137
|
|
|
137
138
|
/* Sidebar collapse button */
|
|
138
|
-
--docusaurus-collapse-button-bg-hover-color: rgb(255,255,255,0.05);
|
|
139
|
+
--docusaurus-collapse-button-bg-hover-color: rgb(255, 255, 255, 0.05);
|
|
139
140
|
}
|
|
140
141
|
|
|
141
142
|
/* ── Global body ─────────────────────────────────────────────────────────── */
|
|
@@ -169,11 +170,11 @@ article,
|
|
|
169
170
|
/* ── Color mode toggle — styled tooltip ──────────────────────────────────── */
|
|
170
171
|
/* The toggle button has title="dark mode" | "light mode" | "system mode" */
|
|
171
172
|
/* which updates to reflect the current state. We display it as a tooltip. */
|
|
172
|
-
button[aria-label*=
|
|
173
|
+
button[aria-label*='dark and light mode'] {
|
|
173
174
|
position: relative;
|
|
174
175
|
}
|
|
175
176
|
|
|
176
|
-
button[aria-label*=
|
|
177
|
+
button[aria-label*='dark and light mode']::after {
|
|
177
178
|
content: attr(title);
|
|
178
179
|
position: absolute;
|
|
179
180
|
top: calc(100% + 10px);
|
|
@@ -195,7 +196,7 @@ button[aria-label*="dark and light mode"]::after {
|
|
|
195
196
|
}
|
|
196
197
|
|
|
197
198
|
/* Arrow pointing up — aligned with button center */
|
|
198
|
-
button[aria-label*=
|
|
199
|
+
button[aria-label*='dark and light mode']::before {
|
|
199
200
|
content: '';
|
|
200
201
|
position: absolute;
|
|
201
202
|
top: calc(100% + 4px);
|
|
@@ -208,19 +209,19 @@ button[aria-label*="dark and light mode"]::before {
|
|
|
208
209
|
z-index: 100;
|
|
209
210
|
}
|
|
210
211
|
|
|
211
|
-
button[aria-label*=
|
|
212
|
-
button[aria-label*=
|
|
212
|
+
button[aria-label*='dark and light mode']:hover::after,
|
|
213
|
+
button[aria-label*='dark and light mode']:hover::before {
|
|
213
214
|
opacity: 1;
|
|
214
215
|
}
|
|
215
216
|
|
|
216
|
-
[data-theme='light'] button[aria-label*=
|
|
217
|
+
[data-theme='light'] button[aria-label*='dark and light mode']::after {
|
|
217
218
|
background: #fff;
|
|
218
219
|
color: #1a1714;
|
|
219
220
|
border-color: #e5e7eb;
|
|
220
221
|
box-shadow: 0 2px 8px rgb(0, 0, 0, 0.1);
|
|
221
222
|
}
|
|
222
223
|
|
|
223
|
-
[data-theme='light'] button[aria-label*=
|
|
224
|
+
[data-theme='light'] button[aria-label*='dark and light mode']::before {
|
|
224
225
|
border-bottom-color: #e5e7eb;
|
|
225
226
|
border-top-color: transparent;
|
|
226
227
|
}
|
|
@@ -233,14 +234,37 @@ button[aria-label*="dark and light mode"]:hover::before {
|
|
|
233
234
|
}
|
|
234
235
|
|
|
235
236
|
.navbar__brand {
|
|
236
|
-
font-weight: 700;
|
|
237
|
-
font-size: 1.125rem;
|
|
238
|
-
letter-spacing: -0.3px;
|
|
239
237
|
gap: 10px;
|
|
238
|
+
/* Thin vertical separator between brand area and nav items */
|
|
239
|
+
margin-right: 8px;
|
|
240
|
+
padding-right: 16px;
|
|
241
|
+
position: relative;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.navbar__brand::after {
|
|
245
|
+
content: '';
|
|
246
|
+
position: absolute;
|
|
247
|
+
right: 0;
|
|
248
|
+
top: 50%;
|
|
249
|
+
transform: translateY(-50%);
|
|
250
|
+
height: 18px;
|
|
251
|
+
width: 1px;
|
|
252
|
+
background: var(--ifm-toc-border-color);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/* Brand title — Outfit 700 uppercase wordmark, brand indigo */
|
|
256
|
+
.navbar__title {
|
|
257
|
+
font-family: var(--ifm-font-family-base);
|
|
258
|
+
font-size: 0.8125rem;
|
|
259
|
+
font-weight: 700;
|
|
260
|
+
letter-spacing: 0.1em;
|
|
261
|
+
text-transform: uppercase;
|
|
262
|
+
color: #465fff;
|
|
240
263
|
}
|
|
241
264
|
|
|
242
265
|
.navbar__logo {
|
|
243
266
|
height: 28px;
|
|
267
|
+
border-radius: 6px;
|
|
244
268
|
}
|
|
245
269
|
|
|
246
270
|
.navbar__link {
|
|
@@ -248,7 +272,9 @@ button[aria-label*="dark and light mode"]:hover::before {
|
|
|
248
272
|
font-size: 0.875rem;
|
|
249
273
|
border-radius: 6px;
|
|
250
274
|
padding: 6px 10px;
|
|
251
|
-
transition:
|
|
275
|
+
transition:
|
|
276
|
+
background 0.15s,
|
|
277
|
+
color 0.15s;
|
|
252
278
|
}
|
|
253
279
|
|
|
254
280
|
.navbar__link:hover {
|
|
@@ -256,16 +282,41 @@ button[aria-label*="dark and light mode"]:hover::before {
|
|
|
256
282
|
color: var(--ifm-color-primary);
|
|
257
283
|
}
|
|
258
284
|
|
|
285
|
+
/* Active nav item — underline indicator matching Tabs style */
|
|
286
|
+
.navbar__link--active {
|
|
287
|
+
color: #465fff !important;
|
|
288
|
+
position: relative;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.navbar__link--active::after {
|
|
292
|
+
content: '';
|
|
293
|
+
position: absolute;
|
|
294
|
+
bottom: -1px;
|
|
295
|
+
left: 8px;
|
|
296
|
+
right: 8px;
|
|
297
|
+
height: 2px;
|
|
298
|
+
background: #465fff;
|
|
299
|
+
border-radius: 2px 2px 0 0;
|
|
300
|
+
}
|
|
301
|
+
|
|
259
302
|
[data-theme='dark'] .navbar__link:hover {
|
|
260
303
|
color: #7592ff;
|
|
261
|
-
background: rgb(117, 146, 255, 0.
|
|
304
|
+
background: rgb(117, 146, 255, 0.1);
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
[data-theme='dark'] .navbar__link--active {
|
|
308
|
+
color: #7592ff !important;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
[data-theme='dark'] .navbar__link--active::after {
|
|
312
|
+
background: #7592ff;
|
|
262
313
|
}
|
|
263
314
|
|
|
264
315
|
/* Force direct properties — CSS variables alone are not reliable for navbar
|
|
265
316
|
in all Docusaurus deployment modes (SSG, CSR, file:// local builds). */
|
|
266
317
|
[data-theme='dark'] .navbar {
|
|
267
|
-
background-color: #111827;
|
|
268
|
-
border-bottom-color: #1f2937;
|
|
318
|
+
background-color: #111827;
|
|
319
|
+
border-bottom-color: #1f2937;
|
|
269
320
|
}
|
|
270
321
|
|
|
271
322
|
[data-theme='dark'] .navbar__link {
|
|
@@ -276,6 +327,14 @@ button[aria-label*="dark and light mode"]:hover::before {
|
|
|
276
327
|
color: #e5e5e5;
|
|
277
328
|
}
|
|
278
329
|
|
|
330
|
+
[data-theme='dark'] .navbar__brand::after {
|
|
331
|
+
background: #1f2937; /* Void gray-800 */
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
[data-theme='dark'] .navbar__title {
|
|
335
|
+
color: #7592ff;
|
|
336
|
+
}
|
|
337
|
+
|
|
279
338
|
[data-theme='dark'] .navbar__toggle {
|
|
280
339
|
color: #e5e5e5;
|
|
281
340
|
}
|
|
@@ -286,8 +345,8 @@ button[aria-label*="dark and light mode"]:hover::before {
|
|
|
286
345
|
}
|
|
287
346
|
|
|
288
347
|
[data-theme='dark'] .theme-doc-sidebar-container {
|
|
289
|
-
border-right-color: #1f2937 !important;
|
|
290
|
-
background: #111827;
|
|
348
|
+
border-right-color: #1f2937 !important; /* Void gray-800 */
|
|
349
|
+
background: #111827; /* Void gray-900 */
|
|
291
350
|
}
|
|
292
351
|
|
|
293
352
|
.theme-doc-sidebar-menu {
|
|
@@ -300,14 +359,16 @@ button[aria-label*="dark and light mode"]:hover::before {
|
|
|
300
359
|
.menu__list-item .menu__link {
|
|
301
360
|
border-radius: 8px;
|
|
302
361
|
font-weight: 500;
|
|
303
|
-
transition:
|
|
362
|
+
transition:
|
|
363
|
+
background 0.12s,
|
|
364
|
+
color 0.12s;
|
|
304
365
|
}
|
|
305
366
|
|
|
306
367
|
/* Active sidebar link — brand tint bg + brand color text */
|
|
307
368
|
.menu__link--active,
|
|
308
369
|
.menu__link--active:hover {
|
|
309
370
|
background: #ecf3ff;
|
|
310
|
-
color: #465fff;
|
|
371
|
+
color: #465fff;
|
|
311
372
|
font-weight: 600;
|
|
312
373
|
}
|
|
313
374
|
|
|
@@ -323,18 +384,18 @@ button[aria-label*="dark and light mode"]:hover::before {
|
|
|
323
384
|
}
|
|
324
385
|
|
|
325
386
|
.menu__list-item-collapsible:hover {
|
|
326
|
-
background: #f3f4f6;
|
|
387
|
+
background: #f3f4f6; /* Slate gray-100 */
|
|
327
388
|
}
|
|
328
389
|
|
|
329
390
|
[data-theme='dark'] .menu__list-item-collapsible:hover {
|
|
330
|
-
background: rgb(255,255,255,0.05);
|
|
391
|
+
background: rgb(255, 255, 255, 0.05);
|
|
331
392
|
}
|
|
332
393
|
|
|
333
394
|
/* Sidebar section separator — exact Rackscope LayoutLabel pattern */
|
|
334
395
|
.sidebar_menu_section_title {
|
|
335
|
-
font-size: 0.625rem;
|
|
396
|
+
font-size: 0.625rem; /* 10px — matches text-[10px] */
|
|
336
397
|
font-weight: 700;
|
|
337
|
-
letter-spacing: 0.12em;
|
|
398
|
+
letter-spacing: 0.12em; /* tracking-wider */
|
|
338
399
|
text-transform: uppercase;
|
|
339
400
|
color: #a3a3a3;
|
|
340
401
|
padding: 12px 12px 4px;
|
|
@@ -342,14 +403,16 @@ button[aria-label*="dark and light mode"]:hover::before {
|
|
|
342
403
|
|
|
343
404
|
/* ── Code blocks ─────────────────────────────────────────────────────────── */
|
|
344
405
|
.prism-code {
|
|
345
|
-
border-radius: 12px;
|
|
406
|
+
border-radius: 12px; /* rounded-xl — matches Rackscope input/button radius */
|
|
346
407
|
font-size: 0.8625rem;
|
|
347
408
|
line-height: 1.65;
|
|
348
409
|
}
|
|
349
410
|
|
|
350
411
|
[data-theme='dark'] .prism-code {
|
|
351
412
|
/* Heavier shadow in dark — matches Rackscope shadow-card pattern */
|
|
352
|
-
box-shadow:
|
|
413
|
+
box-shadow:
|
|
414
|
+
0 1px 3px rgb(0, 0, 0, 0.4),
|
|
415
|
+
0 1px 2px rgb(0, 0, 0, 0.3);
|
|
353
416
|
}
|
|
354
417
|
|
|
355
418
|
/* Code block title bar */
|
|
@@ -417,11 +480,11 @@ code {
|
|
|
417
480
|
/* Dark mode — Infima applies --ifm-table-head-background directly on th,
|
|
418
481
|
so we must target th explicitly (higher specificity than thead). */
|
|
419
482
|
[data-theme='dark'] table {
|
|
420
|
-
border-color: #374151;
|
|
483
|
+
border-color: #374151; /* gray-700 — slightly more visible than gray-800 */
|
|
421
484
|
}
|
|
422
485
|
|
|
423
486
|
[data-theme='dark'] th {
|
|
424
|
-
background-color: #111827;
|
|
487
|
+
background-color: #111827; /* Void gray-900 */
|
|
425
488
|
color: #e5e5e5;
|
|
426
489
|
border-color: #374151;
|
|
427
490
|
}
|
|
@@ -472,12 +535,8 @@ code {
|
|
|
472
535
|
background: none;
|
|
473
536
|
}
|
|
474
537
|
|
|
475
|
-
[data-theme='dark'] .breadcrumbs__item + .breadcrumbs__item::before {
|
|
476
|
-
color: #374151;
|
|
477
|
-
}
|
|
478
|
-
|
|
479
538
|
[data-theme='dark'] .breadcrumbs__link:not(.breadcrumbs__link--active) {
|
|
480
|
-
color: #9ca3af;
|
|
539
|
+
color: #9ca3af; /* gray-400 — readable on Void dark without being dominant */
|
|
481
540
|
}
|
|
482
541
|
|
|
483
542
|
/* ── Right navbar — unified ghost button style ───────────────────────────── */
|
|
@@ -499,7 +558,10 @@ code {
|
|
|
499
558
|
display: inline-flex;
|
|
500
559
|
align-items: center;
|
|
501
560
|
gap: 6px;
|
|
502
|
-
transition:
|
|
561
|
+
transition:
|
|
562
|
+
border-color 0.15s,
|
|
563
|
+
background 0.15s,
|
|
564
|
+
color 0.15s;
|
|
503
565
|
}
|
|
504
566
|
|
|
505
567
|
.navbar__items--right .navbar__link:hover {
|
|
@@ -509,19 +571,21 @@ code {
|
|
|
509
571
|
}
|
|
510
572
|
|
|
511
573
|
/* Color mode toggle — match the ghost button style of external links */
|
|
512
|
-
button[aria-label*=
|
|
574
|
+
button[aria-label*='dark and light mode'] {
|
|
513
575
|
border: 1px solid var(--ifm-toc-border-color) !important;
|
|
514
576
|
border-radius: 8px !important;
|
|
515
577
|
padding: 5px 8px !important;
|
|
516
|
-
transition:
|
|
578
|
+
transition:
|
|
579
|
+
border-color 0.15s,
|
|
580
|
+
background 0.15s !important;
|
|
517
581
|
}
|
|
518
582
|
|
|
519
|
-
button[aria-label*=
|
|
583
|
+
button[aria-label*='dark and light mode']:hover {
|
|
520
584
|
border-color: var(--ifm-color-primary) !important;
|
|
521
585
|
background: rgb(70, 95, 255, 0.08) !important;
|
|
522
586
|
}
|
|
523
587
|
|
|
524
|
-
[data-theme='dark'] button[aria-label*=
|
|
588
|
+
[data-theme='dark'] button[aria-label*='dark and light mode'] {
|
|
525
589
|
color: #e5e5e5;
|
|
526
590
|
}
|
|
527
591
|
|
|
@@ -534,7 +598,9 @@ button[aria-label*="dark and light mode"]:hover {
|
|
|
534
598
|
|
|
535
599
|
.table-of-contents__link {
|
|
536
600
|
font-size: 0.8125rem;
|
|
537
|
-
transition:
|
|
601
|
+
transition:
|
|
602
|
+
color 0.12s,
|
|
603
|
+
background 0.12s;
|
|
538
604
|
border-radius: 5px;
|
|
539
605
|
padding: 2px 6px;
|
|
540
606
|
margin-left: -7px;
|
|
@@ -549,7 +615,7 @@ button[aria-label*="dark and light mode"]:hover {
|
|
|
549
615
|
}
|
|
550
616
|
|
|
551
617
|
[data-theme='dark'] .table-of-contents > ul > li > .table-of-contents__link {
|
|
552
|
-
color: #d1d5db;
|
|
618
|
+
color: #d1d5db; /* gray-300 — matches Rackscope sidebar label prominence */
|
|
553
619
|
}
|
|
554
620
|
|
|
555
621
|
/* H3-level TOC items (nested) — muted secondary */
|
|
@@ -559,7 +625,7 @@ button[aria-label*="dark and light mode"]:hover {
|
|
|
559
625
|
}
|
|
560
626
|
|
|
561
627
|
[data-theme='dark'] .table-of-contents > ul > li > ul .table-of-contents__link {
|
|
562
|
-
color: #71717a;
|
|
628
|
+
color: #71717a; /* zinc-500 — subtle */
|
|
563
629
|
}
|
|
564
630
|
|
|
565
631
|
/* Hover state */
|
|
@@ -588,7 +654,7 @@ button[aria-label*="dark and light mode"]:hover {
|
|
|
588
654
|
dark:border-gray-800 dark:bg-gray-900 */
|
|
589
655
|
details {
|
|
590
656
|
border: 1px solid var(--ifm-toc-border-color);
|
|
591
|
-
border-radius: 16px;
|
|
657
|
+
border-radius: 16px; /* rounded-2xl */
|
|
592
658
|
background: var(--ifm-background-surface-color);
|
|
593
659
|
margin-bottom: 1rem;
|
|
594
660
|
overflow: hidden;
|
|
@@ -598,7 +664,9 @@ details {
|
|
|
598
664
|
[data-theme='dark'] details {
|
|
599
665
|
background: #111827;
|
|
600
666
|
border-color: #1f2937;
|
|
601
|
-
box-shadow:
|
|
667
|
+
box-shadow:
|
|
668
|
+
0 1px 3px rgb(0, 0, 0, 0.4),
|
|
669
|
+
0 1px 2px rgb(0, 0, 0, 0.3);
|
|
602
670
|
}
|
|
603
671
|
|
|
604
672
|
details > summary {
|
|
@@ -623,12 +691,17 @@ details > summary:hover {
|
|
|
623
691
|
}
|
|
624
692
|
|
|
625
693
|
details > summary::before {
|
|
626
|
-
content: '
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
694
|
+
content: '';
|
|
695
|
+
width: 16px;
|
|
696
|
+
height: 16px;
|
|
697
|
+
flex-shrink: 0;
|
|
698
|
+
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23465fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")
|
|
699
|
+
center / 16px no-repeat;
|
|
700
|
+
transition: transform 0.2s ease;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
[data-theme='dark'] details > summary::before {
|
|
704
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237592ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
|
|
632
705
|
}
|
|
633
706
|
|
|
634
707
|
details[open] > summary::before {
|
|
@@ -645,61 +718,190 @@ details > :not(summary) {
|
|
|
645
718
|
border-top-color: #1f2937;
|
|
646
719
|
}
|
|
647
720
|
|
|
648
|
-
/* ──
|
|
649
|
-
/*
|
|
650
|
-
|
|
721
|
+
/* ── Banners — Dismissible Alert style (Rackscope ui-library/alerts) ─────── */
|
|
722
|
+
/* flex items-start gap-3 rounded-xl bg p-4 — full border all sides,
|
|
723
|
+
icon aligned with title baseline, icon = title color. */
|
|
724
|
+
|
|
725
|
+
/* Reset Infima's left-border-only pattern → uniform 1px border all sides */
|
|
651
726
|
.alert {
|
|
652
|
-
border
|
|
653
|
-
border-
|
|
654
|
-
padding: 16px
|
|
727
|
+
border: 1px solid;
|
|
728
|
+
border-radius: 12px;
|
|
729
|
+
padding: 16px;
|
|
655
730
|
}
|
|
656
731
|
|
|
657
|
-
/*
|
|
658
|
-
.
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
732
|
+
/* Heading — flex row: icon as first item, title text as second.
|
|
733
|
+
align-items: center = perfect icon ↔ title baseline alignment. */
|
|
734
|
+
[class*='admonitionHeading'] {
|
|
735
|
+
display: flex;
|
|
736
|
+
align-items: center;
|
|
737
|
+
gap: 12px;
|
|
738
|
+
font-size: 1.25rem !important;
|
|
739
|
+
font-weight: 600 !important;
|
|
740
|
+
text-transform: none;
|
|
741
|
+
letter-spacing: 0;
|
|
742
|
+
line-height: 1.4;
|
|
743
|
+
margin-bottom: 8px;
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
/* Icon span — 20px, natural Docusaurus SVG size */
|
|
747
|
+
[class*='admonitionIcon'] {
|
|
748
|
+
flex-shrink: 0;
|
|
749
|
+
display: flex;
|
|
750
|
+
align-items: center;
|
|
751
|
+
justify-content: center;
|
|
752
|
+
width: 20px;
|
|
753
|
+
height: 20px;
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
[class*='admonitionIcon'] svg {
|
|
757
|
+
width: 20px !important;
|
|
758
|
+
height: 20px !important;
|
|
759
|
+
min-width: 20px;
|
|
760
|
+
max-width: 20px;
|
|
761
|
+
min-height: 20px;
|
|
762
|
+
max-height: 20px;
|
|
763
|
+
display: block;
|
|
764
|
+
flex-shrink: 0;
|
|
765
|
+
}
|
|
766
|
+
|
|
767
|
+
/* Force SVG paths to inherit color from parent (overrides any hardcoded fill) */
|
|
768
|
+
[class*='admonitionIcon'] svg path,
|
|
769
|
+
[class*='admonitionIcon'] svg circle,
|
|
770
|
+
[class*='admonitionIcon'] svg rect,
|
|
771
|
+
[class*='admonitionIcon'] svg polyline,
|
|
772
|
+
[class*='admonitionIcon'] svg line {
|
|
773
|
+
fill: currentcolor;
|
|
774
|
+
stroke: none;
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
/* Body — indented under title (20px icon + 12px gap = 32px) */
|
|
778
|
+
[class*='admonitionContent'] {
|
|
779
|
+
font-size: 0.875rem;
|
|
780
|
+
padding-left: 32px;
|
|
781
|
+
color: #4b5563;
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
[data-theme='dark'] [class*='admonitionContent'] {
|
|
785
|
+
color: #9ca3af;
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
[class*='admonitionContent'] > p:last-child {
|
|
789
|
+
margin-bottom: 0;
|
|
790
|
+
}
|
|
791
|
+
|
|
792
|
+
/* Code blocks inside banners — full width, cancel body indent */
|
|
793
|
+
[class*='admonitionContent'] pre,
|
|
794
|
+
[class*='admonitionContent'] [class*='codeBlockContainer'] {
|
|
795
|
+
margin-left: -32px;
|
|
796
|
+
margin-right: 0;
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
/* ── note (secondary) — gray ─────────────────── */
|
|
800
|
+
.alert--secondary {
|
|
801
|
+
border-color: rgb(107, 114, 128, 0.25);
|
|
802
|
+
background: rgb(107, 114, 128, 0.05);
|
|
662
803
|
}
|
|
663
804
|
|
|
805
|
+
.alert--secondary [class*='admonitionHeading'],
|
|
806
|
+
.alert--secondary [class*='admonitionIcon'] {
|
|
807
|
+
color: #374151; /* gray-700 */
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
/* ── tip (success) — green ───────────────────── */
|
|
664
811
|
.alert--success {
|
|
665
|
-
border-color: rgb(18, 183, 106, 0.
|
|
666
|
-
border-left-color: #12b76a;
|
|
812
|
+
border-color: rgb(18, 183, 106, 0.3);
|
|
667
813
|
background: rgb(18, 183, 106, 0.05);
|
|
668
814
|
}
|
|
669
815
|
|
|
816
|
+
.alert--success [class*='admonitionHeading'],
|
|
817
|
+
.alert--success [class*='admonitionIcon'] {
|
|
818
|
+
color: #0b7a45; /* success-700 */
|
|
819
|
+
}
|
|
820
|
+
|
|
821
|
+
/* ── info — brand indigo ─────────────────────── */
|
|
822
|
+
.alert--info {
|
|
823
|
+
border-color: rgb(70, 95, 255, 0.3);
|
|
824
|
+
background: rgb(70, 95, 255, 0.05);
|
|
825
|
+
}
|
|
826
|
+
|
|
827
|
+
.alert--info [class*='admonitionHeading'],
|
|
828
|
+
.alert--info [class*='admonitionIcon'] {
|
|
829
|
+
color: #252dae; /* brand-700 */
|
|
830
|
+
}
|
|
831
|
+
|
|
832
|
+
/* ── warning — amber ─────────────────────────── */
|
|
670
833
|
.alert--warning {
|
|
671
|
-
border-color: rgb(247, 144, 9, 0.
|
|
672
|
-
border-left-color: #f79009;
|
|
834
|
+
border-color: rgb(247, 144, 9, 0.3);
|
|
673
835
|
background: rgb(247, 144, 9, 0.05);
|
|
674
836
|
}
|
|
675
837
|
|
|
838
|
+
.alert--warning [class*='admonitionHeading'],
|
|
839
|
+
.alert--warning [class*='admonitionIcon'] {
|
|
840
|
+
color: #92400e; /* warning-700 / amber-800 */
|
|
841
|
+
}
|
|
842
|
+
|
|
843
|
+
/* ── danger — red ────────────────────────────── */
|
|
676
844
|
.alert--danger {
|
|
677
|
-
border-color: rgb(240, 68, 56, 0.
|
|
678
|
-
border-left-color: #f04438;
|
|
845
|
+
border-color: rgb(240, 68, 56, 0.3);
|
|
679
846
|
background: rgb(240, 68, 56, 0.05);
|
|
680
847
|
}
|
|
681
848
|
|
|
682
|
-
|
|
683
|
-
[
|
|
684
|
-
|
|
685
|
-
|
|
849
|
+
.alert--danger [class*='admonitionHeading'],
|
|
850
|
+
.alert--danger [class*='admonitionIcon'] {
|
|
851
|
+
color: #991b1b; /* error-700 */
|
|
852
|
+
}
|
|
853
|
+
|
|
854
|
+
/* ── Dark mode — bg opacity up, lighter title+icon ── */
|
|
855
|
+
[data-theme='dark'] .alert--secondary {
|
|
856
|
+
border-color: rgb(107, 114, 128, 0.2);
|
|
857
|
+
background: rgb(107, 114, 128, 0.08);
|
|
858
|
+
}
|
|
859
|
+
|
|
860
|
+
[data-theme='dark'] .alert--secondary [class*='admonitionHeading'],
|
|
861
|
+
[data-theme='dark'] .alert--secondary [class*='admonitionIcon'] {
|
|
862
|
+
color: #9ca3af; /* gray-400 */
|
|
686
863
|
}
|
|
687
864
|
|
|
688
865
|
[data-theme='dark'] .alert--success {
|
|
689
|
-
border-color: rgb(18, 183, 106, 0.
|
|
866
|
+
border-color: rgb(18, 183, 106, 0.25);
|
|
690
867
|
background: rgb(18, 183, 106, 0.08);
|
|
691
868
|
}
|
|
692
869
|
|
|
870
|
+
[data-theme='dark'] .alert--success [class*='admonitionHeading'],
|
|
871
|
+
[data-theme='dark'] .alert--success [class*='admonitionIcon'] {
|
|
872
|
+
color: #34d399; /* emerald-400 */
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
[data-theme='dark'] .alert--info {
|
|
876
|
+
border-color: rgb(70, 95, 255, 0.25);
|
|
877
|
+
background: rgb(70, 95, 255, 0.08);
|
|
878
|
+
}
|
|
879
|
+
|
|
880
|
+
[data-theme='dark'] .alert--info [class*='admonitionHeading'],
|
|
881
|
+
[data-theme='dark'] .alert--info [class*='admonitionIcon'] {
|
|
882
|
+
color: #7592ff; /* brand-400 */
|
|
883
|
+
}
|
|
884
|
+
|
|
693
885
|
[data-theme='dark'] .alert--warning {
|
|
694
|
-
border-color: rgb(247, 144, 9, 0.
|
|
886
|
+
border-color: rgb(247, 144, 9, 0.25);
|
|
695
887
|
background: rgb(247, 144, 9, 0.08);
|
|
696
888
|
}
|
|
697
889
|
|
|
890
|
+
[data-theme='dark'] .alert--warning [class*='admonitionHeading'],
|
|
891
|
+
[data-theme='dark'] .alert--warning [class*='admonitionIcon'] {
|
|
892
|
+
color: #fbbf24; /* amber-400 */
|
|
893
|
+
}
|
|
894
|
+
|
|
698
895
|
[data-theme='dark'] .alert--danger {
|
|
699
|
-
border-color: rgb(240, 68, 56, 0.
|
|
896
|
+
border-color: rgb(240, 68, 56, 0.25);
|
|
700
897
|
background: rgb(240, 68, 56, 0.08);
|
|
701
898
|
}
|
|
702
899
|
|
|
900
|
+
[data-theme='dark'] .alert--danger [class*='admonitionHeading'],
|
|
901
|
+
[data-theme='dark'] .alert--danger [class*='admonitionIcon'] {
|
|
902
|
+
color: #f87171; /* red-400 */
|
|
903
|
+
}
|
|
904
|
+
|
|
703
905
|
/* ── Badges ───────────────────────────────────────────────────────────────── */
|
|
704
906
|
.badge--success {
|
|
705
907
|
background: #12b76a;
|
|
@@ -716,18 +918,110 @@ details > :not(summary) {
|
|
|
716
918
|
color: white;
|
|
717
919
|
}
|
|
718
920
|
|
|
719
|
-
/* ── Footer
|
|
921
|
+
/* ── Footer — 4-column layout ────────────────────────────────────────────── */
|
|
922
|
+
/* Designed for sites that enable a footer in docusaurus.config.js.
|
|
923
|
+
Supports 2, 3, or 4 columns — centered, max-width contained.
|
|
924
|
+
The demo site has footer disabled — see docusaurus.config.js comments. */
|
|
720
925
|
.footer {
|
|
721
926
|
border-top: 1px solid var(--ifm-toc-border-color);
|
|
722
927
|
font-size: 0.875rem;
|
|
928
|
+
padding: 48px 0 32px;
|
|
723
929
|
}
|
|
724
930
|
|
|
725
931
|
[data-theme='dark'] .footer {
|
|
726
|
-
background-color: #030712;
|
|
727
|
-
border-top-color: #1f2937;
|
|
932
|
+
background-color: #030712;
|
|
933
|
+
border-top-color: #1f2937;
|
|
728
934
|
color: #a3a3a3;
|
|
729
935
|
}
|
|
730
936
|
|
|
937
|
+
/* Container — centered, max-width for readability */
|
|
938
|
+
.footer .container {
|
|
939
|
+
max-width: 960px !important;
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
/* Links grid — 4 equal columns, responsive */
|
|
943
|
+
.footer__links {
|
|
944
|
+
display: grid !important;
|
|
945
|
+
grid-template-columns: repeat(4, 1fr) !important;
|
|
946
|
+
gap: 2rem !important;
|
|
947
|
+
margin-bottom: 40px !important;
|
|
948
|
+
}
|
|
949
|
+
|
|
950
|
+
@media (width <= 768px) {
|
|
951
|
+
.footer__links {
|
|
952
|
+
grid-template-columns: repeat(2, 1fr) !important;
|
|
953
|
+
}
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
@media (width <= 480px) {
|
|
957
|
+
.footer__links {
|
|
958
|
+
grid-template-columns: 1fr !important;
|
|
959
|
+
}
|
|
960
|
+
}
|
|
961
|
+
|
|
962
|
+
/* Column */
|
|
963
|
+
.footer__col {
|
|
964
|
+
min-width: 0 !important;
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
/* Column title */
|
|
968
|
+
.footer__title {
|
|
969
|
+
font-family: var(--ifm-font-family-monospace) !important;
|
|
970
|
+
font-size: 0.62rem !important;
|
|
971
|
+
font-weight: 700 !important;
|
|
972
|
+
letter-spacing: 0.1em !important;
|
|
973
|
+
text-transform: uppercase !important;
|
|
974
|
+
color: var(--ifm-color-primary) !important;
|
|
975
|
+
margin-bottom: 16px !important;
|
|
976
|
+
opacity: 0.9;
|
|
977
|
+
}
|
|
978
|
+
|
|
979
|
+
[data-theme='dark'] .footer__title {
|
|
980
|
+
color: #7592ff !important;
|
|
981
|
+
}
|
|
982
|
+
|
|
983
|
+
/* Footer links */
|
|
984
|
+
.footer__link-item {
|
|
985
|
+
display: block;
|
|
986
|
+
font-size: 0.875rem !important;
|
|
987
|
+
color: var(--ifm-font-color-secondary) !important;
|
|
988
|
+
padding: 3px 0;
|
|
989
|
+
transition:
|
|
990
|
+
color 0.12s,
|
|
991
|
+
opacity 0.12s !important;
|
|
992
|
+
opacity: 0.8;
|
|
993
|
+
}
|
|
994
|
+
|
|
995
|
+
.footer__link-item:hover {
|
|
996
|
+
color: var(--ifm-color-primary) !important;
|
|
997
|
+
opacity: 1 !important;
|
|
998
|
+
text-decoration: none !important;
|
|
999
|
+
}
|
|
1000
|
+
|
|
1001
|
+
[data-theme='dark'] .footer__link-item {
|
|
1002
|
+
color: #6b7280 !important;
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
[data-theme='dark'] .footer__link-item:hover {
|
|
1006
|
+
color: #7592ff !important;
|
|
1007
|
+
}
|
|
1008
|
+
|
|
1009
|
+
/* Copyright bar */
|
|
1010
|
+
.footer__copyright {
|
|
1011
|
+
font-family: var(--ifm-font-family-monospace) !important;
|
|
1012
|
+
font-size: 0.68rem !important;
|
|
1013
|
+
letter-spacing: 0.04em !important;
|
|
1014
|
+
border-top: 1px solid var(--ifm-toc-border-color) !important;
|
|
1015
|
+
padding-top: 20px !important;
|
|
1016
|
+
text-align: center;
|
|
1017
|
+
color: var(--ifm-font-color-secondary) !important;
|
|
1018
|
+
opacity: 0.5;
|
|
1019
|
+
}
|
|
1020
|
+
|
|
1021
|
+
[data-theme='dark'] .footer__copyright {
|
|
1022
|
+
border-top-color: #1f2937 !important;
|
|
1023
|
+
}
|
|
1024
|
+
|
|
731
1025
|
/* Force dark background on main page body — mirrors AppLayout dark:bg-gray-950 */
|
|
732
1026
|
[data-theme='dark'] .main-wrapper {
|
|
733
1027
|
background-color: #030712;
|
|
@@ -739,19 +1033,44 @@ details > :not(summary) {
|
|
|
739
1033
|
}
|
|
740
1034
|
|
|
741
1035
|
/* ── Pagination nav ───────────────────────────────────────────────────────── */
|
|
1036
|
+
/* Matches Rackscope PageActionButton style — rounded-lg, brand hover ring. */
|
|
742
1037
|
.pagination-nav__link {
|
|
743
1038
|
border-color: var(--ifm-toc-border-color);
|
|
744
|
-
border-radius:
|
|
745
|
-
transition:
|
|
1039
|
+
border-radius: 8px; /* rounded-lg */
|
|
1040
|
+
transition:
|
|
1041
|
+
border-color 0.15s,
|
|
1042
|
+
background 0.15s,
|
|
1043
|
+
box-shadow 0.15s;
|
|
746
1044
|
}
|
|
747
1045
|
|
|
748
1046
|
.pagination-nav__link:hover {
|
|
749
1047
|
border-color: var(--ifm-color-primary);
|
|
750
|
-
|
|
1048
|
+
background: rgb(70, 95, 255, 0.04);
|
|
1049
|
+
box-shadow: 0 0 0 3px rgb(70, 95, 255, 0.1);
|
|
751
1050
|
}
|
|
752
1051
|
|
|
753
1052
|
[data-theme='dark'] .pagination-nav__link:hover {
|
|
754
|
-
|
|
1053
|
+
background: rgb(117, 146, 255, 0.06);
|
|
1054
|
+
box-shadow:
|
|
1055
|
+
0 4px 12px rgb(0, 0, 0, 0.3),
|
|
1056
|
+
0 0 0 2px rgb(117, 146, 255, 0.15);
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
/* Sublabel — monospace uppercase like sidebar section labels */
|
|
1060
|
+
.pagination-nav__sublabel {
|
|
1061
|
+
font-family: var(--ifm-font-family-monospace);
|
|
1062
|
+
font-size: 0.62rem;
|
|
1063
|
+
font-weight: 700;
|
|
1064
|
+
letter-spacing: 0.1em;
|
|
1065
|
+
text-transform: uppercase;
|
|
1066
|
+
color: var(--ifm-color-primary);
|
|
1067
|
+
opacity: 0.8;
|
|
1068
|
+
margin-bottom: 4px;
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1071
|
+
.pagination-nav__label {
|
|
1072
|
+
font-weight: 600;
|
|
1073
|
+
font-size: 0.9375rem;
|
|
755
1074
|
}
|
|
756
1075
|
|
|
757
1076
|
/* ── Progress bar (page loading indicator) ───────────────────────────────── */
|
|
@@ -765,23 +1084,32 @@ details > :not(summary) {
|
|
|
765
1084
|
|
|
766
1085
|
/* ── Announcement bar ─────────────────────────────────────────────────────── */
|
|
767
1086
|
.announcement {
|
|
768
|
-
|
|
1087
|
+
/* Dark band with subtle gradient — more refined than flat indigo */
|
|
1088
|
+
background: linear-gradient(135deg, #2a31d8 0%, #465fff 60%, #3641f5 100%);
|
|
769
1089
|
color: #fff;
|
|
770
|
-
font-size: 0.
|
|
1090
|
+
font-size: 0.8125rem;
|
|
771
1091
|
font-weight: 500;
|
|
1092
|
+
letter-spacing: 0.01em;
|
|
1093
|
+
border-bottom: 1px solid rgb(255, 255, 255, 0.1);
|
|
772
1094
|
}
|
|
773
1095
|
|
|
774
1096
|
.announcement a {
|
|
775
|
-
color: #
|
|
776
|
-
|
|
1097
|
+
color: #c2d6ff;
|
|
1098
|
+
font-weight: 600;
|
|
1099
|
+
text-decoration: none;
|
|
1100
|
+
border-bottom: 1px solid rgb(194, 214, 255, 0.4);
|
|
1101
|
+
transition:
|
|
1102
|
+
color 0.12s,
|
|
1103
|
+
border-color 0.12s;
|
|
777
1104
|
}
|
|
778
1105
|
|
|
779
1106
|
.announcement a:hover {
|
|
780
1107
|
color: #fff;
|
|
1108
|
+
border-bottom-color: #fff;
|
|
781
1109
|
}
|
|
782
1110
|
|
|
783
1111
|
.announcement-close {
|
|
784
|
-
color: rgb(255,255,255,0.
|
|
1112
|
+
color: rgb(255, 255, 255, 0.6);
|
|
785
1113
|
}
|
|
786
1114
|
|
|
787
1115
|
.announcement-close:hover {
|
|
@@ -789,70 +1117,142 @@ details > :not(summary) {
|
|
|
789
1117
|
}
|
|
790
1118
|
|
|
791
1119
|
[data-theme='dark'] .announcement {
|
|
792
|
-
background
|
|
1120
|
+
background: linear-gradient(135deg, #1e2a6e 0%, #2a31d8 60%, #252dae 100%);
|
|
1121
|
+
border-bottom-color: rgb(255, 255, 255, 0.08);
|
|
793
1122
|
}
|
|
794
1123
|
|
|
795
1124
|
/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
|
|
1125
|
+
/* Matches Rackscope "With Icons" variant — ChevronRight separator,
|
|
1126
|
+
brand hover on inactive items, muted color for trail. */
|
|
796
1127
|
:root {
|
|
797
|
-
--ifm-breadcrumb-color-active:
|
|
798
|
-
--ifm-breadcrumb-item-background-active:
|
|
799
|
-
--ifm-breadcrumb-border-radius:
|
|
800
|
-
--ifm-breadcrumb-padding-horizontal:
|
|
801
|
-
--ifm-breadcrumb-padding-vertical:
|
|
802
|
-
|
|
1128
|
+
--ifm-breadcrumb-color-active: #465fff;
|
|
1129
|
+
--ifm-breadcrumb-item-background-active: transparent;
|
|
1130
|
+
--ifm-breadcrumb-border-radius: 4px;
|
|
1131
|
+
--ifm-breadcrumb-padding-horizontal: 4px;
|
|
1132
|
+
--ifm-breadcrumb-padding-vertical: 2px;
|
|
1133
|
+
/* Disable Infima's built-in separator — we supply our own SVG via ::before */
|
|
1134
|
+
--ifm-breadcrumb-separator: none;
|
|
1135
|
+
--ifm-breadcrumb-separator-size-multiplier: 0;
|
|
803
1136
|
}
|
|
804
1137
|
|
|
805
1138
|
.breadcrumbs__link {
|
|
806
|
-
border-radius:
|
|
1139
|
+
border-radius: 4px;
|
|
807
1140
|
font-size: 0.8125rem;
|
|
808
|
-
|
|
1141
|
+
color: #6b7280; /* gray-500 — muted trail */
|
|
1142
|
+
transition:
|
|
1143
|
+
color 0.12s,
|
|
1144
|
+
background 0.12s;
|
|
1145
|
+
}
|
|
1146
|
+
|
|
1147
|
+
.breadcrumbs__link:hover {
|
|
1148
|
+
background: transparent;
|
|
1149
|
+
color: var(--ifm-color-primary);
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
/* ChevronRight separator — our SVG, Infima's built-in separator disabled via
|
|
1153
|
+
--ifm-breadcrumb-separator: none above. background shorthand resets all
|
|
1154
|
+
sub-properties to prevent Infima's background from bleeding through. */
|
|
1155
|
+
/* Each breadcrumb item is a flex row — ::before becomes a flex item,
|
|
1156
|
+
align-items: center provides true pixel-perfect vertical centering.
|
|
1157
|
+
vertical-align has no effect in flex context and is intentionally omitted. */
|
|
1158
|
+
.breadcrumbs__item {
|
|
1159
|
+
display: flex;
|
|
1160
|
+
align-items: center;
|
|
1161
|
+
}
|
|
1162
|
+
|
|
1163
|
+
.breadcrumbs__item + .breadcrumbs__item::before {
|
|
1164
|
+
content: '';
|
|
1165
|
+
display: block; /* flex item, not inline-block */
|
|
1166
|
+
flex-shrink: 0;
|
|
1167
|
+
width: 14px;
|
|
1168
|
+
height: 14px;
|
|
1169
|
+
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")
|
|
1170
|
+
center / 14px no-repeat;
|
|
1171
|
+
margin: 0 2px;
|
|
1172
|
+
}
|
|
1173
|
+
|
|
1174
|
+
[data-theme='dark'] .breadcrumbs__item + .breadcrumbs__item::before {
|
|
1175
|
+
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")
|
|
1176
|
+
center / 14px no-repeat;
|
|
1177
|
+
}
|
|
1178
|
+
|
|
1179
|
+
[data-theme='dark'] .breadcrumbs__link {
|
|
1180
|
+
color: #6b7280;
|
|
1181
|
+
}
|
|
1182
|
+
|
|
1183
|
+
[data-theme='dark'] .breadcrumbs__link:hover {
|
|
1184
|
+
color: #7592ff;
|
|
809
1185
|
}
|
|
810
1186
|
|
|
811
1187
|
/* ── Tabs ────────────────────────────────────────────────────────────────── */
|
|
1188
|
+
/* Matches Rackscope Tabs component — flat underline, brand active,
|
|
1189
|
+
no background fill on hover (clean underline-only style). */
|
|
812
1190
|
:root {
|
|
813
|
-
--ifm-tabs-color:
|
|
814
|
-
--ifm-tabs-color-active:
|
|
1191
|
+
--ifm-tabs-color: #6b7280; /* gray-500 — inactive */
|
|
1192
|
+
--ifm-tabs-color-active: #465fff;
|
|
815
1193
|
--ifm-tabs-color-active-border: #465fff;
|
|
816
|
-
--ifm-tabs-padding-horizontal:
|
|
817
|
-
--ifm-tabs-padding-vertical:
|
|
1194
|
+
--ifm-tabs-padding-horizontal: 16px;
|
|
1195
|
+
--ifm-tabs-padding-vertical: 10px;
|
|
818
1196
|
}
|
|
819
1197
|
|
|
820
1198
|
[data-theme='dark'] {
|
|
821
|
-
--ifm-tabs-color: #
|
|
1199
|
+
--ifm-tabs-color: #6b7280;
|
|
1200
|
+
--ifm-tabs-color-active: #7592ff;
|
|
1201
|
+
--ifm-tabs-color-active-border: #7592ff;
|
|
1202
|
+
}
|
|
1203
|
+
|
|
1204
|
+
/* Tab strip — bottom border as container */
|
|
1205
|
+
.tabs {
|
|
1206
|
+
border-bottom: 1px solid var(--ifm-toc-border-color);
|
|
1207
|
+
gap: 0;
|
|
822
1208
|
}
|
|
823
1209
|
|
|
824
1210
|
.tabs__item {
|
|
825
|
-
border-radius:
|
|
1211
|
+
border-radius: 0; /* flat underline — no top radius */
|
|
1212
|
+
border-bottom: 2px solid transparent;
|
|
826
1213
|
font-weight: 500;
|
|
827
1214
|
font-size: 0.875rem;
|
|
828
|
-
|
|
1215
|
+
color: var(--ifm-tabs-color);
|
|
1216
|
+
transition:
|
|
1217
|
+
color 0.12s,
|
|
1218
|
+
border-color 0.12s;
|
|
1219
|
+
}
|
|
1220
|
+
|
|
1221
|
+
.tabs__item--active {
|
|
1222
|
+
border-bottom-color: var(--ifm-tabs-color-active-border);
|
|
1223
|
+
color: var(--ifm-tabs-color-active);
|
|
829
1224
|
}
|
|
830
1225
|
|
|
831
1226
|
.tabs__item:hover:not(.tabs__item--active) {
|
|
832
|
-
background:
|
|
833
|
-
color: var(--ifm-color-
|
|
1227
|
+
background: transparent; /* no fill — clean underline style */
|
|
1228
|
+
color: var(--ifm-font-color-base);
|
|
1229
|
+
border-bottom-color: var(--ifm-toc-border-color);
|
|
834
1230
|
}
|
|
835
1231
|
|
|
836
1232
|
/* ── Cards ───────────────────────────────────────────────────────────────── */
|
|
837
1233
|
:root {
|
|
838
1234
|
--ifm-card-background-color: #fff;
|
|
839
|
-
--ifm-card-border-radius:
|
|
1235
|
+
--ifm-card-border-radius: 16px; /* rounded-2xl — matches Rackscope SectionCard */
|
|
840
1236
|
}
|
|
841
1237
|
|
|
842
1238
|
[data-theme='dark'] {
|
|
843
|
-
--ifm-card-background-color: #111827;
|
|
1239
|
+
--ifm-card-background-color: #111827; /* Void gray-900 */
|
|
844
1240
|
}
|
|
845
1241
|
|
|
846
1242
|
.card {
|
|
847
1243
|
border: 1px solid var(--ifm-toc-border-color);
|
|
848
1244
|
border-radius: var(--ifm-card-border-radius);
|
|
849
1245
|
box-shadow: var(--ifm-global-shadow-lw);
|
|
850
|
-
transition:
|
|
1246
|
+
transition:
|
|
1247
|
+
border-color 0.15s,
|
|
1248
|
+
box-shadow 0.15s;
|
|
851
1249
|
}
|
|
852
1250
|
|
|
853
1251
|
/* Dark mode: heavier shadow — matches Rackscope shadow-card pattern */
|
|
854
1252
|
[data-theme='dark'] .card {
|
|
855
|
-
box-shadow:
|
|
1253
|
+
box-shadow:
|
|
1254
|
+
0 1px 3px rgb(0, 0, 0, 0.4),
|
|
1255
|
+
0 1px 2px rgb(0, 0, 0, 0.3);
|
|
856
1256
|
}
|
|
857
1257
|
|
|
858
1258
|
.card:hover {
|
|
@@ -861,19 +1261,21 @@ details > :not(summary) {
|
|
|
861
1261
|
}
|
|
862
1262
|
|
|
863
1263
|
[data-theme='dark'] .card:hover {
|
|
864
|
-
box-shadow:
|
|
1264
|
+
box-shadow:
|
|
1265
|
+
0 10px 25px rgb(0, 0, 0, 0.5),
|
|
1266
|
+
0 4px 6px rgb(0, 0, 0, 0.2);
|
|
865
1267
|
}
|
|
866
1268
|
|
|
867
1269
|
/* ── Tags ────────────────────────────────────────────────────────────────── */
|
|
868
1270
|
:root {
|
|
869
|
-
--ifm-tag-background:
|
|
870
|
-
--ifm-tag-color:
|
|
871
|
-
--ifm-tag-border-color:
|
|
1271
|
+
--ifm-tag-background: rgb(70, 95, 255, 0.08);
|
|
1272
|
+
--ifm-tag-color: #465fff;
|
|
1273
|
+
--ifm-tag-border-color: rgb(70, 95, 255, 0.2);
|
|
872
1274
|
}
|
|
873
1275
|
|
|
874
1276
|
[data-theme='dark'] {
|
|
875
|
-
--ifm-tag-background:
|
|
876
|
-
--ifm-tag-color:
|
|
1277
|
+
--ifm-tag-background: rgb(117, 146, 255, 0.1);
|
|
1278
|
+
--ifm-tag-color: #7592ff;
|
|
877
1279
|
--ifm-tag-border-color: rgb(117, 146, 255, 0.25);
|
|
878
1280
|
}
|
|
879
1281
|
|
|
@@ -882,7 +1284,9 @@ details > :not(summary) {
|
|
|
882
1284
|
font-size: 0.75rem;
|
|
883
1285
|
font-weight: 500;
|
|
884
1286
|
padding: 2px 10px;
|
|
885
|
-
transition:
|
|
1287
|
+
transition:
|
|
1288
|
+
background 0.12s,
|
|
1289
|
+
color 0.12s;
|
|
886
1290
|
}
|
|
887
1291
|
|
|
888
1292
|
/* ── Back-to-top button ──────────────────────────────────────────────────── */
|
|
@@ -913,8 +1317,7 @@ details > :not(summary) {
|
|
|
913
1317
|
/* Modal dropdown */
|
|
914
1318
|
--search-local-modal-background: #fff;
|
|
915
1319
|
--search-local-modal-shadow:
|
|
916
|
-
0 8px 24px rgb(0, 0, 0, 0.12),
|
|
917
|
-
inset 1px 1px 0 0 rgb(255, 255, 255, 0.8);
|
|
1320
|
+
0 8px 24px rgb(0, 0, 0, 0.12), inset 1px 1px 0 0 rgb(255, 255, 255, 0.8);
|
|
918
1321
|
/* Result items */
|
|
919
1322
|
--search-local-hit-background: #fff;
|
|
920
1323
|
--search-local-hit-shadow: 0 1px 3px rgb(0, 0, 0, 0.08);
|
|
@@ -932,11 +1335,9 @@ details > :not(summary) {
|
|
|
932
1335
|
|
|
933
1336
|
/* Dark mode (Void) */
|
|
934
1337
|
[data-theme='dark'] {
|
|
935
|
-
--search-local-modal-background: #111827;
|
|
936
|
-
--search-local-modal-shadow:
|
|
937
|
-
|
|
938
|
-
0 8px 32px rgb(0, 0, 0, 0.5);
|
|
939
|
-
--search-local-hit-background: #1f2937; /* Void gray-800 */
|
|
1338
|
+
--search-local-modal-background: #111827; /* Void gray-900 */
|
|
1339
|
+
--search-local-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 8px 32px rgb(0, 0, 0, 0.5);
|
|
1340
|
+
--search-local-hit-background: #1f2937; /* Void gray-800 */
|
|
940
1341
|
--search-local-hit-shadow: none;
|
|
941
1342
|
--search-local-hit-color: #e5e5e5;
|
|
942
1343
|
--search-local-muted-color: #71717a;
|
|
@@ -965,7 +1366,10 @@ details > :not(summary) {
|
|
|
965
1366
|
font-size: 0.875rem !important;
|
|
966
1367
|
background-color: #f3f4f6 !important;
|
|
967
1368
|
color: #1a1714 !important;
|
|
968
|
-
transition:
|
|
1369
|
+
transition:
|
|
1370
|
+
border-color 0.15s,
|
|
1371
|
+
background-color 0.15s,
|
|
1372
|
+
box-shadow 0.15s !important;
|
|
969
1373
|
}
|
|
970
1374
|
|
|
971
1375
|
.navbar__search-input::placeholder {
|
|
@@ -985,7 +1389,7 @@ details > :not(summary) {
|
|
|
985
1389
|
.navbar__search-input:focus {
|
|
986
1390
|
border-color: var(--ifm-color-primary) !important;
|
|
987
1391
|
background-color: var(--ifm-background-surface-color) !important;
|
|
988
|
-
box-shadow: 0 0 0 3px rgb(70, 95, 255, 0.
|
|
1392
|
+
box-shadow: 0 0 0 3px rgb(70, 95, 255, 0.1) !important;
|
|
989
1393
|
outline: none !important;
|
|
990
1394
|
}
|
|
991
1395
|
|
|
@@ -998,14 +1402,14 @@ details > :not(summary) {
|
|
|
998
1402
|
Uses currentColor border so it adapts to both Void and Slate automatically. */
|
|
999
1403
|
|
|
1000
1404
|
/* Inner hint wrapper: flex row for the two keys */
|
|
1001
|
-
[class*=
|
|
1405
|
+
[class*='searchHint']:not([class*='Container']) {
|
|
1002
1406
|
display: inline-flex !important;
|
|
1003
1407
|
align-items: center !important;
|
|
1004
1408
|
gap: 0 !important;
|
|
1005
1409
|
}
|
|
1006
1410
|
|
|
1007
1411
|
/* Each key: ghost chip, no fill, hairline border */
|
|
1008
|
-
[class*=
|
|
1412
|
+
[class*='searchHintContainer'] kbd {
|
|
1009
1413
|
background: transparent !important;
|
|
1010
1414
|
border: 1px solid var(--ifm-toc-border-color) !important;
|
|
1011
1415
|
border-radius: 4px !important;
|
|
@@ -1021,11 +1425,11 @@ details > :not(summary) {
|
|
|
1021
1425
|
}
|
|
1022
1426
|
|
|
1023
1427
|
/* "+" separator between the two kbd elements */
|
|
1024
|
-
[class*=
|
|
1428
|
+
[class*='searchHintContainer'] kbd + kbd {
|
|
1025
1429
|
margin-left: 2px !important;
|
|
1026
1430
|
}
|
|
1027
1431
|
|
|
1028
|
-
[class*=
|
|
1432
|
+
[class*='searchHintContainer'] kbd + kbd::before {
|
|
1029
1433
|
content: '+';
|
|
1030
1434
|
font-family: var(--ifm-font-family-monospace) !important;
|
|
1031
1435
|
font-size: 0.6rem !important;
|
|
@@ -1035,8 +1439,8 @@ details > :not(summary) {
|
|
|
1035
1439
|
}
|
|
1036
1440
|
|
|
1037
1441
|
/* Whole hint brightens on input focus — discovery moment */
|
|
1038
|
-
.navbar__search-input:focus ~ [class*=
|
|
1039
|
-
.navbar__search-input:focus + [class*=
|
|
1442
|
+
.navbar__search-input:focus ~ [class*='searchHintContainer'],
|
|
1443
|
+
.navbar__search-input:focus + [class*='searchHintContainer'] {
|
|
1040
1444
|
opacity: 0.9 !important;
|
|
1041
1445
|
}
|
|
1042
1446
|
|
|
@@ -1046,8 +1450,8 @@ details > :not(summary) {
|
|
|
1046
1450
|
Use !important to beat any default ordering. */
|
|
1047
1451
|
|
|
1048
1452
|
/* Search container (class contains 'navbarSearch') — leftmost */
|
|
1049
|
-
[class*=
|
|
1050
|
-
[class*=
|
|
1453
|
+
[class*='navbarSearch'],
|
|
1454
|
+
[class*='navbarSearchContainer'] {
|
|
1051
1455
|
order: -1 !important;
|
|
1052
1456
|
}
|
|
1053
1457
|
|
|
@@ -1057,47 +1461,47 @@ details > :not(summary) {
|
|
|
1057
1461
|
}
|
|
1058
1462
|
|
|
1059
1463
|
/* Color mode toggle wrapper — rightmost */
|
|
1060
|
-
[class*=
|
|
1464
|
+
[class*='colorModeToggle'] {
|
|
1061
1465
|
order: 1 !important;
|
|
1062
1466
|
}
|
|
1063
1467
|
|
|
1064
1468
|
/* ── Algolia DocSearch ───────────────────────────────────────────────────── */
|
|
1065
1469
|
/* Applied when Algolia search is configured in themeConfig.algolia. */
|
|
1066
1470
|
[data-theme='light'] .DocSearch {
|
|
1067
|
-
--docsearch-primary-color:
|
|
1068
|
-
--docsearch-text-color:
|
|
1069
|
-
--docsearch-muted-color:
|
|
1070
|
-
--docsearch-container-background:
|
|
1071
|
-
--docsearch-modal-background:
|
|
1072
|
-
--docsearch-modal-shadow:
|
|
1073
|
-
--docsearch-searchbox-background:
|
|
1074
|
-
--docsearch-searchbox-focus-background
|
|
1075
|
-
--docsearch-searchbox-shadow:
|
|
1076
|
-
--docsearch-hit-color:
|
|
1077
|
-
--docsearch-hit-active-color:
|
|
1078
|
-
--docsearch-hit-background:
|
|
1079
|
-
--docsearch-hit-shadow:
|
|
1080
|
-
--docsearch-footer-background:
|
|
1081
|
-
--docsearch-logo-color:
|
|
1471
|
+
--docsearch-primary-color: #465fff;
|
|
1472
|
+
--docsearch-text-color: #1a1714;
|
|
1473
|
+
--docsearch-muted-color: #5c574f;
|
|
1474
|
+
--docsearch-container-background: rgb(26, 23, 20, 0.6);
|
|
1475
|
+
--docsearch-modal-background: #fff;
|
|
1476
|
+
--docsearch-modal-shadow: 0px 8px 24px rgb(0, 0, 0, 0.12);
|
|
1477
|
+
--docsearch-searchbox-background: #f9fafb;
|
|
1478
|
+
--docsearch-searchbox-focus-background: #fff;
|
|
1479
|
+
--docsearch-searchbox-shadow: inset 0 0 0 2px #465fff;
|
|
1480
|
+
--docsearch-hit-color: #1a1714;
|
|
1481
|
+
--docsearch-hit-active-color: #fff;
|
|
1482
|
+
--docsearch-hit-background: #fff;
|
|
1483
|
+
--docsearch-hit-shadow: 0 1px 3px rgb(0, 0, 0, 0.08);
|
|
1484
|
+
--docsearch-footer-background: #f9fafb;
|
|
1485
|
+
--docsearch-logo-color: #465fff;
|
|
1082
1486
|
}
|
|
1083
1487
|
|
|
1084
1488
|
[data-theme='dark'] .DocSearch {
|
|
1085
|
-
--docsearch-primary-color:
|
|
1086
|
-
--docsearch-text-color:
|
|
1087
|
-
--docsearch-muted-color:
|
|
1088
|
-
--docsearch-container-background:
|
|
1089
|
-
--docsearch-modal-background:
|
|
1090
|
-
--docsearch-modal-shadow:
|
|
1091
|
-
--docsearch-searchbox-background:
|
|
1092
|
-
--docsearch-searchbox-focus-background
|
|
1093
|
-
--docsearch-searchbox-shadow:
|
|
1094
|
-
--docsearch-hit-color:
|
|
1095
|
-
--docsearch-hit-active-color:
|
|
1096
|
-
--docsearch-hit-background:
|
|
1097
|
-
--docsearch-hit-shadow:
|
|
1098
|
-
--docsearch-footer-background:
|
|
1099
|
-
--docsearch-key-gradient:
|
|
1100
|
-
--docsearch-logo-color:
|
|
1489
|
+
--docsearch-primary-color: #7592ff;
|
|
1490
|
+
--docsearch-text-color: #e5e5e5;
|
|
1491
|
+
--docsearch-muted-color: #a3a3a3;
|
|
1492
|
+
--docsearch-container-background: rgb(3, 7, 18, 0.8);
|
|
1493
|
+
--docsearch-modal-background: #111827;
|
|
1494
|
+
--docsearch-modal-shadow: 0px 8px 24px rgb(0, 0, 0, 0.4);
|
|
1495
|
+
--docsearch-searchbox-background: #030712;
|
|
1496
|
+
--docsearch-searchbox-focus-background: #030712;
|
|
1497
|
+
--docsearch-searchbox-shadow: inset 0 0 0 2px #7592ff;
|
|
1498
|
+
--docsearch-hit-color: #e5e5e5;
|
|
1499
|
+
--docsearch-hit-active-color: #fff;
|
|
1500
|
+
--docsearch-hit-background: #1f2937;
|
|
1501
|
+
--docsearch-hit-shadow: none;
|
|
1502
|
+
--docsearch-footer-background: #030712;
|
|
1503
|
+
--docsearch-key-gradient: linear-gradient(-26.5deg, #1f2937 0%, #111827 100%);
|
|
1504
|
+
--docsearch-logo-color: #7592ff;
|
|
1101
1505
|
}
|
|
1102
1506
|
|
|
1103
1507
|
/* ── Scrollbar — 4px, matches Rackscope index.css ───────────────────────── */
|
|
@@ -1116,11 +1520,11 @@ details > :not(summary) {
|
|
|
1116
1520
|
}
|
|
1117
1521
|
|
|
1118
1522
|
::-webkit-scrollbar-thumb:hover {
|
|
1119
|
-
background: #a3a3a3;
|
|
1523
|
+
background: #a3a3a3; /* neutral gray-400 */
|
|
1120
1524
|
}
|
|
1121
1525
|
|
|
1122
1526
|
[data-theme='dark'] ::-webkit-scrollbar-thumb {
|
|
1123
|
-
background: #374151;
|
|
1527
|
+
background: #374151; /* Void gray-700 */
|
|
1124
1528
|
}
|
|
1125
1529
|
|
|
1126
1530
|
[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
|
|
@@ -1144,7 +1548,7 @@ details > :not(summary) {
|
|
|
1144
1548
|
}
|
|
1145
1549
|
|
|
1146
1550
|
[data-theme='dark'] .theme-doc-sidebar-menu .menu__list .menu__list {
|
|
1147
|
-
border-left-color: #374151;
|
|
1551
|
+
border-left-color: #374151; /* Void gray-700 — slightly more visible */
|
|
1148
1552
|
}
|
|
1149
1553
|
|
|
1150
1554
|
/* Sub-items: slightly smaller + muted when inactive */
|
|
@@ -1157,7 +1561,11 @@ details > :not(summary) {
|
|
|
1157
1561
|
color: var(--ifm-font-color-secondary);
|
|
1158
1562
|
}
|
|
1159
1563
|
|
|
1160
|
-
[data-theme='dark']
|
|
1564
|
+
[data-theme='dark']
|
|
1565
|
+
.menu__list
|
|
1566
|
+
.menu__list
|
|
1567
|
+
> .menu__list-item
|
|
1568
|
+
> .menu__link:not(.menu__link--active) {
|
|
1161
1569
|
color: #71717a;
|
|
1162
1570
|
}
|
|
1163
1571
|
|
|
@@ -1165,12 +1573,12 @@ details > :not(summary) {
|
|
|
1165
1573
|
/* Usage: { type: 'category', label: '...', className: 'sidebar-cat-rocket'} */
|
|
1166
1574
|
/* Icon = black SVG via ::before — inverted in dark mode with filter:invert */
|
|
1167
1575
|
|
|
1168
|
-
[class*=
|
|
1576
|
+
[class*='sidebar-cat-'] > .menu__list-item-collapsible > .menu__link {
|
|
1169
1577
|
display: flex;
|
|
1170
1578
|
align-items: center;
|
|
1171
1579
|
}
|
|
1172
1580
|
|
|
1173
|
-
[class*=
|
|
1581
|
+
[class*='sidebar-cat-'] > .menu__list-item-collapsible > .menu__link::before {
|
|
1174
1582
|
content: '';
|
|
1175
1583
|
display: inline-block;
|
|
1176
1584
|
flex-shrink: 0;
|
|
@@ -1185,13 +1593,13 @@ details > :not(summary) {
|
|
|
1185
1593
|
}
|
|
1186
1594
|
|
|
1187
1595
|
/* Dark mode — invert the black SVG to white */
|
|
1188
|
-
[data-theme='dark'] [class*=
|
|
1596
|
+
[data-theme='dark'] [class*='sidebar-cat-'] > .menu__list-item-collapsible > .menu__link::before {
|
|
1189
1597
|
filter: invert(1);
|
|
1190
1598
|
}
|
|
1191
1599
|
|
|
1192
1600
|
/* Hover + active state — full opacity */
|
|
1193
|
-
[class*=
|
|
1194
|
-
[class*=
|
|
1601
|
+
[class*='sidebar-cat-'] > .menu__list-item-collapsible > .menu__link--active::before,
|
|
1602
|
+
[class*='sidebar-cat-'] > .menu__list-item-collapsible:hover > .menu__link::before {
|
|
1195
1603
|
opacity: 1;
|
|
1196
1604
|
}
|
|
1197
1605
|
|
|
@@ -1259,19 +1667,19 @@ details > :not(summary) {
|
|
|
1259
1667
|
pinned to the bottom regardless of content height or scroll position. */
|
|
1260
1668
|
/* Sidebar viewport — flex column so version badge is always pinned at the bottom.
|
|
1261
1669
|
Targets the CSS-module class via attribute substring match (Docusaurus 3). */
|
|
1262
|
-
[class*=
|
|
1670
|
+
[class*='sidebarViewport'] {
|
|
1263
1671
|
display: flex !important;
|
|
1264
1672
|
flex-direction: column !important;
|
|
1265
1673
|
}
|
|
1266
1674
|
|
|
1267
1675
|
/* The scrollable menu fills the available space */
|
|
1268
|
-
[class*=
|
|
1676
|
+
[class*='sidebarViewport'] > .menu {
|
|
1269
1677
|
flex: 1 !important;
|
|
1270
1678
|
min-height: 0 !important;
|
|
1271
1679
|
}
|
|
1272
1680
|
|
|
1273
1681
|
/* Version badge — flex child OUTSIDE the scroll area, always at the very bottom */
|
|
1274
|
-
[class*=
|
|
1682
|
+
[class*='sidebarViewport']::after {
|
|
1275
1683
|
content: var(--cosmos-version);
|
|
1276
1684
|
flex-shrink: 0;
|
|
1277
1685
|
display: block;
|
|
@@ -1287,7 +1695,7 @@ details > :not(summary) {
|
|
|
1287
1695
|
border-top: 1px solid #e5e7eb;
|
|
1288
1696
|
}
|
|
1289
1697
|
|
|
1290
|
-
[data-theme='dark'] [class*=
|
|
1698
|
+
[data-theme='dark'] [class*='sidebarViewport']::after {
|
|
1291
1699
|
color: #374151;
|
|
1292
1700
|
background: #111827;
|
|
1293
1701
|
border-top-color: #1f2937;
|
|
@@ -1303,26 +1711,26 @@ details > :not(summary) {
|
|
|
1303
1711
|
Uses CSS filter to colorize since Docusaurus SVG paths use hardcoded fill. */
|
|
1304
1712
|
|
|
1305
1713
|
/* Dark mode shows the sun icon */
|
|
1306
|
-
[data-theme='dark'] [class*=
|
|
1307
|
-
[data-theme='dark'] [class*=
|
|
1714
|
+
[data-theme='dark'] [class*='toggleButton'] [class*='lightToggleIcon'],
|
|
1715
|
+
[data-theme='dark'] [class*='toggleButton'] svg {
|
|
1308
1716
|
filter: drop-shadow(0 0 0 #fbbf24) sepia(1) saturate(4) hue-rotate(5deg) brightness(1.1);
|
|
1309
1717
|
}
|
|
1310
1718
|
|
|
1311
1719
|
/* Light mode shows the moon icon */
|
|
1312
|
-
[data-theme='light'] [class*=
|
|
1313
|
-
[data-theme='light'] [class*=
|
|
1720
|
+
[data-theme='light'] [class*='toggleButton'] [class*='darkToggleIcon'],
|
|
1721
|
+
[data-theme='light'] [class*='toggleButton'] svg {
|
|
1314
1722
|
filter: drop-shadow(0 0 0 #7592ff) sepia(1) saturate(6) hue-rotate(190deg) brightness(0.9);
|
|
1315
1723
|
}
|
|
1316
1724
|
|
|
1317
1725
|
/* ── 2. TOCCollapsible (mobile table of contents) ────────────────────────── */
|
|
1318
|
-
[class*=
|
|
1726
|
+
[class*='tocCollapsible'] {
|
|
1319
1727
|
border: 1px solid var(--ifm-toc-border-color);
|
|
1320
1728
|
border-radius: 10px;
|
|
1321
1729
|
margin-bottom: 1rem;
|
|
1322
1730
|
overflow: hidden;
|
|
1323
1731
|
}
|
|
1324
1732
|
|
|
1325
|
-
[class*=
|
|
1733
|
+
[class*='tocCollapsibleButton'] {
|
|
1326
1734
|
background: none;
|
|
1327
1735
|
border: none;
|
|
1328
1736
|
cursor: pointer;
|
|
@@ -1337,42 +1745,47 @@ details > :not(summary) {
|
|
|
1337
1745
|
letter-spacing: 0.1em;
|
|
1338
1746
|
text-transform: uppercase;
|
|
1339
1747
|
color: var(--ifm-font-color-secondary);
|
|
1340
|
-
transition:
|
|
1748
|
+
transition:
|
|
1749
|
+
color 0.12s,
|
|
1750
|
+
background 0.12s;
|
|
1341
1751
|
}
|
|
1342
1752
|
|
|
1343
|
-
[class*=
|
|
1753
|
+
[class*='tocCollapsibleButton']:hover {
|
|
1344
1754
|
color: var(--ifm-color-primary);
|
|
1345
1755
|
background: rgb(70, 95, 255, 0.04);
|
|
1346
1756
|
}
|
|
1347
1757
|
|
|
1348
|
-
[class*=
|
|
1758
|
+
[class*='tocCollapsibleContent'] {
|
|
1349
1759
|
border-top: 1px solid var(--ifm-toc-border-color);
|
|
1350
1760
|
padding: 8px 0;
|
|
1351
1761
|
}
|
|
1352
1762
|
|
|
1353
1763
|
/* ── 3. DocCard / DocCardList (auto-generated category index pages) ─────── */
|
|
1354
|
-
[class*=
|
|
1764
|
+
[class*='cardContainer'] > article.card {
|
|
1355
1765
|
height: 100%;
|
|
1356
|
-
transition:
|
|
1766
|
+
transition:
|
|
1767
|
+
border-color 0.15s,
|
|
1768
|
+
box-shadow 0.15s,
|
|
1769
|
+
transform 0.15s;
|
|
1357
1770
|
}
|
|
1358
1771
|
|
|
1359
|
-
[class*=
|
|
1772
|
+
[class*='cardContainer'] > article.card:hover {
|
|
1360
1773
|
transform: translateY(-2px);
|
|
1361
1774
|
}
|
|
1362
1775
|
|
|
1363
|
-
[class*=
|
|
1776
|
+
[class*='cardContainer'] a {
|
|
1364
1777
|
text-decoration: none;
|
|
1365
1778
|
}
|
|
1366
1779
|
|
|
1367
1780
|
/* Category card title */
|
|
1368
|
-
[class*=
|
|
1781
|
+
[class*='cardContainer'] h2 {
|
|
1369
1782
|
font-size: 1rem;
|
|
1370
1783
|
font-weight: 700;
|
|
1371
1784
|
margin-bottom: 0.5rem;
|
|
1372
1785
|
}
|
|
1373
1786
|
|
|
1374
1787
|
/* Category card description */
|
|
1375
|
-
[class*=
|
|
1788
|
+
[class*='cardContainer'] p {
|
|
1376
1789
|
font-size: 0.875rem;
|
|
1377
1790
|
color: var(--ifm-font-color-secondary);
|
|
1378
1791
|
margin: 0;
|
|
@@ -1380,21 +1793,23 @@ details > :not(summary) {
|
|
|
1380
1793
|
|
|
1381
1794
|
/* ── 4. Announcement bar close button ────────────────────────────────────── */
|
|
1382
1795
|
.announcement-close,
|
|
1383
|
-
[class*=
|
|
1796
|
+
[class*='announcementBarClose'] {
|
|
1384
1797
|
color: rgb(255, 255, 255, 0.65) !important;
|
|
1385
1798
|
border-radius: 6px !important;
|
|
1386
1799
|
padding: 4px 6px !important;
|
|
1387
|
-
transition:
|
|
1800
|
+
transition:
|
|
1801
|
+
color 0.15s,
|
|
1802
|
+
background 0.15s !important;
|
|
1388
1803
|
}
|
|
1389
1804
|
|
|
1390
1805
|
.announcement-close:hover,
|
|
1391
|
-
[class*=
|
|
1806
|
+
[class*='announcementBarClose']:hover {
|
|
1392
1807
|
color: #fff !important;
|
|
1393
1808
|
background: rgb(255, 255, 255, 0.12) !important;
|
|
1394
1809
|
}
|
|
1395
1810
|
|
|
1396
1811
|
/* ── 5. Tag pages (/docs/tags/...) ───────────────────────────────────────── */
|
|
1397
|
-
[class*=
|
|
1812
|
+
[class*='tagList'] {
|
|
1398
1813
|
display: flex;
|
|
1399
1814
|
flex-wrap: wrap;
|
|
1400
1815
|
gap: 8px;
|
|
@@ -1403,8 +1818,8 @@ details > :not(summary) {
|
|
|
1403
1818
|
margin: 0;
|
|
1404
1819
|
}
|
|
1405
1820
|
|
|
1406
|
-
[class*=
|
|
1407
|
-
[class*=
|
|
1821
|
+
[class*='tagItem'] a,
|
|
1822
|
+
[class*='tag_'] {
|
|
1408
1823
|
display: inline-flex;
|
|
1409
1824
|
align-items: center;
|
|
1410
1825
|
border: 1px solid var(--ifm-toc-border-color);
|
|
@@ -1414,11 +1829,14 @@ details > :not(summary) {
|
|
|
1414
1829
|
font-weight: 500;
|
|
1415
1830
|
color: var(--ifm-font-color-base);
|
|
1416
1831
|
text-decoration: none;
|
|
1417
|
-
transition:
|
|
1832
|
+
transition:
|
|
1833
|
+
border-color 0.15s,
|
|
1834
|
+
background 0.15s,
|
|
1835
|
+
color 0.15s;
|
|
1418
1836
|
}
|
|
1419
1837
|
|
|
1420
|
-
[class*=
|
|
1421
|
-
[class*=
|
|
1838
|
+
[class*='tagItem'] a:hover,
|
|
1839
|
+
[class*='tag_']:hover {
|
|
1422
1840
|
border-color: var(--ifm-color-primary);
|
|
1423
1841
|
background: rgb(70, 95, 255, 0.06);
|
|
1424
1842
|
color: var(--ifm-color-primary);
|
|
@@ -1431,7 +1849,9 @@ details > :not(summary) {
|
|
|
1431
1849
|
min-width: 0 !important;
|
|
1432
1850
|
width: 2rem !important;
|
|
1433
1851
|
padding-left: 2rem !important;
|
|
1434
|
-
transition:
|
|
1852
|
+
transition:
|
|
1853
|
+
width 0.25s ease,
|
|
1854
|
+
background-color 0.15s !important;
|
|
1435
1855
|
}
|
|
1436
1856
|
|
|
1437
1857
|
.navbar__search-input:focus {
|
|
@@ -1454,14 +1874,137 @@ details > :not(summary) {
|
|
|
1454
1874
|
.prism-code,
|
|
1455
1875
|
.alert,
|
|
1456
1876
|
.card,
|
|
1457
|
-
[class*=
|
|
1458
|
-
[class*=
|
|
1459
|
-
button[aria-label*=
|
|
1877
|
+
[class*='sidebar-cat-'] > .menu__list-item-collapsible > .menu__link,
|
|
1878
|
+
[class*='toggleIcon'],
|
|
1879
|
+
button[aria-label*='dark and light mode'] {
|
|
1460
1880
|
transition: none !important;
|
|
1461
1881
|
animation: none !important;
|
|
1462
1882
|
}
|
|
1463
1883
|
}
|
|
1464
1884
|
|
|
1885
|
+
/* ── Blockquote ──────────────────────────────────────────────────────────── */
|
|
1886
|
+
/* Left-border accent + subtle tint — used for callouts, pull-quotes, notes. */
|
|
1887
|
+
.markdown blockquote {
|
|
1888
|
+
border-left: 3px solid var(--ifm-color-primary);
|
|
1889
|
+
background: rgb(70, 95, 255, 0.04);
|
|
1890
|
+
border-radius: 0 8px 8px 0;
|
|
1891
|
+
padding: 12px 20px;
|
|
1892
|
+
margin: 1rem 0;
|
|
1893
|
+
color: var(--ifm-font-color-secondary);
|
|
1894
|
+
font-style: italic;
|
|
1895
|
+
}
|
|
1896
|
+
|
|
1897
|
+
[data-theme='dark'] .markdown blockquote {
|
|
1898
|
+
background: rgb(70, 95, 255, 0.07);
|
|
1899
|
+
border-left-color: #7592ff;
|
|
1900
|
+
}
|
|
1901
|
+
|
|
1902
|
+
.markdown blockquote p:last-child {
|
|
1903
|
+
margin-bottom: 0;
|
|
1904
|
+
}
|
|
1905
|
+
|
|
1906
|
+
/* ── Keyboard key <kbd> ──────────────────────────────────────────────────── */
|
|
1907
|
+
/* Chip-style keyboard key — matches Rackscope monospace chip design. */
|
|
1908
|
+
kbd {
|
|
1909
|
+
background: var(--ifm-background-surface-color);
|
|
1910
|
+
border: 1px solid var(--ifm-toc-border-color);
|
|
1911
|
+
border-bottom-width: 2px; /* subtle 3D shadow effect */
|
|
1912
|
+
border-radius: 5px;
|
|
1913
|
+
color: var(--ifm-font-color-base);
|
|
1914
|
+
font-family: var(--ifm-font-family-monospace);
|
|
1915
|
+
font-size: 0.75rem;
|
|
1916
|
+
font-weight: 500;
|
|
1917
|
+
line-height: 1.5;
|
|
1918
|
+
padding: 1px 7px;
|
|
1919
|
+
white-space: nowrap;
|
|
1920
|
+
}
|
|
1921
|
+
|
|
1922
|
+
[data-theme='dark'] kbd {
|
|
1923
|
+
background: #1f2937; /* Void gray-800 */
|
|
1924
|
+
border-color: #374151; /* gray-700 */
|
|
1925
|
+
}
|
|
1926
|
+
|
|
1927
|
+
/* ── Markdown images ─────────────────────────────────────────────────────── */
|
|
1928
|
+
/* Rounded corners + shadow — consistent with Rackscope card aesthetics. */
|
|
1929
|
+
.markdown img {
|
|
1930
|
+
border-radius: 12px;
|
|
1931
|
+
box-shadow: var(--ifm-global-shadow-md);
|
|
1932
|
+
max-width: 100%;
|
|
1933
|
+
}
|
|
1934
|
+
|
|
1935
|
+
[data-theme='dark'] .markdown img {
|
|
1936
|
+
box-shadow:
|
|
1937
|
+
0 4px 16px rgb(0, 0, 0, 0.4),
|
|
1938
|
+
0 1px 4px rgb(0, 0, 0, 0.3);
|
|
1939
|
+
}
|
|
1940
|
+
|
|
1941
|
+
/* ── Horizontal rule ─────────────────────────────────────────────────────── */
|
|
1942
|
+
hr {
|
|
1943
|
+
border: none;
|
|
1944
|
+
border-top: 1px solid var(--ifm-toc-border-color);
|
|
1945
|
+
margin: 2rem 0;
|
|
1946
|
+
}
|
|
1947
|
+
|
|
1948
|
+
/* ── Tooltip — abbr[title] + .tooltip utility ────────────────────────────── */
|
|
1949
|
+
/* Styled tooltip for abbreviations and .tooltip utility class.
|
|
1950
|
+
Design: dark chip (Void gray-900), brand arrow, smooth fade. */
|
|
1951
|
+
abbr[title] {
|
|
1952
|
+
position: relative;
|
|
1953
|
+
cursor: help;
|
|
1954
|
+
text-decoration: underline dotted rgb(70, 95, 255, 0.5);
|
|
1955
|
+
text-underline-offset: 3px;
|
|
1956
|
+
}
|
|
1957
|
+
|
|
1958
|
+
abbr[title]::after {
|
|
1959
|
+
content: attr(title);
|
|
1960
|
+
position: absolute;
|
|
1961
|
+
bottom: calc(100% + 10px);
|
|
1962
|
+
left: 50%;
|
|
1963
|
+
transform: translateX(-50%);
|
|
1964
|
+
background: #111827; /* Void gray-900 */
|
|
1965
|
+
color: #e5e5e5;
|
|
1966
|
+
font-family: var(--ifm-font-family-base);
|
|
1967
|
+
font-size: 0.75rem;
|
|
1968
|
+
font-style: normal;
|
|
1969
|
+
font-weight: 500;
|
|
1970
|
+
line-height: 1.5;
|
|
1971
|
+
padding: 5px 10px;
|
|
1972
|
+
border-radius: 6px;
|
|
1973
|
+
white-space: nowrap;
|
|
1974
|
+
pointer-events: none;
|
|
1975
|
+
opacity: 0;
|
|
1976
|
+
transition: opacity 0.15s ease;
|
|
1977
|
+
z-index: 200;
|
|
1978
|
+
box-shadow: 0 4px 12px rgb(0, 0, 0, 0.3);
|
|
1979
|
+
}
|
|
1980
|
+
|
|
1981
|
+
abbr[title]::before {
|
|
1982
|
+
content: '';
|
|
1983
|
+
position: absolute;
|
|
1984
|
+
bottom: calc(100% + 4px);
|
|
1985
|
+
left: 50%;
|
|
1986
|
+
transform: translateX(-50%);
|
|
1987
|
+
border: 5px solid transparent;
|
|
1988
|
+
border-top-color: #111827;
|
|
1989
|
+
pointer-events: none;
|
|
1990
|
+
opacity: 0;
|
|
1991
|
+
transition: opacity 0.15s ease;
|
|
1992
|
+
z-index: 200;
|
|
1993
|
+
}
|
|
1994
|
+
|
|
1995
|
+
abbr[title]:hover::after,
|
|
1996
|
+
abbr[title]:hover::before {
|
|
1997
|
+
opacity: 1;
|
|
1998
|
+
}
|
|
1999
|
+
|
|
2000
|
+
[data-theme='light'] abbr[title]::after {
|
|
2001
|
+
background: #1f2937;
|
|
2002
|
+
}
|
|
2003
|
+
|
|
2004
|
+
[data-theme='light'] abbr[title]::before {
|
|
2005
|
+
border-top-color: #1f2937;
|
|
2006
|
+
}
|
|
2007
|
+
|
|
1465
2008
|
/* =============================================================================
|
|
1466
2009
|
OPTIONAL UTILITY CLASSES
|
|
1467
2010
|
The following classes are not required for the theme to work.
|
|
@@ -1516,7 +2059,7 @@ details > :not(summary) {
|
|
|
1516
2059
|
}
|
|
1517
2060
|
|
|
1518
2061
|
.status-unknown {
|
|
1519
|
-
color: #6b7280;
|
|
2062
|
+
color: #6b7280; /* neutral gray-500 */
|
|
1520
2063
|
font-weight: 600;
|
|
1521
2064
|
}
|
|
1522
2065
|
|
|
@@ -1540,3 +2083,262 @@ details > :not(summary) {
|
|
|
1540
2083
|
color: #6b7280;
|
|
1541
2084
|
font-weight: 600;
|
|
1542
2085
|
}
|
|
2086
|
+
|
|
2087
|
+
/* ── Release / version badges ─────────────────────────────────────────────── */
|
|
2088
|
+
/* Inline pill badges for marking feature lifecycle state in documentation. */
|
|
2089
|
+
/* Usage: <span class="badge-new">New</span> */
|
|
2090
|
+
|
|
2091
|
+
.badge-new,
|
|
2092
|
+
.badge-beta,
|
|
2093
|
+
.badge-deprecated,
|
|
2094
|
+
.badge-experimental {
|
|
2095
|
+
display: inline-flex;
|
|
2096
|
+
align-items: center;
|
|
2097
|
+
border-radius: 4px;
|
|
2098
|
+
font-family: var(--ifm-font-family-monospace);
|
|
2099
|
+
font-size: 0.6rem;
|
|
2100
|
+
font-weight: 700;
|
|
2101
|
+
letter-spacing: 0.07em;
|
|
2102
|
+
text-transform: uppercase;
|
|
2103
|
+
padding: 2px 6px;
|
|
2104
|
+
vertical-align: middle;
|
|
2105
|
+
border: 1px solid;
|
|
2106
|
+
}
|
|
2107
|
+
|
|
2108
|
+
.badge-new {
|
|
2109
|
+
background: rgb(70, 95, 255, 0.1);
|
|
2110
|
+
color: #465fff;
|
|
2111
|
+
border-color: rgb(70, 95, 255, 0.25);
|
|
2112
|
+
}
|
|
2113
|
+
|
|
2114
|
+
.badge-beta {
|
|
2115
|
+
background: rgb(247, 144, 9, 0.1);
|
|
2116
|
+
color: #f79009;
|
|
2117
|
+
border-color: rgb(247, 144, 9, 0.25);
|
|
2118
|
+
}
|
|
2119
|
+
|
|
2120
|
+
.badge-deprecated {
|
|
2121
|
+
background: rgb(107, 114, 128, 0.1);
|
|
2122
|
+
color: #6b7280;
|
|
2123
|
+
border-color: rgb(107, 114, 128, 0.25);
|
|
2124
|
+
}
|
|
2125
|
+
|
|
2126
|
+
.badge-experimental {
|
|
2127
|
+
background: rgb(155, 89, 182, 0.1);
|
|
2128
|
+
color: #9b59b6;
|
|
2129
|
+
border-color: rgb(155, 89, 182, 0.25);
|
|
2130
|
+
}
|
|
2131
|
+
|
|
2132
|
+
/* Dark mode — slightly brighter colors for readability on Void surface */
|
|
2133
|
+
[data-theme='dark'] .badge-new {
|
|
2134
|
+
background: rgb(70, 95, 255, 0.15);
|
|
2135
|
+
color: #7592ff;
|
|
2136
|
+
border-color: rgb(70, 95, 255, 0.3);
|
|
2137
|
+
}
|
|
2138
|
+
|
|
2139
|
+
[data-theme='dark'] .badge-beta {
|
|
2140
|
+
background: rgb(247, 144, 9, 0.12);
|
|
2141
|
+
color: #fbbf24;
|
|
2142
|
+
border-color: rgb(247, 144, 9, 0.3);
|
|
2143
|
+
}
|
|
2144
|
+
|
|
2145
|
+
[data-theme='dark'] .badge-deprecated {
|
|
2146
|
+
background: rgb(107, 114, 128, 0.12);
|
|
2147
|
+
color: #9ca3af;
|
|
2148
|
+
border-color: rgb(107, 114, 128, 0.3);
|
|
2149
|
+
}
|
|
2150
|
+
|
|
2151
|
+
[data-theme='dark'] .badge-experimental {
|
|
2152
|
+
background: rgb(155, 89, 182, 0.12);
|
|
2153
|
+
color: #c084fc;
|
|
2154
|
+
border-color: rgb(155, 89, 182, 0.3);
|
|
2155
|
+
}
|
|
2156
|
+
|
|
2157
|
+
/* ── Buttons (.btn-*) ─────────────────────────────────────────────────────── */
|
|
2158
|
+
/* Utility button classes for use in MDX docs pages and landing sections. */
|
|
2159
|
+
/* Usage: <a class="btn btn-primary" href="/docs/getting-started">Start</a> */
|
|
2160
|
+
|
|
2161
|
+
.btn {
|
|
2162
|
+
display: inline-flex;
|
|
2163
|
+
align-items: center;
|
|
2164
|
+
gap: 6px;
|
|
2165
|
+
border-radius: 8px;
|
|
2166
|
+
padding: 8px 18px;
|
|
2167
|
+
font-size: 0.875rem;
|
|
2168
|
+
font-weight: 600;
|
|
2169
|
+
line-height: 1.5;
|
|
2170
|
+
text-decoration: none !important;
|
|
2171
|
+
cursor: pointer;
|
|
2172
|
+
border: 1px solid transparent;
|
|
2173
|
+
transition:
|
|
2174
|
+
background 0.15s,
|
|
2175
|
+
border-color 0.15s,
|
|
2176
|
+
box-shadow 0.15s,
|
|
2177
|
+
color 0.15s;
|
|
2178
|
+
}
|
|
2179
|
+
|
|
2180
|
+
.btn-primary {
|
|
2181
|
+
background: #465fff;
|
|
2182
|
+
color: #fff !important;
|
|
2183
|
+
border-color: #465fff;
|
|
2184
|
+
}
|
|
2185
|
+
|
|
2186
|
+
.btn-primary:hover {
|
|
2187
|
+
background: #3641f5;
|
|
2188
|
+
border-color: #3641f5;
|
|
2189
|
+
box-shadow: 0 0 0 3px rgb(70, 95, 255, 0.2);
|
|
2190
|
+
}
|
|
2191
|
+
|
|
2192
|
+
.btn-secondary {
|
|
2193
|
+
background: transparent;
|
|
2194
|
+
color: var(--ifm-font-color-base) !important;
|
|
2195
|
+
border-color: var(--ifm-toc-border-color);
|
|
2196
|
+
}
|
|
2197
|
+
|
|
2198
|
+
.btn-secondary:hover {
|
|
2199
|
+
border-color: var(--ifm-color-primary);
|
|
2200
|
+
background: rgb(70, 95, 255, 0.05);
|
|
2201
|
+
color: var(--ifm-color-primary) !important;
|
|
2202
|
+
}
|
|
2203
|
+
|
|
2204
|
+
.btn-danger {
|
|
2205
|
+
background: rgb(240, 68, 56, 0.07);
|
|
2206
|
+
color: #f04438 !important;
|
|
2207
|
+
border-color: rgb(240, 68, 56, 0.3);
|
|
2208
|
+
}
|
|
2209
|
+
|
|
2210
|
+
.btn-danger:hover {
|
|
2211
|
+
background: rgb(240, 68, 56, 0.12);
|
|
2212
|
+
border-color: #f04438;
|
|
2213
|
+
}
|
|
2214
|
+
|
|
2215
|
+
.btn-sm {
|
|
2216
|
+
padding: 5px 12px;
|
|
2217
|
+
font-size: 0.8125rem;
|
|
2218
|
+
}
|
|
2219
|
+
|
|
2220
|
+
.btn-lg {
|
|
2221
|
+
padding: 12px 24px;
|
|
2222
|
+
font-size: 1rem;
|
|
2223
|
+
}
|
|
2224
|
+
|
|
2225
|
+
/* ── Numbered steps (.steps) ──────────────────────────────────────────────── */
|
|
2226
|
+
/* For multi-step guides, install sequences, and how-to procedures. */
|
|
2227
|
+
/* Usage: <ol class="steps"><li>Step one</li><li>Step two</li></ol> */
|
|
2228
|
+
|
|
2229
|
+
ol.steps {
|
|
2230
|
+
counter-reset: step-counter;
|
|
2231
|
+
list-style: none;
|
|
2232
|
+
padding: 0;
|
|
2233
|
+
margin: 1.5rem 0;
|
|
2234
|
+
}
|
|
2235
|
+
|
|
2236
|
+
ol.steps > li {
|
|
2237
|
+
counter-increment: step-counter;
|
|
2238
|
+
position: relative;
|
|
2239
|
+
padding-left: 3rem;
|
|
2240
|
+
padding-bottom: 1.5rem;
|
|
2241
|
+
border-left: 2px solid var(--ifm-toc-border-color);
|
|
2242
|
+
margin-left: 1rem;
|
|
2243
|
+
}
|
|
2244
|
+
|
|
2245
|
+
ol.steps > li:last-child {
|
|
2246
|
+
border-left-color: transparent;
|
|
2247
|
+
padding-bottom: 0;
|
|
2248
|
+
}
|
|
2249
|
+
|
|
2250
|
+
ol.steps > li::before {
|
|
2251
|
+
content: counter(step-counter);
|
|
2252
|
+
position: absolute;
|
|
2253
|
+
left: -1.1rem;
|
|
2254
|
+
top: 0;
|
|
2255
|
+
width: 2rem;
|
|
2256
|
+
height: 2rem;
|
|
2257
|
+
background: #465fff;
|
|
2258
|
+
color: #fff;
|
|
2259
|
+
border-radius: 50%;
|
|
2260
|
+
display: flex;
|
|
2261
|
+
align-items: center;
|
|
2262
|
+
justify-content: center;
|
|
2263
|
+
font-family: var(--ifm-font-family-monospace);
|
|
2264
|
+
font-size: 0.75rem;
|
|
2265
|
+
font-weight: 700;
|
|
2266
|
+
flex-shrink: 0;
|
|
2267
|
+
box-shadow: 0 0 0 4px var(--ifm-background-color);
|
|
2268
|
+
}
|
|
2269
|
+
|
|
2270
|
+
[data-theme='dark'] ol.steps > li::before {
|
|
2271
|
+
background: #7592ff;
|
|
2272
|
+
}
|
|
2273
|
+
|
|
2274
|
+
/* ── Timeline (.timeline) ─────────────────────────────────────────────────── */
|
|
2275
|
+
/* For changelogs, roadmaps, and versioned event sequences. */
|
|
2276
|
+
/* Usage: <ul class="timeline"><li><strong>v1.0</strong> Released</li></ul> */
|
|
2277
|
+
|
|
2278
|
+
ul.timeline {
|
|
2279
|
+
position: relative;
|
|
2280
|
+
list-style: none;
|
|
2281
|
+
padding: 0 0 0 1.5rem;
|
|
2282
|
+
margin: 1.5rem 0;
|
|
2283
|
+
}
|
|
2284
|
+
|
|
2285
|
+
ul.timeline::before {
|
|
2286
|
+
content: '';
|
|
2287
|
+
position: absolute;
|
|
2288
|
+
left: 0.4rem;
|
|
2289
|
+
top: 0.5rem;
|
|
2290
|
+
bottom: 0.5rem;
|
|
2291
|
+
width: 2px;
|
|
2292
|
+
background: var(--ifm-toc-border-color);
|
|
2293
|
+
}
|
|
2294
|
+
|
|
2295
|
+
ul.timeline > li {
|
|
2296
|
+
position: relative;
|
|
2297
|
+
padding-bottom: 1.25rem;
|
|
2298
|
+
padding-left: 1rem;
|
|
2299
|
+
}
|
|
2300
|
+
|
|
2301
|
+
ul.timeline > li:last-child {
|
|
2302
|
+
padding-bottom: 0;
|
|
2303
|
+
}
|
|
2304
|
+
|
|
2305
|
+
ul.timeline > li::before {
|
|
2306
|
+
content: '';
|
|
2307
|
+
position: absolute;
|
|
2308
|
+
left: -1.15rem;
|
|
2309
|
+
top: 0.35rem;
|
|
2310
|
+
width: 0.65rem;
|
|
2311
|
+
height: 0.65rem;
|
|
2312
|
+
border-radius: 50%;
|
|
2313
|
+
background: var(--ifm-color-primary);
|
|
2314
|
+
border: 2px solid var(--ifm-background-color);
|
|
2315
|
+
box-shadow: 0 0 0 2px var(--ifm-color-primary);
|
|
2316
|
+
}
|
|
2317
|
+
|
|
2318
|
+
/* ── Check list (.list-check) ─────────────────────────────────────────────── */
|
|
2319
|
+
/* Checkmark list — useful for feature lists, requirements, and prerequisites. */
|
|
2320
|
+
/* Usage: <ul class="list-check"><li>Feature one</li><li>Feature two</li></ul> */
|
|
2321
|
+
|
|
2322
|
+
ul.list-check {
|
|
2323
|
+
list-style: none;
|
|
2324
|
+
padding: 0;
|
|
2325
|
+
margin: 1rem 0;
|
|
2326
|
+
}
|
|
2327
|
+
|
|
2328
|
+
ul.list-check > li {
|
|
2329
|
+
position: relative;
|
|
2330
|
+
padding-left: 1.75rem;
|
|
2331
|
+
margin-bottom: 0.5rem;
|
|
2332
|
+
}
|
|
2333
|
+
|
|
2334
|
+
ul.list-check > li::before {
|
|
2335
|
+
content: '';
|
|
2336
|
+
position: absolute;
|
|
2337
|
+
left: 0;
|
|
2338
|
+
top: 3px;
|
|
2339
|
+
width: 16px;
|
|
2340
|
+
height: 16px;
|
|
2341
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312b76a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
|
|
2342
|
+
background-size: 16px;
|
|
2343
|
+
background-repeat: no-repeat;
|
|
2344
|
+
}
|