@jrgermain/stylesheet 0.1.1 → 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 +439 -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 +37 -58
- package/src/styles/components/_button.scss +7 -12
- package/src/styles/components/_chip.scss +1 -1
- package/src/styles/components/_details.scss +1 -0
- package/src/styles/components/_dialog.scss +3 -9
- package/src/styles/components/_field.scss +9 -6
- package/src/styles/components/_progress-meter.scss +2 -2
- package/src/styles/components/_skeleton.scss +1 -1
- package/src/styles/components/_text.scss +26 -20
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){
|
|
@@ -779,7 +764,6 @@
|
|
|
779
764
|
}
|
|
780
765
|
|
|
781
766
|
.app-header-section{
|
|
782
|
-
gap:var(--space-3xs);
|
|
783
767
|
margin:0;
|
|
784
768
|
}
|
|
785
769
|
.app-header-section:only-child{
|
|
@@ -789,6 +773,12 @@
|
|
|
789
773
|
.app-header-section:first-child{
|
|
790
774
|
margin-right:auto;
|
|
791
775
|
}
|
|
776
|
+
.app-header-section:first-child .app-header-item:first-child{
|
|
777
|
+
margin-left:calc(var(--space-xs)*-1);
|
|
778
|
+
}
|
|
779
|
+
.app-header-section:last-child .app-header-item:last-child{
|
|
780
|
+
margin-right:calc(var(--space-xs)*-1);
|
|
781
|
+
}
|
|
792
782
|
.app-header-section:nth-child(n+3):before{
|
|
793
783
|
background-color:var(--color-outline);
|
|
794
784
|
content:"";
|
|
@@ -805,6 +795,8 @@
|
|
|
805
795
|
display:flex;
|
|
806
796
|
font-weight:var(--font-weight-semibold);
|
|
807
797
|
height:100%;
|
|
798
|
+
padding-left:var(--space-xs);
|
|
799
|
+
padding-right:var(--space-xs);
|
|
808
800
|
position:relative;
|
|
809
801
|
-webkit-text-decoration:none;
|
|
810
802
|
text-decoration:none;
|
|
@@ -837,6 +829,9 @@
|
|
|
837
829
|
}
|
|
838
830
|
|
|
839
831
|
.app-body{
|
|
832
|
+
display:flex;
|
|
833
|
+
flex:none;
|
|
834
|
+
flex-direction:row;
|
|
840
835
|
margin-left:auto;
|
|
841
836
|
margin-right:auto;
|
|
842
837
|
max-width:var(--app-width);
|
|
@@ -845,18 +840,19 @@
|
|
|
845
840
|
}
|
|
846
841
|
|
|
847
842
|
.app-sidebar{
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
border-right:var(--border-s) solid;
|
|
851
|
-
height:100%;
|
|
852
|
-
left:0;
|
|
843
|
+
border-right:var(--border-s) dashed var(--color-outline);
|
|
844
|
+
flex:none;
|
|
853
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;
|
|
854
853
|
overflow:auto;
|
|
855
|
-
position:
|
|
854
|
+
position:sticky;
|
|
856
855
|
top:0;
|
|
857
|
-
transition:opacity .15s ease,display allow-discrete .15s;
|
|
858
|
-
width:var(--app-sidebar-width);
|
|
859
|
-
z-index:3;
|
|
860
856
|
}
|
|
861
857
|
|
|
862
858
|
.app-sidebar-section:first-of-type{
|
|
@@ -895,7 +891,7 @@
|
|
|
895
891
|
.app-sidebar-item:active{
|
|
896
892
|
color:var(--color-brand-1);
|
|
897
893
|
}
|
|
898
|
-
.app-sidebar-item.current,.app-sidebar-item[aria-current
|
|
894
|
+
.app-sidebar-item.current,.app-sidebar-item[aria-current]{
|
|
899
895
|
color:var(--color-brand-4);
|
|
900
896
|
font-weight:var(--font-weight-bold);
|
|
901
897
|
}
|
|
@@ -970,36 +966,9 @@
|
|
|
970
966
|
|
|
971
967
|
.app:has(.app-sidebar){
|
|
972
968
|
--app-width:125rem;
|
|
973
|
-
overflow:hidden;
|
|
974
|
-
}
|
|
975
|
-
.app:has(.app-sidebar) .app-header{
|
|
976
|
-
left:0;
|
|
977
|
-
position:fixed;
|
|
978
|
-
top:0;
|
|
979
|
-
}
|
|
980
|
-
.app:has(.app-sidebar) .app-body{
|
|
981
|
-
height:calc(100dvh - var(--app-header-height));
|
|
982
|
-
left:0;
|
|
983
|
-
margin-left:auto;
|
|
984
|
-
margin-right:auto;
|
|
985
|
-
position:fixed;
|
|
986
|
-
right:0;
|
|
987
|
-
top:var(--app-header-height);
|
|
988
|
-
}
|
|
989
|
-
.app:has(.app-sidebar) .app-content{
|
|
990
|
-
height:100%;
|
|
991
|
-
left:var(--app-sidebar-width);
|
|
992
|
-
overflow:auto;
|
|
993
|
-
position:absolute;
|
|
994
|
-
top:0;
|
|
995
|
-
width:calc(100% - var(--app-sidebar-width));
|
|
996
969
|
}
|
|
997
970
|
|
|
998
971
|
@media (max-width:54.999rem){
|
|
999
|
-
.app-content{
|
|
1000
|
-
left:0 !important;
|
|
1001
|
-
width:100dvw !important;
|
|
1002
|
-
}
|
|
1003
972
|
.app-sidebar{
|
|
1004
973
|
-webkit-backdrop-filter:blur(24px) saturate(120%);
|
|
1005
974
|
backdrop-filter:blur(24px) saturate(120%);
|
|
@@ -1026,7 +995,7 @@
|
|
|
1026
995
|
opacity:0;
|
|
1027
996
|
}
|
|
1028
997
|
}
|
|
1029
|
-
.button
|
|
998
|
+
.button{
|
|
1030
999
|
--button-shadow:var(--shadow-s);
|
|
1031
1000
|
--button-hover-bg-color:var(--button-border-color);
|
|
1032
1001
|
align-items:center;
|
|
@@ -1055,14 +1024,16 @@
|
|
|
1055
1024
|
-webkit-text-decoration:none;
|
|
1056
1025
|
text-decoration:none;
|
|
1057
1026
|
transform:scale(1);
|
|
1058
|
-
transition-duration:.2s;
|
|
1059
1027
|
transition-property:box-shadow, background-color, transform, opacity;
|
|
1060
1028
|
transition-timing-function:ease;
|
|
1061
1029
|
-webkit-user-select:none;
|
|
1062
1030
|
-moz-user-select:none;
|
|
1063
1031
|
user-select:none;
|
|
1064
1032
|
}
|
|
1065
|
-
.button
|
|
1033
|
+
.button,.button:before{
|
|
1034
|
+
transition-duration:.2s;
|
|
1035
|
+
}
|
|
1036
|
+
.button:before{
|
|
1066
1037
|
background-color:var(--button-hover-bg-color);
|
|
1067
1038
|
border-radius:2em;
|
|
1068
1039
|
bottom:0;
|
|
@@ -1074,147 +1045,98 @@
|
|
|
1074
1045
|
position:absolute;
|
|
1075
1046
|
right:0;
|
|
1076
1047
|
top:0;
|
|
1077
|
-
transition-duration:.2s;
|
|
1078
1048
|
transition-property:opacity, width, height, border-radius;
|
|
1079
1049
|
transition-timing-function:ease;
|
|
1080
1050
|
width:4em;
|
|
1081
1051
|
z-index:-1;
|
|
1082
1052
|
}
|
|
1083
|
-
button:
|
|
1084
|
-
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);
|
|
1085
|
-
}
|
|
1086
|
-
button.focus:not(.does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1087
|
-
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);
|
|
1088
|
-
}
|
|
1089
|
-
.button:not(does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1090
|
-
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);
|
|
1091
|
-
}
|
|
1092
|
-
.button.focus:not(does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1093
|
-
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);
|
|
1094
|
-
}
|
|
1095
|
-
input[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1096
|
-
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);
|
|
1097
|
-
}
|
|
1098
|
-
input.focus[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1099
|
-
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);
|
|
1100
|
-
}
|
|
1101
|
-
input[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1102
|
-
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);
|
|
1103
|
-
}
|
|
1104
|
-
input.focus[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1105
|
-
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);
|
|
1106
|
-
}
|
|
1107
|
-
input[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1053
|
+
.button:focus-visible{
|
|
1108
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);
|
|
1109
1055
|
}
|
|
1110
|
-
|
|
1056
|
+
.button.focus{
|
|
1111
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);
|
|
1112
1058
|
}
|
|
1113
|
-
.button.active
|
|
1059
|
+
.button.active,.button:active{
|
|
1114
1060
|
transform:scale(.98);
|
|
1115
1061
|
}
|
|
1116
1062
|
@media screen and (-webkit-max-device-pixel-ratio:1.999),screen and (max-resolution:1.999x){
|
|
1117
|
-
.button.active
|
|
1063
|
+
.button.active,.button:active{
|
|
1118
1064
|
transform:translateY(1px);
|
|
1119
1065
|
}
|
|
1120
1066
|
}
|
|
1121
|
-
.button.hover
|
|
1067
|
+
.button.hover,.button:hover{
|
|
1122
1068
|
-webkit-text-decoration:none;
|
|
1123
1069
|
text-decoration:none;
|
|
1124
1070
|
}
|
|
1125
|
-
.button.hover:
|
|
1071
|
+
.button.hover:before,.button:hover:before{
|
|
1126
1072
|
border-radius:5px;
|
|
1127
1073
|
height:100%;
|
|
1128
1074
|
opacity:1;
|
|
1129
1075
|
width:100%;
|
|
1130
1076
|
}
|
|
1131
|
-
|
|
1132
|
-
background-color:var(--button-hover-bg-color);
|
|
1133
|
-
}
|
|
1134
|
-
button:is(input).hover:not(.does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1135
|
-
background-color:var(--button-hover-bg-color);
|
|
1136
|
-
}
|
|
1137
|
-
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{
|
|
1138
|
-
background-color:var(--button-hover-bg-color);
|
|
1139
|
-
}
|
|
1140
|
-
input:is(input)[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):hover{
|
|
1141
|
-
background-color:var(--button-hover-bg-color);
|
|
1142
|
-
}
|
|
1143
|
-
input:is(input).hover[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1144
|
-
background-color:var(--button-hover-bg-color);
|
|
1145
|
-
}
|
|
1146
|
-
input:is(input)[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):hover{
|
|
1147
|
-
background-color:var(--button-hover-bg-color);
|
|
1148
|
-
}
|
|
1149
|
-
input:is(input).hover[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1077
|
+
input.button.hover,input.button:hover{
|
|
1150
1078
|
background-color:var(--button-hover-bg-color);
|
|
1151
1079
|
}
|
|
1152
|
-
|
|
1153
|
-
background-color:var(--button-hover-bg-color);
|
|
1154
|
-
}
|
|
1155
|
-
input:is(input).hover[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1156
|
-
background-color:var(--button-hover-bg-color);
|
|
1157
|
-
}
|
|
1158
|
-
.button.primary:not(does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action),button.primary:not(.does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action),input.primary[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action),input.primary[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action),input.primary[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1080
|
+
.button.primary{
|
|
1159
1081
|
--button-fg-color:#fff;
|
|
1160
1082
|
--button-bg-color:var(--color-brand-5);
|
|
1161
1083
|
--button-border-color:var(--color-brand-4);
|
|
1162
1084
|
--button-font-weight:var(--font-weight-bold);
|
|
1163
1085
|
--button-focus-ring-color:var(--color-brand-transparent);
|
|
1164
1086
|
}
|
|
1165
|
-
.button.primary.red
|
|
1087
|
+
.button.primary.red{
|
|
1166
1088
|
--button-bg-color:var(--color-red-5);
|
|
1167
1089
|
--button-border-color:var(--color-red-4);
|
|
1168
1090
|
--button-focus-ring-color:var(--color-red-transparent);
|
|
1169
1091
|
}
|
|
1170
|
-
.button.primary.orange
|
|
1092
|
+
.button.primary.orange{
|
|
1171
1093
|
--button-bg-color:var(--color-orange-5);
|
|
1172
1094
|
--button-border-color:var(--color-orange-4);
|
|
1173
1095
|
--button-focus-ring-color:var(--color-orange-transparent);
|
|
1174
1096
|
}
|
|
1175
|
-
.button.primary.yellow
|
|
1097
|
+
.button.primary.yellow{
|
|
1176
1098
|
--button-bg-color:var(--color-yellow-5);
|
|
1177
1099
|
--button-border-color:var(--color-yellow-4);
|
|
1178
1100
|
--button-focus-ring-color:var(--color-yellow-transparent);
|
|
1179
1101
|
}
|
|
1180
|
-
.button.primary.green
|
|
1102
|
+
.button.primary.green{
|
|
1181
1103
|
--button-bg-color:var(--color-green-5);
|
|
1182
1104
|
--button-border-color:var(--color-green-4);
|
|
1183
1105
|
--button-focus-ring-color:var(--color-green-transparent);
|
|
1184
1106
|
}
|
|
1185
|
-
.button.primary.sky
|
|
1107
|
+
.button.primary.sky{
|
|
1186
1108
|
--button-bg-color:var(--color-sky-5);
|
|
1187
1109
|
--button-border-color:var(--color-sky-4);
|
|
1188
1110
|
--button-focus-ring-color:var(--color-sky-transparent);
|
|
1189
1111
|
}
|
|
1190
|
-
.button.primary.blue
|
|
1112
|
+
.button.primary.blue{
|
|
1191
1113
|
--button-bg-color:var(--color-blue-5);
|
|
1192
1114
|
--button-border-color:var(--color-blue-4);
|
|
1193
1115
|
--button-focus-ring-color:var(--color-blue-transparent);
|
|
1194
1116
|
}
|
|
1195
|
-
.button.primary.purple
|
|
1117
|
+
.button.primary.purple{
|
|
1196
1118
|
--button-bg-color:var(--color-purple-5);
|
|
1197
1119
|
--button-border-color:var(--color-purple-4);
|
|
1198
1120
|
--button-focus-ring-color:var(--color-purple-transparent);
|
|
1199
1121
|
}
|
|
1200
|
-
.button.primary.magenta
|
|
1122
|
+
.button.primary.magenta{
|
|
1201
1123
|
--button-bg-color:var(--color-magenta-5);
|
|
1202
1124
|
--button-border-color:var(--color-magenta-4);
|
|
1203
1125
|
--button-focus-ring-color:var(--color-magenta-transparent);
|
|
1204
1126
|
}
|
|
1205
|
-
.button.primary.gray
|
|
1127
|
+
.button.primary.gray{
|
|
1206
1128
|
--button-bg-color:var(--color-gray-5);
|
|
1207
1129
|
--button-border-color:var(--color-gray-4);
|
|
1208
1130
|
--button-focus-ring-color:var(--color-gray-transparent);
|
|
1209
1131
|
}
|
|
1210
|
-
.button:not(
|
|
1132
|
+
.button:not(.primary):not(.subtle):not(.close):not(.dismiss){
|
|
1211
1133
|
--button-fg-color:var(--color-body-text);
|
|
1212
1134
|
--button-bg-color:var(--color-gray-9);
|
|
1213
1135
|
--button-border-color:var(--color-gray-8);
|
|
1214
1136
|
--button-font-weight:var(--font-weight-normal);
|
|
1215
1137
|
--button-focus-ring-color:var(--color-gray-extra-transparent);
|
|
1216
1138
|
}
|
|
1217
|
-
.button.close
|
|
1139
|
+
.button.close,.button.subtle{
|
|
1218
1140
|
--button-fg-color:var(--color-brand-4);
|
|
1219
1141
|
--button-bg-color:transparent;
|
|
1220
1142
|
--button-border-color:transparent;
|
|
@@ -1223,131 +1145,63 @@ input:is(input).hover[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.
|
|
|
1223
1145
|
--button-focus-ring-color:transparent;
|
|
1224
1146
|
--button-shadow:none;
|
|
1225
1147
|
}
|
|
1226
|
-
button.subtle:
|
|
1227
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1228
|
-
--button-hover-bg-color:transparent;
|
|
1229
|
-
}
|
|
1230
|
-
button.subtle.focus:not(.does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1231
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1232
|
-
--button-hover-bg-color:transparent;
|
|
1233
|
-
}
|
|
1234
|
-
button.close:not(.does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1235
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1236
|
-
--button-hover-bg-color:transparent;
|
|
1237
|
-
}
|
|
1238
|
-
button.close.focus:not(.does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1148
|
+
.button.subtle:focus-visible{
|
|
1239
1149
|
--button-bg-color:var(--color-brand-transparent);
|
|
1240
1150
|
--button-hover-bg-color:transparent;
|
|
1241
1151
|
}
|
|
1242
|
-
.button.
|
|
1152
|
+
.button.close:focus-visible{
|
|
1243
1153
|
--button-bg-color:var(--color-brand-transparent);
|
|
1244
1154
|
--button-hover-bg-color:transparent;
|
|
1245
1155
|
}
|
|
1246
|
-
.button.
|
|
1156
|
+
.button.close.focus,.button.subtle.focus{
|
|
1247
1157
|
--button-bg-color:var(--color-brand-transparent);
|
|
1248
1158
|
--button-hover-bg-color:transparent;
|
|
1249
1159
|
}
|
|
1250
|
-
.button.close
|
|
1251
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1252
|
-
--button-hover-bg-color:transparent;
|
|
1253
|
-
}
|
|
1254
|
-
.button.close.focus:not(does-not-exist):not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1255
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1256
|
-
--button-hover-bg-color:transparent;
|
|
1257
|
-
}
|
|
1258
|
-
input.subtle[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1259
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1260
|
-
--button-hover-bg-color:transparent;
|
|
1261
|
-
}
|
|
1262
|
-
input.subtle.focus[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1263
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1264
|
-
--button-hover-bg-color:transparent;
|
|
1265
|
-
}
|
|
1266
|
-
input.close[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1267
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1268
|
-
--button-hover-bg-color:transparent;
|
|
1269
|
-
}
|
|
1270
|
-
input.close.focus[type=button]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1271
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1272
|
-
--button-hover-bg-color:transparent;
|
|
1273
|
-
}
|
|
1274
|
-
input.subtle[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1275
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1276
|
-
--button-hover-bg-color:transparent;
|
|
1277
|
-
}
|
|
1278
|
-
input.subtle.focus[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1279
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1280
|
-
--button-hover-bg-color:transparent;
|
|
1281
|
-
}
|
|
1282
|
-
input.close[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1283
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1284
|
-
--button-hover-bg-color:transparent;
|
|
1285
|
-
}
|
|
1286
|
-
input.close.focus[type=submit]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1287
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1288
|
-
--button-hover-bg-color:transparent;
|
|
1289
|
-
}
|
|
1290
|
-
input.subtle[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1291
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1292
|
-
--button-hover-bg-color:transparent;
|
|
1293
|
-
}
|
|
1294
|
-
input.subtle.focus[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1295
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1296
|
-
--button-hover-bg-color:transparent;
|
|
1297
|
-
}
|
|
1298
|
-
input.close[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action):focus-visible{
|
|
1299
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1300
|
-
--button-hover-bg-color:transparent;
|
|
1301
|
-
}
|
|
1302
|
-
input.close.focus[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.input-group .action){
|
|
1303
|
-
--button-bg-color:var(--color-brand-transparent);
|
|
1304
|
-
--button-hover-bg-color:transparent;
|
|
1305
|
-
}
|
|
1306
|
-
.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{
|
|
1307
1161
|
font-size:.8rem;
|
|
1308
1162
|
}
|
|
1309
|
-
.button.large
|
|
1163
|
+
.button.large{
|
|
1310
1164
|
font-size:1.2rem;
|
|
1311
1165
|
}
|
|
1312
|
-
.button.close
|
|
1166
|
+
.button.close,.button.dismiss,.button.icon{
|
|
1313
1167
|
aspect-ratio:1;
|
|
1314
1168
|
border-radius:var(--radius-full);
|
|
1315
1169
|
min-height:0;
|
|
1316
1170
|
min-width:0;
|
|
1317
1171
|
}
|
|
1318
|
-
.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{
|
|
1319
1173
|
height:75%;
|
|
1320
1174
|
width:75%;
|
|
1321
1175
|
}
|
|
1322
|
-
.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{
|
|
1323
1177
|
border-radius:100%;
|
|
1324
1178
|
height:100%;
|
|
1325
1179
|
width:100%;
|
|
1326
1180
|
}
|
|
1327
|
-
.button.close.icon
|
|
1181
|
+
.button.close.icon,.button.dismiss.icon,.button.icon.icon{
|
|
1328
1182
|
padding:.5em;
|
|
1329
1183
|
}
|
|
1330
|
-
.button.close.close
|
|
1184
|
+
.button.close.close,.button.close.dismiss,.button.dismiss.close,.button.dismiss.dismiss,.button.icon.close,.button.icon.dismiss{
|
|
1331
1185
|
padding:.3em;
|
|
1332
1186
|
}
|
|
1333
|
-
.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{
|
|
1334
1188
|
content:normal;
|
|
1335
1189
|
}
|
|
1336
|
-
.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{
|
|
1337
1191
|
background-color:var(--button-hover-bg-color);
|
|
1338
1192
|
}
|
|
1339
|
-
.button.disabled
|
|
1193
|
+
.button.disabled,.button:disabled,.button[aria-disabled=true]{
|
|
1340
1194
|
cursor:not-allowed;
|
|
1341
1195
|
opacity:.7;
|
|
1342
1196
|
transform:scale(1);
|
|
1343
1197
|
}
|
|
1344
|
-
.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{
|
|
1345
1199
|
opacity:0;
|
|
1346
1200
|
}
|
|
1347
|
-
.button.loading
|
|
1201
|
+
.button.loading{
|
|
1348
1202
|
cursor:wait;
|
|
1349
1203
|
}
|
|
1350
|
-
.button.loading:
|
|
1204
|
+
.button.loading:before{
|
|
1351
1205
|
animation:button-loading-bg 1.2s ease-in-out infinite forwards;
|
|
1352
1206
|
border-radius:inherit !important;
|
|
1353
1207
|
height:100% !important;
|
|
@@ -1570,7 +1424,7 @@ input.close.focus[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.inpu
|
|
|
1570
1424
|
--chip-bg-color-active:var(--color-gray-3);
|
|
1571
1425
|
}
|
|
1572
1426
|
}
|
|
1573
|
-
.chip .
|
|
1427
|
+
.chip .delete{
|
|
1574
1428
|
background-color:rgba(0,0,0,.133);
|
|
1575
1429
|
border:var(--border-s) solid var(--chip-border-color);
|
|
1576
1430
|
border-radius:var(--radius-full);
|
|
@@ -1593,7 +1447,7 @@ input.close.focus[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.inpu
|
|
|
1593
1447
|
user-select:none;
|
|
1594
1448
|
width:2em;
|
|
1595
1449
|
}
|
|
1596
|
-
.chip .
|
|
1450
|
+
.chip .delete:after{
|
|
1597
1451
|
background-color:var(--chip-fg-color);
|
|
1598
1452
|
content:"";
|
|
1599
1453
|
height:1.7em;
|
|
@@ -1608,25 +1462,19 @@ input.close.focus[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.inpu
|
|
|
1608
1462
|
mask-size:contain;
|
|
1609
1463
|
width:1.7em;
|
|
1610
1464
|
}
|
|
1611
|
-
.chip
|
|
1465
|
+
.chip .delete:focus-visible{
|
|
1612
1466
|
border-color:var(--chip-fg-color);
|
|
1613
1467
|
}
|
|
1614
|
-
.chip .
|
|
1468
|
+
.chip .delete.focus{
|
|
1615
1469
|
border-color:var(--chip-fg-color);
|
|
1616
1470
|
}
|
|
1617
|
-
.chip .
|
|
1618
|
-
border-color:var(--chip-fg-color);
|
|
1619
|
-
}
|
|
1620
|
-
.chip button.delete:not(.does-not-exist):focus-visible{
|
|
1621
|
-
background-color:rgba(0,0,0,.067);
|
|
1622
|
-
}
|
|
1623
|
-
.chip .button.delete:focus-visible{
|
|
1471
|
+
.chip .delete:focus-visible{
|
|
1624
1472
|
background-color:rgba(0,0,0,.067);
|
|
1625
1473
|
}
|
|
1626
|
-
.chip .
|
|
1474
|
+
.chip .delete.focus,.chip .delete.hover,.chip .delete:hover{
|
|
1627
1475
|
background-color:rgba(0,0,0,.067);
|
|
1628
1476
|
}
|
|
1629
|
-
.chip .
|
|
1477
|
+
.chip .delete.active,.chip .delete:active{
|
|
1630
1478
|
background-color:rgba(0,0,0,.2);
|
|
1631
1479
|
}
|
|
1632
1480
|
|
|
@@ -1789,38 +1637,44 @@ input.close.focus[type=reset]:not(.chip):not(.card):not(.chip .delete):not(.inpu
|
|
|
1789
1637
|
font-style:italic;
|
|
1790
1638
|
}
|
|
1791
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
|
+
|
|
1792
1647
|
.mark,mark{
|
|
1793
|
-
background-color:var(--color-yellow-
|
|
1794
|
-
|
|
1795
|
-
color:#000;
|
|
1796
|
-
padding:.1em .25em;
|
|
1648
|
+
background-color:var(--color-yellow-8);
|
|
1649
|
+
color:var(--color-yellow-2);
|
|
1797
1650
|
-webkit-print-color-adjust:exact;
|
|
1798
1651
|
print-color-adjust:exact;
|
|
1799
1652
|
}
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
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;
|
|
1804
1664
|
}
|
|
1805
1665
|
|
|
1806
1666
|
.del,del{
|
|
1807
1667
|
background-color:var(--color-red-8);
|
|
1808
|
-
color:var(--color-red-
|
|
1809
|
-
text-decoration-color:var(--color-
|
|
1668
|
+
color:var(--color-red-2);
|
|
1669
|
+
text-decoration-color:var(--color-red-4);
|
|
1810
1670
|
text-decoration-line:line-through;
|
|
1811
1671
|
-webkit-text-decoration-skip-ink:none;
|
|
1812
1672
|
text-decoration-skip-ink:none;
|
|
1813
|
-
text-decoration-thickness:var(--border-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
.del,.ins,del,ins{
|
|
1817
|
-
border-radius:1px;
|
|
1673
|
+
text-decoration-thickness:var(--border-m);
|
|
1674
|
+
transition:text-decoration-color .15s ease;
|
|
1818
1675
|
}
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
background-color:var(--color-green-8);
|
|
1822
|
-
color:var(--color-green-1);
|
|
1823
|
-
text-decoration-line:none;
|
|
1676
|
+
.del:hover,del:hover{
|
|
1677
|
+
text-decoration-color:transparent;
|
|
1824
1678
|
}
|
|
1825
1679
|
|
|
1826
1680
|
.abbr[title],abbr[title]:not(.does-not-exist){
|
|
@@ -1972,6 +1826,7 @@ details[open] summary:before{
|
|
|
1972
1826
|
rotate:0deg;
|
|
1973
1827
|
}
|
|
1974
1828
|
.accordion.subtle>details,details.subtle{
|
|
1829
|
+
background-color:transparent;
|
|
1975
1830
|
border:0;
|
|
1976
1831
|
box-shadow:none;
|
|
1977
1832
|
padding-left:var(--space-2xs);
|
|
@@ -2158,12 +2013,12 @@ dialog:not(.drawer).large{
|
|
|
2158
2013
|
font-weight:inherit;
|
|
2159
2014
|
margin:0;
|
|
2160
2015
|
}
|
|
2161
|
-
.dialog-header .button.close
|
|
2016
|
+
.dialog-header .button.close{
|
|
2162
2017
|
color:inherit;
|
|
2163
2018
|
margin:-.5rem;
|
|
2164
2019
|
margin-left:var(--space-3xs);
|
|
2165
2020
|
}
|
|
2166
|
-
.dialog-header .button.close:after
|
|
2021
|
+
.dialog-header .button.close:after{
|
|
2167
2022
|
background-color:currentcolor;
|
|
2168
2023
|
content:"";
|
|
2169
2024
|
height:1.8em;
|
|
@@ -2191,7 +2046,7 @@ dialog:not(.drawer).large{
|
|
|
2191
2046
|
display:flex;
|
|
2192
2047
|
flex-shrink:0;
|
|
2193
2048
|
gap:var(--space-2xs);
|
|
2194
|
-
justify-content:flex-
|
|
2049
|
+
justify-content:flex-start;
|
|
2195
2050
|
margin:0;
|
|
2196
2051
|
padding:var(--space-xs);
|
|
2197
2052
|
}
|
|
@@ -2202,7 +2057,7 @@ dialog:not(.drawer).large{
|
|
|
2202
2057
|
width:100%;
|
|
2203
2058
|
}
|
|
2204
2059
|
}
|
|
2205
|
-
.dialog-footer .button:not(
|
|
2060
|
+
.dialog-footer .button:not(.small):not(.medium):not(.large){
|
|
2206
2061
|
font-size:.9rem;
|
|
2207
2062
|
}
|
|
2208
2063
|
|
|
@@ -2214,7 +2069,7 @@ dialog:not(.drawer).large{
|
|
|
2214
2069
|
}
|
|
2215
2070
|
.field{
|
|
2216
2071
|
--field-gap:var(--space-2xs);
|
|
2217
|
-
--field-padding:
|
|
2072
|
+
--field-padding:0.5em;
|
|
2218
2073
|
--field-radius:var(--radius-m);
|
|
2219
2074
|
color:var(--color-body-text);
|
|
2220
2075
|
display:inline-flex;
|
|
@@ -2229,7 +2084,7 @@ dialog:not(.drawer).large{
|
|
|
2229
2084
|
}
|
|
2230
2085
|
.field.compact,.form.compact .field,fieldset.compact:not(.does-not-exist) .field,form.compact:not(.does-not-exist) .field{
|
|
2231
2086
|
--field-gap:calc(var(--space-2xs)*0.9);
|
|
2232
|
-
--field-padding:
|
|
2087
|
+
--field-padding:0.33em;
|
|
2233
2088
|
--field-radius:var(--radius-s);
|
|
2234
2089
|
font-size:calc(var(--font-size-m)*.9);
|
|
2235
2090
|
}
|
|
@@ -2399,7 +2254,7 @@ dialog:not(.drawer).large{
|
|
|
2399
2254
|
font-size:.9em;
|
|
2400
2255
|
font-weight:var(--font-weight-normal);
|
|
2401
2256
|
justify-content:center;
|
|
2402
|
-
padding:var(--
|
|
2257
|
+
padding:var(--field-padding) calc(var(--field-padding)*2);
|
|
2403
2258
|
}
|
|
2404
2259
|
.field .input-group>.action img,.field .input-group>.action svg,.field .input-group>.prefix img,.field .input-group>.prefix svg,.field .input-group>.suffix img,.field .input-group>.suffix svg{
|
|
2405
2260
|
height:1.15em;
|
|
@@ -2446,12 +2301,15 @@ dialog:not(.drawer).large{
|
|
|
2446
2301
|
}
|
|
2447
2302
|
|
|
2448
2303
|
fieldset{
|
|
2304
|
+
background-color:var(--color-body);
|
|
2449
2305
|
border:var(--border-s) solid var(--color-outline);
|
|
2450
|
-
border-radius:var(--radius-
|
|
2306
|
+
border-radius:var(--radius-s);
|
|
2307
|
+
color:var(--color-body-text);
|
|
2451
2308
|
}
|
|
2452
2309
|
fieldset legend{
|
|
2453
|
-
color:var(--color-
|
|
2454
|
-
font-
|
|
2310
|
+
color:var(--color-brand-3);
|
|
2311
|
+
font-family:var(--font-family-heading);
|
|
2312
|
+
font-weight:var(--font-weight-bold);
|
|
2455
2313
|
}
|
|
2456
2314
|
|
|
2457
2315
|
input[type=checkbox],input[type=radio]{
|
|
@@ -2498,10 +2356,10 @@ meter{
|
|
|
2498
2356
|
|
|
2499
2357
|
@supports selector(::-moz-meter-bar){
|
|
2500
2358
|
meter{
|
|
2501
|
-
background:var(--color-gray-
|
|
2359
|
+
background:var(--color-gray-9);
|
|
2502
2360
|
border:0;
|
|
2503
2361
|
border-radius:var(--radius-s);
|
|
2504
|
-
box-shadow:inset 0 0 0 var(--border-s) var(--color-
|
|
2362
|
+
box-shadow:inset 0 0 0 var(--border-s) var(--color-outline);
|
|
2505
2363
|
box-sizing:border-box;
|
|
2506
2364
|
display:block;
|
|
2507
2365
|
height:1em;
|
|
@@ -2510,10 +2368,10 @@ meter{
|
|
|
2510
2368
|
}
|
|
2511
2369
|
}
|
|
2512
2370
|
::-webkit-meter-bar{
|
|
2513
|
-
background:var(--color-gray-
|
|
2371
|
+
background:var(--color-gray-9);
|
|
2514
2372
|
border:0;
|
|
2515
2373
|
border-radius:var(--radius-s);
|
|
2516
|
-
box-shadow:inset 0 0 0 var(--border-s) var(--color-
|
|
2374
|
+
box-shadow:inset 0 0 0 var(--border-s) var(--color-outline);
|
|
2517
2375
|
box-sizing:border-box;
|
|
2518
2376
|
display:block;
|
|
2519
2377
|
height:1em;
|
|
@@ -2590,10 +2448,10 @@ progress{
|
|
|
2590
2448
|
|
|
2591
2449
|
@supports selector(::-moz-progress-bar){
|
|
2592
2450
|
progress{
|
|
2593
|
-
background:var(--color-gray-
|
|
2451
|
+
background:var(--color-gray-9);
|
|
2594
2452
|
border:0;
|
|
2595
2453
|
border-radius:var(--radius-s);
|
|
2596
|
-
box-shadow:inset 0 0 0 var(--border-s) var(--color-
|
|
2454
|
+
box-shadow:inset 0 0 0 var(--border-s) var(--color-outline);
|
|
2597
2455
|
box-sizing:border-box;
|
|
2598
2456
|
display:block;
|
|
2599
2457
|
height:1em;
|
|
@@ -2602,10 +2460,10 @@ progress{
|
|
|
2602
2460
|
}
|
|
2603
2461
|
}
|
|
2604
2462
|
::-webkit-progress-bar{
|
|
2605
|
-
background:var(--color-gray-
|
|
2463
|
+
background:var(--color-gray-9);
|
|
2606
2464
|
border:0;
|
|
2607
2465
|
border-radius:var(--radius-s);
|
|
2608
|
-
box-shadow:inset 0 0 0 var(--border-s) var(--color-
|
|
2466
|
+
box-shadow:inset 0 0 0 var(--border-s) var(--color-outline);
|
|
2609
2467
|
box-sizing:border-box;
|
|
2610
2468
|
display:block;
|
|
2611
2469
|
height:1em;
|
|
@@ -2780,7 +2638,7 @@ input[type=range]::-moz-range-thumb{
|
|
|
2780
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{
|
|
2781
2639
|
content:".";
|
|
2782
2640
|
}
|
|
2783
|
-
.skeleton.button:empty,.skeleton.chip:empty
|
|
2641
|
+
.skeleton.button:empty,.skeleton.chip:empty{
|
|
2784
2642
|
min-width:5em;
|
|
2785
2643
|
}
|
|
2786
2644
|
.skeleton:after,.skeleton:before,.skeleton>*{
|