@oxide/design-system 6.1.4 → 6.2.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.
- package/dist/asciidoc.css +462 -348
- package/dist/button.css +1 -1
- package/dist/components/src/asciidoc/index.js +173 -20
- package/dist/components/src/asciidoc/index.js.map +1 -1
- package/dist/spinner.css +2 -2
- package/dist/tabs.css +2 -2
- package/package.json +1 -1
- package/styles/dark.css +1 -1
- package/styles/light.css +8 -8
- package/styles/main.css +84 -56
- package/styles/tailwind.css +33 -7
package/dist/asciidoc.css
CHANGED
|
@@ -6,114 +6,70 @@
|
|
|
6
6
|
* Copyright Oxide Computer Company
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
@utility text-mono-code {
|
|
10
|
-
@apply text-[0.825em] !normal-case;
|
|
11
|
-
font-feature-settings: 'calt' 0;
|
|
12
|
-
letter-spacing: 0;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
@utility accent-link {
|
|
16
|
-
@apply text-accent-secondary hover:text-accent;
|
|
17
|
-
text-decoration: underline;
|
|
18
|
-
text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
@utility link-with-underline {
|
|
22
|
-
@apply text-default hover:text-raise;
|
|
23
|
-
text-decoration: underline;
|
|
24
|
-
text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@utility inline-code {
|
|
28
|
-
@apply mr-[1px] ml-[1px] rounded-md border px-0.5 align-[1px] text-[0.825em] tracking-normal!;
|
|
29
|
-
background-color: color-mix(in srgb, currentColor 8%, transparent);
|
|
30
|
-
border-color: color-mix(in srgb, currentColor 10%, transparent);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
9
|
@layer components {
|
|
34
10
|
.asciidoc-body {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.quoteblock p {
|
|
44
|
-
@apply text-secondary;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.quoteblock .attribution {
|
|
48
|
-
@apply text-raise mt-8;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.attribution cite {
|
|
52
|
-
@apply block;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.admonitionblock .quoteblock {
|
|
56
|
-
@apply border-0 p-3 bg-default rounded-md mt-2 mb-2;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.admonition-content .paragraph {
|
|
60
|
-
@apply mb-1 last:mb-0;
|
|
11
|
+
/* --- Paragraphs --- */
|
|
12
|
+
p {
|
|
13
|
+
@apply text-sans-lg;
|
|
14
|
+
color: var(--content-default);
|
|
15
|
+
line-height: 1.5 !important;
|
|
16
|
+
margin-bottom: 1.25rem;
|
|
61
17
|
}
|
|
62
18
|
|
|
63
|
-
|
|
64
|
-
|
|
19
|
+
@media (min-width: 800px) {
|
|
20
|
+
p {
|
|
21
|
+
margin-bottom: 0.75rem;
|
|
22
|
+
}
|
|
65
23
|
}
|
|
66
24
|
|
|
67
|
-
.
|
|
68
|
-
|
|
25
|
+
.lead p {
|
|
26
|
+
color: var(--content-raise);
|
|
69
27
|
}
|
|
70
28
|
|
|
71
|
-
.
|
|
72
|
-
@apply
|
|
29
|
+
.paragraph.lead p {
|
|
30
|
+
@apply text-sans-xl;
|
|
73
31
|
}
|
|
74
32
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
33
|
+
/* --- Strong / emphasis --- */
|
|
34
|
+
strong:not(a strong) {
|
|
35
|
+
color: var(--content-raise);
|
|
36
|
+
font-weight: 500;
|
|
78
37
|
}
|
|
79
38
|
|
|
80
|
-
|
|
81
|
-
|
|
39
|
+
.line-through {
|
|
40
|
+
text-decoration: line-through;
|
|
82
41
|
}
|
|
83
42
|
|
|
84
|
-
|
|
85
|
-
|
|
43
|
+
/* --- Headings --- */
|
|
44
|
+
h2,
|
|
45
|
+
h3,
|
|
46
|
+
h4,
|
|
47
|
+
h5 {
|
|
48
|
+
color: var(--content-raise);
|
|
49
|
+
position: relative;
|
|
50
|
+
margin-top: 2.5rem;
|
|
51
|
+
margin-bottom: 0.75rem;
|
|
86
52
|
}
|
|
87
53
|
|
|
88
|
-
|
|
89
|
-
@apply text-
|
|
90
|
-
overflow-wrap: break-word;
|
|
91
|
-
word-wrap: break-word;
|
|
92
|
-
|
|
93
|
-
text-decoration: underline;
|
|
94
|
-
text-decoration-color: var(--content-accent-tertiary);
|
|
54
|
+
h2 {
|
|
55
|
+
@apply text-sans-2xl;
|
|
95
56
|
}
|
|
96
57
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
@apply text-raise font-[500];
|
|
58
|
+
h3 {
|
|
59
|
+
@apply text-sans-xl;
|
|
100
60
|
}
|
|
101
61
|
|
|
102
|
-
h2,
|
|
103
|
-
h3,
|
|
104
62
|
h4,
|
|
105
63
|
h5 {
|
|
106
|
-
@apply text-
|
|
64
|
+
@apply text-sans-lg;
|
|
65
|
+
margin-top: 2rem;
|
|
66
|
+
margin-bottom: 0.5rem;
|
|
107
67
|
}
|
|
108
68
|
|
|
109
|
-
/*
|
|
69
|
+
/* Remove top spacing from the first heading in a document */
|
|
110
70
|
#preamble .sectionbody > *:first-child,
|
|
111
|
-
#content > .sect1:first-of-type > h1,
|
|
112
|
-
|
|
113
|
-
#content > .sect1:first-of-type > h3,
|
|
114
|
-
#content > .sect1:first-of-type > h4,
|
|
115
|
-
#content > .sect1:first-of-type > h5 {
|
|
116
|
-
@apply mt-0;
|
|
71
|
+
#content > .sect1:first-of-type > :is(h1, h2, h3, h4, h5) {
|
|
72
|
+
margin-top: 0;
|
|
117
73
|
}
|
|
118
74
|
|
|
119
75
|
h1 a,
|
|
@@ -121,49 +77,55 @@
|
|
|
121
77
|
h3 a,
|
|
122
78
|
h4 a,
|
|
123
79
|
h5 a {
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
h1[data-sectnum]:before,
|
|
128
|
-
h2[data-sectnum]:before,
|
|
129
|
-
h3[data-sectnum]:before,
|
|
130
|
-
h4[data-sectnum]:before,
|
|
131
|
-
h5[data-sectnum]:before {
|
|
132
|
-
@apply text-tertiary 800:absolute 800:-left-[72px] 800:mr-0 800:w-[60px] 800:text-right 800:text-sans-lg pointer-events-none top-[6px] mr-2 inline-block;
|
|
133
|
-
content: attr(data-sectnum);
|
|
80
|
+
color: var(--content-raise);
|
|
81
|
+
display: inline;
|
|
134
82
|
}
|
|
135
83
|
|
|
136
|
-
|
|
137
|
-
h2
|
|
138
|
-
|
|
84
|
+
h1 a,
|
|
85
|
+
h2 a,
|
|
86
|
+
h3 a,
|
|
87
|
+
h4 a,
|
|
88
|
+
h5 a,
|
|
89
|
+
h6 a {
|
|
90
|
+
text-underline-offset: 1px;
|
|
91
|
+
text-decoration-thickness: 1px;
|
|
139
92
|
}
|
|
140
93
|
|
|
141
|
-
|
|
142
|
-
h5[data-sectnum]
|
|
143
|
-
|
|
94
|
+
/* Section numbers rendered before each heading */
|
|
95
|
+
:is(h1, h2, h3, h4, h5)[data-sectnum]::before {
|
|
96
|
+
content: attr(data-sectnum);
|
|
97
|
+
color: var(--content-tertiary);
|
|
98
|
+
display: inline-block;
|
|
99
|
+
pointer-events: none;
|
|
100
|
+
margin-right: 0.5rem;
|
|
101
|
+
top: 6px;
|
|
144
102
|
}
|
|
145
103
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
h3[data-sectnum] a:after,
|
|
149
|
-
h4[data-sectnum] a:after,
|
|
150
|
-
h5[data-sectnum] a:after {
|
|
151
|
-
@apply hidden;
|
|
104
|
+
h3[data-sectnum]::before {
|
|
105
|
+
top: 2px;
|
|
152
106
|
}
|
|
153
107
|
|
|
154
|
-
|
|
155
|
-
|
|
108
|
+
h4[data-sectnum]::before,
|
|
109
|
+
h5[data-sectnum]::before {
|
|
110
|
+
top: 0;
|
|
156
111
|
}
|
|
157
112
|
|
|
158
|
-
|
|
159
|
-
|
|
113
|
+
@media (min-width: 800px) {
|
|
114
|
+
:is(h1, h2, h3, h4, h5)[data-sectnum]::before {
|
|
115
|
+
@apply text-sans-lg;
|
|
116
|
+
position: absolute;
|
|
117
|
+
left: -72px;
|
|
118
|
+
width: 60px;
|
|
119
|
+
margin-right: 0;
|
|
120
|
+
text-align: right;
|
|
121
|
+
}
|
|
160
122
|
}
|
|
161
123
|
|
|
162
|
-
h4,
|
|
163
|
-
|
|
164
|
-
@apply text-sans-lg text-raise mt-8 mb-2;
|
|
124
|
+
:is(h1, h2, h3, h4, h5)[data-sectnum] a::after {
|
|
125
|
+
display: none;
|
|
165
126
|
}
|
|
166
127
|
|
|
128
|
+
/* Heading anchors */
|
|
167
129
|
.anchor,
|
|
168
130
|
.sectionanchor {
|
|
169
131
|
position: absolute;
|
|
@@ -172,52 +134,41 @@
|
|
|
172
134
|
user-select: none;
|
|
173
135
|
}
|
|
174
136
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
content: ':';
|
|
181
|
-
@apply text-sans-lg text-tertiary;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
/* Fix overflow text in mermaid */
|
|
185
|
-
code svg {
|
|
186
|
-
line-height: 1 !important;
|
|
137
|
+
/* --- Links --- */
|
|
138
|
+
a:not(:is(h1, h2, h3, h4, h5, h6, .title) a) {
|
|
139
|
+
color: var(--content-accent-secondary);
|
|
140
|
+
text-decoration: underline;
|
|
141
|
+
text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
|
|
187
142
|
}
|
|
188
143
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
code svg * {
|
|
192
|
-
all: revert-layer;
|
|
144
|
+
a:not(:is(h1, h2, h3, h4, h5, h6, .title) a):hover {
|
|
145
|
+
color: var(--content-accent);
|
|
193
146
|
}
|
|
194
147
|
|
|
195
|
-
|
|
196
|
-
|
|
148
|
+
a:hover,
|
|
149
|
+
a:hover .title {
|
|
150
|
+
text-decoration-line: underline;
|
|
151
|
+
text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
|
|
197
152
|
}
|
|
198
153
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
@apply mt-[0.325rem];
|
|
154
|
+
p a {
|
|
155
|
+
overflow-wrap: break-word;
|
|
202
156
|
}
|
|
203
157
|
|
|
158
|
+
/* --- Lists --- */
|
|
204
159
|
ul,
|
|
205
160
|
ol {
|
|
206
|
-
@apply text-mono-sm
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
li::marker,
|
|
210
|
-
ol::marker {
|
|
211
|
-
color: color-mix(in srgb, currentColor 60%, transparent);
|
|
161
|
+
@apply text-mono-sm;
|
|
162
|
+
margin-bottom: 0.75rem;
|
|
163
|
+
list-style-position: inside;
|
|
212
164
|
}
|
|
213
165
|
|
|
214
|
-
ul
|
|
215
|
-
|
|
216
|
-
@apply normal-case;
|
|
166
|
+
ul {
|
|
167
|
+
list-style-type: disc;
|
|
217
168
|
}
|
|
218
169
|
|
|
219
|
-
|
|
220
|
-
|
|
170
|
+
ol {
|
|
171
|
+
list-style-type: decimal;
|
|
221
172
|
}
|
|
222
173
|
|
|
223
174
|
ul ul li {
|
|
@@ -232,200 +183,332 @@
|
|
|
232
183
|
list-style-type: disc;
|
|
233
184
|
}
|
|
234
185
|
|
|
235
|
-
|
|
236
|
-
|
|
186
|
+
.arabic {
|
|
187
|
+
list-style-type: decimal;
|
|
188
|
+
}
|
|
189
|
+
.loweralpha {
|
|
190
|
+
list-style-type: lower-alpha;
|
|
191
|
+
}
|
|
192
|
+
.lowerroman {
|
|
193
|
+
list-style-type: lower-roman;
|
|
194
|
+
}
|
|
195
|
+
.upperalpha {
|
|
196
|
+
list-style-type: upper-alpha;
|
|
197
|
+
}
|
|
198
|
+
.upperroman {
|
|
199
|
+
list-style-type: upper-roman;
|
|
237
200
|
}
|
|
238
201
|
|
|
239
|
-
|
|
240
|
-
|
|
202
|
+
ul li,
|
|
203
|
+
ol li {
|
|
204
|
+
margin-top: 0.325rem;
|
|
241
205
|
}
|
|
242
206
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
@apply 800:list-outside list-inside;
|
|
207
|
+
li::marker {
|
|
208
|
+
color: color-mix(in srgb, currentColor 60%, transparent);
|
|
246
209
|
}
|
|
247
210
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
211
|
+
/* Paragraphs inside list items flow inline */
|
|
212
|
+
ul p,
|
|
213
|
+
ol p {
|
|
214
|
+
display: inline;
|
|
215
|
+
text-transform: none;
|
|
251
216
|
}
|
|
252
217
|
|
|
253
|
-
ol
|
|
254
|
-
|
|
255
|
-
@apply 800:ml-6;
|
|
218
|
+
ol p {
|
|
219
|
+
color: var(--content-default);
|
|
256
220
|
}
|
|
257
221
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
@apply list-inside;
|
|
222
|
+
li:not(:last-child) :is(ul, ol) {
|
|
223
|
+
margin-bottom: 0;
|
|
261
224
|
}
|
|
262
225
|
|
|
226
|
+
/* Lists inside blocks where outside marker position would be clipped */
|
|
227
|
+
.tableblock ul,
|
|
228
|
+
.tableblock ol,
|
|
263
229
|
.quoteblock ul,
|
|
264
|
-
.quoteblock ol
|
|
265
|
-
|
|
230
|
+
.quoteblock ol,
|
|
231
|
+
.exampleblock ul,
|
|
232
|
+
.exampleblock ol {
|
|
233
|
+
list-style-position: inside;
|
|
266
234
|
}
|
|
267
235
|
|
|
268
236
|
.ulist .ulist,
|
|
269
237
|
.ulist .olist,
|
|
270
238
|
.olist .ulist,
|
|
271
239
|
.olist .olist {
|
|
272
|
-
|
|
240
|
+
margin-left: 2rem;
|
|
273
241
|
}
|
|
274
242
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
243
|
+
@media (min-width: 800px) {
|
|
244
|
+
ul,
|
|
245
|
+
ol {
|
|
246
|
+
list-style-position: outside;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
ul:first-of-type,
|
|
250
|
+
.github-markdown > ul {
|
|
251
|
+
margin-left: 1rem;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
ol:first-of-type,
|
|
255
|
+
.github-markdown > ol {
|
|
256
|
+
margin-left: 1.5rem;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.ulist .ulist,
|
|
260
|
+
.ulist .olist,
|
|
261
|
+
.olist .ulist,
|
|
262
|
+
.olist .olist {
|
|
263
|
+
margin-left: 0.5rem;
|
|
264
|
+
}
|
|
278
265
|
}
|
|
279
266
|
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
@apply
|
|
267
|
+
/* --- Description lists --- */
|
|
268
|
+
.dlist dt {
|
|
269
|
+
@apply text-sans-lg;
|
|
270
|
+
color: var(--content-raise);
|
|
283
271
|
}
|
|
284
272
|
|
|
285
|
-
|
|
286
|
-
@apply text-
|
|
273
|
+
.dlist dt::after {
|
|
274
|
+
@apply text-sans-lg;
|
|
275
|
+
content: ':';
|
|
276
|
+
color: var(--content-tertiary);
|
|
287
277
|
}
|
|
288
278
|
|
|
289
|
-
|
|
290
|
-
|
|
279
|
+
/* --- Quote blocks --- */
|
|
280
|
+
.quoteblock {
|
|
281
|
+
color: var(--content-secondary);
|
|
282
|
+
border-left: 1px solid var(--stroke-default);
|
|
283
|
+
margin: 2rem 0;
|
|
284
|
+
padding-left: 1.6rem;
|
|
291
285
|
}
|
|
292
286
|
|
|
293
|
-
.
|
|
294
|
-
|
|
287
|
+
.quoteblock p {
|
|
288
|
+
color: var(--content-secondary);
|
|
295
289
|
}
|
|
296
290
|
|
|
297
|
-
.
|
|
298
|
-
|
|
291
|
+
.quoteblock .attribution {
|
|
292
|
+
color: var(--content-raise);
|
|
293
|
+
margin-top: 2rem;
|
|
299
294
|
}
|
|
300
295
|
|
|
301
|
-
.
|
|
302
|
-
|
|
296
|
+
.attribution cite {
|
|
297
|
+
display: block;
|
|
303
298
|
}
|
|
304
299
|
|
|
305
|
-
|
|
306
|
-
|
|
300
|
+
/* --- Admonitions --- */
|
|
301
|
+
.admonitionblock {
|
|
302
|
+
display: flex;
|
|
303
|
+
color: var(--content-accent-secondary);
|
|
304
|
+
background-color: var(--surface-accent);
|
|
305
|
+
border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
|
|
306
|
+
border-radius: var(--radius-md);
|
|
307
|
+
margin: 1.5rem 0;
|
|
308
|
+
padding: 0.75rem;
|
|
307
309
|
}
|
|
308
310
|
|
|
309
|
-
.
|
|
310
|
-
|
|
311
|
+
.admonitionblock strong {
|
|
312
|
+
color: var(--content-accent);
|
|
311
313
|
}
|
|
312
314
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
+
.admonitionblock a {
|
|
316
|
+
color: var(--content-accent);
|
|
317
|
+
text-decoration-line: underline;
|
|
315
318
|
}
|
|
316
319
|
|
|
317
|
-
|
|
318
|
-
|
|
320
|
+
.admonition-icon svg {
|
|
321
|
+
margin-top: 0.125rem;
|
|
322
|
+
margin-right: 0.5rem;
|
|
323
|
+
width: 0.75rem;
|
|
324
|
+
height: 0.75rem;
|
|
319
325
|
}
|
|
320
326
|
|
|
321
|
-
|
|
322
|
-
@apply
|
|
327
|
+
.admonition-content {
|
|
328
|
+
@apply text-sans-md;
|
|
323
329
|
}
|
|
324
330
|
|
|
325
|
-
|
|
326
|
-
@apply
|
|
327
|
-
|
|
331
|
+
.admonition-content p {
|
|
332
|
+
@apply text-sans-md;
|
|
333
|
+
color: currentColor;
|
|
334
|
+
margin-bottom: 0;
|
|
328
335
|
}
|
|
329
336
|
|
|
330
|
-
|
|
331
|
-
|
|
337
|
+
.admonition-content > div:first-of-type {
|
|
338
|
+
color: var(--content-accent);
|
|
332
339
|
}
|
|
333
340
|
|
|
334
|
-
.
|
|
335
|
-
|
|
341
|
+
.admonition-content .admonition-title {
|
|
342
|
+
margin-bottom: 0.5rem;
|
|
343
|
+
font-style: italic;
|
|
336
344
|
}
|
|
337
345
|
|
|
338
|
-
.
|
|
339
|
-
|
|
346
|
+
.admonition-content .paragraph {
|
|
347
|
+
margin-bottom: 0.25rem;
|
|
340
348
|
}
|
|
341
349
|
|
|
342
|
-
.
|
|
343
|
-
|
|
344
|
-
content: attr(data-lang);
|
|
350
|
+
.admonition-content .paragraph:last-child {
|
|
351
|
+
margin-bottom: 0;
|
|
345
352
|
}
|
|
346
353
|
|
|
347
|
-
|
|
348
|
-
|
|
354
|
+
@media (min-width: 800px) {
|
|
355
|
+
.admonition-content {
|
|
356
|
+
margin-right: 1.25rem;
|
|
357
|
+
}
|
|
349
358
|
}
|
|
350
359
|
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
360
|
+
.admonitionblock .quoteblock {
|
|
361
|
+
background-color: var(--surface-default);
|
|
362
|
+
border: 0;
|
|
363
|
+
border-radius: var(--radius-md);
|
|
364
|
+
margin: 0.5rem 0;
|
|
365
|
+
padding: 0.75rem;
|
|
354
366
|
}
|
|
355
367
|
|
|
356
|
-
|
|
357
|
-
|
|
368
|
+
/* --- Inline code --- */
|
|
369
|
+
code {
|
|
370
|
+
font-feature-settings: 'calt' 0;
|
|
358
371
|
}
|
|
359
372
|
|
|
360
|
-
|
|
361
|
-
|
|
373
|
+
:not(pre) > code {
|
|
374
|
+
font-size: 0.825em;
|
|
375
|
+
letter-spacing: 0 !important;
|
|
376
|
+
vertical-align: 1px;
|
|
377
|
+
margin: 0 1px;
|
|
378
|
+
padding: 0 0.125rem;
|
|
379
|
+
background-color: color-mix(in srgb, currentColor 8%, transparent);
|
|
380
|
+
border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
|
|
381
|
+
border-radius: var(--radius-md);
|
|
362
382
|
}
|
|
363
383
|
|
|
364
|
-
|
|
365
|
-
|
|
384
|
+
table p code {
|
|
385
|
+
word-break: normal;
|
|
386
|
+
overflow-wrap: normal;
|
|
366
387
|
}
|
|
367
388
|
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
389
|
+
/* Prevent asciidoc styles from leaking into mermaid SVG output */
|
|
390
|
+
code svg {
|
|
391
|
+
line-height: 1 !important;
|
|
392
|
+
}
|
|
393
|
+
code svg,
|
|
394
|
+
code svg * {
|
|
395
|
+
all: revert-layer;
|
|
371
396
|
}
|
|
372
397
|
|
|
373
|
-
|
|
374
|
-
|
|
398
|
+
/* --- Code blocks --- */
|
|
399
|
+
pre {
|
|
400
|
+
overflow-x: auto;
|
|
401
|
+
font-size: 13px;
|
|
402
|
+
letter-spacing: 0;
|
|
403
|
+
text-transform: none !important;
|
|
404
|
+
font-feature-settings: 'calt' 0;
|
|
405
|
+
background-color: var(--surface-default);
|
|
406
|
+
border: 1px solid var(--stroke-secondary);
|
|
407
|
+
border-radius: var(--radius-md);
|
|
408
|
+
padding: 1rem 1.25rem;
|
|
375
409
|
}
|
|
376
410
|
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
411
|
+
@media (min-width: 800px) {
|
|
412
|
+
pre {
|
|
413
|
+
padding: 1.5rem 1.75rem;
|
|
414
|
+
}
|
|
380
415
|
}
|
|
381
416
|
|
|
382
|
-
.
|
|
383
|
-
|
|
417
|
+
.listingblock .content {
|
|
418
|
+
position: relative;
|
|
384
419
|
}
|
|
385
420
|
|
|
386
|
-
.
|
|
387
|
-
|
|
421
|
+
.listingblock pre:not(.highlight) {
|
|
422
|
+
color: var(--content-default);
|
|
388
423
|
}
|
|
389
424
|
|
|
390
|
-
.
|
|
391
|
-
@apply text-
|
|
425
|
+
.listingblock code[data-lang]::before {
|
|
426
|
+
@apply text-mono-xs;
|
|
427
|
+
content: attr(data-lang);
|
|
428
|
+
position: absolute;
|
|
429
|
+
top: 0.5rem;
|
|
430
|
+
right: 0.5rem;
|
|
431
|
+
display: block;
|
|
432
|
+
color: var(--content-secondary);
|
|
392
433
|
}
|
|
393
434
|
|
|
394
|
-
|
|
395
|
-
|
|
435
|
+
/* --- Callout numbers (conum) --- */
|
|
436
|
+
.conum {
|
|
437
|
+
display: inline-block;
|
|
396
438
|
}
|
|
397
439
|
|
|
398
|
-
.
|
|
399
|
-
@apply
|
|
440
|
+
pre .conum[data-value] {
|
|
441
|
+
@apply text-mono-xs;
|
|
442
|
+
position: relative;
|
|
443
|
+
top: -0.125rem;
|
|
444
|
+
display: inline-block;
|
|
445
|
+
height: 1rem;
|
|
446
|
+
min-width: 1rem;
|
|
447
|
+
color: var(--content-accent);
|
|
448
|
+
background-color: var(--surface-accent-hover);
|
|
449
|
+
border-radius: var(--radius-full);
|
|
450
|
+
text-align: center;
|
|
451
|
+
font-style: normal;
|
|
400
452
|
}
|
|
401
453
|
|
|
402
|
-
.
|
|
403
|
-
|
|
454
|
+
pre .conum[data-value]::after {
|
|
455
|
+
content: attr(data-value);
|
|
456
|
+
padding-left: 1px;
|
|
404
457
|
}
|
|
405
458
|
|
|
406
|
-
.
|
|
407
|
-
|
|
459
|
+
pre .conum[data-value] + b {
|
|
460
|
+
display: none;
|
|
408
461
|
}
|
|
409
462
|
|
|
410
|
-
|
|
411
|
-
.
|
|
412
|
-
|
|
463
|
+
/* --- Example blocks --- */
|
|
464
|
+
.exampleblock {
|
|
465
|
+
overflow-x: auto;
|
|
466
|
+
background-color: var(--surface-raise);
|
|
467
|
+
border-radius: var(--radius-md);
|
|
468
|
+
padding: 1.25rem 1.5rem;
|
|
413
469
|
}
|
|
414
470
|
|
|
415
|
-
.
|
|
416
|
-
@apply
|
|
471
|
+
.exampleblock p {
|
|
472
|
+
@apply text-sans-md;
|
|
473
|
+
margin-bottom: 0.5rem;
|
|
417
474
|
}
|
|
418
475
|
|
|
419
|
-
|
|
420
|
-
|
|
476
|
+
.exampleblock .content,
|
|
477
|
+
.exampleblock .paragraph:last-of-type p {
|
|
478
|
+
margin: 0;
|
|
421
479
|
}
|
|
422
480
|
|
|
423
|
-
|
|
424
|
-
|
|
481
|
+
.exampleblock > .content {
|
|
482
|
+
margin: 1rem 0;
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
/* --- Images --- */
|
|
486
|
+
img {
|
|
487
|
+
background-color: var(--surface-raise);
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
span img {
|
|
491
|
+
display: inline;
|
|
492
|
+
background-color: transparent;
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
.imageblock img {
|
|
496
|
+
margin: 0 auto;
|
|
497
|
+
width: 100%;
|
|
498
|
+
height: auto;
|
|
499
|
+
max-height: max(500px, 75vh);
|
|
500
|
+
object-fit: contain;
|
|
501
|
+
border: 1px solid var(--stroke-tertiary);
|
|
502
|
+
border-radius: var(--radius-md);
|
|
425
503
|
}
|
|
426
504
|
|
|
427
505
|
.imageblock .title {
|
|
428
|
-
@apply text-mono-xs
|
|
506
|
+
@apply text-mono-xs;
|
|
507
|
+
margin-top: 0.75rem;
|
|
508
|
+
max-width: 100%;
|
|
509
|
+
text-align: center;
|
|
510
|
+
color: var(--content-secondary);
|
|
511
|
+
font-style: normal;
|
|
429
512
|
}
|
|
430
513
|
|
|
431
514
|
img.wide {
|
|
@@ -434,113 +517,103 @@
|
|
|
434
517
|
margin-left: calc(100% / 8 * -1);
|
|
435
518
|
}
|
|
436
519
|
|
|
437
|
-
|
|
438
|
-
@apply text-mono-xs text-secondary;
|
|
439
|
-
}
|
|
440
|
-
|
|
441
|
-
sup.footnote a {
|
|
442
|
-
padding-top: calc(var(--header-height) + 20px);
|
|
443
|
-
margin-top: calc(var(--header-height) * -1 - 20px);
|
|
444
|
-
}
|
|
445
|
-
|
|
520
|
+
/* --- Block-level vertical rhythm --- */
|
|
446
521
|
.imageblock,
|
|
447
522
|
.literalblock,
|
|
448
523
|
.listingblock,
|
|
449
524
|
.stemblock,
|
|
450
525
|
.videoblock,
|
|
451
|
-
.exampleblock
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
.title {
|
|
456
|
-
@apply text-sans-lg text-[1em]! text-current mb-1 max-w-[40rem] text-left italic;
|
|
457
|
-
}
|
|
458
|
-
|
|
459
|
-
summary.title {
|
|
460
|
-
@apply text-raise not-italic;
|
|
526
|
+
.exampleblock,
|
|
527
|
+
.table-wrapper {
|
|
528
|
+
margin: 1rem 0;
|
|
461
529
|
}
|
|
462
530
|
|
|
463
|
-
.
|
|
464
|
-
|
|
531
|
+
.imageblock.inlineimage {
|
|
532
|
+
margin: 0.75rem 0;
|
|
465
533
|
}
|
|
466
534
|
|
|
535
|
+
/* --- Tables --- */
|
|
467
536
|
.table-wrapper {
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
.table-wrapper caption a:hover:after {
|
|
472
|
-
@apply align-[-2px];
|
|
537
|
+
position: relative;
|
|
538
|
+
overflow-x: auto;
|
|
473
539
|
}
|
|
474
540
|
|
|
475
541
|
.table-wrapper caption {
|
|
476
|
-
|
|
542
|
+
position: sticky;
|
|
543
|
+
left: 0;
|
|
544
|
+
text-align: left;
|
|
477
545
|
}
|
|
478
546
|
|
|
479
547
|
.table-wrapper caption > a {
|
|
480
|
-
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
table {
|
|
484
|
-
@apply border-secondary w-full border-separate overflow-hidden rounded-md border p-0;
|
|
485
|
-
border-spacing: 0;
|
|
548
|
+
text-decoration: none;
|
|
486
549
|
}
|
|
487
550
|
|
|
488
|
-
.
|
|
489
|
-
vertical-align:
|
|
551
|
+
.table-wrapper caption a:hover::after {
|
|
552
|
+
vertical-align: -2px;
|
|
490
553
|
}
|
|
491
554
|
|
|
492
|
-
|
|
493
|
-
|
|
555
|
+
table {
|
|
556
|
+
width: 100%;
|
|
557
|
+
border-collapse: separate;
|
|
558
|
+
border-spacing: 0;
|
|
559
|
+
overflow: hidden;
|
|
560
|
+
border: 1px solid var(--stroke-secondary);
|
|
561
|
+
border-radius: var(--radius-md);
|
|
562
|
+
padding: 0;
|
|
494
563
|
}
|
|
495
564
|
|
|
496
565
|
table p {
|
|
497
566
|
@apply text-sans-md;
|
|
567
|
+
margin: 0;
|
|
568
|
+
padding: 0;
|
|
498
569
|
}
|
|
499
570
|
|
|
500
571
|
table td,
|
|
501
572
|
table th {
|
|
502
|
-
|
|
573
|
+
padding: 0.5rem;
|
|
574
|
+
vertical-align: top;
|
|
575
|
+
border-right: 1px solid var(--stroke-secondary);
|
|
576
|
+
border-bottom: 1px solid var(--stroke-secondary);
|
|
503
577
|
}
|
|
504
578
|
|
|
505
|
-
table tr th:last-child
|
|
506
|
-
|
|
579
|
+
table tr th:last-child,
|
|
580
|
+
tbody tr td:last-child {
|
|
581
|
+
border-right: 0;
|
|
507
582
|
}
|
|
508
583
|
|
|
509
|
-
/*
|
|
510
|
-
specificity to handle nested tables
|
|
511
|
-
todo: check if it's needed in any of the other table styles
|
|
512
|
-
*/
|
|
584
|
+
/* Nested table specificity */
|
|
513
585
|
tbody > tr:last-child > td,
|
|
514
586
|
tbody > tr:last-child > th {
|
|
515
|
-
|
|
516
|
-
}
|
|
517
|
-
|
|
518
|
-
tbody tr td:last-child {
|
|
519
|
-
@apply border-r-0;
|
|
587
|
+
border-bottom: 0;
|
|
520
588
|
}
|
|
521
589
|
|
|
522
590
|
table th {
|
|
523
|
-
@apply text-mono-xs
|
|
591
|
+
@apply text-mono-xs;
|
|
592
|
+
text-align: left;
|
|
593
|
+
color: var(--content-secondary);
|
|
594
|
+
background-color: var(--surface-raise);
|
|
524
595
|
}
|
|
525
596
|
|
|
526
597
|
table th p {
|
|
527
598
|
@apply text-mono-xs;
|
|
528
599
|
}
|
|
529
600
|
|
|
530
|
-
table
|
|
531
|
-
|
|
601
|
+
table pre {
|
|
602
|
+
border: 0;
|
|
603
|
+
padding: 0;
|
|
532
604
|
}
|
|
533
605
|
|
|
534
|
-
table
|
|
535
|
-
|
|
606
|
+
table.tableblock table.tableblock {
|
|
607
|
+
margin: 0.5rem 0;
|
|
536
608
|
}
|
|
537
609
|
|
|
538
|
-
table
|
|
539
|
-
|
|
610
|
+
table.tableblock .imageblock {
|
|
611
|
+
margin: 0;
|
|
540
612
|
}
|
|
541
613
|
|
|
614
|
+
/* --- Callout list --- */
|
|
542
615
|
.colist table {
|
|
543
|
-
|
|
616
|
+
margin: 1.5rem 0;
|
|
544
617
|
}
|
|
545
618
|
|
|
546
619
|
.colist table td {
|
|
@@ -548,100 +621,143 @@
|
|
|
548
621
|
}
|
|
549
622
|
|
|
550
623
|
.colist table tr td:first-of-type {
|
|
551
|
-
|
|
624
|
+
width: 1%;
|
|
625
|
+
white-space: nowrap;
|
|
626
|
+
color: var(--content-tertiary);
|
|
552
627
|
}
|
|
553
628
|
|
|
554
629
|
.colist table b {
|
|
555
630
|
@apply text-mono-sm;
|
|
556
631
|
}
|
|
557
632
|
|
|
633
|
+
/* --- Bibliography --- */
|
|
558
634
|
div.bibliography ~ h2 {
|
|
559
|
-
|
|
635
|
+
margin-top: 3rem;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
@media (min-width: 800px) {
|
|
639
|
+
div.bibliography ~ h2 {
|
|
640
|
+
margin-top: 4rem;
|
|
641
|
+
}
|
|
560
642
|
}
|
|
561
643
|
|
|
562
|
-
.bibliography ul,
|
|
563
|
-
.bibliography ol {
|
|
564
|
-
|
|
644
|
+
.bibliography ul > li + li,
|
|
645
|
+
.bibliography ol > li + li {
|
|
646
|
+
margin-top: 0.5rem;
|
|
565
647
|
}
|
|
566
648
|
|
|
649
|
+
/* --- Misc --- */
|
|
567
650
|
mark {
|
|
568
|
-
|
|
651
|
+
color: var(--content-notice);
|
|
652
|
+
background-color: var(--surface-notice);
|
|
653
|
+
border-radius: var(--radius-md);
|
|
654
|
+
padding: 0 2px;
|
|
569
655
|
}
|
|
570
656
|
|
|
571
657
|
.steminline svg {
|
|
572
|
-
|
|
658
|
+
display: inline;
|
|
573
659
|
}
|
|
574
660
|
|
|
575
661
|
hr {
|
|
576
|
-
|
|
662
|
+
border-color: var(--stroke-default);
|
|
663
|
+
margin: 0.75rem 0;
|
|
577
664
|
}
|
|
578
665
|
|
|
579
666
|
.sidebarblock {
|
|
580
|
-
|
|
667
|
+
background-color: var(--surface-raise);
|
|
668
|
+
border-radius: var(--radius-md);
|
|
669
|
+
margin: 2rem 0;
|
|
670
|
+
padding: 1.25rem 1.5rem;
|
|
581
671
|
}
|
|
582
672
|
|
|
583
|
-
|
|
673
|
+
/* --- Footnotes --- */
|
|
674
|
+
sup.footnote {
|
|
675
|
+
@apply text-mono-xs;
|
|
676
|
+
color: var(--content-secondary);
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
sup.footnote a {
|
|
680
|
+
padding-top: calc(var(--header-height) + 20px);
|
|
681
|
+
margin-top: calc(var(--header-height) * -1 - 20px);
|
|
682
|
+
}
|
|
683
|
+
|
|
684
|
+
/* --- Titles --- */
|
|
685
|
+
.title {
|
|
686
|
+
@apply text-sans-lg;
|
|
687
|
+
margin-bottom: 0.25rem;
|
|
688
|
+
max-width: 40rem;
|
|
584
689
|
text-align: left;
|
|
690
|
+
font-size: 1em !important;
|
|
691
|
+
font-style: italic;
|
|
692
|
+
color: currentColor;
|
|
585
693
|
}
|
|
586
694
|
|
|
695
|
+
summary.title {
|
|
696
|
+
color: var(--content-raise);
|
|
697
|
+
font-style: normal;
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
/* --- Alignment helpers --- */
|
|
701
|
+
.halign-left {
|
|
702
|
+
text-align: left;
|
|
703
|
+
}
|
|
587
704
|
.halign-right {
|
|
588
705
|
text-align: right;
|
|
589
706
|
}
|
|
590
|
-
|
|
591
707
|
.halign-center {
|
|
592
708
|
text-align: center;
|
|
593
709
|
}
|
|
594
|
-
|
|
595
710
|
.valign-top {
|
|
596
711
|
vertical-align: top;
|
|
597
712
|
}
|
|
598
|
-
|
|
599
|
-
.valign-bottom {
|
|
600
|
-
vertical-align: bottom;
|
|
601
|
-
}
|
|
602
|
-
|
|
603
713
|
.valign-middle {
|
|
604
714
|
vertical-align: middle;
|
|
605
715
|
}
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
@apply text-sans-xl;
|
|
609
|
-
}
|
|
610
|
-
|
|
611
|
-
a:not(:is(h1, h2, h3, h4, h5, h6) a) {
|
|
612
|
-
text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
|
|
613
|
-
@apply text-accent-secondary underline;
|
|
716
|
+
.valign-bottom {
|
|
717
|
+
vertical-align: bottom;
|
|
614
718
|
}
|
|
615
719
|
}
|
|
616
720
|
|
|
721
|
+
/* Footnotes and TOC share the inline-code / accent-link treatments */
|
|
617
722
|
#footnotes p a {
|
|
618
|
-
|
|
723
|
+
color: var(--content-accent-secondary);
|
|
724
|
+
text-decoration: underline;
|
|
725
|
+
text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
#footnotes p a:hover {
|
|
729
|
+
color: var(--content-accent);
|
|
619
730
|
}
|
|
620
731
|
|
|
621
732
|
#footnotes p code,
|
|
622
733
|
.toc code {
|
|
623
|
-
|
|
734
|
+
font-size: 0.825em;
|
|
735
|
+
letter-spacing: 0;
|
|
736
|
+
vertical-align: 1px;
|
|
737
|
+
margin: 0 1px;
|
|
738
|
+
padding: 0 0.125rem;
|
|
739
|
+
background-color: color-mix(in srgb, currentColor 8%, transparent);
|
|
740
|
+
border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
|
|
741
|
+
border-radius: var(--radius-md);
|
|
624
742
|
}
|
|
625
743
|
|
|
744
|
+
/* --- Animated accordion --- */
|
|
626
745
|
@media screen and (min-width: 720px) {
|
|
746
|
+
.animated-accordion {
|
|
747
|
+
overflow: hidden;
|
|
748
|
+
}
|
|
749
|
+
|
|
627
750
|
.animated-accordion[data-state='open'].hydrated {
|
|
628
751
|
animation: accordionSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
|
|
629
752
|
}
|
|
753
|
+
|
|
630
754
|
.animated-accordion[data-state='closed'].hydrated {
|
|
631
755
|
animation: accordionSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
|
|
632
756
|
}
|
|
633
757
|
}
|
|
634
758
|
|
|
635
|
-
@media screen and (min-width: 720px) {
|
|
636
|
-
.animated-accordion {
|
|
637
|
-
overflow: hidden;
|
|
638
|
-
}
|
|
639
|
-
}
|
|
640
|
-
|
|
641
759
|
@media screen and (prefers-reduced-motion) {
|
|
642
|
-
.animated-accordion[data-state='open']
|
|
643
|
-
animation-name: none;
|
|
644
|
-
}
|
|
760
|
+
.animated-accordion[data-state='open'],
|
|
645
761
|
.animated-accordion[data-state='closed'] {
|
|
646
762
|
animation-name: none;
|
|
647
763
|
}
|
|
@@ -665,6 +781,7 @@
|
|
|
665
781
|
}
|
|
666
782
|
}
|
|
667
783
|
|
|
784
|
+
/* --- Print --- */
|
|
668
785
|
@media print {
|
|
669
786
|
html {
|
|
670
787
|
font-size: 14px !important;
|
|
@@ -731,14 +848,14 @@
|
|
|
731
848
|
--stroke-default-p3: var(--content-secondary);
|
|
732
849
|
}
|
|
733
850
|
|
|
734
|
-
p a {
|
|
735
|
-
text-decoration-color: black !important;
|
|
736
|
-
}
|
|
737
|
-
|
|
738
851
|
p {
|
|
739
852
|
color: black !important;
|
|
740
853
|
}
|
|
741
854
|
|
|
855
|
+
p a {
|
|
856
|
+
text-decoration-color: black !important;
|
|
857
|
+
}
|
|
858
|
+
|
|
742
859
|
.imageblock img {
|
|
743
860
|
border: 0;
|
|
744
861
|
}
|
|
@@ -749,12 +866,8 @@
|
|
|
749
866
|
}
|
|
750
867
|
|
|
751
868
|
.asciidoc-body {
|
|
752
|
-
h1[data-sectnum]::before
|
|
753
|
-
|
|
754
|
-
h3[data-sectnum]::before,
|
|
755
|
-
h4[data-sectnum]::before,
|
|
756
|
-
h5[data-sectnum]::before {
|
|
757
|
-
@apply !hidden;
|
|
869
|
+
:is(h1, h2, h3, h4, h5)[data-sectnum]::before {
|
|
870
|
+
display: none !important;
|
|
758
871
|
}
|
|
759
872
|
|
|
760
873
|
h1,
|
|
@@ -762,7 +875,8 @@
|
|
|
762
875
|
h3,
|
|
763
876
|
h4,
|
|
764
877
|
h5 {
|
|
765
|
-
|
|
878
|
+
margin-left: 0;
|
|
879
|
+
padding-left: 0;
|
|
766
880
|
}
|
|
767
881
|
|
|
768
882
|
.paragraph {
|