@intergrav/dev.css 2.0.11 → 3.1.0

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