@jrgermain/stylesheet 0.1.2 → 0.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/index.css +426 -581
- package/dist/index.css.map +1 -1
- package/dist/index.min.css +1 -1
- package/dist/index.min.css.map +1 -1
- package/package.json +1 -1
- package/src/styles/_utils.scss +1 -1
- package/src/styles/_variables.scss +153 -163
- package/src/styles/components/_alert.scss +66 -0
- package/src/styles/components/_app.scss +20 -57
- package/src/styles/components/_button.scss +7 -12
- package/src/styles/components/_chip.scss +1 -1
- package/src/styles/components/_dialog.scss +3 -9
- package/src/styles/components/_field.scss +6 -3
- package/src/styles/components/_progress-meter.scss +2 -2
- package/src/styles/components/_skeleton.scss +1 -1
- package/src/styles/components/_text.scss +26 -24
package/dist/index.css
CHANGED
|
@@ -2,21 +2,21 @@
|
|
|
2
2
|
--opacity-low:20%;
|
|
3
3
|
--opacity-medium:40%;
|
|
4
4
|
--opacity-high:70%;
|
|
5
|
-
--color-brand-1:#
|
|
6
|
-
--color-brand-2:#
|
|
7
|
-
--color-brand-3:oklch(35% 52%
|
|
8
|
-
--color-brand-4:oklch(45%
|
|
9
|
-
--color-brand-5:oklch(55%
|
|
10
|
-
--color-brand-6:#
|
|
11
|
-
--color-brand-7:#
|
|
12
|
-
--color-brand-8:#
|
|
13
|
-
--color-brand-9:#
|
|
14
|
-
--color-brand-transparent:oklch(55%
|
|
15
|
-
--color-brand-extra-transparent:oklch(55%
|
|
5
|
+
--color-brand-1:#070038;
|
|
6
|
+
--color-brand-2:#180070;
|
|
7
|
+
--color-brand-3:oklch(35% 52% 275deg);
|
|
8
|
+
--color-brand-4:oklch(45% 55% 275deg);
|
|
9
|
+
--color-brand-5:oklch(55% 52% 275deg);
|
|
10
|
+
--color-brand-6:#707eff;
|
|
11
|
+
--color-brand-7:#95a6ff;
|
|
12
|
+
--color-brand-8:#bdcaff;
|
|
13
|
+
--color-brand-9:#e7edff;
|
|
14
|
+
--color-brand-transparent:oklch(55% 52% 275deg / var(--opacity-medium));
|
|
15
|
+
--color-brand-extra-transparent:oklch(55% 52% 275deg / var(--opacity-low));
|
|
16
16
|
--color-red-1:#210000;
|
|
17
17
|
--color-red-2:#470000;
|
|
18
18
|
--color-red-3:#790000;
|
|
19
|
-
--color-red-4:#
|
|
19
|
+
--color-red-4:#a40000;
|
|
20
20
|
--color-red-5:oklch(55% 50% 30deg);
|
|
21
21
|
--color-red-6:oklch(65% 50% 30deg);
|
|
22
22
|
--color-red-7:#ff8370;
|
|
@@ -24,68 +24,68 @@
|
|
|
24
24
|
--color-red-9:#ffe6e0;
|
|
25
25
|
--color-red-transparent:oklch(55% 50% 30deg / var(--opacity-medium));
|
|
26
26
|
--color-red-extra-transparent:oklch(55% 50% 30deg / var(--opacity-low));
|
|
27
|
-
--color-orange-1:#
|
|
28
|
-
--color-orange-2:#
|
|
29
|
-
--color-orange-3:#
|
|
30
|
-
--color-orange-4:#
|
|
31
|
-
--color-orange-5:#
|
|
32
|
-
--color-orange-6
|
|
33
|
-
--color-orange-7
|
|
34
|
-
--color-orange-8:#
|
|
35
|
-
--color-orange-9:#
|
|
36
|
-
--color-orange-transparent:rgba(
|
|
37
|
-
--color-orange-extra-transparent:rgba(
|
|
38
|
-
--color-yellow-1:#
|
|
27
|
+
--color-orange-1:#190500;
|
|
28
|
+
--color-orange-2:#3b1500;
|
|
29
|
+
--color-orange-3:#5f2900;
|
|
30
|
+
--color-orange-4:#873d00;
|
|
31
|
+
--color-orange-5:#b15300;
|
|
32
|
+
--color-orange-6:oklch(65% 40% 55deg);
|
|
33
|
+
--color-orange-7:oklch(75% 40% 55deg);
|
|
34
|
+
--color-orange-8:#ffb880;
|
|
35
|
+
--color-orange-9:#ffe8d7;
|
|
36
|
+
--color-orange-transparent:rgba(177, 83, 0, var(--opacity-medium));
|
|
37
|
+
--color-orange-extra-transparent:rgba(177, 83, 0, var(--opacity-low));
|
|
38
|
+
--color-yellow-1:#120900;
|
|
39
39
|
--color-yellow-2:#2d1f00;
|
|
40
|
-
--color-yellow-3:#
|
|
40
|
+
--color-yellow-3:#4c3700;
|
|
41
41
|
--color-yellow-4:#6d5100;
|
|
42
42
|
--color-yellow-5:#8d6d00;
|
|
43
|
-
--color-yellow-6:#
|
|
44
|
-
--color-yellow-7
|
|
45
|
-
--color-yellow-8:oklch(85%
|
|
46
|
-
--color-yellow-9:#
|
|
43
|
+
--color-yellow-6:#b38800;
|
|
44
|
+
--color-yellow-7:oklch(75% 36% 88deg);
|
|
45
|
+
--color-yellow-8:oklch(85% 30% 88deg);
|
|
46
|
+
--color-yellow-9:#ffecae;
|
|
47
47
|
--color-yellow-transparent:rgba(141, 109, 0, var(--opacity-medium));
|
|
48
48
|
--color-yellow-extra-transparent:rgba(141, 109, 0, var(--opacity-low));
|
|
49
49
|
--color-green-1:#030f00;
|
|
50
|
-
--color-green-2:#
|
|
51
|
-
--color-green-3:#
|
|
52
|
-
--color-green-4:#
|
|
53
|
-
--color-green-5:#
|
|
50
|
+
--color-green-2:#122900;
|
|
51
|
+
--color-green-3:#1e4600;
|
|
52
|
+
--color-green-4:#346400;
|
|
53
|
+
--color-green-5:#498400;
|
|
54
54
|
--color-green-6:#5fa500;
|
|
55
|
-
--color-green-7:oklch(75%
|
|
56
|
-
--color-green-8:oklch(85%
|
|
57
|
-
--color-green-9
|
|
58
|
-
--color-green-transparent:rgba(
|
|
59
|
-
--color-green-extra-transparent:rgba(
|
|
60
|
-
--color-sky-1:#
|
|
61
|
-
--color-sky-2:#
|
|
62
|
-
--color-sky-3:#
|
|
63
|
-
--color-sky-4:#
|
|
64
|
-
--color-sky-5:#
|
|
65
|
-
--color-sky-6:#
|
|
66
|
-
--color-sky-7:#
|
|
67
|
-
--color-sky-8:oklch(85% 25%
|
|
68
|
-
--color-sky-9
|
|
69
|
-
--color-sky-transparent:rgba(0,
|
|
70
|
-
--color-sky-extra-transparent:rgba(0,
|
|
71
|
-
--color-blue-1:#
|
|
72
|
-
--color-blue-2:#
|
|
73
|
-
--color-blue-3:#
|
|
55
|
+
--color-green-7:oklch(75% 46% 133deg);
|
|
56
|
+
--color-green-8:oklch(85% 40% 133deg);
|
|
57
|
+
--color-green-9:oklch(95% 20% 133deg);
|
|
58
|
+
--color-green-transparent:rgba(73, 132, 0, var(--opacity-medium));
|
|
59
|
+
--color-green-extra-transparent:rgba(73, 132, 0, var(--opacity-low));
|
|
60
|
+
--color-sky-1:#000f0f;
|
|
61
|
+
--color-sky-2:#00292a;
|
|
62
|
+
--color-sky-3:#004647;
|
|
63
|
+
--color-sky-4:#006464;
|
|
64
|
+
--color-sky-5:#008484;
|
|
65
|
+
--color-sky-6:#00a4a4;
|
|
66
|
+
--color-sky-7:#00c7c8;
|
|
67
|
+
--color-sky-8:oklch(85% 25% 195deg);
|
|
68
|
+
--color-sky-9:oklch(95% 12% 195deg);
|
|
69
|
+
--color-sky-transparent:rgba(0, 132, 132, var(--opacity-medium));
|
|
70
|
+
--color-sky-extra-transparent:rgba(0, 132, 132, var(--opacity-low));
|
|
71
|
+
--color-blue-1:#000136;
|
|
72
|
+
--color-blue-2:#001464;
|
|
73
|
+
--color-blue-3:#00308c;
|
|
74
74
|
--color-blue-4:#004bba;
|
|
75
|
-
--color-blue-5:oklch(55%
|
|
75
|
+
--color-blue-5:oklch(55% 50% 260deg);
|
|
76
76
|
--color-blue-6:#408aff;
|
|
77
|
-
--color-blue-7:#
|
|
78
|
-
--color-blue-8:#
|
|
79
|
-
--color-blue-9:#
|
|
80
|
-
--color-blue-transparent:oklch(55%
|
|
81
|
-
--color-blue-extra-transparent:oklch(55%
|
|
77
|
+
--color-blue-7:#77aeff;
|
|
78
|
+
--color-blue-8:#accfff;
|
|
79
|
+
--color-blue-9:#def0ff;
|
|
80
|
+
--color-blue-transparent:oklch(55% 50% 260deg / var(--opacity-medium));
|
|
81
|
+
--color-blue-extra-transparent:oklch(55% 50% 260deg / var(--opacity-low));
|
|
82
82
|
--color-purple-1:#160024;
|
|
83
83
|
--color-purple-2:#350051;
|
|
84
84
|
--color-purple-3:#570080;
|
|
85
85
|
--color-purple-4:oklch(45% 52% 310deg);
|
|
86
86
|
--color-purple-5:oklch(55% 52% 310deg);
|
|
87
87
|
--color-purple-6:oklch(65% 51% 310deg);
|
|
88
|
-
--color-purple-7
|
|
88
|
+
--color-purple-7:oklch(75% 42% 310deg);
|
|
89
89
|
--color-purple-8:#e7b6ff;
|
|
90
90
|
--color-purple-9:#f7e8ff;
|
|
91
91
|
--color-purple-transparent:oklch(55% 52% 310deg / var(--opacity-medium));
|
|
@@ -93,12 +93,12 @@
|
|
|
93
93
|
--color-magenta-1:#1f000c;
|
|
94
94
|
--color-magenta-2:#450023;
|
|
95
95
|
--color-magenta-3:#73003d;
|
|
96
|
-
--color-magenta-4
|
|
96
|
+
--color-magenta-4:oklch(45% 46% 356deg);
|
|
97
97
|
--color-magenta-5:oklch(55% 50% 356deg);
|
|
98
|
-
--color-magenta-6:oklch(65%
|
|
99
|
-
--color-magenta-7
|
|
100
|
-
--color-magenta-8:#
|
|
101
|
-
--color-magenta-9:#
|
|
98
|
+
--color-magenta-6:oklch(65% 48% 356deg);
|
|
99
|
+
--color-magenta-7:oklch(75% 42% 356deg);
|
|
100
|
+
--color-magenta-8:#ffb0d0;
|
|
101
|
+
--color-magenta-9:#ffe6ef;
|
|
102
102
|
--color-magenta-transparent:oklch(55% 50% 356deg / var(--opacity-medium));
|
|
103
103
|
--color-magenta-extra-transparent:oklch(55% 50% 356deg / var(--opacity-low));
|
|
104
104
|
--color-gray-1:oklch(15% 2% 263deg);
|
|
@@ -165,31 +165,31 @@
|
|
|
165
165
|
|
|
166
166
|
@media (color-gamut:rec2020){
|
|
167
167
|
::backdrop,:root{
|
|
168
|
-
--color-brand-1:oklch(15% 55%
|
|
169
|
-
--color-brand-2:oklch(25%
|
|
168
|
+
--color-brand-1:oklch(15% 55% 275deg);
|
|
169
|
+
--color-brand-2:oklch(25% 52% 275deg);
|
|
170
170
|
}
|
|
171
171
|
}
|
|
172
172
|
|
|
173
173
|
@media (color-gamut:p3){
|
|
174
174
|
::backdrop,:root{
|
|
175
|
-
--color-brand-6:oklch(65% 50%
|
|
175
|
+
--color-brand-6:oklch(65% 50% 275deg);
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
@media (color-gamut:rec2020){
|
|
180
180
|
::backdrop,:root{
|
|
181
|
-
--color-brand-7:oklch(75% 45%
|
|
182
|
-
--color-brand-8:oklch(85% 42%
|
|
183
|
-
--color-brand-9:oklch(95% 36%
|
|
181
|
+
--color-brand-7:oklch(75% 45% 275deg);
|
|
182
|
+
--color-brand-8:oklch(85% 42% 275deg);
|
|
183
|
+
--color-brand-9:oklch(95% 36% 275deg);
|
|
184
184
|
--color-red-1:oklch(15% 55% 30deg);
|
|
185
185
|
--color-red-2:oklch(25% 52% 30deg);
|
|
186
186
|
--color-red-3:oklch(35% 54% 30deg);
|
|
187
|
-
--color-red-4:oklch(45% 52% 30deg);
|
|
188
187
|
}
|
|
189
188
|
}
|
|
190
189
|
|
|
191
190
|
@media (color-gamut:p3){
|
|
192
191
|
::backdrop,:root{
|
|
192
|
+
--color-red-4:oklch(45% 50% 30deg);
|
|
193
193
|
--color-red-7:oklch(75% 45% 30deg);
|
|
194
194
|
}
|
|
195
195
|
}
|
|
@@ -198,226 +198,178 @@
|
|
|
198
198
|
::backdrop,:root{
|
|
199
199
|
--color-red-8:oklch(85% 45% 30deg);
|
|
200
200
|
--color-red-9:oklch(95% 38% 30deg);
|
|
201
|
-
--color-orange-1:oklch(15%
|
|
202
|
-
--color-orange-2:oklch(25%
|
|
203
|
-
--color-orange-3:oklch(35%
|
|
204
|
-
--color-orange-4:oklch(45%
|
|
205
|
-
--color-orange-5:oklch(55% 50%
|
|
206
|
-
--color-orange-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
--color-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
--color-
|
|
219
|
-
--color-orange-9:oklch(95% 35% 61deg);
|
|
220
|
-
--color-orange-transparent:oklch(55% 50% 61deg / var(--opacity-medium));
|
|
221
|
-
--color-orange-extra-transparent:oklch(55% 50% 61deg / var(--opacity-low));
|
|
222
|
-
--color-yellow-1:oklch(15% 50% 90deg);
|
|
223
|
-
--color-yellow-2:oklch(25% 50% 90deg);
|
|
224
|
-
--color-yellow-3:oklch(35% 50% 90deg);
|
|
225
|
-
--color-yellow-4:oklch(45% 44% 90deg);
|
|
226
|
-
--color-yellow-5:oklch(55% 44% 90deg);
|
|
227
|
-
--color-yellow-6:oklch(65% 44% 90deg);
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
@media (color-gamut:p3){
|
|
232
|
-
::backdrop,:root{
|
|
233
|
-
--color-yellow-7:oklch(75% 40% 90deg);
|
|
234
|
-
}
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
@media (color-gamut:rec2020){
|
|
238
|
-
::backdrop,:root{
|
|
239
|
-
--color-yellow-9:oklch(95% 29% 90deg);
|
|
240
|
-
--color-yellow-transparent:oklch(55% 44% 90deg / var(--opacity-medium));
|
|
241
|
-
--color-yellow-extra-transparent:oklch(55% 44% 90deg / var(--opacity-low));
|
|
201
|
+
--color-orange-1:oklch(15% 60% 55deg);
|
|
202
|
+
--color-orange-2:oklch(25% 60% 55deg);
|
|
203
|
+
--color-orange-3:oklch(35% 55% 55deg);
|
|
204
|
+
--color-orange-4:oklch(45% 50% 55deg);
|
|
205
|
+
--color-orange-5:oklch(55% 50% 55deg);
|
|
206
|
+
--color-orange-8:oklch(85% 40% 55deg);
|
|
207
|
+
--color-orange-9:oklch(95% 38% 55deg);
|
|
208
|
+
--color-orange-transparent:oklch(55% 50% 55deg / var(--opacity-medium));
|
|
209
|
+
--color-orange-extra-transparent:oklch(55% 50% 55deg / var(--opacity-low));
|
|
210
|
+
--color-yellow-1:oklch(15% 55% 88deg);
|
|
211
|
+
--color-yellow-2:oklch(25% 55% 88deg);
|
|
212
|
+
--color-yellow-3:oklch(35% 55% 88deg);
|
|
213
|
+
--color-yellow-4:oklch(45% 45% 88deg);
|
|
214
|
+
--color-yellow-5:oklch(55% 45% 88deg);
|
|
215
|
+
--color-yellow-6:oklch(65% 40% 88deg);
|
|
216
|
+
--color-yellow-9:oklch(95% 28% 88deg);
|
|
217
|
+
--color-yellow-transparent:oklch(55% 45% 88deg / var(--opacity-medium));
|
|
218
|
+
--color-yellow-extra-transparent:oklch(55% 45% 88deg / var(--opacity-low));
|
|
242
219
|
--color-green-1:oklch(15% 55% 133deg);
|
|
243
|
-
--color-green-2:oklch(25%
|
|
244
|
-
--color-green-3:oklch(35%
|
|
245
|
-
--color-green-4:oklch(45%
|
|
246
|
-
--color-green-5:oklch(55%
|
|
220
|
+
--color-green-2:oklch(25% 50% 133deg);
|
|
221
|
+
--color-green-3:oklch(35% 48% 133deg);
|
|
222
|
+
--color-green-4:oklch(45% 46% 133deg);
|
|
223
|
+
--color-green-5:oklch(55% 46% 133deg);
|
|
247
224
|
}
|
|
248
225
|
}
|
|
249
226
|
|
|
250
227
|
@media (color-gamut:p3){
|
|
251
228
|
::backdrop,:root{
|
|
252
|
-
--color-green-6:oklch(65%
|
|
253
|
-
--color-green-9:oklch(95% 30% 133deg);
|
|
229
|
+
--color-green-6:oklch(65% 46% 133deg);
|
|
254
230
|
}
|
|
255
231
|
}
|
|
256
232
|
|
|
257
233
|
@media (color-gamut:rec2020){
|
|
258
234
|
::backdrop,:root{
|
|
259
|
-
--color-green-transparent:oklch(55%
|
|
260
|
-
--color-green-extra-transparent:oklch(55%
|
|
261
|
-
--color-sky-1:oklch(15% 55%
|
|
262
|
-
--color-sky-2:oklch(25% 55%
|
|
263
|
-
--color-sky-3:oklch(35% 50%
|
|
264
|
-
--color-sky-4:oklch(45% 50%
|
|
265
|
-
--color-sky-5:oklch(55% 52%
|
|
266
|
-
--color-sky-6:oklch(65%
|
|
235
|
+
--color-green-transparent:oklch(55% 46% 133deg / var(--opacity-medium));
|
|
236
|
+
--color-green-extra-transparent:oklch(55% 46% 133deg / var(--opacity-low));
|
|
237
|
+
--color-sky-1:oklch(15% 55% 195deg);
|
|
238
|
+
--color-sky-2:oklch(25% 55% 195deg);
|
|
239
|
+
--color-sky-3:oklch(35% 50% 195deg);
|
|
240
|
+
--color-sky-4:oklch(45% 50% 195deg);
|
|
241
|
+
--color-sky-5:oklch(55% 52% 195deg);
|
|
242
|
+
--color-sky-6:oklch(65% 45% 195deg);
|
|
267
243
|
}
|
|
268
244
|
}
|
|
269
245
|
|
|
270
246
|
@media (color-gamut:p3){
|
|
271
247
|
::backdrop,:root{
|
|
272
|
-
--color-sky-7:oklch(75%
|
|
248
|
+
--color-sky-7:oklch(75% 35% 195deg);
|
|
273
249
|
}
|
|
274
250
|
}
|
|
275
251
|
|
|
276
252
|
@media (color-gamut:rec2020){
|
|
277
253
|
::backdrop,:root{
|
|
278
|
-
--color-sky-
|
|
279
|
-
--color-sky-transparent:oklch(55% 52%
|
|
280
|
-
--color-
|
|
281
|
-
--color-blue-
|
|
282
|
-
--color-blue-
|
|
283
|
-
--color-blue-3:oklch(35% 53% 260deg);
|
|
254
|
+
--color-sky-transparent:oklch(55% 52% 195deg / var(--opacity-medium));
|
|
255
|
+
--color-sky-extra-transparent:oklch(55% 52% 195deg / var(--opacity-low));
|
|
256
|
+
--color-blue-1:oklch(15% 52% 260deg);
|
|
257
|
+
--color-blue-2:oklch(25% 48% 260deg);
|
|
258
|
+
--color-blue-3:oklch(35% 46% 260deg);
|
|
284
259
|
}
|
|
285
260
|
}
|
|
286
261
|
|
|
287
262
|
@media (color-gamut:p3){
|
|
288
263
|
::backdrop,:root{
|
|
289
|
-
--color-blue-4:oklch(45%
|
|
264
|
+
--color-blue-4:oklch(45% 48% 260deg);
|
|
290
265
|
}
|
|
291
266
|
}
|
|
292
267
|
|
|
293
268
|
@media (color-gamut:rec2020){
|
|
294
269
|
::backdrop,:root{
|
|
295
270
|
--color-blue-6:oklch(65% 52% 260deg);
|
|
296
|
-
--color-blue-7:oklch(75%
|
|
297
|
-
--color-blue-8:oklch(85%
|
|
298
|
-
--color-blue-9:oklch(95%
|
|
271
|
+
--color-blue-7:oklch(75% 48% 260deg);
|
|
272
|
+
--color-blue-8:oklch(85% 45% 260deg);
|
|
273
|
+
--color-blue-9:oklch(95% 42% 260deg);
|
|
299
274
|
--color-purple-1:oklch(15% 55% 310deg);
|
|
300
275
|
--color-purple-2:oklch(25% 55% 310deg);
|
|
301
276
|
--color-purple-3:oklch(35% 53% 310deg);
|
|
302
|
-
--color-purple-7:oklch(75% 48% 310deg);
|
|
303
277
|
--color-purple-8:oklch(85% 42% 310deg);
|
|
304
278
|
--color-purple-9:oklch(95% 40% 310deg);
|
|
305
279
|
--color-magenta-1:oklch(15% 55% 356deg);
|
|
306
280
|
--color-magenta-2:oklch(25% 55% 356deg);
|
|
307
281
|
--color-magenta-3:oklch(35% 54% 356deg);
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
@media (color-gamut:p3){
|
|
312
|
-
::backdrop,:root{
|
|
313
|
-
--color-magenta-4:oklch(45% 51% 356deg);
|
|
314
|
-
--color-magenta-7:oklch(75% 43% 356deg);
|
|
315
|
-
}
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
@media (color-gamut:rec2020){
|
|
319
|
-
::backdrop,:root{
|
|
320
|
-
--color-magenta-8:oklch(85% 38% 356deg);
|
|
321
|
-
--color-magenta-9:oklch(95% 30% 356deg);
|
|
282
|
+
--color-magenta-8:oklch(85% 36% 356deg);
|
|
283
|
+
--color-magenta-9:oklch(95% 34% 356deg);
|
|
322
284
|
}
|
|
323
285
|
}
|
|
324
286
|
@media (prefers-color-scheme:dark){
|
|
325
287
|
::backdrop,:root{
|
|
326
|
-
--color-brand-9:#
|
|
327
|
-
--color-brand-8:#
|
|
328
|
-
--color-brand-7:oklch(
|
|
329
|
-
--color-brand-6:oklch(
|
|
330
|
-
--color-brand-
|
|
331
|
-
--color-brand-
|
|
332
|
-
--color-brand-
|
|
333
|
-
--color-brand-
|
|
334
|
-
--color-
|
|
335
|
-
--color-red-
|
|
336
|
-
--color-red-
|
|
337
|
-
--color-red-
|
|
338
|
-
--color-red-
|
|
339
|
-
--color-red-
|
|
340
|
-
--color-red-
|
|
341
|
-
--color-red-
|
|
342
|
-
--color-
|
|
343
|
-
--color-
|
|
344
|
-
--color-orange-
|
|
345
|
-
--color-orange-
|
|
346
|
-
--color-orange-
|
|
347
|
-
--color-orange-
|
|
348
|
-
--color-orange-
|
|
349
|
-
--color-orange-
|
|
350
|
-
--color-
|
|
351
|
-
--color-
|
|
352
|
-
--color-
|
|
353
|
-
--color-yellow-
|
|
354
|
-
--color-yellow-
|
|
355
|
-
--color-yellow-
|
|
356
|
-
--color-yellow-
|
|
357
|
-
--color-yellow-
|
|
358
|
-
--color-
|
|
359
|
-
--color-
|
|
360
|
-
--color-
|
|
361
|
-
--color-
|
|
362
|
-
--color-green-
|
|
363
|
-
--color-green-
|
|
364
|
-
--color-green-
|
|
365
|
-
--color-green-
|
|
366
|
-
--color-
|
|
367
|
-
--color-
|
|
368
|
-
--color-
|
|
369
|
-
--color-
|
|
370
|
-
--color-
|
|
371
|
-
--color-sky-
|
|
372
|
-
--color-sky-
|
|
373
|
-
--color-sky-
|
|
374
|
-
--color-
|
|
375
|
-
--color-
|
|
376
|
-
--color-
|
|
377
|
-
--color-
|
|
378
|
-
--color-
|
|
379
|
-
--color-
|
|
380
|
-
--color-blue-
|
|
381
|
-
--color-blue-
|
|
382
|
-
--color-
|
|
383
|
-
--color-
|
|
384
|
-
--color-
|
|
385
|
-
--color-
|
|
386
|
-
--color-
|
|
387
|
-
--color-
|
|
388
|
-
--color-
|
|
389
|
-
--color-purple-
|
|
390
|
-
--color-
|
|
391
|
-
--color-
|
|
392
|
-
--color-
|
|
393
|
-
--color-
|
|
394
|
-
--color-
|
|
395
|
-
--color-
|
|
396
|
-
--color-
|
|
397
|
-
--color-
|
|
398
|
-
--color-
|
|
399
|
-
--color-
|
|
400
|
-
--color-
|
|
401
|
-
--color-
|
|
402
|
-
--color-
|
|
403
|
-
--color-
|
|
404
|
-
--color-
|
|
405
|
-
--color-
|
|
406
|
-
--color-magenta-1:#ffedf6;
|
|
407
|
-
--color-gray-9:oklch(17% 2% 263deg);
|
|
408
|
-
--color-gray-8:oklch(27% 2% 263deg);
|
|
409
|
-
--color-gray-7:oklch(37% 2% 263deg);
|
|
410
|
-
--color-gray-6:oklch(47% 2% 263deg);
|
|
411
|
-
--color-gray-5:oklch(57% 2% 263deg);
|
|
412
|
-
--color-gray-4:oklch(67% 2% 263deg);
|
|
413
|
-
--color-gray-3:oklch(77% 2% 263deg);
|
|
414
|
-
--color-gray-2:oklch(87% 2% 263deg);
|
|
415
|
-
--color-gray-1:oklch(97% 2% 263deg);
|
|
288
|
+
--color-brand-9:#070038;
|
|
289
|
+
--color-brand-8:#180070;
|
|
290
|
+
--color-brand-7:oklch(35% 52% 275deg);
|
|
291
|
+
--color-brand-6:oklch(45% 55% 275deg);
|
|
292
|
+
--color-brand-4:#707eff;
|
|
293
|
+
--color-brand-3:#95a6ff;
|
|
294
|
+
--color-brand-2:#bdcaff;
|
|
295
|
+
--color-brand-1:#e7edff;
|
|
296
|
+
--color-red-9:#210000;
|
|
297
|
+
--color-red-8:#470000;
|
|
298
|
+
--color-red-7:#790000;
|
|
299
|
+
--color-red-6:#a40000;
|
|
300
|
+
--color-red-4:oklch(65% 50% 30deg);
|
|
301
|
+
--color-red-3:#ff8370;
|
|
302
|
+
--color-red-2:#ffb8ab;
|
|
303
|
+
--color-red-1:#ffe6e0;
|
|
304
|
+
--color-orange-9:#190500;
|
|
305
|
+
--color-orange-8:#3b1500;
|
|
306
|
+
--color-orange-7:#5f2900;
|
|
307
|
+
--color-orange-6:#873d00;
|
|
308
|
+
--color-orange-4:oklch(65% 40% 55deg);
|
|
309
|
+
--color-orange-3:oklch(75% 40% 55deg);
|
|
310
|
+
--color-orange-2:#ffb880;
|
|
311
|
+
--color-orange-1:#ffe8d7;
|
|
312
|
+
--color-yellow-9:#120900;
|
|
313
|
+
--color-yellow-8:#2d1f00;
|
|
314
|
+
--color-yellow-7:#4c3700;
|
|
315
|
+
--color-yellow-6:#6d5100;
|
|
316
|
+
--color-yellow-4:#b38800;
|
|
317
|
+
--color-yellow-3:oklch(75% 36% 88deg);
|
|
318
|
+
--color-yellow-2:oklch(85% 30% 88deg);
|
|
319
|
+
--color-yellow-1:#ffecae;
|
|
320
|
+
--color-green-9:#030f00;
|
|
321
|
+
--color-green-8:#122900;
|
|
322
|
+
--color-green-7:#1e4600;
|
|
323
|
+
--color-green-6:#346400;
|
|
324
|
+
--color-green-4:#5fa500;
|
|
325
|
+
--color-green-3:oklch(75% 46% 133deg);
|
|
326
|
+
--color-green-2:oklch(85% 40% 133deg);
|
|
327
|
+
--color-green-1:oklch(95% 20% 133deg);
|
|
328
|
+
--color-sky-9:#000f0f;
|
|
329
|
+
--color-sky-8:#00292a;
|
|
330
|
+
--color-sky-7:#004647;
|
|
331
|
+
--color-sky-6:#006464;
|
|
332
|
+
--color-sky-4:#00a4a4;
|
|
333
|
+
--color-sky-3:#00c7c8;
|
|
334
|
+
--color-sky-2:oklch(85% 25% 195deg);
|
|
335
|
+
--color-sky-1:oklch(95% 12% 195deg);
|
|
336
|
+
--color-blue-9:#000136;
|
|
337
|
+
--color-blue-8:#001464;
|
|
338
|
+
--color-blue-7:#00308c;
|
|
339
|
+
--color-blue-6:#004bba;
|
|
340
|
+
--color-blue-4:#408aff;
|
|
341
|
+
--color-blue-3:#77aeff;
|
|
342
|
+
--color-blue-2:#accfff;
|
|
343
|
+
--color-blue-1:#def0ff;
|
|
344
|
+
--color-purple-9:#160024;
|
|
345
|
+
--color-purple-8:#350051;
|
|
346
|
+
--color-purple-7:#570080;
|
|
347
|
+
--color-purple-6:oklch(45% 52% 310deg);
|
|
348
|
+
--color-purple-4:oklch(65% 51% 310deg);
|
|
349
|
+
--color-purple-3:oklch(75% 42% 310deg);
|
|
350
|
+
--color-purple-2:#e7b6ff;
|
|
351
|
+
--color-purple-1:#f7e8ff;
|
|
352
|
+
--color-magenta-9:#1f000c;
|
|
353
|
+
--color-magenta-8:#450023;
|
|
354
|
+
--color-magenta-7:#73003d;
|
|
355
|
+
--color-magenta-6:oklch(45% 46% 356deg);
|
|
356
|
+
--color-magenta-4:oklch(65% 48% 356deg);
|
|
357
|
+
--color-magenta-3:oklch(75% 42% 356deg);
|
|
358
|
+
--color-magenta-2:#ffb0d0;
|
|
359
|
+
--color-magenta-1:#ffe6ef;
|
|
360
|
+
--color-gray-9:oklch(15% 2% 263deg);
|
|
361
|
+
--color-gray-8:oklch(25% 2% 263deg);
|
|
362
|
+
--color-gray-7:oklch(35% 2% 263deg);
|
|
363
|
+
--color-gray-6:oklch(45% 2% 263deg);
|
|
364
|
+
--color-gray-4:oklch(65% 2% 263deg);
|
|
365
|
+
--color-gray-3:oklch(75% 2% 263deg);
|
|
366
|
+
--color-gray-2:oklch(85% 2% 263deg);
|
|
367
|
+
--color-gray-1:oklch(95% 2% 263deg);
|
|
416
368
|
--color-body:oklch(20% 2% 263deg);
|
|
417
369
|
--color-body-alt:oklch(8% 2% 263deg);
|
|
418
370
|
--color-body-text:#fff;
|
|
419
|
-
--color-body-text-alt:oklch(
|
|
420
|
-
--color-shadow:oklch(5% 2% 263deg /
|
|
371
|
+
--color-body-text-alt:oklch(85% 1% 263deg);
|
|
372
|
+
--color-shadow:oklch(5% 2% 263deg / 40%);
|
|
421
373
|
--color-outline:oklch(39% 2% 263deg);
|
|
422
374
|
--font-weight-black:900;
|
|
423
375
|
--font-weight-bold:700;
|
|
@@ -430,142 +382,110 @@
|
|
|
430
382
|
|
|
431
383
|
@media (color-gamut:rec2020){
|
|
432
384
|
::backdrop,:root{
|
|
433
|
-
--color-brand-9:oklch(
|
|
434
|
-
--color-brand-8:oklch(
|
|
435
|
-
--color-brand-4:oklch(67% 50% 270deg);
|
|
436
|
-
--color-brand-3:oklch(77% 45% 270deg);
|
|
437
|
-
--color-brand-2:oklch(87% 42% 270deg);
|
|
438
|
-
--color-brand-1:oklch(97% 36% 270deg);
|
|
439
|
-
--color-red-9:oklch(17% 55% 30deg);
|
|
440
|
-
--color-red-8:oklch(27% 52% 30deg);
|
|
441
|
-
--color-red-7:oklch(37% 54% 30deg);
|
|
385
|
+
--color-brand-9:oklch(15% 55% 275deg);
|
|
386
|
+
--color-brand-8:oklch(25% 52% 275deg);
|
|
442
387
|
}
|
|
443
388
|
}
|
|
444
389
|
|
|
445
390
|
@media (color-gamut:p3){
|
|
446
391
|
::backdrop,:root{
|
|
447
|
-
--color-
|
|
392
|
+
--color-brand-4:oklch(65% 50% 275deg);
|
|
448
393
|
}
|
|
449
394
|
}
|
|
450
395
|
|
|
451
396
|
@media (color-gamut:rec2020){
|
|
452
397
|
::backdrop,:root{
|
|
453
|
-
--color-
|
|
454
|
-
--color-
|
|
455
|
-
--color-
|
|
456
|
-
--color-
|
|
457
|
-
--color-
|
|
458
|
-
--color-
|
|
459
|
-
--color-orange-6:oklch(47% 48% 61deg);
|
|
460
|
-
--color-orange-5:oklch(57% 50% 61deg);
|
|
461
|
-
--color-orange-4:oklch(67% 50% 61deg);
|
|
398
|
+
--color-brand-3:oklch(75% 45% 275deg);
|
|
399
|
+
--color-brand-2:oklch(85% 42% 275deg);
|
|
400
|
+
--color-brand-1:oklch(95% 36% 275deg);
|
|
401
|
+
--color-red-9:oklch(15% 55% 30deg);
|
|
402
|
+
--color-red-8:oklch(25% 52% 30deg);
|
|
403
|
+
--color-red-7:oklch(35% 54% 30deg);
|
|
462
404
|
}
|
|
463
405
|
}
|
|
464
406
|
|
|
465
407
|
@media (color-gamut:p3){
|
|
466
408
|
::backdrop,:root{
|
|
467
|
-
--color-
|
|
409
|
+
--color-red-6:oklch(45% 50% 30deg);
|
|
410
|
+
--color-red-3:oklch(75% 45% 30deg);
|
|
468
411
|
}
|
|
469
412
|
}
|
|
470
413
|
|
|
471
414
|
@media (color-gamut:rec2020){
|
|
472
415
|
::backdrop,:root{
|
|
473
|
-
--color-
|
|
474
|
-
--color-
|
|
475
|
-
--color-
|
|
476
|
-
--color-
|
|
477
|
-
--color-
|
|
478
|
-
--color-
|
|
479
|
-
--color-
|
|
480
|
-
--color-
|
|
416
|
+
--color-red-2:oklch(85% 45% 30deg);
|
|
417
|
+
--color-red-1:oklch(95% 38% 30deg);
|
|
418
|
+
--color-orange-9:oklch(15% 60% 55deg);
|
|
419
|
+
--color-orange-8:oklch(25% 60% 55deg);
|
|
420
|
+
--color-orange-7:oklch(35% 55% 55deg);
|
|
421
|
+
--color-orange-6:oklch(45% 50% 55deg);
|
|
422
|
+
--color-orange-2:oklch(85% 40% 55deg);
|
|
423
|
+
--color-orange-1:oklch(95% 38% 55deg);
|
|
424
|
+
--color-yellow-9:oklch(15% 55% 88deg);
|
|
425
|
+
--color-yellow-8:oklch(25% 55% 88deg);
|
|
426
|
+
--color-yellow-7:oklch(35% 55% 88deg);
|
|
427
|
+
--color-yellow-6:oklch(45% 45% 88deg);
|
|
428
|
+
--color-yellow-4:oklch(65% 40% 88deg);
|
|
429
|
+
--color-yellow-1:oklch(95% 28% 88deg);
|
|
430
|
+
--color-green-9:oklch(15% 55% 133deg);
|
|
431
|
+
--color-green-8:oklch(25% 50% 133deg);
|
|
432
|
+
--color-green-7:oklch(35% 48% 133deg);
|
|
433
|
+
--color-green-6:oklch(45% 46% 133deg);
|
|
481
434
|
}
|
|
482
435
|
}
|
|
483
436
|
|
|
484
437
|
@media (color-gamut:p3){
|
|
485
438
|
::backdrop,:root{
|
|
486
|
-
--color-
|
|
439
|
+
--color-green-4:oklch(65% 46% 133deg);
|
|
487
440
|
}
|
|
488
441
|
}
|
|
489
442
|
|
|
490
443
|
@media (color-gamut:rec2020){
|
|
491
444
|
::backdrop,:root{
|
|
492
|
-
--color-
|
|
493
|
-
--color-
|
|
494
|
-
--color-
|
|
495
|
-
--color-
|
|
496
|
-
--color-
|
|
497
|
-
--color-green-5:oklch(57% 49% 133deg);
|
|
445
|
+
--color-sky-9:oklch(15% 55% 195deg);
|
|
446
|
+
--color-sky-8:oklch(25% 55% 195deg);
|
|
447
|
+
--color-sky-7:oklch(35% 50% 195deg);
|
|
448
|
+
--color-sky-6:oklch(45% 50% 195deg);
|
|
449
|
+
--color-sky-4:oklch(65% 45% 195deg);
|
|
498
450
|
}
|
|
499
451
|
}
|
|
500
452
|
|
|
501
453
|
@media (color-gamut:p3){
|
|
502
454
|
::backdrop,:root{
|
|
503
|
-
--color-
|
|
455
|
+
--color-sky-3:oklch(75% 35% 195deg);
|
|
504
456
|
}
|
|
505
457
|
}
|
|
506
458
|
|
|
507
459
|
@media (color-gamut:rec2020){
|
|
508
460
|
::backdrop,:root{
|
|
509
|
-
--color-
|
|
510
|
-
--color-
|
|
511
|
-
--color-
|
|
512
|
-
--color-sky-7:oklch(37% 50% 200deg);
|
|
513
|
-
--color-sky-6:oklch(47% 50% 200deg);
|
|
514
|
-
--color-sky-5:oklch(57% 52% 200deg);
|
|
515
|
-
--color-sky-4:oklch(67% 46% 200deg);
|
|
461
|
+
--color-blue-9:oklch(15% 52% 260deg);
|
|
462
|
+
--color-blue-8:oklch(25% 48% 260deg);
|
|
463
|
+
--color-blue-7:oklch(35% 46% 260deg);
|
|
516
464
|
}
|
|
517
465
|
}
|
|
518
466
|
|
|
519
467
|
@media (color-gamut:p3){
|
|
520
468
|
::backdrop,:root{
|
|
521
|
-
--color-
|
|
469
|
+
--color-blue-6:oklch(45% 48% 260deg);
|
|
522
470
|
}
|
|
523
471
|
}
|
|
524
472
|
|
|
525
473
|
@media (color-gamut:rec2020){
|
|
526
474
|
::backdrop,:root{
|
|
527
|
-
--color-
|
|
528
|
-
--color-blue-
|
|
529
|
-
--color-blue-
|
|
530
|
-
--color-blue-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
--color-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
::backdrop,:root{
|
|
542
|
-
--color-blue-4:oklch(67% 52% 260deg);
|
|
543
|
-
--color-blue-3:oklch(77% 52% 260deg);
|
|
544
|
-
--color-blue-2:oklch(87% 50% 260deg);
|
|
545
|
-
--color-blue-1:oklch(97% 39% 260deg);
|
|
546
|
-
--color-purple-9:oklch(17% 55% 310deg);
|
|
547
|
-
--color-purple-8:oklch(27% 55% 310deg);
|
|
548
|
-
--color-purple-7:oklch(37% 53% 310deg);
|
|
549
|
-
--color-purple-3:oklch(77% 48% 310deg);
|
|
550
|
-
--color-purple-2:oklch(87% 42% 310deg);
|
|
551
|
-
--color-purple-1:oklch(97% 40% 310deg);
|
|
552
|
-
--color-magenta-9:oklch(17% 55% 356deg);
|
|
553
|
-
--color-magenta-8:oklch(27% 55% 356deg);
|
|
554
|
-
--color-magenta-7:oklch(37% 54% 356deg);
|
|
555
|
-
}
|
|
556
|
-
}
|
|
557
|
-
|
|
558
|
-
@media (color-gamut:p3){
|
|
559
|
-
::backdrop,:root{
|
|
560
|
-
--color-magenta-6:oklch(47% 51% 356deg);
|
|
561
|
-
--color-magenta-3:oklch(77% 43% 356deg);
|
|
562
|
-
}
|
|
563
|
-
}
|
|
564
|
-
|
|
565
|
-
@media (color-gamut:rec2020){
|
|
566
|
-
::backdrop,:root{
|
|
567
|
-
--color-magenta-2:oklch(87% 38% 356deg);
|
|
568
|
-
--color-magenta-1:oklch(97% 30% 356deg);
|
|
475
|
+
--color-blue-4:oklch(65% 52% 260deg);
|
|
476
|
+
--color-blue-3:oklch(75% 48% 260deg);
|
|
477
|
+
--color-blue-2:oklch(85% 45% 260deg);
|
|
478
|
+
--color-blue-1:oklch(95% 42% 260deg);
|
|
479
|
+
--color-purple-9:oklch(15% 55% 310deg);
|
|
480
|
+
--color-purple-8:oklch(25% 55% 310deg);
|
|
481
|
+
--color-purple-7:oklch(35% 53% 310deg);
|
|
482
|
+
--color-purple-2:oklch(85% 42% 310deg);
|
|
483
|
+
--color-purple-1:oklch(95% 40% 310deg);
|
|
484
|
+
--color-magenta-9:oklch(15% 55% 356deg);
|
|
485
|
+
--color-magenta-8:oklch(25% 55% 356deg);
|
|
486
|
+
--color-magenta-7:oklch(35% 54% 356deg);
|
|
487
|
+
--color-magenta-2:oklch(85% 36% 356deg);
|
|
488
|
+
--color-magenta-1:oklch(95% 34% 356deg);
|
|
569
489
|
}
|
|
570
490
|
}
|
|
571
491
|
}
|
|
@@ -630,26 +550,90 @@
|
|
|
630
550
|
--alert-bg-color:var(--color-red-9);
|
|
631
551
|
--alert-border-start-color:var(--color-red-5);
|
|
632
552
|
--alert-border-end-color:var(--color-red-6);
|
|
553
|
+
--alert-dismiss-icon-color:var(--color-red-4);
|
|
554
|
+
--alert-dismiss-hover-bg:var(--color-red-extra-transparent);
|
|
555
|
+
--alert-dismiss-focus-bg:var(--color-red-transparent);
|
|
633
556
|
--alert-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M368 368 144 144m224 0L144 368'/%3E%3C/svg%3E");
|
|
634
557
|
}
|
|
635
558
|
.alert.warning{
|
|
636
559
|
--alert-bg-color:var(--color-yellow-9);
|
|
637
560
|
--alert-border-start-color:var(--color-yellow-5);
|
|
638
561
|
--alert-border-end-color:var(--color-yellow-6);
|
|
562
|
+
--alert-dismiss-icon-color:var(--color-yellow-4);
|
|
563
|
+
--alert-dismiss-hover-bg:var(--color-yellow-extra-transparent);
|
|
564
|
+
--alert-dismiss-focus-bg:var(--color-yellow-transparent);
|
|
639
565
|
--alert-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M256 80c-8.66 0-16.58 7.36-16 16l8 216a8 8 0 0 0 8 8h0a8 8 0 0 0 8-8l8-216c.58-8.64-7.34-16-16-16'/%3E%3Ccircle cx='256' cy='436' r='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48'/%3E%3C/svg%3E");
|
|
640
566
|
}
|
|
641
567
|
.alert.success{
|
|
642
568
|
--alert-bg-color:var(--color-green-9);
|
|
643
569
|
--alert-border-start-color:var(--color-green-5);
|
|
644
570
|
--alert-border-end-color:var(--color-green-6);
|
|
571
|
+
--alert-dismiss-icon-color:var(--color-green-4);
|
|
572
|
+
--alert-dismiss-hover-bg:var(--color-green-extra-transparent);
|
|
573
|
+
--alert-dismiss-focus-bg:var(--color-green-transparent);
|
|
645
574
|
--alert-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128 192 384l-96-96'/%3E%3C/svg%3E");
|
|
646
575
|
}
|
|
647
576
|
.alert.info{
|
|
648
577
|
--alert-bg-color:var(--color-sky-9);
|
|
649
578
|
--alert-border-start-color:var(--color-sky-5);
|
|
650
579
|
--alert-border-end-color:var(--color-sky-6);
|
|
580
|
+
--alert-dismiss-icon-color:var(--color-sky-4);
|
|
581
|
+
--alert-dismiss-hover-bg:var(--color-sky-extra-transparent);
|
|
582
|
+
--alert-dismiss-focus-bg:var(--color-sky-transparent);
|
|
651
583
|
--alert-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M196 220h64v172'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='64' d='M187 396h138'/%3E%3Ccircle cx='253' cy='118' r='44'/%3E%3C/svg%3E");
|
|
652
584
|
}
|
|
585
|
+
.alert.banner{
|
|
586
|
+
border-radius:0;
|
|
587
|
+
border-width:var(--border-m) 0;
|
|
588
|
+
padding:var(--space-xs);
|
|
589
|
+
padding-left:calc(var(--space-xs) + 2em);
|
|
590
|
+
width:100%;
|
|
591
|
+
}
|
|
592
|
+
.alert.banner:has(.button.dismiss){
|
|
593
|
+
padding-right:calc(var(--space-xs) + 2em);
|
|
594
|
+
}
|
|
595
|
+
.alert.banner:after,.alert.banner:before{
|
|
596
|
+
height:2em;
|
|
597
|
+
left:calc(var(--space-xs)*.5);
|
|
598
|
+
margin:auto;
|
|
599
|
+
width:2em;
|
|
600
|
+
}
|
|
601
|
+
.alert.banner .button.dismiss{
|
|
602
|
+
--button-fg-color:var(--alert-dismiss-icon-color);
|
|
603
|
+
--button-bg-color:transparent;
|
|
604
|
+
--button-border-color:transparent;
|
|
605
|
+
--button-hover-bg-color:var(--alert-dismiss-hover-bg);
|
|
606
|
+
--button-focus-ring-color:transparent;
|
|
607
|
+
--button-shadow:none;
|
|
608
|
+
bottom:0;
|
|
609
|
+
font-size:.75rem;
|
|
610
|
+
height:3em;
|
|
611
|
+
margin:auto;
|
|
612
|
+
position:absolute;
|
|
613
|
+
right:var(--space-3xs);
|
|
614
|
+
top:0;
|
|
615
|
+
width:3em;
|
|
616
|
+
}
|
|
617
|
+
.alert.banner .button.dismiss:focus-visible{
|
|
618
|
+
--button-bg-color:var(--alert-dismiss-focus-bg);
|
|
619
|
+
--button-hover-bg-color:transparent;
|
|
620
|
+
}
|
|
621
|
+
.alert.banner .button.dismiss.focus{
|
|
622
|
+
--button-bg-color:var(--alert-dismiss-focus-bg);
|
|
623
|
+
--button-hover-bg-color:transparent;
|
|
624
|
+
}
|
|
625
|
+
.alert.banner .button.dismiss:after{
|
|
626
|
+
background-color:currentcolor;
|
|
627
|
+
content:"";
|
|
628
|
+
height:1.8em;
|
|
629
|
+
-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M368 368 144 144m224 0L144 368'/%3E%3C/svg%3E");
|
|
630
|
+
mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M368 368 144 144m224 0L144 368'/%3E%3C/svg%3E");
|
|
631
|
+
-webkit-mask-repeat:no-repeat;
|
|
632
|
+
mask-repeat:no-repeat;
|
|
633
|
+
-webkit-mask-size:contain;
|
|
634
|
+
mask-size:contain;
|
|
635
|
+
width:1.8em;
|
|
636
|
+
}
|
|
653
637
|
|
|
654
638
|
.alert-title{
|
|
655
639
|
color:var(--alert-border-start-color);
|
|
@@ -736,14 +720,11 @@
|
|
|
736
720
|
|
|
737
721
|
.app{
|
|
738
722
|
--app-width:110rem;
|
|
739
|
-
--app-header-height:max(50px, min(3.5rem, 70px));
|
|
740
|
-
--app-sidebar-width:max(300px, min(18rem, 400px));
|
|
741
723
|
display:flex;
|
|
742
724
|
flex-direction:column;
|
|
743
|
-
height:
|
|
744
|
-
overflow:visible;
|
|
725
|
+
min-height:100svh;
|
|
745
726
|
position:relative;
|
|
746
|
-
width:
|
|
727
|
+
width:100%;
|
|
747
728
|
}
|
|
748
729
|
|
|
749
730
|
.app-header{
|
|
@@ -752,7 +733,11 @@
|
|
|
752
733
|
box-shadow:var(--shadow-s);
|
|
753
734
|
color:var(--color-brand-3);
|
|
754
735
|
flex:none;
|
|
755
|
-
height:
|
|
736
|
+
height:max(50px, min(3.5rem, 70px));
|
|
737
|
+
overflow-x:auto;
|
|
738
|
+
overflow-y:hidden;
|
|
739
|
+
overflow:auto hidden;
|
|
740
|
+
scrollbar-width:thin;
|
|
756
741
|
width:100%;
|
|
757
742
|
}
|
|
758
743
|
@media (prefers-color-scheme:dark){
|
|
@@ -844,6 +829,9 @@
|
|
|
844
829
|
}
|
|
845
830
|
|
|
846
831
|
.app-body{
|
|
832
|
+
display:flex;
|
|
833
|
+
flex:none;
|
|
834
|
+
flex-direction:row;
|
|
847
835
|
margin-left:auto;
|
|
848
836
|
margin-right:auto;
|
|
849
837
|
max-width:var(--app-width);
|
|
@@ -852,18 +840,19 @@
|
|
|
852
840
|
}
|
|
853
841
|
|
|
854
842
|
.app-sidebar{
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
border-right:var(--border-s) solid;
|
|
858
|
-
height:100%;
|
|
859
|
-
left:0;
|
|
843
|
+
border-right:var(--border-s) dashed var(--color-outline);
|
|
844
|
+
flex:none;
|
|
860
845
|
opacity:1;
|
|
846
|
+
transition:opacity .15s ease,display allow-discrete .15s;
|
|
847
|
+
width:max(300px, min(18rem, 400px));
|
|
848
|
+
}
|
|
849
|
+
|
|
850
|
+
.app-sidebar-content{
|
|
851
|
+
height:auto;
|
|
852
|
+
height:100dvh;
|
|
861
853
|
overflow:auto;
|
|
862
|
-
position:
|
|
854
|
+
position:sticky;
|
|
863
855
|
top:0;
|
|
864
|
-
transition:opacity .15s ease,display allow-discrete .15s;
|
|
865
|
-
width:var(--app-sidebar-width);
|
|
866
|
-
z-index:3;
|
|
867
856
|
}
|
|
868
857
|
|
|
869
858
|
.app-sidebar-section:first-of-type{
|
|
@@ -902,7 +891,7 @@
|
|
|
902
891
|
.app-sidebar-item:active{
|
|
903
892
|
color:var(--color-brand-1);
|
|
904
893
|
}
|
|
905
|
-
.app-sidebar-item.current,.app-sidebar-item[aria-current
|
|
894
|
+
.app-sidebar-item.current,.app-sidebar-item[aria-current]{
|
|
906
895
|
color:var(--color-brand-4);
|
|
907
896
|
font-weight:var(--font-weight-bold);
|
|
908
897
|
}
|
|
@@ -977,36 +966,9 @@
|
|
|
977
966
|
|
|
978
967
|
.app:has(.app-sidebar){
|
|
979
968
|
--app-width:125rem;
|
|
980
|
-
overflow:hidden;
|
|
981
|
-
}
|
|
982
|
-
.app:has(.app-sidebar) .app-header{
|
|
983
|
-
left:0;
|
|
984
|
-
position:fixed;
|
|
985
|
-
top:0;
|
|
986
|
-
}
|
|
987
|
-
.app:has(.app-sidebar) .app-body{
|
|
988
|
-
height:calc(100dvh - var(--app-header-height));
|
|
989
|
-
left:0;
|
|
990
|
-
margin-left:auto;
|
|
991
|
-
margin-right:auto;
|
|
992
|
-
position:fixed;
|
|
993
|
-
right:0;
|
|
994
|
-
top:var(--app-header-height);
|
|
995
|
-
}
|
|
996
|
-
.app:has(.app-sidebar) .app-content{
|
|
997
|
-
height:100%;
|
|
998
|
-
left:var(--app-sidebar-width);
|
|
999
|
-
overflow:auto;
|
|
1000
|
-
position:absolute;
|
|
1001
|
-
top:0;
|
|
1002
|
-
width:calc(100% - var(--app-sidebar-width));
|
|
1003
969
|
}
|
|
1004
970
|
|
|
1005
971
|
@media (max-width:54.999rem){
|
|
1006
|
-
.app-content{
|
|
1007
|
-
left:0 !important;
|
|
1008
|
-
width:100dvw !important;
|
|
1009
|
-
}
|
|
1010
972
|
.app-sidebar{
|
|
1011
973
|
-webkit-backdrop-filter:blur(24px) saturate(120%);
|
|
1012
974
|
backdrop-filter:blur(24px) saturate(120%);
|
|
@@ -1033,7 +995,7 @@
|
|
|
1033
995
|
opacity:0;
|
|
1034
996
|
}
|
|
1035
997
|
}
|
|
1036
|
-
.button
|
|
998
|
+
.button{
|
|
1037
999
|
--button-shadow:var(--shadow-s);
|
|
1038
1000
|
--button-hover-bg-color:var(--button-border-color);
|
|
1039
1001
|
align-items:center;
|
|
@@ -1062,14 +1024,16 @@
|
|
|
1062
1024
|
-webkit-text-decoration:none;
|
|
1063
1025
|
text-decoration:none;
|
|
1064
1026
|
transform:scale(1);
|
|
1065
|
-
transition-duration:.2s;
|
|
1066
1027
|
transition-property:box-shadow, background-color, transform, opacity;
|
|
1067
1028
|
transition-timing-function:ease;
|
|
1068
1029
|
-webkit-user-select:none;
|
|
1069
1030
|
-moz-user-select:none;
|
|
1070
1031
|
user-select:none;
|
|
1071
1032
|
}
|
|
1072
|
-
.button
|
|
1033
|
+
.button,.button:before{
|
|
1034
|
+
transition-duration:.2s;
|
|
1035
|
+
}
|
|
1036
|
+
.button:before{
|
|
1073
1037
|
background-color:var(--button-hover-bg-color);
|
|
1074
1038
|
border-radius:2em;
|
|
1075
1039
|
bottom:0;
|
|
@@ -1081,147 +1045,98 @@
|
|
|
1081
1045
|
position:absolute;
|
|
1082
1046
|
right:0;
|
|
1083
1047
|
top:0;
|
|
1084
|
-
transition-duration:.2s;
|
|
1085
1048
|
transition-property:opacity, width, height, border-radius;
|
|
1086
1049
|
transition-timing-function:ease;
|
|
1087
1050
|
width:4em;
|
|
1088
1051
|
z-index:-1;
|
|
1089
1052
|
}
|
|
1090
|
-
button:
|
|
1091
|
-
box-shadow:var(--button-shadow), 0 0 0 .1em var(--button-border-color), 0 0 0 calc(.2em + var(--border-s)) var(--button-focus-ring-color);
|
|
1092
|
-
}
|
|
1093
|
-
button.focus:not(.does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1094
|
-
box-shadow:var(--button-shadow), 0 0 0 .1em var(--button-border-color), 0 0 0 calc(.2em + var(--border-s)) var(--button-focus-ring-color);
|
|
1095
|
-
}
|
|
1096
|
-
.button:not(does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1097
|
-
box-shadow:var(--button-shadow), 0 0 0 .1em var(--button-border-color), 0 0 0 calc(.2em + var(--border-s)) var(--button-focus-ring-color);
|
|
1098
|
-
}
|
|
1099
|
-
.button.focus:not(does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1100
|
-
box-shadow:var(--button-shadow), 0 0 0 .1em var(--button-border-color), 0 0 0 calc(.2em + var(--border-s)) var(--button-focus-ring-color);
|
|
1101
|
-
}
|
|
1102
|
-
input[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1103
|
-
box-shadow:var(--button-shadow), 0 0 0 .1em var(--button-border-color), 0 0 0 calc(.2em + var(--border-s)) var(--button-focus-ring-color);
|
|
1104
|
-
}
|
|
1105
|
-
input.focus[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1106
|
-
box-shadow:var(--button-shadow), 0 0 0 .1em var(--button-border-color), 0 0 0 calc(.2em + var(--border-s)) var(--button-focus-ring-color);
|
|
1107
|
-
}
|
|
1108
|
-
input[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1109
|
-
box-shadow:var(--button-shadow), 0 0 0 .1em var(--button-border-color), 0 0 0 calc(.2em + var(--border-s)) var(--button-focus-ring-color);
|
|
1110
|
-
}
|
|
1111
|
-
input.focus[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1112
|
-
box-shadow:var(--button-shadow), 0 0 0 .1em var(--button-border-color), 0 0 0 calc(.2em + var(--border-s)) var(--button-focus-ring-color);
|
|
1113
|
-
}
|
|
1114
|
-
input[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1053
|
+
.button:focus-visible{
|
|
1115
1054
|
box-shadow:var(--button-shadow), 0 0 0 .1em var(--button-border-color), 0 0 0 calc(.2em + var(--border-s)) var(--button-focus-ring-color);
|
|
1116
1055
|
}
|
|
1117
|
-
|
|
1056
|
+
.button.focus{
|
|
1118
1057
|
box-shadow:var(--button-shadow), 0 0 0 .1em var(--button-border-color), 0 0 0 calc(.2em + var(--border-s)) var(--button-focus-ring-color);
|
|
1119
1058
|
}
|
|
1120
|
-
.button.active
|
|
1059
|
+
.button.active,.button:active{
|
|
1121
1060
|
transform:scale(.98);
|
|
1122
1061
|
}
|
|
1123
1062
|
@media screen and (-webkit-max-device-pixel-ratio:1.999),screen and (max-resolution:1.999x){
|
|
1124
|
-
.button.active
|
|
1063
|
+
.button.active,.button:active{
|
|
1125
1064
|
transform:translateY(1px);
|
|
1126
1065
|
}
|
|
1127
1066
|
}
|
|
1128
|
-
.button.hover
|
|
1067
|
+
.button.hover,.button:hover{
|
|
1129
1068
|
-webkit-text-decoration:none;
|
|
1130
1069
|
text-decoration:none;
|
|
1131
1070
|
}
|
|
1132
|
-
.button.hover:
|
|
1071
|
+
.button.hover:before,.button:hover:before{
|
|
1133
1072
|
border-radius:5px;
|
|
1134
1073
|
height:100%;
|
|
1135
1074
|
opacity:1;
|
|
1136
1075
|
width:100%;
|
|
1137
1076
|
}
|
|
1138
|
-
|
|
1139
|
-
background-color:var(--button-hover-bg-color);
|
|
1140
|
-
}
|
|
1141
|
-
button:is(input).hover:not(.does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1142
|
-
background-color:var(--button-hover-bg-color);
|
|
1143
|
-
}
|
|
1144
|
-
input.button.hover:not(does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action),input.button:not(does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action):hover{
|
|
1145
|
-
background-color:var(--button-hover-bg-color);
|
|
1146
|
-
}
|
|
1147
|
-
input:is(input)[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):hover{
|
|
1148
|
-
background-color:var(--button-hover-bg-color);
|
|
1149
|
-
}
|
|
1150
|
-
input:is(input).hover[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1151
|
-
background-color:var(--button-hover-bg-color);
|
|
1152
|
-
}
|
|
1153
|
-
input:is(input)[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):hover{
|
|
1154
|
-
background-color:var(--button-hover-bg-color);
|
|
1155
|
-
}
|
|
1156
|
-
input:is(input).hover[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1157
|
-
background-color:var(--button-hover-bg-color);
|
|
1158
|
-
}
|
|
1159
|
-
input:is(input)[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):hover{
|
|
1160
|
-
background-color:var(--button-hover-bg-color);
|
|
1161
|
-
}
|
|
1162
|
-
input:is(input).hover[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1077
|
+
input.button.hover,input.button:hover{
|
|
1163
1078
|
background-color:var(--button-hover-bg-color);
|
|
1164
1079
|
}
|
|
1165
|
-
.button.primary
|
|
1080
|
+
.button.primary{
|
|
1166
1081
|
--button-fg-color:#fff;
|
|
1167
1082
|
--button-bg-color:var(--color-brand-5);
|
|
1168
1083
|
--button-border-color:var(--color-brand-4);
|
|
1169
1084
|
--button-font-weight:var(--font-weight-bold);
|
|
1170
1085
|
--button-focus-ring-color:var(--color-brand-transparent);
|
|
1171
1086
|
}
|
|
1172
|
-
.button.primary.red
|
|
1087
|
+
.button.primary.red{
|
|
1173
1088
|
--button-bg-color:var(--color-red-5);
|
|
1174
1089
|
--button-border-color:var(--color-red-4);
|
|
1175
1090
|
--button-focus-ring-color:var(--color-red-transparent);
|
|
1176
1091
|
}
|
|
1177
|
-
.button.primary.orange
|
|
1092
|
+
.button.primary.orange{
|
|
1178
1093
|
--button-bg-color:var(--color-orange-5);
|
|
1179
1094
|
--button-border-color:var(--color-orange-4);
|
|
1180
1095
|
--button-focus-ring-color:var(--color-orange-transparent);
|
|
1181
1096
|
}
|
|
1182
|
-
.button.primary.yellow
|
|
1097
|
+
.button.primary.yellow{
|
|
1183
1098
|
--button-bg-color:var(--color-yellow-5);
|
|
1184
1099
|
--button-border-color:var(--color-yellow-4);
|
|
1185
1100
|
--button-focus-ring-color:var(--color-yellow-transparent);
|
|
1186
1101
|
}
|
|
1187
|
-
.button.primary.green
|
|
1102
|
+
.button.primary.green{
|
|
1188
1103
|
--button-bg-color:var(--color-green-5);
|
|
1189
1104
|
--button-border-color:var(--color-green-4);
|
|
1190
1105
|
--button-focus-ring-color:var(--color-green-transparent);
|
|
1191
1106
|
}
|
|
1192
|
-
.button.primary.sky
|
|
1107
|
+
.button.primary.sky{
|
|
1193
1108
|
--button-bg-color:var(--color-sky-5);
|
|
1194
1109
|
--button-border-color:var(--color-sky-4);
|
|
1195
1110
|
--button-focus-ring-color:var(--color-sky-transparent);
|
|
1196
1111
|
}
|
|
1197
|
-
.button.primary.blue
|
|
1112
|
+
.button.primary.blue{
|
|
1198
1113
|
--button-bg-color:var(--color-blue-5);
|
|
1199
1114
|
--button-border-color:var(--color-blue-4);
|
|
1200
1115
|
--button-focus-ring-color:var(--color-blue-transparent);
|
|
1201
1116
|
}
|
|
1202
|
-
.button.primary.purple
|
|
1117
|
+
.button.primary.purple{
|
|
1203
1118
|
--button-bg-color:var(--color-purple-5);
|
|
1204
1119
|
--button-border-color:var(--color-purple-4);
|
|
1205
1120
|
--button-focus-ring-color:var(--color-purple-transparent);
|
|
1206
1121
|
}
|
|
1207
|
-
.button.primary.magenta
|
|
1122
|
+
.button.primary.magenta{
|
|
1208
1123
|
--button-bg-color:var(--color-magenta-5);
|
|
1209
1124
|
--button-border-color:var(--color-magenta-4);
|
|
1210
1125
|
--button-focus-ring-color:var(--color-magenta-transparent);
|
|
1211
1126
|
}
|
|
1212
|
-
.button.primary.gray
|
|
1127
|
+
.button.primary.gray{
|
|
1213
1128
|
--button-bg-color:var(--color-gray-5);
|
|
1214
1129
|
--button-border-color:var(--color-gray-4);
|
|
1215
1130
|
--button-focus-ring-color:var(--color-gray-transparent);
|
|
1216
1131
|
}
|
|
1217
|
-
.button:not(
|
|
1132
|
+
.button:not(.primary):not(.subtle):not(.close):not(.dismiss){
|
|
1218
1133
|
--button-fg-color:var(--color-body-text);
|
|
1219
1134
|
--button-bg-color:var(--color-gray-9);
|
|
1220
1135
|
--button-border-color:var(--color-gray-8);
|
|
1221
1136
|
--button-font-weight:var(--font-weight-normal);
|
|
1222
1137
|
--button-focus-ring-color:var(--color-gray-extra-transparent);
|
|
1223
1138
|
}
|
|
1224
|
-
.button.close
|
|
1139
|
+
.button.close,.button.subtle{
|
|
1225
1140
|
--button-fg-color:var(--color-brand-4);
|
|
1226
1141
|
--button-bg-color:transparent;
|
|
1227
1142
|
--button-border-color:transparent;
|
|
@@ -1230,131 +1145,63 @@ input:is(input).hover[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.
|
|
|
1230
1145
|
--button-focus-ring-color:transparent;
|
|
1231
1146
|
--button-shadow:none;
|
|
1232
1147
|
}
|
|
1233
|
-
button.subtle:
|
|
1234
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1235
|
-
--button-hover-bg-color:transparent;
|
|
1236
|
-
}
|
|
1237
|
-
button.subtle.focus:not(.does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1148
|
+
.button.subtle:focus-visible{
|
|
1238
1149
|
--button-bg-color:var(--color-brand-transparent);
|
|
1239
1150
|
--button-hover-bg-color:transparent;
|
|
1240
1151
|
}
|
|
1241
|
-
button.close:
|
|
1152
|
+
.button.close:focus-visible{
|
|
1242
1153
|
--button-bg-color:var(--color-brand-transparent);
|
|
1243
1154
|
--button-hover-bg-color:transparent;
|
|
1244
1155
|
}
|
|
1245
|
-
button.close.focus
|
|
1156
|
+
.button.close.focus,.button.subtle.focus{
|
|
1246
1157
|
--button-bg-color:var(--color-brand-transparent);
|
|
1247
1158
|
--button-hover-bg-color:transparent;
|
|
1248
1159
|
}
|
|
1249
|
-
.button.
|
|
1250
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1251
|
-
--button-hover-bg-color:transparent;
|
|
1252
|
-
}
|
|
1253
|
-
.button.subtle.focus:not(does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1254
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1255
|
-
--button-hover-bg-color:transparent;
|
|
1256
|
-
}
|
|
1257
|
-
.button.close:not(does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1258
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1259
|
-
--button-hover-bg-color:transparent;
|
|
1260
|
-
}
|
|
1261
|
-
.button.close.focus:not(does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1262
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1263
|
-
--button-hover-bg-color:transparent;
|
|
1264
|
-
}
|
|
1265
|
-
input.subtle[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1266
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1267
|
-
--button-hover-bg-color:transparent;
|
|
1268
|
-
}
|
|
1269
|
-
input.subtle.focus[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1270
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1271
|
-
--button-hover-bg-color:transparent;
|
|
1272
|
-
}
|
|
1273
|
-
input.close[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1274
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1275
|
-
--button-hover-bg-color:transparent;
|
|
1276
|
-
}
|
|
1277
|
-
input.close.focus[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1278
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1279
|
-
--button-hover-bg-color:transparent;
|
|
1280
|
-
}
|
|
1281
|
-
input.subtle[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1282
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1283
|
-
--button-hover-bg-color:transparent;
|
|
1284
|
-
}
|
|
1285
|
-
input.subtle.focus[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1286
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1287
|
-
--button-hover-bg-color:transparent;
|
|
1288
|
-
}
|
|
1289
|
-
input.close[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1290
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1291
|
-
--button-hover-bg-color:transparent;
|
|
1292
|
-
}
|
|
1293
|
-
input.close.focus[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1294
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1295
|
-
--button-hover-bg-color:transparent;
|
|
1296
|
-
}
|
|
1297
|
-
input.subtle[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1298
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1299
|
-
--button-hover-bg-color:transparent;
|
|
1300
|
-
}
|
|
1301
|
-
input.subtle.focus[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1302
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1303
|
-
--button-hover-bg-color:transparent;
|
|
1304
|
-
}
|
|
1305
|
-
input.close[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1306
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1307
|
-
--button-hover-bg-color:transparent;
|
|
1308
|
-
}
|
|
1309
|
-
input.close.focus[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1310
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1311
|
-
--button-hover-bg-color:transparent;
|
|
1312
|
-
}
|
|
1313
|
-
.button.close:not(does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action),.button.small:not(does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action),button.close:not(.does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action),button.small:not(.does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action),input.close[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action),input.close[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action),input.close[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action),input.small[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action),input.small[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action),input.small[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1160
|
+
.button.close,.button.dismiss,.button.small{
|
|
1314
1161
|
font-size:.8rem;
|
|
1315
1162
|
}
|
|
1316
|
-
.button.large
|
|
1163
|
+
.button.large{
|
|
1317
1164
|
font-size:1.2rem;
|
|
1318
1165
|
}
|
|
1319
|
-
.button.close
|
|
1166
|
+
.button.close,.button.dismiss,.button.icon{
|
|
1320
1167
|
aspect-ratio:1;
|
|
1321
1168
|
border-radius:var(--radius-full);
|
|
1322
1169
|
min-height:0;
|
|
1323
1170
|
min-width:0;
|
|
1324
1171
|
}
|
|
1325
|
-
.button.close.close:
|
|
1172
|
+
.button.close.close:before,.button.close.subtle:before,.button.dismiss.close:before,.button.dismiss.subtle:before,.button.icon.close:before,.button.icon.subtle:before{
|
|
1326
1173
|
height:75%;
|
|
1327
1174
|
width:75%;
|
|
1328
1175
|
}
|
|
1329
|
-
.button.close.close.hover:
|
|
1176
|
+
.button.close.close.hover:before,.button.close.close:hover:before,.button.close.subtle.hover:before,.button.close.subtle:hover:before,.button.dismiss.close.hover:before,.button.dismiss.close:hover:before,.button.dismiss.subtle.hover:before,.button.dismiss.subtle:hover:before,.button.icon.close.hover:before,.button.icon.close:hover:before,.button.icon.subtle.hover:before,.button.icon.subtle:hover:before{
|
|
1330
1177
|
border-radius:100%;
|
|
1331
1178
|
height:100%;
|
|
1332
1179
|
width:100%;
|
|
1333
1180
|
}
|
|
1334
|
-
.button.close.icon
|
|
1181
|
+
.button.close.icon,.button.dismiss.icon,.button.icon.icon{
|
|
1335
1182
|
padding:.5em;
|
|
1336
1183
|
}
|
|
1337
|
-
.button.close.close
|
|
1184
|
+
.button.close.close,.button.close.dismiss,.button.dismiss.close,.button.dismiss.dismiss,.button.icon.close,.button.icon.dismiss{
|
|
1338
1185
|
padding:.3em;
|
|
1339
1186
|
}
|
|
1340
|
-
.button.close:not(
|
|
1187
|
+
.button.close:not(.subtle):not(.close):not(.dismiss):before,.button.dismiss:not(.subtle):not(.close):not(.dismiss):before,.button.icon:not(.subtle):not(.close):not(.dismiss):before{
|
|
1341
1188
|
content:normal;
|
|
1342
1189
|
}
|
|
1343
|
-
.button.close.hover:not(
|
|
1190
|
+
.button.close.hover:not(.subtle):not(.close):not(.dismiss),.button.close:not(.subtle):not(.close):not(.dismiss):hover,.button.dismiss.hover:not(.subtle):not(.close):not(.dismiss),.button.dismiss:not(.subtle):not(.close):not(.dismiss):hover,.button.icon.hover:not(.subtle):not(.close):not(.dismiss),.button.icon:not(.subtle):not(.close):not(.dismiss):hover{
|
|
1344
1191
|
background-color:var(--button-hover-bg-color);
|
|
1345
1192
|
}
|
|
1346
|
-
.button.disabled
|
|
1193
|
+
.button.disabled,.button:disabled,.button[aria-disabled=true]{
|
|
1347
1194
|
cursor:not-allowed;
|
|
1348
1195
|
opacity:.7;
|
|
1349
1196
|
transform:scale(1);
|
|
1350
1197
|
}
|
|
1351
|
-
.button.disabled.hover:
|
|
1198
|
+
.button.disabled.hover:before,.button.disabled:hover:before,.button.hover:disabled:before,.button.hover[aria-disabled=true]:before,.button:disabled:hover:before,.button[aria-disabled=true]:hover:before{
|
|
1352
1199
|
opacity:0;
|
|
1353
1200
|
}
|
|
1354
|
-
.button.loading
|
|
1201
|
+
.button.loading{
|
|
1355
1202
|
cursor:wait;
|
|
1356
1203
|
}
|
|
1357
|
-
.button.loading:
|
|
1204
|
+
.button.loading:before{
|
|
1358
1205
|
animation:button-loading-bg 1.2s ease-in-out infinite forwards;
|
|
1359
1206
|
border-radius:inherit !important;
|
|
1360
1207
|
height:100% !important;
|
|
@@ -1577,7 +1424,7 @@ input.close.focus[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.inpu
|
|
|
1577
1424
|
--chip-bg-color-active:var(--color-gray-3);
|
|
1578
1425
|
}
|
|
1579
1426
|
}
|
|
1580
|
-
.chip .
|
|
1427
|
+
.chip .delete{
|
|
1581
1428
|
background-color:rgba(0,0,0,.133);
|
|
1582
1429
|
border:var(--border-s) solid var(--chip-border-color);
|
|
1583
1430
|
border-radius:var(--radius-full);
|
|
@@ -1600,7 +1447,7 @@ input.close.focus[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.inpu
|
|
|
1600
1447
|
user-select:none;
|
|
1601
1448
|
width:2em;
|
|
1602
1449
|
}
|
|
1603
|
-
.chip .
|
|
1450
|
+
.chip .delete:after{
|
|
1604
1451
|
background-color:var(--chip-fg-color);
|
|
1605
1452
|
content:"";
|
|
1606
1453
|
height:1.7em;
|
|
@@ -1615,25 +1462,19 @@ input.close.focus[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.inpu
|
|
|
1615
1462
|
mask-size:contain;
|
|
1616
1463
|
width:1.7em;
|
|
1617
1464
|
}
|
|
1618
|
-
.chip
|
|
1619
|
-
border-color:var(--chip-fg-color);
|
|
1620
|
-
}
|
|
1621
|
-
.chip .button.delete:focus-visible{
|
|
1465
|
+
.chip .delete:focus-visible{
|
|
1622
1466
|
border-color:var(--chip-fg-color);
|
|
1623
1467
|
}
|
|
1624
|
-
.chip .
|
|
1468
|
+
.chip .delete.focus{
|
|
1625
1469
|
border-color:var(--chip-fg-color);
|
|
1626
1470
|
}
|
|
1627
|
-
.chip
|
|
1628
|
-
background-color:rgba(0,0,0,.067);
|
|
1629
|
-
}
|
|
1630
|
-
.chip .button.delete:focus-visible{
|
|
1471
|
+
.chip .delete:focus-visible{
|
|
1631
1472
|
background-color:rgba(0,0,0,.067);
|
|
1632
1473
|
}
|
|
1633
|
-
.chip .
|
|
1474
|
+
.chip .delete.focus,.chip .delete.hover,.chip .delete:hover{
|
|
1634
1475
|
background-color:rgba(0,0,0,.067);
|
|
1635
1476
|
}
|
|
1636
|
-
.chip .
|
|
1477
|
+
.chip .delete.active,.chip .delete:active{
|
|
1637
1478
|
background-color:rgba(0,0,0,.2);
|
|
1638
1479
|
}
|
|
1639
1480
|
|
|
@@ -1796,36 +1637,44 @@ input.close.focus[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.inpu
|
|
|
1796
1637
|
font-style:italic;
|
|
1797
1638
|
}
|
|
1798
1639
|
|
|
1640
|
+
::target-text{
|
|
1641
|
+
background-color:var(--color-brand-8);
|
|
1642
|
+
color:var(--color-brand-2);
|
|
1643
|
+
-webkit-print-color-adjust:exact;
|
|
1644
|
+
print-color-adjust:exact;
|
|
1645
|
+
}
|
|
1646
|
+
|
|
1799
1647
|
.mark,mark{
|
|
1800
1648
|
background-color:var(--color-yellow-8);
|
|
1801
|
-
color:var(--color-yellow-
|
|
1649
|
+
color:var(--color-yellow-2);
|
|
1802
1650
|
-webkit-print-color-adjust:exact;
|
|
1803
1651
|
print-color-adjust:exact;
|
|
1804
1652
|
}
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1653
|
+
|
|
1654
|
+
.ins,ins{
|
|
1655
|
+
background-color:var(--color-green-8);
|
|
1656
|
+
color:var(--color-green-2);
|
|
1657
|
+
text-decoration-color:var(--color-green-4);
|
|
1658
|
+
text-decoration-thickness:var(--border-m);
|
|
1659
|
+
}
|
|
1660
|
+
|
|
1661
|
+
.del,.ins,del,ins{
|
|
1662
|
+
-webkit-print-color-adjust:exact;
|
|
1663
|
+
print-color-adjust:exact;
|
|
1809
1664
|
}
|
|
1810
1665
|
|
|
1811
1666
|
.del,del{
|
|
1812
1667
|
background-color:var(--color-red-8);
|
|
1813
|
-
color:var(--color-red-
|
|
1814
|
-
text-decoration-color:var(--color-
|
|
1668
|
+
color:var(--color-red-2);
|
|
1669
|
+
text-decoration-color:var(--color-red-4);
|
|
1815
1670
|
text-decoration-line:line-through;
|
|
1816
1671
|
-webkit-text-decoration-skip-ink:none;
|
|
1817
1672
|
text-decoration-skip-ink:none;
|
|
1818
|
-
text-decoration-thickness:var(--border-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
.del,.ins,del,ins{
|
|
1822
|
-
border-radius:1px;
|
|
1673
|
+
text-decoration-thickness:var(--border-m);
|
|
1674
|
+
transition:text-decoration-color .15s ease;
|
|
1823
1675
|
}
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
background-color:var(--color-green-8);
|
|
1827
|
-
color:var(--color-green-1);
|
|
1828
|
-
text-decoration-line:none;
|
|
1676
|
+
.del:hover,del:hover{
|
|
1677
|
+
text-decoration-color:transparent;
|
|
1829
1678
|
}
|
|
1830
1679
|
|
|
1831
1680
|
.abbr[title],abbr[title]:not(.does-not-exist){
|
|
@@ -1853,13 +1702,6 @@ input.close.focus[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.inpu
|
|
|
1853
1702
|
.sup,sup{
|
|
1854
1703
|
top:-.5em;
|
|
1855
1704
|
}
|
|
1856
|
-
|
|
1857
|
-
::target-text{
|
|
1858
|
-
background-color:var(--color-brand-8);
|
|
1859
|
-
color:var(--color-brand-1);
|
|
1860
|
-
-webkit-print-color-adjust:exact;
|
|
1861
|
-
print-color-adjust:exact;
|
|
1862
|
-
}
|
|
1863
1705
|
.alert:not(.alert-title):not(.accordion details)+.alert:not(.alert-title):not(.accordion details),.alert:not(.alert-title):not(.accordion details)+.blockquote:not(.alert-title):not(.accordion details),.alert:not(.alert-title):not(.accordion details)+.p:not(.alert-title):not(.accordion details),.alert:not(.alert-title):not(.accordion details)+.pre:not(.alert-title):not(.accordion details),.alert:not(.alert-title):not(.accordion details)+.samp:not(.alert-title):not(.accordion details),.alert:not(.alert-title):not(.accordion details)+blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details),.alert:not(.alert-title):not(.accordion details)+details:not(.does-not-exist):not(.alert-title):not(.accordion details),.alert:not(.alert-title):not(.accordion details)+p:not(.does-not-exist):not(.alert-title):not(.accordion details),.alert:not(.alert-title):not(.accordion details)+pre:not(.does-not-exist):not(.alert-title):not(.accordion details),.alert:not(.alert-title):not(.accordion details)+samp:not(.does-not-exist):not(.alert-title):not(.accordion details),.blockquote:not(.alert-title):not(.accordion details)+.alert:not(.alert-title):not(.accordion details),.blockquote:not(.alert-title):not(.accordion details)+.blockquote:not(.alert-title):not(.accordion details),.blockquote:not(.alert-title):not(.accordion details)+.p:not(.alert-title):not(.accordion details),.blockquote:not(.alert-title):not(.accordion details)+.pre:not(.alert-title):not(.accordion details),.blockquote:not(.alert-title):not(.accordion details)+.samp:not(.alert-title):not(.accordion details),.blockquote:not(.alert-title):not(.accordion details)+blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details),.blockquote:not(.alert-title):not(.accordion details)+details:not(.does-not-exist):not(.alert-title):not(.accordion details),.blockquote:not(.alert-title):not(.accordion details)+p:not(.does-not-exist):not(.alert-title):not(.accordion details),.blockquote:not(.alert-title):not(.accordion details)+pre:not(.does-not-exist):not(.alert-title):not(.accordion details),.blockquote:not(.alert-title):not(.accordion details)+samp:not(.does-not-exist):not(.alert-title):not(.accordion details),.p:not(.alert-title):not(.accordion details)+.alert:not(.alert-title):not(.accordion details),.p:not(.alert-title):not(.accordion details)+.blockquote:not(.alert-title):not(.accordion details),.p:not(.alert-title):not(.accordion details)+.p:not(.alert-title):not(.accordion details),.p:not(.alert-title):not(.accordion details)+.pre:not(.alert-title):not(.accordion details),.p:not(.alert-title):not(.accordion details)+.samp:not(.alert-title):not(.accordion details),.p:not(.alert-title):not(.accordion details)+blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details),.p:not(.alert-title):not(.accordion details)+details:not(.does-not-exist):not(.alert-title):not(.accordion details),.p:not(.alert-title):not(.accordion details)+p:not(.does-not-exist):not(.alert-title):not(.accordion details),.p:not(.alert-title):not(.accordion details)+pre:not(.does-not-exist):not(.alert-title):not(.accordion details),.p:not(.alert-title):not(.accordion details)+samp:not(.does-not-exist):not(.alert-title):not(.accordion details),.pre:not(.alert-title):not(.accordion details)+.alert:not(.alert-title):not(.accordion details),.pre:not(.alert-title):not(.accordion details)+.blockquote:not(.alert-title):not(.accordion details),.pre:not(.alert-title):not(.accordion details)+.p:not(.alert-title):not(.accordion details),.pre:not(.alert-title):not(.accordion details)+.pre:not(.alert-title):not(.accordion details),.pre:not(.alert-title):not(.accordion details)+.samp:not(.alert-title):not(.accordion details),.pre:not(.alert-title):not(.accordion details)+blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details),.pre:not(.alert-title):not(.accordion details)+details:not(.does-not-exist):not(.alert-title):not(.accordion details),.pre:not(.alert-title):not(.accordion details)+p:not(.does-not-exist):not(.alert-title):not(.accordion details),.pre:not(.alert-title):not(.accordion details)+pre:not(.does-not-exist):not(.alert-title):not(.accordion details),.pre:not(.alert-title):not(.accordion details)+samp:not(.does-not-exist):not(.alert-title):not(.accordion details),.samp:not(.alert-title):not(.accordion details)+.alert:not(.alert-title):not(.accordion details),.samp:not(.alert-title):not(.accordion details)+.blockquote:not(.alert-title):not(.accordion details),.samp:not(.alert-title):not(.accordion details)+.p:not(.alert-title):not(.accordion details),.samp:not(.alert-title):not(.accordion details)+.pre:not(.alert-title):not(.accordion details),.samp:not(.alert-title):not(.accordion details)+.samp:not(.alert-title):not(.accordion details),.samp:not(.alert-title):not(.accordion details)+blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details),.samp:not(.alert-title):not(.accordion details)+details:not(.does-not-exist):not(.alert-title):not(.accordion details),.samp:not(.alert-title):not(.accordion details)+p:not(.does-not-exist):not(.alert-title):not(.accordion details),.samp:not(.alert-title):not(.accordion details)+pre:not(.does-not-exist):not(.alert-title):not(.accordion details),.samp:not(.alert-title):not(.accordion details)+samp:not(.does-not-exist):not(.alert-title):not(.accordion details),blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details)+.alert:not(.alert-title):not(.accordion details),blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details)+.blockquote:not(.alert-title):not(.accordion details),blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details)+.p:not(.alert-title):not(.accordion details),blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details)+.pre:not(.alert-title):not(.accordion details),blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details)+.samp:not(.alert-title):not(.accordion details),blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details)+blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details),blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details)+details:not(.does-not-exist):not(.alert-title):not(.accordion details),blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details)+p:not(.does-not-exist):not(.alert-title):not(.accordion details),blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details)+pre:not(.does-not-exist):not(.alert-title):not(.accordion details),blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details)+samp:not(.does-not-exist):not(.alert-title):not(.accordion details),details:not(.does-not-exist):not(.alert-title):not(.accordion details)+.alert:not(.alert-title):not(.accordion details),details:not(.does-not-exist):not(.alert-title):not(.accordion details)+.blockquote:not(.alert-title):not(.accordion details),details:not(.does-not-exist):not(.alert-title):not(.accordion details)+.p:not(.alert-title):not(.accordion details),details:not(.does-not-exist):not(.alert-title):not(.accordion details)+.pre:not(.alert-title):not(.accordion details),details:not(.does-not-exist):not(.alert-title):not(.accordion details)+.samp:not(.alert-title):not(.accordion details),details:not(.does-not-exist):not(.alert-title):not(.accordion details)+blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details),details:not(.does-not-exist):not(.alert-title):not(.accordion details)+details:not(.does-not-exist):not(.alert-title):not(.accordion details),details:not(.does-not-exist):not(.alert-title):not(.accordion details)+p:not(.does-not-exist):not(.alert-title):not(.accordion details),details:not(.does-not-exist):not(.alert-title):not(.accordion details)+pre:not(.does-not-exist):not(.alert-title):not(.accordion details),details:not(.does-not-exist):not(.alert-title):not(.accordion details)+samp:not(.does-not-exist):not(.alert-title):not(.accordion details),p:not(.does-not-exist):not(.alert-title):not(.accordion details)+.alert:not(.alert-title):not(.accordion details),p:not(.does-not-exist):not(.alert-title):not(.accordion details)+.blockquote:not(.alert-title):not(.accordion details),p:not(.does-not-exist):not(.alert-title):not(.accordion details)+.p:not(.alert-title):not(.accordion details),p:not(.does-not-exist):not(.alert-title):not(.accordion details)+.pre:not(.alert-title):not(.accordion details),p:not(.does-not-exist):not(.alert-title):not(.accordion details)+.samp:not(.alert-title):not(.accordion details),p:not(.does-not-exist):not(.alert-title):not(.accordion details)+blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details),p:not(.does-not-exist):not(.alert-title):not(.accordion details)+details:not(.does-not-exist):not(.alert-title):not(.accordion details),p:not(.does-not-exist):not(.alert-title):not(.accordion details)+p:not(.does-not-exist):not(.alert-title):not(.accordion details),p:not(.does-not-exist):not(.alert-title):not(.accordion details)+pre:not(.does-not-exist):not(.alert-title):not(.accordion details),p:not(.does-not-exist):not(.alert-title):not(.accordion details)+samp:not(.does-not-exist):not(.alert-title):not(.accordion details),pre:not(.does-not-exist):not(.alert-title):not(.accordion details)+.alert:not(.alert-title):not(.accordion details),pre:not(.does-not-exist):not(.alert-title):not(.accordion details)+.blockquote:not(.alert-title):not(.accordion details),pre:not(.does-not-exist):not(.alert-title):not(.accordion details)+.p:not(.alert-title):not(.accordion details),pre:not(.does-not-exist):not(.alert-title):not(.accordion details)+.pre:not(.alert-title):not(.accordion details),pre:not(.does-not-exist):not(.alert-title):not(.accordion details)+.samp:not(.alert-title):not(.accordion details),pre:not(.does-not-exist):not(.alert-title):not(.accordion details)+blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details),pre:not(.does-not-exist):not(.alert-title):not(.accordion details)+details:not(.does-not-exist):not(.alert-title):not(.accordion details),pre:not(.does-not-exist):not(.alert-title):not(.accordion details)+p:not(.does-not-exist):not(.alert-title):not(.accordion details),pre:not(.does-not-exist):not(.alert-title):not(.accordion details)+pre:not(.does-not-exist):not(.alert-title):not(.accordion details),pre:not(.does-not-exist):not(.alert-title):not(.accordion details)+samp:not(.does-not-exist):not(.alert-title):not(.accordion details),samp:not(.does-not-exist):not(.alert-title):not(.accordion details)+.alert:not(.alert-title):not(.accordion details),samp:not(.does-not-exist):not(.alert-title):not(.accordion details)+.blockquote:not(.alert-title):not(.accordion details),samp:not(.does-not-exist):not(.alert-title):not(.accordion details)+.p:not(.alert-title):not(.accordion details),samp:not(.does-not-exist):not(.alert-title):not(.accordion details)+.pre:not(.alert-title):not(.accordion details),samp:not(.does-not-exist):not(.alert-title):not(.accordion details)+.samp:not(.alert-title):not(.accordion details),samp:not(.does-not-exist):not(.alert-title):not(.accordion details)+blockquote:not(.does-not-exist):not(.alert-title):not(.accordion details),samp:not(.does-not-exist):not(.alert-title):not(.accordion details)+details:not(.does-not-exist):not(.alert-title):not(.accordion details),samp:not(.does-not-exist):not(.alert-title):not(.accordion details)+p:not(.does-not-exist):not(.alert-title):not(.accordion details),samp:not(.does-not-exist):not(.alert-title):not(.accordion details)+pre:not(.does-not-exist):not(.alert-title):not(.accordion details),samp:not(.does-not-exist):not(.alert-title):not(.accordion details)+samp:not(.does-not-exist):not(.alert-title):not(.accordion details){
|
|
1864
1706
|
margin-top:.75em;
|
|
1865
1707
|
}
|
|
@@ -2171,12 +2013,12 @@ dialog:not(.drawer).large{
|
|
|
2171
2013
|
font-weight:inherit;
|
|
2172
2014
|
margin:0;
|
|
2173
2015
|
}
|
|
2174
|
-
.dialog-header .button.close
|
|
2016
|
+
.dialog-header .button.close{
|
|
2175
2017
|
color:inherit;
|
|
2176
2018
|
margin:-.5rem;
|
|
2177
2019
|
margin-left:var(--space-3xs);
|
|
2178
2020
|
}
|
|
2179
|
-
.dialog-header .button.close:after
|
|
2021
|
+
.dialog-header .button.close:after{
|
|
2180
2022
|
background-color:currentcolor;
|
|
2181
2023
|
content:"";
|
|
2182
2024
|
height:1.8em;
|
|
@@ -2204,7 +2046,7 @@ dialog:not(.drawer).large{
|
|
|
2204
2046
|
display:flex;
|
|
2205
2047
|
flex-shrink:0;
|
|
2206
2048
|
gap:var(--space-2xs);
|
|
2207
|
-
justify-content:flex-
|
|
2049
|
+
justify-content:flex-start;
|
|
2208
2050
|
margin:0;
|
|
2209
2051
|
padding:var(--space-xs);
|
|
2210
2052
|
}
|
|
@@ -2215,7 +2057,7 @@ dialog:not(.drawer).large{
|
|
|
2215
2057
|
width:100%;
|
|
2216
2058
|
}
|
|
2217
2059
|
}
|
|
2218
|
-
.dialog-footer .button:not(
|
|
2060
|
+
.dialog-footer .button:not(.small):not(.medium):not(.large){
|
|
2219
2061
|
font-size:.9rem;
|
|
2220
2062
|
}
|
|
2221
2063
|
|
|
@@ -2459,12 +2301,15 @@ dialog:not(.drawer).large{
|
|
|
2459
2301
|
}
|
|
2460
2302
|
|
|
2461
2303
|
fieldset{
|
|
2304
|
+
background-color:var(--color-body);
|
|
2462
2305
|
border:var(--border-s) solid var(--color-outline);
|
|
2463
|
-
border-radius:var(--radius-
|
|
2306
|
+
border-radius:var(--radius-s);
|
|
2307
|
+
color:var(--color-body-text);
|
|
2464
2308
|
}
|
|
2465
2309
|
fieldset legend{
|
|
2466
|
-
color:var(--color-
|
|
2467
|
-
font-
|
|
2310
|
+
color:var(--color-brand-3);
|
|
2311
|
+
font-family:var(--font-family-heading);
|
|
2312
|
+
font-weight:var(--font-weight-bold);
|
|
2468
2313
|
}
|
|
2469
2314
|
|
|
2470
2315
|
input[type=checkbox],input[type=radio]{
|
|
@@ -2511,10 +2356,10 @@ meter{
|
|
|
2511
2356
|
|
|
2512
2357
|
@supports selector(::-moz-meter-bar){
|
|
2513
2358
|
meter{
|
|
2514
|
-
background:var(--color-gray-
|
|
2359
|
+
background:var(--color-gray-9);
|
|
2515
2360
|
border:0;
|
|
2516
2361
|
border-radius:var(--radius-s);
|
|
2517
|
-
box-shadow:inset 0 0 0 var(--border-s) var(--color-
|
|
2362
|
+
box-shadow:inset 0 0 0 var(--border-s) var(--color-outline);
|
|
2518
2363
|
box-sizing:border-box;
|
|
2519
2364
|
display:block;
|
|
2520
2365
|
height:1em;
|
|
@@ -2523,10 +2368,10 @@ meter{
|
|
|
2523
2368
|
}
|
|
2524
2369
|
}
|
|
2525
2370
|
::-webkit-meter-bar{
|
|
2526
|
-
background:var(--color-gray-
|
|
2371
|
+
background:var(--color-gray-9);
|
|
2527
2372
|
border:0;
|
|
2528
2373
|
border-radius:var(--radius-s);
|
|
2529
|
-
box-shadow:inset 0 0 0 var(--border-s) var(--color-
|
|
2374
|
+
box-shadow:inset 0 0 0 var(--border-s) var(--color-outline);
|
|
2530
2375
|
box-sizing:border-box;
|
|
2531
2376
|
display:block;
|
|
2532
2377
|
height:1em;
|
|
@@ -2603,10 +2448,10 @@ progress{
|
|
|
2603
2448
|
|
|
2604
2449
|
@supports selector(::-moz-progress-bar){
|
|
2605
2450
|
progress{
|
|
2606
|
-
background:var(--color-gray-
|
|
2451
|
+
background:var(--color-gray-9);
|
|
2607
2452
|
border:0;
|
|
2608
2453
|
border-radius:var(--radius-s);
|
|
2609
|
-
box-shadow:inset 0 0 0 var(--border-s) var(--color-
|
|
2454
|
+
box-shadow:inset 0 0 0 var(--border-s) var(--color-outline);
|
|
2610
2455
|
box-sizing:border-box;
|
|
2611
2456
|
display:block;
|
|
2612
2457
|
height:1em;
|
|
@@ -2615,10 +2460,10 @@ progress{
|
|
|
2615
2460
|
}
|
|
2616
2461
|
}
|
|
2617
2462
|
::-webkit-progress-bar{
|
|
2618
|
-
background:var(--color-gray-
|
|
2463
|
+
background:var(--color-gray-9);
|
|
2619
2464
|
border:0;
|
|
2620
2465
|
border-radius:var(--radius-s);
|
|
2621
|
-
box-shadow:inset 0 0 0 var(--border-s) var(--color-
|
|
2466
|
+
box-shadow:inset 0 0 0 var(--border-s) var(--color-outline);
|
|
2622
2467
|
box-sizing:border-box;
|
|
2623
2468
|
display:block;
|
|
2624
2469
|
height:1em;
|
|
@@ -2793,7 +2638,7 @@ input[type=range]::-moz-range-thumb{
|
|
|
2793
2638
|
.skeleton.chip:before,.skeleton.h1:before,.skeleton.h2:before,.skeleton.h3:before,.skeleton.h4:before,.skeleton.h5:before,.skeleton.h6:before,.skeleton.p:before,h1.skeleton:not(.does-not-exist):before,h2.skeleton:not(.does-not-exist):before,h3.skeleton:not(.does-not-exist):before,h4.skeleton:not(.does-not-exist):before,h5.skeleton:not(.does-not-exist):before,h6.skeleton:not(.does-not-exist):before,p.skeleton:not(.does-not-exist):before{
|
|
2794
2639
|
content:".";
|
|
2795
2640
|
}
|
|
2796
|
-
.skeleton.button:empty,.skeleton.chip:empty
|
|
2641
|
+
.skeleton.button:empty,.skeleton.chip:empty{
|
|
2797
2642
|
min-width:5em;
|
|
2798
2643
|
}
|
|
2799
2644
|
.skeleton:after,.skeleton:before,.skeleton>*{
|