@sanity/themer 0.7.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/bundle.css CHANGED
@@ -1,674 +1,314 @@
1
- ._1o50s7t0 {
2
- scrollbar-gutter: stable;
3
- }
4
-
5
- ._1aa9huua {
6
- aspect-ratio: 16 / 9;
7
- position: relative;
8
- overflow: hidden;
1
+ .bgn4np2 {
2
+ view-transition-name: bgn4np0;
3
+ flex: none;
9
4
  }
10
5
 
11
- ._1aa9huub {
12
- background: var(--_1aa9huu0);
13
- flex-direction: column;
14
- display: flex;
6
+ .bgn4np2[data-overlay="true"] {
7
+ width: auto;
15
8
  position: absolute;
16
9
  inset: 0;
17
10
  }
18
11
 
19
- ._1aa9huud {
20
- clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
12
+ .bgn4np3 {
13
+ position: relative;
21
14
  }
22
15
 
23
- ._1aa9huue {
24
- border-bottom: 1px solid var(--_1aa9huu3);
25
- flex: none;
26
- align-items: center;
27
- gap: 5px;
28
- height: 18%;
29
- padding: 0 5%;
30
- display: flex;
16
+ .bgn4np4 {
17
+ container: bgn4np1 / inline-size;
31
18
  }
32
19
 
33
- ._1aa9huuf {
34
- background: var(--_1aa9huu4);
35
- border-radius: 2px;
36
- flex: none;
37
- width: 8px;
38
- height: 8px;
20
+ .bgn4np5 {
21
+ z-index: 1;
22
+ cursor: col-resize;
23
+ touch-action: none;
24
+ width: 7px;
25
+ position: absolute;
26
+ top: 0;
27
+ bottom: 0;
28
+ left: -3px;
39
29
  }
40
30
 
41
- ._1aa9huug {
42
- flex: 1;
31
+ .bgn4np5:after {
32
+ content: "";
33
+ background: var(--card-focus-ring-color);
34
+ opacity: 0;
35
+ width: 3px;
36
+ transition: opacity .1s;
37
+ position: absolute;
38
+ top: 0;
39
+ bottom: 0;
40
+ left: 2px;
43
41
  }
44
42
 
45
- ._1aa9huuh {
46
- background: var(--_1aa9huu5);
47
- border-radius: 50%;
48
- flex: none;
49
- width: 8px;
50
- height: 8px;
43
+ .bgn4np5:focus {
44
+ outline: none;
51
45
  }
52
46
 
53
- ._1aa9huui {
54
- flex: 1;
55
- min-height: 0;
56
- display: flex;
47
+ .bgn4np5:hover:after, .bgn4np5:focus-visible:after, .bgn4np5[data-dragging="true"]:after {
48
+ opacity: 1;
57
49
  }
58
50
 
59
- ._1aa9huuj {
60
- border-right: 1px solid var(--_1aa9huu3);
61
- flex-direction: column;
62
- flex: none;
63
- width: 36%;
64
- display: flex;
51
+ @keyframes _1yq4ar7b {
52
+ from {
53
+ transform: translateX(-100%);
54
+ }
65
55
  }
66
56
 
67
- ._1aa9huuk {
68
- flex: none;
69
- align-items: center;
70
- height: 18%;
71
- padding: 0 9%;
72
- display: flex;
57
+ @keyframes _1yq4ar7c {
58
+ to {
59
+ transform: translateX(-100%);
60
+ }
73
61
  }
74
62
 
75
- ._1aa9huuk[data-selected="true"] {
76
- background: var(--_1aa9huu6);
63
+ @keyframes _1yq4ar7d {
64
+ from {
65
+ transform: translateY(-100%);
66
+ }
77
67
  }
78
68
 
79
- ._1aa9huul {
80
- flex-direction: column;
81
- flex: 1;
82
- min-width: 0;
83
- display: flex;
69
+ @keyframes _1yq4ar7e {
70
+ to {
71
+ transform: translateY(-100%);
72
+ }
84
73
  }
85
74
 
86
- ._1aa9huum {
87
- flex-direction: column;
88
- flex: 1;
89
- gap: 7px;
90
- min-height: 0;
91
- padding: 9% 8% 0;
92
- display: flex;
93
- overflow: hidden;
75
+ @keyframes _1yq4ar7f {
76
+ from {
77
+ transform: translateX(100%);
78
+ }
94
79
  }
95
80
 
96
- ._1aa9huun {
97
- flex-direction: column;
98
- flex: none;
99
- gap: 3px;
100
- display: flex;
81
+ @keyframes _1yq4ar7g {
82
+ to {
83
+ transform: translateX(100%);
84
+ }
101
85
  }
102
86
 
103
- ._1aa9huuo {
104
- background: var(--_1aa9huu8);
105
- height: 12px;
106
- box-shadow: inset 0 0 0 1px var(--_1aa9huu9);
107
- border-radius: 3px;
87
+ ._1yq4ar78 {
88
+ position: relative;
108
89
  }
109
90
 
110
- ._1aa9huup {
111
- border-top: 1px solid var(--_1aa9huu3);
112
- flex: none;
113
- justify-content: flex-end;
114
- align-items: center;
115
- height: 20%;
116
- padding: 0 8%;
117
- display: flex;
91
+ ._1yq4ar79 {
92
+ color-scheme: light;
118
93
  }
119
94
 
120
- ._1aa9huuq {
121
- background: var(--_1aa9huu4);
122
- border-radius: 3px;
123
- width: 32%;
124
- height: 50%;
95
+ ._1yq4ar7a {
96
+ color-scheme: dark;
125
97
  }
126
98
 
127
- ._1aa9huur {
128
- border-radius: 2px;
129
- flex: none;
130
- height: 4px;
99
+ ::view-transition-group(._1yq4ar70) {
100
+ animation-duration: .32s;
101
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
131
102
  }
132
103
 
133
- ._1aa9huus {
134
- background: var(--_1aa9huu1);
104
+ ::view-transition-old(._1yq4ar70) {
105
+ animation-duration: .32s;
106
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
135
107
  }
136
108
 
137
- ._1aa9huut {
138
- background: var(--_1aa9huu2);
109
+ ::view-transition-new(._1yq4ar70) {
110
+ animation-duration: .32s;
111
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
139
112
  }
140
113
 
141
- ._1aa9huuu {
142
- background: var(--_1aa9huu7);
114
+ ::view-transition-new(._1yq4ar72) {
115
+ animation-duration: .32s;
116
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
143
117
  }
144
118
 
145
- ._1vdkp0v0 {
146
- opacity: .6;
119
+ ::view-transition-old(._1yq4ar73) {
120
+ animation-duration: .32s;
121
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
147
122
  }
148
123
 
149
- ._17s80v42 {
150
- grid-template-columns: repeat(3, 24px);
151
- grid-auto-rows: 24px;
152
- gap: 4px;
153
- display: grid;
124
+ ::view-transition-new(._1yq4ar74) {
125
+ animation-duration: .32s;
126
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
154
127
  }
155
128
 
156
- ._17s80v42[data-with-image="true"] {
157
- grid-template-columns: 52px repeat(3, 24px);
129
+ ::view-transition-old(._1yq4ar75) {
130
+ animation-duration: .32s;
131
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
158
132
  }
159
133
 
160
- ._17s80v43 {
161
- object-fit: cover;
162
- width: 52px;
163
- height: 52px;
164
- box-shadow: inset 0 0 0 1px var(--card-border-color);
165
- border-radius: 3px;
166
- grid-row: span 2;
167
- display: block;
134
+ ::view-transition-new(._1yq4ar76) {
135
+ animation-duration: .32s;
136
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
168
137
  }
169
138
 
170
- ._17s80v44 {
171
- box-shadow: inset 0 0 0 1px var(--card-border-color);
172
- border-radius: 3px;
173
- display: block;
139
+ ::view-transition-old(._1yq4ar77) {
140
+ animation-duration: .32s;
141
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
174
142
  }
175
143
 
176
- ._17s80v44[data-empty="true"] {
177
- background: repeating-linear-gradient(-45deg, transparent 0 3px, var(--card-border-color) 3px 4px);
144
+ ::view-transition-old(._1yq4ar71) {
145
+ animation-duration: .32s;
146
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
178
147
  }
179
148
 
180
- ._17s80v45 {
181
- scroll-snap-type: x mandatory;
182
- scrollbar-width: thin;
183
- gap: 8px;
184
- margin: 0 -12px;
185
- padding: 0 12px;
186
- scroll-padding-left: 12px;
187
- display: flex;
188
- overflow-x: auto;
149
+ ::view-transition-new(._1yq4ar71) {
150
+ animation-duration: .32s;
151
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
189
152
  }
190
153
 
191
- ._17s80v46 {
192
- appearance: none;
193
- box-sizing: border-box;
194
- width: calc(var(--_17s80v40) + 8px);
195
- color: inherit;
196
- font: inherit;
197
- text-align: center;
198
- cursor: pointer;
199
- scroll-snap-align: start;
200
- background: none;
201
- border: 0;
202
- flex: none;
203
- margin: 0;
204
- padding: 0;
205
- display: block;
154
+ :root:active-view-transition-type(sanity-themer)::view-transition-group(*) {
155
+ animation-duration: .32s;
156
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
206
157
  }
207
158
 
208
- ._17s80v46:focus {
209
- outline: none;
159
+ :root:active-view-transition-type(sanity-themer)::view-transition-old(*) {
160
+ animation-duration: .32s;
161
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
210
162
  }
211
163
 
212
- ._17s80v47 {
213
- box-sizing: border-box;
214
- width: calc(var(--_17s80v40) + 8px);
215
- height: calc(var(--_17s80v40) * 9 / 16 + 8px);
216
- border-radius: 7px;
217
- padding: 4px;
218
- transition: box-shadow .1s;
219
- display: block;
220
- overflow: hidden;
221
- }
222
-
223
- ._17s80v46:hover ._17s80v47 {
224
- box-shadow: inset 0 0 0 2px var(--card-border-color);
164
+ :root:active-view-transition-type(sanity-themer)::view-transition-new(*) {
165
+ animation-duration: .32s;
166
+ animation-timing-function: cubic-bezier(.2, 0, 0, 1);
225
167
  }
226
168
 
227
- ._17s80v46[aria-pressed="true"] ._17s80v47 {
228
- box-shadow: inset 0 0 0 2px var(--card-focus-ring-color);
169
+ ::view-transition-old(._1yq4ar70) {
170
+ object-fit: fill;
171
+ block-size: 100%;
172
+ inline-size: 100%;
229
173
  }
230
174
 
231
- ._17s80v46:focus-visible ._17s80v47 {
232
- outline: 2px solid var(--card-focus-ring-color);
233
- outline-offset: -2px;
175
+ ::view-transition-new(._1yq4ar70) {
176
+ object-fit: fill;
177
+ block-size: 100%;
178
+ inline-size: 100%;
234
179
  }
235
180
 
236
- ._17s80v48 {
237
- width: 144px;
238
- transform: scale(var(--_17s80v41));
239
- transform-origin: 0 0;
240
- display: block;
181
+ ::view-transition-new(._1yq4ar72) {
182
+ animation-name: _1yq4ar7b;
241
183
  }
242
184
 
243
- .os3rj0 {
244
- box-sizing: border-box;
245
- border: 1px solid var(--card-border-color);
246
- cursor: pointer;
247
- background: none;
248
- border-radius: 4px;
249
- flex: none;
250
- width: 33px;
251
- height: 33px;
252
- padding: 0;
185
+ ::view-transition-old(._1yq4ar73) {
186
+ animation-name: _1yq4ar7c;
253
187
  }
254
188
 
255
- .os3rj0::-webkit-color-swatch-wrapper {
256
- padding: 0;
189
+ ::view-transition-new(._1yq4ar74) {
190
+ animation-name: _1yq4ar7d;
257
191
  }
258
192
 
259
- .os3rj0::-webkit-color-swatch {
260
- border: none;
261
- border-radius: 3px;
193
+ ::view-transition-old(._1yq4ar75) {
194
+ animation-name: _1yq4ar7e;
262
195
  }
263
196
 
264
- .os3rj0::-moz-color-swatch {
265
- border: none;
266
- border-radius: 3px;
197
+ ::view-transition-new(._1yq4ar76) {
198
+ animation-name: _1yq4ar7f;
267
199
  }
268
200
 
269
- .os3rj1 {
270
- width: 100%;
271
- accent-color: var(--card-focus-ring-color);
272
- margin: 0;
273
- display: block;
201
+ ::view-transition-old(._1yq4ar77) {
202
+ animation-name: _1yq4ar7g;
274
203
  }
275
204
 
276
- .os3rj2 {
277
- min-width: 0;
205
+ ::view-transition-group(bgn4np0) {
206
+ z-index: 1;
278
207
  }
279
208
 
280
- ._1wsn7880 {
281
- position: relative;
209
+ ::view-transition-group(bgn4np0) {
210
+ animation: none;
282
211
  }
283
212
 
284
- ._1wsn7881 {
285
- appearance: none;
286
- box-sizing: border-box;
287
- width: 100%;
288
- color: inherit;
289
- font: inherit;
290
- text-align: center;
291
- cursor: pointer;
292
- background: none;
293
- border: 0;
294
- margin: 0;
295
- padding: 0;
296
- display: block;
213
+ ::view-transition-image-pair(bgn4np0) {
214
+ animation: none;
297
215
  }
298
216
 
299
- ._1wsn7881:focus {
300
- outline: none;
217
+ ::view-transition-old(bgn4np0) {
218
+ animation: none;
301
219
  }
302
220
 
303
- ._1wsn7882 {
304
- border-radius: 10px;
305
- padding: 4px;
306
- transition: box-shadow .1s;
307
- display: block;
221
+ ::view-transition-new(bgn4np0) {
222
+ animation: none;
308
223
  }
309
224
 
310
- ._1wsn7881:hover ._1wsn7882 {
311
- box-shadow: inset 0 0 0 2px var(--card-border-color);
312
- }
225
+ @media (prefers-reduced-motion: reduce) {
226
+ ::view-transition-group(._1yq4ar70) {
227
+ animation: none;
228
+ }
313
229
 
314
- ._1wsn7881[aria-pressed="true"] ._1wsn7882 {
315
- box-shadow: inset 0 0 0 2px var(--card-focus-ring-color);
316
- }
230
+ ::view-transition-group(._1yq4ar71) {
231
+ animation: none;
232
+ }
317
233
 
318
- ._1wsn7881:focus-visible ._1wsn7882 {
319
- outline: 2px solid var(--card-focus-ring-color);
320
- outline-offset: -2px;
321
- }
234
+ ::view-transition-group(._1yq4ar72) {
235
+ animation: none;
236
+ }
322
237
 
323
- ._1wsn7883 {
324
- opacity: 0;
325
- transition: opacity .1s;
326
- position: absolute;
327
- top: 10px;
328
- right: 10px;
329
- }
238
+ ::view-transition-group(._1yq4ar73) {
239
+ animation: none;
240
+ }
330
241
 
331
- ._1wsn7880:hover ._1wsn7883, ._1wsn7880:focus-within ._1wsn7883, ._1wsn7883[data-visible="true"] {
332
- opacity: 1;
333
- }
242
+ ::view-transition-group(._1yq4ar74) {
243
+ animation: none;
244
+ }
334
245
 
335
- ._1wsn7884 {
336
- display: inline-block;
337
- }
246
+ ::view-transition-group(._1yq4ar75) {
247
+ animation: none;
248
+ }
338
249
 
339
- .bgn4np2 {
340
- view-transition-name: bgn4np0;
341
- flex: none;
342
- }
250
+ ::view-transition-group(._1yq4ar76) {
251
+ animation: none;
252
+ }
343
253
 
344
- .bgn4np2[data-overlay="true"] {
345
- width: auto;
346
- position: absolute;
347
- inset: 0;
348
- }
254
+ ::view-transition-group(._1yq4ar77) {
255
+ animation: none;
256
+ }
349
257
 
350
- .bgn4np3 {
351
- position: relative;
352
- }
258
+ ::view-transition-group(bgn4np0) {
259
+ animation: none;
260
+ }
353
261
 
354
- .bgn4np4 {
355
- container: bgn4np1 / inline-size;
356
- }
262
+ :root:active-view-transition-type(sanity-themer)::view-transition-group(*) {
263
+ animation: none;
264
+ }
357
265
 
358
- .bgn4np5 {
359
- z-index: 1;
360
- cursor: col-resize;
361
- touch-action: none;
362
- width: 7px;
363
- position: absolute;
364
- top: 0;
365
- bottom: 0;
366
- left: -3px;
367
- }
266
+ ::view-transition-image-pair(._1yq4ar70) {
267
+ animation: none;
268
+ }
368
269
 
369
- .bgn4np5:after {
370
- content: "";
371
- background: var(--card-focus-ring-color);
372
- opacity: 0;
373
- width: 3px;
374
- transition: opacity .1s;
375
- position: absolute;
376
- top: 0;
377
- bottom: 0;
378
- left: 2px;
379
- }
270
+ ::view-transition-image-pair(._1yq4ar71) {
271
+ animation: none;
272
+ }
380
273
 
381
- .bgn4np5:focus {
382
- outline: none;
383
- }
274
+ ::view-transition-image-pair(._1yq4ar72) {
275
+ animation: none;
276
+ }
384
277
 
385
- .bgn4np5:hover:after, .bgn4np5:focus-visible:after, .bgn4np5[data-dragging="true"]:after {
386
- opacity: 1;
387
- }
278
+ ::view-transition-image-pair(._1yq4ar73) {
279
+ animation: none;
280
+ }
388
281
 
389
- .twjqgh0 {
390
- grid-template-columns: minmax(0, 1fr);
391
- gap: 16px;
392
- display: grid;
393
- }
282
+ ::view-transition-image-pair(._1yq4ar74) {
283
+ animation: none;
284
+ }
394
285
 
395
- @container bgn4np1 (width >= 260px) {
396
- .twjqgh0 {
397
- grid-template-columns: repeat(2, minmax(0, 1fr));
286
+ ::view-transition-image-pair(._1yq4ar75) {
287
+ animation: none;
398
288
  }
399
- }
400
289
 
401
- @container bgn4np1 (width >= 480px) {
402
- .twjqgh0 {
403
- grid-template-columns: repeat(3, minmax(0, 1fr));
290
+ ::view-transition-image-pair(._1yq4ar76) {
291
+ animation: none;
404
292
  }
405
- }
406
293
 
407
- .c2pqej0 {
408
- min-width: 0;
409
- }
294
+ ::view-transition-image-pair(._1yq4ar77) {
295
+ animation: none;
296
+ }
410
297
 
411
- @keyframes _1yq4ar7b {
412
- from {
413
- transform: translateX(-100%);
298
+ ::view-transition-image-pair(bgn4np0) {
299
+ animation: none;
414
300
  }
415
- }
416
301
 
417
- @keyframes _1yq4ar7c {
418
- to {
419
- transform: translateX(-100%);
302
+ :root:active-view-transition-type(sanity-themer)::view-transition-image-pair(*) {
303
+ animation: none;
420
304
  }
421
- }
422
305
 
423
- @keyframes _1yq4ar7d {
424
- from {
425
- transform: translateY(-100%);
306
+ ::view-transition-old(._1yq4ar70) {
307
+ animation: none;
426
308
  }
427
- }
428
309
 
429
- @keyframes _1yq4ar7e {
430
- to {
431
- transform: translateY(-100%);
432
- }
433
- }
434
-
435
- @keyframes _1yq4ar7f {
436
- from {
437
- transform: translateX(100%);
438
- }
439
- }
440
-
441
- @keyframes _1yq4ar7g {
442
- to {
443
- transform: translateX(100%);
444
- }
445
- }
446
-
447
- ._1yq4ar78 {
448
- position: relative;
449
- }
450
-
451
- ._1yq4ar79 {
452
- color-scheme: light;
453
- }
454
-
455
- ._1yq4ar7a {
456
- color-scheme: dark;
457
- }
458
-
459
- ::view-transition-group(._1yq4ar70) {
460
- animation-duration: .32s;
461
- animation-timing-function: cubic-bezier(.2, 0, 0, 1);
462
- }
463
-
464
- ::view-transition-old(._1yq4ar70) {
465
- animation-duration: .32s;
466
- animation-timing-function: cubic-bezier(.2, 0, 0, 1);
467
- }
468
-
469
- ::view-transition-new(._1yq4ar70) {
470
- animation-duration: .32s;
471
- animation-timing-function: cubic-bezier(.2, 0, 0, 1);
472
- }
473
-
474
- ::view-transition-new(._1yq4ar72) {
475
- animation-duration: .32s;
476
- animation-timing-function: cubic-bezier(.2, 0, 0, 1);
477
- }
478
-
479
- ::view-transition-old(._1yq4ar73) {
480
- animation-duration: .32s;
481
- animation-timing-function: cubic-bezier(.2, 0, 0, 1);
482
- }
483
-
484
- ::view-transition-new(._1yq4ar74) {
485
- animation-duration: .32s;
486
- animation-timing-function: cubic-bezier(.2, 0, 0, 1);
487
- }
488
-
489
- ::view-transition-old(._1yq4ar75) {
490
- animation-duration: .32s;
491
- animation-timing-function: cubic-bezier(.2, 0, 0, 1);
492
- }
493
-
494
- ::view-transition-new(._1yq4ar76) {
495
- animation-duration: .32s;
496
- animation-timing-function: cubic-bezier(.2, 0, 0, 1);
497
- }
498
-
499
- ::view-transition-old(._1yq4ar77) {
500
- animation-duration: .32s;
501
- animation-timing-function: cubic-bezier(.2, 0, 0, 1);
502
- }
503
-
504
- ::view-transition-old(._1yq4ar71) {
505
- animation-duration: .32s;
506
- animation-timing-function: cubic-bezier(.2, 0, 0, 1);
507
- }
508
-
509
- ::view-transition-new(._1yq4ar71) {
510
- animation-duration: .32s;
511
- animation-timing-function: cubic-bezier(.2, 0, 0, 1);
512
- }
513
-
514
- :root:active-view-transition-type(sanity-themer)::view-transition-group(*) {
515
- animation-duration: .32s;
516
- animation-timing-function: cubic-bezier(.2, 0, 0, 1);
517
- }
518
-
519
- :root:active-view-transition-type(sanity-themer)::view-transition-old(*) {
520
- animation-duration: .32s;
521
- animation-timing-function: cubic-bezier(.2, 0, 0, 1);
522
- }
523
-
524
- :root:active-view-transition-type(sanity-themer)::view-transition-new(*) {
525
- animation-duration: .32s;
526
- animation-timing-function: cubic-bezier(.2, 0, 0, 1);
527
- }
528
-
529
- ::view-transition-old(._1yq4ar70) {
530
- object-fit: fill;
531
- block-size: 100%;
532
- inline-size: 100%;
533
- }
534
-
535
- ::view-transition-new(._1yq4ar70) {
536
- object-fit: fill;
537
- block-size: 100%;
538
- inline-size: 100%;
539
- }
540
-
541
- ::view-transition-new(._1yq4ar72) {
542
- animation-name: _1yq4ar7b;
543
- }
544
-
545
- ::view-transition-old(._1yq4ar73) {
546
- animation-name: _1yq4ar7c;
547
- }
548
-
549
- ::view-transition-new(._1yq4ar74) {
550
- animation-name: _1yq4ar7d;
551
- }
552
-
553
- ::view-transition-old(._1yq4ar75) {
554
- animation-name: _1yq4ar7e;
555
- }
556
-
557
- ::view-transition-new(._1yq4ar76) {
558
- animation-name: _1yq4ar7f;
559
- }
560
-
561
- ::view-transition-old(._1yq4ar77) {
562
- animation-name: _1yq4ar7g;
563
- }
564
-
565
- ::view-transition-group(bgn4np0) {
566
- z-index: 1;
567
- }
568
-
569
- ::view-transition-group(bgn4np0) {
570
- animation: none;
571
- }
572
-
573
- ::view-transition-image-pair(bgn4np0) {
574
- animation: none;
575
- }
576
-
577
- ::view-transition-old(bgn4np0) {
578
- animation: none;
579
- }
580
-
581
- ::view-transition-new(bgn4np0) {
582
- animation: none;
583
- }
584
-
585
- @media (prefers-reduced-motion: reduce) {
586
- ::view-transition-group(._1yq4ar70) {
587
- animation: none;
588
- }
589
-
590
- ::view-transition-group(._1yq4ar71) {
591
- animation: none;
592
- }
593
-
594
- ::view-transition-group(._1yq4ar72) {
595
- animation: none;
596
- }
597
-
598
- ::view-transition-group(._1yq4ar73) {
599
- animation: none;
600
- }
601
-
602
- ::view-transition-group(._1yq4ar74) {
603
- animation: none;
604
- }
605
-
606
- ::view-transition-group(._1yq4ar75) {
607
- animation: none;
608
- }
609
-
610
- ::view-transition-group(._1yq4ar76) {
611
- animation: none;
612
- }
613
-
614
- ::view-transition-group(._1yq4ar77) {
615
- animation: none;
616
- }
617
-
618
- ::view-transition-group(bgn4np0) {
619
- animation: none;
620
- }
621
-
622
- :root:active-view-transition-type(sanity-themer)::view-transition-group(*) {
623
- animation: none;
624
- }
625
-
626
- ::view-transition-image-pair(._1yq4ar70) {
627
- animation: none;
628
- }
629
-
630
- ::view-transition-image-pair(._1yq4ar71) {
631
- animation: none;
632
- }
633
-
634
- ::view-transition-image-pair(._1yq4ar72) {
635
- animation: none;
636
- }
637
-
638
- ::view-transition-image-pair(._1yq4ar73) {
639
- animation: none;
640
- }
641
-
642
- ::view-transition-image-pair(._1yq4ar74) {
643
- animation: none;
644
- }
645
-
646
- ::view-transition-image-pair(._1yq4ar75) {
647
- animation: none;
648
- }
649
-
650
- ::view-transition-image-pair(._1yq4ar76) {
651
- animation: none;
652
- }
653
-
654
- ::view-transition-image-pair(._1yq4ar77) {
655
- animation: none;
656
- }
657
-
658
- ::view-transition-image-pair(bgn4np0) {
659
- animation: none;
660
- }
661
-
662
- :root:active-view-transition-type(sanity-themer)::view-transition-image-pair(*) {
663
- animation: none;
664
- }
665
-
666
- ::view-transition-old(._1yq4ar70) {
667
- animation: none;
668
- }
669
-
670
- ::view-transition-old(._1yq4ar71) {
671
- animation: none;
310
+ ::view-transition-old(._1yq4ar71) {
311
+ animation: none;
672
312
  }
673
313
 
674
314
  ::view-transition-old(._1yq4ar72) {
@@ -743,3 +383,363 @@
743
383
  animation: none;
744
384
  }
745
385
  }
386
+
387
+ ._1o50s7t0 {
388
+ scrollbar-gutter: stable;
389
+ }
390
+
391
+ ._1aa9huua {
392
+ aspect-ratio: 16 / 9;
393
+ position: relative;
394
+ overflow: hidden;
395
+ }
396
+
397
+ ._1aa9huub {
398
+ background: var(--_1aa9huu0);
399
+ flex-direction: column;
400
+ display: flex;
401
+ position: absolute;
402
+ inset: 0;
403
+ }
404
+
405
+ ._1aa9huud {
406
+ clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
407
+ }
408
+
409
+ ._1aa9huue {
410
+ border-bottom: 1px solid var(--_1aa9huu3);
411
+ flex: none;
412
+ align-items: center;
413
+ gap: 5px;
414
+ height: 18%;
415
+ padding: 0 5%;
416
+ display: flex;
417
+ }
418
+
419
+ ._1aa9huuf {
420
+ background: var(--_1aa9huu4);
421
+ border-radius: 2px;
422
+ flex: none;
423
+ width: 8px;
424
+ height: 8px;
425
+ }
426
+
427
+ ._1aa9huug {
428
+ flex: 1;
429
+ }
430
+
431
+ ._1aa9huuh {
432
+ background: var(--_1aa9huu5);
433
+ border-radius: 50%;
434
+ flex: none;
435
+ width: 8px;
436
+ height: 8px;
437
+ }
438
+
439
+ ._1aa9huui {
440
+ flex: 1;
441
+ min-height: 0;
442
+ display: flex;
443
+ }
444
+
445
+ ._1aa9huuj {
446
+ border-right: 1px solid var(--_1aa9huu3);
447
+ flex-direction: column;
448
+ flex: none;
449
+ width: 36%;
450
+ display: flex;
451
+ }
452
+
453
+ ._1aa9huuk {
454
+ flex: none;
455
+ align-items: center;
456
+ height: 18%;
457
+ padding: 0 9%;
458
+ display: flex;
459
+ }
460
+
461
+ ._1aa9huuk[data-selected="true"] {
462
+ background: var(--_1aa9huu6);
463
+ }
464
+
465
+ ._1aa9huul {
466
+ flex-direction: column;
467
+ flex: 1;
468
+ min-width: 0;
469
+ display: flex;
470
+ }
471
+
472
+ ._1aa9huum {
473
+ flex-direction: column;
474
+ flex: 1;
475
+ gap: 7px;
476
+ min-height: 0;
477
+ padding: 9% 8% 0;
478
+ display: flex;
479
+ overflow: hidden;
480
+ }
481
+
482
+ ._1aa9huun {
483
+ flex-direction: column;
484
+ flex: none;
485
+ gap: 3px;
486
+ display: flex;
487
+ }
488
+
489
+ ._1aa9huuo {
490
+ background: var(--_1aa9huu8);
491
+ height: 12px;
492
+ box-shadow: inset 0 0 0 1px var(--_1aa9huu9);
493
+ border-radius: 3px;
494
+ }
495
+
496
+ ._1aa9huup {
497
+ border-top: 1px solid var(--_1aa9huu3);
498
+ flex: none;
499
+ justify-content: flex-end;
500
+ align-items: center;
501
+ height: 20%;
502
+ padding: 0 8%;
503
+ display: flex;
504
+ }
505
+
506
+ ._1aa9huuq {
507
+ background: var(--_1aa9huu4);
508
+ border-radius: 3px;
509
+ width: 32%;
510
+ height: 50%;
511
+ }
512
+
513
+ ._1aa9huur {
514
+ border-radius: 2px;
515
+ flex: none;
516
+ height: 4px;
517
+ }
518
+
519
+ ._1aa9huus {
520
+ background: var(--_1aa9huu1);
521
+ }
522
+
523
+ ._1aa9huut {
524
+ background: var(--_1aa9huu2);
525
+ }
526
+
527
+ ._1aa9huuu {
528
+ background: var(--_1aa9huu7);
529
+ }
530
+
531
+ ._1vdkp0v0 {
532
+ opacity: .6;
533
+ }
534
+
535
+ ._17s80v42 {
536
+ grid-template-columns: repeat(3, 24px);
537
+ grid-auto-rows: 24px;
538
+ gap: 4px;
539
+ display: grid;
540
+ }
541
+
542
+ ._17s80v42[data-with-image="true"] {
543
+ grid-template-columns: 52px repeat(3, 24px);
544
+ }
545
+
546
+ ._17s80v43 {
547
+ object-fit: cover;
548
+ width: 52px;
549
+ height: 52px;
550
+ box-shadow: inset 0 0 0 1px var(--card-border-color);
551
+ border-radius: 3px;
552
+ grid-row: span 2;
553
+ display: block;
554
+ }
555
+
556
+ ._17s80v44 {
557
+ box-shadow: inset 0 0 0 1px var(--card-border-color);
558
+ border-radius: 3px;
559
+ display: block;
560
+ }
561
+
562
+ ._17s80v44[data-empty="true"] {
563
+ background: repeating-linear-gradient(-45deg, transparent 0 3px, var(--card-border-color) 3px 4px);
564
+ }
565
+
566
+ ._17s80v45 {
567
+ scroll-snap-type: x mandatory;
568
+ scrollbar-width: thin;
569
+ gap: 8px;
570
+ margin: 0 -12px;
571
+ padding: 0 12px;
572
+ scroll-padding-left: 12px;
573
+ display: flex;
574
+ overflow-x: auto;
575
+ }
576
+
577
+ ._17s80v46 {
578
+ appearance: none;
579
+ box-sizing: border-box;
580
+ width: calc(var(--_17s80v40) + 8px);
581
+ color: inherit;
582
+ font: inherit;
583
+ text-align: center;
584
+ cursor: pointer;
585
+ scroll-snap-align: start;
586
+ background: none;
587
+ border: 0;
588
+ flex: none;
589
+ margin: 0;
590
+ padding: 0;
591
+ display: block;
592
+ }
593
+
594
+ ._17s80v46:focus {
595
+ outline: none;
596
+ }
597
+
598
+ ._17s80v47 {
599
+ box-sizing: border-box;
600
+ width: calc(var(--_17s80v40) + 8px);
601
+ height: calc(var(--_17s80v40) * 9 / 16 + 8px);
602
+ border-radius: 7px;
603
+ padding: 4px;
604
+ transition: box-shadow .1s;
605
+ display: block;
606
+ overflow: hidden;
607
+ }
608
+
609
+ ._17s80v46:hover ._17s80v47 {
610
+ box-shadow: inset 0 0 0 2px var(--card-border-color);
611
+ }
612
+
613
+ ._17s80v46[aria-pressed="true"] ._17s80v47 {
614
+ box-shadow: inset 0 0 0 2px var(--card-focus-ring-color);
615
+ }
616
+
617
+ ._17s80v46:focus-visible ._17s80v47 {
618
+ outline: 2px solid var(--card-focus-ring-color);
619
+ outline-offset: -2px;
620
+ }
621
+
622
+ ._17s80v48 {
623
+ width: 144px;
624
+ transform: scale(var(--_17s80v41));
625
+ transform-origin: 0 0;
626
+ display: block;
627
+ }
628
+
629
+ .os3rj0 {
630
+ box-sizing: border-box;
631
+ border: 1px solid var(--card-border-color);
632
+ cursor: pointer;
633
+ background: none;
634
+ border-radius: 4px;
635
+ flex: none;
636
+ width: 33px;
637
+ height: 33px;
638
+ padding: 0;
639
+ }
640
+
641
+ .os3rj0::-webkit-color-swatch-wrapper {
642
+ padding: 0;
643
+ }
644
+
645
+ .os3rj0::-webkit-color-swatch {
646
+ border: none;
647
+ border-radius: 3px;
648
+ }
649
+
650
+ .os3rj0::-moz-color-swatch {
651
+ border: none;
652
+ border-radius: 3px;
653
+ }
654
+
655
+ .os3rj1 {
656
+ width: 100%;
657
+ accent-color: var(--card-focus-ring-color);
658
+ margin: 0;
659
+ display: block;
660
+ }
661
+
662
+ .os3rj2 {
663
+ min-width: 0;
664
+ }
665
+
666
+ ._1wsn7880 {
667
+ position: relative;
668
+ }
669
+
670
+ ._1wsn7881 {
671
+ appearance: none;
672
+ box-sizing: border-box;
673
+ width: 100%;
674
+ color: inherit;
675
+ font: inherit;
676
+ text-align: center;
677
+ cursor: pointer;
678
+ background: none;
679
+ border: 0;
680
+ margin: 0;
681
+ padding: 0;
682
+ display: block;
683
+ }
684
+
685
+ ._1wsn7881:focus {
686
+ outline: none;
687
+ }
688
+
689
+ ._1wsn7882 {
690
+ border-radius: 10px;
691
+ padding: 4px;
692
+ transition: box-shadow .1s;
693
+ display: block;
694
+ }
695
+
696
+ ._1wsn7881:hover ._1wsn7882 {
697
+ box-shadow: inset 0 0 0 2px var(--card-border-color);
698
+ }
699
+
700
+ ._1wsn7881[aria-pressed="true"] ._1wsn7882 {
701
+ box-shadow: inset 0 0 0 2px var(--card-focus-ring-color);
702
+ }
703
+
704
+ ._1wsn7881:focus-visible ._1wsn7882 {
705
+ outline: 2px solid var(--card-focus-ring-color);
706
+ outline-offset: -2px;
707
+ }
708
+
709
+ ._1wsn7883 {
710
+ opacity: 0;
711
+ transition: opacity .1s;
712
+ position: absolute;
713
+ top: 10px;
714
+ right: 10px;
715
+ }
716
+
717
+ ._1wsn7880:hover ._1wsn7883, ._1wsn7880:focus-within ._1wsn7883, ._1wsn7883[data-visible="true"] {
718
+ opacity: 1;
719
+ }
720
+
721
+ ._1wsn7884 {
722
+ display: inline-block;
723
+ }
724
+
725
+ .twjqgh0 {
726
+ grid-template-columns: minmax(0, 1fr);
727
+ gap: 16px;
728
+ display: grid;
729
+ }
730
+
731
+ @container bgn4np1 (width >= 260px) {
732
+ .twjqgh0 {
733
+ grid-template-columns: repeat(2, minmax(0, 1fr));
734
+ }
735
+ }
736
+
737
+ @container bgn4np1 (width >= 480px) {
738
+ .twjqgh0 {
739
+ grid-template-columns: repeat(3, minmax(0, 1fr));
740
+ }
741
+ }
742
+
743
+ .c2pqej0 {
744
+ min-width: 0;
745
+ }