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