@swiftwc/ui 0.0.0-dev.41 → 0.0.0-dev.43
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/generated/components/picker-view.js +2 -2
- package/generated/components/progress-view.js +1 -0
- package/generated/css/index.css +483 -179
- package/package.json +1 -1
- package/scss/_vars.scss +2 -1
- package/scss/base/_reboot.scss +1 -1
- package/scss/base/_root.scss +28 -35
- package/scss/colors/_index.scss +135 -19
- package/scss/components/_bordered-prominent-button.scss +3 -2
- package/scss/components/_disclosure-group.scss +10 -10
- package/scss/components/_form-view.scss +58 -20
- package/scss/components/_glass-prominent-button.scss +4 -2
- package/scss/components/_label-view.scss +12 -0
- package/scss/components/_list-view.scss +65 -25
- package/scss/components/_menu-view.scss +12 -8
- package/scss/components/_picker-view.scss +30 -30
- package/scss/components/_table-row.scss +1 -0
- package/scss/components/_table-view.scss +1 -1
- package/scss/mixins/_index.scss +31 -0
- package/scss/placeholders/_lists.scss +79 -56
- package/scss/utils/_index.scss +16 -48
package/generated/css/index.css
CHANGED
|
@@ -68,10 +68,6 @@
|
|
|
68
68
|
--navigation-bar-block-size: var(--tool-bar-block-size);
|
|
69
69
|
--nav-split-view-sidebar-inline-size: 20rem;
|
|
70
70
|
--nav-split-view-content-inline-size: 25rem;
|
|
71
|
-
--tint: oklch(0.5325 0.1899 257.12);
|
|
72
|
-
--tint1g: color-mix(in oklch, white 70%, var(--tint));
|
|
73
|
-
--tint2: color-mix(in oklch, white 80%, var(--tint));
|
|
74
|
-
--tint3: color-mix(in oklch, white 90%, var(--tint));
|
|
75
71
|
--tintcontrast: white;
|
|
76
72
|
--view-transition-leading-x: -50%;
|
|
77
73
|
--view-transition-principal-x: 0%;
|
|
@@ -157,92 +153,92 @@
|
|
|
157
153
|
--list-row-gap: 3rem;
|
|
158
154
|
--form-gap: 1rem;
|
|
159
155
|
--form-extra-gap: 3rem;
|
|
156
|
+
--insetform-item-border-radius: 1rem;
|
|
160
157
|
--list-item-padding-inline-start: 1rem;
|
|
161
158
|
--list-item-padding-inline-end: 1rem;
|
|
162
159
|
--list-item-padding-block-start: 1rem;
|
|
163
160
|
--list-item-padding-block-start: 1rem;
|
|
164
161
|
--list-item-background-color: var(--background);
|
|
165
162
|
--list-item-color: var(--primary);
|
|
166
|
-
--list-highlighteditem-background-color: var(--
|
|
163
|
+
--list-highlighteditem-background-color: var(--accentColor3);
|
|
167
164
|
--list-highlighteditem-color: ;
|
|
168
165
|
--insetlist-item-background-color: var(--background);
|
|
169
166
|
--insetlist-item-color: var(--primary);
|
|
170
|
-
--insetlist-highlighteditem-background-color: var(--
|
|
171
|
-
--insetlist-highlighteditem-color:
|
|
167
|
+
--insetlist-highlighteditem-background-color: var(--accentColor3);
|
|
168
|
+
--insetlist-highlighteditem-color: ;
|
|
172
169
|
--insetgroupedlist-item-background-color: var(--secondaryGroupedBackground);
|
|
173
170
|
--insetgroupedlist-item-color: var(--primary);
|
|
174
|
-
--insetgroupedlist-highlighteditem-background-color: var(--
|
|
175
|
-
--insetgroupedlist-highlighteditem-color:
|
|
171
|
+
--insetgroupedlist-highlighteditem-background-color: var(--accentColor3);
|
|
172
|
+
--insetgroupedlist-highlighteditem-color: ;
|
|
176
173
|
--sidebarlist-item-background-color: transparent;
|
|
177
174
|
--sidebarlist-item-color: var(--primary);
|
|
178
175
|
--sidebarlist-highlighteditem-background-color: var(--accentColor);
|
|
179
176
|
--sidebarlist-highlighteditem-color: var(--tintcontrast);
|
|
180
|
-
--list-openitem-background-color: var(--
|
|
177
|
+
--list-openitem-background-color: var(--accentColor5);
|
|
181
178
|
--list-openitem-color: var(--primary);
|
|
182
|
-
--list-opensummary-background-color: var(--
|
|
179
|
+
--list-opensummary-background-color: var(--accentColor4);
|
|
183
180
|
--list-opensummary-color: var(--primary);
|
|
184
|
-
--insetgroupedlist-openitem-background-color: var(--
|
|
181
|
+
--insetgroupedlist-openitem-background-color: var(--accentColor5);
|
|
185
182
|
--insetgroupedlist-openitem-color: var(--primary);
|
|
186
|
-
--insetgroupedlist-opensummary-background-color: var(--
|
|
183
|
+
--insetgroupedlist-opensummary-background-color: var(--accentColor4);
|
|
187
184
|
--insetgroupedlist-opensummary-color: var(--primary);
|
|
188
|
-
--insetlist-openitem-background-color: var(--
|
|
185
|
+
--insetlist-openitem-background-color: var(--accentColor5);
|
|
189
186
|
--insetlist-openitem-color: var(--primary);
|
|
190
|
-
--insetlist-opensummary-background-color: var(--
|
|
187
|
+
--insetlist-opensummary-background-color: var(--accentColor4);
|
|
191
188
|
--insetlist-opensummary-color: var(--primary);
|
|
192
189
|
--sidebarlist-openitem-background-color: transparent;
|
|
193
190
|
--sidebarlist-openitem-color: var(--primary);
|
|
194
191
|
--sidebarlist-opensummary-background-color: transparent;
|
|
195
192
|
--sidebarlist-opensummary-color: var(--primary);
|
|
193
|
+
--insetgroupedlist-background-color: var(--groupedBackground);
|
|
194
|
+
--insetlist-padding-inline: 1rem;
|
|
195
|
+
--insetlist-padding-block: 0rem;
|
|
196
|
+
--insetgroupedlist-padding-inline: 1rem;
|
|
197
|
+
--insetgroupedlist-padding-block: 1rem;
|
|
198
|
+
--sidebarlist-padding-inline: 1rem;
|
|
199
|
+
--sidebarlist-padding-block: 1rem;
|
|
196
200
|
--form-item-padding-inline-start: 1rem;
|
|
197
201
|
--form-item-padding-inline-end: 1rem;
|
|
198
202
|
--form-item-padding-block-start: 1rem;
|
|
199
203
|
--form-item-padding-block-start: 1rem;
|
|
200
204
|
--form-item-background-color: var(--background);
|
|
201
205
|
--form-item-color: var(--primary);
|
|
202
|
-
--form-highlighteditem-background-color: var(--
|
|
206
|
+
--form-highlighteditem-background-color: var(--accentColor3);
|
|
203
207
|
--form-highlighteditem-color: ;
|
|
204
208
|
--insetform-item-background-color: var(--background);
|
|
205
209
|
--insetform-item-color: var(--primary);
|
|
206
|
-
--insetform-highlighteditem-background-color: var(--
|
|
207
|
-
--insetform-highlighteditem-color:
|
|
210
|
+
--insetform-highlighteditem-background-color: var(--accentColor3);
|
|
211
|
+
--insetform-highlighteditem-color: ;
|
|
208
212
|
--insetgroupedform-item-background-color: var(--secondaryGroupedBackground);
|
|
209
213
|
--insetgroupedform-item-color: var(--primary);
|
|
210
|
-
--insetgroupedform-highlighteditem-background-color: var(--
|
|
211
|
-
--insetgroupedform-highlighteditem-color:
|
|
214
|
+
--insetgroupedform-highlighteditem-background-color: var(--accentColor3);
|
|
215
|
+
--insetgroupedform-highlighteditem-color: ;
|
|
212
216
|
--sidebarform-item-background-color: transparent;
|
|
213
217
|
--sidebarform-item-color: var(--primary);
|
|
214
218
|
--sidebarform-highlighteditem-background-color: var(--accentColor);
|
|
215
219
|
--sidebarform-highlighteditem-color: var(--tintcontrast);
|
|
216
|
-
--form-openitem-background-color: var(--
|
|
220
|
+
--form-openitem-background-color: var(--accentColor5);
|
|
217
221
|
--form-openitem-color: var(--primary);
|
|
218
|
-
--form-opensummary-background-color: var(--
|
|
222
|
+
--form-opensummary-background-color: var(--accentColor4);
|
|
219
223
|
--form-opensummary-color: var(--primary);
|
|
220
|
-
--insetgroupedform-openitem-background-color: var(--
|
|
224
|
+
--insetgroupedform-openitem-background-color: var(--accentColor5);
|
|
221
225
|
--insetgroupedform-openitem-color: var(--primary);
|
|
222
|
-
--insetgroupedform-opensummary-background-color: var(--
|
|
226
|
+
--insetgroupedform-opensummary-background-color: var(--accentColor4);
|
|
223
227
|
--insetgroupedform-opensummary-color: var(--primary);
|
|
224
|
-
--insetform-openitem-background-color: var(--
|
|
228
|
+
--insetform-openitem-background-color: var(--accentColor5);
|
|
225
229
|
--insetform-openitem-color: var(--primary);
|
|
226
|
-
--insetform-opensummary-background-color: var(--
|
|
230
|
+
--insetform-opensummary-background-color: var(--accentColor4);
|
|
227
231
|
--insetform-opensummary-color: var(--primary);
|
|
228
232
|
--sidebarform-openitem-background-color: transparent;
|
|
229
233
|
--sidebarform-openitem-color: var(--primary);
|
|
230
234
|
--sidebarform-opensummary-background-color: transparent;
|
|
231
235
|
--sidebarform-opensummary-color: var(--primary);
|
|
232
|
-
--insetform-item-border-radius: 1rem;
|
|
233
|
-
--insetgroupedlist-background-color: var(--groupedBackground);
|
|
234
236
|
--insetgroupedform-background-color: var(--groupedBackground);
|
|
235
|
-
--insetlist-padding-inline: 1rem;
|
|
236
|
-
--insetlist-padding-block: 0rem;
|
|
237
237
|
--insetform-padding-inline: 1rem;
|
|
238
238
|
--insetform-padding-block: 0rem;
|
|
239
|
-
--insetgroupedlist-padding-inline: 1rem;
|
|
240
239
|
--insetgroupedform-padding-inline: 1rem;
|
|
241
|
-
--insetgroupedlist-padding-block: 1rem;
|
|
242
240
|
--insetgroupedform-padding-block: 1rem;
|
|
243
|
-
--sidebarlist-padding-inline: 1rem;
|
|
244
241
|
--sidebarform-padding-inline: 1rem;
|
|
245
|
-
--sidebarlist-padding-block: 1rem;
|
|
246
242
|
--sidebarform-padding-block: 1rem;
|
|
247
243
|
--table-row-gap: 0.5rem;
|
|
248
244
|
--table-col-gap: 1rem;
|
|
@@ -264,8 +260,6 @@
|
|
|
264
260
|
--large-btn-padding: 1.2rem;
|
|
265
261
|
--large-btn-border-radius: 2.4rem;
|
|
266
262
|
--large-btn-border-radius: 2.4rem;
|
|
267
|
-
--picker-affordance-size: 1rem;
|
|
268
|
-
--picker-affordance-col-gap: 1rem;
|
|
269
263
|
}
|
|
270
264
|
@media (pointer: fine) {
|
|
271
265
|
:root {
|
|
@@ -301,7 +295,7 @@
|
|
|
301
295
|
color-scheme: light;
|
|
302
296
|
}
|
|
303
297
|
}
|
|
304
|
-
@layer sw-base, sw-components, sw-nav-components, sw-tab-components, sw-utils, sw-colors, sw-actions, sw-transitions, sw-final;
|
|
298
|
+
@layer sw-base, sw-components, sw-nav-components, sw-list-components, sw-tab-components, sw-utils, sw-colors, sw-actions, sw-transitions, sw-final;
|
|
305
299
|
@layer sw-base {
|
|
306
300
|
:root {
|
|
307
301
|
interpolate-size: allow-keywords;
|
|
@@ -406,7 +400,7 @@
|
|
|
406
400
|
display: none;
|
|
407
401
|
}
|
|
408
402
|
}
|
|
409
|
-
@layer sw-components {
|
|
403
|
+
@layer sw-list-components {
|
|
410
404
|
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
411
405
|
background-color: var(--list--host-background-color, );
|
|
412
406
|
padding-inline: var(--list--host-padding-inline, );
|
|
@@ -450,27 +444,18 @@
|
|
|
450
444
|
transition-duration: 0ms;
|
|
451
445
|
}
|
|
452
446
|
}
|
|
453
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) :not([slot]
|
|
454
|
-
padding-block-start: var(--list--section-gap, );
|
|
455
|
-
}
|
|
456
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view:not([slot]) ~ section-view:not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view:not([slot]) ~ section-view:not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view:not([slot]) ~ section-view:not(menu-view *)) {
|
|
447
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) :not([slot]) ~ section-view:not([slot]):not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) :not([slot]) ~ section-view:not([slot]):not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) :not([slot]) ~ section-view:not([slot]):not(menu-view *)) {
|
|
457
448
|
padding-block-start: var(--list--section-gap, );
|
|
458
449
|
}
|
|
459
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view:has(~ :not([slot], section-view)):not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view:has(~ :not([slot], section-view)):not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view:has(~ :not([slot], section-view)):not(menu-view *)) {
|
|
450
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view:not([slot]):has(~ :not([slot], section-view)):not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view:not([slot]):has(~ :not([slot], section-view)):not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view:not([slot]):has(~ :not([slot], section-view)):not(menu-view *)) {
|
|
460
451
|
padding-block-end: var(--list--section-gap, );
|
|
461
452
|
}
|
|
462
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) :not([slot],
|
|
453
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) :not([slot], summary) ~ [is=disclosure-group]:not([slot]):not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) :not([slot], summary) ~ [is=disclosure-group]:not([slot]):not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) :not([slot], summary) ~ [is=disclosure-group]:not([slot]):not(menu-view *)) {
|
|
463
454
|
margin-block-start: var(--list--details-gap, );
|
|
464
455
|
}
|
|
465
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group]:not([slot])
|
|
466
|
-
margin-block-start: calc(var(--list--details-gap, 0px) / 2);
|
|
467
|
-
}
|
|
468
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group]:has(~ :not([slot], [is=disclosure-group])):not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group]:has(~ :not([slot], [is=disclosure-group])):not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group]:has(~ :not([slot], [is=disclosure-group])):not(menu-view *)) {
|
|
456
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group]:not([slot]):has(~ :not([slot], [is=disclosure-group])):not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group]:not([slot]):has(~ :not([slot], [is=disclosure-group])):not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group]:not([slot]):has(~ :not([slot], [is=disclosure-group])):not(menu-view *)) {
|
|
469
457
|
margin-block-end: var(--list--details-gap, );
|
|
470
458
|
}
|
|
471
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group]:has(~ [is=disclosure-group]:not([slot])):not(menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group]:has(~ [is=disclosure-group]:not([slot])):not(menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group]:has(~ [is=disclosure-group]:not([slot])):not(menu-view *)) {
|
|
472
|
-
margin-block-end: calc(var(--list--details-gap, 0px) / 2);
|
|
473
|
-
}
|
|
474
459
|
:where(table-view:not(menu-view *):not(table-view table-view, list-view table-view, [is=form-view] table-view), [is=form-view]:not(menu-view *):not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]), list-view:not(menu-view *):not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
475
460
|
--itempadistart: var(--list--item-padding-inline-start, 0rem);
|
|
476
461
|
--itempadiend: calc(var(--list--item-padding-inline-end, 0rem) + var(--list--accessories-size, 0rem));
|
|
@@ -768,22 +753,22 @@
|
|
|
768
753
|
--itemradiusbr: var(--list--item-border-radius,);
|
|
769
754
|
--itemradiusbl: var(--list--adjacentitem-border-radius,);
|
|
770
755
|
}
|
|
771
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
772
|
-
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
773
|
-
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
774
|
-
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
775
|
-
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
776
|
-
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
777
|
-
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button)) {
|
|
756
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
757
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
758
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
759
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
760
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
761
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
762
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link])) {
|
|
778
763
|
position: relative;
|
|
779
764
|
}
|
|
780
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
781
|
-
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
782
|
-
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
783
|
-
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
784
|
-
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
785
|
-
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
786
|
-
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button))::after {
|
|
765
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
766
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
767
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
768
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
769
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
770
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
771
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]))::after {
|
|
787
772
|
pointer-events: none;
|
|
788
773
|
content: "";
|
|
789
774
|
-webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
|
|
@@ -792,13 +777,13 @@
|
|
|
792
777
|
aspect-ratio: 1;
|
|
793
778
|
place-self: center;
|
|
794
779
|
}
|
|
795
|
-
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
796
|
-
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
797
|
-
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
798
|
-
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
799
|
-
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
800
|
-
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button),
|
|
801
|
-
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(button))::after {
|
|
780
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
781
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
782
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
783
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
784
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
785
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]),
|
|
786
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(navigation-split-view button[is=navigation-link], navigation-stack button[is=navigation-link]))::after {
|
|
802
787
|
position: absolute;
|
|
803
788
|
inset: 50% var(--itempadiend) auto auto;
|
|
804
789
|
display: var(--list--accessories-display, grid);
|
|
@@ -807,6 +792,15 @@
|
|
|
807
792
|
background-color: var(--quaternary);
|
|
808
793
|
transform: translateY(-50%) translateX(120%);
|
|
809
794
|
}
|
|
795
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image], [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image], list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image],
|
|
796
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image],
|
|
797
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image],
|
|
798
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image],
|
|
799
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image],
|
|
800
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image],
|
|
801
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):is(label-view[list-item-tint])[list-item-tint] > [slot=image]) {
|
|
802
|
+
color: var(--accentColor);
|
|
803
|
+
}
|
|
810
804
|
}
|
|
811
805
|
@layer sw-colors {
|
|
812
806
|
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
@@ -828,8 +822,21 @@
|
|
|
828
822
|
--itemface: var(--itemhighlightface,);
|
|
829
823
|
--itemtext: var(--itemhighlighttext,);
|
|
830
824
|
--list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
|
|
825
|
+
}
|
|
826
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
827
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
828
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
829
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
830
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
831
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
832
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly])):focus-visible > * {
|
|
831
833
|
--secondary: var(--itemtext);
|
|
832
834
|
--blue: var(--itemtext);
|
|
835
|
+
--red: var(--itemtext);
|
|
836
|
+
--green: var(--itemtext);
|
|
837
|
+
--orange: var(--itemtext);
|
|
838
|
+
--accentColor: var(--itemtext);
|
|
839
|
+
--accentColorEffective: var(--itemtext);
|
|
833
840
|
}
|
|
834
841
|
}
|
|
835
842
|
@layer sw-actions {
|
|
@@ -843,8 +850,21 @@
|
|
|
843
850
|
--itemface: var(--itemactiveface,);
|
|
844
851
|
--itemtext: var(--itemactivetext,);
|
|
845
852
|
--list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
|
|
853
|
+
}
|
|
854
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
855
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
856
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
857
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
858
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
859
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly]),
|
|
860
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name):not(:disabled):not([readonly])).active > * {
|
|
846
861
|
--secondary: var(--itemtext);
|
|
847
862
|
--blue: var(--itemtext);
|
|
863
|
+
--red: var(--itemtext);
|
|
864
|
+
--green: var(--itemtext);
|
|
865
|
+
--orange: var(--itemtext);
|
|
866
|
+
--accentColor: var(--itemtext);
|
|
867
|
+
--accentColorEffective: var(--itemtext);
|
|
848
868
|
}
|
|
849
869
|
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true], [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true], list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
850
870
|
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
@@ -856,8 +876,21 @@
|
|
|
856
876
|
--itemface: var(--itemactiveface);
|
|
857
877
|
--itemtext: var(--itemactivetext,);
|
|
858
878
|
--list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
|
|
879
|
+
}
|
|
880
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true], [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true], list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
881
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
882
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
883
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
884
|
+
table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
885
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true],
|
|
886
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) [is=disclosure-group] > :not([slot], section-view, [is=disclosure-group], picker-view, menu-view, menu-view *, whatever-name)[aria-selected=true]) > * {
|
|
859
887
|
--secondary: var(--itemtext);
|
|
860
888
|
--blue: var(--itemtext);
|
|
889
|
+
--red: var(--itemtext);
|
|
890
|
+
--green: var(--itemtext);
|
|
891
|
+
--orange: var(--itemtext);
|
|
892
|
+
--accentColor: var(--itemtext);
|
|
893
|
+
--accentColorEffective: var(--itemtext);
|
|
861
894
|
}
|
|
862
895
|
}
|
|
863
896
|
@layer sw-components {
|
|
@@ -1190,6 +1223,11 @@
|
|
|
1190
1223
|
:where([is=disclosure-group]) {
|
|
1191
1224
|
overflow: clip;
|
|
1192
1225
|
--disclosure--host-details-content-block-size: 0;
|
|
1226
|
+
--disclosure--summary-grid-template-columns: ;
|
|
1227
|
+
--disclosure--summary-grid-auto-flow: ;
|
|
1228
|
+
--disclosure--summary-gap: ;
|
|
1229
|
+
--disclosure--marker-display: none;
|
|
1230
|
+
--disclosure--marker-transform: ;
|
|
1193
1231
|
}
|
|
1194
1232
|
@supports (x: if(else:red)) {
|
|
1195
1233
|
:where([is=disclosure-group]) {
|
|
@@ -1203,11 +1241,6 @@
|
|
|
1203
1241
|
@supports not (x: if(else:red)) {
|
|
1204
1242
|
:where([is=disclosure-group]) {
|
|
1205
1243
|
--disclosure-style: ;
|
|
1206
|
-
--disclosure--summary-grid-template-columns: ;
|
|
1207
|
-
--disclosure--summary-grid-auto-flow: ;
|
|
1208
|
-
--disclosure--summary-gap: ;
|
|
1209
|
-
--disclosure--marker-display: none;
|
|
1210
|
-
--disclosure--marker-transform: ;
|
|
1211
1244
|
}
|
|
1212
1245
|
}
|
|
1213
1246
|
:where([is=disclosure-group] > summary) {
|
|
@@ -1261,9 +1294,6 @@
|
|
|
1261
1294
|
background: transparent;
|
|
1262
1295
|
block-size: var(--disclosure--host-details-content-block-size);
|
|
1263
1296
|
}
|
|
1264
|
-
:where([is=disclosure-group] > *:not(summary)) {
|
|
1265
|
-
margin: 0;
|
|
1266
|
-
}
|
|
1267
1297
|
:where([is=disclosure-group][open]) {
|
|
1268
1298
|
--disclosure--host-details-content-block-size: auto;
|
|
1269
1299
|
--disclosure--marker-transform: rotate(90deg);
|
|
@@ -2344,6 +2374,11 @@
|
|
|
2344
2374
|
:where([is=bordered-prominent-button] > *) {
|
|
2345
2375
|
--secondary: var(--btntext);
|
|
2346
2376
|
--blue: var(--btntext);
|
|
2377
|
+
--red: var(--btntext);
|
|
2378
|
+
--green: var(--btntext);
|
|
2379
|
+
--orange: var(--btntext);
|
|
2380
|
+
--accentColor: var(--btntext);
|
|
2381
|
+
--accentColorEffective: var(--btntext);
|
|
2347
2382
|
}
|
|
2348
2383
|
}
|
|
2349
2384
|
@layer sw-utils {
|
|
@@ -2466,6 +2501,11 @@
|
|
|
2466
2501
|
:where([is=glass-prominent-button] > *) {
|
|
2467
2502
|
--secondary: var(--btntext);
|
|
2468
2503
|
--blue: var(--btntext);
|
|
2504
|
+
--red: var(--btntext);
|
|
2505
|
+
--green: var(--btntext);
|
|
2506
|
+
--orange: var(--btntext);
|
|
2507
|
+
--accentColor: var(--btntext);
|
|
2508
|
+
--accentColorEffective: var(--btntext);
|
|
2469
2509
|
}
|
|
2470
2510
|
}
|
|
2471
2511
|
@layer sw-utils {
|
|
@@ -2637,12 +2677,16 @@
|
|
|
2637
2677
|
@container style(--label-style: icon-only) {
|
|
2638
2678
|
:where(label-view:not([label-style])) {
|
|
2639
2679
|
--label-style: icon-only;
|
|
2680
|
+
--label--host-align-items: center;
|
|
2681
|
+
--label--host-justify-items: normal;
|
|
2640
2682
|
--label--iconstack-display: grid;
|
|
2641
2683
|
}
|
|
2642
2684
|
}
|
|
2643
2685
|
@container style(--label-style: title-only) {
|
|
2644
2686
|
:where(label-view:not([label-style])) {
|
|
2645
2687
|
--label-style: title-only;
|
|
2688
|
+
--label--host-align-items: center;
|
|
2689
|
+
--label--host-justify-items: normal;
|
|
2646
2690
|
--label--titlestack-display: grid;
|
|
2647
2691
|
}
|
|
2648
2692
|
}
|
|
@@ -2659,10 +2703,14 @@
|
|
|
2659
2703
|
}
|
|
2660
2704
|
:where(label-view[label-style=icon-only]) {
|
|
2661
2705
|
--label-style: icon-only;
|
|
2706
|
+
--label--host-align-items: center;
|
|
2707
|
+
--label--host-justify-items: normal;
|
|
2662
2708
|
--label--iconstack-display: grid;
|
|
2663
2709
|
}
|
|
2664
2710
|
:where(label-view[label-style=title-only]) {
|
|
2665
2711
|
--label-style: title-only;
|
|
2712
|
+
--label--host-align-items: center;
|
|
2713
|
+
--label--host-justify-items: normal;
|
|
2666
2714
|
--label--titlestack-display: grid;
|
|
2667
2715
|
}
|
|
2668
2716
|
:where(label-view[label-style=title-and-icon]) {
|
|
@@ -2686,22 +2734,30 @@
|
|
|
2686
2734
|
}
|
|
2687
2735
|
:where(label-view:not([label-style]):has(> [slot=image]):not(:has(> :not([slot])))) {
|
|
2688
2736
|
--label-style: icon-only;
|
|
2737
|
+
--label--host-align-items: center;
|
|
2738
|
+
--label--host-justify-items: normal;
|
|
2689
2739
|
--label--iconstack-display: grid;
|
|
2690
2740
|
}
|
|
2691
2741
|
:where(label-view:not([label-style]):has(> :not([slot])):not(:has(> [slot=image]))) {
|
|
2692
2742
|
--label-style: title-only;
|
|
2743
|
+
--label--host-align-items: center;
|
|
2744
|
+
--label--host-justify-items: normal;
|
|
2693
2745
|
--label--titlestack-display: grid;
|
|
2694
2746
|
}
|
|
2695
2747
|
}
|
|
2696
2748
|
@container style(--label-style: icon-only) and style(--label-flow: vertical) {
|
|
2697
2749
|
:where(label-view:not([label-style])) {
|
|
2698
2750
|
--label-style: icon-only;
|
|
2751
|
+
--label--host-align-items: normal;
|
|
2752
|
+
--label--host-justify-items: center;
|
|
2699
2753
|
--label--iconstack-display: grid;
|
|
2700
2754
|
}
|
|
2701
2755
|
}
|
|
2702
2756
|
@container style(--label-style: title-only) and style(--label-flow: vertical) {
|
|
2703
2757
|
:where(label-view:not([label-style])) {
|
|
2704
2758
|
--label-style: title-only;
|
|
2759
|
+
--label--host-align-items: normal;
|
|
2760
|
+
--label--host-justify-items: center;
|
|
2705
2761
|
--label--titlestack-display: grid;
|
|
2706
2762
|
}
|
|
2707
2763
|
}
|
|
@@ -2719,10 +2775,14 @@
|
|
|
2719
2775
|
@container style(--label-flow: vertical) {
|
|
2720
2776
|
:where(label-view[label-style=icon-only]) {
|
|
2721
2777
|
--label-style: icon-only;
|
|
2778
|
+
--label--host-align-items: normal;
|
|
2779
|
+
--label--host-justify-items: center;
|
|
2722
2780
|
--label--iconstack-display: grid;
|
|
2723
2781
|
}
|
|
2724
2782
|
:where(label-view[label-style=title-only]) {
|
|
2725
2783
|
--label-style: title-only;
|
|
2784
|
+
--label--host-align-items: normal;
|
|
2785
|
+
--label--host-justify-items: center;
|
|
2726
2786
|
--label--titlestack-display: grid;
|
|
2727
2787
|
}
|
|
2728
2788
|
:where(label-view[label-style=title-and-icon]) {
|
|
@@ -2747,10 +2807,14 @@
|
|
|
2747
2807
|
}
|
|
2748
2808
|
:where(label-view:not([label-style]):has(> [slot=image]):not(:has(> :not([slot])))) {
|
|
2749
2809
|
--label-style: icon-only;
|
|
2810
|
+
--label--host-align-items: normal;
|
|
2811
|
+
--label--host-justify-items: center;
|
|
2750
2812
|
--label--iconstack-display: grid;
|
|
2751
2813
|
}
|
|
2752
2814
|
:where(label-view:not([label-style]):has(> :not([slot])):not(:has(> [slot=image]))) {
|
|
2753
2815
|
--label-style: title-only;
|
|
2816
|
+
--label--host-align-items: normal;
|
|
2817
|
+
--label--host-justify-items: center;
|
|
2754
2818
|
--label--titlestack-display: grid;
|
|
2755
2819
|
}
|
|
2756
2820
|
}
|
|
@@ -3217,6 +3281,11 @@
|
|
|
3217
3281
|
--menuitemtext: var(--menuitemhighlighttext,);
|
|
3218
3282
|
--secondary: var(--menuitemtext);
|
|
3219
3283
|
--blue: var(--menuitemtext);
|
|
3284
|
+
--red: var(--menuitemtext);
|
|
3285
|
+
--green: var(--menuitemtext);
|
|
3286
|
+
--orange: var(--menuitemtext);
|
|
3287
|
+
--accentColor: var(--menuitemtext);
|
|
3288
|
+
--accentColorEffective: var(--menuitemtext);
|
|
3220
3289
|
}
|
|
3221
3290
|
@media (pointer: fine) {
|
|
3222
3291
|
:where(menu-view > button:not(:disabled):not([readonly]),
|
|
@@ -3226,6 +3295,11 @@
|
|
|
3226
3295
|
--menuitemtext: var(--menuitemhighlighttext,);
|
|
3227
3296
|
--secondary: var(--menuitemtext);
|
|
3228
3297
|
--blue: var(--menuitemtext);
|
|
3298
|
+
--red: var(--menuitemtext);
|
|
3299
|
+
--green: var(--menuitemtext);
|
|
3300
|
+
--orange: var(--menuitemtext);
|
|
3301
|
+
--accentColor: var(--menuitemtext);
|
|
3302
|
+
--accentColorEffective: var(--menuitemtext);
|
|
3229
3303
|
}
|
|
3230
3304
|
}
|
|
3231
3305
|
:where(menu-view > menu-view:not(:disabled):not([readonly])):focus-visible {
|
|
@@ -3236,6 +3310,11 @@
|
|
|
3236
3310
|
--menuitemtext: var(--menuitemhighlighttext,);
|
|
3237
3311
|
--secondary: var(--menuitemtext);
|
|
3238
3312
|
--blue: var(--menuitemtext);
|
|
3313
|
+
--red: var(--menuitemtext);
|
|
3314
|
+
--green: var(--menuitemtext);
|
|
3315
|
+
--orange: var(--menuitemtext);
|
|
3316
|
+
--accentColor: var(--menuitemtext);
|
|
3317
|
+
--accentColorEffective: var(--menuitemtext);
|
|
3239
3318
|
}
|
|
3240
3319
|
@media (pointer: fine) {
|
|
3241
3320
|
:where(menu-view > menu-view:not(:disabled):not([readonly])):hover::part(menu-summary) {
|
|
@@ -3243,6 +3322,11 @@
|
|
|
3243
3322
|
--menuitemtext: var(--menuitemhighlighttext,);
|
|
3244
3323
|
--secondary: var(--menuitemtext);
|
|
3245
3324
|
--blue: var(--menuitemtext);
|
|
3325
|
+
--red: var(--menuitemtext);
|
|
3326
|
+
--green: var(--menuitemtext);
|
|
3327
|
+
--orange: var(--menuitemtext);
|
|
3328
|
+
--accentColor: var(--menuitemtext);
|
|
3329
|
+
--accentColorEffective: var(--menuitemtext);
|
|
3246
3330
|
}
|
|
3247
3331
|
}
|
|
3248
3332
|
}
|
|
@@ -3318,7 +3402,7 @@
|
|
|
3318
3402
|
margin-inline-start: max(env(safe-area-inset-left), var(--sidebar-inline-spacing));
|
|
3319
3403
|
}
|
|
3320
3404
|
}
|
|
3321
|
-
@layer sw-components {
|
|
3405
|
+
@layer sw-list-components {
|
|
3322
3406
|
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
3323
3407
|
--list--section-gap: var(--list-row-gap);
|
|
3324
3408
|
--list--host-background-color: var(--list-background-color, );
|
|
@@ -3370,6 +3454,7 @@
|
|
|
3370
3454
|
--list--selectedrootsummary-color: if(style(--list-style: sidebar): var(--primary, ); );
|
|
3371
3455
|
--list--separator-background-color: if(style(--list-style: sidebar): transparent; );
|
|
3372
3456
|
--list--activeseparator-background-color: if(style(--list-style: sidebar): transparent; );
|
|
3457
|
+
--list--accessories-size: if(style(--list-style: sidebar): 0rem; else: 1.1rem ;);
|
|
3373
3458
|
--list--accessories-display: if(style(--list-style: sidebar): none; else: grid ;);
|
|
3374
3459
|
--list--rootsummary-marker-display: if(style(--list-style: sidebar): marker-trailing; );
|
|
3375
3460
|
}
|
|
@@ -3377,6 +3462,7 @@
|
|
|
3377
3462
|
@supports not (x: if(else:red)) {
|
|
3378
3463
|
@container style(--list-style: inset) {
|
|
3379
3464
|
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view):not([list-style])) {
|
|
3465
|
+
--list-style: inset;
|
|
3380
3466
|
--list--item-color: var(--insetlist-item-color, );
|
|
3381
3467
|
--list--item-background-color: var(--insetlist-item-background-color, );
|
|
3382
3468
|
--list--highlighteditem-color: var(--insetlist-highlighteditem-color, );
|
|
@@ -3396,6 +3482,7 @@
|
|
|
3396
3482
|
}
|
|
3397
3483
|
@container style(--list-style: inset-grouped) {
|
|
3398
3484
|
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view):not([list-style])) {
|
|
3485
|
+
--list-style: inset-grouped;
|
|
3399
3486
|
--list--item-color: var(--insetgroupedlist-item-color, );
|
|
3400
3487
|
--list--item-background-color: var(--insetgroupedlist-item-background-color, );
|
|
3401
3488
|
--list--item-border-radius: var(--insetlist-item-border-radius);
|
|
@@ -3415,6 +3502,7 @@
|
|
|
3415
3502
|
}
|
|
3416
3503
|
@container style(--list-style: sidebar) {
|
|
3417
3504
|
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view):not([list-style])) {
|
|
3505
|
+
--list-style: sidebar;
|
|
3418
3506
|
--list--item-border-radius: var(--insetlist-item-border-radius);
|
|
3419
3507
|
--list--details-gap: var(--list-row-gap);
|
|
3420
3508
|
--list--rootsummary-padding-inline-start: 5px;
|
|
@@ -3443,11 +3531,13 @@
|
|
|
3443
3531
|
--list--details-color: var(--sidebarlist-openitem-color, );
|
|
3444
3532
|
--list--opensummary-background-color: var(--sidebarlist-opensummary-background-color, );
|
|
3445
3533
|
--list--opensummary-color: var(--sidebarlist-opensummary-color, );
|
|
3534
|
+
--list--accessories-size: 0rem;
|
|
3446
3535
|
--list--accessories-display: none;
|
|
3447
3536
|
--list--rootsummary-marker-display: marker-trailing;
|
|
3448
3537
|
}
|
|
3449
3538
|
}
|
|
3450
3539
|
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)[list-style=inset]) {
|
|
3540
|
+
--list-style: inset;
|
|
3451
3541
|
--list--item-color: var(--insetlist-item-color, );
|
|
3452
3542
|
--list--item-background-color: var(--insetlist-item-background-color, );
|
|
3453
3543
|
--list--highlighteditem-color: var(--insetlist-highlighteditem-color, );
|
|
@@ -3465,6 +3555,7 @@
|
|
|
3465
3555
|
--list--opensummary-color: var(--insetlist-opensummary-color, );
|
|
3466
3556
|
}
|
|
3467
3557
|
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)[list-style=inset-grouped]) {
|
|
3558
|
+
--list-style: inset-grouped;
|
|
3468
3559
|
--list--item-color: var(--insetgroupedlist-item-color, );
|
|
3469
3560
|
--list--item-background-color: var(--insetgroupedlist-item-background-color, );
|
|
3470
3561
|
--list--item-border-radius: var(--insetlist-item-border-radius);
|
|
@@ -3482,6 +3573,7 @@
|
|
|
3482
3573
|
--list--opensummary-color: var(--insetgroupedlist-opensummary-color, );
|
|
3483
3574
|
}
|
|
3484
3575
|
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)[list-style=sidebar]) {
|
|
3576
|
+
--list-style: sidebar;
|
|
3485
3577
|
--list--item-border-radius: var(--insetlist-item-border-radius);
|
|
3486
3578
|
--list--details-gap: var(--list-row-gap);
|
|
3487
3579
|
--list--rootsummary-padding-inline-start: 5px;
|
|
@@ -3510,6 +3602,7 @@
|
|
|
3510
3602
|
--list--details-color: var(--sidebarlist-openitem-color, );
|
|
3511
3603
|
--list--opensummary-background-color: var(--sidebarlist-opensummary-background-color, );
|
|
3512
3604
|
--list--opensummary-color: var(--sidebarlist-opensummary-color, );
|
|
3605
|
+
--list--accessories-size: 0rem;
|
|
3513
3606
|
--list--accessories-display: none;
|
|
3514
3607
|
--list--rootsummary-marker-display: marker-trailing;
|
|
3515
3608
|
}
|
|
@@ -3543,6 +3636,7 @@
|
|
|
3543
3636
|
--list--details-color: var(--sidebarlist-openitem-color, );
|
|
3544
3637
|
--list--opensummary-background-color: var(--sidebarlist-opensummary-background-color, );
|
|
3545
3638
|
--list--opensummary-color: var(--sidebarlist-opensummary-color, );
|
|
3639
|
+
--list--accessories-size: 0rem;
|
|
3546
3640
|
--list--accessories-display: none;
|
|
3547
3641
|
--list--rootsummary-marker-display: marker-trailing;
|
|
3548
3642
|
}
|
|
@@ -3578,6 +3672,73 @@
|
|
|
3578
3672
|
}
|
|
3579
3673
|
}
|
|
3580
3674
|
}
|
|
3675
|
+
@container not style(--list-style: sidebar) {
|
|
3676
|
+
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) button[list-item-tint]) {
|
|
3677
|
+
--itemhighlightface: var(--accentColor3);
|
|
3678
|
+
--itemactiveface: var(--accentColor3);
|
|
3679
|
+
}
|
|
3680
|
+
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) button[list-item-tint]:not([is=navigation-link]) {
|
|
3681
|
+
--itemtext: var(--accentColor);
|
|
3682
|
+
--itemhighlighttext: var(--accentColor);
|
|
3683
|
+
--itemactivetext: var(--accentColor);
|
|
3684
|
+
}
|
|
3685
|
+
}
|
|
3686
|
+
@container style(--list-style: sidebar) {
|
|
3687
|
+
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) button[list-item-tint]) {
|
|
3688
|
+
--itemhighlightface: var(--accentColor);
|
|
3689
|
+
--itemactiveface: var(--accentColor);
|
|
3690
|
+
}
|
|
3691
|
+
}
|
|
3692
|
+
@media (min-width: 43rem) {
|
|
3693
|
+
:where(navigation-split-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
3694
|
+
--list--accessories-size: 0rem;
|
|
3695
|
+
--list--accessories-display: none;
|
|
3696
|
+
--insetlist-highlighteditem-background-color: var(--accentColor);
|
|
3697
|
+
--insetlist-highlighteditem-color: var(--tintcontrast);
|
|
3698
|
+
--insetgroupedlist-highlighteditem-background-color: var(--accentColor);
|
|
3699
|
+
--insetgroupedlist-highlighteditem-color: var(--tintcontrast);
|
|
3700
|
+
}
|
|
3701
|
+
@container style(--list-style: inset) or style(--list-style: inset-grouped) {
|
|
3702
|
+
:where(navigation-split-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) button[list-item-tint]) {
|
|
3703
|
+
--itemhighlightface: var(--accentColor);
|
|
3704
|
+
--itemactiveface: var(--accentColor);
|
|
3705
|
+
}
|
|
3706
|
+
}
|
|
3707
|
+
:where(navigation-split-view:has(> [is=sidebar-view])[preferred-compact-column=content]:not([column-visibility=double-column]) > body-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
3708
|
+
--list--accessories-size: 0rem;
|
|
3709
|
+
--list--accessories-display: none;
|
|
3710
|
+
--insetlist-highlighteditem-background-color: var(--accentColor);
|
|
3711
|
+
--insetlist-highlighteditem-color: var(--tintcontrast);
|
|
3712
|
+
--insetgroupedlist-highlighteditem-background-color: var(--accentColor);
|
|
3713
|
+
--insetgroupedlist-highlighteditem-color: var(--tintcontrast);
|
|
3714
|
+
}
|
|
3715
|
+
@container style(--list-style: inset) or style(--list-style: inset-grouped) {
|
|
3716
|
+
:where(navigation-split-view:has(> [is=sidebar-view])[preferred-compact-column=content]:not([column-visibility=double-column]) > body-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) button[list-item-tint]) {
|
|
3717
|
+
--itemhighlightface: var(--accentColor);
|
|
3718
|
+
--itemactiveface: var(--accentColor);
|
|
3719
|
+
}
|
|
3720
|
+
}
|
|
3721
|
+
}
|
|
3722
|
+
@media (min-width: 64rem) {
|
|
3723
|
+
:where(navigation-split-view:has(> [is=sidebar-view]):not([column-visibility=double-column]) > body-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
3724
|
+
--list--accessories-size: 0rem;
|
|
3725
|
+
--list--accessories-display: none;
|
|
3726
|
+
--insetlist-highlighteditem-background-color: var(--accentColor);
|
|
3727
|
+
--insetlist-highlighteditem-color: var(--tintcontrast);
|
|
3728
|
+
--insetgroupedlist-highlighteditem-background-color: var(--accentColor);
|
|
3729
|
+
--insetgroupedlist-highlighteditem-color: var(--tintcontrast);
|
|
3730
|
+
}
|
|
3731
|
+
@container style(--list-style: inset) or style(--list-style: inset-grouped) {
|
|
3732
|
+
:where(navigation-split-view:has(> [is=sidebar-view]):not([column-visibility=double-column]) > body-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) button[list-item-tint]) {
|
|
3733
|
+
--itemhighlightface: var(--accentColor);
|
|
3734
|
+
--itemactiveface: var(--accentColor);
|
|
3735
|
+
}
|
|
3736
|
+
}
|
|
3737
|
+
}
|
|
3738
|
+
:where(list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)[navigation-link-indicator-visibility=hidden]) {
|
|
3739
|
+
--list--accessories-size: 0rem;
|
|
3740
|
+
--list--accessories-display: none;
|
|
3741
|
+
}
|
|
3581
3742
|
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)[preferred-root-disclosure-style=sidebar] {
|
|
3582
3743
|
--list--rootsummary-color: var(--primary);
|
|
3583
3744
|
--list--selectedrootsummary-color: var(--primary);
|
|
@@ -3614,13 +3775,8 @@
|
|
|
3614
3775
|
list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)[preferred-root-disclosure-style=sidebar] > section-view > [is=disclosure-group] > button:first-of-type::before {
|
|
3615
3776
|
display: none;
|
|
3616
3777
|
}
|
|
3617
|
-
@media (min-width: 43rem) {
|
|
3618
|
-
:where(navigation-split-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view), navigation-split-view > body-view > scroll-view list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
3619
|
-
--list--accessories-display: none;
|
|
3620
|
-
}
|
|
3621
|
-
}
|
|
3622
3778
|
}
|
|
3623
|
-
@layer sw-components {
|
|
3779
|
+
@layer sw-list-components {
|
|
3624
3780
|
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])) {
|
|
3625
3781
|
--list--section-gap: var(--form-gap);
|
|
3626
3782
|
--list--host-background-color: var(--form-background-color, );
|
|
@@ -3671,6 +3827,7 @@
|
|
|
3671
3827
|
--list--selectedrootsummary-color: if(style(--form-style: sidebar): var(--primary, ); );
|
|
3672
3828
|
--list--separator-background-color: if(style(--form-style: sidebar): transparent; );
|
|
3673
3829
|
--list--activeseparator-background-color: if(style(--form-style: sidebar): transparent; );
|
|
3830
|
+
--list--accessories-size: if(style(--form-style: sidebar): 0rem; else: 1.1rem ;);
|
|
3674
3831
|
--list--accessories-display: if(style(--form-style: sidebar): none; else: grid ;);
|
|
3675
3832
|
--list--rootsummary-marker-display: if(style(--form-style: sidebar): marker-trailing; );
|
|
3676
3833
|
}
|
|
@@ -3678,6 +3835,7 @@
|
|
|
3678
3835
|
@supports not (x: if(else:red)) {
|
|
3679
3836
|
@container style(--form-style: inset) {
|
|
3680
3837
|
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]):not([form-style])) {
|
|
3838
|
+
--form-style: inset;
|
|
3681
3839
|
--list--host-background-color: var(--insetform-background-color, );
|
|
3682
3840
|
--list--host-padding-inline: var(--insetform-padding-inline);
|
|
3683
3841
|
--list--host-padding-block: var(--insetform-padding-block);
|
|
@@ -3697,6 +3855,7 @@
|
|
|
3697
3855
|
}
|
|
3698
3856
|
@container style(--form-style: inset-grouped) {
|
|
3699
3857
|
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]):not([form-style])) {
|
|
3858
|
+
--form-style: inset-grouped;
|
|
3700
3859
|
--list--host-background-color: var(--insetgroupedform-background-color, );
|
|
3701
3860
|
--list--host-padding-inline: var(--insetgroupedform-padding-inline);
|
|
3702
3861
|
--list--host-padding-block: var(--insetgroupedform-padding-block);
|
|
@@ -3716,6 +3875,7 @@
|
|
|
3716
3875
|
}
|
|
3717
3876
|
@container style(--form-style: sidebar) {
|
|
3718
3877
|
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]):not([form-style])) {
|
|
3878
|
+
--form-style: sidebar;
|
|
3719
3879
|
--list--item-border-radius: var(--insetform-item-border-radius);
|
|
3720
3880
|
--list--details-gap: var(--form-gap);
|
|
3721
3881
|
--list--rootsummary-padding-inline-start: 5px;
|
|
@@ -3744,11 +3904,13 @@
|
|
|
3744
3904
|
--list--details-color: var(--sidebarform-openitem-color, );
|
|
3745
3905
|
--list--opensummary-background-color: var(--sidebarform-opensummary-background-color, );
|
|
3746
3906
|
--list--opensummary-color: var(--sidebarform-opensummary-color, );
|
|
3907
|
+
--list--accessories-size: 0rem;
|
|
3747
3908
|
--list--accessories-display: none;
|
|
3748
3909
|
--list--rootsummary-marker-display: marker-trailing;
|
|
3749
3910
|
}
|
|
3750
3911
|
}
|
|
3751
3912
|
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])[form-style=inset]) {
|
|
3913
|
+
--form-style: inset;
|
|
3752
3914
|
--list--host-background-color: var(--insetform-background-color, );
|
|
3753
3915
|
--list--host-padding-inline: var(--insetform-padding-inline);
|
|
3754
3916
|
--list--host-padding-block: var(--insetform-padding-block);
|
|
@@ -3766,6 +3928,7 @@
|
|
|
3766
3928
|
--list--opensummary-color: var(--insetform-opensummary-color, );
|
|
3767
3929
|
}
|
|
3768
3930
|
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])[form-style=inset-grouped]) {
|
|
3931
|
+
--form-style: inset-grouped;
|
|
3769
3932
|
--list--host-background-color: var(--insetgroupedform-background-color, );
|
|
3770
3933
|
--list--host-padding-inline: var(--insetgroupedform-padding-inline);
|
|
3771
3934
|
--list--host-padding-block: var(--insetgroupedform-padding-block);
|
|
@@ -3783,6 +3946,7 @@
|
|
|
3783
3946
|
--list--opensummary-color: var(--insetgroupedform-opensummary-color, );
|
|
3784
3947
|
}
|
|
3785
3948
|
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])[form-style=sidebar]) {
|
|
3949
|
+
--form-style: sidebar;
|
|
3786
3950
|
--list--item-border-radius: var(--insetform-item-border-radius);
|
|
3787
3951
|
--list--details-gap: var(--form-gap);
|
|
3788
3952
|
--list--rootsummary-padding-inline-start: 5px;
|
|
@@ -3811,6 +3975,7 @@
|
|
|
3811
3975
|
--list--details-color: var(--sidebarform-openitem-color, );
|
|
3812
3976
|
--list--opensummary-background-color: var(--sidebarform-opensummary-background-color, );
|
|
3813
3977
|
--list--opensummary-color: var(--sidebarform-opensummary-color, );
|
|
3978
|
+
--list--accessories-size: 0rem;
|
|
3814
3979
|
--list--accessories-display: none;
|
|
3815
3980
|
--list--rootsummary-marker-display: marker-trailing;
|
|
3816
3981
|
}
|
|
@@ -3844,6 +4009,7 @@
|
|
|
3844
4009
|
--list--details-color: var(--sidebarform-openitem-color, );
|
|
3845
4010
|
--list--opensummary-background-color: var(--sidebarform-opensummary-background-color, );
|
|
3846
4011
|
--list--opensummary-color: var(--sidebarform-opensummary-color, );
|
|
4012
|
+
--list--accessories-size: 0rem;
|
|
3847
4013
|
--list--accessories-display: none;
|
|
3848
4014
|
--list--rootsummary-marker-display: marker-trailing;
|
|
3849
4015
|
}
|
|
@@ -3879,11 +4045,73 @@
|
|
|
3879
4045
|
}
|
|
3880
4046
|
}
|
|
3881
4047
|
}
|
|
4048
|
+
@container not style(--form-style: sidebar) {
|
|
4049
|
+
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) button[list-item-tint]) {
|
|
4050
|
+
--itemhighlightface: var(--accentColor3);
|
|
4051
|
+
--itemactiveface: var(--accentColor3);
|
|
4052
|
+
}
|
|
4053
|
+
[is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) button[list-item-tint]:not([is=navigation-link]) {
|
|
4054
|
+
--itemtext: var(--accentColor);
|
|
4055
|
+
--itemhighlighttext: var(--accentColor);
|
|
4056
|
+
--itemactivetext: var(--accentColor);
|
|
4057
|
+
}
|
|
4058
|
+
}
|
|
4059
|
+
@container style(--form-style: sidebar) {
|
|
4060
|
+
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) button[list-item-tint]) {
|
|
4061
|
+
--itemhighlightface: var(--accentColor);
|
|
4062
|
+
--itemactiveface: var(--accentColor);
|
|
4063
|
+
}
|
|
4064
|
+
}
|
|
3882
4065
|
@media (min-width: 43rem) {
|
|
3883
|
-
:where(navigation-split-view > scroll-view [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])
|
|
4066
|
+
:where(navigation-split-view > scroll-view [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])) {
|
|
4067
|
+
--list--accessories-size: 0rem;
|
|
4068
|
+
--list--accessories-display: none;
|
|
4069
|
+
--insetform-highlighteditem-background-color: var(--accentColor);
|
|
4070
|
+
--insetform-highlighteditem-color: var(--tintcontrast);
|
|
4071
|
+
--insetgroupedform-highlighteditem-background-color: var(--accentColor);
|
|
4072
|
+
--insetgroupedform-highlighteditem-color: var(--tintcontrast);
|
|
4073
|
+
}
|
|
4074
|
+
@container style(--list-style: inset) or style(--list-style: inset-grouped) {
|
|
4075
|
+
:where(navigation-split-view > scroll-view [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) button[list-item-tint]) {
|
|
4076
|
+
--itemhighlightface: var(--accentColor);
|
|
4077
|
+
--itemactiveface: var(--accentColor);
|
|
4078
|
+
}
|
|
4079
|
+
}
|
|
4080
|
+
:where(navigation-split-view:has(> [is=sidebar-view])[preferred-compact-column=content]:not([column-visibility=double-column]) > body-view > scroll-view [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])) {
|
|
4081
|
+
--list--accessories-size: 0rem;
|
|
4082
|
+
--list--accessories-display: none;
|
|
4083
|
+
--insetform-highlighteditem-background-color: var(--accentColor);
|
|
4084
|
+
--insetform-highlighteditem-color: var(--tintcontrast);
|
|
4085
|
+
--insetgroupedform-highlighteditem-background-color: var(--accentColor);
|
|
4086
|
+
--insetgroupedform-highlighteditem-color: var(--tintcontrast);
|
|
4087
|
+
}
|
|
4088
|
+
@container style(--list-style: inset) or style(--list-style: inset-grouped) {
|
|
4089
|
+
:where(navigation-split-view:has(> [is=sidebar-view])[preferred-compact-column=content]:not([column-visibility=double-column]) > body-view > scroll-view [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) button[list-item-tint]) {
|
|
4090
|
+
--itemhighlightface: var(--accentColor);
|
|
4091
|
+
--itemactiveface: var(--accentColor);
|
|
4092
|
+
}
|
|
4093
|
+
}
|
|
4094
|
+
}
|
|
4095
|
+
@media (min-width: 64rem) {
|
|
4096
|
+
:where(navigation-split-view:has(> [is=sidebar-view]):not([column-visibility=double-column]) > body-view > scroll-view [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])) {
|
|
4097
|
+
--list--accessories-size: 0rem;
|
|
3884
4098
|
--list--accessories-display: none;
|
|
4099
|
+
--insetform-highlighteditem-background-color: var(--accentColor);
|
|
4100
|
+
--insetform-highlighteditem-color: var(--tintcontrast);
|
|
4101
|
+
--insetgroupedform-highlighteditem-background-color: var(--accentColor);
|
|
4102
|
+
--insetgroupedform-highlighteditem-color: var(--tintcontrast);
|
|
4103
|
+
}
|
|
4104
|
+
@container style(--list-style: inset) or style(--list-style: inset-grouped) {
|
|
4105
|
+
:where(navigation-split-view:has(> [is=sidebar-view]):not([column-visibility=double-column]) > body-view > scroll-view [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) button[list-item-tint]) {
|
|
4106
|
+
--itemhighlightface: var(--accentColor);
|
|
4107
|
+
--itemactiveface: var(--accentColor);
|
|
4108
|
+
}
|
|
3885
4109
|
}
|
|
3886
4110
|
}
|
|
4111
|
+
:where([is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view])[navigation-link-indicator-visibility=hidden]) {
|
|
4112
|
+
--list--accessories-size: 0rem;
|
|
4113
|
+
--list--accessories-display: none;
|
|
4114
|
+
}
|
|
3887
4115
|
}
|
|
3888
4116
|
@layer sw-components {
|
|
3889
4117
|
:where(section-view) {
|
|
@@ -3960,7 +4188,7 @@
|
|
|
3960
4188
|
inherits: false;
|
|
3961
4189
|
initial-value: 0;
|
|
3962
4190
|
}
|
|
3963
|
-
@layer sw-components {
|
|
4191
|
+
@layer sw-list-components {
|
|
3964
4192
|
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view)) {
|
|
3965
4193
|
container: table/inline-size;
|
|
3966
4194
|
}
|
|
@@ -4179,6 +4407,7 @@
|
|
|
4179
4407
|
display: none;
|
|
4180
4408
|
}
|
|
4181
4409
|
:where([is=table-row]) {
|
|
4410
|
+
--list--accessories-size: 0rem;
|
|
4182
4411
|
--list--accessories-display: none;
|
|
4183
4412
|
grid-auto-flow: column;
|
|
4184
4413
|
grid-auto-columns: minmax(0, 1fr);
|
|
@@ -4325,42 +4554,6 @@
|
|
|
4325
4554
|
margin-inline-start: 2rem;
|
|
4326
4555
|
}
|
|
4327
4556
|
}
|
|
4328
|
-
@container style(--picker-style: menu) {
|
|
4329
|
-
:where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary) {
|
|
4330
|
-
position: relative;
|
|
4331
|
-
grid-auto-flow: column;
|
|
4332
|
-
grid-template-columns: var(--picker-affordance-size) minmax(0, 1fr);
|
|
4333
|
-
column-gap: var(--picker-affordance-col-gap);
|
|
4334
|
-
}
|
|
4335
|
-
:where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)::before {
|
|
4336
|
-
pointer-events: none;
|
|
4337
|
-
content: "";
|
|
4338
|
-
-webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
|
|
4339
|
-
mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
|
|
4340
|
-
transform-origin: center;
|
|
4341
|
-
aspect-ratio: 1;
|
|
4342
|
-
place-self: center;
|
|
4343
|
-
}
|
|
4344
|
-
:where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)::before {
|
|
4345
|
-
display: grid;
|
|
4346
|
-
block-size: var(--picker-affordance-size);
|
|
4347
|
-
inline-size: var(--picker-affordance-size);
|
|
4348
|
-
background-color: var(--menuitemtext, var(--text));
|
|
4349
|
-
transform: var(--tablecol--after-rotate, );
|
|
4350
|
-
}
|
|
4351
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
4352
|
-
:where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)::before {
|
|
4353
|
-
transition: transform 100ms ease-out;
|
|
4354
|
-
will-change: transform;
|
|
4355
|
-
}
|
|
4356
|
-
}
|
|
4357
|
-
:where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)::before {
|
|
4358
|
-
opacity: 0;
|
|
4359
|
-
}
|
|
4360
|
-
:where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)[aria-selected=true]::before {
|
|
4361
|
-
opacity: 1;
|
|
4362
|
-
}
|
|
4363
|
-
}
|
|
4364
4557
|
@supports (x: if(else:red)) {
|
|
4365
4558
|
:where(picker-view) {
|
|
4366
4559
|
--picker--labelstack-display: if(style(--picker-style: menu): grid; );
|
|
@@ -4377,40 +4570,6 @@
|
|
|
4377
4570
|
:where(:where(picker-view[picker-style=menu]) menu-view > menu-view > label-view[slot=label]) {
|
|
4378
4571
|
margin-inline-start: 2rem;
|
|
4379
4572
|
}
|
|
4380
|
-
:where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary) {
|
|
4381
|
-
position: relative;
|
|
4382
|
-
grid-auto-flow: column;
|
|
4383
|
-
grid-template-columns: var(--picker-affordance-size) minmax(0, 1fr);
|
|
4384
|
-
column-gap: var(--picker-affordance-col-gap);
|
|
4385
|
-
}
|
|
4386
|
-
:where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)::before {
|
|
4387
|
-
pointer-events: none;
|
|
4388
|
-
content: "";
|
|
4389
|
-
-webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
|
|
4390
|
-
mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
|
|
4391
|
-
transform-origin: center;
|
|
4392
|
-
aspect-ratio: 1;
|
|
4393
|
-
place-self: center;
|
|
4394
|
-
}
|
|
4395
|
-
:where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)::before {
|
|
4396
|
-
display: grid;
|
|
4397
|
-
block-size: var(--picker-affordance-size);
|
|
4398
|
-
inline-size: var(--picker-affordance-size);
|
|
4399
|
-
background-color: var(--menuitemtext, var(--text));
|
|
4400
|
-
transform: var(--tablecol--after-rotate, );
|
|
4401
|
-
}
|
|
4402
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
4403
|
-
:where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)::before {
|
|
4404
|
-
transition: transform 100ms ease-out;
|
|
4405
|
-
will-change: transform;
|
|
4406
|
-
}
|
|
4407
|
-
}
|
|
4408
|
-
:where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)::before {
|
|
4409
|
-
opacity: 0;
|
|
4410
|
-
}
|
|
4411
|
-
:where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)[aria-selected=true]::before {
|
|
4412
|
-
opacity: 1;
|
|
4413
|
-
}
|
|
4414
4573
|
:where(picker-view[picker-style=menu]) {
|
|
4415
4574
|
--picker--labelstack-display: grid;
|
|
4416
4575
|
--picker--stack-grid-template-columns: auto minmax(0, 1fr);
|
|
@@ -5096,7 +5255,8 @@
|
|
|
5096
5255
|
:where([foreground="blue.secondary"]) {
|
|
5097
5256
|
color: var(--blue2);
|
|
5098
5257
|
}
|
|
5099
|
-
:where([tint=
|
|
5258
|
+
:where([tint='"" + $tint'],
|
|
5259
|
+
[list-item-tint='"" + $tint']) {
|
|
5100
5260
|
--accentColorEffective: var(--gray);
|
|
5101
5261
|
--accentColorEffective4: var(--gray4);
|
|
5102
5262
|
--accentColor: var(--gray);
|
|
@@ -5105,7 +5265,8 @@
|
|
|
5105
5265
|
--accentColor4: var(--gray4);
|
|
5106
5266
|
--accentColor5: var(--gray5);
|
|
5107
5267
|
}
|
|
5108
|
-
:where([tint=
|
|
5268
|
+
:where([tint='"" + $tint'],
|
|
5269
|
+
[list-item-tint='"" + $tint']) {
|
|
5109
5270
|
--accentColorEffective: var(--blue);
|
|
5110
5271
|
--accentColorEffective4: var(--blue4);
|
|
5111
5272
|
--accentColor: var(--blue);
|
|
@@ -5114,7 +5275,8 @@
|
|
|
5114
5275
|
--accentColor4: var(--blue4);
|
|
5115
5276
|
--accentColor5: var(--blue5);
|
|
5116
5277
|
}
|
|
5117
|
-
:where([tint=
|
|
5278
|
+
:where([tint='"" + $tint'],
|
|
5279
|
+
[list-item-tint='"" + $tint']) {
|
|
5118
5280
|
--accentColorEffective: var(--red);
|
|
5119
5281
|
--accentColorEffective4: var(--red4);
|
|
5120
5282
|
--accentColor: var(--red);
|
|
@@ -5123,6 +5285,26 @@
|
|
|
5123
5285
|
--accentColor4: var(--red4);
|
|
5124
5286
|
--accentColor5: var(--red5);
|
|
5125
5287
|
}
|
|
5288
|
+
:where([tint='"" + $tint'],
|
|
5289
|
+
[list-item-tint='"" + $tint']) {
|
|
5290
|
+
--accentColorEffective: var(--green);
|
|
5291
|
+
--accentColorEffective4: var(--green4);
|
|
5292
|
+
--accentColor: var(--green);
|
|
5293
|
+
--accentColor2: var(--green2);
|
|
5294
|
+
--accentColor3: var(--green3);
|
|
5295
|
+
--accentColor4: var(--green4);
|
|
5296
|
+
--accentColor5: var(--green5);
|
|
5297
|
+
}
|
|
5298
|
+
:where([tint='"" + $tint'],
|
|
5299
|
+
[list-item-tint='"" + $tint']) {
|
|
5300
|
+
--accentColorEffective: var(--orange);
|
|
5301
|
+
--accentColorEffective4: var(--orange4);
|
|
5302
|
+
--accentColor: var(--orange);
|
|
5303
|
+
--accentColor2: var(--orange2);
|
|
5304
|
+
--accentColor3: var(--orange3);
|
|
5305
|
+
--accentColor4: var(--orange4);
|
|
5306
|
+
--accentColor5: var(--orange5);
|
|
5307
|
+
}
|
|
5126
5308
|
}
|
|
5127
5309
|
@layer sw-utils {
|
|
5128
5310
|
:where([frame\:width=infinity]) {
|
|
@@ -7350,13 +7532,13 @@
|
|
|
7350
7532
|
}
|
|
7351
7533
|
@property --blue5 {
|
|
7352
7534
|
syntax: "<color>";
|
|
7353
|
-
initial-value: oklch(
|
|
7535
|
+
initial-value: oklch(93.99% 0.0298 245.27deg);
|
|
7354
7536
|
inherits: true;
|
|
7355
7537
|
}
|
|
7356
7538
|
@media (prefers-color-scheme: dark) {
|
|
7357
7539
|
@property --blue5 {
|
|
7358
7540
|
syntax: "<color>";
|
|
7359
|
-
initial-value: oklch(
|
|
7541
|
+
initial-value: oklch(16.02% 0.0312 241.89deg);
|
|
7360
7542
|
inherits: true;
|
|
7361
7543
|
}
|
|
7362
7544
|
}
|
|
@@ -7410,13 +7592,133 @@
|
|
|
7410
7592
|
}
|
|
7411
7593
|
@property --red5 {
|
|
7412
7594
|
syntax: "<color>";
|
|
7413
|
-
initial-value: oklch(
|
|
7595
|
+
initial-value: oklch(94.51% 0.0312 23.18deg);
|
|
7414
7596
|
inherits: true;
|
|
7415
7597
|
}
|
|
7416
7598
|
@media (prefers-color-scheme: dark) {
|
|
7417
7599
|
@property --red5 {
|
|
7418
7600
|
syntax: "<color>";
|
|
7419
|
-
initial-value: oklch(
|
|
7601
|
+
initial-value: oklch(16.92% 0.0381 24.05deg);
|
|
7602
|
+
inherits: true;
|
|
7603
|
+
}
|
|
7604
|
+
}
|
|
7605
|
+
@property --green {
|
|
7606
|
+
syntax: "<color>";
|
|
7607
|
+
initial-value: oklch(73.03% 0.1944 147.44deg);
|
|
7608
|
+
inherits: true;
|
|
7609
|
+
}
|
|
7610
|
+
@media (prefers-color-scheme: dark) {
|
|
7611
|
+
@property --green {
|
|
7612
|
+
syntax: "<color>";
|
|
7613
|
+
initial-value: oklch(75.56% 0.2082 146.98deg);
|
|
7614
|
+
inherits: true;
|
|
7615
|
+
}
|
|
7616
|
+
}
|
|
7617
|
+
@property --green2 {
|
|
7618
|
+
syntax: "<color>";
|
|
7619
|
+
initial-value: oklch(82.24% 0.1298 162.01deg);
|
|
7620
|
+
inherits: true;
|
|
7621
|
+
}
|
|
7622
|
+
@media (prefers-color-scheme: dark) {
|
|
7623
|
+
@property --green2 {
|
|
7624
|
+
syntax: "<color>";
|
|
7625
|
+
initial-value: oklch(48.79% 0.1248 152deg);
|
|
7626
|
+
inherits: true;
|
|
7627
|
+
}
|
|
7628
|
+
}
|
|
7629
|
+
@property --green3 {
|
|
7630
|
+
syntax: "<color>";
|
|
7631
|
+
initial-value: oklch(90.6% 0.0681 165.21deg);
|
|
7632
|
+
inherits: true;
|
|
7633
|
+
}
|
|
7634
|
+
@media (prefers-color-scheme: dark) {
|
|
7635
|
+
@property --green3 {
|
|
7636
|
+
syntax: "<color>";
|
|
7637
|
+
initial-value: oklch(35.59% 0.0789 157.3deg);
|
|
7638
|
+
inherits: true;
|
|
7639
|
+
}
|
|
7640
|
+
}
|
|
7641
|
+
@property --green4 {
|
|
7642
|
+
syntax: "<color>";
|
|
7643
|
+
initial-value: oklch(93.23% 0.0504 166.1deg);
|
|
7644
|
+
inherits: true;
|
|
7645
|
+
}
|
|
7646
|
+
@media (prefers-color-scheme: dark) {
|
|
7647
|
+
@property --green4 {
|
|
7648
|
+
syntax: "<color>";
|
|
7649
|
+
initial-value: oklch(31.56% 0.0607 160.27deg);
|
|
7650
|
+
inherits: true;
|
|
7651
|
+
}
|
|
7652
|
+
}
|
|
7653
|
+
@property --green5 {
|
|
7654
|
+
syntax: "<color>";
|
|
7655
|
+
initial-value: oklch(95.58% 0.0353 166.1deg);
|
|
7656
|
+
inherits: true;
|
|
7657
|
+
}
|
|
7658
|
+
@media (prefers-color-scheme: dark) {
|
|
7659
|
+
@property --green5 {
|
|
7660
|
+
syntax: "<color>";
|
|
7661
|
+
initial-value: oklch(26.32% 0.0425 160.27deg);
|
|
7662
|
+
inherits: true;
|
|
7663
|
+
}
|
|
7664
|
+
}
|
|
7665
|
+
@property --orange {
|
|
7666
|
+
syntax: "<color>";
|
|
7667
|
+
initial-value: oklch(75.33% 0.172 55.72deg);
|
|
7668
|
+
inherits: true;
|
|
7669
|
+
}
|
|
7670
|
+
@media (prefers-color-scheme: dark) {
|
|
7671
|
+
@property --orange {
|
|
7672
|
+
syntax: "<color>";
|
|
7673
|
+
initial-value: oklch(76.19% 0.167 57.05deg);
|
|
7674
|
+
inherits: true;
|
|
7675
|
+
}
|
|
7676
|
+
}
|
|
7677
|
+
@property --orange2 {
|
|
7678
|
+
syntax: "<color>";
|
|
7679
|
+
initial-value: oklch(85.48% 0.111 68.86deg);
|
|
7680
|
+
inherits: true;
|
|
7681
|
+
}
|
|
7682
|
+
@media (prefers-color-scheme: dark) {
|
|
7683
|
+
@property --orange2 {
|
|
7684
|
+
syntax: "<color>";
|
|
7685
|
+
initial-value: oklch(44.68% 0.0914 61.4deg);
|
|
7686
|
+
inherits: true;
|
|
7687
|
+
}
|
|
7688
|
+
}
|
|
7689
|
+
@property --orange3 {
|
|
7690
|
+
syntax: "<color>";
|
|
7691
|
+
initial-value: oklch(92.68% 0.0611 75.74deg);
|
|
7692
|
+
inherits: true;
|
|
7693
|
+
}
|
|
7694
|
+
@media (prefers-color-scheme: dark) {
|
|
7695
|
+
@property --orange3 {
|
|
7696
|
+
syntax: "<color>";
|
|
7697
|
+
initial-value: oklch(28.23% 0.051 67.31deg);
|
|
7698
|
+
inherits: true;
|
|
7699
|
+
}
|
|
7700
|
+
}
|
|
7701
|
+
@property --orange4 {
|
|
7702
|
+
syntax: "<color>";
|
|
7703
|
+
initial-value: oklch(94.43% 0.045 74.78deg);
|
|
7704
|
+
inherits: true;
|
|
7705
|
+
}
|
|
7706
|
+
@media (prefers-color-scheme: dark) {
|
|
7707
|
+
@property --orange4 {
|
|
7708
|
+
syntax: "<color>";
|
|
7709
|
+
initial-value: oklch(23.89% 0.04 75.03deg);
|
|
7710
|
+
inherits: true;
|
|
7711
|
+
}
|
|
7712
|
+
}
|
|
7713
|
+
@property --orange5 {
|
|
7714
|
+
syntax: "<color>";
|
|
7715
|
+
initial-value: oklch(96.51% 0.0315 74.78deg);
|
|
7716
|
+
inherits: true;
|
|
7717
|
+
}
|
|
7718
|
+
@media (prefers-color-scheme: dark) {
|
|
7719
|
+
@property --orange5 {
|
|
7720
|
+
syntax: "<color>";
|
|
7721
|
+
initial-value: oklch(19.83% 0.028 75.03deg);
|
|
7420
7722
|
inherits: true;
|
|
7421
7723
|
}
|
|
7422
7724
|
}
|
|
@@ -7834,13 +8136,13 @@
|
|
|
7834
8136
|
}
|
|
7835
8137
|
@property --accentColor5 {
|
|
7836
8138
|
syntax: "<color>";
|
|
7837
|
-
initial-value: oklch(
|
|
8139
|
+
initial-value: oklch(93.99% 0.0298 245.27deg);
|
|
7838
8140
|
inherits: true;
|
|
7839
8141
|
}
|
|
7840
8142
|
@media (prefers-color-scheme: dark) {
|
|
7841
8143
|
@property --accentColor5 {
|
|
7842
8144
|
syntax: "<color>";
|
|
7843
|
-
initial-value: oklch(
|
|
8145
|
+
initial-value: oklch(16.02% 0.0312 241.89deg);
|
|
7844
8146
|
inherits: true;
|
|
7845
8147
|
}
|
|
7846
8148
|
}
|
|
@@ -7886,17 +8188,14 @@
|
|
|
7886
8188
|
--toolbaritemactivetext: var(--text);
|
|
7887
8189
|
}
|
|
7888
8190
|
:where(tool-bar-item,
|
|
7889
|
-
tool-bar-item-group
|
|
7890
|
-
navigation-split-view sidebar-toggle) {
|
|
8191
|
+
tool-bar-item-group) {
|
|
7891
8192
|
--toolbaritemface: light-dark(var(--toolbar-cell-bg), var(--toolbar-cell-bg-dark));
|
|
7892
8193
|
--toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
|
|
7893
8194
|
--toolbaritemactiveface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
|
|
7894
8195
|
}
|
|
7895
|
-
:where(tool-bar-item[tint]
|
|
8196
|
+
:where(tool-bar-item[tint]:not(tool-bar-item-group tool-bar-item),
|
|
7896
8197
|
tool-bar-item-group[tint],
|
|
7897
|
-
[tint] tool-bar-item
|
|
7898
|
-
navigation-split-view sidebar-toggle[tint],
|
|
7899
|
-
[tint] navigation-split-view sidebar-toggle) {
|
|
8198
|
+
tool-bar-item-group[tint] > tool-bar-item:not([tint])) {
|
|
7900
8199
|
--toolbaritemface: light-dark(var(--accentColor), var(--accentColor));
|
|
7901
8200
|
--toolbaritemtext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
|
|
7902
8201
|
--toolbaritemhighlightface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h));
|
|
@@ -7904,15 +8203,16 @@
|
|
|
7904
8203
|
--toolbaritemactiveface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h));
|
|
7905
8204
|
--toolbaritemactivetext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
|
|
7906
8205
|
}
|
|
7907
|
-
:where(tool-bar-item[tint]
|
|
8206
|
+
:where(tool-bar-item[tint]:not(tool-bar-item-group tool-bar-item),
|
|
7908
8207
|
tool-bar-item-group[tint],
|
|
7909
|
-
[tint] tool-bar-item
|
|
7910
|
-
navigation-split-view sidebar-toggle[tint],
|
|
7911
|
-
[tint] navigation-split-view sidebar-toggle) > button {
|
|
8208
|
+
tool-bar-item-group[tint] > tool-bar-item:not([tint])) > button {
|
|
7912
8209
|
--secondary: var(--btntext);
|
|
7913
8210
|
--blue: var(--btntext);
|
|
7914
|
-
--
|
|
8211
|
+
--red: var(--btntext);
|
|
8212
|
+
--green: var(--btntext);
|
|
8213
|
+
--orange: var(--btntext);
|
|
7915
8214
|
--accentColor: var(--btntext);
|
|
8215
|
+
--accentColorEffective: var(--btntext);
|
|
7916
8216
|
}
|
|
7917
8217
|
:where(sidebar-toggle) {
|
|
7918
8218
|
--toolbaritemhighlightface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
|
|
@@ -7955,6 +8255,10 @@
|
|
|
7955
8255
|
--btnhighlighttext: light-dark(oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h));
|
|
7956
8256
|
--btnactivetext: light-dark(oklch(from var(--accentColor) max(calc(l * 0.5), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.4), c) h));
|
|
7957
8257
|
}
|
|
8258
|
+
/**
|
|
8259
|
+
* NOTE: --accentColorEffective does NOT exist, it is NOT set anywhere initially!
|
|
8260
|
+
* NOTE: Some controls use it to override the initial style WHEN/IF ...Effective is set by someone above.
|
|
8261
|
+
*/
|
|
7958
8262
|
:where([is=bordered-button]) {
|
|
7959
8263
|
--btntext: var(--accentColorEffective, var(--accentColor));
|
|
7960
8264
|
--btnhighlighttext: light-dark(
|