@intergrav/dev.css 2.0.10 → 2.0.11

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/dev.css CHANGED
@@ -1,499 +1,499 @@
1
- :root {
2
- /* Font families - Geist, Inter, Apple default (Gecko and Blink), Microsoft default, browser default */
3
- --dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
4
- "Segoe UI", sans-serif;
5
- --dc-font-mono: "Geist Mono", monospace;
6
- /* Light colors */
7
- --dc-tx-1: #000000;
8
- --dc-tx-2: #1a1a1a;
9
- --dc-bg-1: #fafafa;
10
- --dc-bg-2: #fff;
11
- --dc-bg-3: #ebebeb;
12
- --dc-lk-1: #0068d6;
13
- --dc-lkb-1: #0072f5;
14
- --dc-lkb-2: #0062d1;
15
- --dc-lkb-tx: #ededed;
16
- --dc-ac-1: #8e4ec6;
17
- --dc-ac-tx: #ededed;
18
- /* Dark colors */
19
- --dc-d-tx-1: #ededed;
20
- --dc-d-tx-2: #a1a1a1;
21
- --dc-d-bg-1: #000;
22
- --dc-d-bg-2: #0a0a0a;
23
- --dc-d-bg-3: #2e2e2e;
24
- --dc-d-lk-1: #52a8ff;
25
- --dc-d-lkb-1: #0072f5;
26
- --dc-d-lkb-2: #0062d1;
27
- --dc-d-lkb-tx: #ededed;
28
- --dc-d-ac-1: #8e4ec6;
29
- --dc-d-ac-tx: #ededed;
30
- }
31
-
32
- @media (prefers-color-scheme: dark) {
33
- :root {
34
- --dc-tx-1: var(--dc-d-tx-1);
35
- --dc-tx-2: var(--dc-d-tx-2);
36
- --dc-bg-1: var(--dc-d-bg-1);
37
- --dc-bg-2: var(--dc-d-bg-2);
38
- --dc-bg-3: var(--dc-d-bg-3);
39
- --dc-lk-1: var(--dc-d-lk-1);
40
- --dc-lkb-1: var(--dc-d-lkb-1);
41
- --dc-lkb-2: var(--dc-d-lkb-2);
42
- --dc-lkb-tx: var(--dc-d-lkb-tx);
43
- --dc-ac-1: var(--dc-d-ac-1);
44
- --dc-ac-tx: var(--dc-d-ac-tx);
45
- }
46
- }
47
-
48
- * {
49
- margin: 0;
50
- padding: 0;
51
- }
52
-
53
- address,
54
- area,
55
- article,
56
- aside,
57
- audio,
58
- blockquote,
59
- datalist,
60
- details,
61
- dl,
62
- fieldset,
63
- figure,
64
- form,
65
- input,
66
- iframe,
67
- img,
68
- meter,
69
- nav,
70
- ol,
71
- optgroup,
72
- option,
73
- output,
74
- p,
75
- pre,
76
- progress,
77
- ruby,
78
- section,
79
- table,
80
- textarea,
81
- ul,
82
- video {
83
- margin-bottom: 1rem;
84
- }
85
-
86
- html,
87
- input,
88
- select,
89
- button {
90
- font-family: var(--dc-font-sans);
91
- }
92
-
93
- body {
94
- margin: 0 auto;
95
- max-width: 750px;
96
- padding: 2rem;
97
- border-radius: 4px;
98
- overflow-x: hidden;
99
- word-break: break-word;
100
- overflow-wrap: break-word;
101
- background: var(--dc-bg-1);
102
- color: var(--dc-tx-2);
103
- font-size: 1.03rem;
104
- line-height: 1.5;
105
- }
106
-
107
- ::selection {
108
- background: var(--dc-ac-1);
109
- color: var(--dc-ac-tx);
110
- }
111
-
112
- h1,
113
- h2,
114
- h3,
115
- h4,
116
- h5,
117
- h6 {
118
- line-height: 1;
119
- color: var(--dc-tx-1);
120
- padding-top: 0.875rem;
121
- }
122
-
123
- h1,
124
- h2,
125
- h3 {
126
- padding-bottom: 6px;
127
- margin-bottom: 8px;
128
- border-bottom: 1px solid var(--dc-bg-3);
129
- }
130
-
131
- h4,
132
- h5,
133
- h6 {
134
- margin-bottom: 0.3rem;
135
- }
136
-
137
- h1 {
138
- font-size: 2.25rem;
139
- }
140
-
141
- h2 {
142
- font-size: 1.85rem;
143
- }
144
-
145
- h3 {
146
- font-size: 1.55rem;
147
- }
148
-
149
- h4 {
150
- font-size: 1.25rem;
151
- }
152
-
153
- h5 {
154
- font-size: 1rem;
155
- }
156
-
157
- h6 {
158
- font-size: 0.875rem;
159
- }
160
-
161
- a {
162
- color: var(--dc-lk-1);
163
- text-decoration: none;
164
- }
165
-
166
- a:hover {
167
- text-decoration: underline;
168
- }
169
-
170
- abbr:hover {
171
- cursor: help;
172
- }
173
-
174
- blockquote {
175
- padding: 1.5rem;
176
- background: var(--dc-bg-2);
177
- border: 1px solid var(--dc-bg-3);
178
- border-left: 6px solid var(--dc-bg-3);
179
- border-radius: 4px;
180
- }
181
-
182
- blockquote *:last-child {
183
- padding-bottom: 0;
184
- margin-bottom: 0;
185
- }
186
-
187
- @media (max-width: calc(-1px + (750px + 4rem) + ((250px + 2rem)*2))) {
188
- header {
189
- background: var(--dc-bg-2);
190
- border-bottom: 1px solid var(--dc-bg-3);
191
- padding-top: 0.9rem;
192
- padding-bottom: 0.6rem;
193
- margin: -2rem calc(50% - 50vw) 2rem;
194
- padding-left: calc(50vw - 50%);
195
- padding-right: calc(50vw - 50%);
196
- }
197
-
198
- header nav a + a::before {
199
- content: "• ";
200
- color: var(--dc-tx-2);
201
- }
202
-
203
- header h1 {
204
- font-size: 1.6rem;
205
- }
206
-
207
- header h2 {
208
- font-size: 1.4rem;
209
- }
210
-
211
- header h3 {
212
- font-size: 1.2rem;
213
- }
214
-
215
- header h4 {
216
- font-size: 1rem;
217
- }
218
-
219
- header h5 {
220
- font-size: 0.9rem;
221
- }
222
-
223
- header p {
224
- font-size: 1rem;
225
- }
226
-
227
- header nav {
228
- font-size: 0.9rem;
229
- }
230
-
231
- header h6 {
232
- font-size: 0.8rem;
233
- }
234
-
235
- header * {
236
- padding-top: 0.15rem;
237
- padding-bottom: 0.15rem;
238
- margin-top: 0rem;
239
- margin-bottom: 0rem;
240
- }
241
-
242
- header > *:first-child {
243
- margin-top: 0;
244
- padding-top: 0;
245
- }
246
-
247
- header > *:last-child {
248
- margin-bottom: 0;
249
- padding-bottom: 0;
250
- }
251
- }
252
-
253
- @media (min-width: calc((750px + 4rem) + ((250px + 2rem)*2))) {
254
- header {
255
- padding: 2rem;
256
- padding-right: 0;
257
- margin: 0;
258
- position: fixed;
259
- top: 0;
260
- left: calc(50% - ((750px + 4rem) / 2) - (250px + 2rem));
261
- width: 250px;
262
- height: calc(100% - 1rem);
263
- overflow-y: auto;
264
- }
265
-
266
- header nav {
267
- display: flex;
268
- flex-direction: column;
269
- border-top: 1px solid var(--dc-bg-3);
270
- padding-top: 1rem;
271
- margin-top: 0.5rem;
272
- }
273
-
274
- header nav a::before {
275
- content: "• ";
276
- color: var(--dc-tx-2);
277
- }
278
- }
279
-
280
- header h1,
281
- header h2,
282
- header h3,
283
- header h4,
284
- header h5,
285
- header h6 {
286
- border-bottom: 0;
287
- }
288
-
289
- a button,
290
- button,
291
- input[type="submit"],
292
- input[type="reset"],
293
- input[type="button"] {
294
- font-size: 1rem;
295
- display: inline-block;
296
- padding: 6px 12px;
297
- text-align: center;
298
- text-decoration: none;
299
- white-space: nowrap;
300
- background: var(--dc-lkb-1);
301
- color: var(--dc-lkb-tx);
302
- border: 0;
303
- border-radius: 4px;
304
- box-sizing: border-box;
305
- cursor: pointer;
306
- }
307
-
308
- a button[disabled],
309
- button[disabled],
310
- input[type="submit"][disabled],
311
- input[type="reset"][disabled],
312
- input[type="button"][disabled] {
313
- cursor: not-allowed;
314
- opacity: 0.5;
315
- }
316
-
317
- .button:focus,
318
- .button:enabled:hover,
319
- button:focus,
320
- button:enabled:hover,
321
- input[type="submit"]:focus,
322
- input[type="submit"]:enabled:hover,
323
- input[type="reset"]:focus,
324
- input[type="reset"]:enabled:hover,
325
- input[type="button"]:focus,
326
- input[type="button"]:enabled:hover {
327
- background: var(--dc-lkb-2);
328
- }
329
-
330
- a img {
331
- margin-bottom: 0;
332
- }
333
-
334
- code,
335
- pre,
336
- kbd,
337
- samp {
338
- font-family: var(--dc-font-mono);
339
- }
340
-
341
- code,
342
- samp,
343
- kbd,
344
- pre {
345
- background: var(--dc-bg-2);
346
- border: 1px solid var(--dc-bg-3);
347
- border-radius: 4px;
348
- padding: 3px 6px;
349
- font-size: 0.9em;
350
- }
351
-
352
- kbd {
353
- border-bottom: 3px solid var(--dc-bg-3);
354
- }
355
-
356
- pre {
357
- padding: 1rem 1.4rem;
358
- max-width: 100%;
359
- overflow: auto;
360
- }
361
-
362
- pre code {
363
- background: inherit;
364
- font-size: inherit;
365
- color: inherit;
366
- border: 0;
367
- padding: 0;
368
- margin: 0;
369
- }
370
-
371
- code pre {
372
- display: inline;
373
- background: inherit;
374
- font-size: inherit;
375
- color: inherit;
376
- border: 0;
377
- padding: 0;
378
- margin: 0;
379
- }
380
-
381
- details {
382
- padding: 0.6rem 1rem;
383
- background: var(--dc-bg-2);
384
- border: 1px solid var(--dc-bg-3);
385
- border-radius: 4px;
386
- }
387
-
388
- summary {
389
- cursor: pointer;
390
- font-weight: bold;
391
- }
392
-
393
- details[open] summary {
394
- margin-bottom: 8px;
395
- }
396
-
397
- details[open] > *:first-child {
398
- margin-top: 0;
399
- padding-top: 0;
400
- }
401
-
402
- details[open] > *:last-child {
403
- margin-bottom: 0;
404
- padding-bottom: 0;
405
- }
406
-
407
- dt {
408
- font-weight: bold;
409
- }
410
-
411
- dd::before {
412
- content: "→ ";
413
- }
414
-
415
- hr {
416
- border: 0;
417
- border-bottom: 1px solid var(--dc-bg-3);
418
- margin: 1rem auto;
419
- }
420
-
421
- fieldset {
422
- margin-top: 1rem;
423
- padding: 2rem;
424
- border: 1px solid var(--dc-bg-3);
425
- border-radius: 4px;
426
- }
427
-
428
- legend {
429
- padding: auto 0.5rem;
430
- }
431
-
432
- table {
433
- border-collapse: collapse;
434
- width: 100%;
435
- }
436
-
437
- td,
438
- th {
439
- border: 1px solid var(--dc-bg-3);
440
- text-align: left;
441
- padding: 0.5rem;
442
- }
443
-
444
- th {
445
- background: var(--dc-bg-2);
446
- }
447
-
448
- tr:nth-child(even) {
449
- background: var(--dc-bg-2);
450
- }
451
-
452
- table caption {
453
- font-weight: bold;
454
- margin-bottom: 0.5rem;
455
- }
456
-
457
- textarea {
458
- max-width: 100%;
459
- }
460
-
461
- ol,
462
- ul {
463
- padding-left: 2rem;
464
- }
465
-
466
- li {
467
- margin-top: 0.4rem;
468
- }
469
-
470
- ul ul,
471
- ol ul,
472
- ul ol,
473
- ol ol {
474
- margin-bottom: 0;
475
- }
476
-
477
- mark {
478
- padding: 3px 6px;
479
- background: var(--dc-ac-1);
480
- color: var(--dc-ac-tx);
481
- border-radius: 4px;
482
- }
483
-
484
- textarea,
485
- select,
486
- input {
487
- padding: 6px 12px;
488
- margin-bottom: 0.5rem;
489
- background: var(--dc-bg-2);
490
- color: var(--dc-tx-2);
491
- border: 1px solid var(--dc-bg-3);
492
- border-radius: 4px;
493
- box-shadow: none;
494
- box-sizing: border-box;
495
- }
496
-
497
- img {
498
- max-width: 100%;
499
- }
1
+ :root {
2
+ /* Font families - Geist, Inter, Apple default (Gecko and Blink), Microsoft default, browser default */
3
+ --dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
4
+ "Segoe UI", sans-serif;
5
+ --dc-font-mono: "Geist Mono", monospace;
6
+ /* Light colors */
7
+ --dc-tx-1: #000000;
8
+ --dc-tx-2: #1a1a1a;
9
+ --dc-bg-1: #fafafa;
10
+ --dc-bg-2: #fff;
11
+ --dc-bg-3: #ebebeb;
12
+ --dc-lk-1: #0068d6;
13
+ --dc-lkb-1: #0072f5;
14
+ --dc-lkb-2: #0062d1;
15
+ --dc-lkb-tx: #ededed;
16
+ --dc-ac-1: #8e4ec6;
17
+ --dc-ac-tx: #ededed;
18
+ /* Dark colors */
19
+ --dc-d-tx-1: #ededed;
20
+ --dc-d-tx-2: #a1a1a1;
21
+ --dc-d-bg-1: #000;
22
+ --dc-d-bg-2: #0a0a0a;
23
+ --dc-d-bg-3: #2e2e2e;
24
+ --dc-d-lk-1: #52a8ff;
25
+ --dc-d-lkb-1: #0072f5;
26
+ --dc-d-lkb-2: #0062d1;
27
+ --dc-d-lkb-tx: #ededed;
28
+ --dc-d-ac-1: #8e4ec6;
29
+ --dc-d-ac-tx: #ededed;
30
+ }
31
+
32
+ @media (prefers-color-scheme: dark) {
33
+ :root {
34
+ --dc-tx-1: var(--dc-d-tx-1);
35
+ --dc-tx-2: var(--dc-d-tx-2);
36
+ --dc-bg-1: var(--dc-d-bg-1);
37
+ --dc-bg-2: var(--dc-d-bg-2);
38
+ --dc-bg-3: var(--dc-d-bg-3);
39
+ --dc-lk-1: var(--dc-d-lk-1);
40
+ --dc-lkb-1: var(--dc-d-lkb-1);
41
+ --dc-lkb-2: var(--dc-d-lkb-2);
42
+ --dc-lkb-tx: var(--dc-d-lkb-tx);
43
+ --dc-ac-1: var(--dc-d-ac-1);
44
+ --dc-ac-tx: var(--dc-d-ac-tx);
45
+ }
46
+ }
47
+
48
+ * {
49
+ margin: 0;
50
+ padding: 0;
51
+ }
52
+
53
+ address,
54
+ area,
55
+ article,
56
+ aside,
57
+ audio,
58
+ blockquote,
59
+ datalist,
60
+ details,
61
+ dl,
62
+ fieldset,
63
+ figure,
64
+ form,
65
+ input,
66
+ iframe,
67
+ img,
68
+ meter,
69
+ nav,
70
+ ol,
71
+ optgroup,
72
+ option,
73
+ output,
74
+ p,
75
+ pre,
76
+ progress,
77
+ ruby,
78
+ section,
79
+ table,
80
+ textarea,
81
+ ul,
82
+ video {
83
+ margin-bottom: 1rem;
84
+ }
85
+
86
+ html,
87
+ input,
88
+ select,
89
+ button {
90
+ font-family: var(--dc-font-sans);
91
+ }
92
+
93
+ body {
94
+ margin: 0 auto;
95
+ max-width: 750px;
96
+ padding: 2rem;
97
+ border-radius: 4px;
98
+ overflow-x: hidden;
99
+ word-break: break-word;
100
+ overflow-wrap: break-word;
101
+ background: var(--dc-bg-1);
102
+ color: var(--dc-tx-2);
103
+ font-size: 1rem;
104
+ line-height: 1.5;
105
+ }
106
+
107
+ ::selection {
108
+ background: var(--dc-ac-1);
109
+ color: var(--dc-ac-tx);
110
+ }
111
+
112
+ h1,
113
+ h2,
114
+ h3,
115
+ h4,
116
+ h5,
117
+ h6 {
118
+ line-height: 1;
119
+ color: var(--dc-tx-1);
120
+ padding-top: 0.875rem;
121
+ }
122
+
123
+ h1,
124
+ h2,
125
+ h3 {
126
+ padding-bottom: 0.3rem;
127
+ margin-bottom: 0.4rem;
128
+ border-bottom: 1px solid var(--dc-bg-3);
129
+ }
130
+
131
+ h4,
132
+ h5,
133
+ h6 {
134
+ margin-bottom: 0.3rem;
135
+ }
136
+
137
+ h1 {
138
+ font-size: 2rem;
139
+ }
140
+
141
+ h2 {
142
+ font-size: 1.75rem;
143
+ }
144
+
145
+ h3 {
146
+ font-size: 1.5rem;
147
+ }
148
+
149
+ h4 {
150
+ font-size: 1.25rem;
151
+ }
152
+
153
+ h5 {
154
+ font-size: 1rem;
155
+ }
156
+
157
+ h6 {
158
+ font-size: 0.875rem;
159
+ }
160
+
161
+ a {
162
+ color: var(--dc-lk-1);
163
+ text-decoration: none;
164
+ }
165
+
166
+ a:hover {
167
+ text-decoration: underline;
168
+ }
169
+
170
+ abbr:hover {
171
+ cursor: help;
172
+ }
173
+
174
+ blockquote {
175
+ padding: 1.5rem;
176
+ background: var(--dc-bg-2);
177
+ border: 1px solid var(--dc-bg-3);
178
+ border-left: 5px solid var(--dc-bg-3);
179
+ border-radius: 4px;
180
+ }
181
+
182
+ blockquote *:last-child {
183
+ padding-bottom: 0;
184
+ margin-bottom: 0;
185
+ }
186
+
187
+ @media (max-width: calc(-1px + (750px + 4rem) + ((275px + 2rem)*2))) {
188
+ header {
189
+ background: var(--dc-bg-2);
190
+ border-bottom: 1px solid var(--dc-bg-3);
191
+ padding-top: 0.9rem;
192
+ padding-bottom: 0.6rem;
193
+ margin: -2rem calc(50% - 50vw) 2rem;
194
+ padding-left: calc(50vw - 50%);
195
+ padding-right: calc(50vw - 50%);
196
+ }
197
+
198
+ header nav a + a::before {
199
+ content: "• ";
200
+ color: var(--dc-tx-2);
201
+ }
202
+
203
+ header h1 {
204
+ font-size: 1.6rem;
205
+ }
206
+
207
+ header h2 {
208
+ font-size: 1.4rem;
209
+ }
210
+
211
+ header h3 {
212
+ font-size: 1.2rem;
213
+ }
214
+
215
+ header h4 {
216
+ font-size: 1rem;
217
+ }
218
+
219
+ header h5 {
220
+ font-size: 0.9rem;
221
+ }
222
+
223
+ header p {
224
+ font-size: 1rem;
225
+ }
226
+
227
+ header nav {
228
+ font-size: 0.9rem;
229
+ }
230
+
231
+ header h6 {
232
+ font-size: 0.8rem;
233
+ }
234
+
235
+ header * {
236
+ padding-top: 0.15rem;
237
+ padding-bottom: 0.15rem;
238
+ margin-top: 0rem;
239
+ margin-bottom: 0rem;
240
+ }
241
+
242
+ header > *:first-child {
243
+ margin-top: 0;
244
+ padding-top: 0;
245
+ }
246
+
247
+ header > *:last-child {
248
+ margin-bottom: 0;
249
+ padding-bottom: 0;
250
+ }
251
+ }
252
+
253
+ @media (min-width: calc((750px + 4rem) + ((275px + 2rem)*2))) {
254
+ header {
255
+ padding: 2rem;
256
+ padding-right: 0;
257
+ margin: 0;
258
+ position: fixed;
259
+ top: 0;
260
+ left: calc(50% - ((750px + 4rem) / 2) - (275px + 2rem));
261
+ width: 275px;
262
+ height: calc(100% - 1rem);
263
+ overflow-y: auto;
264
+ }
265
+
266
+ header nav {
267
+ display: flex;
268
+ flex-direction: column;
269
+ border-top: 1px solid var(--dc-bg-3);
270
+ padding-top: 1rem;
271
+ margin-top: 0.5rem;
272
+ }
273
+
274
+ header nav a::before {
275
+ content: "• ";
276
+ color: var(--dc-tx-2);
277
+ }
278
+ }
279
+
280
+ header h1,
281
+ header h2,
282
+ header h3,
283
+ header h4,
284
+ header h5,
285
+ header h6 {
286
+ border-bottom: 0;
287
+ }
288
+
289
+ a button,
290
+ button,
291
+ input[type="submit"],
292
+ input[type="reset"],
293
+ input[type="button"] {
294
+ font-size: 1rem;
295
+ display: inline-block;
296
+ padding: 6px 12px;
297
+ text-align: center;
298
+ text-decoration: none;
299
+ white-space: nowrap;
300
+ background: var(--dc-lkb-1);
301
+ color: var(--dc-lkb-tx);
302
+ border: 0;
303
+ border-radius: 4px;
304
+ box-sizing: border-box;
305
+ cursor: pointer;
306
+ }
307
+
308
+ a button[disabled],
309
+ button[disabled],
310
+ input[type="submit"][disabled],
311
+ input[type="reset"][disabled],
312
+ input[type="button"][disabled] {
313
+ cursor: not-allowed;
314
+ opacity: 0.5;
315
+ }
316
+
317
+ .button:focus,
318
+ .button:enabled:hover,
319
+ button:focus,
320
+ button:enabled:hover,
321
+ input[type="submit"]:focus,
322
+ input[type="submit"]:enabled:hover,
323
+ input[type="reset"]:focus,
324
+ input[type="reset"]:enabled:hover,
325
+ input[type="button"]:focus,
326
+ input[type="button"]:enabled:hover {
327
+ background: var(--dc-lkb-2);
328
+ }
329
+
330
+ a img {
331
+ margin-bottom: 0;
332
+ }
333
+
334
+ code,
335
+ pre,
336
+ kbd,
337
+ samp {
338
+ font-family: var(--dc-font-mono);
339
+ }
340
+
341
+ code,
342
+ samp,
343
+ kbd,
344
+ pre {
345
+ background: var(--dc-bg-2);
346
+ border: 1px solid var(--dc-bg-3);
347
+ border-radius: 4px;
348
+ padding: 2px 4px;
349
+ font-size: 0.9rem;
350
+ }
351
+
352
+ kbd {
353
+ border-bottom: 3px solid var(--dc-bg-3);
354
+ }
355
+
356
+ pre {
357
+ padding: 1rem 1.4rem;
358
+ max-width: 100%;
359
+ overflow: auto;
360
+ }
361
+
362
+ pre code {
363
+ background: inherit;
364
+ font-size: inherit;
365
+ color: inherit;
366
+ border: 0;
367
+ padding: 0;
368
+ margin: 0;
369
+ }
370
+
371
+ code pre {
372
+ display: inline;
373
+ background: inherit;
374
+ font-size: inherit;
375
+ color: inherit;
376
+ border: 0;
377
+ padding: 0;
378
+ margin: 0;
379
+ }
380
+
381
+ details {
382
+ padding: 0.6rem 1rem;
383
+ background: var(--dc-bg-2);
384
+ border: 1px solid var(--dc-bg-3);
385
+ border-radius: 4px;
386
+ }
387
+
388
+ summary {
389
+ cursor: pointer;
390
+ font-weight: bold;
391
+ }
392
+
393
+ details[open] summary {
394
+ margin-bottom: 8px;
395
+ }
396
+
397
+ details[open] > *:first-child {
398
+ margin-top: 0;
399
+ padding-top: 0;
400
+ }
401
+
402
+ details[open] > *:last-child {
403
+ margin-bottom: 0;
404
+ padding-bottom: 0;
405
+ }
406
+
407
+ dt {
408
+ font-weight: bold;
409
+ }
410
+
411
+ dd::before {
412
+ content: "→ ";
413
+ }
414
+
415
+ hr {
416
+ border: 0;
417
+ border-bottom: 1px solid var(--dc-bg-3);
418
+ margin: 1rem auto;
419
+ }
420
+
421
+ fieldset {
422
+ margin-top: 1rem;
423
+ padding: 2rem;
424
+ border: 1px solid var(--dc-bg-3);
425
+ border-radius: 4px;
426
+ }
427
+
428
+ legend {
429
+ padding: auto 0.5rem;
430
+ }
431
+
432
+ table {
433
+ border-collapse: collapse;
434
+ width: 100%;
435
+ }
436
+
437
+ td,
438
+ th {
439
+ border: 1px solid var(--dc-bg-3);
440
+ text-align: left;
441
+ padding: 0.5rem;
442
+ }
443
+
444
+ th {
445
+ background: var(--dc-bg-2);
446
+ }
447
+
448
+ tr:nth-child(even) {
449
+ background: var(--dc-bg-2);
450
+ }
451
+
452
+ table caption {
453
+ font-weight: bold;
454
+ margin-bottom: 0.5rem;
455
+ }
456
+
457
+ textarea {
458
+ max-width: 100%;
459
+ }
460
+
461
+ ol,
462
+ ul {
463
+ padding-left: 2rem;
464
+ }
465
+
466
+ li {
467
+ margin-top: 0.4rem;
468
+ }
469
+
470
+ ul ul,
471
+ ol ul,
472
+ ul ol,
473
+ ol ol {
474
+ margin-bottom: 0;
475
+ }
476
+
477
+ mark {
478
+ padding: 2px 4px;
479
+ background: var(--dc-ac-1);
480
+ color: var(--dc-ac-tx);
481
+ border-radius: 4px;
482
+ }
483
+
484
+ textarea,
485
+ select,
486
+ input {
487
+ padding: 6px 12px;
488
+ margin-bottom: 0.5rem;
489
+ background: var(--dc-bg-2);
490
+ color: var(--dc-tx-2);
491
+ border: 1px solid var(--dc-bg-3);
492
+ border-radius: 4px;
493
+ box-shadow: none;
494
+ box-sizing: border-box;
495
+ }
496
+
497
+ img {
498
+ max-width: 100%;
499
+ }