@intergrav/dev.css 2.0.11 → 3.0.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/README.md +16 -10
- package/demo.html +263 -251
- package/dev.css +286 -311
- package/package.json +32 -15
- package/theme/boilerplate.css +15 -15
- package/theme/night.css +12 -12
- package/theme/terminal.css +15 -15
package/dev.css
CHANGED
|
@@ -1,55 +1,112 @@
|
|
|
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 */
|
|
1
25
|
:root {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
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;
|
|
30
82
|
}
|
|
31
83
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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;
|
|
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%;
|
|
51
95
|
}
|
|
52
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 */
|
|
53
110
|
address,
|
|
54
111
|
area,
|
|
55
112
|
article,
|
|
@@ -80,229 +137,181 @@ table,
|
|
|
80
137
|
textarea,
|
|
81
138
|
ul,
|
|
82
139
|
video {
|
|
83
|
-
|
|
140
|
+
margin-bottom: 1rem;
|
|
84
141
|
}
|
|
85
142
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
button {
|
|
90
|
-
font-family: var(--dc-font-sans);
|
|
143
|
+
/* 5. Font Family */
|
|
144
|
+
html {
|
|
145
|
+
font-family: var(--dc-font-sans);
|
|
91
146
|
}
|
|
92
147
|
|
|
148
|
+
code,
|
|
149
|
+
pre,
|
|
150
|
+
kbd,
|
|
151
|
+
samp {
|
|
152
|
+
font-family: var(--dc-font-mono);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* 6. Body and Selection Styling */
|
|
93
156
|
body {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
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;
|
|
157
|
+
margin: 0 auto;
|
|
158
|
+
max-width: 48rem;
|
|
159
|
+
padding: 2rem;
|
|
160
|
+
background: var(--dc-bg-1);
|
|
161
|
+
color: var(--dc-tx-2);
|
|
105
162
|
}
|
|
106
163
|
|
|
107
164
|
::selection {
|
|
108
|
-
|
|
109
|
-
|
|
165
|
+
background: var(--dc-ac-1);
|
|
166
|
+
color: var(--dc-ac-tx);
|
|
110
167
|
}
|
|
111
168
|
|
|
169
|
+
/* 7. Typography */
|
|
112
170
|
h1,
|
|
113
171
|
h2,
|
|
114
172
|
h3,
|
|
115
173
|
h4,
|
|
116
174
|
h5,
|
|
117
175
|
h6 {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
176
|
+
line-height: 1;
|
|
177
|
+
color: var(--dc-tx-1);
|
|
178
|
+
padding-top: 1rem;
|
|
121
179
|
}
|
|
122
180
|
|
|
123
181
|
h1,
|
|
124
182
|
h2,
|
|
125
183
|
h3 {
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
184
|
+
padding-bottom: 0.25rem;
|
|
185
|
+
margin-bottom: 0.5rem;
|
|
186
|
+
border-bottom: 1px solid var(--dc-bg-3);
|
|
129
187
|
}
|
|
130
188
|
|
|
131
189
|
h4,
|
|
132
190
|
h5,
|
|
133
191
|
h6 {
|
|
134
|
-
|
|
192
|
+
margin-bottom: 0.25rem;
|
|
135
193
|
}
|
|
136
194
|
|
|
137
|
-
|
|
138
|
-
|
|
195
|
+
a {
|
|
196
|
+
color: var(--dc-lk-1);
|
|
197
|
+
text-decoration: none;
|
|
139
198
|
}
|
|
140
199
|
|
|
141
|
-
|
|
142
|
-
|
|
200
|
+
a:hover {
|
|
201
|
+
text-decoration: underline;
|
|
143
202
|
}
|
|
144
203
|
|
|
145
|
-
|
|
146
|
-
|
|
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;
|
|
147
209
|
}
|
|
148
210
|
|
|
149
|
-
|
|
150
|
-
|
|
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;
|
|
151
218
|
}
|
|
152
219
|
|
|
153
|
-
|
|
154
|
-
|
|
220
|
+
blockquote *:last-child {
|
|
221
|
+
padding-bottom: 0;
|
|
222
|
+
margin-bottom: 0;
|
|
155
223
|
}
|
|
156
224
|
|
|
157
|
-
|
|
158
|
-
|
|
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;
|
|
159
231
|
}
|
|
160
232
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
233
|
+
header * {
|
|
234
|
+
padding-top: 0rem;
|
|
235
|
+
padding-bottom: 0rem;
|
|
236
|
+
margin-top: 0.25rem;
|
|
237
|
+
margin-bottom: 0.25rem;
|
|
164
238
|
}
|
|
165
239
|
|
|
166
|
-
|
|
167
|
-
|
|
240
|
+
header h1,
|
|
241
|
+
header h2,
|
|
242
|
+
header h3 {
|
|
243
|
+
border-bottom: 0;
|
|
168
244
|
}
|
|
169
245
|
|
|
170
|
-
|
|
171
|
-
|
|
246
|
+
header h1 {
|
|
247
|
+
font-size: 1.6rem;
|
|
172
248
|
}
|
|
173
249
|
|
|
174
|
-
|
|
175
|
-
|
|
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;
|
|
250
|
+
header h2 {
|
|
251
|
+
font-size: 1.4rem;
|
|
180
252
|
}
|
|
181
253
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
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
|
-
}
|
|
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;
|
|
278
272
|
}
|
|
279
273
|
|
|
280
|
-
header h1,
|
|
281
|
-
header h2,
|
|
282
|
-
header h3,
|
|
283
|
-
header h4,
|
|
284
|
-
header h5,
|
|
285
274
|
header h6 {
|
|
286
|
-
|
|
275
|
+
font-size: 0.8rem;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
/* 10. Footer */
|
|
279
|
+
footer {
|
|
280
|
+
border-top: 1px solid var(--dc-bg-3);
|
|
281
|
+
padding: 0.5rem calc(50vw - 50%);
|
|
282
|
+
margin: 2rem calc(50% - 50vw) -2rem;
|
|
287
283
|
}
|
|
288
284
|
|
|
285
|
+
footer * {
|
|
286
|
+
padding-top: 0rem;
|
|
287
|
+
padding-bottom: 0rem;
|
|
288
|
+
margin-top: 0.25rem;
|
|
289
|
+
margin-bottom: 0.25rem;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
footer h1,
|
|
293
|
+
footer h2,
|
|
294
|
+
footer h3 {
|
|
295
|
+
border-bottom: 0;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
/* 11. Buttons and Inputs */
|
|
289
299
|
a button,
|
|
290
300
|
button,
|
|
291
301
|
input[type="submit"],
|
|
292
302
|
input[type="reset"],
|
|
293
303
|
input[type="button"] {
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
cursor: pointer;
|
|
304
|
+
display: inline-block;
|
|
305
|
+
padding: 0.25rem 0.75rem;
|
|
306
|
+
text-align: center;
|
|
307
|
+
text-decoration: none;
|
|
308
|
+
white-space: nowrap;
|
|
309
|
+
background: var(--dc-lkb-1);
|
|
310
|
+
color: var(--dc-lkb-tx);
|
|
311
|
+
border: 0;
|
|
312
|
+
border-radius: 0.25rem;
|
|
313
|
+
box-sizing: border-box;
|
|
314
|
+
cursor: pointer;
|
|
306
315
|
}
|
|
307
316
|
|
|
308
317
|
a button[disabled],
|
|
@@ -310,8 +319,8 @@ button[disabled],
|
|
|
310
319
|
input[type="submit"][disabled],
|
|
311
320
|
input[type="reset"][disabled],
|
|
312
321
|
input[type="button"][disabled] {
|
|
313
|
-
|
|
314
|
-
|
|
322
|
+
cursor: not-allowed;
|
|
323
|
+
opacity: 0.5;
|
|
315
324
|
}
|
|
316
325
|
|
|
317
326
|
.button:focus,
|
|
@@ -324,176 +333,142 @@ input[type="reset"]:focus,
|
|
|
324
333
|
input[type="reset"]:enabled:hover,
|
|
325
334
|
input[type="button"]:focus,
|
|
326
335
|
input[type="button"]:enabled:hover {
|
|
327
|
-
|
|
336
|
+
background: var(--dc-lkb-2);
|
|
328
337
|
}
|
|
329
338
|
|
|
330
|
-
|
|
331
|
-
|
|
339
|
+
textarea,
|
|
340
|
+
select,
|
|
341
|
+
input {
|
|
342
|
+
padding: 0.25rem 0.5rem;
|
|
343
|
+
margin-bottom: 0.5rem;
|
|
344
|
+
background: var(--dc-bg-2);
|
|
345
|
+
color: var(--dc-tx-2);
|
|
346
|
+
border: 1px solid var(--dc-bg-3);
|
|
347
|
+
border-radius: 0.25rem;
|
|
348
|
+
box-shadow: none;
|
|
349
|
+
box-sizing: border-box;
|
|
332
350
|
}
|
|
333
351
|
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
kbd,
|
|
337
|
-
samp {
|
|
338
|
-
font-family: var(--dc-font-mono);
|
|
352
|
+
textarea {
|
|
353
|
+
max-width: 100%;
|
|
339
354
|
}
|
|
340
355
|
|
|
356
|
+
/* 12. Code and Keyboards */
|
|
341
357
|
code,
|
|
342
358
|
samp,
|
|
343
359
|
kbd,
|
|
344
360
|
pre {
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
361
|
+
background: var(--dc-bg-2);
|
|
362
|
+
border: 1px solid var(--dc-bg-3);
|
|
363
|
+
border-radius: 0.25rem;
|
|
364
|
+
padding: 0.125rem 0.25rem;
|
|
365
|
+
font-size: 0.9rem;
|
|
350
366
|
}
|
|
351
367
|
|
|
352
368
|
kbd {
|
|
353
|
-
|
|
369
|
+
border-bottom: 3px solid var(--dc-bg-3);
|
|
354
370
|
}
|
|
355
371
|
|
|
356
372
|
pre {
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
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;
|
|
373
|
+
padding: 1rem 1.5rem;
|
|
374
|
+
max-width: 100%;
|
|
375
|
+
overflow: auto;
|
|
379
376
|
}
|
|
380
377
|
|
|
378
|
+
/* 13. Details */
|
|
381
379
|
details {
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
380
|
+
padding: 0.5rem 1rem;
|
|
381
|
+
background: var(--dc-bg-2);
|
|
382
|
+
border: 1px solid var(--dc-bg-3);
|
|
383
|
+
border-radius: 0.25rem;
|
|
386
384
|
}
|
|
387
385
|
|
|
388
386
|
summary {
|
|
389
|
-
|
|
390
|
-
|
|
387
|
+
cursor: pointer;
|
|
388
|
+
font-weight: bold;
|
|
391
389
|
}
|
|
392
390
|
|
|
393
391
|
details[open] summary {
|
|
394
|
-
|
|
392
|
+
margin-bottom: 0.5rem;
|
|
395
393
|
}
|
|
396
394
|
|
|
397
395
|
details[open] > *:first-child {
|
|
398
|
-
|
|
399
|
-
|
|
396
|
+
margin-top: 0;
|
|
397
|
+
padding-top: 0;
|
|
400
398
|
}
|
|
401
399
|
|
|
402
400
|
details[open] > *:last-child {
|
|
403
|
-
|
|
404
|
-
|
|
401
|
+
margin-bottom: 0;
|
|
402
|
+
padding-bottom: 0;
|
|
405
403
|
}
|
|
406
404
|
|
|
405
|
+
/* 14. Description Lists */
|
|
407
406
|
dt {
|
|
408
|
-
|
|
407
|
+
font-weight: bold;
|
|
409
408
|
}
|
|
410
409
|
|
|
411
410
|
dd::before {
|
|
412
|
-
|
|
411
|
+
content: "→ ";
|
|
413
412
|
}
|
|
414
413
|
|
|
414
|
+
/* 15. Horizontal Rules */
|
|
415
415
|
hr {
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
416
|
+
border: 0;
|
|
417
|
+
border-bottom: 1px solid var(--dc-bg-3);
|
|
418
|
+
margin: 1rem auto;
|
|
419
419
|
}
|
|
420
420
|
|
|
421
|
+
/* 16. Fieldsets */
|
|
421
422
|
fieldset {
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
423
|
+
margin-top: 1rem;
|
|
424
|
+
padding: 2rem;
|
|
425
|
+
border: 1px solid var(--dc-bg-3);
|
|
426
|
+
border-radius: 0.25rem;
|
|
426
427
|
}
|
|
427
428
|
|
|
428
429
|
legend {
|
|
429
|
-
|
|
430
|
+
padding: auto 0.5rem;
|
|
430
431
|
}
|
|
431
432
|
|
|
433
|
+
/* 17. Tables */
|
|
432
434
|
table {
|
|
433
|
-
|
|
434
|
-
|
|
435
|
+
border-collapse: collapse;
|
|
436
|
+
width: 100%;
|
|
435
437
|
}
|
|
436
438
|
|
|
437
439
|
td,
|
|
438
440
|
th {
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
441
|
+
border: 1px solid var(--dc-bg-3);
|
|
442
|
+
text-align: left;
|
|
443
|
+
padding: 0.5rem;
|
|
442
444
|
}
|
|
443
445
|
|
|
444
446
|
th {
|
|
445
|
-
|
|
447
|
+
background: var(--dc-bg-2);
|
|
446
448
|
}
|
|
447
449
|
|
|
448
450
|
tr:nth-child(even) {
|
|
449
|
-
|
|
451
|
+
background: var(--dc-bg-2);
|
|
450
452
|
}
|
|
451
453
|
|
|
452
454
|
table caption {
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
}
|
|
456
|
-
|
|
457
|
-
textarea {
|
|
458
|
-
max-width: 100%;
|
|
455
|
+
font-weight: bold;
|
|
456
|
+
margin-bottom: 0.5rem;
|
|
459
457
|
}
|
|
460
458
|
|
|
459
|
+
/* 18. Lists */
|
|
461
460
|
ol,
|
|
462
461
|
ul {
|
|
463
|
-
|
|
462
|
+
padding-left: 2rem;
|
|
464
463
|
}
|
|
465
464
|
|
|
466
465
|
li {
|
|
467
|
-
|
|
466
|
+
margin-top: 0.4rem;
|
|
468
467
|
}
|
|
469
468
|
|
|
470
469
|
ul ul,
|
|
471
470
|
ol ul,
|
|
472
471
|
ul ol,
|
|
473
472
|
ol ol {
|
|
474
|
-
|
|
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%;
|
|
473
|
+
margin-bottom: 0;
|
|
499
474
|
}
|