@anyblades/blades 3.1.0-beta.4 → 3.1.0-beta.6
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/.prettierrc.json +0 -7
- package/README.md +20 -10
- package/_includes/.prettierrc.json +12 -0
- package/_includes/package.json +10 -0
- package/css/blades.css +942 -1805
- package/css/blades.min.css +11 -1
- package/css/blades.ninja.css +1124 -2265
- package/css/blades.ninja.min.css +16 -1
- package/css/float-label.css +34 -187
- package/css/float-label.min.css +1 -1
- package/css/layered/blades.layered.css +942 -1805
- package/css/layered/blades.layered.min.css +11 -1
- package/css/layered/compact.css +10 -31
- package/css/layered/components/accordion.css +32 -21
- package/css/layered/components/card.css +8 -16
- package/css/layered/components/dropdown-popover.css +92 -0
- package/css/layered/components/dropdown.css +61 -61
- package/css/layered/components/group.css +40 -156
- package/css/layered/components/loading.css +28 -35
- package/css/layered/components/modal-modern.css +20 -0
- package/css/layered/components/modal.css +54 -65
- package/css/layered/components/nav.css +36 -36
- package/css/layered/components/progress.css +18 -23
- package/css/layered/components/timeline.css +10 -0
- package/css/layered/components/tooltip.css +88 -103
- package/css/layered/components.css +371 -517
- package/css/layered/content/button.css +37 -117
- package/css/layered/content/code-block.css +20 -0
- package/css/layered/content/code.css +11 -26
- package/css/layered/content/embedded-content.css +5 -10
- package/css/layered/content/figure.css +3 -5
- package/css/layered/content/icon.css +33 -0
- package/css/layered/content/link.css +18 -40
- package/css/layered/content/misc.css +1 -5
- package/css/layered/content/table.css +4 -10
- package/css/layered/content/typography.css +22 -41
- package/css/layered/content.css +102 -254
- package/css/layered/forms/basics.css +64 -142
- package/css/layered/forms/checkbox-radio-switch.css +46 -75
- package/css/layered/forms/float-label/core.css +31 -0
- package/css/layered/forms/float-label/theme.css +28 -0
- package/css/layered/forms/float-label.css +57 -0
- package/css/layered/forms/input-color.css +5 -5
- package/css/layered/forms/input-datetime.css +9 -26
- package/css/layered/forms/input-file.css +7 -8
- package/css/layered/forms/input-range.css +43 -50
- package/css/layered/forms/input-search.css +16 -47
- package/css/layered/forms.css +197 -355
- package/css/layered/layout/columns.css +10 -0
- package/css/layered/layout/container.css +13 -13
- package/css/layered/layout/document.css +4 -12
- package/css/layered/layout/grid.css +6 -8
- package/css/layered/layout/landmarks.css +1 -7
- package/css/layered/layout/overflow-auto.css +0 -3
- package/css/layered/layout/section.css +0 -3
- package/css/layered/layout.css +26 -39
- package/css/layered/utilities.css +6 -15
- package/css/layered/variables-blades.css +11 -0
- package/css/layered/variables.css +77 -181
- package/css/pico.conditional.css +785 -1368
- package/css/pico.conditional.min.css +1 -1
- package/css/pico.css +785 -1368
- package/css/pico.min.css +1 -1
- package/package.json +13 -26
- package/src/blades/_index.css +9 -9
- package/src/blades/{_dropdown-popover.css → components/_dropdown-popover.css} +3 -3
- package/src/blades/forms/float-label/_index.css +2 -0
- package/src/blades.css +2 -2
- package/src/blades.ninja.css +3 -3
- package/src/float-label.css +1 -1
- package/src/ninja/_index.css +7 -8
- package/src/pico/_index.css +6 -6
- package/src/pico/components/_index.css +9 -9
- package/src/pico/content/_index.css +8 -8
- package/src/pico/forms/_index.css +7 -7
- package/src/pico/layout/_index.css +5 -5
- package/src/pico.css +2 -2
- package/_includes/blades/links.liquid +0 -21
- package/_includes/blades/links.njk +0 -9
- package/_includes/blades/links.twig +0 -18
- package/src/blades/float-label/_index.css +0 -2
- package/src/ninja/_page-anchors.css +0 -10
- /package/src/blades/{_variables.css → _variables-blades.css} +0 -0
- /package/src/blades/{_modal.css → components/_modal-modern.css} +0 -0
- /package/src/blades/{_timeline.css → components/_timeline.css} +0 -0
- /package/src/blades/{_code.css → content/_code-block.css} +0 -0
- /package/src/blades/{_icon.css → content/_icon.css} +0 -0
- /package/src/blades/{float-label → forms/float-label}/_core.css +0 -0
- /package/src/blades/{float-label → forms/float-label}/_theme.css +0 -0
- /package/src/blades/{_columns.css → layout/_columns.css} +0 -0
package/css/pico.conditional.css
CHANGED
|
@@ -4,90 +4,75 @@
|
|
|
4
4
|
* Copyright 2019-2025 (https://picocss.com)
|
|
5
5
|
* Copyright 2026 (https://blades.ninja/css/pico/)
|
|
6
6
|
* Licensed under MIT
|
|
7
|
-
*//**
|
|
8
|
-
* Variables
|
|
9
7
|
*/
|
|
10
|
-
:scope,
|
|
11
|
-
:
|
|
12
|
-
--pico-font-family-
|
|
13
|
-
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
14
|
-
--pico-font-family-sans-serif:
|
|
15
|
-
system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue",
|
|
8
|
+
:scope, :host {
|
|
9
|
+
--pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
10
|
+
--pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue",
|
|
16
11
|
sans-serif, var(--pico-font-family-emoji);
|
|
17
|
-
--pico-font-family-monospace:
|
|
18
|
-
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace,
|
|
12
|
+
--pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace,
|
|
19
13
|
var(--pico-font-family-emoji);
|
|
20
14
|
--pico-font-family: var(--pico-font-family-sans-serif);
|
|
21
15
|
--pico-line-height: 1.5;
|
|
22
16
|
--pico-font-weight: 400;
|
|
23
17
|
--pico-font-size: 100%;
|
|
24
|
-
--pico-text-underline-offset:
|
|
25
|
-
--pico-border-radius:
|
|
26
|
-
--pico-border-width:
|
|
27
|
-
--pico-outline-width:
|
|
28
|
-
--pico-transition:
|
|
18
|
+
--pico-text-underline-offset: .1rem;
|
|
19
|
+
--pico-border-radius: .25rem;
|
|
20
|
+
--pico-border-width: .0625rem;
|
|
21
|
+
--pico-outline-width: .125rem;
|
|
22
|
+
--pico-transition: .2s ease-in-out;
|
|
29
23
|
--pico-spacing: 1rem;
|
|
30
24
|
--pico-typography-spacing-vertical: 1rem;
|
|
31
25
|
--pico-block-spacing-vertical: var(--pico-spacing);
|
|
32
26
|
--pico-block-spacing-horizontal: var(--pico-spacing);
|
|
33
27
|
--pico-grid-column-gap: var(--pico-spacing);
|
|
34
28
|
--pico-grid-row-gap: var(--pico-spacing);
|
|
35
|
-
--pico-form-element-spacing-vertical:
|
|
29
|
+
--pico-form-element-spacing-vertical: .75rem;
|
|
36
30
|
--pico-form-element-spacing-horizontal: 1rem;
|
|
37
31
|
--pico-nav-element-spacing-vertical: 1rem;
|
|
38
|
-
--pico-nav-link-spacing-vertical:
|
|
39
|
-
--pico-nav-link-spacing-horizontal:
|
|
32
|
+
--pico-nav-link-spacing-vertical: .5rem;
|
|
33
|
+
--pico-nav-link-spacing-horizontal: .5rem;
|
|
40
34
|
--pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
41
35
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
:host {
|
|
36
|
+
|
|
37
|
+
@media (width >= 576px) {
|
|
38
|
+
:scope, :host {
|
|
45
39
|
--pico-font-size: 106.25%;
|
|
46
40
|
}
|
|
47
41
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
:host {
|
|
42
|
+
|
|
43
|
+
@media (width >= 768px) {
|
|
44
|
+
:scope, :host {
|
|
51
45
|
--pico-font-size: 112.5%;
|
|
52
46
|
}
|
|
53
47
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
:host {
|
|
48
|
+
|
|
49
|
+
@media (width >= 1024px) {
|
|
50
|
+
:scope, :host {
|
|
57
51
|
--pico-font-size: 118.75%;
|
|
58
52
|
}
|
|
59
53
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
:host {
|
|
54
|
+
|
|
55
|
+
@media (width >= 1280px) {
|
|
56
|
+
:scope, :host {
|
|
63
57
|
--pico-font-size: 125%;
|
|
64
58
|
}
|
|
65
59
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
:host {
|
|
60
|
+
|
|
61
|
+
@media (width >= 1536px) {
|
|
62
|
+
:scope, :host {
|
|
69
63
|
--pico-font-size: 131.25%;
|
|
70
64
|
}
|
|
71
65
|
}
|
|
72
66
|
|
|
73
|
-
a {
|
|
74
|
-
--pico-text-decoration: underline;
|
|
75
|
-
}
|
|
76
|
-
a.secondary,
|
|
77
|
-
a.contrast {
|
|
67
|
+
a, a.secondary, a.contrast {
|
|
78
68
|
--pico-text-decoration: underline;
|
|
79
69
|
}
|
|
80
70
|
|
|
81
71
|
small {
|
|
82
|
-
--pico-font-size:
|
|
72
|
+
--pico-font-size: .875em;
|
|
83
73
|
}
|
|
84
74
|
|
|
85
|
-
h1,
|
|
86
|
-
h2,
|
|
87
|
-
h3,
|
|
88
|
-
h4,
|
|
89
|
-
h5,
|
|
90
|
-
h6 {
|
|
75
|
+
h1, h2, h3, h4, h5, h6 {
|
|
91
76
|
--pico-font-weight: 700;
|
|
92
77
|
}
|
|
93
78
|
|
|
@@ -127,18 +112,12 @@ h6 {
|
|
|
127
112
|
--pico-typography-spacing-top: 1.5rem;
|
|
128
113
|
}
|
|
129
114
|
|
|
130
|
-
thead th,
|
|
131
|
-
thead td,
|
|
132
|
-
tfoot th,
|
|
133
|
-
tfoot td {
|
|
115
|
+
thead th, thead td, tfoot th, tfoot td {
|
|
134
116
|
--pico-font-weight: 600;
|
|
135
|
-
--pico-border-width:
|
|
117
|
+
--pico-border-width: .1875rem;
|
|
136
118
|
}
|
|
137
119
|
|
|
138
|
-
pre,
|
|
139
|
-
code,
|
|
140
|
-
kbd,
|
|
141
|
-
samp {
|
|
120
|
+
pre, code, kbd, samp {
|
|
142
121
|
--pico-font-family: var(--pico-font-family-monospace);
|
|
143
122
|
}
|
|
144
123
|
|
|
@@ -146,246 +125,156 @@ kbd {
|
|
|
146
125
|
--pico-font-weight: bolder;
|
|
147
126
|
}
|
|
148
127
|
|
|
149
|
-
input:not(
|
|
150
|
-
|
|
151
|
-
[type="button"],
|
|
152
|
-
[type="reset"],
|
|
153
|
-
[type="checkbox"],
|
|
154
|
-
[type="radio"],
|
|
155
|
-
[type="file"]
|
|
156
|
-
),
|
|
157
|
-
:where(select, textarea) {
|
|
158
|
-
--pico-outline-width: 0.0625rem;
|
|
128
|
+
input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :where(select, textarea) {
|
|
129
|
+
--pico-outline-width: .0625rem;
|
|
159
130
|
}
|
|
160
131
|
|
|
161
132
|
[type="search"] {
|
|
162
133
|
--pico-border-radius: 5rem;
|
|
163
134
|
}
|
|
164
135
|
|
|
165
|
-
[type="checkbox"],
|
|
166
|
-
|
|
167
|
-
--pico-border-width: 0.125rem;
|
|
136
|
+
[type="checkbox"], [type="radio"] {
|
|
137
|
+
--pico-border-width: .125rem;
|
|
168
138
|
}
|
|
169
139
|
|
|
170
140
|
[type="checkbox"][role="switch"] {
|
|
171
|
-
--pico-border-width:
|
|
141
|
+
--pico-border-width: .1875rem;
|
|
172
142
|
}
|
|
173
143
|
|
|
174
144
|
details.dropdown summary:not([role="button"]) {
|
|
175
|
-
--pico-outline-width:
|
|
145
|
+
--pico-outline-width: .0625rem;
|
|
176
146
|
}
|
|
177
147
|
|
|
178
148
|
nav details.dropdown summary:focus-visible {
|
|
179
|
-
--pico-outline-width:
|
|
149
|
+
--pico-outline-width: .125rem;
|
|
180
150
|
}
|
|
181
151
|
|
|
182
152
|
[role="search"] {
|
|
183
153
|
--pico-border-radius: 5rem;
|
|
184
154
|
}
|
|
185
155
|
|
|
186
|
-
[role="search"] button,
|
|
187
|
-
[role="search"] [type="submit"],
|
|
188
|
-
[role="search"] [type="button"],
|
|
189
|
-
[role="search"] [role="button"],
|
|
190
|
-
[role="group"] button,
|
|
191
|
-
[role="group"] [type="submit"],
|
|
192
|
-
[role="group"] [type="button"],
|
|
193
|
-
[role="group"] [role="button"] {
|
|
156
|
+
[role="search"] button, [role="search"] [type="submit"], [role="search"] [type="button"], [role="search"] [role="button"], [role="group"] button, [role="group"] [type="submit"], [role="group"] [type="button"], [role="group"] [role="button"] {
|
|
194
157
|
--pico-form-element-spacing-horizontal: 2rem;
|
|
195
158
|
}
|
|
196
159
|
|
|
197
|
-
details summary[role="button"]:not(.outline)
|
|
198
|
-
filter: brightness(0) invert(
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
[aria-busy="true"]:not(input, select, textarea):is(
|
|
202
|
-
button,
|
|
203
|
-
[type="submit"],
|
|
204
|
-
[type="button"],
|
|
205
|
-
[type="reset"],
|
|
206
|
-
[role="button"]
|
|
207
|
-
):not(.outline)::before {
|
|
208
|
-
filter: brightness(0) invert(1);
|
|
160
|
+
details summary[role="button"]:not(.outline):after, [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
|
|
161
|
+
filter: brightness(0) invert();
|
|
209
162
|
}
|
|
210
163
|
|
|
211
|
-
|
|
212
|
-
* Color schemes
|
|
213
|
-
* One palette for both schemes: light-dark() picks the value from the used color-scheme,
|
|
214
|
-
* so the dark scheme only has to switch color-scheme (same selectors as before).
|
|
215
|
-
*/
|
|
216
|
-
:scope,
|
|
217
|
-
:host,
|
|
218
|
-
[data-theme="light"],
|
|
219
|
-
[data-theme="dark"] {
|
|
164
|
+
:scope, :host, [data-theme="light"], [data-theme="dark"] {
|
|
220
165
|
color-scheme: light;
|
|
221
|
-
--pico-background-color: light-dark(#fff,
|
|
166
|
+
--pico-background-color: light-dark(#fff, #13171f);
|
|
222
167
|
--pico-color: light-dark(#373c44, #c2c7d0);
|
|
223
|
-
--pico-text-selection-color: light-dark(
|
|
168
|
+
--pico-text-selection-color: light-dark(#029ae840, #01aaff30);
|
|
224
169
|
--pico-muted-color: light-dark(#646b79, #7b8495);
|
|
225
|
-
--pico-muted-border-color: light-dark(
|
|
170
|
+
--pico-muted-border-color: light-dark(#e7eaf0, #202632);
|
|
226
171
|
--pico-primary: light-dark(#0172ad, #01aaff);
|
|
227
172
|
--pico-primary-background: #0172ad;
|
|
228
173
|
--pico-primary-border: var(--pico-primary-background);
|
|
229
|
-
--pico-primary-underline: light-dark(
|
|
174
|
+
--pico-primary-underline: light-dark(#0172ad80, #01aaff80);
|
|
230
175
|
--pico-primary-hover: light-dark(#015887, #79c0ff);
|
|
231
176
|
--pico-primary-hover-background: light-dark(#02659a, #017fc0);
|
|
232
177
|
--pico-primary-hover-border: var(--pico-primary-hover-background);
|
|
233
178
|
--pico-primary-hover-underline: var(--pico-primary-hover);
|
|
234
|
-
|
|
235
|
-
--pico-primary-focus: light-dark(rgb(2, 138, 212), rgb(1, 170, 255));
|
|
179
|
+
--pico-primary-focus: light-dark(#028ad4, #01aaff);
|
|
236
180
|
--pico-primary-inverse: #fff;
|
|
237
181
|
--pico-secondary: light-dark(#5d6b89, #969eaf);
|
|
238
182
|
--pico-secondary-background: #525f7a;
|
|
239
183
|
--pico-secondary-border: var(--pico-secondary-background);
|
|
240
|
-
--pico-secondary-underline: light-dark(
|
|
184
|
+
--pico-secondary-underline: light-dark(#5d6b8980, #969eaf80);
|
|
241
185
|
--pico-secondary-hover: light-dark(#48536b, #b3b9c5);
|
|
242
186
|
--pico-secondary-hover-background: light-dark(#48536b, #5d6b89);
|
|
243
187
|
--pico-secondary-hover-border: var(--pico-secondary-hover-background);
|
|
244
188
|
--pico-secondary-hover-underline: var(--pico-secondary-hover);
|
|
245
|
-
--pico-secondary-focus: light-dark(
|
|
189
|
+
--pico-secondary-focus: light-dark(#5d6b89, #909ebe);
|
|
246
190
|
--pico-secondary-inverse: #fff;
|
|
247
191
|
--pico-contrast: light-dark(#181c25, #dfe3eb);
|
|
248
192
|
--pico-contrast-background: light-dark(#181c25, #eff1f4);
|
|
249
193
|
--pico-contrast-border: var(--pico-contrast-background);
|
|
250
|
-
--pico-contrast-underline: light-dark(
|
|
194
|
+
--pico-contrast-underline: light-dark(#181c2580, #dfe3eb80);
|
|
251
195
|
--pico-contrast-hover: light-dark(#000, #fff);
|
|
252
196
|
--pico-contrast-hover-background: light-dark(#000, #fff);
|
|
253
197
|
--pico-contrast-hover-border: var(--pico-contrast-hover-background);
|
|
254
|
-
--pico-contrast-hover-underline: light-dark(
|
|
255
|
-
|
|
256
|
-
var(--pico-contrast-hover)
|
|
257
|
-
);
|
|
258
|
-
--pico-contrast-focus: light-dark(rgb(93, 107, 137), rgb(207, 213, 226));
|
|
198
|
+
--pico-contrast-hover-underline: light-dark(var(--pico-secondary-hover), var(--pico-contrast-hover));
|
|
199
|
+
--pico-contrast-focus: light-dark(#5d6b89, #cfd5e2);
|
|
259
200
|
--pico-contrast-inverse: light-dark(#fff, #000);
|
|
260
|
-
--pico-box-shadow: 0
|
|
201
|
+
--pico-box-shadow: 0 .5rem 2.5rem light-dark(#8191b533, #07090c33);
|
|
261
202
|
--pico-h1-color: light-dark(#2d3138, #f0f1f3);
|
|
262
203
|
--pico-h2-color: light-dark(#373c44, #e0e3e7);
|
|
263
204
|
--pico-h3-color: light-dark(#424751, #c2c7d0);
|
|
264
205
|
--pico-h4-color: light-dark(#4d535e, #b3b9c5);
|
|
265
206
|
--pico-h5-color: light-dark(#5c6370, #a4acba);
|
|
266
207
|
--pico-h6-color: light-dark(#646b79, #8891a4);
|
|
267
|
-
--pico-mark-background-color: light-dark(
|
|
208
|
+
--pico-mark-background-color: light-dark(#fde7c0, #014063);
|
|
268
209
|
--pico-mark-color: light-dark(#0f1114, #fff);
|
|
269
|
-
--pico-ins-color: light-dark(
|
|
270
|
-
--pico-del-color: light-dark(
|
|
210
|
+
--pico-ins-color: light-dark(#1d6a54, #62af9a);
|
|
211
|
+
--pico-del-color: light-dark(#883935, #ce7e7b);
|
|
271
212
|
--pico-blockquote-border-color: var(--pico-muted-border-color);
|
|
272
213
|
--pico-blockquote-footer-color: var(--pico-muted-color);
|
|
273
|
-
--pico-button-box-shadow: 0 0 0
|
|
274
|
-
--pico-button-hover-box-shadow: 0 0 0
|
|
214
|
+
--pico-button-box-shadow: 0 0 0 #0000;
|
|
215
|
+
--pico-button-hover-box-shadow: 0 0 0 #0000;
|
|
275
216
|
--pico-table-border-color: var(--pico-muted-border-color);
|
|
276
|
-
--pico-table-row-stripped-background-color:
|
|
277
|
-
--pico-code-background-color: light-dark(
|
|
217
|
+
--pico-table-row-stripped-background-color: #6f78870a;
|
|
218
|
+
--pico-code-background-color: light-dark(#f3f5f7, #1a1f28);
|
|
278
219
|
--pico-code-color: light-dark(#646b79, #8891a4);
|
|
279
220
|
--pico-code-kbd-background-color: var(--pico-color);
|
|
280
221
|
--pico-code-kbd-color: var(--pico-background-color);
|
|
281
|
-
--pico-form-element-background-color: light-dark(
|
|
222
|
+
--pico-form-element-background-color: light-dark(#fbfcfc, #1c212c);
|
|
282
223
|
--pico-form-element-selected-background-color: light-dark(#dfe3eb, #2a3140);
|
|
283
224
|
--pico-form-element-border-color: light-dark(#cfd5e2, #2a3140);
|
|
284
225
|
--pico-form-element-color: light-dark(#23262c, #e0e3e7);
|
|
285
226
|
--pico-form-element-placeholder-color: light-dark(var(--pico-muted-color), #8891a4);
|
|
286
|
-
--pico-form-element-active-background-color: light-dark(#fff,
|
|
227
|
+
--pico-form-element-active-background-color: light-dark(#fff, #1a1f28);
|
|
287
228
|
--pico-form-element-active-border-color: var(--pico-primary-border);
|
|
288
229
|
--pico-form-element-focus-color: var(--pico-primary-border);
|
|
289
|
-
--pico-form-element-disabled-opacity:
|
|
290
|
-
--pico-form-element-invalid-border-color: light-dark(
|
|
291
|
-
|
|
292
|
-
rgb(200.25, 79.25, 72.25)
|
|
293
|
-
);
|
|
294
|
-
--pico-form-element-invalid-active-border-color: light-dark(
|
|
295
|
-
rgb(200.25, 79.25, 72.25),
|
|
296
|
-
rgb(214, 92, 86)
|
|
297
|
-
);
|
|
230
|
+
--pico-form-element-disabled-opacity: .5;
|
|
231
|
+
--pico-form-element-invalid-border-color: light-dark(#b86a6b, #c84f48);
|
|
232
|
+
--pico-form-element-invalid-active-border-color: light-dark(#c84f48, #d65c56);
|
|
298
233
|
--pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
|
|
299
|
-
--pico-form-element-valid-border-color: light-dark(
|
|
300
|
-
--pico-form-element-valid-active-border-color: light-dark(
|
|
301
|
-
rgb(39, 152.75, 118.75),
|
|
302
|
-
rgb(22, 137, 105.5)
|
|
303
|
-
);
|
|
234
|
+
--pico-form-element-valid-border-color: light-dark(#4c9b8a, #2a7b6f);
|
|
235
|
+
--pico-form-element-valid-active-border-color: light-dark(#279977, #16896a);
|
|
304
236
|
--pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
|
|
305
|
-
/* One stroke color for both schemes, at least 3:1 on light and dark form backgrounds */
|
|
306
237
|
--pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
307
238
|
--pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
|
308
239
|
}
|
|
309
240
|
|
|
310
|
-
input:is(
|
|
311
|
-
[type="submit"],
|
|
312
|
-
[type="button"],
|
|
313
|
-
[type="reset"],
|
|
314
|
-
[type="checkbox"],
|
|
315
|
-
[type="radio"],
|
|
316
|
-
[type="file"]
|
|
317
|
-
) {
|
|
241
|
+
input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
|
|
318
242
|
--pico-form-element-focus-color: var(--pico-primary-focus);
|
|
319
243
|
}
|
|
320
244
|
|
|
321
|
-
/* Dark scheme: switch color-scheme, plus filters that light-dark() can't pick */
|
|
322
245
|
@media only screen and (prefers-color-scheme: dark) {
|
|
323
|
-
:scope:not([data-theme]),
|
|
324
|
-
:host(:not([data-theme])) {
|
|
246
|
+
:scope:not([data-theme]), :host(:not([data-theme])) {
|
|
325
247
|
color-scheme: dark;
|
|
326
248
|
}
|
|
327
|
-
|
|
328
|
-
:host(:not([data-theme])) details summary[role="button"].contrast:not(.outline)
|
|
329
|
-
:scope:not([data-theme])
|
|
330
|
-
[aria-busy="true"]:not(input, select, textarea).contrast:is(
|
|
331
|
-
button,
|
|
332
|
-
[type="submit"],
|
|
333
|
-
[type="button"],
|
|
334
|
-
[type="reset"],
|
|
335
|
-
[role="button"]
|
|
336
|
-
):not(.outline)::before,
|
|
337
|
-
:host(:not([data-theme]))
|
|
338
|
-
[aria-busy="true"]:not(input, select, textarea).contrast:is(
|
|
339
|
-
button,
|
|
340
|
-
[type="submit"],
|
|
341
|
-
[type="button"],
|
|
342
|
-
[type="reset"],
|
|
343
|
-
[role="button"]
|
|
344
|
-
):not(.outline)::before {
|
|
249
|
+
|
|
250
|
+
:scope:not([data-theme]) details summary[role="button"].contrast:not(.outline):after, :host(:not([data-theme])) details summary[role="button"].contrast:not(.outline):after, :scope:not([data-theme]) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before, :host(:not([data-theme])) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
|
|
345
251
|
filter: brightness(0);
|
|
346
252
|
}
|
|
347
253
|
}
|
|
254
|
+
|
|
348
255
|
[data-theme="dark"] {
|
|
349
256
|
color-scheme: dark;
|
|
350
257
|
}
|
|
351
|
-
|
|
352
|
-
[data-theme="dark"]
|
|
353
|
-
[aria-busy="true"]:not(input, select, textarea).contrast:is(
|
|
354
|
-
button,
|
|
355
|
-
[type="submit"],
|
|
356
|
-
[type="button"],
|
|
357
|
-
[type="reset"],
|
|
358
|
-
[role="button"]
|
|
359
|
-
):not(.outline)::before {
|
|
258
|
+
|
|
259
|
+
[data-theme="dark"] details summary[role="button"].contrast:not(.outline):after, [data-theme="dark"] [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
|
|
360
260
|
filter: brightness(0);
|
|
361
261
|
}
|
|
362
262
|
|
|
363
|
-
progress,
|
|
364
|
-
[type="checkbox"],
|
|
365
|
-
[type="radio"],
|
|
366
|
-
[type="range"] {
|
|
263
|
+
progress, [type="checkbox"], [type="radio"], [type="range"] {
|
|
367
264
|
accent-color: var(--pico-primary);
|
|
368
265
|
}
|
|
369
266
|
|
|
370
|
-
|
|
371
|
-
* Document
|
|
372
|
-
* Content-box & Responsive typography
|
|
373
|
-
*/
|
|
374
|
-
*,
|
|
375
|
-
*::before,
|
|
376
|
-
*::after {
|
|
267
|
+
*, :before, :after {
|
|
377
268
|
box-sizing: border-box;
|
|
378
269
|
background-repeat: no-repeat;
|
|
379
270
|
}
|
|
380
271
|
|
|
381
|
-
|
|
382
|
-
::after {
|
|
272
|
+
:before, :after {
|
|
383
273
|
text-decoration: inherit;
|
|
384
274
|
vertical-align: inherit;
|
|
385
275
|
}
|
|
386
276
|
|
|
387
|
-
:where(:scope),
|
|
388
|
-
:where(:host) {
|
|
277
|
+
:where(:scope), :where(:host) {
|
|
389
278
|
-webkit-tap-highlight-color: transparent;
|
|
390
279
|
-webkit-text-size-adjust: 100%;
|
|
391
280
|
-moz-text-size-adjust: 100%;
|
|
@@ -397,7 +286,7 @@ progress,
|
|
|
397
286
|
line-height: var(--pico-line-height);
|
|
398
287
|
font-family: var(--pico-font-family);
|
|
399
288
|
text-underline-offset: var(--pico-text-underline-offset);
|
|
400
|
-
text-rendering:
|
|
289
|
+
text-rendering: optimizelegibility;
|
|
401
290
|
overflow-wrap: break-word;
|
|
402
291
|
-moz-tab-size: 4;
|
|
403
292
|
-o-tab-size: 4;
|
|
@@ -413,108 +302,92 @@ main {
|
|
|
413
302
|
display: block;
|
|
414
303
|
}
|
|
415
304
|
|
|
416
|
-
/**
|
|
417
|
-
* Section
|
|
418
|
-
*/
|
|
419
305
|
section {
|
|
420
306
|
margin-bottom: var(--pico-block-spacing-vertical);
|
|
421
307
|
}
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
*/
|
|
425
|
-
.container,
|
|
426
|
-
.container-fluid {
|
|
308
|
+
|
|
309
|
+
.container, .container-fluid {
|
|
427
310
|
width: 100%;
|
|
428
|
-
margin-right: auto;
|
|
429
|
-
margin-left: auto;
|
|
430
311
|
padding-right: var(--pico-spacing);
|
|
431
312
|
padding-left: var(--pico-spacing);
|
|
313
|
+
margin-left: auto;
|
|
314
|
+
margin-right: auto;
|
|
432
315
|
}
|
|
433
316
|
|
|
434
|
-
@media (
|
|
317
|
+
@media (width >= 576px) {
|
|
435
318
|
.container {
|
|
436
319
|
max-width: 510px;
|
|
437
|
-
padding-right: 0;
|
|
438
320
|
padding-left: 0;
|
|
321
|
+
padding-right: 0;
|
|
439
322
|
}
|
|
440
323
|
}
|
|
441
|
-
|
|
324
|
+
|
|
325
|
+
@media (width >= 768px) {
|
|
442
326
|
.container {
|
|
443
327
|
max-width: 700px;
|
|
444
328
|
}
|
|
445
329
|
}
|
|
446
|
-
|
|
330
|
+
|
|
331
|
+
@media (width >= 1024px) {
|
|
447
332
|
.container {
|
|
448
333
|
max-width: 950px;
|
|
449
334
|
}
|
|
450
335
|
}
|
|
451
|
-
|
|
336
|
+
|
|
337
|
+
@media (width >= 1280px) {
|
|
452
338
|
.container {
|
|
453
339
|
max-width: 1200px;
|
|
454
340
|
}
|
|
455
341
|
}
|
|
456
|
-
|
|
342
|
+
|
|
343
|
+
@media (width >= 1536px) {
|
|
457
344
|
.container {
|
|
458
345
|
max-width: 1450px;
|
|
459
346
|
}
|
|
460
347
|
}
|
|
461
|
-
|
|
462
|
-
* Grid
|
|
463
|
-
* Minimal grid system with auto-layout columns
|
|
464
|
-
*/
|
|
348
|
+
|
|
465
349
|
.grid {
|
|
466
350
|
grid-column-gap: var(--pico-grid-column-gap);
|
|
467
351
|
grid-row-gap: var(--pico-grid-row-gap);
|
|
468
|
-
display: grid;
|
|
469
352
|
grid-template-columns: 1fr;
|
|
353
|
+
display: grid;
|
|
470
354
|
}
|
|
471
|
-
|
|
355
|
+
|
|
356
|
+
@media (width >= 768px) {
|
|
472
357
|
.grid {
|
|
473
358
|
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
|
474
359
|
}
|
|
475
360
|
}
|
|
476
|
-
|
|
361
|
+
|
|
362
|
+
.grid > :not(.does-not-exist) {
|
|
477
363
|
min-width: 0;
|
|
478
|
-
margin-bottom: 0;
|
|
364
|
+
margin-bottom: 0;
|
|
479
365
|
}
|
|
480
|
-
|
|
481
|
-
* Overflow auto
|
|
482
|
-
*/
|
|
366
|
+
|
|
483
367
|
.overflow-auto {
|
|
484
368
|
overflow: auto;
|
|
485
369
|
}
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
*/
|
|
489
|
-
b,
|
|
490
|
-
strong {
|
|
370
|
+
|
|
371
|
+
b, strong {
|
|
491
372
|
font-weight: bolder;
|
|
492
373
|
}
|
|
493
374
|
|
|
494
|
-
sub,
|
|
495
|
-
sup {
|
|
496
|
-
position: relative;
|
|
497
|
-
font-size: 0.75em;
|
|
498
|
-
line-height: 0;
|
|
375
|
+
sub, sup {
|
|
499
376
|
vertical-align: baseline;
|
|
377
|
+
font-size: .75em;
|
|
378
|
+
line-height: 0;
|
|
379
|
+
position: relative;
|
|
500
380
|
}
|
|
501
381
|
|
|
502
382
|
sub {
|
|
503
|
-
bottom:
|
|
383
|
+
bottom: -.25em;
|
|
504
384
|
}
|
|
505
385
|
|
|
506
386
|
sup {
|
|
507
|
-
top:
|
|
387
|
+
top: -.5em;
|
|
508
388
|
}
|
|
509
389
|
|
|
510
|
-
address,
|
|
511
|
-
blockquote,
|
|
512
|
-
dl,
|
|
513
|
-
ol,
|
|
514
|
-
p,
|
|
515
|
-
pre,
|
|
516
|
-
table,
|
|
517
|
-
ul {
|
|
390
|
+
address, blockquote, dl, ol, p, pre, table, ul {
|
|
518
391
|
margin-top: 0;
|
|
519
392
|
margin-bottom: var(--pico-typography-spacing-vertical);
|
|
520
393
|
color: var(--pico-color);
|
|
@@ -522,12 +395,7 @@ ul {
|
|
|
522
395
|
font-weight: var(--pico-font-weight);
|
|
523
396
|
}
|
|
524
397
|
|
|
525
|
-
h1,
|
|
526
|
-
h2,
|
|
527
|
-
h3,
|
|
528
|
-
h4,
|
|
529
|
-
h5,
|
|
530
|
-
h6 {
|
|
398
|
+
h1, h2, h3, h4, h5, h6 {
|
|
531
399
|
margin-top: 0;
|
|
532
400
|
margin-bottom: var(--pico-typography-spacing-vertical);
|
|
533
401
|
color: var(--pico-color);
|
|
@@ -561,35 +429,32 @@ h6 {
|
|
|
561
429
|
--pico-color: var(--pico-h6-color);
|
|
562
430
|
}
|
|
563
431
|
|
|
564
|
-
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul)
|
|
565
|
-
~ :is(h1, h2, h3, h4, h5, h6) {
|
|
432
|
+
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
|
|
566
433
|
margin-top: var(--pico-typography-spacing-top);
|
|
567
434
|
}
|
|
568
435
|
|
|
569
|
-
p {
|
|
436
|
+
p, hgroup {
|
|
570
437
|
margin-bottom: var(--pico-typography-spacing-vertical);
|
|
571
438
|
}
|
|
572
439
|
|
|
573
|
-
hgroup {
|
|
574
|
-
margin-bottom: var(--pico-typography-spacing-vertical);
|
|
575
|
-
}
|
|
576
440
|
hgroup > * {
|
|
577
441
|
margin-top: 0;
|
|
578
442
|
margin-bottom: 0;
|
|
579
443
|
}
|
|
580
|
-
|
|
444
|
+
|
|
445
|
+
hgroup > :not(:first-child):last-child {
|
|
581
446
|
--pico-color: var(--pico-muted-color);
|
|
582
447
|
--pico-font-weight: unset;
|
|
583
448
|
font-size: 1rem;
|
|
584
449
|
}
|
|
585
450
|
|
|
586
451
|
:where(ol, ul) li {
|
|
587
|
-
margin-bottom: calc(var(--pico-typography-spacing-vertical) *
|
|
452
|
+
margin-bottom: calc(var(--pico-typography-spacing-vertical) * .25);
|
|
588
453
|
}
|
|
589
454
|
|
|
590
455
|
:where(dl, ol, ul) :where(dl, ol, ul) {
|
|
591
456
|
margin: 0;
|
|
592
|
-
margin-top: calc(var(--pico-typography-spacing-vertical) *
|
|
457
|
+
margin-top: calc(var(--pico-typography-spacing-vertical) * .25);
|
|
593
458
|
}
|
|
594
459
|
|
|
595
460
|
ul li {
|
|
@@ -597,30 +462,31 @@ ul li {
|
|
|
597
462
|
}
|
|
598
463
|
|
|
599
464
|
mark {
|
|
600
|
-
padding: 0.125rem 0.25rem;
|
|
601
465
|
background-color: var(--pico-mark-background-color);
|
|
602
466
|
color: var(--pico-mark-color);
|
|
603
467
|
vertical-align: baseline;
|
|
468
|
+
padding: .125rem .25rem;
|
|
604
469
|
}
|
|
605
470
|
|
|
606
471
|
blockquote {
|
|
607
|
-
display: block;
|
|
608
472
|
margin: var(--pico-typography-spacing-vertical) 0;
|
|
609
473
|
padding: var(--pico-spacing);
|
|
610
474
|
border-right: none;
|
|
611
|
-
border-left:
|
|
612
|
-
border-inline-start:
|
|
475
|
+
border-left: .25rem solid var(--pico-blockquote-border-color);
|
|
476
|
+
border-inline-start: .25rem solid var(--pico-blockquote-border-color);
|
|
613
477
|
border-inline-end: none;
|
|
478
|
+
display: block;
|
|
614
479
|
}
|
|
480
|
+
|
|
615
481
|
blockquote footer {
|
|
616
|
-
margin-top: calc(var(--pico-typography-spacing-vertical) *
|
|
482
|
+
margin-top: calc(var(--pico-typography-spacing-vertical) * .5);
|
|
617
483
|
color: var(--pico-blockquote-footer-color);
|
|
618
484
|
}
|
|
619
485
|
|
|
620
486
|
abbr[title] {
|
|
487
|
+
cursor: help;
|
|
621
488
|
border-bottom: 1px dotted;
|
|
622
489
|
text-decoration: none;
|
|
623
|
-
cursor: help;
|
|
624
490
|
}
|
|
625
491
|
|
|
626
492
|
ins {
|
|
@@ -640,80 +506,58 @@ del {
|
|
|
640
506
|
background-color: var(--pico-text-selection-color);
|
|
641
507
|
}
|
|
642
508
|
|
|
643
|
-
|
|
644
|
-
* Link
|
|
645
|
-
*/
|
|
646
|
-
:where(a:not([role="button"])),
|
|
647
|
-
[role="link"] {
|
|
509
|
+
:where(a:not([role="button"])), [role="link"] {
|
|
648
510
|
--pico-color: var(--pico-primary);
|
|
649
511
|
--pico-background-color: transparent;
|
|
650
512
|
--pico-underline: var(--pico-primary-underline);
|
|
651
|
-
outline: none;
|
|
652
513
|
background-color: var(--pico-background-color);
|
|
653
514
|
color: var(--pico-color);
|
|
654
515
|
-webkit-text-decoration: var(--pico-text-decoration);
|
|
655
516
|
text-decoration: var(--pico-text-decoration);
|
|
656
517
|
text-decoration-color: var(--pico-underline);
|
|
657
|
-
text-underline-offset:
|
|
658
|
-
transition:
|
|
659
|
-
background-color var(--pico-transition),
|
|
518
|
+
text-underline-offset: .125em;
|
|
519
|
+
transition: background-color var(--pico-transition),
|
|
660
520
|
color var(--pico-transition),
|
|
661
521
|
box-shadow var(--pico-transition),
|
|
662
522
|
-webkit-text-decoration var(--pico-transition);
|
|
663
|
-
transition:
|
|
664
|
-
background-color var(--pico-transition),
|
|
523
|
+
transition: background-color var(--pico-transition),
|
|
665
524
|
color var(--pico-transition),
|
|
666
525
|
text-decoration var(--pico-transition),
|
|
667
526
|
box-shadow var(--pico-transition);
|
|
668
|
-
transition:
|
|
669
|
-
background-color var(--pico-transition),
|
|
527
|
+
transition: background-color var(--pico-transition),
|
|
670
528
|
color var(--pico-transition),
|
|
671
529
|
text-decoration var(--pico-transition),
|
|
672
530
|
box-shadow var(--pico-transition),
|
|
673
531
|
-webkit-text-decoration var(--pico-transition);
|
|
532
|
+
outline: none;
|
|
674
533
|
}
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
:hover,
|
|
678
|
-
:active,
|
|
679
|
-
:focus
|
|
680
|
-
),
|
|
681
|
-
[role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
534
|
+
|
|
535
|
+
:where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
682
536
|
--pico-color: var(--pico-primary-hover);
|
|
683
537
|
--pico-underline: var(--pico-primary-hover-underline);
|
|
684
538
|
--pico-text-decoration: underline;
|
|
685
539
|
}
|
|
686
|
-
|
|
687
|
-
[role="link"]:focus-visible {
|
|
540
|
+
|
|
541
|
+
:where(a:not([role="button"])):focus-visible, [role="link"]:focus-visible {
|
|
688
542
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
|
689
543
|
}
|
|
690
|
-
|
|
691
|
-
[role="link"].secondary {
|
|
544
|
+
|
|
545
|
+
:where(a:not([role="button"])).secondary, [role="link"].secondary {
|
|
692
546
|
--pico-color: var(--pico-secondary);
|
|
693
547
|
--pico-underline: var(--pico-secondary-underline);
|
|
694
548
|
}
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
:hover,
|
|
698
|
-
:active,
|
|
699
|
-
:focus
|
|
700
|
-
),
|
|
701
|
-
[role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
549
|
+
|
|
550
|
+
:where(a:not([role="button"])).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
702
551
|
--pico-color: var(--pico-secondary-hover);
|
|
703
552
|
--pico-underline: var(--pico-secondary-hover-underline);
|
|
704
553
|
}
|
|
705
|
-
|
|
706
|
-
[role="link"].contrast {
|
|
554
|
+
|
|
555
|
+
:where(a:not([role="button"])).contrast, [role="link"].contrast {
|
|
707
556
|
--pico-color: var(--pico-contrast);
|
|
708
557
|
--pico-underline: var(--pico-contrast-underline);
|
|
709
558
|
}
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
:hover,
|
|
713
|
-
:active,
|
|
714
|
-
:focus
|
|
715
|
-
),
|
|
716
|
-
[role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
559
|
+
|
|
560
|
+
:where(a:not([role="button"])).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
717
561
|
--pico-color: var(--pico-contrast-hover);
|
|
718
562
|
--pico-underline: var(--pico-contrast-hover-underline);
|
|
719
563
|
}
|
|
@@ -722,37 +566,25 @@ a[role="button"] {
|
|
|
722
566
|
display: inline-block;
|
|
723
567
|
}
|
|
724
568
|
|
|
725
|
-
/**
|
|
726
|
-
* Button
|
|
727
|
-
*/
|
|
728
569
|
button {
|
|
570
|
+
text-transform: none;
|
|
729
571
|
margin: 0;
|
|
730
|
-
overflow: visible;
|
|
731
572
|
font-family: inherit;
|
|
732
|
-
|
|
573
|
+
overflow: visible;
|
|
733
574
|
}
|
|
734
575
|
|
|
735
|
-
button,
|
|
736
|
-
[type="submit"],
|
|
737
|
-
[type="reset"],
|
|
738
|
-
[type="button"] {
|
|
576
|
+
button, [type="submit"], [type="reset"], [type="button"] {
|
|
739
577
|
-webkit-appearance: button;
|
|
740
578
|
}
|
|
741
579
|
|
|
742
|
-
button,
|
|
743
|
-
[type="submit"],
|
|
744
|
-
[type="reset"],
|
|
745
|
-
[type="button"],
|
|
746
|
-
[type="file"]::file-selector-button,
|
|
747
|
-
[role="button"] {
|
|
580
|
+
button, [type="submit"], [type="reset"], [type="button"], [type="file"]::file-selector-button, [role="button"] {
|
|
748
581
|
--pico-background-color: var(--pico-primary-background);
|
|
749
582
|
--pico-border-color: var(--pico-primary-border);
|
|
750
583
|
--pico-color: var(--pico-primary-inverse);
|
|
751
|
-
--pico-box-shadow: var(--pico-button-box-shadow, 0 0 0
|
|
584
|
+
--pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 #0000);
|
|
752
585
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
|
753
586
|
border: var(--pico-border-width) solid var(--pico-border-color);
|
|
754
587
|
border-radius: var(--pico-border-radius);
|
|
755
|
-
outline: none;
|
|
756
588
|
background-color: var(--pico-background-color);
|
|
757
589
|
box-shadow: var(--pico-box-shadow);
|
|
758
590
|
color: var(--pico-color);
|
|
@@ -760,92 +592,49 @@ button,
|
|
|
760
592
|
font-size: 1rem;
|
|
761
593
|
line-height: var(--pico-line-height);
|
|
762
594
|
text-align: center;
|
|
763
|
-
text-decoration: none;
|
|
764
595
|
cursor: pointer;
|
|
765
596
|
-webkit-user-select: none;
|
|
766
597
|
-moz-user-select: none;
|
|
767
|
-
|
|
768
|
-
|
|
598
|
+
user-select: none;
|
|
599
|
+
transition: background-color var(--pico-transition),
|
|
769
600
|
border-color var(--pico-transition),
|
|
770
601
|
color var(--pico-transition),
|
|
771
602
|
box-shadow var(--pico-transition);
|
|
772
|
-
|
|
603
|
+
outline: none;
|
|
604
|
+
text-decoration: none;
|
|
773
605
|
}
|
|
774
|
-
|
|
775
|
-
button:is(:hover, :active, :focus),
|
|
776
|
-
[type="submit"]:is([aria-current]:not([aria-current="false"])),
|
|
777
|
-
[type="submit"]:is(:hover, :active, :focus),
|
|
778
|
-
[type="reset"]:is([aria-current]:not([aria-current="false"])),
|
|
779
|
-
[type="reset"]:is(:hover, :active, :focus),
|
|
780
|
-
[type="button"]:is([aria-current]:not([aria-current="false"])),
|
|
781
|
-
[type="button"]:is(:hover, :active, :focus),
|
|
782
|
-
[type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])),
|
|
783
|
-
[type="file"]::file-selector-button:is(:hover, :active, :focus),
|
|
784
|
-
[role="button"]:is([aria-current]:not([aria-current="false"])),
|
|
785
|
-
[role="button"]:is(:hover, :active, :focus) {
|
|
606
|
+
|
|
607
|
+
button[aria-current]:not([aria-current="false"]), button:is(:hover, :active, :focus), [type="submit"][aria-current]:not([aria-current="false"]), [type="submit"]:is(:hover, :active, :focus), [type="reset"][aria-current]:not([aria-current="false"]), [type="reset"]:is(:hover, :active, :focus), [type="button"][aria-current]:not([aria-current="false"]), [type="button"]:is(:hover, :active, :focus), [type="file"]::file-selector-button:is(), [type="file"]::file-selector-button:is(:hover, :active, :focus), [role="button"][aria-current]:not([aria-current="false"]), [role="button"]:is(:hover, :active, :focus) {
|
|
786
608
|
--pico-background-color: var(--pico-primary-hover-background);
|
|
787
609
|
--pico-border-color: var(--pico-primary-hover-border);
|
|
788
|
-
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0
|
|
610
|
+
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000);
|
|
789
611
|
--pico-color: var(--pico-primary-inverse);
|
|
790
612
|
}
|
|
791
|
-
|
|
792
|
-
button:
|
|
793
|
-
|
|
794
|
-
[type="submit"]:is([aria-current]:not([aria-current="false"])):focus,
|
|
795
|
-
[type="reset"]:focus,
|
|
796
|
-
[type="reset"]:is([aria-current]:not([aria-current="false"])):focus,
|
|
797
|
-
[type="button"]:focus,
|
|
798
|
-
[type="button"]:is([aria-current]:not([aria-current="false"])):focus,
|
|
799
|
-
[type="file"]::file-selector-button:focus,
|
|
800
|
-
[type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus,
|
|
801
|
-
[role="button"]:focus,
|
|
802
|
-
[role="button"]:is([aria-current]:not([aria-current="false"])):focus {
|
|
803
|
-
--pico-box-shadow:
|
|
804
|
-
var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
|
613
|
+
|
|
614
|
+
button:focus, button[aria-current]:not([aria-current="false"]):focus, [type="submit"]:focus, [type="submit"][aria-current]:not([aria-current="false"]):focus, [type="reset"]:focus, [type="reset"][aria-current]:not([aria-current="false"]):focus, [type="button"]:focus, [type="button"][aria-current]:not([aria-current="false"]):focus, [type="file"]::file-selector-button:focus, [type="file"]::file-selector-button:is():focus, [role="button"]:focus, [role="button"][aria-current]:not([aria-current="false"]):focus {
|
|
615
|
+
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000),
|
|
805
616
|
0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
|
806
617
|
}
|
|
807
618
|
|
|
808
|
-
[type="submit"],
|
|
809
|
-
[type="reset"],
|
|
810
|
-
[type="button"] {
|
|
619
|
+
[type="submit"], [type="reset"], [type="button"] {
|
|
811
620
|
margin-bottom: var(--pico-spacing);
|
|
812
621
|
}
|
|
813
622
|
|
|
814
|
-
:is(button, [type="submit"], [type="button"], [role="button"]).secondary,
|
|
815
|
-
[type="reset"],
|
|
816
|
-
[type="file"]::file-selector-button {
|
|
623
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).secondary, [type="reset"], [type="file"]::file-selector-button {
|
|
817
624
|
--pico-background-color: var(--pico-secondary-background);
|
|
818
625
|
--pico-border-color: var(--pico-secondary-border);
|
|
819
626
|
--pico-color: var(--pico-secondary-inverse);
|
|
820
627
|
cursor: pointer;
|
|
821
628
|
}
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
:hover,
|
|
825
|
-
:active,
|
|
826
|
-
:focus
|
|
827
|
-
),
|
|
828
|
-
[type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
|
|
829
|
-
[type="file"]::file-selector-button:is(
|
|
830
|
-
[aria-current]:not([aria-current="false"]),
|
|
831
|
-
:hover,
|
|
832
|
-
:active,
|
|
833
|
-
:focus
|
|
834
|
-
) {
|
|
629
|
+
|
|
630
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="file"]::file-selector-button:is(:hover, :active, :focus) {
|
|
835
631
|
--pico-background-color: var(--pico-secondary-hover-background);
|
|
836
632
|
--pico-border-color: var(--pico-secondary-hover-border);
|
|
837
633
|
--pico-color: var(--pico-secondary-inverse);
|
|
838
634
|
}
|
|
839
|
-
|
|
840
|
-
:is(button, [type="submit"], [type="button"], [role="button"]).secondary:is(
|
|
841
|
-
|
|
842
|
-
):focus,
|
|
843
|
-
[type="reset"]:focus,
|
|
844
|
-
[type="reset"]:is([aria-current]:not([aria-current="false"])):focus,
|
|
845
|
-
[type="file"]::file-selector-button:focus,
|
|
846
|
-
[type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus {
|
|
847
|
-
--pico-box-shadow:
|
|
848
|
-
var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
|
635
|
+
|
|
636
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus, :is(button, [type="submit"], [type="button"], [role="button"]).secondary[aria-current]:not([aria-current="false"]):focus, [type="reset"]:focus, [type="reset"][aria-current]:not([aria-current="false"]):focus, [type="file"]::file-selector-button:focus, [type="file"]::file-selector-button:is():focus {
|
|
637
|
+
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000),
|
|
849
638
|
0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
|
|
850
639
|
}
|
|
851
640
|
|
|
@@ -854,55 +643,36 @@ button:is([aria-current]:not([aria-current="false"])):focus,
|
|
|
854
643
|
--pico-border-color: var(--pico-contrast-border);
|
|
855
644
|
--pico-color: var(--pico-contrast-inverse);
|
|
856
645
|
}
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
:hover,
|
|
860
|
-
:active,
|
|
861
|
-
:focus
|
|
862
|
-
) {
|
|
646
|
+
|
|
647
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
863
648
|
--pico-background-color: var(--pico-contrast-hover-background);
|
|
864
649
|
--pico-border-color: var(--pico-contrast-hover-border);
|
|
865
650
|
--pico-color: var(--pico-contrast-inverse);
|
|
866
651
|
}
|
|
867
|
-
|
|
868
|
-
:is(button, [type="submit"], [type="button"], [role="button"]).contrast:is(
|
|
869
|
-
|
|
870
|
-
):focus {
|
|
871
|
-
--pico-box-shadow:
|
|
872
|
-
var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
|
652
|
+
|
|
653
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus, :is(button, [type="submit"], [type="button"], [role="button"]).contrast[aria-current]:not([aria-current="false"]):focus {
|
|
654
|
+
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000),
|
|
873
655
|
0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
|
|
874
656
|
}
|
|
875
657
|
|
|
876
|
-
:is(button, [type="submit"], [type="button"], [role="button"]).outline,
|
|
877
|
-
[type="reset"].outline {
|
|
658
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).outline, [type="reset"].outline {
|
|
878
659
|
--pico-background-color: transparent;
|
|
879
660
|
--pico-color: var(--pico-primary);
|
|
880
661
|
--pico-border-color: var(--pico-primary);
|
|
881
662
|
}
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
:hover,
|
|
885
|
-
:active,
|
|
886
|
-
:focus
|
|
887
|
-
),
|
|
888
|
-
[type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
663
|
+
|
|
664
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
889
665
|
--pico-background-color: transparent;
|
|
890
666
|
--pico-color: var(--pico-primary-hover);
|
|
891
667
|
--pico-border-color: var(--pico-primary-hover);
|
|
892
668
|
}
|
|
893
669
|
|
|
894
|
-
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
|
|
895
|
-
[type="reset"].outline {
|
|
670
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, [type="reset"].outline {
|
|
896
671
|
--pico-color: var(--pico-secondary);
|
|
897
672
|
--pico-border-color: var(--pico-secondary);
|
|
898
673
|
}
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
:hover,
|
|
902
|
-
:active,
|
|
903
|
-
:focus
|
|
904
|
-
),
|
|
905
|
-
[type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
674
|
+
|
|
675
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
906
676
|
--pico-color: var(--pico-secondary-hover);
|
|
907
677
|
--pico-border-color: var(--pico-secondary-hover);
|
|
908
678
|
}
|
|
@@ -911,35 +681,25 @@ button:is([aria-current]:not([aria-current="false"])):focus,
|
|
|
911
681
|
--pico-color: var(--pico-contrast);
|
|
912
682
|
--pico-border-color: var(--pico-contrast);
|
|
913
683
|
}
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
:hover,
|
|
917
|
-
:active,
|
|
918
|
-
:focus
|
|
919
|
-
) {
|
|
684
|
+
|
|
685
|
+
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
920
686
|
--pico-color: var(--pico-contrast-hover);
|
|
921
687
|
--pico-border-color: var(--pico-contrast-hover);
|
|
922
688
|
}
|
|
923
689
|
|
|
924
|
-
:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
|
|
925
|
-
:
|
|
926
|
-
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
|
|
927
|
-
opacity: 0.5;
|
|
690
|
+
:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
|
|
691
|
+
opacity: .5;
|
|
928
692
|
pointer-events: none;
|
|
929
693
|
}
|
|
930
694
|
|
|
931
|
-
/**
|
|
932
|
-
* Table
|
|
933
|
-
*/
|
|
934
695
|
:where(table) {
|
|
935
|
-
width: 100%;
|
|
936
696
|
border-collapse: collapse;
|
|
937
697
|
border-spacing: 0;
|
|
938
698
|
text-indent: 0;
|
|
699
|
+
width: 100%;
|
|
939
700
|
}
|
|
940
701
|
|
|
941
|
-
th,
|
|
942
|
-
td {
|
|
702
|
+
th, td {
|
|
943
703
|
padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
|
|
944
704
|
border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
|
|
945
705
|
background-color: var(--pico-background-color);
|
|
@@ -948,44 +708,38 @@ td {
|
|
|
948
708
|
text-align: start;
|
|
949
709
|
}
|
|
950
710
|
|
|
951
|
-
tfoot th,
|
|
952
|
-
tfoot td {
|
|
711
|
+
tfoot th, tfoot td {
|
|
953
712
|
border-top: var(--pico-border-width) solid var(--pico-table-border-color);
|
|
954
713
|
border-bottom: 0;
|
|
955
714
|
}
|
|
956
715
|
|
|
957
|
-
table.striped tbody tr:nth-child(odd) th,
|
|
958
|
-
table.striped tbody tr:nth-child(odd) td {
|
|
716
|
+
table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) td {
|
|
959
717
|
background-color: var(--pico-table-row-stripped-background-color);
|
|
960
718
|
}
|
|
961
719
|
|
|
962
|
-
/**
|
|
963
|
-
* Embedded content
|
|
964
|
-
*/
|
|
965
720
|
:where(audio, canvas, iframe, img, svg, video) {
|
|
966
721
|
vertical-align: middle;
|
|
967
722
|
}
|
|
968
723
|
|
|
969
|
-
audio,
|
|
970
|
-
video {
|
|
724
|
+
audio, video {
|
|
971
725
|
display: inline-block;
|
|
972
726
|
}
|
|
973
727
|
|
|
974
728
|
audio:not([controls]) {
|
|
975
|
-
display: none;
|
|
976
729
|
height: 0;
|
|
730
|
+
display: none;
|
|
977
731
|
}
|
|
978
732
|
|
|
979
733
|
:where(iframe) {
|
|
980
734
|
border-style: none;
|
|
981
735
|
}
|
|
982
736
|
|
|
983
|
-
img
|
|
737
|
+
img {
|
|
738
|
+
&:not([height]) {
|
|
984
739
|
max-width: 100%;
|
|
985
740
|
height: auto;
|
|
986
741
|
}
|
|
987
742
|
|
|
988
|
-
img {
|
|
989
743
|
border-style: none;
|
|
990
744
|
}
|
|
991
745
|
|
|
@@ -993,25 +747,16 @@ img {
|
|
|
993
747
|
fill: currentColor;
|
|
994
748
|
}
|
|
995
749
|
|
|
996
|
-
svg:not(:scope),
|
|
997
|
-
svg:not(:host) {
|
|
750
|
+
svg:not(:scope), svg:not(:host) {
|
|
998
751
|
overflow: hidden;
|
|
999
752
|
}
|
|
1000
753
|
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
*/
|
|
1004
|
-
pre,
|
|
1005
|
-
code,
|
|
1006
|
-
var,
|
|
1007
|
-
kbd,
|
|
1008
|
-
samp {
|
|
1009
|
-
font-size: 0.875em;
|
|
754
|
+
pre, code, var, kbd, samp {
|
|
755
|
+
font-size: .875em;
|
|
1010
756
|
font-family: var(--pico-font-family);
|
|
1011
757
|
}
|
|
1012
758
|
|
|
1013
|
-
pre code,
|
|
1014
|
-
pre samp {
|
|
759
|
+
pre code, pre samp {
|
|
1015
760
|
font-size: inherit;
|
|
1016
761
|
font-family: inherit;
|
|
1017
762
|
}
|
|
@@ -1021,11 +766,7 @@ pre {
|
|
|
1021
766
|
overflow: auto;
|
|
1022
767
|
}
|
|
1023
768
|
|
|
1024
|
-
pre,
|
|
1025
|
-
code,
|
|
1026
|
-
var,
|
|
1027
|
-
kbd,
|
|
1028
|
-
samp {
|
|
769
|
+
pre, code, var, kbd, samp {
|
|
1029
770
|
border-radius: var(--pico-border-radius);
|
|
1030
771
|
background: var(--pico-code-background-color);
|
|
1031
772
|
color: var(--pico-code-color);
|
|
@@ -1033,25 +774,22 @@ samp {
|
|
|
1033
774
|
line-height: initial;
|
|
1034
775
|
}
|
|
1035
776
|
|
|
1036
|
-
code,
|
|
1037
|
-
|
|
1038
|
-
kbd,
|
|
1039
|
-
samp {
|
|
777
|
+
code, var, kbd, samp {
|
|
778
|
+
padding: .375rem;
|
|
1040
779
|
display: inline-block;
|
|
1041
|
-
padding: 0.375rem;
|
|
1042
780
|
}
|
|
1043
781
|
|
|
1044
782
|
pre {
|
|
1045
|
-
display: block;
|
|
1046
783
|
margin-bottom: var(--pico-spacing);
|
|
784
|
+
display: block;
|
|
1047
785
|
overflow-x: auto;
|
|
1048
786
|
}
|
|
1049
|
-
|
|
1050
|
-
pre > samp {
|
|
1051
|
-
display: block;
|
|
787
|
+
|
|
788
|
+
pre > code, pre > samp {
|
|
1052
789
|
padding: var(--pico-spacing);
|
|
1053
|
-
background: none;
|
|
1054
790
|
line-height: var(--pico-line-height);
|
|
791
|
+
background: none;
|
|
792
|
+
display: block;
|
|
1055
793
|
}
|
|
1056
794
|
|
|
1057
795
|
kbd {
|
|
@@ -1060,21 +798,17 @@ kbd {
|
|
|
1060
798
|
vertical-align: baseline;
|
|
1061
799
|
}
|
|
1062
800
|
|
|
1063
|
-
/**
|
|
1064
|
-
* Figure
|
|
1065
|
-
*/
|
|
1066
801
|
figure {
|
|
1067
|
-
display: block;
|
|
1068
802
|
margin: 0;
|
|
1069
803
|
padding: 0;
|
|
804
|
+
display: block;
|
|
1070
805
|
}
|
|
806
|
+
|
|
1071
807
|
figure figcaption {
|
|
1072
|
-
padding: calc(var(--pico-spacing) *
|
|
808
|
+
padding: calc(var(--pico-spacing) * .5) 0;
|
|
1073
809
|
color: var(--pico-muted-color);
|
|
1074
810
|
}
|
|
1075
|
-
|
|
1076
|
-
* Misc
|
|
1077
|
-
*/
|
|
811
|
+
|
|
1078
812
|
hr {
|
|
1079
813
|
height: 0;
|
|
1080
814
|
margin: var(--pico-typography-spacing-vertical) 0;
|
|
@@ -1083,8 +817,7 @@ hr {
|
|
|
1083
817
|
color: inherit;
|
|
1084
818
|
}
|
|
1085
819
|
|
|
1086
|
-
[hidden],
|
|
1087
|
-
template {
|
|
820
|
+
[hidden], template {
|
|
1088
821
|
display: none !important;
|
|
1089
822
|
}
|
|
1090
823
|
|
|
@@ -1092,18 +825,12 @@ canvas {
|
|
|
1092
825
|
display: inline-block;
|
|
1093
826
|
}
|
|
1094
827
|
|
|
1095
|
-
|
|
1096
|
-
* Basics form elements
|
|
1097
|
-
*/
|
|
1098
|
-
input,
|
|
1099
|
-
optgroup,
|
|
1100
|
-
select,
|
|
1101
|
-
textarea {
|
|
1102
|
-
margin: 0;
|
|
828
|
+
input, optgroup, select, textarea {
|
|
1103
829
|
font-size: 1rem;
|
|
1104
830
|
line-height: var(--pico-line-height);
|
|
1105
|
-
font-family: inherit;
|
|
1106
831
|
letter-spacing: inherit;
|
|
832
|
+
margin: 0;
|
|
833
|
+
font-family: inherit;
|
|
1107
834
|
}
|
|
1108
835
|
|
|
1109
836
|
input {
|
|
@@ -1116,22 +843,20 @@ select {
|
|
|
1116
843
|
|
|
1117
844
|
legend {
|
|
1118
845
|
max-width: 100%;
|
|
1119
|
-
padding: 0;
|
|
1120
846
|
color: inherit;
|
|
1121
847
|
white-space: normal;
|
|
848
|
+
padding: 0;
|
|
1122
849
|
}
|
|
1123
850
|
|
|
1124
851
|
textarea {
|
|
1125
852
|
overflow: auto;
|
|
1126
853
|
}
|
|
1127
854
|
|
|
1128
|
-
[type="checkbox"],
|
|
1129
|
-
[type="radio"] {
|
|
855
|
+
[type="checkbox"], [type="radio"] {
|
|
1130
856
|
padding: 0;
|
|
1131
857
|
}
|
|
1132
858
|
|
|
1133
|
-
::-webkit-inner-spin-button,
|
|
1134
|
-
::-webkit-outer-spin-button {
|
|
859
|
+
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
|
1135
860
|
height: auto;
|
|
1136
861
|
}
|
|
1137
862
|
|
|
@@ -1150,8 +875,8 @@ textarea {
|
|
|
1150
875
|
}
|
|
1151
876
|
|
|
1152
877
|
::-moz-focus-inner {
|
|
1153
|
-
padding: 0;
|
|
1154
878
|
border-style: none;
|
|
879
|
+
padding: 0;
|
|
1155
880
|
}
|
|
1156
881
|
|
|
1157
882
|
:-moz-focusring {
|
|
@@ -1166,17 +891,14 @@ textarea {
|
|
|
1166
891
|
display: none;
|
|
1167
892
|
}
|
|
1168
893
|
|
|
1169
|
-
[type="file"],
|
|
1170
|
-
[type="range"] {
|
|
1171
|
-
padding: 0;
|
|
894
|
+
[type="file"], [type="range"] {
|
|
1172
895
|
border-width: 0;
|
|
896
|
+
padding: 0;
|
|
1173
897
|
}
|
|
1174
898
|
|
|
1175
899
|
input:not([type="checkbox"], [type="radio"], [type="range"]) {
|
|
1176
|
-
height: calc(
|
|
1177
|
-
|
|
1178
|
-
var(--pico-border-width) * 2
|
|
1179
|
-
);
|
|
900
|
+
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
|
|
901
|
+
var(--pico-border-width) * 2);
|
|
1180
902
|
}
|
|
1181
903
|
|
|
1182
904
|
fieldset {
|
|
@@ -1184,97 +906,63 @@ fieldset {
|
|
|
1184
906
|
min-width: 0;
|
|
1185
907
|
margin: 0;
|
|
1186
908
|
margin-bottom: var(--pico-spacing);
|
|
1187
|
-
padding: 0;
|
|
1188
909
|
border: 0;
|
|
910
|
+
padding: 0;
|
|
1189
911
|
}
|
|
1190
912
|
|
|
1191
|
-
label,
|
|
1192
|
-
|
|
1193
|
-
display: block;
|
|
1194
|
-
margin-bottom: calc(var(--pico-spacing) * 0.375);
|
|
913
|
+
label, fieldset legend {
|
|
914
|
+
margin-bottom: calc(var(--pico-spacing) * .375);
|
|
1195
915
|
color: var(--pico-color);
|
|
1196
916
|
font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
|
|
917
|
+
display: block;
|
|
1197
918
|
}
|
|
1198
919
|
|
|
1199
920
|
fieldset legend {
|
|
1200
|
-
margin-bottom: calc(var(--pico-spacing) *
|
|
921
|
+
margin-bottom: calc(var(--pico-spacing) * .5);
|
|
1201
922
|
}
|
|
1202
923
|
|
|
1203
|
-
input:not([type="checkbox"], [type="radio"]),
|
|
1204
|
-
button[type="submit"],
|
|
1205
|
-
select,
|
|
1206
|
-
textarea {
|
|
924
|
+
input:not([type="checkbox"], [type="radio"]), button[type="submit"], select, textarea {
|
|
1207
925
|
width: 100%;
|
|
1208
926
|
}
|
|
1209
927
|
|
|
1210
|
-
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
|
1211
|
-
select,
|
|
1212
|
-
textarea {
|
|
928
|
+
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea {
|
|
1213
929
|
-webkit-appearance: none;
|
|
1214
930
|
-moz-appearance: none;
|
|
1215
931
|
appearance: none;
|
|
1216
932
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
|
1217
933
|
}
|
|
1218
934
|
|
|
1219
|
-
input,
|
|
1220
|
-
select,
|
|
1221
|
-
textarea {
|
|
935
|
+
input, select, textarea {
|
|
1222
936
|
--pico-background-color: var(--pico-form-element-background-color);
|
|
1223
937
|
--pico-border-color: var(--pico-form-element-border-color);
|
|
1224
938
|
--pico-color: var(--pico-form-element-color);
|
|
1225
939
|
--pico-box-shadow: none;
|
|
1226
940
|
border: var(--pico-border-width) solid var(--pico-border-color);
|
|
1227
941
|
border-radius: var(--pico-border-radius);
|
|
1228
|
-
outline: none;
|
|
1229
942
|
background-color: var(--pico-background-color);
|
|
1230
943
|
box-shadow: var(--pico-box-shadow);
|
|
1231
944
|
color: var(--pico-color);
|
|
1232
945
|
font-weight: var(--pico-font-weight);
|
|
1233
|
-
transition:
|
|
1234
|
-
background-color var(--pico-transition),
|
|
946
|
+
transition: background-color var(--pico-transition),
|
|
1235
947
|
border-color var(--pico-transition),
|
|
1236
948
|
color var(--pico-transition),
|
|
1237
949
|
box-shadow var(--pico-transition);
|
|
950
|
+
outline: none;
|
|
1238
951
|
}
|
|
1239
952
|
|
|
1240
|
-
input:not(
|
|
1241
|
-
[type="submit"],
|
|
1242
|
-
[type="button"],
|
|
1243
|
-
[type="reset"],
|
|
1244
|
-
[type="checkbox"],
|
|
1245
|
-
[type="radio"],
|
|
1246
|
-
[readonly]
|
|
1247
|
-
):is(:active, :focus),
|
|
1248
|
-
:where(select, textarea):not([readonly]):is(:active, :focus) {
|
|
953
|
+
input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
|
|
1249
954
|
--pico-background-color: var(--pico-form-element-active-background-color);
|
|
1250
955
|
}
|
|
1251
956
|
|
|
1252
|
-
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(
|
|
1253
|
-
:active,
|
|
1254
|
-
:focus
|
|
1255
|
-
),
|
|
1256
|
-
:where(select, textarea):not([readonly]):is(:active, :focus) {
|
|
957
|
+
input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
|
|
1257
958
|
--pico-border-color: var(--pico-form-element-active-border-color);
|
|
1258
959
|
}
|
|
1259
960
|
|
|
1260
|
-
input:not(
|
|
1261
|
-
[type="submit"],
|
|
1262
|
-
[type="button"],
|
|
1263
|
-
[type="reset"],
|
|
1264
|
-
[type="range"],
|
|
1265
|
-
[type="file"],
|
|
1266
|
-
[readonly]
|
|
1267
|
-
):focus,
|
|
1268
|
-
:where(select, textarea):not([readonly]):focus {
|
|
961
|
+
input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, :where(select, textarea):not([readonly]):focus {
|
|
1269
962
|
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
|
1270
963
|
}
|
|
1271
964
|
|
|
1272
|
-
input:not([type="submit"], [type="button"], [type="reset"])[disabled],
|
|
1273
|
-
select[disabled],
|
|
1274
|
-
textarea[disabled],
|
|
1275
|
-
label[aria-disabled="true"],
|
|
1276
|
-
:where(fieldset[disabled])
|
|
1277
|
-
:is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
|
965
|
+
input:not([type="submit"], [type="button"], [type="reset"])[disabled], select[disabled], textarea[disabled], label[aria-disabled="true"], :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
|
|
1278
966
|
opacity: var(--pico-form-element-disabled-opacity);
|
|
1279
967
|
pointer-events: none;
|
|
1280
968
|
}
|
|
@@ -1283,211 +971,168 @@ label[aria-disabled="true"] input[disabled] {
|
|
|
1283
971
|
opacity: 1;
|
|
1284
972
|
}
|
|
1285
973
|
|
|
1286
|
-
:where(input, select, textarea):not(
|
|
1287
|
-
[type="checkbox"],
|
|
1288
|
-
[type="radio"],
|
|
1289
|
-
[type="date"],
|
|
1290
|
-
[type="datetime-local"],
|
|
1291
|
-
[type="month"],
|
|
1292
|
-
[type="time"],
|
|
1293
|
-
[type="week"],
|
|
1294
|
-
[type="range"]
|
|
1295
|
-
)[aria-invalid] {
|
|
1296
|
-
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
|
|
974
|
+
:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
|
|
1297
975
|
padding-left: var(--pico-form-element-spacing-horizontal);
|
|
976
|
+
background-position: right .75rem center;
|
|
977
|
+
background-repeat: no-repeat;
|
|
978
|
+
background-size: 1rem;
|
|
979
|
+
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
|
|
1298
980
|
padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
|
|
1299
981
|
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
|
|
1300
|
-
background-position: center right 0.75rem;
|
|
1301
|
-
background-size: 1rem auto;
|
|
1302
|
-
background-repeat: no-repeat;
|
|
1303
982
|
}
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
[type="radio"],
|
|
1307
|
-
[type="date"],
|
|
1308
|
-
[type="datetime-local"],
|
|
1309
|
-
[type="month"],
|
|
1310
|
-
[type="time"],
|
|
1311
|
-
[type="week"],
|
|
1312
|
-
[type="range"]
|
|
1313
|
-
)[aria-invalid="false"]:not(select) {
|
|
983
|
+
|
|
984
|
+
:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(select) {
|
|
1314
985
|
background-image: var(--pico-icon-valid);
|
|
1315
986
|
}
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
[type="radio"],
|
|
1319
|
-
[type="date"],
|
|
1320
|
-
[type="datetime-local"],
|
|
1321
|
-
[type="month"],
|
|
1322
|
-
[type="time"],
|
|
1323
|
-
[type="week"],
|
|
1324
|
-
[type="range"]
|
|
1325
|
-
)[aria-invalid="true"]:not(select) {
|
|
987
|
+
|
|
988
|
+
:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="true"]:not(select) {
|
|
1326
989
|
background-image: var(--pico-icon-invalid);
|
|
1327
990
|
}
|
|
991
|
+
|
|
1328
992
|
:where(input, select, textarea)[aria-invalid="false"] {
|
|
1329
993
|
--pico-border-color: var(--pico-form-element-valid-border-color);
|
|
1330
994
|
}
|
|
995
|
+
|
|
1331
996
|
:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
|
|
1332
997
|
--pico-border-color: var(--pico-form-element-valid-active-border-color) !important;
|
|
1333
998
|
}
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
[type="radio"]
|
|
1337
|
-
) {
|
|
999
|
+
|
|
1000
|
+
:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
|
|
1338
1001
|
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important;
|
|
1339
1002
|
}
|
|
1003
|
+
|
|
1340
1004
|
:where(input, select, textarea)[aria-invalid="true"] {
|
|
1341
1005
|
--pico-border-color: var(--pico-form-element-invalid-border-color);
|
|
1342
1006
|
}
|
|
1007
|
+
|
|
1343
1008
|
:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
|
|
1344
1009
|
--pico-border-color: var(--pico-form-element-invalid-active-border-color) !important;
|
|
1345
1010
|
}
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
[type="radio"]
|
|
1349
|
-
) {
|
|
1011
|
+
|
|
1012
|
+
:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
|
|
1350
1013
|
--pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
|
|
1351
1014
|
}
|
|
1352
1015
|
|
|
1353
|
-
[dir="rtl"]
|
|
1354
|
-
:
|
|
1355
|
-
[aria-invalid],
|
|
1356
|
-
[aria-invalid="true"],
|
|
1357
|
-
[aria-invalid="false"]
|
|
1358
|
-
) {
|
|
1359
|
-
background-position: center left 0.75rem;
|
|
1016
|
+
[dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
|
|
1017
|
+
background-position: .75rem;
|
|
1360
1018
|
}
|
|
1361
1019
|
|
|
1362
|
-
input::placeholder,
|
|
1363
|
-
input::-webkit-input-placeholder,
|
|
1364
|
-
textarea::placeholder,
|
|
1365
|
-
textarea::-webkit-input-placeholder,
|
|
1366
|
-
select:invalid {
|
|
1020
|
+
input::placeholder, input::-webkit-input-placeholder, textarea::placeholder, textarea::-webkit-input-placeholder, select:invalid {
|
|
1367
1021
|
color: var(--pico-form-element-placeholder-color);
|
|
1368
1022
|
opacity: 1;
|
|
1369
1023
|
}
|
|
1370
1024
|
|
|
1371
|
-
input:not([type="checkbox"], [type="radio"]),
|
|
1372
|
-
select,
|
|
1373
|
-
textarea {
|
|
1025
|
+
input:not([type="checkbox"], [type="radio"]), select, textarea {
|
|
1374
1026
|
margin-bottom: var(--pico-spacing);
|
|
1375
1027
|
}
|
|
1376
1028
|
|
|
1377
1029
|
select::-ms-expand {
|
|
1030
|
+
background-color: #0000;
|
|
1378
1031
|
border: 0;
|
|
1379
|
-
background-color: transparent;
|
|
1380
1032
|
}
|
|
1033
|
+
|
|
1381
1034
|
select:not([multiple], [size]) {
|
|
1382
1035
|
padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
|
|
1383
1036
|
padding-left: var(--pico-form-element-spacing-horizontal);
|
|
1384
|
-
padding-inline-start: var(--pico-form-element-spacing-horizontal);
|
|
1385
|
-
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
|
|
1386
1037
|
background-image: var(--pico-icon-chevron);
|
|
1387
|
-
background-position:
|
|
1388
|
-
background-size: 1rem auto;
|
|
1038
|
+
background-position: right .75rem center;
|
|
1389
1039
|
background-repeat: no-repeat;
|
|
1040
|
+
background-size: 1rem;
|
|
1041
|
+
padding-inline-start: var(--pico-form-element-spacing-horizontal);
|
|
1042
|
+
padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
|
|
1390
1043
|
}
|
|
1044
|
+
|
|
1391
1045
|
select[multiple] option:checked {
|
|
1392
1046
|
background: var(--pico-form-element-selected-background-color);
|
|
1393
1047
|
color: var(--pico-form-element-color);
|
|
1394
1048
|
}
|
|
1395
1049
|
|
|
1396
1050
|
[dir="rtl"] select:not([multiple], [size]) {
|
|
1397
|
-
background-position:
|
|
1051
|
+
background-position: .75rem;
|
|
1398
1052
|
}
|
|
1399
1053
|
|
|
1400
1054
|
textarea {
|
|
1401
|
-
display: block;
|
|
1402
1055
|
resize: vertical;
|
|
1056
|
+
display: block;
|
|
1403
1057
|
}
|
|
1058
|
+
|
|
1404
1059
|
textarea[aria-invalid] {
|
|
1405
|
-
--pico-icon-height: calc(
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
);
|
|
1409
|
-
background-position: top right 0.75rem !important;
|
|
1060
|
+
--pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
|
|
1061
|
+
var(--pico-border-width) * 2);
|
|
1062
|
+
background-position: right .75rem top !important;
|
|
1410
1063
|
background-size: 1rem var(--pico-icon-height) !important;
|
|
1411
1064
|
}
|
|
1412
1065
|
|
|
1413
1066
|
:where(input, select, textarea, fieldset, .grid) + small {
|
|
1414
|
-
display: block;
|
|
1415
1067
|
width: 100%;
|
|
1416
|
-
margin-top: calc(var(--pico-spacing) *
|
|
1068
|
+
margin-top: calc(var(--pico-spacing) * -.75);
|
|
1417
1069
|
margin-bottom: var(--pico-spacing);
|
|
1418
1070
|
color: var(--pico-muted-color);
|
|
1071
|
+
display: block;
|
|
1419
1072
|
}
|
|
1073
|
+
|
|
1420
1074
|
:where(input, select, textarea, fieldset, .grid)[aria-invalid="false"] + small {
|
|
1421
1075
|
color: var(--pico-ins-color);
|
|
1422
1076
|
}
|
|
1077
|
+
|
|
1423
1078
|
:where(input, select, textarea, fieldset, .grid)[aria-invalid="true"] + small {
|
|
1424
1079
|
color: var(--pico-del-color);
|
|
1425
1080
|
}
|
|
1426
1081
|
|
|
1427
1082
|
label > :where(input, select, textarea) {
|
|
1428
|
-
margin-top: calc(var(--pico-spacing) *
|
|
1083
|
+
margin-top: calc(var(--pico-spacing) * .25);
|
|
1429
1084
|
}
|
|
1430
1085
|
|
|
1431
|
-
|
|
1432
|
-
* Checkboxes, Radios and Switches
|
|
1433
|
-
*/
|
|
1434
|
-
:where(:scope),
|
|
1435
|
-
:host {
|
|
1086
|
+
:where(:scope), :host {
|
|
1436
1087
|
--pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
1437
1088
|
--pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
|
1438
1089
|
}
|
|
1439
|
-
|
|
1440
|
-
:host {
|
|
1090
|
+
|
|
1091
|
+
:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
|
|
1441
1092
|
--pico-switch-background-color: light-dark(#bfc7d9, #333c4e);
|
|
1442
1093
|
--pico-switch-checked-background-color: var(--pico-primary-background);
|
|
1443
1094
|
--pico-switch-color: #fff;
|
|
1444
|
-
--pico-switch-thumb-box-shadow: 0 0 0
|
|
1095
|
+
--pico-switch-thumb-box-shadow: 0 0 0 #0000;
|
|
1445
1096
|
}
|
|
1446
1097
|
|
|
1447
1098
|
label:has([type="checkbox"], [type="radio"]) {
|
|
1448
|
-
width: -moz-fit-content;
|
|
1449
|
-
width: fit-content;
|
|
1450
1099
|
cursor: pointer;
|
|
1100
|
+
width: fit-content;
|
|
1451
1101
|
}
|
|
1452
1102
|
|
|
1453
|
-
[type="checkbox"],
|
|
1454
|
-
[type="radio"] {
|
|
1103
|
+
[type="checkbox"], [type="radio"] {
|
|
1455
1104
|
-webkit-appearance: none;
|
|
1456
1105
|
-moz-appearance: none;
|
|
1457
1106
|
appearance: none;
|
|
1458
|
-
|
|
1459
|
-
height: 1.25em;
|
|
1460
|
-
margin-top: -0.125em;
|
|
1461
|
-
margin-inline-end: 0.5em;
|
|
1107
|
+
margin-top: -.125em;
|
|
1462
1108
|
border-width: var(--pico-border-width);
|
|
1463
1109
|
vertical-align: middle;
|
|
1464
1110
|
cursor: pointer;
|
|
1111
|
+
width: 1.25em;
|
|
1112
|
+
height: 1.25em;
|
|
1113
|
+
margin-inline-end: .5em;
|
|
1465
1114
|
}
|
|
1466
|
-
|
|
1467
|
-
[type="radio"]::-ms-check {
|
|
1115
|
+
|
|
1116
|
+
[type="checkbox"]::-ms-check, [type="radio"]::-ms-check {
|
|
1468
1117
|
display: none;
|
|
1469
1118
|
}
|
|
1470
|
-
|
|
1471
|
-
[type="checkbox"]:checked:active,
|
|
1472
|
-
[type="checkbox"]:checked:focus,
|
|
1473
|
-
[type="radio"]:checked,
|
|
1474
|
-
[type="radio"]:checked:active,
|
|
1475
|
-
[type="radio"]:checked:focus {
|
|
1119
|
+
|
|
1120
|
+
[type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
|
|
1476
1121
|
--pico-background-color: var(--pico-primary-background);
|
|
1477
1122
|
--pico-border-color: var(--pico-primary-border);
|
|
1478
1123
|
background-image: var(--pico-icon-checkbox);
|
|
1479
1124
|
background-position: center;
|
|
1480
|
-
background-size: 0.75em auto;
|
|
1481
1125
|
background-repeat: no-repeat;
|
|
1126
|
+
background-size: .75em;
|
|
1482
1127
|
}
|
|
1483
|
-
|
|
1484
|
-
[type="radio"] ~ label {
|
|
1485
|
-
display: inline-block;
|
|
1486
|
-
margin-bottom: 0;
|
|
1128
|
+
|
|
1129
|
+
[type="checkbox"] ~ label, [type="radio"] ~ label {
|
|
1487
1130
|
cursor: pointer;
|
|
1131
|
+
margin-bottom: 0;
|
|
1132
|
+
display: inline-block;
|
|
1488
1133
|
}
|
|
1489
|
-
|
|
1490
|
-
[type="radio"] ~ label:not(:last-of-type) {
|
|
1134
|
+
|
|
1135
|
+
[type="checkbox"] ~ label:not(:last-of-type), [type="radio"] ~ label:not(:last-of-type) {
|
|
1491
1136
|
margin-inline-end: 1em;
|
|
1492
1137
|
}
|
|
1493
1138
|
|
|
@@ -1496,150 +1141,120 @@ label:has([type="checkbox"], [type="radio"]) {
|
|
|
1496
1141
|
--pico-border-color: var(--pico-primary-border);
|
|
1497
1142
|
background-image: var(--pico-icon-minus);
|
|
1498
1143
|
background-position: center;
|
|
1499
|
-
background-size: 0.75em auto;
|
|
1500
1144
|
background-repeat: no-repeat;
|
|
1145
|
+
background-size: .75em;
|
|
1501
1146
|
}
|
|
1502
1147
|
|
|
1503
1148
|
[type="radio"] {
|
|
1504
1149
|
border-radius: 50%;
|
|
1505
1150
|
}
|
|
1506
|
-
|
|
1507
|
-
[type="radio"]:checked:active,
|
|
1508
|
-
[type="radio"]:checked:focus {
|
|
1151
|
+
|
|
1152
|
+
[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
|
|
1509
1153
|
--pico-background-color: var(--pico-primary-inverse);
|
|
1510
|
-
border-width: 0.35em;
|
|
1511
1154
|
background-image: none;
|
|
1155
|
+
border-width: .35em;
|
|
1512
1156
|
}
|
|
1513
1157
|
|
|
1514
1158
|
[type="checkbox"][role="switch"] {
|
|
1515
1159
|
--pico-background-color: var(--pico-switch-background-color);
|
|
1516
1160
|
--pico-color: var(--pico-switch-color);
|
|
1517
|
-
width: 2.25em;
|
|
1518
|
-
height: 1.25em;
|
|
1519
1161
|
border: var(--pico-border-width) solid var(--pico-border-color);
|
|
1520
|
-
border-radius: 1.25em;
|
|
1521
1162
|
background-color: var(--pico-background-color);
|
|
1163
|
+
border-radius: 1.25em;
|
|
1164
|
+
width: 2.25em;
|
|
1165
|
+
height: 1.25em;
|
|
1522
1166
|
line-height: 1.25em;
|
|
1523
1167
|
}
|
|
1168
|
+
|
|
1524
1169
|
[type="checkbox"][role="switch"]:not([aria-invalid]) {
|
|
1525
1170
|
--pico-border-color: var(--pico-switch-background-color);
|
|
1526
1171
|
}
|
|
1172
|
+
|
|
1527
1173
|
[type="checkbox"][role="switch"]:before {
|
|
1528
|
-
display: block;
|
|
1529
1174
|
aspect-ratio: 1;
|
|
1530
|
-
height: 100%;
|
|
1531
|
-
border-radius: 50%;
|
|
1532
1175
|
background-color: var(--pico-color);
|
|
1176
|
+
height: 100%;
|
|
1533
1177
|
box-shadow: var(--pico-switch-thumb-box-shadow);
|
|
1534
1178
|
content: "";
|
|
1535
|
-
|
|
1179
|
+
border-radius: 50%;
|
|
1180
|
+
transition: margin .1s ease-in-out;
|
|
1181
|
+
display: block;
|
|
1536
1182
|
}
|
|
1183
|
+
|
|
1537
1184
|
[type="checkbox"][role="switch"]:focus {
|
|
1538
1185
|
--pico-background-color: var(--pico-switch-background-color);
|
|
1539
1186
|
--pico-border-color: var(--pico-switch-background-color);
|
|
1540
1187
|
}
|
|
1188
|
+
|
|
1541
1189
|
[type="checkbox"][role="switch"]:checked {
|
|
1542
1190
|
--pico-background-color: var(--pico-switch-checked-background-color);
|
|
1543
1191
|
--pico-border-color: var(--pico-switch-checked-background-color);
|
|
1544
1192
|
background-image: none;
|
|
1545
1193
|
}
|
|
1546
|
-
|
|
1547
|
-
|
|
1194
|
+
|
|
1195
|
+
[type="checkbox"][role="switch"]:checked:before {
|
|
1196
|
+
margin-inline-start: 1em;
|
|
1548
1197
|
}
|
|
1198
|
+
|
|
1549
1199
|
[type="checkbox"][role="switch"][disabled] {
|
|
1550
1200
|
--pico-background-color: var(--pico-border-color);
|
|
1551
1201
|
}
|
|
1552
1202
|
|
|
1553
|
-
[type="checkbox"][aria-invalid="false"]:checked,
|
|
1554
|
-
[type="checkbox"][aria-invalid="false"]:checked:active,
|
|
1555
|
-
[type="checkbox"][aria-invalid="false"]:checked:focus,
|
|
1556
|
-
[type="checkbox"][role="switch"][aria-invalid="false"]:checked,
|
|
1557
|
-
[type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
|
|
1558
|
-
[type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
|
|
1203
|
+
[type="checkbox"][aria-invalid="false"]:checked, [type="checkbox"][aria-invalid="false"]:checked:active, [type="checkbox"][aria-invalid="false"]:checked:focus, [type="checkbox"][role="switch"][aria-invalid="false"]:checked, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
|
|
1559
1204
|
--pico-background-color: var(--pico-form-element-valid-border-color);
|
|
1560
1205
|
}
|
|
1561
|
-
|
|
1562
|
-
[type="checkbox"]:checked:active[aria-invalid="true"],
|
|
1563
|
-
[type="checkbox"]:checked:focus[aria-invalid="true"],
|
|
1564
|
-
[type="checkbox"][role="switch"]:checked[aria-invalid="true"],
|
|
1565
|
-
[type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
|
|
1566
|
-
[type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
|
|
1206
|
+
|
|
1207
|
+
[type="checkbox"]:checked[aria-invalid="true"], [type="checkbox"]:checked:active[aria-invalid="true"], [type="checkbox"]:checked:focus[aria-invalid="true"], [type="checkbox"][role="switch"]:checked[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
|
|
1567
1208
|
--pico-background-color: var(--pico-form-element-invalid-border-color);
|
|
1568
1209
|
}
|
|
1569
1210
|
|
|
1570
|
-
[type="checkbox"][aria-invalid="false"]:checked,
|
|
1571
|
-
[type="checkbox"][aria-invalid="false"]:checked:active,
|
|
1572
|
-
[type="checkbox"][aria-invalid="false"]:checked:focus,
|
|
1573
|
-
[type="radio"][aria-invalid="false"]:checked,
|
|
1574
|
-
[type="radio"][aria-invalid="false"]:checked:active,
|
|
1575
|
-
[type="radio"][aria-invalid="false"]:checked:focus,
|
|
1576
|
-
[type="checkbox"][role="switch"][aria-invalid="false"]:checked,
|
|
1577
|
-
[type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
|
|
1578
|
-
[type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
|
|
1211
|
+
[type="checkbox"][aria-invalid="false"]:checked, [type="checkbox"][aria-invalid="false"]:checked:active, [type="checkbox"][aria-invalid="false"]:checked:focus, [type="radio"][aria-invalid="false"]:checked, [type="radio"][aria-invalid="false"]:checked:active, [type="radio"][aria-invalid="false"]:checked:focus, [type="checkbox"][role="switch"][aria-invalid="false"]:checked, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
|
|
1579
1212
|
--pico-border-color: var(--pico-form-element-valid-border-color);
|
|
1580
1213
|
}
|
|
1581
|
-
|
|
1582
|
-
[type="checkbox"]:checked:active[aria-invalid="true"],
|
|
1583
|
-
[type="checkbox"]:checked:focus[aria-invalid="true"],
|
|
1584
|
-
[type="radio"]:checked[aria-invalid="true"],
|
|
1585
|
-
[type="radio"]:checked:active[aria-invalid="true"],
|
|
1586
|
-
[type="radio"]:checked:focus[aria-invalid="true"],
|
|
1587
|
-
[type="checkbox"][role="switch"]:checked[aria-invalid="true"],
|
|
1588
|
-
[type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
|
|
1589
|
-
[type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
|
|
1214
|
+
|
|
1215
|
+
[type="checkbox"]:checked[aria-invalid="true"], [type="checkbox"]:checked:active[aria-invalid="true"], [type="checkbox"]:checked:focus[aria-invalid="true"], [type="radio"]:checked[aria-invalid="true"], [type="radio"]:checked:active[aria-invalid="true"], [type="radio"]:checked:focus[aria-invalid="true"], [type="checkbox"][role="switch"]:checked[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
|
|
1590
1216
|
--pico-border-color: var(--pico-form-element-invalid-border-color);
|
|
1591
1217
|
}
|
|
1592
|
-
|
|
1593
|
-
* Input type color
|
|
1594
|
-
*/
|
|
1218
|
+
|
|
1595
1219
|
[type="color"]::-webkit-color-swatch-wrapper {
|
|
1596
1220
|
padding: 0;
|
|
1597
1221
|
}
|
|
1222
|
+
|
|
1598
1223
|
[type="color"]::-moz-focus-inner {
|
|
1599
1224
|
padding: 0;
|
|
1600
1225
|
}
|
|
1226
|
+
|
|
1601
1227
|
[type="color"]::-webkit-color-swatch {
|
|
1228
|
+
border-radius: calc(var(--pico-border-radius) * .5);
|
|
1602
1229
|
border: 0;
|
|
1603
|
-
border-radius: calc(var(--pico-border-radius) * 0.5);
|
|
1604
1230
|
}
|
|
1231
|
+
|
|
1605
1232
|
[type="color"]::-moz-color-swatch {
|
|
1233
|
+
border-radius: calc(var(--pico-border-radius) * .5);
|
|
1606
1234
|
border: 0;
|
|
1607
|
-
border-radius: calc(var(--pico-border-radius) * 0.5);
|
|
1608
1235
|
}
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
*/
|
|
1612
|
-
:where(:scope),
|
|
1613
|
-
:host {
|
|
1236
|
+
|
|
1237
|
+
:where(:scope), :host {
|
|
1614
1238
|
--pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
|
1615
1239
|
--pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
1616
1240
|
}
|
|
1617
1241
|
|
|
1618
|
-
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is(
|
|
1619
|
-
|
|
1620
|
-
[type="datetime-local"],
|
|
1621
|
-
[type="month"],
|
|
1622
|
-
[type="time"],
|
|
1623
|
-
[type="week"]
|
|
1624
|
-
) {
|
|
1625
|
-
--pico-icon-position: 0.75rem;
|
|
1242
|
+
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
|
1243
|
+
--pico-icon-position: .75rem;
|
|
1626
1244
|
--pico-icon-width: 1rem;
|
|
1627
|
-
min-width: 0;
|
|
1628
1245
|
padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position));
|
|
1629
1246
|
background-image: var(--pico-icon-date);
|
|
1630
1247
|
background-position: center right var(--pico-icon-position);
|
|
1631
1248
|
background-size: var(--pico-icon-width) auto;
|
|
1632
1249
|
background-repeat: no-repeat;
|
|
1250
|
+
min-width: 0;
|
|
1633
1251
|
}
|
|
1252
|
+
|
|
1634
1253
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] {
|
|
1635
1254
|
background-image: var(--pico-icon-time);
|
|
1636
1255
|
}
|
|
1637
1256
|
|
|
1638
|
-
[type="date"]::-webkit-calendar-picker-indicator,
|
|
1639
|
-
[type="datetime-local"]::-webkit-calendar-picker-indicator,
|
|
1640
|
-
[type="month"]::-webkit-calendar-picker-indicator,
|
|
1641
|
-
[type="time"]::-webkit-calendar-picker-indicator,
|
|
1642
|
-
[type="week"]::-webkit-calendar-picker-indicator {
|
|
1257
|
+
[type="date"]::-webkit-calendar-picker-indicator, [type="datetime-local"]::-webkit-calendar-picker-indicator, [type="month"]::-webkit-calendar-picker-indicator, [type="time"]::-webkit-calendar-picker-indicator, [type="week"]::-webkit-calendar-picker-indicator {
|
|
1643
1258
|
width: var(--pico-icon-width);
|
|
1644
1259
|
margin-right: calc(var(--pico-icon-width) * -1);
|
|
1645
1260
|
margin-left: var(--pico-icon-position);
|
|
@@ -1647,50 +1262,43 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
|
|
|
1647
1262
|
}
|
|
1648
1263
|
|
|
1649
1264
|
@-moz-document url-prefix() {
|
|
1650
|
-
[type="date"],
|
|
1651
|
-
[type="datetime-local"],
|
|
1652
|
-
[type="month"],
|
|
1653
|
-
[type="time"],
|
|
1654
|
-
[type="week"] {
|
|
1265
|
+
[type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"] {
|
|
1655
1266
|
padding-right: var(--pico-form-element-spacing-horizontal) !important;
|
|
1656
1267
|
background-image: none !important;
|
|
1657
1268
|
}
|
|
1658
1269
|
}
|
|
1659
|
-
|
|
1660
|
-
|
|
1270
|
+
|
|
1271
|
+
[dir="rtl"] :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
|
|
1661
1272
|
text-align: end;
|
|
1662
1273
|
}
|
|
1663
|
-
|
|
1664
|
-
* Input type file
|
|
1665
|
-
*/
|
|
1274
|
+
|
|
1666
1275
|
[type="file"] {
|
|
1667
1276
|
--pico-color: var(--pico-muted-color);
|
|
1668
1277
|
margin-left: calc(var(--pico-outline-width) * -1);
|
|
1669
|
-
padding: calc(var(--pico-form-element-spacing-vertical) *
|
|
1278
|
+
padding: calc(var(--pico-form-element-spacing-vertical) * .5) 0;
|
|
1670
1279
|
padding-left: var(--pico-outline-width);
|
|
1280
|
+
background: none;
|
|
1671
1281
|
border: 0;
|
|
1672
1282
|
border-radius: 0;
|
|
1673
|
-
background: none;
|
|
1674
1283
|
}
|
|
1284
|
+
|
|
1675
1285
|
[type="file"]::file-selector-button {
|
|
1676
1286
|
margin-right: calc(var(--pico-spacing) / 2);
|
|
1677
|
-
padding: calc(var(--pico-form-element-spacing-vertical) *
|
|
1287
|
+
padding: calc(var(--pico-form-element-spacing-vertical) * .5)
|
|
1678
1288
|
var(--pico-form-element-spacing-horizontal);
|
|
1679
1289
|
}
|
|
1290
|
+
|
|
1680
1291
|
[type="file"]:is(:hover, :active, :focus)::file-selector-button {
|
|
1681
1292
|
--pico-background-color: var(--pico-secondary-hover-background);
|
|
1682
1293
|
--pico-border-color: var(--pico-secondary-hover-border);
|
|
1683
1294
|
}
|
|
1295
|
+
|
|
1684
1296
|
[type="file"]:focus::file-selector-button {
|
|
1685
|
-
--pico-box-shadow:
|
|
1686
|
-
var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
|
|
1297
|
+
--pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000),
|
|
1687
1298
|
0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
|
|
1688
1299
|
}
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
*/
|
|
1692
|
-
:where(:scope, [data-theme="light"], [data-theme="dark"]),
|
|
1693
|
-
:host {
|
|
1300
|
+
|
|
1301
|
+
:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
|
|
1694
1302
|
--pico-range-border-color: light-dark(#dfe3eb, #202632);
|
|
1695
1303
|
--pico-range-active-border-color: light-dark(#bfc7d9, #2a3140);
|
|
1696
1304
|
--pico-range-thumb-border-color: var(--pico-background-color);
|
|
@@ -1702,176 +1310,140 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
|
|
|
1702
1310
|
-webkit-appearance: none;
|
|
1703
1311
|
-moz-appearance: none;
|
|
1704
1312
|
appearance: none;
|
|
1313
|
+
background: none;
|
|
1705
1314
|
width: 100%;
|
|
1706
1315
|
height: 1.25rem;
|
|
1707
|
-
background: none;
|
|
1708
1316
|
}
|
|
1317
|
+
|
|
1709
1318
|
[type="range"]::-webkit-slider-runnable-track {
|
|
1710
|
-
width: 100%;
|
|
1711
|
-
height: 0.375rem;
|
|
1712
1319
|
border-radius: var(--pico-border-radius);
|
|
1713
1320
|
background-color: var(--pico-range-border-color);
|
|
1714
|
-
|
|
1715
|
-
|
|
1321
|
+
width: 100%;
|
|
1322
|
+
height: .375rem;
|
|
1323
|
+
-webkit-transition: background-color var(--pico-transition),
|
|
1716
1324
|
box-shadow var(--pico-transition);
|
|
1717
|
-
transition:
|
|
1718
|
-
background-color var(--pico-transition),
|
|
1325
|
+
transition: background-color var(--pico-transition),
|
|
1719
1326
|
box-shadow var(--pico-transition);
|
|
1720
1327
|
}
|
|
1328
|
+
|
|
1721
1329
|
[type="range"]::-moz-range-track {
|
|
1722
|
-
width: 100%;
|
|
1723
|
-
height: 0.375rem;
|
|
1724
1330
|
border-radius: var(--pico-border-radius);
|
|
1725
1331
|
background-color: var(--pico-range-border-color);
|
|
1726
|
-
|
|
1727
|
-
|
|
1332
|
+
width: 100%;
|
|
1333
|
+
height: .375rem;
|
|
1334
|
+
-moz-transition: background-color var(--pico-transition),
|
|
1728
1335
|
box-shadow var(--pico-transition);
|
|
1729
|
-
transition:
|
|
1730
|
-
background-color var(--pico-transition),
|
|
1336
|
+
transition: background-color var(--pico-transition),
|
|
1731
1337
|
box-shadow var(--pico-transition);
|
|
1732
1338
|
}
|
|
1339
|
+
|
|
1733
1340
|
[type="range"]::-ms-track {
|
|
1734
|
-
width: 100%;
|
|
1735
|
-
height: 0.375rem;
|
|
1736
1341
|
border-radius: var(--pico-border-radius);
|
|
1737
1342
|
background-color: var(--pico-range-border-color);
|
|
1738
|
-
|
|
1739
|
-
|
|
1343
|
+
width: 100%;
|
|
1344
|
+
height: .375rem;
|
|
1345
|
+
-ms-transition: background-color var(--pico-transition),
|
|
1740
1346
|
box-shadow var(--pico-transition);
|
|
1741
|
-
transition:
|
|
1742
|
-
background-color var(--pico-transition),
|
|
1347
|
+
transition: background-color var(--pico-transition),
|
|
1743
1348
|
box-shadow var(--pico-transition);
|
|
1744
1349
|
}
|
|
1350
|
+
|
|
1745
1351
|
[type="range"]::-webkit-slider-thumb {
|
|
1746
1352
|
-webkit-appearance: none;
|
|
1747
|
-
width: 1.25rem;
|
|
1748
|
-
height: 1.25rem;
|
|
1749
|
-
margin-top: -0.4375rem;
|
|
1750
1353
|
border: 2px solid var(--pico-range-thumb-border-color);
|
|
1751
|
-
border-radius: 50%;
|
|
1752
1354
|
background-color: var(--pico-range-thumb-color);
|
|
1753
1355
|
cursor: pointer;
|
|
1754
|
-
|
|
1755
|
-
|
|
1356
|
+
width: 1.25rem;
|
|
1357
|
+
height: 1.25rem;
|
|
1358
|
+
-webkit-transition: background-color var(--pico-transition),
|
|
1756
1359
|
transform var(--pico-transition);
|
|
1757
|
-
transition:
|
|
1758
|
-
background-color var(--pico-transition),
|
|
1360
|
+
transition: background-color var(--pico-transition),
|
|
1759
1361
|
transform var(--pico-transition);
|
|
1362
|
+
border-radius: 50%;
|
|
1363
|
+
margin-top: -.4375rem;
|
|
1760
1364
|
}
|
|
1365
|
+
|
|
1761
1366
|
[type="range"]::-moz-range-thumb {
|
|
1762
1367
|
-webkit-appearance: none;
|
|
1763
|
-
width: 1.25rem;
|
|
1764
|
-
height: 1.25rem;
|
|
1765
|
-
margin-top: -0.4375rem;
|
|
1766
1368
|
border: 2px solid var(--pico-range-thumb-border-color);
|
|
1767
|
-
border-radius: 50%;
|
|
1768
1369
|
background-color: var(--pico-range-thumb-color);
|
|
1769
1370
|
cursor: pointer;
|
|
1770
|
-
|
|
1771
|
-
|
|
1371
|
+
width: 1.25rem;
|
|
1372
|
+
height: 1.25rem;
|
|
1373
|
+
-moz-transition: background-color var(--pico-transition),
|
|
1772
1374
|
transform var(--pico-transition);
|
|
1773
|
-
transition:
|
|
1774
|
-
background-color var(--pico-transition),
|
|
1375
|
+
transition: background-color var(--pico-transition),
|
|
1775
1376
|
transform var(--pico-transition);
|
|
1377
|
+
border-radius: 50%;
|
|
1378
|
+
margin-top: -.4375rem;
|
|
1776
1379
|
}
|
|
1380
|
+
|
|
1777
1381
|
[type="range"]::-ms-thumb {
|
|
1778
1382
|
-webkit-appearance: none;
|
|
1779
|
-
width: 1.25rem;
|
|
1780
|
-
height: 1.25rem;
|
|
1781
|
-
margin-top: -0.4375rem;
|
|
1782
1383
|
border: 2px solid var(--pico-range-thumb-border-color);
|
|
1783
|
-
border-radius: 50%;
|
|
1784
1384
|
background-color: var(--pico-range-thumb-color);
|
|
1785
1385
|
cursor: pointer;
|
|
1786
|
-
|
|
1787
|
-
|
|
1386
|
+
width: 1.25rem;
|
|
1387
|
+
height: 1.25rem;
|
|
1388
|
+
-ms-transition: background-color var(--pico-transition),
|
|
1788
1389
|
transform var(--pico-transition);
|
|
1789
|
-
transition:
|
|
1790
|
-
background-color var(--pico-transition),
|
|
1390
|
+
transition: background-color var(--pico-transition),
|
|
1791
1391
|
transform var(--pico-transition);
|
|
1392
|
+
border-radius: 50%;
|
|
1393
|
+
margin-top: -.4375rem;
|
|
1792
1394
|
}
|
|
1793
|
-
|
|
1794
|
-
[type="range"]:focus-within {
|
|
1395
|
+
|
|
1396
|
+
[type="range"]:active, [type="range"]:focus-within {
|
|
1795
1397
|
--pico-range-border-color: var(--pico-range-active-border-color);
|
|
1796
1398
|
--pico-range-thumb-color: var(--pico-range-thumb-active-color);
|
|
1797
1399
|
}
|
|
1400
|
+
|
|
1798
1401
|
[type="range"]:active::-webkit-slider-thumb {
|
|
1799
1402
|
transform: scale(1.25);
|
|
1800
1403
|
}
|
|
1404
|
+
|
|
1801
1405
|
[type="range"]:active::-moz-range-thumb {
|
|
1802
1406
|
transform: scale(1.25);
|
|
1803
1407
|
}
|
|
1408
|
+
|
|
1804
1409
|
[type="range"]:active::-ms-thumb {
|
|
1805
1410
|
transform: scale(1.25);
|
|
1806
1411
|
}
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
*/
|
|
1810
|
-
:where(:scope),
|
|
1811
|
-
:host {
|
|
1412
|
+
|
|
1413
|
+
:where(:scope), :host {
|
|
1812
1414
|
--pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
1813
1415
|
}
|
|
1814
1416
|
|
|
1815
1417
|
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
|
|
1816
|
-
padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
|
|
1817
1418
|
background-image: var(--pico-icon-search);
|
|
1818
|
-
background-position: center left calc(var(--pico-form-element-spacing-horizontal) +
|
|
1819
|
-
background-size: 1rem auto;
|
|
1419
|
+
background-position: center left calc(var(--pico-form-element-spacing-horizontal) + .125rem);
|
|
1820
1420
|
background-repeat: no-repeat;
|
|
1421
|
+
background-size: 1rem;
|
|
1422
|
+
padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
|
|
1821
1423
|
}
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
[type="range"],
|
|
1826
|
-
[type="file"]
|
|
1827
|
-
)[type="search"][aria-invalid] {
|
|
1424
|
+
|
|
1425
|
+
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
|
|
1426
|
+
background-position: 1.125rem, right .75rem center;
|
|
1828
1427
|
padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important;
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
}
|
|
1833
|
-
input:not(
|
|
1834
|
-
[type="checkbox"],
|
|
1835
|
-
[type="radio"],
|
|
1836
|
-
[type="range"],
|
|
1837
|
-
[type="file"]
|
|
1838
|
-
)[type="search"][aria-invalid="false"] {
|
|
1428
|
+
}
|
|
1429
|
+
|
|
1430
|
+
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] {
|
|
1839
1431
|
background-image: var(--pico-icon-search), var(--pico-icon-valid);
|
|
1840
1432
|
}
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
[type="radio"],
|
|
1844
|
-
[type="range"],
|
|
1845
|
-
[type="file"]
|
|
1846
|
-
)[type="search"][aria-invalid="true"] {
|
|
1433
|
+
|
|
1434
|
+
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] {
|
|
1847
1435
|
background-image: var(--pico-icon-search), var(--pico-icon-invalid);
|
|
1848
1436
|
}
|
|
1849
1437
|
|
|
1850
|
-
[dir="rtl"]
|
|
1851
|
-
:
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
[dir="rtl"]
|
|
1860
|
-
:where(input):not(
|
|
1861
|
-
[type="checkbox"],
|
|
1862
|
-
[type="radio"],
|
|
1863
|
-
[type="range"],
|
|
1864
|
-
[type="file"]
|
|
1865
|
-
)[type="search"][aria-invalid] {
|
|
1866
|
-
background-position:
|
|
1867
|
-
center right 1.125rem,
|
|
1868
|
-
center left 0.75rem;
|
|
1869
|
-
}
|
|
1870
|
-
/**
|
|
1871
|
-
* Accordion (<details>)
|
|
1872
|
-
*/
|
|
1873
|
-
:where(:scope, [data-theme="light"], [data-theme="dark"]),
|
|
1874
|
-
:host {
|
|
1438
|
+
[dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
|
|
1439
|
+
background-position: right 1.125rem center;
|
|
1440
|
+
}
|
|
1441
|
+
|
|
1442
|
+
[dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
|
|
1443
|
+
background-position: right 1.125rem center, .75rem;
|
|
1444
|
+
}
|
|
1445
|
+
|
|
1446
|
+
:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
|
|
1875
1447
|
--pico-accordion-border-color: var(--pico-muted-border-color);
|
|
1876
1448
|
--pico-accordion-active-summary-color: var(--pico-primary-hover);
|
|
1877
1449
|
--pico-accordion-close-summary-color: var(--pico-color);
|
|
@@ -1879,91 +1451,97 @@ input:not(
|
|
|
1879
1451
|
}
|
|
1880
1452
|
|
|
1881
1453
|
details {
|
|
1882
|
-
display: block;
|
|
1883
1454
|
margin-bottom: var(--pico-spacing);
|
|
1455
|
+
display: block;
|
|
1884
1456
|
}
|
|
1457
|
+
|
|
1885
1458
|
details summary {
|
|
1886
|
-
line-height: 1rem;
|
|
1887
|
-
list-style-type: none;
|
|
1888
1459
|
cursor: pointer;
|
|
1889
1460
|
transition: color var(--pico-transition);
|
|
1461
|
+
line-height: 1rem;
|
|
1462
|
+
list-style-type: none;
|
|
1890
1463
|
}
|
|
1464
|
+
|
|
1891
1465
|
details summary:not([role]) {
|
|
1892
1466
|
color: var(--pico-accordion-close-summary-color);
|
|
1893
1467
|
}
|
|
1468
|
+
|
|
1894
1469
|
details summary::-webkit-details-marker {
|
|
1895
1470
|
display: none;
|
|
1896
1471
|
}
|
|
1472
|
+
|
|
1897
1473
|
details summary::marker {
|
|
1898
1474
|
display: none;
|
|
1899
1475
|
}
|
|
1476
|
+
|
|
1900
1477
|
details summary::-moz-list-bullet {
|
|
1901
1478
|
list-style-type: none;
|
|
1902
1479
|
}
|
|
1903
|
-
|
|
1904
|
-
|
|
1480
|
+
|
|
1481
|
+
details summary:after {
|
|
1905
1482
|
width: 1rem;
|
|
1906
1483
|
height: 1rem;
|
|
1907
|
-
margin-inline-start: calc(var(--pico-spacing, 1rem) * 0.5);
|
|
1908
1484
|
float: right;
|
|
1909
|
-
transform: rotate(-90deg);
|
|
1910
1485
|
background-image: var(--pico-icon-chevron);
|
|
1911
|
-
background-position: right center;
|
|
1912
|
-
background-size: 1rem auto;
|
|
1913
|
-
background-repeat: no-repeat;
|
|
1914
1486
|
content: "";
|
|
1915
1487
|
transition: transform var(--pico-transition);
|
|
1488
|
+
background-position: 100%;
|
|
1489
|
+
background-repeat: no-repeat;
|
|
1490
|
+
background-size: 1rem;
|
|
1491
|
+
margin-inline-start: calc(var(--pico-spacing, 1rem) * .5);
|
|
1492
|
+
display: block;
|
|
1493
|
+
transform: rotate(-90deg);
|
|
1916
1494
|
}
|
|
1495
|
+
|
|
1917
1496
|
details summary:focus {
|
|
1918
1497
|
outline: none;
|
|
1919
1498
|
}
|
|
1499
|
+
|
|
1920
1500
|
details summary:focus:not([role]) {
|
|
1921
1501
|
color: var(--pico-accordion-active-summary-color);
|
|
1922
1502
|
}
|
|
1503
|
+
|
|
1923
1504
|
details summary:focus-visible:not([role]) {
|
|
1924
1505
|
outline: var(--pico-outline-width) solid var(--pico-primary-focus);
|
|
1925
|
-
outline-offset: calc(var(--pico-spacing, 1rem) *
|
|
1506
|
+
outline-offset: calc(var(--pico-spacing, 1rem) * .5);
|
|
1926
1507
|
color: var(--pico-primary);
|
|
1927
1508
|
}
|
|
1509
|
+
|
|
1928
1510
|
details summary[role="button"] {
|
|
1929
|
-
width: 100%;
|
|
1930
1511
|
text-align: start;
|
|
1512
|
+
width: 100%;
|
|
1931
1513
|
}
|
|
1932
|
-
|
|
1514
|
+
|
|
1515
|
+
details summary[role="button"]:after {
|
|
1933
1516
|
height: calc(1rem * var(--pico-line-height, 1.5));
|
|
1934
1517
|
}
|
|
1518
|
+
|
|
1935
1519
|
details[open] > summary {
|
|
1936
1520
|
margin-bottom: var(--pico-spacing);
|
|
1937
1521
|
}
|
|
1522
|
+
|
|
1938
1523
|
details[open] > summary:not([role]):not(:focus) {
|
|
1939
1524
|
color: var(--pico-accordion-open-summary-color);
|
|
1940
1525
|
}
|
|
1941
|
-
|
|
1526
|
+
|
|
1527
|
+
details[open] > summary:after {
|
|
1942
1528
|
transform: rotate(0);
|
|
1943
1529
|
}
|
|
1944
1530
|
|
|
1945
1531
|
[dir="rtl"] details summary {
|
|
1946
1532
|
text-align: end;
|
|
1947
1533
|
}
|
|
1948
|
-
|
|
1534
|
+
|
|
1535
|
+
[dir="rtl"] details summary:after {
|
|
1949
1536
|
float: left;
|
|
1950
|
-
background-position:
|
|
1537
|
+
background-position: 0;
|
|
1951
1538
|
}
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
*/
|
|
1955
|
-
:where(:scope, [data-theme="light"], [data-theme="dark"]),
|
|
1956
|
-
:host {
|
|
1539
|
+
|
|
1540
|
+
:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
|
|
1957
1541
|
--pico-card-background-color: light-dark(var(--pico-background-color), #181c25);
|
|
1958
|
-
--pico-card-border-color: light-dark(
|
|
1959
|
-
var(--pico-muted-border-color),
|
|
1960
|
-
var(--pico-card-background-color)
|
|
1961
|
-
);
|
|
1542
|
+
--pico-card-border-color: light-dark(var(--pico-muted-border-color), var(--pico-card-background-color));
|
|
1962
1543
|
--pico-card-box-shadow: var(--pico-box-shadow);
|
|
1963
|
-
--pico-card-sectioning-background-color: light-dark(
|
|
1964
|
-
rgb(251, 251.5, 252.25),
|
|
1965
|
-
rgb(26, 30.5, 40.25)
|
|
1966
|
-
);
|
|
1544
|
+
--pico-card-sectioning-background-color: light-dark(#fbfcfc, #1a1f28);
|
|
1967
1545
|
}
|
|
1968
1546
|
|
|
1969
1547
|
article {
|
|
@@ -1973,13 +1551,14 @@ article {
|
|
|
1973
1551
|
background: var(--pico-card-background-color);
|
|
1974
1552
|
box-shadow: var(--pico-card-box-shadow);
|
|
1975
1553
|
}
|
|
1976
|
-
|
|
1977
|
-
article > footer {
|
|
1554
|
+
|
|
1555
|
+
article > header, article > footer {
|
|
1978
1556
|
margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
|
|
1979
1557
|
margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
|
|
1980
|
-
padding: calc(var(--pico-block-spacing-vertical) *
|
|
1558
|
+
padding: calc(var(--pico-block-spacing-vertical) * .66) var(--pico-block-spacing-horizontal);
|
|
1981
1559
|
background-color: var(--pico-card-sectioning-background-color);
|
|
1982
1560
|
}
|
|
1561
|
+
|
|
1983
1562
|
article > header {
|
|
1984
1563
|
margin-top: calc(var(--pico-block-spacing-vertical) * -1);
|
|
1985
1564
|
margin-bottom: var(--pico-block-spacing-vertical);
|
|
@@ -1987,6 +1566,7 @@ article > header {
|
|
|
1987
1566
|
border-top-right-radius: var(--pico-border-radius);
|
|
1988
1567
|
border-top-left-radius: var(--pico-border-radius);
|
|
1989
1568
|
}
|
|
1569
|
+
|
|
1990
1570
|
article > footer {
|
|
1991
1571
|
margin-top: var(--pico-block-spacing-vertical);
|
|
1992
1572
|
margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
|
|
@@ -1994,11 +1574,8 @@ article > footer {
|
|
|
1994
1574
|
border-bottom-right-radius: var(--pico-border-radius);
|
|
1995
1575
|
border-bottom-left-radius: var(--pico-border-radius);
|
|
1996
1576
|
}
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
*/
|
|
2000
|
-
:where(:scope, [data-theme="light"], [data-theme="dark"]),
|
|
2001
|
-
:host {
|
|
1577
|
+
|
|
1578
|
+
:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
|
|
2002
1579
|
--pico-dropdown-background-color: light-dark(#fff, #181c25);
|
|
2003
1580
|
--pico-dropdown-border-color: light-dark(#eff1f4, #202632);
|
|
2004
1581
|
--pico-dropdown-box-shadow: var(--pico-box-shadow);
|
|
@@ -2007,23 +1584,22 @@ article > footer {
|
|
|
2007
1584
|
}
|
|
2008
1585
|
|
|
2009
1586
|
details.dropdown {
|
|
2010
|
-
position: relative;
|
|
2011
1587
|
border-bottom: none;
|
|
1588
|
+
position: relative;
|
|
2012
1589
|
}
|
|
2013
|
-
|
|
2014
|
-
details.dropdown > button
|
|
2015
|
-
details.dropdown > a::after {
|
|
2016
|
-
display: block;
|
|
1590
|
+
|
|
1591
|
+
details.dropdown > summary:after, details.dropdown > button:after, details.dropdown > a:after {
|
|
2017
1592
|
width: 1rem;
|
|
2018
1593
|
height: calc(1rem * var(--pico-line-height, 1.5));
|
|
2019
|
-
margin-inline-start: 0.25rem;
|
|
2020
1594
|
float: right;
|
|
2021
|
-
transform: rotate(0deg) translateX(0.2rem);
|
|
2022
1595
|
background-image: var(--pico-icon-chevron);
|
|
2023
|
-
background-position: right center;
|
|
2024
|
-
background-size: 1rem auto;
|
|
2025
|
-
background-repeat: no-repeat;
|
|
2026
1596
|
content: "";
|
|
1597
|
+
background-position: 100%;
|
|
1598
|
+
background-repeat: no-repeat;
|
|
1599
|
+
background-size: 1rem;
|
|
1600
|
+
margin-inline-start: .25rem;
|
|
1601
|
+
display: block;
|
|
1602
|
+
transform: rotate(0) translateX(.2rem);
|
|
2027
1603
|
}
|
|
2028
1604
|
|
|
2029
1605
|
nav details.dropdown {
|
|
@@ -2031,10 +1607,8 @@ nav details.dropdown {
|
|
|
2031
1607
|
}
|
|
2032
1608
|
|
|
2033
1609
|
details.dropdown > summary:not([role]) {
|
|
2034
|
-
height: calc(
|
|
2035
|
-
|
|
2036
|
-
var(--pico-border-width) * 2
|
|
2037
|
-
);
|
|
1610
|
+
height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
|
|
1611
|
+
var(--pico-border-width) * 2);
|
|
2038
1612
|
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
|
|
2039
1613
|
border: var(--pico-border-width) solid var(--pico-form-element-border-color);
|
|
2040
1614
|
border-radius: var(--pico-border-radius);
|
|
@@ -2044,29 +1618,32 @@ details.dropdown > summary:not([role]) {
|
|
|
2044
1618
|
cursor: pointer;
|
|
2045
1619
|
-webkit-user-select: none;
|
|
2046
1620
|
-moz-user-select: none;
|
|
2047
|
-
|
|
2048
|
-
|
|
1621
|
+
user-select: none;
|
|
1622
|
+
transition: background-color var(--pico-transition),
|
|
2049
1623
|
border-color var(--pico-transition),
|
|
2050
1624
|
color var(--pico-transition),
|
|
2051
1625
|
box-shadow var(--pico-transition);
|
|
2052
|
-
user-select: none;
|
|
2053
1626
|
}
|
|
2054
|
-
|
|
2055
|
-
details.dropdown > summary:not([role]):focus {
|
|
1627
|
+
|
|
1628
|
+
details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
|
|
2056
1629
|
border-color: var(--pico-form-element-active-border-color);
|
|
2057
1630
|
background-color: var(--pico-form-element-active-background-color);
|
|
2058
1631
|
}
|
|
1632
|
+
|
|
2059
1633
|
details.dropdown > summary:not([role]):focus {
|
|
2060
1634
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
|
|
2061
1635
|
}
|
|
1636
|
+
|
|
2062
1637
|
details.dropdown > summary:not([role]):focus-visible {
|
|
2063
1638
|
outline: none;
|
|
2064
1639
|
}
|
|
1640
|
+
|
|
2065
1641
|
details.dropdown > summary:not([role])[aria-invalid="false"] {
|
|
2066
1642
|
--pico-form-element-border-color: var(--pico-form-element-valid-border-color);
|
|
2067
1643
|
--pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
|
|
2068
1644
|
--pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
|
|
2069
1645
|
}
|
|
1646
|
+
|
|
2070
1647
|
details.dropdown > summary:not([role])[aria-invalid="true"] {
|
|
2071
1648
|
--pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
|
|
2072
1649
|
--pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
|
|
@@ -2074,33 +1651,30 @@ details.dropdown > summary:not([role])[aria-invalid="true"] {
|
|
|
2074
1651
|
}
|
|
2075
1652
|
|
|
2076
1653
|
nav details.dropdown {
|
|
2077
|
-
display: inline-block;
|
|
2078
1654
|
margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
|
|
1655
|
+
display: inline-block;
|
|
2079
1656
|
}
|
|
2080
|
-
|
|
2081
|
-
|
|
1657
|
+
|
|
1658
|
+
nav details.dropdown > summary:after {
|
|
1659
|
+
transform: rotate(0) translateX(0);
|
|
2082
1660
|
}
|
|
1661
|
+
|
|
2083
1662
|
nav details.dropdown > summary:not([role]) {
|
|
2084
1663
|
height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
|
|
2085
1664
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2)
|
|
2086
1665
|
var(--pico-nav-link-spacing-horizontal);
|
|
2087
1666
|
}
|
|
1667
|
+
|
|
2088
1668
|
nav details.dropdown > summary:not([role]):focus-visible {
|
|
2089
1669
|
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
|
|
2090
1670
|
}
|
|
2091
1671
|
|
|
2092
1672
|
details.dropdown > summary + ul {
|
|
2093
|
-
display: flex;
|
|
2094
1673
|
z-index: 99;
|
|
2095
|
-
position: absolute;
|
|
2096
|
-
left: 0;
|
|
2097
|
-
flex-direction: column;
|
|
2098
1674
|
width: 100%;
|
|
2099
|
-
min-width: -moz-fit-content;
|
|
2100
1675
|
min-width: fit-content;
|
|
2101
1676
|
margin: 0;
|
|
2102
1677
|
margin-top: var(--pico-outline-width);
|
|
2103
|
-
padding: 0;
|
|
2104
1678
|
border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
|
|
2105
1679
|
border-radius: var(--pico-border-radius);
|
|
2106
1680
|
background-color: var(--pico-dropdown-background-color);
|
|
@@ -2108,49 +1682,57 @@ details.dropdown > summary + ul {
|
|
|
2108
1682
|
color: var(--pico-dropdown-color);
|
|
2109
1683
|
white-space: nowrap;
|
|
2110
1684
|
opacity: 0;
|
|
2111
|
-
transition:
|
|
2112
|
-
opacity var(--pico-transition),
|
|
1685
|
+
transition: opacity var(--pico-transition),
|
|
2113
1686
|
transform 0s ease-in-out 1s;
|
|
1687
|
+
flex-direction: column;
|
|
1688
|
+
padding: 0;
|
|
1689
|
+
display: flex;
|
|
1690
|
+
position: absolute;
|
|
1691
|
+
left: 0;
|
|
2114
1692
|
}
|
|
1693
|
+
|
|
2115
1694
|
details.dropdown > summary + ul[dir="rtl"] {
|
|
2116
|
-
right: 0;
|
|
2117
1695
|
left: auto;
|
|
1696
|
+
right: 0;
|
|
2118
1697
|
}
|
|
1698
|
+
|
|
2119
1699
|
details.dropdown > summary + ul li {
|
|
2120
1700
|
width: 100%;
|
|
2121
|
-
|
|
2122
|
-
padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
|
|
1701
|
+
padding: calc(var(--pico-form-element-spacing-vertical) * .5)
|
|
2123
1702
|
var(--pico-form-element-spacing-horizontal);
|
|
1703
|
+
margin-bottom: 0;
|
|
2124
1704
|
list-style: none;
|
|
2125
1705
|
}
|
|
1706
|
+
|
|
2126
1707
|
details.dropdown > summary + ul li:first-of-type {
|
|
2127
|
-
margin-top: calc(var(--pico-form-element-spacing-vertical) *
|
|
1708
|
+
margin-top: calc(var(--pico-form-element-spacing-vertical) * .5);
|
|
2128
1709
|
}
|
|
1710
|
+
|
|
2129
1711
|
details.dropdown > summary + ul li:last-of-type {
|
|
2130
|
-
margin-bottom: calc(var(--pico-form-element-spacing-vertical) *
|
|
1712
|
+
margin-bottom: calc(var(--pico-form-element-spacing-vertical) * .5);
|
|
2131
1713
|
}
|
|
1714
|
+
|
|
2132
1715
|
details.dropdown > summary + ul li a {
|
|
2133
|
-
|
|
2134
|
-
margin: calc(var(--pico-form-element-spacing-vertical) * -0.5)
|
|
1716
|
+
margin: calc(var(--pico-form-element-spacing-vertical) * -.5)
|
|
2135
1717
|
calc(var(--pico-form-element-spacing-horizontal) * -1);
|
|
2136
|
-
padding: calc(var(--pico-form-element-spacing-vertical) *
|
|
1718
|
+
padding: calc(var(--pico-form-element-spacing-vertical) * .5)
|
|
2137
1719
|
var(--pico-form-element-spacing-horizontal);
|
|
2138
|
-
overflow: hidden;
|
|
2139
|
-
border-radius: 0;
|
|
2140
1720
|
color: var(--pico-dropdown-color);
|
|
2141
|
-
text-decoration: none;
|
|
2142
1721
|
text-overflow: ellipsis;
|
|
1722
|
+
border-radius: 0;
|
|
1723
|
+
text-decoration: none;
|
|
1724
|
+
display: block;
|
|
1725
|
+
overflow: hidden;
|
|
2143
1726
|
}
|
|
2144
|
-
|
|
2145
|
-
details.dropdown > summary + ul li a:focus,
|
|
2146
|
-
details.dropdown > summary + ul li a:active,
|
|
2147
|
-
details.dropdown > summary + ul li a:focus-visible,
|
|
2148
|
-
details.dropdown > summary + ul li a[aria-current]:not([aria-current="false"]) {
|
|
1727
|
+
|
|
1728
|
+
details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current="false"]) {
|
|
2149
1729
|
background-color: var(--pico-dropdown-hover-background-color);
|
|
2150
1730
|
}
|
|
1731
|
+
|
|
2151
1732
|
details.dropdown > summary + ul li label {
|
|
2152
1733
|
width: 100%;
|
|
2153
1734
|
}
|
|
1735
|
+
|
|
2154
1736
|
details.dropdown > summary + ul li:has(label):hover {
|
|
2155
1737
|
background-color: var(--pico-dropdown-hover-background-color);
|
|
2156
1738
|
}
|
|
@@ -2160,463 +1742,326 @@ details.dropdown[open] > summary {
|
|
|
2160
1742
|
}
|
|
2161
1743
|
|
|
2162
1744
|
details.dropdown[open] > summary + ul {
|
|
2163
|
-
transform: scaleY(1);
|
|
2164
1745
|
opacity: 1;
|
|
2165
|
-
transition:
|
|
2166
|
-
opacity var(--pico-transition),
|
|
1746
|
+
transition: opacity var(--pico-transition),
|
|
2167
1747
|
transform 0s ease-in-out 0s;
|
|
1748
|
+
transform: scaleY(1);
|
|
2168
1749
|
}
|
|
2169
1750
|
|
|
2170
|
-
details.dropdown[open] > summary
|
|
2171
|
-
display: block;
|
|
1751
|
+
details.dropdown[open] > summary:before {
|
|
2172
1752
|
z-index: 1;
|
|
2173
|
-
|
|
1753
|
+
content: "";
|
|
1754
|
+
cursor: default;
|
|
1755
|
+
background: none;
|
|
2174
1756
|
width: 100vw;
|
|
2175
1757
|
height: 100vh;
|
|
1758
|
+
display: block;
|
|
1759
|
+
position: fixed;
|
|
2176
1760
|
inset: 0;
|
|
2177
|
-
background: none;
|
|
2178
|
-
content: "";
|
|
2179
|
-
cursor: default;
|
|
2180
1761
|
}
|
|
2181
1762
|
|
|
2182
1763
|
label > details.dropdown {
|
|
2183
|
-
margin-top: calc(var(--pico-spacing) *
|
|
1764
|
+
margin-top: calc(var(--pico-spacing) * .25);
|
|
2184
1765
|
}
|
|
2185
1766
|
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
*/
|
|
2189
|
-
:where(:scope),
|
|
2190
|
-
:host {
|
|
2191
|
-
--pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
1767
|
+
:where(:scope), :host {
|
|
1768
|
+
--pico-group-box-shadow: 0 0 0 #0000;
|
|
2192
1769
|
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
|
|
2193
1770
|
var(--pico-primary-focus);
|
|
2194
|
-
--pico-group-box-shadow-focus-with-input: 0 0 0
|
|
2195
|
-
}
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
[type="submit"].secondary:focus,
|
|
2199
|
-
[type="button"].secondary:focus,
|
|
2200
|
-
[role="button"].secondary:focus
|
|
2201
|
-
),
|
|
2202
|
-
[role="group"]:has(
|
|
2203
|
-
button.secondary:focus,
|
|
2204
|
-
[type="submit"].secondary:focus,
|
|
2205
|
-
[type="button"].secondary:focus,
|
|
2206
|
-
[role="button"].secondary:focus
|
|
2207
|
-
) {
|
|
1771
|
+
--pico-group-box-shadow-focus-with-input: 0 0 0 .0625rem var(--pico-form-element-border-color);
|
|
1772
|
+
}
|
|
1773
|
+
|
|
1774
|
+
[role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus), [role="group"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus) {
|
|
2208
1775
|
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
|
|
2209
1776
|
var(--pico-secondary-focus);
|
|
2210
1777
|
}
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
[type="submit"].contrast:focus,
|
|
2214
|
-
[type="button"].contrast:focus,
|
|
2215
|
-
[role="button"].contrast:focus
|
|
2216
|
-
),
|
|
2217
|
-
[role="group"]:has(
|
|
2218
|
-
button.contrast:focus,
|
|
2219
|
-
[type="submit"].contrast:focus,
|
|
2220
|
-
[type="button"].contrast:focus,
|
|
2221
|
-
[role="button"].contrast:focus
|
|
2222
|
-
) {
|
|
1778
|
+
|
|
1779
|
+
[role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus), [role="group"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus) {
|
|
2223
1780
|
--pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
|
|
2224
1781
|
var(--pico-contrast-focus);
|
|
2225
1782
|
}
|
|
2226
1783
|
|
|
2227
|
-
[role="search"],
|
|
2228
|
-
[role="group"] {
|
|
2229
|
-
display: inline-flex;
|
|
2230
|
-
position: relative;
|
|
1784
|
+
[role="search"], [role="group"] {
|
|
2231
1785
|
width: 100%;
|
|
2232
1786
|
margin-bottom: var(--pico-spacing);
|
|
2233
1787
|
border-radius: var(--pico-border-radius);
|
|
2234
|
-
box-shadow: var(--pico-group-box-shadow, 0 0 0
|
|
1788
|
+
box-shadow: var(--pico-group-box-shadow, 0 0 0 #0000);
|
|
2235
1789
|
vertical-align: middle;
|
|
2236
1790
|
transition: box-shadow var(--pico-transition);
|
|
2237
|
-
|
|
2238
|
-
[role="search"] > *,
|
|
2239
|
-
[role="search"] input:not([type="checkbox"], [type="radio"]),
|
|
2240
|
-
[role="search"] select,
|
|
2241
|
-
[role="group"] > *,
|
|
2242
|
-
[role="group"] input:not([type="checkbox"], [type="radio"]),
|
|
2243
|
-
[role="group"] select {
|
|
1791
|
+
display: inline-flex;
|
|
2244
1792
|
position: relative;
|
|
2245
|
-
|
|
1793
|
+
}
|
|
1794
|
+
|
|
1795
|
+
[role="search"] > *, [role="search"] input:not([type="checkbox"], [type="radio"]), [role="search"] select, [role="group"] > *, [role="group"] input:not([type="checkbox"], [type="radio"]), [role="group"] select {
|
|
1796
|
+
flex: auto;
|
|
2246
1797
|
margin-bottom: 0;
|
|
1798
|
+
position: relative;
|
|
2247
1799
|
}
|
|
2248
|
-
|
|
2249
|
-
[role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
|
|
2250
|
-
[role="search"] select:not(:first-child),
|
|
2251
|
-
[role="group"] > *:not(:first-child),
|
|
2252
|
-
[role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
|
|
2253
|
-
[role="group"] select:not(:first-child) {
|
|
2254
|
-
margin-left: 0;
|
|
1800
|
+
|
|
1801
|
+
[role="search"] > :not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), [role="group"] > :not(:first-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"] select:not(:first-child) {
|
|
2255
1802
|
border-top-left-radius: 0;
|
|
2256
1803
|
border-bottom-left-radius: 0;
|
|
1804
|
+
margin-left: 0;
|
|
2257
1805
|
}
|
|
2258
|
-
|
|
2259
|
-
[role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child),
|
|
2260
|
-
[role="search"] select:not(:last-child),
|
|
2261
|
-
[role="group"] > *:not(:last-child),
|
|
2262
|
-
[role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child),
|
|
2263
|
-
[role="group"] select:not(:last-child) {
|
|
1806
|
+
|
|
1807
|
+
[role="search"] > :not(:last-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="search"] select:not(:last-child), [role="group"] > :not(:last-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="group"] select:not(:last-child) {
|
|
2264
1808
|
border-top-right-radius: 0;
|
|
2265
1809
|
border-bottom-right-radius: 0;
|
|
2266
1810
|
}
|
|
2267
|
-
|
|
2268
|
-
[role="search"] input:not([type="checkbox"], [type="radio"]):focus,
|
|
2269
|
-
[role="search"] select:focus,
|
|
2270
|
-
[role="group"] > *:focus,
|
|
2271
|
-
[role="group"] input:not([type="checkbox"], [type="radio"]):focus,
|
|
2272
|
-
[role="group"] select:focus {
|
|
1811
|
+
|
|
1812
|
+
[role="search"] > :focus, [role="search"] input:not([type="checkbox"], [type="radio"]):focus, [role="search"] select:focus, [role="group"] > :focus, [role="group"] input:not([type="checkbox"], [type="radio"]):focus, [role="group"] select:focus {
|
|
2273
1813
|
z-index: 2;
|
|
2274
1814
|
}
|
|
2275
|
-
|
|
2276
|
-
[role="search"] [type="submit"]:not(:first-child),
|
|
2277
|
-
[role="search"] [type="reset"]:not(:first-child),
|
|
2278
|
-
[role="search"] [type="button"]:not(:first-child),
|
|
2279
|
-
[role="search"] [role="button"]:not(:first-child),
|
|
2280
|
-
[role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
|
|
2281
|
-
[role="search"] select:not(:first-child),
|
|
2282
|
-
[role="group"] button:not(:first-child),
|
|
2283
|
-
[role="group"] [type="submit"]:not(:first-child),
|
|
2284
|
-
[role="group"] [type="reset"]:not(:first-child),
|
|
2285
|
-
[role="group"] [type="button"]:not(:first-child),
|
|
2286
|
-
[role="group"] [role="button"]:not(:first-child),
|
|
2287
|
-
[role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
|
|
2288
|
-
[role="group"] select:not(:first-child) {
|
|
1815
|
+
|
|
1816
|
+
[role="search"] button:not(:first-child), [role="search"] [type="submit"]:not(:first-child), [role="search"] [type="reset"]:not(:first-child), [role="search"] [type="button"]:not(:first-child), [role="search"] [role="button"]:not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), [role="group"] button:not(:first-child), [role="group"] [type="submit"]:not(:first-child), [role="group"] [type="reset"]:not(:first-child), [role="group"] [type="button"]:not(:first-child), [role="group"] [role="button"]:not(:first-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"] select:not(:first-child) {
|
|
2289
1817
|
margin-left: calc(var(--pico-border-width) * -1);
|
|
2290
1818
|
}
|
|
2291
|
-
|
|
2292
|
-
[role="search"] [type="submit"],
|
|
2293
|
-
[role="search"] [type="reset"],
|
|
2294
|
-
[role="search"] [type="button"],
|
|
2295
|
-
[role="search"] [role="button"],
|
|
2296
|
-
[role="group"] button,
|
|
2297
|
-
[role="group"] [type="submit"],
|
|
2298
|
-
[role="group"] [type="reset"],
|
|
2299
|
-
[role="group"] [type="button"],
|
|
2300
|
-
[role="group"] [role="button"] {
|
|
1819
|
+
|
|
1820
|
+
[role="search"] button, [role="search"] [type="submit"], [role="search"] [type="reset"], [role="search"] [type="button"], [role="search"] [role="button"], [role="group"] button, [role="group"] [type="submit"], [role="group"] [type="reset"], [role="group"] [type="button"], [role="group"] [role="button"] {
|
|
2301
1821
|
width: auto;
|
|
2302
1822
|
}
|
|
1823
|
+
|
|
2303
1824
|
@supports selector(:has(*)) {
|
|
2304
|
-
[role="search"]:has(
|
|
2305
|
-
button:focus,
|
|
2306
|
-
[type="submit"]:focus,
|
|
2307
|
-
[type="button"]:focus,
|
|
2308
|
-
[role="button"]:focus
|
|
2309
|
-
),
|
|
2310
|
-
[role="group"]:has(
|
|
2311
|
-
button:focus,
|
|
2312
|
-
[type="submit"]:focus,
|
|
2313
|
-
[type="button"]:focus,
|
|
2314
|
-
[role="button"]:focus
|
|
2315
|
-
) {
|
|
1825
|
+
[role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
|
|
2316
1826
|
--pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);
|
|
2317
1827
|
}
|
|
2318
|
-
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
[type="button"]:focus,
|
|
2322
|
-
[role="button"]:focus
|
|
2323
|
-
)
|
|
2324
|
-
input:not([type="checkbox"], [type="radio"]),
|
|
2325
|
-
[role="search"]:has(
|
|
2326
|
-
button:focus,
|
|
2327
|
-
[type="submit"]:focus,
|
|
2328
|
-
[type="button"]:focus,
|
|
2329
|
-
[role="button"]:focus
|
|
2330
|
-
)
|
|
2331
|
-
select,
|
|
2332
|
-
[role="group"]:has(
|
|
2333
|
-
button:focus,
|
|
2334
|
-
[type="submit"]:focus,
|
|
2335
|
-
[type="button"]:focus,
|
|
2336
|
-
[role="button"]:focus
|
|
2337
|
-
)
|
|
2338
|
-
input:not([type="checkbox"], [type="radio"]),
|
|
2339
|
-
[role="group"]:has(
|
|
2340
|
-
button:focus,
|
|
2341
|
-
[type="submit"]:focus,
|
|
2342
|
-
[type="button"]:focus,
|
|
2343
|
-
[role="button"]:focus
|
|
2344
|
-
)
|
|
2345
|
-
select {
|
|
2346
|
-
border-color: transparent;
|
|
1828
|
+
|
|
1829
|
+
[role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select, [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
|
|
1830
|
+
border-color: #0000;
|
|
2347
1831
|
}
|
|
2348
|
-
|
|
2349
|
-
[role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
|
|
1832
|
+
|
|
1833
|
+
[role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
|
|
2350
1834
|
--pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);
|
|
2351
1835
|
}
|
|
2352
|
-
|
|
2353
|
-
[role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
|
|
2354
|
-
[type="submit"],
|
|
2355
|
-
[role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
|
|
2356
|
-
[type="button"],
|
|
2357
|
-
[role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
|
|
2358
|
-
[role="button"],
|
|
2359
|
-
[role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button,
|
|
2360
|
-
[role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
|
|
2361
|
-
[type="submit"],
|
|
2362
|
-
[role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
|
|
2363
|
-
[type="button"],
|
|
2364
|
-
[role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
|
|
2365
|
-
[role="button"] {
|
|
1836
|
+
|
|
1837
|
+
[role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
|
|
2366
1838
|
--pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
|
|
2367
1839
|
--pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
|
|
2368
1840
|
}
|
|
2369
|
-
|
|
2370
|
-
[role="search"] [type="submit"]:focus,
|
|
2371
|
-
[role="search"] [type="reset"]:focus,
|
|
2372
|
-
[role="search"] [type="button"]:focus,
|
|
2373
|
-
[role="search"] [role="button"]:focus,
|
|
2374
|
-
[role="group"] button:focus,
|
|
2375
|
-
[role="group"] [type="submit"]:focus,
|
|
2376
|
-
[role="group"] [type="reset"]:focus,
|
|
2377
|
-
[role="group"] [type="button"]:focus,
|
|
2378
|
-
[role="group"] [role="button"]:focus {
|
|
1841
|
+
|
|
1842
|
+
[role="search"] button:focus, [role="search"] [type="submit"]:focus, [role="search"] [type="reset"]:focus, [role="search"] [type="button"]:focus, [role="search"] [role="button"]:focus, [role="group"] button:focus, [role="group"] [type="submit"]:focus, [role="group"] [type="reset"]:focus, [role="group"] [type="button"]:focus, [role="group"] [role="button"]:focus {
|
|
2379
1843
|
box-shadow: none;
|
|
2380
1844
|
}
|
|
2381
1845
|
}
|
|
2382
1846
|
|
|
2383
|
-
[role="search"] >
|
|
1847
|
+
[role="search"] > :first-child {
|
|
2384
1848
|
border-top-left-radius: 5rem;
|
|
2385
1849
|
border-bottom-left-radius: 5rem;
|
|
2386
1850
|
}
|
|
2387
|
-
|
|
1851
|
+
|
|
1852
|
+
[role="search"] > :last-child {
|
|
2388
1853
|
border-top-right-radius: 5rem;
|
|
2389
1854
|
border-bottom-right-radius: 5rem;
|
|
2390
1855
|
}
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
*/
|
|
2394
|
-
:where(:scope),
|
|
2395
|
-
:host {
|
|
1856
|
+
|
|
1857
|
+
:where(:scope), :host {
|
|
2396
1858
|
--pico-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
|
|
2397
1859
|
}
|
|
2398
|
-
|
|
2399
|
-
:host {
|
|
2400
|
-
--pico-loading-spinner-opacity:
|
|
1860
|
+
|
|
1861
|
+
:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
|
|
1862
|
+
--pico-loading-spinner-opacity: .5;
|
|
2401
1863
|
}
|
|
2402
1864
|
|
|
2403
|
-
[aria-busy="true"]:not(input, select, textarea, html, form):not(
|
|
2404
|
-
:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])
|
|
2405
|
-
) {
|
|
2406
|
-
/* :where() zeroes the specificity of the button list inside :not(), so this rule stays
|
|
2407
|
-
* low-specificity and doesn't override the more specific button rules below */
|
|
1865
|
+
[aria-busy="true"]:not(input, select, textarea, html, form):not(:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])) {
|
|
2408
1866
|
white-space: nowrap;
|
|
2409
1867
|
}
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
width: 1em;
|
|
2413
|
-
height: 1em;
|
|
1868
|
+
|
|
1869
|
+
[aria-busy="true"]:not(input, select, textarea, html, form):before {
|
|
2414
1870
|
background-image: var(--pico-icon-loading);
|
|
2415
|
-
background-size: 1em auto;
|
|
2416
|
-
background-repeat: no-repeat;
|
|
2417
1871
|
content: "";
|
|
2418
|
-
vertical-align:
|
|
1872
|
+
vertical-align: -.125em;
|
|
1873
|
+
background-repeat: no-repeat;
|
|
1874
|
+
background-size: 1em;
|
|
1875
|
+
width: 1em;
|
|
1876
|
+
height: 1em;
|
|
1877
|
+
display: inline-block;
|
|
2419
1878
|
}
|
|
2420
|
-
|
|
2421
|
-
|
|
1879
|
+
|
|
1880
|
+
[aria-busy="true"]:not(input, select, textarea, html, form):not(:empty):before {
|
|
1881
|
+
margin-inline-end: calc(var(--pico-spacing) * .5);
|
|
2422
1882
|
}
|
|
1883
|
+
|
|
2423
1884
|
[aria-busy="true"]:not(input, select, textarea, html, form):empty {
|
|
2424
1885
|
text-align: center;
|
|
2425
1886
|
}
|
|
2426
1887
|
|
|
2427
|
-
button[aria-busy="true"],
|
|
2428
|
-
[type="submit"][aria-busy="true"],
|
|
2429
|
-
[type="button"][aria-busy="true"],
|
|
2430
|
-
[type="reset"][aria-busy="true"],
|
|
2431
|
-
[role="button"][aria-busy="true"],
|
|
2432
|
-
a[aria-busy="true"] {
|
|
1888
|
+
button[aria-busy="true"], [type="submit"][aria-busy="true"], [type="button"][aria-busy="true"], [type="reset"][aria-busy="true"], [role="button"][aria-busy="true"], a[aria-busy="true"] {
|
|
2433
1889
|
pointer-events: none;
|
|
2434
1890
|
}
|
|
2435
1891
|
|
|
2436
|
-
|
|
2437
|
-
|
|
1892
|
+
button, [type="submit"], [type="button"], [type="reset"], [role="button"] {
|
|
1893
|
+
&[aria-busy="true"]:not(:empty) {
|
|
1894
|
+
color: #0000;
|
|
2438
1895
|
position: relative;
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
button[aria-busy="true"]:not(:empty) > *, [type="submit"][aria-busy="true"]:not(:empty) > *, [type="button"][aria-busy="true"]:not(:empty) > *, [type="reset"][aria-busy="true"]:not(:empty) > *, [role="button"][aria-busy="true"]:not(:empty) > * {
|
|
1896
|
+
|
|
1897
|
+
& > * {
|
|
2442
1898
|
opacity: 0;
|
|
2443
1899
|
}
|
|
2444
|
-
|
|
2445
|
-
|
|
1900
|
+
|
|
1901
|
+
&:before {
|
|
2446
1902
|
margin: auto;
|
|
1903
|
+
position: absolute;
|
|
2447
1904
|
inset: 0;
|
|
2448
1905
|
}
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
2452
|
-
:where(:scope),
|
|
2453
|
-
:
|
|
2454
|
-
--pico-modal-overlay-backdrop-filter: blur(0.375rem);
|
|
1906
|
+
}
|
|
1907
|
+
}
|
|
1908
|
+
|
|
1909
|
+
:where(:scope), :host {
|
|
1910
|
+
--pico-modal-overlay-backdrop-filter: blur(.375rem);
|
|
2455
1911
|
--pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
|
2456
1912
|
}
|
|
2457
|
-
|
|
2458
|
-
:host {
|
|
2459
|
-
--pico-modal-overlay-background-color: light-dark(
|
|
2460
|
-
rgba(232, 234, 237, 0.75),
|
|
2461
|
-
rgba(7.5, 8.5, 10, 0.75)
|
|
2462
|
-
);
|
|
1913
|
+
|
|
1914
|
+
:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
|
|
1915
|
+
--pico-modal-overlay-background-color: light-dark(#e8eaedbf, #08090abf);
|
|
2463
1916
|
}
|
|
2464
1917
|
|
|
2465
|
-
:scope,
|
|
2466
|
-
:host {
|
|
1918
|
+
:scope, :host {
|
|
2467
1919
|
--pico-scrollbar-width: 0px;
|
|
2468
1920
|
}
|
|
2469
1921
|
|
|
2470
1922
|
dialog {
|
|
2471
|
-
display: flex;
|
|
2472
1923
|
z-index: 999;
|
|
2473
|
-
position: fixed;
|
|
2474
|
-
top: 0;
|
|
2475
|
-
right: 0;
|
|
2476
|
-
bottom: 0;
|
|
2477
|
-
left: 0;
|
|
2478
|
-
align-items: center;
|
|
2479
|
-
justify-content: center;
|
|
2480
1924
|
width: inherit;
|
|
2481
1925
|
min-width: 100%;
|
|
2482
1926
|
height: inherit;
|
|
2483
1927
|
min-height: 100%;
|
|
2484
|
-
padding: 0;
|
|
2485
|
-
border: 0;
|
|
2486
1928
|
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
|
|
2487
1929
|
background-color: var(--pico-modal-overlay-background-color);
|
|
2488
1930
|
color: var(--pico-color);
|
|
1931
|
+
border: 0;
|
|
1932
|
+
justify-content: center;
|
|
1933
|
+
align-items: center;
|
|
1934
|
+
padding: 0;
|
|
1935
|
+
display: flex;
|
|
1936
|
+
position: fixed;
|
|
1937
|
+
inset: 0;
|
|
2489
1938
|
}
|
|
1939
|
+
|
|
2490
1940
|
dialog > article {
|
|
2491
1941
|
width: 100%;
|
|
2492
1942
|
max-height: calc(100vh - var(--pico-spacing) * 2);
|
|
2493
1943
|
margin: var(--pico-spacing);
|
|
2494
1944
|
overflow: auto;
|
|
2495
1945
|
}
|
|
2496
|
-
|
|
1946
|
+
|
|
1947
|
+
@media (width >= 576px) {
|
|
2497
1948
|
dialog > article {
|
|
2498
1949
|
max-width: 510px;
|
|
2499
1950
|
}
|
|
2500
1951
|
}
|
|
2501
|
-
|
|
1952
|
+
|
|
1953
|
+
@media (width >= 768px) {
|
|
2502
1954
|
dialog > article {
|
|
2503
1955
|
max-width: 700px;
|
|
2504
1956
|
}
|
|
2505
1957
|
}
|
|
1958
|
+
|
|
2506
1959
|
dialog > article > header > * {
|
|
2507
1960
|
margin-bottom: 0;
|
|
2508
1961
|
}
|
|
2509
|
-
|
|
2510
|
-
dialog > article > header :is(a, button)[rel="prev"] {
|
|
1962
|
+
|
|
1963
|
+
dialog > article > header .close, dialog > article > header :is(a, button)[rel="prev"] {
|
|
2511
1964
|
margin: 0;
|
|
2512
1965
|
margin-left: var(--pico-spacing);
|
|
2513
|
-
padding: 0;
|
|
2514
1966
|
float: right;
|
|
1967
|
+
padding: 0;
|
|
2515
1968
|
}
|
|
1969
|
+
|
|
2516
1970
|
dialog > article > footer {
|
|
2517
1971
|
text-align: end;
|
|
2518
1972
|
}
|
|
2519
|
-
|
|
2520
|
-
dialog > article > footer [role="button"] {
|
|
1973
|
+
|
|
1974
|
+
dialog > article > footer button, dialog > article > footer [role="button"] {
|
|
2521
1975
|
margin-bottom: 0;
|
|
2522
1976
|
}
|
|
2523
|
-
|
|
2524
|
-
dialog > article > footer [role="button"]:not(:first-of-type) {
|
|
2525
|
-
margin-left: calc(var(--pico-spacing) *
|
|
1977
|
+
|
|
1978
|
+
dialog > article > footer button:not(:first-of-type), dialog > article > footer [role="button"]:not(:first-of-type) {
|
|
1979
|
+
margin-left: calc(var(--pico-spacing) * .5);
|
|
2526
1980
|
}
|
|
2527
|
-
|
|
2528
|
-
dialog > article :is(a, button)[rel="prev"] {
|
|
2529
|
-
display: block;
|
|
1981
|
+
|
|
1982
|
+
dialog > article .close, dialog > article :is(a, button)[rel="prev"] {
|
|
2530
1983
|
width: 1rem;
|
|
2531
1984
|
height: 1rem;
|
|
2532
1985
|
margin-top: calc(var(--pico-spacing) * -1);
|
|
2533
1986
|
margin-bottom: var(--pico-spacing);
|
|
2534
|
-
margin-left: auto;
|
|
2535
|
-
border: none;
|
|
2536
1987
|
background-image: var(--pico-icon-close);
|
|
1988
|
+
opacity: .5;
|
|
1989
|
+
transition: opacity var(--pico-transition);
|
|
1990
|
+
background-color: #0000;
|
|
2537
1991
|
background-position: center;
|
|
2538
|
-
background-size: auto 1rem;
|
|
2539
1992
|
background-repeat: no-repeat;
|
|
2540
|
-
background-
|
|
2541
|
-
|
|
2542
|
-
|
|
1993
|
+
background-size: auto 1rem;
|
|
1994
|
+
border: none;
|
|
1995
|
+
margin-left: auto;
|
|
1996
|
+
display: block;
|
|
2543
1997
|
}
|
|
2544
|
-
|
|
2545
|
-
dialog
|
|
2546
|
-
> article
|
|
2547
|
-
:is(a, button)[rel="prev"]:is(
|
|
2548
|
-
[aria-current]:not([aria-current="false"]),
|
|
2549
|
-
:hover,
|
|
2550
|
-
:active,
|
|
2551
|
-
:focus
|
|
2552
|
-
) {
|
|
1998
|
+
|
|
1999
|
+
dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
|
|
2553
2000
|
opacity: 1;
|
|
2554
2001
|
}
|
|
2555
|
-
|
|
2556
|
-
dialog[open="false"] {
|
|
2002
|
+
|
|
2003
|
+
dialog:not([open]), dialog[open="false"] {
|
|
2557
2004
|
display: none;
|
|
2558
2005
|
}
|
|
2559
2006
|
|
|
2560
2007
|
.modal-is-open {
|
|
2561
2008
|
padding-right: var(--pico-scrollbar-width, 0px);
|
|
2562
|
-
overflow: hidden;
|
|
2563
2009
|
pointer-events: none;
|
|
2564
2010
|
touch-action: none;
|
|
2011
|
+
overflow: hidden;
|
|
2565
2012
|
}
|
|
2013
|
+
|
|
2566
2014
|
.modal-is-open dialog {
|
|
2567
2015
|
pointer-events: auto;
|
|
2568
2016
|
touch-action: auto;
|
|
2569
2017
|
}
|
|
2570
2018
|
|
|
2571
|
-
:where(.modal-is-opening, .modal-is-closing) dialog,
|
|
2572
|
-
:
|
|
2573
|
-
animation-duration: 0.2s;
|
|
2019
|
+
:where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog > article {
|
|
2020
|
+
animation-duration: .2s;
|
|
2574
2021
|
animation-timing-function: ease-in-out;
|
|
2575
2022
|
animation-fill-mode: both;
|
|
2576
2023
|
}
|
|
2024
|
+
|
|
2577
2025
|
:where(.modal-is-opening, .modal-is-closing) dialog {
|
|
2578
|
-
animation-duration: 0.8s;
|
|
2579
2026
|
animation-name: modal-overlay;
|
|
2027
|
+
animation-duration: .8s;
|
|
2580
2028
|
}
|
|
2029
|
+
|
|
2581
2030
|
:where(.modal-is-opening, .modal-is-closing) dialog > article {
|
|
2582
|
-
animation-delay: 0.2s;
|
|
2583
2031
|
animation-name: modal;
|
|
2032
|
+
animation-delay: .2s;
|
|
2584
2033
|
}
|
|
2585
2034
|
|
|
2586
|
-
.modal-is-closing dialog,
|
|
2587
|
-
.modal-is-closing dialog > article {
|
|
2588
|
-
animation-delay: 0s;
|
|
2035
|
+
.modal-is-closing dialog, .modal-is-closing dialog > article {
|
|
2589
2036
|
animation-direction: reverse;
|
|
2037
|
+
animation-delay: 0s;
|
|
2590
2038
|
}
|
|
2591
2039
|
|
|
2592
2040
|
@keyframes modal-overlay {
|
|
2593
2041
|
from {
|
|
2594
2042
|
backdrop-filter: none;
|
|
2595
|
-
background-color:
|
|
2043
|
+
background-color: #0000;
|
|
2596
2044
|
}
|
|
2597
2045
|
}
|
|
2046
|
+
|
|
2598
2047
|
@keyframes modal {
|
|
2599
2048
|
from {
|
|
2600
|
-
transform: translateY(-100%);
|
|
2601
2049
|
opacity: 0;
|
|
2050
|
+
transform: translateY(-100%);
|
|
2602
2051
|
}
|
|
2603
2052
|
}
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
:where(:scope),
|
|
2608
|
-
:host {
|
|
2609
|
-
--pico-nav-element-spacing-horizontal: 0.5rem;
|
|
2053
|
+
|
|
2054
|
+
:where(:scope), :host {
|
|
2055
|
+
--pico-nav-element-spacing-horizontal: .5rem;
|
|
2610
2056
|
--pico-nav-breadcrumb-divider: ">";
|
|
2611
2057
|
}
|
|
2612
2058
|
|
|
2613
|
-
:where(nav li)
|
|
2059
|
+
:where(nav li):before {
|
|
2614
2060
|
float: left;
|
|
2615
2061
|
content: "";
|
|
2616
2062
|
}
|
|
2617
2063
|
|
|
2618
|
-
nav,
|
|
2619
|
-
nav ul {
|
|
2064
|
+
nav, nav ul {
|
|
2620
2065
|
display: flex;
|
|
2621
2066
|
}
|
|
2622
2067
|
|
|
@@ -2624,41 +2069,41 @@ nav {
|
|
|
2624
2069
|
justify-content: space-between;
|
|
2625
2070
|
overflow: visible;
|
|
2626
2071
|
}
|
|
2627
|
-
|
|
2628
|
-
nav ul {
|
|
2072
|
+
|
|
2073
|
+
nav ol, nav ul {
|
|
2629
2074
|
align-items: center;
|
|
2630
2075
|
margin-bottom: 0;
|
|
2631
2076
|
padding: 0;
|
|
2632
2077
|
list-style: none;
|
|
2633
2078
|
}
|
|
2634
|
-
|
|
2635
|
-
nav ul:first-of-type {
|
|
2079
|
+
|
|
2080
|
+
nav ol:first-of-type, nav ul:first-of-type {
|
|
2636
2081
|
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
|
|
2637
2082
|
}
|
|
2638
|
-
|
|
2639
|
-
nav ul:last-of-type {
|
|
2083
|
+
|
|
2084
|
+
nav ol:last-of-type, nav ul:last-of-type {
|
|
2640
2085
|
margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
|
|
2641
2086
|
}
|
|
2087
|
+
|
|
2642
2088
|
nav li {
|
|
2643
|
-
display: inline-block;
|
|
2644
|
-
margin: 0;
|
|
2645
2089
|
padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
|
|
2090
|
+
margin: 0;
|
|
2091
|
+
display: inline-block;
|
|
2646
2092
|
}
|
|
2093
|
+
|
|
2647
2094
|
nav li :where(a, [role="link"]) {
|
|
2648
|
-
display: inline-block;
|
|
2649
2095
|
margin: calc(var(--pico-nav-link-spacing-vertical) * -1)
|
|
2650
2096
|
calc(var(--pico-nav-link-spacing-horizontal) * -1);
|
|
2651
2097
|
padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);
|
|
2652
2098
|
border-radius: var(--pico-border-radius);
|
|
2099
|
+
display: inline-block;
|
|
2653
2100
|
}
|
|
2101
|
+
|
|
2654
2102
|
nav li :where(a, [role="link"]):not(:hover) {
|
|
2655
2103
|
text-decoration: none;
|
|
2656
2104
|
}
|
|
2657
|
-
|
|
2658
|
-
nav li [role="button"],
|
|
2659
|
-
nav li [type="button"],
|
|
2660
|
-
nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
|
|
2661
|
-
nav li select {
|
|
2105
|
+
|
|
2106
|
+
nav li button, nav li [role="button"], nav li [type="button"], nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), nav li select {
|
|
2662
2107
|
height: auto;
|
|
2663
2108
|
margin-right: inherit;
|
|
2664
2109
|
margin-bottom: 0;
|
|
@@ -2666,116 +2111,115 @@ nav li select {
|
|
|
2666
2111
|
padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2)
|
|
2667
2112
|
var(--pico-nav-link-spacing-horizontal);
|
|
2668
2113
|
}
|
|
2114
|
+
|
|
2669
2115
|
nav[aria-label="breadcrumb"] {
|
|
2670
|
-
align-items: center;
|
|
2671
2116
|
justify-content: start;
|
|
2117
|
+
align-items: center;
|
|
2672
2118
|
}
|
|
2119
|
+
|
|
2673
2120
|
nav[aria-label="breadcrumb"] ul li:not(:first-child) {
|
|
2674
2121
|
margin-inline-start: var(--pico-nav-link-spacing-horizontal);
|
|
2675
2122
|
}
|
|
2123
|
+
|
|
2676
2124
|
nav[aria-label="breadcrumb"] ul li a {
|
|
2677
2125
|
margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 0;
|
|
2678
2126
|
margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) * -1);
|
|
2679
2127
|
}
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
position: absolute;
|
|
2128
|
+
|
|
2129
|
+
nav[aria-label="breadcrumb"] ul li:not(:last-child):after {
|
|
2683
2130
|
width: calc(var(--pico-nav-link-spacing-horizontal) * 4);
|
|
2684
2131
|
margin: 0 calc(var(--pico-nav-link-spacing-horizontal) * -1);
|
|
2685
2132
|
content: var(--pico-nav-breadcrumb-divider);
|
|
2686
2133
|
color: var(--pico-muted-color);
|
|
2687
2134
|
text-align: center;
|
|
2688
|
-
text-decoration: none;
|
|
2689
2135
|
white-space: nowrap;
|
|
2136
|
+
text-decoration: none;
|
|
2137
|
+
display: inline-block;
|
|
2138
|
+
position: absolute;
|
|
2690
2139
|
}
|
|
2140
|
+
|
|
2691
2141
|
nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]) {
|
|
2692
|
-
background-color: transparent;
|
|
2693
2142
|
color: inherit;
|
|
2694
|
-
text-decoration: none;
|
|
2695
2143
|
pointer-events: none;
|
|
2144
|
+
background-color: #0000;
|
|
2145
|
+
text-decoration: none;
|
|
2696
2146
|
}
|
|
2697
2147
|
|
|
2698
|
-
aside nav,
|
|
2699
|
-
aside ol,
|
|
2700
|
-
aside ul,
|
|
2701
|
-
aside li {
|
|
2148
|
+
aside nav, aside ol, aside ul, aside li {
|
|
2702
2149
|
display: block;
|
|
2703
2150
|
}
|
|
2151
|
+
|
|
2704
2152
|
aside li {
|
|
2705
|
-
padding: calc(var(--pico-nav-element-spacing-vertical) *
|
|
2153
|
+
padding: calc(var(--pico-nav-element-spacing-vertical) * .5)
|
|
2706
2154
|
var(--pico-nav-element-spacing-horizontal);
|
|
2707
2155
|
}
|
|
2156
|
+
|
|
2708
2157
|
aside li a {
|
|
2709
2158
|
display: block;
|
|
2710
2159
|
}
|
|
2160
|
+
|
|
2711
2161
|
aside li [role="button"] {
|
|
2712
2162
|
margin: inherit;
|
|
2713
2163
|
}
|
|
2714
2164
|
|
|
2715
|
-
[dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child)
|
|
2165
|
+
[dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child):after {
|
|
2716
2166
|
content: "\\";
|
|
2717
2167
|
}
|
|
2718
2168
|
|
|
2719
|
-
|
|
2720
|
-
* Progress
|
|
2721
|
-
*/
|
|
2722
|
-
:where(:scope, [data-theme="light"], [data-theme="dark"]),
|
|
2723
|
-
:host {
|
|
2169
|
+
:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
|
|
2724
2170
|
--pico-progress-background-color: light-dark(#dfe3eb, #202632);
|
|
2725
2171
|
--pico-progress-color: var(--pico-primary-background);
|
|
2726
2172
|
}
|
|
2727
2173
|
|
|
2728
2174
|
progress {
|
|
2729
|
-
display: inline-block;
|
|
2730
2175
|
vertical-align: baseline;
|
|
2731
|
-
}
|
|
2732
|
-
|
|
2733
|
-
progress {
|
|
2734
2176
|
-webkit-appearance: none;
|
|
2735
2177
|
-moz-appearance: none;
|
|
2736
|
-
display: inline-block;
|
|
2737
2178
|
appearance: none;
|
|
2738
2179
|
width: 100%;
|
|
2739
|
-
height:
|
|
2740
|
-
margin-bottom: calc(var(--pico-spacing) *
|
|
2741
|
-
overflow: hidden;
|
|
2742
|
-
border: 0;
|
|
2180
|
+
height: .5rem;
|
|
2181
|
+
margin-bottom: calc(var(--pico-spacing) * .5);
|
|
2743
2182
|
border-radius: var(--pico-border-radius);
|
|
2744
2183
|
background-color: var(--pico-progress-background-color);
|
|
2745
2184
|
color: var(--pico-progress-color);
|
|
2185
|
+
border: 0;
|
|
2186
|
+
display: inline-block;
|
|
2187
|
+
overflow: hidden;
|
|
2746
2188
|
}
|
|
2189
|
+
|
|
2747
2190
|
progress::-webkit-progress-bar {
|
|
2748
2191
|
border-radius: var(--pico-border-radius);
|
|
2749
2192
|
background: none;
|
|
2750
2193
|
}
|
|
2194
|
+
|
|
2751
2195
|
progress[value]::-webkit-progress-value {
|
|
2752
2196
|
background-color: var(--pico-progress-color);
|
|
2753
2197
|
-webkit-transition: inline-size var(--pico-transition);
|
|
2754
2198
|
transition: inline-size var(--pico-transition);
|
|
2755
2199
|
}
|
|
2200
|
+
|
|
2756
2201
|
progress::-moz-progress-bar {
|
|
2757
2202
|
background-color: var(--pico-progress-color);
|
|
2758
2203
|
}
|
|
2204
|
+
|
|
2759
2205
|
@media (prefers-reduced-motion: no-preference) {
|
|
2760
2206
|
progress:indeterminate {
|
|
2761
2207
|
background: var(--pico-progress-background-color)
|
|
2762
|
-
linear-gradient(
|
|
2763
|
-
to right,
|
|
2208
|
+
linear-gradient(to right,
|
|
2764
2209
|
var(--pico-progress-color) 30%,
|
|
2765
|
-
var(--pico-progress-background-color) 30%
|
|
2766
|
-
)
|
|
2210
|
+
var(--pico-progress-background-color) 30%)
|
|
2767
2211
|
top left/150% 150% no-repeat;
|
|
2768
|
-
animation:
|
|
2212
|
+
animation: 1s linear infinite progress-indeterminate;
|
|
2769
2213
|
}
|
|
2214
|
+
|
|
2770
2215
|
progress:indeterminate[value]::-webkit-progress-value {
|
|
2771
|
-
background-color:
|
|
2216
|
+
background-color: #0000;
|
|
2772
2217
|
}
|
|
2218
|
+
|
|
2773
2219
|
progress:indeterminate::-moz-progress-bar {
|
|
2774
|
-
background-color:
|
|
2220
|
+
background-color: #0000;
|
|
2775
2221
|
}
|
|
2776
|
-
}
|
|
2777
2222
|
|
|
2778
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
2779
2223
|
[dir="rtl"] progress:indeterminate {
|
|
2780
2224
|
animation-direction: reverse;
|
|
2781
2225
|
}
|
|
@@ -2785,16 +2229,13 @@ progress::-moz-progress-bar {
|
|
|
2785
2229
|
0% {
|
|
2786
2230
|
background-position: 200% 0;
|
|
2787
2231
|
}
|
|
2232
|
+
|
|
2788
2233
|
100% {
|
|
2789
2234
|
background-position: -200% 0;
|
|
2790
2235
|
}
|
|
2791
2236
|
}
|
|
2792
2237
|
|
|
2793
|
-
|
|
2794
|
-
* Tooltip ([data-tooltip])
|
|
2795
|
-
*/
|
|
2796
|
-
:where(:scope, [data-theme="light"], [data-theme="dark"]),
|
|
2797
|
-
:host {
|
|
2238
|
+
:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
|
|
2798
2239
|
--pico-tooltip-background-color: var(--pico-contrast-background);
|
|
2799
2240
|
--pico-tooltip-color: var(--pico-contrast-inverse);
|
|
2800
2241
|
}
|
|
@@ -2802,176 +2243,162 @@ progress::-moz-progress-bar {
|
|
|
2802
2243
|
[data-tooltip] {
|
|
2803
2244
|
position: relative;
|
|
2804
2245
|
}
|
|
2246
|
+
|
|
2805
2247
|
[data-tooltip]:not(a, button, input, [role="button"]) {
|
|
2248
|
+
cursor: help;
|
|
2806
2249
|
border-bottom: 1px dotted;
|
|
2807
2250
|
text-decoration: none;
|
|
2808
|
-
cursor: help;
|
|
2809
2251
|
}
|
|
2810
|
-
|
|
2811
|
-
[data-tooltip][data-placement="top"]
|
|
2812
|
-
[data-tooltip]::before,
|
|
2813
|
-
[data-tooltip]::after {
|
|
2814
|
-
display: block;
|
|
2252
|
+
|
|
2253
|
+
[data-tooltip][data-placement="top"]:before, [data-tooltip][data-placement="top"]:after, [data-tooltip]:before, [data-tooltip]:after {
|
|
2815
2254
|
z-index: 99;
|
|
2816
|
-
position: absolute;
|
|
2817
|
-
bottom: 100%;
|
|
2818
|
-
left: 50%;
|
|
2819
|
-
padding: 0.25rem 0.5rem;
|
|
2820
|
-
overflow: hidden;
|
|
2821
|
-
transform: translate(-50%, -0.25rem);
|
|
2822
2255
|
border-radius: var(--pico-border-radius);
|
|
2823
2256
|
background: var(--pico-tooltip-background-color);
|
|
2824
2257
|
content: attr(data-tooltip);
|
|
2825
2258
|
color: var(--pico-tooltip-color);
|
|
2826
2259
|
font-style: normal;
|
|
2827
2260
|
font-weight: var(--pico-font-weight);
|
|
2828
|
-
font-size: 0.875rem;
|
|
2829
|
-
text-decoration: none;
|
|
2830
2261
|
text-overflow: ellipsis;
|
|
2831
2262
|
white-space: nowrap;
|
|
2832
2263
|
opacity: 0;
|
|
2833
2264
|
pointer-events: none;
|
|
2265
|
+
padding: .25rem .5rem;
|
|
2266
|
+
font-size: .875rem;
|
|
2267
|
+
text-decoration: none;
|
|
2268
|
+
display: block;
|
|
2269
|
+
position: absolute;
|
|
2270
|
+
bottom: 100%;
|
|
2271
|
+
left: 50%;
|
|
2272
|
+
overflow: hidden;
|
|
2273
|
+
transform: translate(-50%, -.25rem);
|
|
2834
2274
|
}
|
|
2835
|
-
|
|
2836
|
-
[data-tooltip]
|
|
2837
|
-
padding: 0;
|
|
2838
|
-
transform: translate(-50%, 0rem);
|
|
2839
|
-
border-top: 0.3rem solid;
|
|
2840
|
-
border-right: 0.3rem solid transparent;
|
|
2841
|
-
border-left: 0.3rem solid transparent;
|
|
2842
|
-
border-radius: 0;
|
|
2843
|
-
background-color: transparent;
|
|
2275
|
+
|
|
2276
|
+
[data-tooltip][data-placement="top"]:after, [data-tooltip]:after {
|
|
2844
2277
|
content: "";
|
|
2845
2278
|
color: var(--pico-tooltip-background-color);
|
|
2279
|
+
background-color: #0000;
|
|
2280
|
+
border-top: .3rem solid;
|
|
2281
|
+
border-left: .3rem solid #0000;
|
|
2282
|
+
border-right: .3rem solid #0000;
|
|
2283
|
+
border-radius: 0;
|
|
2284
|
+
padding: 0;
|
|
2285
|
+
transform: translate(-50%);
|
|
2846
2286
|
}
|
|
2847
|
-
|
|
2848
|
-
[data-tooltip][data-placement="bottom"]
|
|
2287
|
+
|
|
2288
|
+
[data-tooltip][data-placement="bottom"]:before, [data-tooltip][data-placement="bottom"]:after {
|
|
2849
2289
|
top: 100%;
|
|
2850
2290
|
bottom: auto;
|
|
2851
|
-
transform: translate(-50%,
|
|
2291
|
+
transform: translate(-50%, .25rem);
|
|
2852
2292
|
}
|
|
2293
|
+
|
|
2853
2294
|
[data-tooltip][data-placement="bottom"]:after {
|
|
2854
|
-
|
|
2855
|
-
border:
|
|
2856
|
-
|
|
2857
|
-
}
|
|
2858
|
-
|
|
2859
|
-
[data-tooltip][data-placement="left"]
|
|
2860
|
-
|
|
2861
|
-
|
|
2862
|
-
bottom: auto;
|
|
2863
|
-
left: auto;
|
|
2864
|
-
transform: translate(-0.25rem, -50%);
|
|
2295
|
+
border: .3rem solid #0000;
|
|
2296
|
+
border-bottom-color: currentColor;
|
|
2297
|
+
transform: translate(-50%, -.3rem);
|
|
2298
|
+
}
|
|
2299
|
+
|
|
2300
|
+
[data-tooltip][data-placement="left"]:before, [data-tooltip][data-placement="left"]:after {
|
|
2301
|
+
inset: 50% 100% auto auto;
|
|
2302
|
+
transform: translate(-.25rem, -50%);
|
|
2865
2303
|
}
|
|
2304
|
+
|
|
2866
2305
|
[data-tooltip][data-placement="left"]:after {
|
|
2867
|
-
|
|
2868
|
-
border:
|
|
2869
|
-
|
|
2870
|
-
}
|
|
2871
|
-
[data-tooltip][data-placement="right"]::before,
|
|
2872
|
-
[data-tooltip][data-placement="right"]::after {
|
|
2873
|
-
top: 50%;
|
|
2874
|
-
right: auto;
|
|
2875
|
-
bottom: auto;
|
|
2876
|
-
left: 100%;
|
|
2877
|
-
transform: translate(0.25rem, -50%);
|
|
2306
|
+
border: .3rem solid #0000;
|
|
2307
|
+
border-left-color: currentColor;
|
|
2308
|
+
transform: translate(.3rem, -50%);
|
|
2878
2309
|
}
|
|
2310
|
+
|
|
2311
|
+
[data-tooltip][data-placement="right"]:before, [data-tooltip][data-placement="right"]:after {
|
|
2312
|
+
inset: 50% auto auto 100%;
|
|
2313
|
+
transform: translate(.25rem, -50%);
|
|
2314
|
+
}
|
|
2315
|
+
|
|
2879
2316
|
[data-tooltip][data-placement="right"]:after {
|
|
2880
|
-
|
|
2881
|
-
border:
|
|
2882
|
-
|
|
2883
|
-
}
|
|
2884
|
-
|
|
2885
|
-
[data-tooltip]:focus
|
|
2886
|
-
[data-tooltip]:hover::before,
|
|
2887
|
-
[data-tooltip]:hover::after {
|
|
2317
|
+
border: .3rem solid #0000;
|
|
2318
|
+
border-right-color: currentColor;
|
|
2319
|
+
transform: translate(-.3rem, -50%);
|
|
2320
|
+
}
|
|
2321
|
+
|
|
2322
|
+
[data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip]:hover:before, [data-tooltip]:hover:after {
|
|
2888
2323
|
opacity: 1;
|
|
2889
2324
|
}
|
|
2325
|
+
|
|
2890
2326
|
@media (hover: hover) and (pointer: fine) {
|
|
2891
|
-
[data-tooltip]:focus
|
|
2892
|
-
|
|
2893
|
-
[data-tooltip]:hover::before,
|
|
2894
|
-
[data-tooltip]:hover::after {
|
|
2895
|
-
--pico-tooltip-slide-to: translate(-50%, -0.25rem);
|
|
2896
|
-
transform: translate(-50%, 0.75rem);
|
|
2897
|
-
animation-duration: 0.2s;
|
|
2898
|
-
animation-fill-mode: forwards;
|
|
2899
|
-
animation-name: tooltip-slide;
|
|
2327
|
+
[data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip]:hover:before, [data-tooltip]:hover:after {
|
|
2328
|
+
--pico-tooltip-slide-to: translate(-50%, -.25rem);
|
|
2900
2329
|
opacity: 0;
|
|
2330
|
+
animation-name: tooltip-slide;
|
|
2331
|
+
animation-duration: .2s;
|
|
2332
|
+
animation-fill-mode: forwards;
|
|
2333
|
+
transform: translate(-50%, .75rem);
|
|
2901
2334
|
}
|
|
2902
|
-
|
|
2903
|
-
[data-tooltip]:hover
|
|
2335
|
+
|
|
2336
|
+
[data-tooltip]:focus:after, [data-tooltip]:hover:after {
|
|
2904
2337
|
--pico-tooltip-caret-slide-to: translate(-50%, 0rem);
|
|
2905
|
-
transform: translate(-50%, -0.25rem);
|
|
2906
2338
|
animation-name: tooltip-caret-slide;
|
|
2339
|
+
transform: translate(-50%, -.25rem);
|
|
2907
2340
|
}
|
|
2908
|
-
|
|
2909
|
-
[data-tooltip][data-placement="bottom"]:focus
|
|
2910
|
-
|
|
2911
|
-
[data-tooltip][data-placement="bottom"]:hover::after {
|
|
2912
|
-
--pico-tooltip-slide-to: translate(-50%, 0.25rem);
|
|
2913
|
-
transform: translate(-50%, -0.75rem);
|
|
2341
|
+
|
|
2342
|
+
[data-tooltip][data-placement="bottom"]:focus:before, [data-tooltip][data-placement="bottom"]:focus:after, [data-tooltip][data-placement="bottom"]:hover:before, [data-tooltip][data-placement="bottom"]:hover:after {
|
|
2343
|
+
--pico-tooltip-slide-to: translate(-50%, .25rem);
|
|
2914
2344
|
animation-name: tooltip-slide;
|
|
2345
|
+
transform: translate(-50%, -.75rem);
|
|
2915
2346
|
}
|
|
2916
|
-
|
|
2917
|
-
[data-tooltip][data-placement="bottom"]:hover
|
|
2918
|
-
--pico-tooltip-caret-slide-to: translate(-50%,
|
|
2919
|
-
transform: translate(-50%, -0.5rem);
|
|
2347
|
+
|
|
2348
|
+
[data-tooltip][data-placement="bottom"]:focus:after, [data-tooltip][data-placement="bottom"]:hover:after {
|
|
2349
|
+
--pico-tooltip-caret-slide-to: translate(-50%, -.3rem);
|
|
2920
2350
|
animation-name: tooltip-caret-slide;
|
|
2351
|
+
transform: translate(-50%, -.5rem);
|
|
2921
2352
|
}
|
|
2922
|
-
|
|
2923
|
-
[data-tooltip][data-placement="left"]:focus
|
|
2924
|
-
|
|
2925
|
-
[data-tooltip][data-placement="left"]:hover::after {
|
|
2926
|
-
--pico-tooltip-slide-to: translate(-0.25rem, -50%);
|
|
2927
|
-
transform: translate(0.75rem, -50%);
|
|
2353
|
+
|
|
2354
|
+
[data-tooltip][data-placement="left"]:focus:before, [data-tooltip][data-placement="left"]:focus:after, [data-tooltip][data-placement="left"]:hover:before, [data-tooltip][data-placement="left"]:hover:after {
|
|
2355
|
+
--pico-tooltip-slide-to: translate(-.25rem, -50%);
|
|
2928
2356
|
animation-name: tooltip-slide;
|
|
2357
|
+
transform: translate(.75rem, -50%);
|
|
2929
2358
|
}
|
|
2930
|
-
|
|
2931
|
-
[data-tooltip][data-placement="left"]:hover
|
|
2932
|
-
--pico-tooltip-caret-slide-to: translate(
|
|
2933
|
-
transform: translate(0.05rem, -50%);
|
|
2359
|
+
|
|
2360
|
+
[data-tooltip][data-placement="left"]:focus:after, [data-tooltip][data-placement="left"]:hover:after {
|
|
2361
|
+
--pico-tooltip-caret-slide-to: translate(.3rem, -50%);
|
|
2934
2362
|
animation-name: tooltip-caret-slide;
|
|
2363
|
+
transform: translate(.05rem, -50%);
|
|
2935
2364
|
}
|
|
2936
|
-
|
|
2937
|
-
[data-tooltip][data-placement="right"]:focus
|
|
2938
|
-
|
|
2939
|
-
[data-tooltip][data-placement="right"]:hover::after {
|
|
2940
|
-
--pico-tooltip-slide-to: translate(0.25rem, -50%);
|
|
2941
|
-
transform: translate(-0.75rem, -50%);
|
|
2365
|
+
|
|
2366
|
+
[data-tooltip][data-placement="right"]:focus:before, [data-tooltip][data-placement="right"]:focus:after, [data-tooltip][data-placement="right"]:hover:before, [data-tooltip][data-placement="right"]:hover:after {
|
|
2367
|
+
--pico-tooltip-slide-to: translate(.25rem, -50%);
|
|
2942
2368
|
animation-name: tooltip-slide;
|
|
2369
|
+
transform: translate(-.75rem, -50%);
|
|
2943
2370
|
}
|
|
2944
|
-
|
|
2945
|
-
[data-tooltip][data-placement="right"]:hover
|
|
2946
|
-
--pico-tooltip-caret-slide-to: translate(
|
|
2947
|
-
transform: translate(-0.05rem, -50%);
|
|
2371
|
+
|
|
2372
|
+
[data-tooltip][data-placement="right"]:focus:after, [data-tooltip][data-placement="right"]:hover:after {
|
|
2373
|
+
--pico-tooltip-caret-slide-to: translate(-.3rem, -50%);
|
|
2948
2374
|
animation-name: tooltip-caret-slide;
|
|
2375
|
+
transform: translate(-.05rem, -50%);
|
|
2949
2376
|
}
|
|
2950
2377
|
}
|
|
2378
|
+
|
|
2951
2379
|
@keyframes tooltip-slide {
|
|
2952
2380
|
to {
|
|
2953
2381
|
transform: var(--pico-tooltip-slide-to);
|
|
2954
2382
|
opacity: 1;
|
|
2955
2383
|
}
|
|
2956
2384
|
}
|
|
2385
|
+
|
|
2957
2386
|
@keyframes tooltip-caret-slide {
|
|
2958
2387
|
50% {
|
|
2959
2388
|
opacity: 0;
|
|
2960
2389
|
}
|
|
2390
|
+
|
|
2961
2391
|
to {
|
|
2962
2392
|
transform: var(--pico-tooltip-caret-slide-to);
|
|
2963
2393
|
opacity: 1;
|
|
2964
2394
|
}
|
|
2965
2395
|
}
|
|
2966
|
-
|
|
2967
|
-
* Accessibility & User interaction
|
|
2968
|
-
*/
|
|
2396
|
+
|
|
2969
2397
|
[aria-controls] {
|
|
2970
2398
|
cursor: pointer;
|
|
2971
2399
|
}
|
|
2972
2400
|
|
|
2973
|
-
[aria-disabled="true"],
|
|
2974
|
-
[disabled] {
|
|
2401
|
+
[aria-disabled="true"], [disabled] {
|
|
2975
2402
|
cursor: not-allowed;
|
|
2976
2403
|
}
|
|
2977
2404
|
|
|
@@ -2979,29 +2406,19 @@ progress::-moz-progress-bar {
|
|
|
2979
2406
|
direction: rtl;
|
|
2980
2407
|
}
|
|
2981
2408
|
|
|
2982
|
-
/**
|
|
2983
|
-
* Reduce Motion Features
|
|
2984
|
-
*/
|
|
2985
2409
|
@media (prefers-reduced-motion: reduce) {
|
|
2986
|
-
|
|
2987
|
-
:not([aria-busy="true"])::before,
|
|
2988
|
-
:not([aria-busy="true"])::after {
|
|
2410
|
+
:not([aria-busy="true"]):not(.unreduce-motion), :not([aria-busy="true"]):before, :not([aria-busy="true"]):after {
|
|
2989
2411
|
background-attachment: initial !important;
|
|
2990
|
-
animation-duration: 1ms !important;
|
|
2991
|
-
animation-delay: -1ms !important;
|
|
2992
|
-
animation-iteration-count: 1 !important;
|
|
2993
2412
|
scroll-behavior: auto !important;
|
|
2994
|
-
transition-delay: 0s !important;
|
|
2995
2413
|
transition-duration: 0s !important;
|
|
2414
|
+
transition-delay: 0s !important;
|
|
2415
|
+
animation-duration: 1ms !important;
|
|
2416
|
+
animation-iteration-count: 1 !important;
|
|
2417
|
+
animation-delay: -1ms !important;
|
|
2996
2418
|
}
|
|
2997
2419
|
}
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
* Included in pico.css and blades.ninja.css; not in blades.css
|
|
3001
|
-
*/
|
|
3002
|
-
body > header,
|
|
3003
|
-
body > main,
|
|
3004
|
-
body > footer {
|
|
2420
|
+
|
|
2421
|
+
body > header, body > main, body > footer {
|
|
3005
2422
|
padding-block: var(--pico-block-spacing-vertical);
|
|
3006
2423
|
}
|
|
3007
2424
|
|