@uploadcare/file-uploader 1.24.4 → 1.25.0-alpha.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.
Files changed (69) hide show
  1. package/dist/abstract/loadFileUploaderFrom.js +4 -0
  2. package/dist/env.js +1 -1
  3. package/dist/index.css +480 -530
  4. package/dist/index.d.ts +868 -539
  5. package/dist/index.js +7615 -6044
  6. package/dist/index.layered.css +2723 -0
  7. package/dist/index.ssr.js +533 -762
  8. package/dist/lit.d.ts +1 -0
  9. package/dist/lit.js +28 -0
  10. package/dist/locales/file-uploader/ar.js +1 -1
  11. package/dist/locales/file-uploader/az.js +1 -1
  12. package/dist/locales/file-uploader/ca.js +1 -1
  13. package/dist/locales/file-uploader/cs.js +1 -1
  14. package/dist/locales/file-uploader/da.js +1 -1
  15. package/dist/locales/file-uploader/de.js +1 -1
  16. package/dist/locales/file-uploader/el.js +1 -1
  17. package/dist/locales/file-uploader/en.js +1 -1
  18. package/dist/locales/file-uploader/es.js +1 -1
  19. package/dist/locales/file-uploader/et.js +1 -1
  20. package/dist/locales/file-uploader/fi.js +1 -1
  21. package/dist/locales/file-uploader/fr.js +1 -1
  22. package/dist/locales/file-uploader/he.js +1 -1
  23. package/dist/locales/file-uploader/hy.js +1 -1
  24. package/dist/locales/file-uploader/is.js +1 -1
  25. package/dist/locales/file-uploader/it.js +1 -1
  26. package/dist/locales/file-uploader/ja.js +1 -1
  27. package/dist/locales/file-uploader/ka.js +1 -1
  28. package/dist/locales/file-uploader/kk.js +1 -1
  29. package/dist/locales/file-uploader/ko.js +1 -1
  30. package/dist/locales/file-uploader/lv.js +1 -1
  31. package/dist/locales/file-uploader/nb.js +1 -1
  32. package/dist/locales/file-uploader/nl.js +2 -2
  33. package/dist/locales/file-uploader/pl.js +1 -1
  34. package/dist/locales/file-uploader/pt.js +1 -1
  35. package/dist/locales/file-uploader/ro.js +1 -1
  36. package/dist/locales/file-uploader/ru.js +1 -1
  37. package/dist/locales/file-uploader/sk.js +1 -1
  38. package/dist/locales/file-uploader/sr.js +1 -1
  39. package/dist/locales/file-uploader/sv.js +1 -1
  40. package/dist/locales/file-uploader/tr.js +1 -1
  41. package/dist/locales/file-uploader/uk.js +1 -1
  42. package/dist/locales/file-uploader/vi.js +1 -1
  43. package/dist/locales/file-uploader/zh-TW.js +1 -1
  44. package/dist/locales/file-uploader/zh.js +1 -1
  45. package/package.json +35 -25
  46. package/web/file-uploader.iife.min.d.ts +872 -543
  47. package/web/file-uploader.iife.min.js +8 -4
  48. package/web/file-uploader.min.d.ts +872 -543
  49. package/web/file-uploader.min.js +7 -4
  50. package/web/uc-basic.layered.min.css +26 -0
  51. package/web/uc-basic.min.css +2 -3
  52. package/web/uc-cloud-image-editor.layered.min.css +26 -0
  53. package/web/uc-cloud-image-editor.min.css +1 -2
  54. package/web/uc-cloud-image-editor.min.d.ts +440 -235
  55. package/web/uc-cloud-image-editor.min.js +7 -4
  56. package/web/uc-file-uploader-inline.layered.min.css +26 -0
  57. package/web/uc-file-uploader-inline.min.css +2 -3
  58. package/web/uc-file-uploader-inline.min.d.ts +872 -543
  59. package/web/uc-file-uploader-inline.min.js +7 -4
  60. package/web/uc-file-uploader-minimal.layered.min.css +26 -0
  61. package/web/uc-file-uploader-minimal.min.css +2 -3
  62. package/web/uc-file-uploader-minimal.min.d.ts +872 -543
  63. package/web/uc-file-uploader-minimal.min.js +7 -4
  64. package/web/uc-file-uploader-regular.layered.min.css +26 -0
  65. package/web/uc-file-uploader-regular.min.css +2 -3
  66. package/web/uc-file-uploader-regular.min.d.ts +872 -543
  67. package/web/uc-file-uploader-regular.min.js +7 -4
  68. package/web/uc-img.min.d.ts +56 -91
  69. package/web/uc-img.min.js +3 -3
@@ -0,0 +1,2723 @@
1
+ /**
2
+ * @license
3
+ * MIT License
4
+ *
5
+ * Copyright (c) 2025 Uploadcare (hello@uploadcare.com). All rights reserved.
6
+ *
7
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
8
+ * of this software and associated documentation files (the "Software"), to deal
9
+ * in the Software without restriction, including without limitation the rights
10
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
+ * copies of the Software, and to permit persons to whom the Software is
12
+ * furnished to do so, subject to the following conditions:
13
+ *
14
+ * The above copyright notice and this permission notice shall be included in all
15
+ * copies or substantial portions of the Software.
16
+ *
17
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23
+ * SOFTWARE.
24
+ *
25
+ */
26
+ @layer uc, uc.base, uc.components, uc.rules, uc.solutions, uc.post-reset, uc.base, uc.rules, uc.post-reset;
27
+
28
+ /* src/blocks/ActivityHeader/activity-header.css */
29
+ @layer uc.components {
30
+ uc-activity-header {
31
+ display: flex;
32
+ justify-content: space-between;
33
+ gap: var(--uc-padding);
34
+ padding: var(--uc-padding);
35
+ color: var(--uc-foreground);
36
+ font-weight: 500;
37
+ font-size: 1em;
38
+ }
39
+ uc-activity-header > * {
40
+ display: flex;
41
+ align-items: center;
42
+ }
43
+ }
44
+
45
+ /* src/blocks/CameraSource/camera-source.css */
46
+ @layer uc.components {
47
+ uc-camera-source {
48
+ position: relative;
49
+ display: flex;
50
+ flex-direction: column;
51
+ width: 100%;
52
+ height: 100%;
53
+ max-height: 100%;
54
+ overflow: hidden;
55
+ background-color: var(--uc-background);
56
+ border-radius: var(--uc-radius);
57
+ }
58
+ [uc-modal] > dialog:has(uc-camera-source[active]) {
59
+ width: 100%;
60
+ height: 100%;
61
+ }
62
+ uc-camera-source:not(.uc-initialized) .uc-controls {
63
+ display: none;
64
+ }
65
+ uc-camera-source video {
66
+ display: block;
67
+ width: 100%;
68
+ max-height: 100%;
69
+ object-fit: contain;
70
+ object-position: center center;
71
+ background-color: var(--uc-muted);
72
+ border-radius: var(--uc-radius);
73
+ }
74
+ uc-camera-source .uc-toolbar {
75
+ position: absolute;
76
+ bottom: 0;
77
+ display: flex;
78
+ justify-content: space-between;
79
+ width: 100%;
80
+ padding: var(--uc-padding);
81
+ background-color: var(--uc-background);
82
+ }
83
+ uc-camera-source .uc-content {
84
+ display: flex;
85
+ flex: 1;
86
+ justify-content: center;
87
+ width: 100%;
88
+ height: 100%;
89
+ padding: var(--uc-padding);
90
+ padding-top: 0;
91
+ overflow: hidden;
92
+ }
93
+ uc-camera-source .uc-message-box {
94
+ display: flex;
95
+ flex-direction: column;
96
+ grid-gap: 40px;
97
+ align-items: center;
98
+ justify-content: center;
99
+ padding: 40px 40px 0;
100
+ color: var(--uc-foreground);
101
+ }
102
+ uc-camera-source .uc-message-box button {
103
+ color: var(--uc-primary-foreground);
104
+ background-color: var(--uc-primary);
105
+ }
106
+ uc-camera-source .uc-shot-btn {
107
+ width: 58px;
108
+ height: 58px;
109
+ color: var(--uc-background);
110
+ background-color: var(--uc-primary-light);
111
+ border-radius: 50%;
112
+ opacity: 0.85;
113
+ transition:
114
+ bottom var(--uc-transition),
115
+ opacity var(--uc-transition),
116
+ transform var(--uc-transition);
117
+ }
118
+ uc-camera-source .uc-shot-btn:hover {
119
+ transform: scale(1.05);
120
+ opacity: 1;
121
+ }
122
+ uc-camera-source .uc-shot-btn:active {
123
+ transform: scale(1);
124
+ opacity: 1;
125
+ }
126
+ uc-camera-source .uc-shot-btn[disabled] {
127
+ bottom: -80px;
128
+ }
129
+ uc-camera-source .uc-shot-btn uc-icon svg {
130
+ width: 20px;
131
+ height: 20px;
132
+ }
133
+ uc-camera-source .uc-controls {
134
+ position: relative;
135
+ display: flex;
136
+ align-items: center;
137
+ flex-wrap: wrap;
138
+ justify-content: space-between;
139
+ padding: 0 var(--uc-padding) var(--uc-padding);
140
+ min-height: 74px;
141
+ }
142
+ uc-camera-source .uc-switcher {
143
+ display: flex;
144
+ gap: calc(var(--uc-padding) / 2);
145
+ }
146
+ uc-camera-source .uc-switch.uc-active {
147
+ background-color: var(--uc-secondary);
148
+ }
149
+ uc-camera-source .uc-camera-actions {
150
+ display: flex;
151
+ justify-content: center;
152
+ align-items: center;
153
+ gap: 5px;
154
+ }
155
+ uc-camera-source .uc-stop-record {
156
+ background-color: var(--uc-destructive-foreground-light);
157
+ opacity: 1;
158
+ }
159
+ :where(uc-camera-source:is(.uc-recording)) .uc-recording-timer uc-icon {
160
+ display: none;
161
+ }
162
+ :where(uc-camera-source:is(.uc-recording)) .uc-recording-timer {
163
+ pointer-events: none;
164
+ }
165
+ uc-camera-source .uc-recording-timer {
166
+ z-index: 1;
167
+ position: relative;
168
+ overflow: hidden;
169
+ }
170
+ :where(uc-camera-source) .uc-recording-timer uc-icon {
171
+ width: 10px;
172
+ height: 10px;
173
+ margin-right: 10px;
174
+ }
175
+ uc-camera-source .uc-recording-timer .uc-line {
176
+ position: absolute;
177
+ content: "";
178
+ bottom: 0;
179
+ left: 0;
180
+ right: 0;
181
+ height: 2px;
182
+ background-color: var(--uc-foreground-light);
183
+ transform: scaleX(0);
184
+ transform-origin: left;
185
+ transition: transform var(--uc-transition);
186
+ }
187
+ uc-camera-source .uc-btn-microphone {
188
+ z-index: 1;
189
+ }
190
+ uc-camera-source .uc-select {
191
+ display: flex;
192
+ }
193
+ uc-camera-source .uc-audio-select {
194
+ width: 98px;
195
+ }
196
+ uc-camera-source .uc-audio-select select {
197
+ width: 100%;
198
+ }
199
+ uc-camera-source .uc-camera-action {
200
+ position: absolute;
201
+ inset: 0 var(--uc-padding) var(--uc-padding);
202
+ margin: 0 auto;
203
+ }
204
+ }
205
+
206
+ /* src/blocks/CloudImageEditor/src/css/common.css */
207
+ @layer uc.solutions {
208
+ [uc-cloud-image-editor] {
209
+ --color-primary-accent: var(--uc-primary);
210
+ --color-text-base: var(--uc-foreground);
211
+ --color-text-accent-contrast: var(--uc-background);
212
+ --color-fill-contrast: var(--uc-background);
213
+ --color-modal-backdrop: oklch(0% 0 0 / 0.1);
214
+ --color-image-background: var(--uc-muted);
215
+ --color-focus-ring: var(--color-primary-accent);
216
+ --color-crop-guides: var(--uc-foreground);
217
+ --font-size-ui: var(--uc-font-size);
218
+ --size-touch-area: var(--uc-button-size);
219
+ --size-panel-heading: calc(var(--uc-button-size) + var(--uc-padding) * 2);
220
+ --size-ui-min-width: 130px;
221
+ --size-line-width: 1px;
222
+ --size-modal-width: 650px;
223
+ --size-icon: calc(var(--uc-button-size) / 2);
224
+ --border-radius-editor: var(--uc-radius);
225
+ --border-radius-thumb: var(--uc-radius);
226
+ --border-radius-ui: var(--uc-radius);
227
+ --border-radius-base: var(--uc-radius);
228
+ --cldtr-gap-min: 5px;
229
+ --cldtr-gap-mid-1: 10px;
230
+ --cldtr-gap-mid-2: 15px;
231
+ --cldtr-gap-max: 20px;
232
+ --transition-duration-2: var(--transition-duration-all, 0.2s);
233
+ --transition-duration-3: var(--transition-duration-all, 0.3s);
234
+ --transition-duration-4: var(--transition-duration-all, 0.4s);
235
+ --transition-duration-5: var(--transition-duration-all, 0.5s);
236
+ --modal-header-opacity: 1;
237
+ --modal-header-height: var(--size-panel-heading);
238
+ --modal-toolbar-height: var(--size-panel-heading);
239
+ --transparent-pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);
240
+ display: block;
241
+ width: 100%;
242
+ height: 100%;
243
+ max-height: 100%;
244
+ }
245
+ [uc-cloud-image-editor] :is([can-handle-paste]:hover, [can-handle-paste]:focus) {
246
+ --can-handle-paste: "true";
247
+ }
248
+ [uc-cloud-image-editor] :is([tabindex][focus-visible], [tabindex]:hover, [with-effects][focus-visible], [with-effects]:hover) {
249
+ --filter-effect: var(--hover-filter) !important;
250
+ --opacity-effect: var(--hover-opacity) !important;
251
+ --color-effect: var(--hover-color-rgb) !important;
252
+ --background-effect: var(--hover-background) !important;
253
+ }
254
+ [uc-cloud-image-editor] :is([tabindex]:active, [with-effects]:active) {
255
+ --filter-effect: var(--down-filter) !important;
256
+ --opacity-effect: var(--down-opacity) !important;
257
+ --color-effect: var(--down-color-rgb) !important;
258
+ --background-effect: var(--down-background) !important;
259
+ }
260
+ [uc-cloud-image-editor] :is([tabindex][active], [with-effects][active]) {
261
+ --filter-effect: var(--active-filter) !important;
262
+ --opacity-effect: var(--active-opacity) !important;
263
+ --color-effect: var(--active-color-rgb) !important;
264
+ --background-effect: var(--active-background) !important;
265
+ }
266
+ [uc-cloud-image-editor] [hidden-scrollbar]::-webkit-scrollbar {
267
+ display: none;
268
+ }
269
+ [uc-cloud-image-editor] [hidden-scrollbar] {
270
+ -ms-overflow-style: none;
271
+ scrollbar-width: none;
272
+ }
273
+ [uc-cloud-image-editor].uc-editor_ON {
274
+ --modal-header-opacity: 0;
275
+ --modal-header-height: 0px;
276
+ --modal-toolbar-height: calc(var(--size-panel-heading) * 2);
277
+ }
278
+ [uc-cloud-image-editor].uc-editor_OFF {
279
+ --modal-header-opacity: 1;
280
+ --modal-header-height: var(--size-panel-heading);
281
+ --modal-toolbar-height: var(--size-panel-heading);
282
+ }
283
+ [uc-cloud-image-editor] > .uc-wrapper {
284
+ --l-min-img-height: var(--modal-toolbar-height);
285
+ --l-max-img-height: 100%;
286
+ --l-edit-button-width: 120px;
287
+ --l-toolbar-horizontal-padding: var(--cldtr-gap-mid-1);
288
+ position: relative;
289
+ display: grid;
290
+ grid-template-rows: minmax(var(--l-min-img-height), var(--l-max-img-height)) minmax(var(--modal-toolbar-height), auto);
291
+ height: 100%;
292
+ overflow: hidden;
293
+ overflow-y: auto;
294
+ }
295
+ @media only screen and (max-width: 800px) {
296
+ [uc-cloud-image-editor] > .uc-wrapper {
297
+ --l-edit-button-width: 70px;
298
+ --l-toolbar-horizontal-padding: var(--cldtr-gap-min);
299
+ }
300
+ }
301
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport {
302
+ display: flex;
303
+ align-items: center;
304
+ justify-content: center;
305
+ overflow: hidden;
306
+ }
307
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image {
308
+ --viewer-image-opacity: 1;
309
+ position: absolute;
310
+ top: 0px;
311
+ left: 0px;
312
+ z-index: 10;
313
+ display: block;
314
+ box-sizing: border-box;
315
+ width: 100%;
316
+ height: 100%;
317
+ object-fit: scale-down;
318
+ background-color: var(--color-image-background);
319
+ transform: scale(1);
320
+ opacity: var(--viewer-image-opacity);
321
+ user-select: none;
322
+ pointer-events: auto;
323
+ }
324
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_visible_viewer {
325
+ transition: opacity var(--transition-duration-3) ease-in-out, transform var(--transition-duration-4);
326
+ }
327
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_hidden_to_cropper {
328
+ --viewer-image-opacity: 0;
329
+ background-image: var(--transparent-pixel);
330
+ transform: scale(1);
331
+ transition: transform var(--transition-duration-4), opacity var(--transition-duration-3) steps(1, jump-end);
332
+ pointer-events: none;
333
+ }
334
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_hidden_effects {
335
+ --viewer-image-opacity: 0;
336
+ transform: scale(1);
337
+ transition: opacity var(--transition-duration-3) cubic-bezier(0.5, 0, 1, 1), transform var(--transition-duration-4);
338
+ pointer-events: none;
339
+ }
340
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container {
341
+ position: relative;
342
+ display: block;
343
+ width: 100%;
344
+ height: 100%;
345
+ background-color: var(--color-image-background);
346
+ transition: var(--transition-duration-3);
347
+ }
348
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-toolbar {
349
+ position: relative;
350
+ transition: 0.3s;
351
+ }
352
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content {
353
+ position: absolute;
354
+ bottom: 0px;
355
+ left: 0px;
356
+ box-sizing: border-box;
357
+ width: 100%;
358
+ height: var(--modal-toolbar-height);
359
+ min-height: var(--size-panel-heading);
360
+ background-color: var(--color-fill-contrast);
361
+ }
362
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content.uc-toolbar_content__viewer {
363
+ display: flex;
364
+ align-items: center;
365
+ justify-content: space-between;
366
+ height: var(--size-panel-heading);
367
+ padding-right: var(--l-toolbar-horizontal-padding);
368
+ padding-left: var(--l-toolbar-horizontal-padding);
369
+ }
370
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content.uc-toolbar_content__editor {
371
+ display: flex;
372
+ }
373
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-info_pan {
374
+ position: absolute;
375
+ user-select: none;
376
+ }
377
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-file_type_outer {
378
+ position: absolute;
379
+ z-index: 2;
380
+ display: flex;
381
+ max-width: 120px;
382
+ transform: translateX(-40px);
383
+ user-select: none;
384
+ }
385
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-file_type_outer > .uc-file_type {
386
+ padding: 4px 0.8em;
387
+ }
388
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash {
389
+ position: absolute;
390
+ z-index: 4;
391
+ display: flex;
392
+ flex-direction: column;
393
+ width: 100%;
394
+ height: 100%;
395
+ background-color: var(--color-fill-contrast);
396
+ }
397
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_content {
398
+ display: flex;
399
+ flex: 1;
400
+ flex-direction: column;
401
+ align-items: center;
402
+ justify-content: center;
403
+ }
404
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_content > .uc-network_problems_icon {
405
+ display: flex;
406
+ align-items: center;
407
+ justify-content: center;
408
+ width: 40px;
409
+ height: 40px;
410
+ color: var(--uc-foreground);
411
+ background-color: var(--uc-muted);
412
+ border-radius: 50%;
413
+ }
414
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_content > .uc-network_problems_text {
415
+ margin-top: var(--cldtr-gap-max);
416
+ font-size: var(--font-size-ui);
417
+ color: var(--uc-foreground);
418
+ }
419
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_footer {
420
+ display: flex;
421
+ align-items: center;
422
+ justify-content: center;
423
+ height: var(--size-panel-heading);
424
+ }
425
+ uc-crop-frame > .uc-svg {
426
+ position: absolute;
427
+ top: 0px;
428
+ left: 0px;
429
+ z-index: 2;
430
+ width: 100%;
431
+ height: 100%;
432
+ border-top-left-radius: var(--border-radius-base);
433
+ border-top-right-radius: var(--border-radius-base);
434
+ opacity: inherit;
435
+ transition: var(--transition-duration-3);
436
+ }
437
+ uc-crop-frame > .uc-thumb {
438
+ --idle-color-rgb: var(--color-text-base);
439
+ --hover-color-rgb: var(--color-primary-accent);
440
+ --focus-color-rgb: var(--color-primary-accent);
441
+ --down-color-rgb: var(--color-primary-accent);
442
+ --color-effect: var(--idle-color-rgb);
443
+ color: var(--color-effect);
444
+ transition: color var(--transition-duration-3), opacity var(--transition-duration-3);
445
+ }
446
+ uc-crop-frame .uc-thumb--visible {
447
+ opacity: 1;
448
+ pointer-events: auto;
449
+ }
450
+ uc-crop-frame .uc-thumb--hidden {
451
+ opacity: 0;
452
+ pointer-events: none;
453
+ }
454
+ uc-crop-frame .uc-guides {
455
+ transition: var(--transition-duration-3);
456
+ }
457
+ uc-crop-frame .uc-guides--hidden {
458
+ opacity: 0;
459
+ }
460
+ uc-crop-frame .uc-guides--semi-hidden {
461
+ opacity: 0.2;
462
+ }
463
+ uc-crop-frame .uc-guides--visible {
464
+ opacity: 1;
465
+ }
466
+ uc-editor-button-control,
467
+ uc-editor-crop-button-control,
468
+ uc-editor-aspect-ratio-button-control,
469
+ uc-editor-freeform-button-control,
470
+ uc-editor-filter-control,
471
+ uc-editor-operation-control {
472
+ --l-base-min-width: var(--uc-button-size);
473
+ --l-base-height: var(--uc-button-size);
474
+ --opacity-effect: var(--idle-opacity);
475
+ --color-effect: var(--idle-color-rgb);
476
+ --background-effect: var(--idle-background);
477
+ --filter-effect: var(--idle-filter);
478
+ --idle-color-rgb: var(--uc-secondary-foreground);
479
+ --idle-opacity: 1;
480
+ --idle-filter: 1;
481
+ --idle-background: var(--uc-secondary);
482
+ --hover-color-rgb: var(--uc-secondary-foreground);
483
+ --hover-opacity: 1;
484
+ --hover-filter: 0.8;
485
+ --hover-background: var(--uc-secondary-hover);
486
+ --down-color-rgb: var(--hover-color-rgb);
487
+ --down-opacity: 1;
488
+ --down-filter: 0.6;
489
+ --down-background: var(--uc-secondary);
490
+ border-radius: var(--uc-radius);
491
+ }
492
+ uc-editor-button-control > button,
493
+ uc-editor-crop-button-control > button,
494
+ uc-editor-aspect-ratio-button-control > button,
495
+ uc-editor-freeform-button-control > button,
496
+ uc-editor-filter-control > button,
497
+ uc-editor-operation-control > button {
498
+ all: unset;
499
+ position: relative;
500
+ display: grid;
501
+ grid-template-columns: var(--l-base-min-width) auto;
502
+ grid-template-rows: 100%;
503
+ align-items: center;
504
+ height: var(--l-base-height);
505
+ color: var(--color-effect);
506
+ opacity: var(--opacity-effect);
507
+ cursor: pointer;
508
+ transition: var(--l-width-transition);
509
+ }
510
+ uc-editor-freeform-button-control > button {
511
+ grid-template-columns: auto var(--l-base-min-width);
512
+ }
513
+ uc-editor-freeform-button-control > button > uc-icon {
514
+ margin-left: var(--cldtr-gap-mid-1);
515
+ width: 10px;
516
+ }
517
+ :where(uc-editor-button-control, uc-editor-crop-button-control, uc-editor-aspect-ratio-button-control, uc-editor-freeform-button-control, uc-editor-filter-control, uc-editor-operation-control) > uc-icon > svg {
518
+ width: var(--size-icon);
519
+ height: var(--size-icon);
520
+ }
521
+ uc-editor-filter-control > uc-icon.uc-original-icon > svg {
522
+ width: 100%;
523
+ height: 100%;
524
+ }
525
+ uc-editor-button-control.uc-active,
526
+ uc-editor-operation-control.uc-active,
527
+ uc-editor-crop-button-control.uc-active,
528
+ uc-editor-aspect-ratio-button-control.uc-active,
529
+ uc-editor-freeform-button-control.uc-active,
530
+ uc-editor-filter-control.uc-active {
531
+ --idle-color-rgb: var(--uc-primary-foreground);
532
+ --idle-background: var(--uc-primary);
533
+ --idle-opacity: 1;
534
+ --hover-color-rgb: var(--uc-primary-foreground);
535
+ --hover-background: var(--uc-primary);
536
+ --hover-opacity: 1;
537
+ }
538
+ uc-editor-filter-control.uc-not_active .uc-preview[loaded] {
539
+ opacity: 1;
540
+ }
541
+ uc-editor-filter-control.uc-active .uc-preview {
542
+ opacity: 0;
543
+ }
544
+ uc-editor-button-control.uc-not_active,
545
+ uc-editor-operation-control.uc-not_active,
546
+ uc-editor-crop-button-control.uc-not_active,
547
+ uc-editor-aspect-ratio-button-control.uc-not_active,
548
+ uc-editor-freeform-button-control.uc-not_active,
549
+ uc-editor-filter-control.uc-not_active {
550
+ --idle-color-rgb: var(--uc-secondary-foreground);
551
+ }
552
+ :where(.uc-contrast) uc-editor-button-control.uc-not_active,
553
+ :where(.uc-contrast) uc-editor-operation-control.uc-not_active,
554
+ :where(.uc-contrast) uc-editor-crop-button-control.uc-not_active,
555
+ :where(.uc-contrast) uc-editor-freeform-button-control.uc-not_active,
556
+ :where(.uc-contrast) uc-editor-aspect-ratio-button-control.uc-not_active,
557
+ :where(.uc-contrast) uc-editor-filter-control.uc-not_active {
558
+ --idle-background: transparent;
559
+ --hover-background: var(--uc-secondary);
560
+ outline: 1px solid var(--uc-border);
561
+ outline-offset: -1px;
562
+ }
563
+ uc-editor-button-control > button::before,
564
+ uc-editor-operation-control > button::before,
565
+ uc-editor-crop-button-control > button::before,
566
+ uc-editor-freeform-button-control > button::before,
567
+ uc-editor-aspect-ratio-button-control > button::before,
568
+ uc-editor-filter-control > button::before {
569
+ position: absolute;
570
+ content: "";
571
+ right: 0;
572
+ left: 0;
573
+ z-index: -1;
574
+ width: 100%;
575
+ height: 100%;
576
+ background-color: var(--background-effect);
577
+ border-radius: var(--border-radius-editor);
578
+ transition: var(--transition-duration-3);
579
+ }
580
+ uc-editor-button-control > button .uc-title,
581
+ uc-editor-operation-control > button .uc-title,
582
+ uc-editor-crop-button-control > button .uc-title,
583
+ uc-editor-aspect-ratio-button-control > button .uc-title,
584
+ uc-editor-freeform-button-control > button .uc-title,
585
+ uc-editor-filter-control > button .uc-title {
586
+ padding-right: var(--cldtr-gap-mid-1);
587
+ font-size: 0.7em;
588
+ letter-spacing: 1.004px;
589
+ text-transform: uppercase;
590
+ }
591
+ uc-editor-freeform-button-control > button .uc-title {
592
+ padding-left: var(--cldtr-gap-mid-1);
593
+ padding-right: 0;
594
+ }
595
+ uc-editor-button-control > button uc-icon,
596
+ uc-editor-operation-control > button uc-icon,
597
+ uc-editor-crop-button-control > button uc-icon,
598
+ uc-editor-aspect-ratio-button-control > button uc-icon,
599
+ uc-editor-freeform-button-control > button uc-icon,
600
+ uc-editor-filter-control > button uc-icon {
601
+ pointer-events: none;
602
+ }
603
+ uc-editor-filter-control > button .uc-preview {
604
+ position: absolute;
605
+ right: 0;
606
+ left: 0;
607
+ z-index: -1;
608
+ width: 100%;
609
+ height: var(--l-base-height);
610
+ background-repeat: no-repeat;
611
+ background-size: contain;
612
+ border-radius: var(--border-radius-editor);
613
+ opacity: 0;
614
+ filter: brightness(var(--filter-effect));
615
+ transition: var(--transition-duration-3);
616
+ }
617
+ uc-editor-filter-control > .uc-original-icon {
618
+ color: var(--color-effect);
619
+ opacity: 0.3;
620
+ }
621
+ uc-editor-image-cropper {
622
+ position: absolute;
623
+ top: 0px;
624
+ left: 0px;
625
+ z-index: 10;
626
+ display: block;
627
+ width: 100%;
628
+ height: 100%;
629
+ opacity: 0;
630
+ pointer-events: none;
631
+ touch-action: none;
632
+ color: var(--color-crop-guides);
633
+ }
634
+ uc-editor-image-cropper.uc-active_from_editor {
635
+ transform: scale(1) translate(0px, 0px);
636
+ opacity: 1;
637
+ transition: transform var(--transition-duration-4) cubic-bezier(0.37, 0, 0.63, 1) 0.4s, opacity var(--transition-duration-3);
638
+ pointer-events: auto;
639
+ }
640
+ uc-editor-image-cropper.uc-active_from_viewer {
641
+ transform: scale(1) translate(0px, 0px);
642
+ opacity: 1;
643
+ transition: transform var(--transition-duration-4) cubic-bezier(0.37, 0, 0.63, 1) 0.4s, opacity var(--transition-duration-3);
644
+ pointer-events: auto;
645
+ }
646
+ uc-editor-image-cropper.uc-inactive_to_editor {
647
+ opacity: 0;
648
+ transition: transform var(--transition-duration-4) cubic-bezier(0.37, 0, 0.63, 1), opacity var(--transition-duration-3) calc(var(--transition-duration-3) + 0.05s);
649
+ pointer-events: none;
650
+ }
651
+ uc-editor-image-cropper > .uc-canvas {
652
+ position: absolute;
653
+ top: 0px;
654
+ left: 0px;
655
+ z-index: 1;
656
+ display: block;
657
+ width: 100%;
658
+ height: 100%;
659
+ }
660
+ uc-editor-image-fader {
661
+ position: absolute;
662
+ top: 0px;
663
+ left: 0px;
664
+ display: block;
665
+ width: 100%;
666
+ height: 100%;
667
+ }
668
+ uc-editor-image-fader.uc-active_from_viewer {
669
+ z-index: 3;
670
+ transform: scale(1);
671
+ opacity: 1;
672
+ transition: transform var(--transition-duration-4), opacity var(--transition-duration-3) steps(1, jump-start);
673
+ pointer-events: auto;
674
+ }
675
+ uc-editor-image-fader.uc-active_from_cropper {
676
+ z-index: 3;
677
+ transform: scale(1);
678
+ opacity: 1;
679
+ transition: transform var(--transition-duration-4), opacity var(--transition-duration-3) steps(1, jump-end);
680
+ pointer-events: auto;
681
+ }
682
+ uc-editor-image-fader.uc-inactive_to_cropper {
683
+ z-index: 3;
684
+ transform: scale(1);
685
+ opacity: 0;
686
+ transition: transform var(--transition-duration-4), opacity var(--transition-duration-3) steps(1, jump-end);
687
+ pointer-events: none;
688
+ }
689
+ uc-editor-image-fader .uc-fader-image {
690
+ position: absolute;
691
+ top: 0px;
692
+ left: 0px;
693
+ display: block;
694
+ width: 100%;
695
+ height: 100%;
696
+ object-fit: scale-down;
697
+ transform: scale(1);
698
+ user-select: none;
699
+ content-visibility: auto;
700
+ }
701
+ uc-editor-image-fader .uc-fader-image--preview {
702
+ background-color: var(--color-image-background);
703
+ border-top-left-radius: var(--border-radius-base);
704
+ border-top-right-radius: var(--border-radius-base);
705
+ transform: scale(1);
706
+ opacity: 0;
707
+ transition: var(--transition-duration-3);
708
+ }
709
+ uc-editor-scroller {
710
+ display: flex;
711
+ align-items: center;
712
+ width: 100%;
713
+ height: 100%;
714
+ overflow-x: scroll;
715
+ }
716
+ uc-editor-slider {
717
+ display: flex;
718
+ align-items: center;
719
+ justify-content: center;
720
+ width: 100%;
721
+ height: var(--size-panel-heading);
722
+ }
723
+ uc-editor-toolbar {
724
+ position: relative;
725
+ width: 100%;
726
+ height: 100%;
727
+ }
728
+ @media only screen and (max-width: 600px) {
729
+ uc-editor-toolbar {
730
+ --l-tab-gap: var(--cldtr-gap-mid-1);
731
+ --l-slider-padding: var(--uc-padding);
732
+ --l-controls-padding: var(--uc-padding);
733
+ }
734
+ }
735
+ @media only screen and (min-width: 601px) {
736
+ uc-editor-toolbar {
737
+ --l-tab-gap: var(--cldtr-gap-max);
738
+ --l-slider-padding: var(--uc-padding);
739
+ --l-controls-padding: var(--uc-padding);
740
+ }
741
+ }
742
+ uc-editor-toolbar > .uc-toolbar-container {
743
+ position: relative;
744
+ width: 100%;
745
+ height: 100%;
746
+ overflow: hidden;
747
+ }
748
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar {
749
+ position: absolute;
750
+ display: grid;
751
+ grid-template-rows: 1fr 1fr;
752
+ width: 100%;
753
+ height: 100%;
754
+ background-color: var(--color-fill-contrast);
755
+ transition:
756
+ opacity var(--transition-duration-3) ease-in-out,
757
+ transform var(--transition-duration-3) ease-in-out,
758
+ visibility var(--transition-duration-3) ease-in-out;
759
+ }
760
+ .uc-sub-toolbar > .uc-list-aspect-ratio-container > .uc-list-aspect-ratio {
761
+ display: grid;
762
+ grid-auto-flow: column;
763
+ justify-content: center;
764
+ align-items: center;
765
+ gap: 6px;
766
+ height: var(--size-panel-heading);
767
+ }
768
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--visible {
769
+ transform: translateY(0px);
770
+ opacity: 1;
771
+ pointer-events: auto;
772
+ }
773
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--top-hidden {
774
+ transform: translateY(100%);
775
+ opacity: 0;
776
+ pointer-events: none;
777
+ }
778
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--bottom-hidden {
779
+ transform: translateY(-100%);
780
+ opacity: 0;
781
+ pointer-events: none;
782
+ }
783
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row {
784
+ display: flex;
785
+ align-items: center;
786
+ justify-content: space-between;
787
+ padding-right: var(--l-controls-padding);
788
+ padding-left: var(--l-controls-padding);
789
+ }
790
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > .uc-tab-toggles {
791
+ position: relative;
792
+ display: grid;
793
+ grid-auto-flow: column;
794
+ gap: 0px var(--l-tab-gap);
795
+ align-items: center;
796
+ height: 100%;
797
+ }
798
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > .uc-tab-toggles > .uc-tab-toggles_indicator {
799
+ position: absolute;
800
+ bottom: 0px;
801
+ left: 0px;
802
+ width: var(--size-touch-area);
803
+ height: 2px;
804
+ background-color: var(--uc-secondary-foreground);
805
+ transform: translateX(0px);
806
+ transition: transform var(--transition-duration-3);
807
+ }
808
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row {
809
+ position: relative;
810
+ }
811
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row > .uc-tab-content {
812
+ position: absolute;
813
+ top: 0px;
814
+ left: 0px;
815
+ display: flex;
816
+ width: 100%;
817
+ height: 100%;
818
+ overflow: hidden;
819
+ opacity: 0;
820
+ content-visibility: auto;
821
+ }
822
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row > .uc-tab-content.uc-tab-content--visible {
823
+ opacity: 1;
824
+ pointer-events: auto;
825
+ }
826
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row > .uc-tab-content.uc-tab-content--hidden {
827
+ opacity: 0;
828
+ pointer-events: none;
829
+ }
830
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > .uc-tab-toggles > .uc-tab-toggle.uc-tab-toggle--visible {
831
+ display: contents;
832
+ }
833
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > .uc-tab-toggles > .uc-tab-toggle.uc-tab-toggle--hidden {
834
+ display: none;
835
+ }
836
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > .uc-tab-toggles.uc-tab-toggles--hidden {
837
+ display: none;
838
+ }
839
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > .uc-tab-toggles > .uc-tab-toggle > uc-btn-ui {
840
+ width: var(--uc-button-size);
841
+ }
842
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > .uc-tab-toggles > .uc-tab-toggle > uc-btn-ui > uc-icon > svg {
843
+ width: var(--size-icon);
844
+ height: var(--size-icon);
845
+ }
846
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row > .uc-tab-content .uc-controls-list_align {
847
+ display: grid;
848
+ grid-template-areas: ". inner .";
849
+ grid-template-columns: 1fr auto 1fr;
850
+ box-sizing: border-box;
851
+ min-width: 100%;
852
+ padding-left: var(--uc-padding);
853
+ }
854
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row > .uc-tab-content .uc-controls-list_inner {
855
+ display: grid;
856
+ grid-area: inner;
857
+ grid-auto-flow: column;
858
+ gap: 6px;
859
+ }
860
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row > .uc-tab-content .uc-controls-list_inner:last-child {
861
+ padding-right: var(--uc-padding);
862
+ }
863
+ uc-editor-toolbar .uc-info-tooltip_container {
864
+ position: absolute;
865
+ display: flex;
866
+ align-items: flex-start;
867
+ justify-content: center;
868
+ width: 100%;
869
+ height: 100%;
870
+ }
871
+ uc-editor-toolbar .uc-info-tooltip_wrapper {
872
+ position: absolute;
873
+ top: calc(-100% - var(--cldtr-gap-mid-2));
874
+ display: flex;
875
+ flex-direction: column;
876
+ justify-content: flex-end;
877
+ height: 100%;
878
+ pointer-events: none;
879
+ }
880
+ uc-editor-toolbar .uc-info-tooltip {
881
+ z-index: 10;
882
+ padding: 3px 6px;
883
+ color: var(--color-text-base);
884
+ font-size: 0.7em;
885
+ letter-spacing: 1px;
886
+ text-transform: uppercase;
887
+ background-color: var(--color-text-accent-contrast);
888
+ border-radius: var(--border-radius-editor);
889
+ transform: translateY(100%);
890
+ opacity: 0;
891
+ transition: var(--transition-duration-3);
892
+ }
893
+ uc-editor-toolbar .uc-info-tooltip_visible {
894
+ transform: translateY(0px);
895
+ opacity: 1;
896
+ }
897
+ uc-editor-toolbar .uc-slider {
898
+ padding-right: var(--l-slider-padding);
899
+ padding-left: var(--l-slider-padding);
900
+ }
901
+ uc-btn-ui > button {
902
+ --filter-effect: var(--idle-brightness);
903
+ --opacity-effect: var(--idle-opacity);
904
+ --color-effect: var(--idle-color-rgb);
905
+ --background-effect: var(--idle-background);
906
+ --l-transition-effect: var( --css-transition, color var(--transition-duration-2), background-color var(--transition-duration-2), filter var(--transition-duration-2) );
907
+ all: unset;
908
+ display: inline-flex;
909
+ align-items: center;
910
+ box-sizing: var(--css-box-sizing, border-box);
911
+ height: var(--css-height, var(--uc-button-size));
912
+ padding-right: var(--css-padding-right, 14px);
913
+ padding-left: var(--css-padding-left, 14px);
914
+ font-size: 1em;
915
+ color: var(--color-effect);
916
+ background-color: var(--background-effect);
917
+ border-radius: var(--uc-radius);
918
+ opacity: var(--opacity-effect);
919
+ cursor: pointer;
920
+ filter: brightness(var(--filter-effect));
921
+ transition: var(--l-transition-effect);
922
+ user-select: none;
923
+ }
924
+ uc-btn-ui > button > uc-icon {
925
+ pointer-events: none;
926
+ }
927
+ uc-btn-ui .uc-text {
928
+ white-space: nowrap;
929
+ }
930
+ uc-btn-ui .uc-icon {
931
+ display: flex;
932
+ align-items: center;
933
+ justify-content: center;
934
+ color: var(--color-effect);
935
+ filter: brightness(var(--filter-effect));
936
+ transition: var(--l-transition-effect);
937
+ }
938
+ uc-btn-ui .uc-icon_left {
939
+ margin-right: var(--cldtr-gap-mid-1);
940
+ margin-left: 0px;
941
+ }
942
+ uc-btn-ui .uc-icon_right {
943
+ margin-right: 0px;
944
+ margin-left: var(--cldtr-gap-mid-1);
945
+ }
946
+ uc-btn-ui .uc-icon_single {
947
+ margin-right: 0px;
948
+ margin-left: 0px;
949
+ }
950
+ uc-btn-ui .uc-icon_hidden {
951
+ display: none;
952
+ margin: 0;
953
+ }
954
+ uc-btn-ui.uc-primary > button {
955
+ --idle-color-rgb: var(--uc-primary-foreground);
956
+ --idle-brightness: 1;
957
+ --idle-opacity: 1;
958
+ --idle-background: var(--uc-primary);
959
+ --hover-color-rgb: var(--uc-primary-foreground);
960
+ --hover-brightness: 1;
961
+ --hover-opacity: 1;
962
+ --hover-background: var(--uc-primary-hover);
963
+ --down-color-rgb: var(--uc-primary-foreground);
964
+ --down-brightness: 0.75;
965
+ --down-opacity: 1;
966
+ --down-background: var(--uc-primary);
967
+ --active-color-rgb: var(--uc-primary-foreground);
968
+ --active-brightness: 1;
969
+ --active-opacity: 1;
970
+ --active-background: var(--uc-primary);
971
+ }
972
+ uc-btn-ui.uc-primary-icon > button {
973
+ --idle-color-rgb: var(--uc-primary);
974
+ --idle-brightness: 1;
975
+ --idle-opacity: 1;
976
+ --idle-background: transparent;
977
+ --hover-color-rgb: var(--uc-primary);
978
+ --hover-brightness: 1;
979
+ --hover-opacity: 1;
980
+ --hover-background: var(--uc-primary-transparent);
981
+ --down-color-rgb: var(--uc-primary);
982
+ --down-brightness: 0.75;
983
+ --down-opacity: 1;
984
+ --down-background: var(--uc-primary-transparent);
985
+ --active-color-rgb: var(--uc-primary-foreground);
986
+ --active-brightness: 1;
987
+ --active-opacity: 1;
988
+ --active-background: var(--uc-primary);
989
+ padding: 0;
990
+ width: var(--uc-button-size);
991
+ }
992
+ uc-btn-ui.uc-secondary > button {
993
+ --idle-color-rgb: var(--uc-secondary-foreground);
994
+ --idle-brightness: 1;
995
+ --idle-opacity: 1;
996
+ --idle-background: var(--uc-secondary);
997
+ --hover-color-rgb: var(--uc-secondary-foreground);
998
+ --hover-brightness: 1;
999
+ --hover-opacity: 1;
1000
+ --hover-background: var(--uc-secondary-hover);
1001
+ --down-color-rgb: var(--uc-secondary-foreground);
1002
+ --down-brightness: 1;
1003
+ --down-opacity: 1;
1004
+ --down-background: var(--uc-secondary-hover);
1005
+ --active-color-rgb: var(--uc-secondary-foreground);
1006
+ --active-brightness: 1;
1007
+ --active-opacity: 1;
1008
+ --active-background: transparent;
1009
+ }
1010
+ :where(.uc-contrast) uc-btn-ui.uc-secondary > button {
1011
+ border: 1px solid var(--uc-border);
1012
+ }
1013
+ uc-btn-ui.uc-secondary-icon > button {
1014
+ --idle-color-rgb: var(--uc-secondary-foreground);
1015
+ --idle-brightness: 1;
1016
+ --idle-opacity: 1;
1017
+ --idle-background: transparent;
1018
+ --hover-color-rgb: var(--uc-secondary-foreground);
1019
+ --hover-brightness: 1;
1020
+ --hover-opacity: 1;
1021
+ --hover-background: var(--uc-secondary);
1022
+ --down-color-rgb: var(--uc-secondary-foreground);
1023
+ --down-brightness: 1;
1024
+ --down-opacity: 1;
1025
+ --down-background: var(--uc-secondary);
1026
+ --active-color-rgb: var(--uc-secondary-foreground);
1027
+ --active-brightness: 1;
1028
+ --active-opacity: 1;
1029
+ --active-background: transparent;
1030
+ padding: 0;
1031
+ width: var(--uc-button-size);
1032
+ }
1033
+ uc-btn-ui.uc-tab > button {
1034
+ --idle-color-rgb: var(--uc-secondary-foreground);
1035
+ --idle-brightness: 1;
1036
+ --idle-opacity: 1;
1037
+ --idle-background: transparent;
1038
+ --hover-color-rgb: var(--uc-secondary-foreground);
1039
+ --hover-brightness: 1;
1040
+ --hover-opacity: 1;
1041
+ --hover-background: var(--uc-secondary);
1042
+ --down-color-rgb: var(--uc-secondary-foreground);
1043
+ --down-brightness: 1;
1044
+ --down-opacity: 1;
1045
+ --down-background: var(--uc-secondary);
1046
+ --active-color-rgb: var(--uc-secondary-foreground);
1047
+ --active-brightness: 1;
1048
+ --active-opacity: 1;
1049
+ --active-background: transparent;
1050
+ padding: 0;
1051
+ width: var(--uc-button-size);
1052
+ }
1053
+ uc-btn-ui.uc-default > button {
1054
+ --idle-color-rgb: var(--uc-secondary-foreground);
1055
+ --idle-brightness: 1;
1056
+ --idle-opacity: 1;
1057
+ --idle-background: var(--uc-secondary);
1058
+ --hover-color-rgb: var(--uc-secondary-foreground);
1059
+ --hover-brightness: 1;
1060
+ --hover-opacity: 1;
1061
+ --hover-background: var(--uc-secondary-hover);
1062
+ --down-color-rgb: var(--uc-secondary-foreground);
1063
+ --down-brightness: 0.75;
1064
+ --down-opacity: 1;
1065
+ --down-background: var(--uc-secondary);
1066
+ --active-color-rgb: var(--uc-primary);
1067
+ --active-brightness: 1;
1068
+ --active-opacity: 1;
1069
+ --active-background: var(--uc-primary-transparent);
1070
+ }
1071
+ :where(.uc-contrast) uc-btn-ui.uc-default > button {
1072
+ --idle-background: transparent;
1073
+ --hover-background: var(--uc-secondary);
1074
+ --active-background: var(--uc-foreground);
1075
+ --active-color-rgb: var(--uc-background);
1076
+ }
1077
+ uc-line-loader-ui {
1078
+ position: absolute;
1079
+ top: 0px;
1080
+ left: 0px;
1081
+ z-index: 9999;
1082
+ width: 100%;
1083
+ height: 2px;
1084
+ opacity: 0.5;
1085
+ }
1086
+ uc-line-loader-ui .uc-inner {
1087
+ width: 25%;
1088
+ max-width: 200px;
1089
+ height: 100%;
1090
+ }
1091
+ uc-line-loader-ui .uc-line {
1092
+ width: 100%;
1093
+ height: 100%;
1094
+ background-color: var(--uc-primary);
1095
+ transform: translateX(-101%);
1096
+ transition: transform 1s;
1097
+ }
1098
+ uc-slider-ui {
1099
+ --l-thumb-size: 24px;
1100
+ --l-zero-dot-size: 5px;
1101
+ --l-zero-dot-offset: 2px;
1102
+ --idle-color-rgb: var(--uc-foreground);
1103
+ --hover-color-rgb: var(--uc-primary);
1104
+ --down-color-rgb: var(--uc-primary);
1105
+ --color-effect: var(--idle-color-rgb);
1106
+ --l-color: var(--color-effect);
1107
+ position: relative;
1108
+ display: flex;
1109
+ align-items: center;
1110
+ justify-content: center;
1111
+ width: 100%;
1112
+ height: calc(var(--l-thumb-size) + (var(--l-zero-dot-size) + var(--l-zero-dot-offset)) * 2);
1113
+ }
1114
+ uc-slider-ui .uc-thumb {
1115
+ position: absolute;
1116
+ left: 0px;
1117
+ width: var(--l-thumb-size);
1118
+ height: var(--l-thumb-size);
1119
+ background-color: var(--l-color);
1120
+ border-radius: 50%;
1121
+ transform: translateX(0px);
1122
+ opacity: 1;
1123
+ transition: opacity var(--transition-duration-2), background-color var(--transition-duration-2);
1124
+ }
1125
+ uc-slider-ui .uc-steps {
1126
+ position: absolute;
1127
+ display: flex;
1128
+ align-items: center;
1129
+ justify-content: space-between;
1130
+ box-sizing: border-box;
1131
+ width: 100%;
1132
+ height: 100%;
1133
+ padding-right: calc(var(--l-thumb-size) / 2);
1134
+ padding-left: calc(var(--l-thumb-size) / 2);
1135
+ }
1136
+ uc-slider-ui .uc-border-step {
1137
+ width: 0px;
1138
+ height: 10px;
1139
+ border-right: 1px solid var(--uc-foreground);
1140
+ opacity: 1;
1141
+ transition: border-color var(--transition-duration-2);
1142
+ }
1143
+ uc-slider-ui .uc-minor-step {
1144
+ width: 0px;
1145
+ height: 4px;
1146
+ border-right: 1px solid var(--uc-foreground);
1147
+ opacity: 0.6;
1148
+ transition: border-color var(--transition-duration-2);
1149
+ }
1150
+ uc-slider-ui .uc-zero-dot {
1151
+ position: absolute;
1152
+ top: calc(100% - var(--l-zero-dot-offset) * 2);
1153
+ left: calc(var(--l-thumb-size) / 2 - var(--l-zero-dot-size) / 2);
1154
+ width: var(--l-zero-dot-size);
1155
+ height: var(--l-zero-dot-size);
1156
+ background-color: var(--color-primary-accent);
1157
+ border-radius: 50%;
1158
+ opacity: 0;
1159
+ transition: var(--transition-duration-3);
1160
+ }
1161
+ uc-slider-ui .uc-input {
1162
+ position: absolute;
1163
+ width: calc(100% - 10px);
1164
+ height: 100%;
1165
+ margin: 0;
1166
+ cursor: pointer;
1167
+ opacity: 0;
1168
+ }
1169
+ uc-presence-toggle.uc-transition {
1170
+ transition: opacity var(--transition-duration-3), visibility var(--transition-duration-3);
1171
+ }
1172
+ uc-presence-toggle.uc-visible {
1173
+ opacity: 1;
1174
+ pointer-events: inherit;
1175
+ }
1176
+ uc-presence-toggle.uc-hidden {
1177
+ opacity: 0;
1178
+ pointer-events: none;
1179
+ }
1180
+ uc-presence-toggle.uc-initial {
1181
+ display: none !important;
1182
+ transition: none !important;
1183
+ }
1184
+ [uc-cloud-image-editor] [role=button]:focus-visible,
1185
+ [uc-cloud-image-editor] button:focus-visible {
1186
+ outline: 1px auto Highlight;
1187
+ outline: 1px auto -webkit-focus-ring-color;
1188
+ }
1189
+ [uc-cloud-image-editor] .uc-cloud-mask {
1190
+ pointer-events: none;
1191
+ }
1192
+ [uc-aspect-ratio-freeform] button {
1193
+ display: flex;
1194
+ }
1195
+ [uc-aspect-ratio-freeform] uc-icon {
1196
+ display: none;
1197
+ }
1198
+ [uc-aspect-ratio-freeform] .uc-title {
1199
+ padding-left: var(--cldtr-gap-mid-1);
1200
+ }
1201
+ :where(uc-editor-freeform-button-control, uc-editor-aspect-ratio-button-control:last-of-type) {
1202
+ margin-right: calc(3 * var(--cldtr-gap-mid-1));
1203
+ }
1204
+ }
1205
+
1206
+ /* src/blocks/CloudImageEditor/src/css/icons.css */
1207
+ @layer uc.solutions {
1208
+ :where([uc-cloud-image-editor]) uc-icon {
1209
+ display: flex;
1210
+ justify-content: center;
1211
+ width: 100%;
1212
+ height: 100%;
1213
+ }
1214
+ :where([uc-cloud-image-editor]) uc-icon svg {
1215
+ width: calc(var(--uc-button-size) / 2);
1216
+ height: calc(var(--uc-button-size) / 2);
1217
+ }
1218
+ }
1219
+
1220
+ /* src/blocks/CloudImageEditor/src/css/index.css */
1221
+
1222
+ /* src/blocks/CloudImageEditor/index.css */
1223
+
1224
+ /* src/blocks/CloudImageEditorActivity/cloud-image-editor-activity.css */
1225
+ @layer uc.components {
1226
+ uc-cloud-image-editor-activity {
1227
+ position: relative;
1228
+ display: flex;
1229
+ width: 100%;
1230
+ height: 100%;
1231
+ overflow: hidden;
1232
+ background-color: var(--uc-background);
1233
+ }
1234
+ [uc-modal] > dialog:has(uc-cloud-image-editor-activity[active]) {
1235
+ width: 100%;
1236
+ height: 100%;
1237
+ }
1238
+ }
1239
+
1240
+ /* src/blocks/Config/config.css */
1241
+ @layer uc.components {
1242
+ uc-config {
1243
+ display: none;
1244
+ }
1245
+ }
1246
+
1247
+ /* src/blocks/Copyright/copyright.css */
1248
+ @layer uc.components {
1249
+ uc-copyright {
1250
+ display: flex;
1251
+ width: 100%;
1252
+ justify-content: center;
1253
+ }
1254
+ uc-copyright .uc-credits {
1255
+ all: unset;
1256
+ position: absolute;
1257
+ bottom: 12px;
1258
+ background-color: var(--uc-background);
1259
+ padding: 2px 5px;
1260
+ border-radius: 6px;
1261
+ color: var(--uc-muted-foreground);
1262
+ font-weight: normal;
1263
+ font-size: 12px;
1264
+ opacity: 0.9;
1265
+ cursor: pointer;
1266
+ transition: opacity var(--uc-transition), background-color var(--uc-transition);
1267
+ }
1268
+ uc-copyright .uc-credits:focus-visible {
1269
+ outline: 1px auto Highlight;
1270
+ outline: 1px auto -webkit-focus-ring-color;
1271
+ }
1272
+ uc-copyright .uc-credits:hover {
1273
+ opacity: 1;
1274
+ background-color: var(--uc-muted);
1275
+ }
1276
+ }
1277
+
1278
+ /* src/blocks/DropArea/drop-area.css */
1279
+ @layer uc.components {
1280
+ :where([uc-drop-area]) {
1281
+ padding: 2px;
1282
+ overflow: hidden;
1283
+ border: 1px dashed var(--uc-border);
1284
+ border-radius: calc(var(--uc-radius) * 1.75);
1285
+ transition: border var(--uc-transition), border-radius var(--uc-transition);
1286
+ }
1287
+ :where([uc-drop-area]),
1288
+ :where([uc-drop-area]) .uc-content-wrapper {
1289
+ display: flex;
1290
+ align-items: center;
1291
+ justify-content: center;
1292
+ width: 100%;
1293
+ height: 100%;
1294
+ }
1295
+ :where([uc-drop-area]) .uc-text {
1296
+ position: relative;
1297
+ margin: var(--uc-padding);
1298
+ color: var(--uc-muted-foreground);
1299
+ transition: color var(--uc-transition);
1300
+ }
1301
+ :where([uc-drop-area])[ghost][drag-state=inactive] {
1302
+ display: none;
1303
+ }
1304
+ :where([uc-drop-area])[ghost]:not([fullscreen]):is([drag-state=active], [drag-state=near], [drag-state=over]) {
1305
+ background: var(--uc-background);
1306
+ }
1307
+ :where([uc-drop-area]):is([drag-state=active], [drag-state=near], [drag-state=over], :hover) {
1308
+ background: var(--uc-primary-transparent);
1309
+ border-color: var(--uc-primary-transparent);
1310
+ }
1311
+ :where(.uc-contrast) :where([uc-drop-area]):is([drag-state=active], [drag-state=near], [drag-state=over], :hover) {
1312
+ color: var(--uc-foreground);
1313
+ background: transparent;
1314
+ border-color: var(--uc-foreground);
1315
+ border-width: 2px;
1316
+ border-style: solid;
1317
+ }
1318
+ :where([uc-drop-area]):is([drag-state=active], [drag-state=near]) {
1319
+ opacity: 1;
1320
+ }
1321
+ :where([uc-drop-area])[drag-state=over] {
1322
+ border-color: var(--uc-primary);
1323
+ opacity: 1;
1324
+ }
1325
+ :where([uc-drop-area])[with-icon] {
1326
+ min-height: 180px;
1327
+ }
1328
+ :where([uc-drop-area])[with-icon] .uc-content-wrapper {
1329
+ display: flex;
1330
+ flex-direction: column;
1331
+ }
1332
+ :where([uc-drop-area])[with-icon] .uc-text {
1333
+ color: var(--uc-foreground);
1334
+ font-weight: 500;
1335
+ font-size: 1.1em;
1336
+ }
1337
+ :where([uc-drop-area])[with-icon] .uc-icon-container {
1338
+ position: relative;
1339
+ width: 64px;
1340
+ height: 64px;
1341
+ margin: var(--uc-padding);
1342
+ overflow: hidden;
1343
+ color: var(--uc-foreground);
1344
+ background-color: var(--uc-muted);
1345
+ border-radius: 50%;
1346
+ transition: color var(--uc-transition), background-color var(--uc-transition);
1347
+ }
1348
+ :where([uc-drop-area])[with-icon] uc-icon {
1349
+ position: absolute;
1350
+ width: 32px;
1351
+ height: 32px;
1352
+ top: calc(50% - 16px);
1353
+ left: calc(50% - 16px);
1354
+ transition: transform var(--uc-transition);
1355
+ }
1356
+ :where([uc-drop-area])[with-icon] uc-icon:last-child {
1357
+ transform: translateY(48px);
1358
+ }
1359
+ :where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-icon-container,
1360
+ :where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-text {
1361
+ color: var(--uc-foreground);
1362
+ }
1363
+ :where([uc-drop-area])[with-icon]:hover .uc-icon-container {
1364
+ background-color: var(--uc-primary-transparent);
1365
+ }
1366
+ :where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-icon-container {
1367
+ background-color: var(--uc-muted);
1368
+ }
1369
+ :where([uc-drop-area])[with-icon] > .uc-content-wrapper:is([drag-state=active], [drag-state=near], [drag-state=over]) .uc-icon-container {
1370
+ color: var(--uc-primary-foreground);
1371
+ background-color: var(--uc-primary);
1372
+ }
1373
+ :where([uc-drop-area])[with-icon] > .uc-content-wrapper:is([drag-state=active], [drag-state=near], [drag-state=over]) .uc-text {
1374
+ color: var(--uc-foreground);
1375
+ }
1376
+ :where(.uc-contrast) :where([uc-drop-area])[with-icon] > .uc-content-wrapper:is([drag-state=active], [drag-state=near], [drag-state=over]) .uc-text {
1377
+ color: var(--uc-foreground);
1378
+ }
1379
+ :where([uc-drop-area])[with-icon] > .uc-content-wrapper:is([drag-state=active], [drag-state=near], [drag-state=over]) uc-icon:first-child {
1380
+ transform: translateY(-48px);
1381
+ }
1382
+ :where([uc-drop-area])[with-icon] > .uc-content-wrapper:is([drag-state=active], [drag-state=near], [drag-state=over]) uc-icon:last-child {
1383
+ transform: translateY(0);
1384
+ }
1385
+ :where([uc-drop-area])[with-icon] > .uc-content-wrapper[drag-state=near] uc-icon:last-child {
1386
+ transform: scale(1.3);
1387
+ }
1388
+ :where([uc-drop-area])[with-icon] > .uc-content-wrapper[drag-state=over] uc-icon:last-child {
1389
+ transform: scale(1.5);
1390
+ }
1391
+ :where([uc-drop-area])[fullscreen] {
1392
+ position: fixed;
1393
+ top: 0;
1394
+ right: 0;
1395
+ bottom: 0;
1396
+ left: 0;
1397
+ z-index: 2147483647;
1398
+ display: flex;
1399
+ align-items: center;
1400
+ justify-content: center;
1401
+ width: calc(100vw - var(--uc-padding) * 2);
1402
+ height: calc(100vh - var(--uc-padding) * 2);
1403
+ margin: var(--uc-padding);
1404
+ }
1405
+ :where([uc-drop-area])[fullscreen] .uc-content-wrapper {
1406
+ width: 100%;
1407
+ max-width: calc(var(--uc-dialog-width) * 0.8);
1408
+ height: 180px;
1409
+ color: var(--uc-foreground);
1410
+ background-color: var(--uc-background);
1411
+ border-radius: calc(var(--uc-radius) * 1.75);
1412
+ box-shadow: var(--uc-dialog-shadow);
1413
+ transition:
1414
+ color var(--uc-transition),
1415
+ background-color var(--uc-transition),
1416
+ box-shadow var(--uc-transition),
1417
+ border-radius var(--uc-transition),
1418
+ transform var(--uc-transition);
1419
+ }
1420
+ :where([uc-drop-area])[with-icon][fullscreen][drag-state=active] > .uc-content-wrapper,
1421
+ :where([uc-drop-area])[with-icon][fullscreen][drag-state=near] > .uc-content-wrapper {
1422
+ transform: translateY(10px);
1423
+ opacity: 0;
1424
+ }
1425
+ :where([uc-drop-area])[with-icon][fullscreen][drag-state=over] > .uc-content-wrapper {
1426
+ transform: translateY(0px);
1427
+ opacity: 1;
1428
+ }
1429
+ :is(:where([uc-drop-area])[with-icon][fullscreen]) > .uc-content-wrapper uc-icon:first-child {
1430
+ transform: translateY(-48px);
1431
+ }
1432
+ :where([uc-drop-area])[clickable] {
1433
+ cursor: pointer;
1434
+ }
1435
+ }
1436
+
1437
+ /* src/blocks/ExternalSource/external-source.css */
1438
+ @layer uc.components {
1439
+ uc-external-source {
1440
+ display: flex;
1441
+ flex-direction: column;
1442
+ width: 100%;
1443
+ height: 100%;
1444
+ background-color: var(--uc-background);
1445
+ overflow: hidden;
1446
+ position: relative;
1447
+ }
1448
+ [uc-modal] > dialog:has(uc-external-source[active]) {
1449
+ width: 100%;
1450
+ height: 100%;
1451
+ }
1452
+ uc-external-source > .uc-content {
1453
+ position: relative;
1454
+ display: grid;
1455
+ flex: 1;
1456
+ grid-template-rows: 1fr min-content;
1457
+ }
1458
+ uc-external-source iframe {
1459
+ display: block;
1460
+ width: 100%;
1461
+ height: 100%;
1462
+ border: none;
1463
+ }
1464
+ uc-external-source .uc-iframe-wrapper {
1465
+ overflow: hidden;
1466
+ }
1467
+ uc-external-source .uc-toolbar {
1468
+ display: flex;
1469
+ width: 100%;
1470
+ grid-gap: var(--uc-padding);
1471
+ align-items: center;
1472
+ justify-content: space-between;
1473
+ padding: var(--uc-padding);
1474
+ border-top: 1px solid var(--uc-border);
1475
+ }
1476
+ uc-external-source .uc-back-btn {
1477
+ padding-left: 0;
1478
+ }
1479
+ uc-external-source .uc-selection-status-box {
1480
+ color: var(--uc-foreground);
1481
+ display: flex;
1482
+ flex-direction: column;
1483
+ align-items: center;
1484
+ justify-content: center;
1485
+ }
1486
+ uc-external-source .uc-selection-status-box button {
1487
+ color: var(--uc-primary);
1488
+ height: auto;
1489
+ padding: 0;
1490
+ background: none;
1491
+ }
1492
+ uc-external-source .uc-selection-status-box button:hover {
1493
+ text-decoration: underline;
1494
+ }
1495
+ uc-external-source uc-activity-header {
1496
+ position: absolute;
1497
+ width: 100%;
1498
+ justify-content: flex-end;
1499
+ z-index: 1;
1500
+ left: 0;
1501
+ top: 0;
1502
+ right: 0;
1503
+ pointer-events: none;
1504
+ }
1505
+ uc-external-source uc-activity-header .uc-close-btn {
1506
+ pointer-events: auto;
1507
+ }
1508
+ uc-external-source .uc-done-btn > span.uc-hidden {
1509
+ visibility: hidden;
1510
+ pointer-events: none;
1511
+ }
1512
+ uc-external-source .uc-done-btn > uc-spinner {
1513
+ position: absolute;
1514
+ width: 100%;
1515
+ height: 100%;
1516
+ display: flex;
1517
+ align-items: center;
1518
+ justify-content: center;
1519
+ }
1520
+ }
1521
+
1522
+ /* src/blocks/FileItem/file-item.css */
1523
+ @layer uc.components {
1524
+ uc-file-item {
1525
+ --uc-file-item-gap: 4px;
1526
+ --uc-file-item-height: calc(var(--uc-preview-size) + var(--uc-padding) * 2 + var(--uc-file-item-gap));
1527
+ display: block;
1528
+ overflow: hidden;
1529
+ min-height: var(--uc-file-item-height);
1530
+ }
1531
+ uc-file-item:last-of-type {
1532
+ --uc-file-item-gap: 0;
1533
+ }
1534
+ uc-file-item > .uc-inner {
1535
+ position: relative;
1536
+ display: grid;
1537
+ grid-template-columns: var(--uc-preview-size) 1fr max-content;
1538
+ gap: 2px;
1539
+ align-items: center;
1540
+ margin-bottom: var(--uc-file-item-gap);
1541
+ padding: var(--uc-padding);
1542
+ overflow: hidden;
1543
+ font-size: 0.925em;
1544
+ background-color: var(--uc-muted);
1545
+ border-radius: var(--uc-radius);
1546
+ transition: background-color var(--uc-transition);
1547
+ }
1548
+ uc-file-item > .uc-inner[focused] {
1549
+ background-color: transparent;
1550
+ }
1551
+ uc-file-item > .uc-inner[uploading] .uc-edit-btn {
1552
+ display: none;
1553
+ }
1554
+ uc-file-item > :where(.uc-inner[failed], .uc-inner[limit-overflow]) {
1555
+ background-color: var(--uc-destructive);
1556
+ }
1557
+ uc-file-item .uc-thumb {
1558
+ position: relative;
1559
+ display: inline-flex;
1560
+ width: var(--uc-preview-size);
1561
+ height: var(--uc-preview-size);
1562
+ background-color: var(--uc-secondary);
1563
+ background-position: center center;
1564
+ background-repeat: no-repeat;
1565
+ background-size: cover;
1566
+ border-radius: var(--uc-radius);
1567
+ }
1568
+ uc-file-item .uc-file-name-wrapper {
1569
+ text-align: left;
1570
+ display: flex;
1571
+ flex-direction: column;
1572
+ align-items: flex-start;
1573
+ justify-content: center;
1574
+ max-width: 100%;
1575
+ padding-right: var(--uc-padding);
1576
+ padding-left: var(--uc-padding);
1577
+ overflow: hidden;
1578
+ color: var(--uc-muted-foreground);
1579
+ }
1580
+ uc-file-item .uc-file-name {
1581
+ max-width: 100%;
1582
+ overflow: hidden;
1583
+ white-space: nowrap;
1584
+ text-overflow: ellipsis;
1585
+ }
1586
+ uc-file-item .uc-file-error {
1587
+ display: none;
1588
+ color: var(--uc-destructive-foreground);
1589
+ font-size: 0.85em;
1590
+ z-index: 2;
1591
+ }
1592
+ uc-file-item button.uc-remove-btn,
1593
+ uc-file-item button.uc-edit-btn {
1594
+ color: var(--uc-muted-foreground);
1595
+ }
1596
+ uc-file-item button svg {
1597
+ pointer-events: none;
1598
+ }
1599
+ uc-file-item button.uc-upload-btn {
1600
+ display: none;
1601
+ }
1602
+ uc-file-item .uc-badge {
1603
+ position: absolute;
1604
+ bottom: 2px;
1605
+ right: 2px;
1606
+ width: 14px;
1607
+ height: 14px;
1608
+ color: var(--uc-background);
1609
+ background-color: var(--uc-foreground);
1610
+ border-radius: 50%;
1611
+ transform: scale(0.3);
1612
+ opacity: 0;
1613
+ transition: opacity var(--uc-transition), transform var(--uc-transition);
1614
+ display: flex;
1615
+ justify-content: center;
1616
+ align-items: center;
1617
+ }
1618
+ uc-file-item > .uc-inner:where([failed], [limit-overflow], [finished]) .uc-badge {
1619
+ transform: scale(1);
1620
+ opacity: 1;
1621
+ }
1622
+ uc-file-item > .uc-inner:where([failed], [limit-overflow]) .uc-badge {
1623
+ background-color: var(--uc-destructive-foreground);
1624
+ }
1625
+ uc-file-item > .uc-inner:where([failed], [limit-overflow]) .uc-file-error {
1626
+ display: block;
1627
+ }
1628
+ uc-file-item .uc-badge uc-icon,
1629
+ uc-file-item .uc-badge uc-icon svg {
1630
+ width: 100%;
1631
+ height: 100%;
1632
+ }
1633
+ uc-file-item .uc-progress-bar {
1634
+ opacity: 0.7;
1635
+ top: calc(100% - 2px);
1636
+ height: 2px;
1637
+ }
1638
+ :where(.uc-contrast) uc-file-item .uc-progress-bar {
1639
+ opacity: 1;
1640
+ }
1641
+ uc-file-item .uc-file-actions {
1642
+ display: flex;
1643
+ gap: 2px;
1644
+ align-items: center;
1645
+ justify-content: center;
1646
+ }
1647
+ uc-file-item[mode=grid] {
1648
+ overflow: visible;
1649
+ min-height: initial;
1650
+ }
1651
+ uc-file-item[mode=grid] .uc-inner {
1652
+ height: 100%;
1653
+ grid-template-columns: 1fr;
1654
+ grid-template-rows: 1fr max-content;
1655
+ padding: 0;
1656
+ background-color: transparent;
1657
+ margin-bottom: 0;
1658
+ border-radius: 0;
1659
+ }
1660
+ uc-file-item[mode=grid] .uc-inner[failed] .uc-badge {
1661
+ display: none;
1662
+ }
1663
+ uc-file-item[mode=grid] .uc-thumb {
1664
+ width: 100%;
1665
+ height: 100%;
1666
+ }
1667
+ uc-file-item[mode=grid] .uc-badge {
1668
+ right: var(--uc-padding);
1669
+ bottom: var(--uc-padding);
1670
+ }
1671
+ uc-file-item[mode=grid] .uc-file-name-wrapper {
1672
+ padding: 0;
1673
+ }
1674
+ uc-file-item[mode=grid] .uc-file-name:not([hidden]) + .uc-file-error {
1675
+ bottom: calc(var(--uc-padding) + var(--uc-font-size));
1676
+ }
1677
+ uc-file-item[mode=grid] .uc-file-error {
1678
+ position: absolute;
1679
+ background-color: var(--uc-destructive-foreground);
1680
+ border-radius: var(--uc-radius);
1681
+ color: var(--uc-background);
1682
+ bottom: var(--uc-padding);
1683
+ left: var(--uc-padding);
1684
+ right: var(--uc-padding);
1685
+ padding: calc(var(--uc-padding) / 2) var(--uc-padding);
1686
+ }
1687
+ uc-file-item[mode=grid] .uc-file-hint {
1688
+ position: absolute;
1689
+ background-color: var(--uc-background);
1690
+ border-radius: var(--uc-radius);
1691
+ color: var(--uc-foreground);
1692
+ bottom: calc(var(--uc-padding) * 2);
1693
+ left: var(--uc-padding);
1694
+ right: var(--uc-padding);
1695
+ padding: calc(var(--uc-padding) / 2) var(--uc-padding);
1696
+ }
1697
+ uc-file-item[mode=grid] .uc-file-actions {
1698
+ position: absolute;
1699
+ top: var(--uc-padding);
1700
+ right: var(--uc-padding);
1701
+ }
1702
+ uc-file-item[mode=grid] button {
1703
+ background-color: var(--uc-background);
1704
+ }
1705
+ uc-file-item[mode=grid] button:hover {
1706
+ background-color: var(--uc-muted);
1707
+ }
1708
+ uc-file-item[mode=grid] .uc-progress-bar {
1709
+ width: initial;
1710
+ height: 4px !important;
1711
+ top: initial !important;
1712
+ bottom: var(--uc-padding);
1713
+ left: var(--uc-padding);
1714
+ right: var(--uc-padding);
1715
+ border-radius: var(--uc-radius);
1716
+ z-index: 1;
1717
+ transition: background-color 0.3s, opacity 0.3s;
1718
+ background-color: var(--uc-background);
1719
+ }
1720
+ uc-file-item[mode=grid] .uc-progress-bar :is(.uc-fake-progress, .uc-progress) {
1721
+ background-color: var(--uc-primary);
1722
+ }
1723
+ uc-file-item[mode=grid] .uc-progress-bar[hasfilename] {
1724
+ bottom: calc(var(--uc-padding) + var(--uc-font-size));
1725
+ }
1726
+ }
1727
+
1728
+ /* src/blocks/Icon/icon.css */
1729
+ @layer uc.components {
1730
+ uc-icon {
1731
+ display: inline-flex;
1732
+ align-items: center;
1733
+ justify-content: center;
1734
+ width: var(--uc-button-size);
1735
+ height: var(--uc-button-size);
1736
+ }
1737
+ uc-icon svg {
1738
+ width: calc(var(--uc-button-size) / 2);
1739
+ height: calc(var(--uc-button-size) / 2);
1740
+ overflow: visible;
1741
+ }
1742
+ }
1743
+
1744
+ /* src/blocks/Modal/modal.css */
1745
+ @layer uc.components {
1746
+ @supports selector(dialog::backdrop) {
1747
+ :where([uc-modal]) > dialog::backdrop {
1748
+ background-color: oklch(0 0 0 / 0.1);
1749
+ }
1750
+ :where([uc-modal])[strokes] > dialog::backdrop {
1751
+ background-image: var(--modal-backdrop-background-image);
1752
+ }
1753
+ }
1754
+ :where([uc-modal]) > dialog[open] {
1755
+ transform: translateY(0px);
1756
+ visibility: visible;
1757
+ opacity: 1;
1758
+ }
1759
+ :where([uc-modal]) > dialog:not([open]) {
1760
+ transform: translateY(20px);
1761
+ visibility: hidden;
1762
+ opacity: 0;
1763
+ }
1764
+ :where([uc-modal]) > dialog {
1765
+ display: flex;
1766
+ flex-direction: column;
1767
+ width: min(var(--uc-dialog-width), 100%);
1768
+ max-width: min(calc(100% - var(--uc-padding) * 2), var(--uc-dialog-max-width));
1769
+ min-height: var(--uc-button-size);
1770
+ max-height: min(calc(100% - var(--uc-padding) * 2), var(--uc-dialog-max-height));
1771
+ margin: auto;
1772
+ padding: 0;
1773
+ overflow: hidden;
1774
+ background-color: var(--uc-background);
1775
+ border: 0;
1776
+ border-radius: calc(var(--uc-radius) * 1.75);
1777
+ box-shadow: var(--uc-dialog-shadow);
1778
+ transition: transform 0.4s ease, opacity 0.4s ease;
1779
+ }
1780
+ :where(.uc-contrast) :where([uc-modal]) > dialog {
1781
+ outline: 1px solid var(--uc-border);
1782
+ }
1783
+ }
1784
+
1785
+ /* src/blocks/ProgressBar/progress-bar.css */
1786
+ @layer uc.components {
1787
+ uc-progress-bar {
1788
+ --l-progress-value: 0;
1789
+ position: absolute;
1790
+ top: 0;
1791
+ bottom: 0;
1792
+ left: 0;
1793
+ width: 100%;
1794
+ height: 100%;
1795
+ overflow: hidden;
1796
+ pointer-events: none;
1797
+ transition: opacity 0.3s;
1798
+ opacity: 1;
1799
+ }
1800
+ uc-progress-bar.uc-progress-bar--hidden {
1801
+ opacity: 0;
1802
+ }
1803
+ uc-progress-bar .uc-progress {
1804
+ position: absolute;
1805
+ width: calc(var(--l-progress-value) * 1%);
1806
+ height: 100%;
1807
+ background-color: var(--uc-primary);
1808
+ transform: translateX(0);
1809
+ opacity: 1;
1810
+ transition: width 0.6s, opacity 0.3s;
1811
+ }
1812
+ uc-progress-bar .uc-progress--hidden {
1813
+ opacity: 0;
1814
+ transition: opacity 0.3s;
1815
+ }
1816
+ uc-progress-bar .uc-fake-progress {
1817
+ --l-fake-progress-width: 30;
1818
+ position: absolute;
1819
+ width: calc(var(--l-fake-progress-width) * 1%);
1820
+ height: 100%;
1821
+ background-color: var(--uc-primary);
1822
+ animation: fake-progress-animation 1s ease-in-out infinite;
1823
+ opacity: 1;
1824
+ transition: opacity 0.3s;
1825
+ z-index: 1;
1826
+ }
1827
+ uc-progress-bar .uc-fake-progress--hidden {
1828
+ opacity: 0;
1829
+ animation: none;
1830
+ }
1831
+ @keyframes fake-progress-animation {
1832
+ from {
1833
+ transform: translateX(-100%);
1834
+ }
1835
+ to {
1836
+ transform: translateX(calc(100 / var(--l-fake-progress-width) * 100 * 1%));
1837
+ }
1838
+ }
1839
+ }
1840
+
1841
+ /* src/blocks/ProgressBarCommon/progress-bar-common.css */
1842
+ @layer uc.components {
1843
+ uc-progress-bar-common {
1844
+ position: fixed;
1845
+ right: 0;
1846
+ bottom: 0;
1847
+ left: 0;
1848
+ z-index: 10000;
1849
+ display: block;
1850
+ height: 10px;
1851
+ background-color: var(--uc-background);
1852
+ transition: opacity 0.3s;
1853
+ }
1854
+ uc-progress-bar-common:not([active]) {
1855
+ opacity: 0;
1856
+ pointer-events: none;
1857
+ }
1858
+ }
1859
+
1860
+ /* src/blocks/Select/select.css */
1861
+ @layer uc.components {
1862
+ uc-select {
1863
+ display: inline-flex;
1864
+ }
1865
+ uc-select select {
1866
+ position: relative;
1867
+ display: inline-flex;
1868
+ align-items: center;
1869
+ justify-content: center;
1870
+ height: var(--uc-button-size);
1871
+ padding: 0 14px;
1872
+ font-size: 1em;
1873
+ font-family: inherit;
1874
+ white-space: nowrap;
1875
+ border: none;
1876
+ border-radius: var(--uc-radius);
1877
+ cursor: pointer;
1878
+ user-select: none;
1879
+ transition: background-color var(--uc-transition);
1880
+ color: var(--uc-secondary-foreground);
1881
+ background-color: var(--uc-secondary);
1882
+ }
1883
+ }
1884
+
1885
+ /* src/blocks/SimpleBtn/simple-btn.css */
1886
+ @layer uc.components {
1887
+ :where([uc-simple-btn]) {
1888
+ position: relative;
1889
+ display: inline-flex;
1890
+ }
1891
+ :where([uc-simple-btn]) button {
1892
+ height: auto;
1893
+ gap: 0.5em;
1894
+ padding: var(--uc-simple-btn-padding);
1895
+ background-color: var(--uc-simple-btn);
1896
+ color: var(--uc-simple-btn-foreground);
1897
+ font-size: var(--uc-simple-btn-font-size);
1898
+ font-family: var(--uc-simple-btn-font-family);
1899
+ }
1900
+ :where([uc-simple-btn]) button uc-icon {
1901
+ width: auto;
1902
+ height: auto;
1903
+ }
1904
+ :where([uc-simple-btn]) button uc-icon svg {
1905
+ width: 0.9em;
1906
+ height: 0.9em;
1907
+ }
1908
+ :where([uc-simple-btn]) button:hover {
1909
+ background-color: var(--uc-simple-btn-hover);
1910
+ }
1911
+ :where([uc-simple-btn]) > uc-drop-area {
1912
+ display: contents;
1913
+ }
1914
+ :where([uc-simple-btn]) .uc-visual-drop-area {
1915
+ position: absolute;
1916
+ top: 0px;
1917
+ left: 0px;
1918
+ display: flex;
1919
+ align-items: center;
1920
+ justify-content: center;
1921
+ width: 100%;
1922
+ height: 100%;
1923
+ padding: var(--uc-simple-btn-padding);
1924
+ background-color: transparent;
1925
+ color: transparent;
1926
+ font-size: var(--uc-simple-btn-font-size);
1927
+ border: 1px dashed var(--uc-simple-btn-foreground);
1928
+ border-radius: inherit;
1929
+ opacity: 0;
1930
+ transition: opacity var(--uc-transition);
1931
+ }
1932
+ :where([uc-simple-btn]) > uc-drop-area[drag-state=active] .uc-visual-drop-area {
1933
+ opacity: 1;
1934
+ }
1935
+ :where([uc-simple-btn]) > uc-drop-area[drag-state=inactive] .uc-visual-drop-area {
1936
+ opacity: 0;
1937
+ }
1938
+ :where([uc-simple-btn]) > uc-drop-area[drag-state=near] .uc-visual-drop-area {
1939
+ opacity: 1;
1940
+ }
1941
+ :where([uc-simple-btn]) > uc-drop-area[drag-state=over] .uc-visual-drop-area {
1942
+ opacity: 1;
1943
+ }
1944
+ }
1945
+
1946
+ /* src/blocks/SourceBtn/source-btn.css */
1947
+ @layer uc.components {
1948
+ uc-source-btn > button {
1949
+ display: flex;
1950
+ align-items: center;
1951
+ margin-bottom: 2px;
1952
+ padding: 2px var(--uc-padding);
1953
+ color: var(--uc-foreground);
1954
+ border-radius: var(--uc-radius);
1955
+ cursor: pointer;
1956
+ transition: background-color var(--uc-transition), color var(--uc-transition);
1957
+ user-select: none;
1958
+ width: 100%;
1959
+ background-color: unset;
1960
+ height: unset;
1961
+ }
1962
+ uc-source-btn:last-child > button {
1963
+ margin-bottom: 0;
1964
+ }
1965
+ uc-source-btn > button:hover {
1966
+ background-color: var(--uc-primary-transparent);
1967
+ }
1968
+ :where(.uc-contrast) uc-source-btn > button:hover {
1969
+ background-color: var(--uc-secondary);
1970
+ color: var(--uc-foreground);
1971
+ }
1972
+ uc-source-btn uc-icon {
1973
+ display: inline-flex;
1974
+ flex-grow: 1;
1975
+ justify-content: center;
1976
+ min-width: var(--uc-button-size);
1977
+ margin-right: var(--uc-padding);
1978
+ opacity: 0.8;
1979
+ }
1980
+ :where(.uc-contrast) uc-source-btn uc-icon {
1981
+ opacity: 1;
1982
+ }
1983
+ uc-source-btn .uc-txt {
1984
+ display: flex;
1985
+ align-items: center;
1986
+ box-sizing: border-box;
1987
+ width: 100%;
1988
+ height: var(--uc-button-size);
1989
+ padding: 0;
1990
+ white-space: nowrap;
1991
+ border: none;
1992
+ }
1993
+ }
1994
+
1995
+ /* src/blocks/Spinner/spinner.css */
1996
+ @layer uc.components {
1997
+ @keyframes uc-spinner-keyframes {
1998
+ from {
1999
+ transform: rotate(0deg);
2000
+ }
2001
+ to {
2002
+ transform: rotate(360deg);
2003
+ }
2004
+ }
2005
+ .uc-spinner {
2006
+ width: 1em;
2007
+ height: 1em;
2008
+ border: solid 2px transparent;
2009
+ border-top-color: currentColor;
2010
+ border-left-color: currentColor;
2011
+ border-radius: 50%;
2012
+ animation: uc-spinner-keyframes 400ms linear infinite;
2013
+ }
2014
+ }
2015
+
2016
+ /* src/blocks/StartFrom/start-from.css */
2017
+ @layer uc.components {
2018
+ uc-start-from {
2019
+ display: block;
2020
+ overflow-y: auto;
2021
+ }
2022
+ uc-start-from .uc-content {
2023
+ display: grid;
2024
+ grid-auto-flow: row;
2025
+ gap: calc(var(--uc-padding) * 2);
2026
+ width: 100%;
2027
+ height: 100%;
2028
+ padding: calc(var(--uc-padding) * 2);
2029
+ background-color: var(--uc-background);
2030
+ }
2031
+ [uc-modal] > dialog:has(uc-start-from[active]) {
2032
+ width: var(--uc-dialog-width);
2033
+ }
2034
+ [uc-modal] uc-start-from uc-drop-area {
2035
+ border-radius: var(--uc-radius);
2036
+ }
2037
+ @media only screen and (max-width: 430px) {
2038
+ [uc-modal] uc-start-from uc-drop-area {
2039
+ display: none;
2040
+ }
2041
+ }
2042
+ }
2043
+
2044
+ /* src/blocks/Thumb/thumb.css */
2045
+ @layer uc.components {
2046
+ uc-thumb {
2047
+ width: 100%;
2048
+ height: 100%;
2049
+ }
2050
+ .uc-thumb {
2051
+ position: relative;
2052
+ overflow: hidden;
2053
+ width: 100%;
2054
+ height: 100%;
2055
+ }
2056
+ .uc-thumb__img {
2057
+ width: 100%;
2058
+ height: 100%;
2059
+ object-fit: cover;
2060
+ display: block;
2061
+ }
2062
+ }
2063
+
2064
+ /* src/blocks/UploadList/upload-list.css */
2065
+ @layer uc.components {
2066
+ uc-upload-list {
2067
+ position: relative;
2068
+ display: flex;
2069
+ flex-direction: column;
2070
+ width: 100%;
2071
+ height: max-content;
2072
+ overflow: hidden;
2073
+ background-color: var(--uc-background);
2074
+ transition: opacity var(--uc-transition);
2075
+ }
2076
+ uc-upload-list .uc-no-files {
2077
+ height: 32px;
2078
+ padding: 20px;
2079
+ }
2080
+ uc-upload-list .uc-files {
2081
+ display: block;
2082
+ flex: 1;
2083
+ min-height: 32px;
2084
+ padding: 0 var(--uc-padding);
2085
+ overflow: auto;
2086
+ }
2087
+ uc-upload-list .uc-files-wrapper {
2088
+ display: contents;
2089
+ }
2090
+ uc-upload-list .uc-toolbar {
2091
+ display: flex;
2092
+ gap: 4px;
2093
+ justify-content: space-between;
2094
+ padding: var(--uc-padding);
2095
+ background-color: var(--uc-background);
2096
+ }
2097
+ uc-upload-list .uc-toolbar-spacer {
2098
+ flex: 1;
2099
+ }
2100
+ uc-upload-list uc-drop-area {
2101
+ position: absolute;
2102
+ top: 0;
2103
+ left: 0;
2104
+ width: calc(100% - var(--uc-padding) * 2);
2105
+ height: calc(100% - var(--uc-padding) * 2);
2106
+ margin: var(--uc-padding);
2107
+ border-radius: var(--uc-radius);
2108
+ }
2109
+ uc-upload-list uc-activity-header > .uc-header-text {
2110
+ padding: 0 var(--uc-padding);
2111
+ }
2112
+ uc-upload-list .uc-common-error {
2113
+ border-radius: var(--uc-radius);
2114
+ color: var(--uc-destructive-foreground);
2115
+ background-color: var(--uc-destructive);
2116
+ display: flex;
2117
+ align-items: center;
2118
+ justify-content: center;
2119
+ padding: var(--uc-padding);
2120
+ margin: 4px var(--uc-padding) 0 var(--uc-padding);
2121
+ font-size: 0.925em;
2122
+ }
2123
+ uc-upload-list .uc-add-more-btn uc-icon {
2124
+ display: none;
2125
+ }
2126
+ uc-upload-list[mode=grid] .uc-files {
2127
+ display: flex;
2128
+ flex-wrap: wrap;
2129
+ gap: var(--uc-grid-gap);
2130
+ }
2131
+ uc-upload-list .uc-files .uc-add-more-btn,
2132
+ uc-upload-list[mode=grid] uc-file-item {
2133
+ flex: 0 0 calc((100% - (var(--uc-grid-gap) * (var(--uc-grid-col) - 1))) / var(--uc-grid-col));
2134
+ max-width: calc((100% - (var(--uc-grid-gap) * (var(--uc-grid-col) - 1))) / var(--uc-grid-col));
2135
+ height: var(--uc-grid-preview-image-height);
2136
+ aspect-ratio: var(--uc-grid-aspect-ratio);
2137
+ }
2138
+ uc-upload-list .uc-files .uc-add-more-btn {
2139
+ display: none;
2140
+ }
2141
+ }
2142
+
2143
+ /* src/blocks/UrlSource/url-source.css */
2144
+ @layer uc.components {
2145
+ uc-url-source {
2146
+ display: block;
2147
+ background-color: var(--uc-background);
2148
+ }
2149
+ uc-url-source > .uc-content {
2150
+ display: grid;
2151
+ grid-gap: 4px;
2152
+ grid-template-columns: 1fr min-content;
2153
+ padding: var(--uc-padding);
2154
+ padding-top: 0;
2155
+ }
2156
+ uc-url-source .uc-url-input {
2157
+ display: flex;
2158
+ }
2159
+ }
2160
+
2161
+ /* src/solutions/file-uploader/inline/index.css */
2162
+ @layer uc.solutions {
2163
+ [uc-file-uploader-inline] uc-start-from {
2164
+ height: 100%;
2165
+ container-type: inline-size;
2166
+ }
2167
+ [uc-file-uploader-inline] {
2168
+ --cfg-done-activity: "start-from";
2169
+ --cfg-init-activity: "start-from";
2170
+ flex: 1;
2171
+ }
2172
+ [uc-file-uploader-inline] uc-activity-header::after {
2173
+ width: var(--uc-button-size);
2174
+ height: var(--uc-button-size);
2175
+ content: "";
2176
+ }
2177
+ [uc-file-uploader-inline] uc-activity-header .uc-close-btn {
2178
+ display: none;
2179
+ }
2180
+ [uc-file-uploader-inline] uc-copyright .uc-credits {
2181
+ position: static;
2182
+ }
2183
+ @container (min-width: 500px) {
2184
+ [uc-file-uploader-inline] uc-start-from .uc-content {
2185
+ grid-template-columns: 1fr max-content;
2186
+ height: 100%;
2187
+ }
2188
+ [uc-file-uploader-inline] uc-start-from uc-copyright {
2189
+ grid-column: 2;
2190
+ }
2191
+ [uc-file-uploader-inline] uc-start-from uc-drop-area {
2192
+ grid-row: span 3;
2193
+ }
2194
+ [uc-file-uploader-inline] uc-start-from:has(uc-copyright[hidden]) uc-drop-area {
2195
+ grid-row: span 2;
2196
+ }
2197
+ [uc-file-uploader-inline] uc-start-from:has(.uc-cancel-btn[hidden]) uc-drop-area {
2198
+ grid-row: span 2;
2199
+ }
2200
+ [uc-file-uploader-inline] uc-start-from:has(uc-copyright[hidden]):has(.uc-cancel-btn[hidden]) uc-drop-area {
2201
+ grid-row: span 1;
2202
+ }
2203
+ }
2204
+ }
2205
+
2206
+ /* src/solutions/file-uploader/minimal/index.css */
2207
+ @layer uc.solutions {
2208
+ :where([uc-file-uploader-minimal]) {
2209
+ --cfg-init-activity: "start-from";
2210
+ --cfg-done-activity: "upload-list";
2211
+ position: relative;
2212
+ display: block;
2213
+ }
2214
+ [uc-file-uploader-minimal] > uc-start-from .uc-content {
2215
+ display: flex;
2216
+ flex-direction: column;
2217
+ gap: 4px;
2218
+ padding: 0;
2219
+ overflow: hidden;
2220
+ align-items: center;
2221
+ background-color: transparent;
2222
+ }
2223
+ :where([uc-file-uploader-minimal] > uc-start-from uc-drop-area) {
2224
+ display: flex;
2225
+ position: relative;
2226
+ align-items: center;
2227
+ justify-content: center;
2228
+ width: 100%;
2229
+ min-height: calc(var(--uc-preview-size) + var(--uc-padding) * 2 + 8px);
2230
+ padding: 0;
2231
+ text-align: center;
2232
+ background-color: var(--uc-muted);
2233
+ border-radius: calc(var(--uc-radius) * 1.75);
2234
+ }
2235
+ :where(.uc-contrast) :where([uc-file-uploader-minimal] > uc-start-from uc-drop-area) {
2236
+ background-color: transparent;
2237
+ }
2238
+ :where([uc-file-uploader-minimal] > uc-start-from uc-drop-area)::before {
2239
+ content: "";
2240
+ z-index: -1;
2241
+ width: 100%;
2242
+ height: 100%;
2243
+ position: absolute;
2244
+ background-color: var(--uc-background);
2245
+ }
2246
+ :where([uc-file-uploader-minimal]:has([single]) > uc-start-from uc-drop-area) {
2247
+ aspect-ratio: var(--uc-grid-aspect-ratio);
2248
+ }
2249
+ [uc-file-uploader-minimal] uc-upload-list uc-activity-header {
2250
+ display: none;
2251
+ }
2252
+ [uc-file-uploader-minimal] uc-upload-list > .uc-toolbar {
2253
+ background-color: transparent;
2254
+ }
2255
+ [uc-file-uploader-minimal] uc-upload-list {
2256
+ width: 100%;
2257
+ height: unset;
2258
+ padding: 4px;
2259
+ background-color: var(--uc-background);
2260
+ border: 1px dashed var(--uc-border);
2261
+ border-radius: calc(var(--uc-radius) * 1.75);
2262
+ }
2263
+ [uc-file-uploader-minimal] uc-upload-list .uc-files {
2264
+ padding: 0;
2265
+ }
2266
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar {
2267
+ display: block;
2268
+ padding: 0;
2269
+ }
2270
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-cancel-btn,
2271
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-upload-btn,
2272
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-done-btn {
2273
+ display: none;
2274
+ }
2275
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn {
2276
+ width: 100%;
2277
+ height: calc(var(--uc-preview-size) + var(--uc-padding) * 2);
2278
+ margin-top: 4px;
2279
+ }
2280
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn[disabled] {
2281
+ display: none;
2282
+ }
2283
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn > span {
2284
+ display: none;
2285
+ }
2286
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn > uc-icon {
2287
+ display: flex;
2288
+ }
2289
+ [uc-file-uploader-minimal] uc-file-item uc-progress-bar {
2290
+ top: 0 !important;
2291
+ height: 100% !important;
2292
+ }
2293
+ [uc-file-uploader-minimal] uc-file-item uc-progress-bar .uc-progress {
2294
+ background-color: var(--uc-primary-transparent);
2295
+ border-radius: var(--uc-radius);
2296
+ }
2297
+ [uc-file-uploader-minimal] uc-file-item uc-progress-bar .uc-fake-progress {
2298
+ background-color: var(--uc-primary-transparent);
2299
+ border-radius: var(--uc-radius);
2300
+ }
2301
+ [uc-file-uploader-minimal] uc-upload-list uc-drop-area {
2302
+ width: 100%;
2303
+ height: 100%;
2304
+ margin: 0;
2305
+ border-radius: calc(var(--uc-radius) * 1.75);
2306
+ }
2307
+ [uc-file-uploader-minimal] uc-upload-list .uc-common-error {
2308
+ margin: 4px 0 0;
2309
+ }
2310
+ [uc-file-uploader-minimal] uc-copyright .uc-credits {
2311
+ position: static;
2312
+ }
2313
+ [uc-file-uploader-minimal][mode=grid] uc-upload-list .uc-toolbar .uc-add-more-btn {
2314
+ display: none;
2315
+ }
2316
+ [uc-file-uploader-minimal][mode=grid] uc-upload-list .uc-files .uc-add-more-btn {
2317
+ display: flex;
2318
+ }
2319
+ [uc-file-uploader-minimal][mode=grid] uc-upload-list .uc-files .uc-add-more-btn > span {
2320
+ display: none;
2321
+ }
2322
+ [uc-file-uploader-minimal][mode=grid] uc-upload-list .uc-files .uc-add-more-btn > uc-icon {
2323
+ display: flex;
2324
+ }
2325
+ }
2326
+
2327
+ /* src/blocks/themes/uc-basic/layers.css */
2328
+ @layer uc, uc.base, uc.components, uc.rules, uc.solutions, uc.post-reset;
2329
+
2330
+ /* src/blocks/themes/uc-basic/config.css */
2331
+ @layer uc.base {
2332
+ :where([uc-wgt-common]) {
2333
+ --cfg-init-activity: "start-from";
2334
+ --cfg-done-activity: "";
2335
+ }
2336
+ }
2337
+
2338
+ /* src/blocks/themes/uc-basic/theme.css */
2339
+ @layer uc.base {
2340
+ :where([uc-wgt-common]) {
2341
+ --uc-font-family: system-ui;
2342
+ --uc-font-size: 14px;
2343
+ --uc-line-height: normal;
2344
+ --uc-simple-btn-font-family: system-ui;
2345
+ --uc-simple-btn-font-size: 14px;
2346
+ --uc-button-size: 32px;
2347
+ --uc-preview-size: 32px;
2348
+ --uc-padding: 10px;
2349
+ --uc-radius: 8px;
2350
+ --uc-transition: 0.2s ease;
2351
+ --uc-dialog-width: 430px;
2352
+ --uc-dialog-max-width: 920px;
2353
+ --uc-dialog-max-height: 675px;
2354
+ --uc-simple-btn-padding: 7px 14px;
2355
+ --uc-grid-col: 3;
2356
+ --uc-grid-preview-image-height: auto;
2357
+ --uc-grid-gap: calc(var(--uc-padding) / 2);
2358
+ --uc-grid-aspect-ratio: 1 / 1;
2359
+ --uc-background: var(--uc-background-light);
2360
+ --uc-foreground: var(--uc-foreground-light);
2361
+ --uc-primary: var(--uc-primary-light);
2362
+ --uc-primary-hover: var(--uc-primary-hover-light);
2363
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
2364
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
2365
+ --uc-secondary: var(--uc-secondary-light);
2366
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
2367
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
2368
+ --uc-muted: var(--uc-muted-light);
2369
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
2370
+ --uc-destructive: var(--uc-destructive-light);
2371
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
2372
+ --uc-border: var(--uc-border-light);
2373
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
2374
+ --uc-simple-btn: var(--uc-simple-btn-light);
2375
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
2376
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
2377
+ }
2378
+ @supports not (color: oklch(0% 0 0)) {
2379
+ :where([uc-wgt-common]) {
2380
+ --uc-primary-rgb-light: 23 75 215;
2381
+ --uc-primary-light: rgb(var(--uc-primary-rgb-light));
2382
+ --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);
2383
+ --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);
2384
+ --uc-background-light: rgb(255 255 255);
2385
+ --uc-foreground-light: rgb(24 24 24);
2386
+ --uc-primary-foreground-light: #fff;
2387
+ --uc-secondary-light: rgb(24 24 24 / 5%);
2388
+ --uc-secondary-hover-light: rgb(24 24 24 / 8%);
2389
+ --uc-secondary-foreground-light: rgb(24 24 24);
2390
+ --uc-muted-light: rgb(245 245 245);
2391
+ --uc-muted-foreground-light: rgb(113 113 113);
2392
+ --uc-destructive-light: rgb(232 19 20 / 5%);
2393
+ --uc-destructive-foreground-light: rgb(232 19 20);
2394
+ --uc-border-light: rgb(228 228 232);
2395
+ --uc-dialog-shadow-light: 0px 6px 20px rgb(0 0 0 / 10%);
2396
+ --uc-simple-btn-light: rgb(235 235 235);
2397
+ --uc-simple-btn-hover-light: rgb(228 228 228);
2398
+ --uc-simple-btn-foreground-light: rgb(24 24 24);
2399
+ --uc-primary-rgb-dark: 87 154 255;
2400
+ --uc-primary-dark: rgb(var(--uc-primary-rgb-dark));
2401
+ --uc-primary-hover-dark: rgb(var(--uc-primary-rgb-dark) / 90%);
2402
+ --uc-primary-transparent-dark: rgb(var(--uc-primary-rgb-dark) / 7%);
2403
+ --uc-background-dark: rgb(27 27 27);
2404
+ --uc-foreground-dark: rgb(225 225 225);
2405
+ --uc-primary-foreground-dark: rgb(0 0 0);
2406
+ --uc-secondary-dark: rgb(225 225 225 / 7%);
2407
+ --uc-secondary-hover-dark: rgb(225 225 225 / 10%);
2408
+ --uc-secondary-foreground-dark: rgb(225 225 225);
2409
+ --uc-muted-dark: rgb(36 36 36);
2410
+ --uc-muted-foreground-dark: rgb(152 152 152);
2411
+ --uc-destructive-dark: rgb(244 90 79 / 10%);
2412
+ --uc-destructive-foreground-dark: rgb(244 90 79);
2413
+ --uc-border-dark: rgb(61 61 61);
2414
+ --uc-dialog-shadow-dark: 0px 6px 20px rgb(0 0 0 / 25%);
2415
+ --uc-simple-btn-dark: rgb(36 36 36);
2416
+ --uc-simple-btn-hover-dark: rgb(43 43 43);
2417
+ --uc-simple-btn-foreground-dark: rgb(255 255 255);
2418
+ }
2419
+ }
2420
+ @supports (color: oklch(0% 0 0)) {
2421
+ :where([uc-wgt-common]) {
2422
+ --uc-primary-oklch-light: 47% 0.22 264;
2423
+ --uc-primary-light: oklch(var(--uc-primary-oklch-light));
2424
+ --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
2425
+ --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);
2426
+ --uc-background-light: oklch(100% 0 0);
2427
+ --uc-foreground-light: oklch(21% 0 0);
2428
+ --uc-primary-foreground-light: oklch(100% 0 0);
2429
+ --uc-secondary-light: oklch(21% 0 0 / 0.05);
2430
+ --uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
2431
+ --uc-secondary-foreground-light: oklch(21% 0 0);
2432
+ --uc-muted-light: oklch(97% 0 0);
2433
+ --uc-muted-foreground-light: oklch(40% 0 0);
2434
+ --uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
2435
+ --uc-destructive-foreground-light: oklch(59% 0.235 28.5);
2436
+ --uc-border-light: oklch(92% 0 0);
2437
+ --uc-dialog-shadow-light: 0px 6px 20px oklch(0% 0 0 / 0.1);
2438
+ --uc-simple-btn-light: oklch(94% 0 0);
2439
+ --uc-simple-btn-hover-light: oklch(92% 0 0);
2440
+ --uc-simple-btn-foreground-light: oklch(20% 0 0);
2441
+ --uc-primary-oklch-dark: 69% 0.1768 258.4;
2442
+ --uc-primary-dark: oklch(var(--uc-primary-oklch-dark));
2443
+ --uc-primary-hover-dark: oklch(var(--uc-primary-oklch-dark) / 90%);
2444
+ --uc-primary-transparent-dark: oklch(var(--uc-primary-oklch-dark) / 7%);
2445
+ --uc-background-dark: oklch(22% 0 0);
2446
+ --uc-foreground-dark: oklch(91% 0 0);
2447
+ --uc-primary-foreground-dark: oklch(0% 0 0);
2448
+ --uc-secondary-dark: oklch(91% 0 0 / 0.07);
2449
+ --uc-secondary-hover-dark: oklch(91% 0 0 / 0.1);
2450
+ --uc-secondary-foreground-dark: oklch(91% 0 0);
2451
+ --uc-muted-dark: oklch(26% 0 0);
2452
+ --uc-muted-foreground-dark: oklch(68% 0 0);
2453
+ --uc-destructive-dark: oklch(67% 0.191 27.5 / 0.1);
2454
+ --uc-destructive-foreground-dark: oklch(67% 0.191 27.5);
2455
+ --uc-border-dark: oklch(36% 0 0);
2456
+ --uc-dialog-shadow-dark: 0px 6px 20px oklch(0% 0 0 / 0.25);
2457
+ --uc-simple-btn-dark: oklch(26% 0 0);
2458
+ --uc-simple-btn-hover-dark: oklch(29% 0 0);
2459
+ --uc-simple-btn-foreground-dark: oklch(100% 0 0);
2460
+ }
2461
+ }
2462
+ @media only screen and (max-height: 600px) {
2463
+ :where([uc-wgt-common]) {
2464
+ --uc-dialog-max-height: 100%;
2465
+ }
2466
+ }
2467
+ @media only screen and (max-width: 680px) {
2468
+ :where([uc-wgt-common]) {
2469
+ --uc-grid-col: 2;
2470
+ }
2471
+ }
2472
+ @media only screen and (max-width: 430px) {
2473
+ :where([uc-wgt-common]) {
2474
+ --uc-dialog-max-width: 100vw;
2475
+ --uc-dialog-max-height: var(--uploadcare-blocks-window-height);
2476
+ --uc-grid-col: 1;
2477
+ }
2478
+ }
2479
+ @media (prefers-color-scheme: light) {
2480
+ :where([uc-wgt-common]) {
2481
+ --uc-background: var(--uc-background-light);
2482
+ --uc-foreground: var(--uc-foreground-light);
2483
+ --uc-primary: var(--uc-primary-light);
2484
+ --uc-primary-hover: var(--uc-primary-hover-light);
2485
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
2486
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
2487
+ --uc-secondary: var(--uc-secondary-light);
2488
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
2489
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
2490
+ --uc-muted: var(--uc-muted-light);
2491
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
2492
+ --uc-destructive: var(--uc-destructive-light);
2493
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
2494
+ --uc-border: var(--uc-border-light);
2495
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
2496
+ --uc-simple-btn: var(--uc-simple-btn-light);
2497
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
2498
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
2499
+ }
2500
+ }
2501
+ @media (prefers-color-scheme: dark) {
2502
+ :where([uc-wgt-common]) {
2503
+ --uc-background: var(--uc-background-dark);
2504
+ --uc-foreground: var(--uc-foreground-dark);
2505
+ --uc-primary: var(--uc-primary-dark);
2506
+ --uc-primary-hover: var(--uc-primary-hover-dark);
2507
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
2508
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
2509
+ --uc-secondary: var(--uc-secondary-dark);
2510
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
2511
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
2512
+ --uc-muted: var(--uc-muted-dark);
2513
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
2514
+ --uc-destructive: var(--uc-destructive-dark);
2515
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
2516
+ --uc-border: var(--uc-border-dark);
2517
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
2518
+ --uc-simple-btn: var(--uc-simple-btn-dark);
2519
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
2520
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
2521
+ }
2522
+ }
2523
+ :where(.uc-light) {
2524
+ --uc-background: var(--uc-background-light);
2525
+ --uc-foreground: var(--uc-foreground-light);
2526
+ --uc-primary: var(--uc-primary-light);
2527
+ --uc-primary-hover: var(--uc-primary-hover-light);
2528
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
2529
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
2530
+ --uc-secondary: var(--uc-secondary-light);
2531
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
2532
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
2533
+ --uc-muted: var(--uc-muted-light);
2534
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
2535
+ --uc-destructive: var(--uc-destructive-light);
2536
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
2537
+ --uc-border: var(--uc-border-light);
2538
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
2539
+ --uc-simple-btn: var(--uc-simple-btn-light);
2540
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
2541
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
2542
+ }
2543
+ :where(.uc-dark) {
2544
+ --uc-background: var(--uc-background-dark);
2545
+ --uc-foreground: var(--uc-foreground-dark);
2546
+ --uc-primary: var(--uc-primary-dark);
2547
+ --uc-primary-hover: var(--uc-primary-hover-dark);
2548
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
2549
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
2550
+ --uc-secondary: var(--uc-secondary-dark);
2551
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
2552
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
2553
+ --uc-muted: var(--uc-muted-dark);
2554
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
2555
+ --uc-destructive: var(--uc-destructive-dark);
2556
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
2557
+ --uc-border: var(--uc-border-dark);
2558
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
2559
+ --uc-simple-btn: var(--uc-simple-btn-dark);
2560
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
2561
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
2562
+ }
2563
+ :where(.uc-purple) {
2564
+ --uc-primary-oklch-light: 47% 0.22 300;
2565
+ --uc-primary-oklch-dark: 69% 0.1768 300;
2566
+ }
2567
+ :where(.uc-red) {
2568
+ --uc-primary-oklch-light: 47% 0.21 21;
2569
+ --uc-primary-oklch-dark: 71% 0.1768 21;
2570
+ }
2571
+ :where(.uc-orange) {
2572
+ --uc-primary-oklch-light: 47% 0.1376 51.88;
2573
+ --uc-primary-oklch-dark: 69% 0.1768 51.88;
2574
+ }
2575
+ :where(.uc-green) {
2576
+ --uc-primary-oklch-light: 45% 0.14 130;
2577
+ --uc-primary-oklch-dark: 69% 0.1768 130;
2578
+ }
2579
+ :where(.uc-turquoise) {
2580
+ --uc-primary-oklch-light: 45% 0.0854 174;
2581
+ --uc-primary-oklch-dark: 69% 0.1768 174;
2582
+ }
2583
+ :where(.uc-gray) {
2584
+ --uc-primary-oklch-light: 10% 0 0;
2585
+ --uc-primary-oklch-dark: 97% 0 0;
2586
+ }
2587
+ :where(.uc-contrast) {
2588
+ --uc-border-light: oklch(50% 0 0);
2589
+ --uc-border-dark: oklch(50% 0 0);
2590
+ --uc-muted-light: oklch(98% 0 0);
2591
+ --uc-muted-dark: oklch(16% 0 0);
2592
+ --uc-muted-foreground-light: oklch(20% 0 0);
2593
+ --uc-muted-foreground-dark: oklch(80% 0 0);
2594
+ --uc-background-light: oklch(100% 0 0);
2595
+ --uc-foreground-light: oklch(0% 0 0);
2596
+ --uc-background-dark: oklch(10% 0 0);
2597
+ --uc-foreground-dark: oklch(100% 0 0);
2598
+ }
2599
+ }
2600
+
2601
+ /* src/blocks/themes/uc-basic/common.css */
2602
+ @layer uc.base {
2603
+ :where([uc-wgt-common]) {
2604
+ color: var(--uc-foreground);
2605
+ font-size: var(--uc-font-size);
2606
+ line-height: var(--uc-line-height);
2607
+ font-family: var(--uc-font-family);
2608
+ }
2609
+ :where([uc-wgt-common]) * {
2610
+ box-sizing: border-box;
2611
+ }
2612
+ :where([uc-wgt-common]) button {
2613
+ display: flex;
2614
+ align-items: center;
2615
+ justify-content: center;
2616
+ height: var(--uc-button-size);
2617
+ padding-right: 14px;
2618
+ padding-left: 14px;
2619
+ font-size: 1em;
2620
+ font-family: inherit;
2621
+ white-space: nowrap;
2622
+ border: none;
2623
+ border-radius: var(--uc-radius);
2624
+ cursor: pointer;
2625
+ user-select: none;
2626
+ transition: background-color var(--uc-transition);
2627
+ }
2628
+ :where([uc-wgt-common]) button:focus-visible {
2629
+ outline-offset: 2px;
2630
+ }
2631
+ :where([uc-wgt-common]) button.uc-primary-btn {
2632
+ color: var(--uc-primary-foreground);
2633
+ background-color: var(--uc-primary);
2634
+ }
2635
+ :where([uc-wgt-common]) button.uc-primary-btn:hover {
2636
+ background-color: var(--uc-primary-hover);
2637
+ }
2638
+ :where([uc-wgt-common]) button.uc-secondary-btn {
2639
+ color: var(--uc-secondary-foreground);
2640
+ background-color: var(--uc-secondary);
2641
+ }
2642
+ :where([uc-wgt-common]) button.uc-secondary-btn:hover {
2643
+ background-color: var(--uc-secondary-hover);
2644
+ }
2645
+ :where([uc-wgt-common].uc-contrast) button.uc-secondary-btn {
2646
+ border: 1px solid var(--uc-border);
2647
+ }
2648
+ :where([uc-wgt-common]) button.uc-mini-btn {
2649
+ height: var(--uc-button-size);
2650
+ padding: 0;
2651
+ background-color: transparent;
2652
+ color: var(--uc-secondary-foreground);
2653
+ }
2654
+ :where([uc-wgt-common]) button.uc-mini-btn:hover {
2655
+ background-color: var(--uc-secondary);
2656
+ }
2657
+ :where([uc-wgt-common]) :is(button[disabled], button.uc-primary-btn[disabled], button.uc-secondary-btn[disabled]) {
2658
+ opacity: 0.5;
2659
+ pointer-events: none;
2660
+ }
2661
+ :where([uc-wgt-common]) a {
2662
+ color: var(--uc-primary);
2663
+ text-decoration: none;
2664
+ }
2665
+ :where([uc-wgt-common]) a[disabled] {
2666
+ pointer-events: none;
2667
+ }
2668
+ :where([uc-wgt-common]) input[type=text] {
2669
+ display: flex;
2670
+ width: 100%;
2671
+ height: var(--uc-button-size);
2672
+ padding-right: 10px;
2673
+ padding-left: 10px;
2674
+ color: var(--uc-foreground);
2675
+ font-size: 1em;
2676
+ font-family: inherit;
2677
+ background-color: var(--uc-background);
2678
+ border: 1px solid var(--uc-border);
2679
+ outline: 1px solid transparent;
2680
+ border-radius: var(--uc-radius);
2681
+ transition: border-color var(--uc-transition), outline-color var(--uc-transition);
2682
+ }
2683
+ :where([uc-wgt-common]) input[type=text]::placeholder {
2684
+ color: var(--uc-muted-foreground);
2685
+ }
2686
+ :where([uc-wgt-common]) input[type=text]:focus {
2687
+ outline-color: var(--uc-primary-hover);
2688
+ border-color: var(--uc-primary-hover);
2689
+ }
2690
+ :where([uc-wgt-common]) input[disabled] {
2691
+ opacity: 0.6;
2692
+ pointer-events: none;
2693
+ }
2694
+ :where([uc-wgt-common]) uc-select[disabled],
2695
+ :where([uc-wgt-common]) select[disabled] {
2696
+ opacity: 0.6;
2697
+ pointer-events: none;
2698
+ }
2699
+ }
2700
+
2701
+ /* src/blocks/themes/uc-basic/rules.css */
2702
+ @layer uc.rules {
2703
+ :where([uc-wgt-common]) [hidden] {
2704
+ display: none;
2705
+ }
2706
+ :where([uc-wgt-common]) [activity]:not([active], .active) {
2707
+ display: none;
2708
+ }
2709
+ :where([uc-wgt-common]) dialog:not([open]) [activity] {
2710
+ display: none;
2711
+ }
2712
+ }
2713
+
2714
+ /* src/blocks/themes/uc-basic/post-reset.css */
2715
+ @layer uc.post-reset {
2716
+ :where([uc-wgt-common]) uc-source-btn[type] {
2717
+ all: unset;
2718
+ }
2719
+ }
2720
+
2721
+ /* src/blocks/themes/uc-basic/index.css */
2722
+
2723
+ /* src/solutions/file-uploader/regular/index.css */