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