@uploadcare/file-uploader 1.27.1 → 1.28.0-alpha.1

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 (722) hide show
  1. package/dist/ActivityHeader-R6Mlx-dA.js +9 -0
  2. package/dist/ActivityHeader.css +23 -0
  3. package/dist/ActivityHeader.layered.css +24 -0
  4. package/dist/CameraSource-DDwj1jCV.js +511 -0
  5. package/dist/CameraSource-n1tun2Df.js +10 -0
  6. package/dist/CameraSource.css +180 -0
  7. package/dist/CameraSource.layered.css +209 -0
  8. package/dist/CloudImageEditor-DcVoIRb3.js +2163 -0
  9. package/dist/CloudImageEditorActivity-Csij4nlC.js +87 -0
  10. package/dist/CloudImageEditorActivity-DD4NdU0P.js +9 -0
  11. package/dist/CloudImageEditorActivity.css +14 -0
  12. package/dist/CloudImageEditorActivity.layered.css +15 -0
  13. package/dist/Config-DKOromHY.js +433 -0
  14. package/dist/Config.css +4 -0
  15. package/dist/Config.layered.css +5 -0
  16. package/dist/ExternalSource-6MSUgxqy.js +10 -0
  17. package/dist/ExternalSource-DVEjSkPB.js +253 -0
  18. package/dist/ExternalSource.css +98 -0
  19. package/dist/ExternalSource.layered.css +116 -0
  20. package/dist/Icon-tXRTvEF2.js +1810 -0
  21. package/dist/Icon.css +14 -0
  22. package/dist/Icon.layered.css +15 -0
  23. package/dist/LitUploaderBlock-LxeOZ0ya.js +998 -0
  24. package/dist/UrlSource-BkyX00I2.js +73 -0
  25. package/dist/UrlSource-RI8TSD48.js +10 -0
  26. package/dist/UrlSource.css +17 -0
  27. package/dist/UrlSource.layered.css +18 -0
  28. package/dist/abstract/CTX.d.ts +40 -0
  29. package/dist/abstract/TypedCollection.d.ts +47 -0
  30. package/dist/abstract/TypedCollection.test.d.ts +1 -0
  31. package/dist/abstract/TypedData.d.ts +12 -0
  32. package/dist/abstract/TypedData.test.d.ts +1 -0
  33. package/dist/abstract/UploaderPublicApi.d.ts +41 -0
  34. package/dist/abstract/buildOutputCollectionState.d.ts +3 -0
  35. package/dist/abstract/customConfigOptions.d.ts +65 -0
  36. package/dist/abstract/defineComponents.d.ts +1 -0
  37. package/dist/abstract/features/ClipboardLayer.d.ts +12 -0
  38. package/dist/abstract/loadFileUploaderFrom.d.ts +3 -4
  39. package/dist/abstract/loadFileUploaderFrom.js +7 -6
  40. package/dist/abstract/localeRegistry.d.ts +5 -0
  41. package/dist/abstract/managers/LocaleManager.d.ts +10 -0
  42. package/dist/abstract/managers/ModalManager.d.ts +53 -0
  43. package/dist/abstract/managers/SecureUploadsManager.d.ts +7 -0
  44. package/dist/abstract/managers/TelemetryManager.d.ts +41 -0
  45. package/dist/abstract/managers/ValidationManager.d.ts +34 -0
  46. package/dist/abstract/managers/__tests__/ModalManager.test.d.ts +13 -0
  47. package/dist/abstract/managers/__tests__/SecureUploadsManager.test.d.ts +1 -0
  48. package/dist/abstract/managers/a11y.d.ts +9 -0
  49. package/dist/abstract/managers/plugin/PluginManager.d.ts +25 -0
  50. package/dist/abstract/managers/plugin/PluginTypes.d.ts +146 -0
  51. package/dist/abstract/managers/plugin/index.d.ts +2 -0
  52. package/dist/abstract/sharedConfigKey.d.ts +2 -0
  53. package/dist/abstract/uploadEntrySchema.d.ts +34 -0
  54. package/dist/blocks/ActivityHeader/ActivityHeader.d.ts +8 -0
  55. package/dist/blocks/CameraSource/CameraSource.d.ts +121 -0
  56. package/dist/blocks/CameraSource/__tests__/calcCameraModes.test.d.ts +1 -0
  57. package/dist/blocks/CameraSource/calcCameraModes.d.ts +5 -0
  58. package/dist/blocks/CameraSource/constants.d.ts +15 -0
  59. package/dist/blocks/CloudImageEditor/index.d.ts +1 -0
  60. package/dist/blocks/CloudImageEditor/src/CloudImageEditorBlock.d.ts +60 -0
  61. package/dist/blocks/CloudImageEditor/src/CropFrame.d.ts +56 -0
  62. package/dist/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.d.ts +24 -0
  63. package/dist/blocks/CloudImageEditor/src/EditorButtonControl.d.ts +14 -0
  64. package/dist/blocks/CloudImageEditor/src/EditorCropButtonControl.d.ts +13 -0
  65. package/dist/blocks/CloudImageEditor/src/EditorFilterControl.d.ts +35 -0
  66. package/dist/blocks/CloudImageEditor/src/EditorImageCropper.d.ts +56 -0
  67. package/dist/blocks/CloudImageEditor/src/EditorImageFader.d.ts +63 -0
  68. package/dist/blocks/CloudImageEditor/src/EditorOperationControl.d.ts +15 -0
  69. package/dist/blocks/CloudImageEditor/src/EditorScroller.d.ts +15 -0
  70. package/dist/blocks/CloudImageEditor/src/EditorSlider.d.ts +33 -0
  71. package/dist/blocks/CloudImageEditor/src/EditorToolbar.d.ts +68 -0
  72. package/dist/blocks/CloudImageEditor/src/crop-utils.d.ts +36 -0
  73. package/dist/blocks/CloudImageEditor/src/crop-utils.test.d.ts +1 -0
  74. package/dist/blocks/CloudImageEditor/src/cropper-constants.d.ts +10 -0
  75. package/dist/blocks/CloudImageEditor/src/elements/button/BtnUi.d.ts +31 -0
  76. package/dist/blocks/CloudImageEditor/src/elements/line-loader/LineLoaderUi.d.ts +19 -0
  77. package/dist/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.d.ts +27 -0
  78. package/dist/blocks/CloudImageEditor/src/elements/slider/SliderUi.d.ts +38 -0
  79. package/dist/blocks/CloudImageEditor/src/index.d.ts +15 -0
  80. package/dist/blocks/CloudImageEditor/src/lib/classNames.d.ts +5 -0
  81. package/dist/blocks/CloudImageEditor/src/lib/classNames.test.d.ts +1 -0
  82. package/dist/blocks/CloudImageEditor/src/lib/linspace.d.ts +1 -0
  83. package/dist/blocks/CloudImageEditor/src/lib/linspace.test.d.ts +1 -0
  84. package/dist/blocks/CloudImageEditor/src/lib/parseCropPreset.d.ts +4 -0
  85. package/dist/blocks/CloudImageEditor/src/lib/parseCropPreset.test.d.ts +1 -0
  86. package/dist/blocks/CloudImageEditor/src/lib/parseTabs.d.ts +2 -0
  87. package/dist/blocks/CloudImageEditor/src/lib/pick.d.ts +1 -0
  88. package/dist/blocks/CloudImageEditor/src/lib/pick.test.d.ts +1 -0
  89. package/dist/blocks/CloudImageEditor/src/lib/transformationUtils.d.ts +7 -0
  90. package/dist/blocks/CloudImageEditor/src/state.d.ts +20 -0
  91. package/dist/blocks/CloudImageEditor/src/svg-sprite.d.ts +2 -0
  92. package/dist/blocks/CloudImageEditor/src/toolbar-constants.d.ts +61 -0
  93. package/dist/blocks/CloudImageEditor/src/types.d.ts +60 -0
  94. package/dist/blocks/CloudImageEditor/src/util.d.ts +2 -0
  95. package/dist/blocks/CloudImageEditor/src/utils/parseFilterValue.d.ts +7 -0
  96. package/dist/blocks/CloudImageEditor/src/utils/parseFilterValue.test.d.ts +1 -0
  97. package/dist/blocks/CloudImageEditorActivity/CloudImageEditorActivity.d.ts +25 -0
  98. package/dist/blocks/Config/Config.d.ts +60 -0
  99. package/dist/blocks/Config/assertions.d.ts +5 -0
  100. package/dist/blocks/Config/computed-properties.d.ts +24 -0
  101. package/dist/blocks/Config/computed-properties.test.d.ts +1 -0
  102. package/dist/blocks/Config/initialConfig.d.ts +6 -0
  103. package/dist/blocks/Config/normalizeConfigValue.d.ts +2 -0
  104. package/dist/blocks/Config/validatorsType.d.ts +18 -0
  105. package/dist/blocks/Copyright/Copyright.d.ts +10 -0
  106. package/dist/blocks/DropArea/DropArea.d.ts +47 -0
  107. package/dist/blocks/DropArea/addDropzone.d.ts +17 -0
  108. package/dist/blocks/DropArea/getDropItems.d.ts +12 -0
  109. package/dist/blocks/ExternalSource/ExternalSource.d.ts +45 -0
  110. package/dist/blocks/ExternalSource/MessageBridge.d.ts +11 -0
  111. package/dist/blocks/ExternalSource/buildThemeDefinition.d.ts +4 -0
  112. package/dist/blocks/ExternalSource/query-string.d.ts +1 -0
  113. package/dist/blocks/ExternalSource/types.d.ts +105 -0
  114. package/dist/blocks/FileItem/FileItem.d.ts +50 -0
  115. package/dist/blocks/FileItem/FileItemConfig.d.ts +10 -0
  116. package/dist/blocks/FormInput/FormInput.d.ts +18 -0
  117. package/dist/blocks/Icon/Icon.d.ts +19 -0
  118. package/dist/blocks/Img/Img.d.ts +14 -0
  119. package/dist/blocks/Img/ImgBase.d.ts +29 -0
  120. package/dist/blocks/Img/ImgConfig.d.ts +28 -0
  121. package/dist/blocks/Img/configurations.d.ts +11 -0
  122. package/dist/blocks/Img/props-map.d.ts +28 -0
  123. package/dist/blocks/Img/utils/parseObjectToString.d.ts +2 -0
  124. package/dist/blocks/Modal/Modal.d.ts +34 -0
  125. package/dist/blocks/PluginActivityRenderer/PluginActivityRenderer.d.ts +32 -0
  126. package/dist/blocks/PluginActivityRenderer/index.d.ts +1 -0
  127. package/dist/blocks/ProgressBar/ProgressBar.d.ts +21 -0
  128. package/dist/blocks/ProgressBarCommon/ProgressBarCommon.d.ts +17 -0
  129. package/dist/blocks/Select/Select.d.ts +18 -0
  130. package/dist/blocks/SimpleBtn/SimpleBtn.d.ts +15 -0
  131. package/dist/blocks/SourceBtn/SourceBtn.d.ts +23 -0
  132. package/dist/blocks/SourceList/SourceList.d.ts +24 -0
  133. package/dist/blocks/Spinner/Spinner.d.ts +9 -0
  134. package/dist/blocks/StartFrom/StartFrom.d.ts +12 -0
  135. package/dist/blocks/Thumb/Thumb.d.ts +35 -0
  136. package/dist/blocks/UploadCtxProvider/EventEmitter.d.ts +70 -0
  137. package/dist/blocks/UploadCtxProvider/UploadCtxProvider.d.ts +44 -0
  138. package/dist/blocks/UploadList/UploadList.d.ts +39 -0
  139. package/dist/blocks/UrlSource/UrlSource.d.ts +14 -0
  140. package/dist/blocks/svg-backgrounds/svg-backgrounds.d.ts +3 -0
  141. package/dist/blocks/themes/uc-basic/svg-sprite.d.ts +2 -0
  142. package/dist/cameraPlugin-weRKO7eG.js +8 -0
  143. package/dist/cloud-image-editor-hhbyNWLG.js +11 -0
  144. package/dist/cloud-image-editor.css +1380 -0
  145. package/dist/cloud-image-editor.layered.css +1549 -0
  146. package/dist/cloudImageEditorPlugin-FjUgbMK3.js +8 -0
  147. package/dist/core.d.ts +42 -0
  148. package/dist/en-8OWEmZim.js +135 -0
  149. package/dist/env-mM-ksNPq.js +8 -0
  150. package/dist/env.d.ts +2 -4
  151. package/dist/env.js +7 -6
  152. package/dist/externalSourcesPlugin-CMBmLT8S.js +8 -0
  153. package/dist/imageShrinkPlugin-BN6loiP2.js +8 -0
  154. package/dist/index-base.css +2497 -0
  155. package/dist/index-base.layered.css +2837 -0
  156. package/dist/index.css +9 -6
  157. package/dist/index.d.ts +42 -2715
  158. package/dist/index.js +1796 -8
  159. package/dist/index.layered.css +9 -7
  160. package/dist/instagramPlugin-CXRm8MGL.js +8 -0
  161. package/dist/lit/BaseComponent.d.ts +12 -0
  162. package/dist/lit/Constructor.d.ts +1 -0
  163. package/dist/lit/CssDataMixin.d.ts +7 -0
  164. package/dist/lit/LightDomMixin.d.ts +8 -0
  165. package/dist/lit/LitActivityBlock.d.ts +53 -0
  166. package/dist/lit/LitBlock.d.ts +83 -0
  167. package/dist/lit/LitSolutionBlock.d.ts +21 -0
  168. package/dist/lit/LitUploaderBlock.d.ts +53 -0
  169. package/dist/lit/PubSubCompat.d.ts +18 -0
  170. package/dist/lit/RegisterableElementMixin.d.ts +7 -0
  171. package/dist/lit/SharedState.d.ts +119 -0
  172. package/dist/lit/SymbioteCompatMixin.d.ts +40 -0
  173. package/dist/lit/TestModeController.d.ts +16 -0
  174. package/dist/lit/Uid.d.ts +3 -0
  175. package/dist/lit/activity-constants.d.ts +11 -0
  176. package/dist/lit/createDebugPrinter.d.ts +3 -0
  177. package/dist/lit/findBlockInCtx.d.ts +3 -0
  178. package/dist/lit/getOutputData.d.ts +2 -0
  179. package/dist/lit/hasBlockInCtx.d.ts +3 -0
  180. package/dist/lit/l10n.d.ts +5 -0
  181. package/dist/lit/parseCssPropertyValue.d.ts +1 -0
  182. package/dist/lit/shared-instances.d.ts +65 -0
  183. package/dist/loadFileUploaderFrom-Bfz8L3VB.js +28 -0
  184. package/dist/locales/file-uploader/ar.d.ts +1 -4
  185. package/dist/locales/file-uploader/ar.js +142 -6
  186. package/dist/locales/file-uploader/az.d.ts +1 -4
  187. package/dist/locales/file-uploader/az.js +134 -6
  188. package/dist/locales/file-uploader/ca.d.ts +1 -4
  189. package/dist/locales/file-uploader/ca.js +136 -6
  190. package/dist/locales/file-uploader/cs.d.ts +1 -4
  191. package/dist/locales/file-uploader/cs.js +138 -6
  192. package/dist/locales/file-uploader/da.d.ts +1 -4
  193. package/dist/locales/file-uploader/da.js +134 -6
  194. package/dist/locales/file-uploader/de.d.ts +1 -4
  195. package/dist/locales/file-uploader/de.js +134 -6
  196. package/dist/locales/file-uploader/el.d.ts +1 -4
  197. package/dist/locales/file-uploader/el.js +134 -6
  198. package/dist/locales/file-uploader/en.d.ts +1 -4
  199. package/dist/locales/file-uploader/en.js +7 -6
  200. package/dist/locales/file-uploader/es.d.ts +1 -4
  201. package/dist/locales/file-uploader/es.js +136 -6
  202. package/dist/locales/file-uploader/et.d.ts +1 -4
  203. package/dist/locales/file-uploader/et.js +134 -6
  204. package/dist/locales/file-uploader/fi.d.ts +1 -4
  205. package/dist/locales/file-uploader/fi.js +134 -6
  206. package/dist/locales/file-uploader/fr.d.ts +1 -4
  207. package/dist/locales/file-uploader/fr.js +136 -6
  208. package/dist/locales/file-uploader/he.d.ts +1 -4
  209. package/dist/locales/file-uploader/he.js +136 -6
  210. package/dist/locales/file-uploader/hy.d.ts +1 -4
  211. package/dist/locales/file-uploader/hy.js +134 -6
  212. package/dist/locales/file-uploader/is.d.ts +1 -4
  213. package/dist/locales/file-uploader/is.js +134 -6
  214. package/dist/locales/file-uploader/it.d.ts +1 -4
  215. package/dist/locales/file-uploader/it.js +136 -6
  216. package/dist/locales/file-uploader/ja.d.ts +1 -4
  217. package/dist/locales/file-uploader/ja.js +134 -6
  218. package/dist/locales/file-uploader/ka.d.ts +1 -4
  219. package/dist/locales/file-uploader/ka.js +134 -6
  220. package/dist/locales/file-uploader/kk.d.ts +1 -4
  221. package/dist/locales/file-uploader/kk.js +134 -6
  222. package/dist/locales/file-uploader/ko.d.ts +1 -4
  223. package/dist/locales/file-uploader/ko.js +134 -6
  224. package/dist/locales/file-uploader/lv.d.ts +1 -4
  225. package/dist/locales/file-uploader/lv.js +136 -6
  226. package/dist/locales/file-uploader/nb.d.ts +1 -4
  227. package/dist/locales/file-uploader/nb.js +134 -6
  228. package/dist/locales/file-uploader/nl.d.ts +1 -4
  229. package/dist/locales/file-uploader/nl.js +134 -6
  230. package/dist/locales/file-uploader/pl.d.ts +1 -4
  231. package/dist/locales/file-uploader/pl.js +138 -6
  232. package/dist/locales/file-uploader/pt.d.ts +1 -4
  233. package/dist/locales/file-uploader/pt.js +136 -6
  234. package/dist/locales/file-uploader/ro.d.ts +1 -4
  235. package/dist/locales/file-uploader/ro.js +136 -6
  236. package/dist/locales/file-uploader/ru.d.ts +1 -4
  237. package/dist/locales/file-uploader/ru.js +138 -6
  238. package/dist/locales/file-uploader/sk.d.ts +1 -4
  239. package/dist/locales/file-uploader/sk.js +138 -6
  240. package/dist/locales/file-uploader/sr.d.ts +1 -4
  241. package/dist/locales/file-uploader/sr.js +136 -6
  242. package/dist/locales/file-uploader/sv.d.ts +1 -4
  243. package/dist/locales/file-uploader/sv.js +134 -6
  244. package/dist/locales/file-uploader/tr.d.ts +1 -4
  245. package/dist/locales/file-uploader/tr.js +134 -6
  246. package/dist/locales/file-uploader/uk.d.ts +1 -4
  247. package/dist/locales/file-uploader/uk.js +138 -6
  248. package/dist/locales/file-uploader/vi.d.ts +1 -4
  249. package/dist/locales/file-uploader/vi.js +134 -6
  250. package/dist/locales/file-uploader/zh-TW.d.ts +1 -4
  251. package/dist/locales/file-uploader/zh-TW.js +134 -6
  252. package/dist/locales/file-uploader/zh.d.ts +1 -4
  253. package/dist/locales/file-uploader/zh.js +134 -6
  254. package/dist/plugins/cameraPlugin.d.ts +2 -0
  255. package/dist/plugins/cloudImageEditorPlugin.d.ts +2 -0
  256. package/dist/plugins/externalSourcesPlugin.d.ts +2 -0
  257. package/dist/plugins/imageShrinkPlugin.d.ts +2 -0
  258. package/dist/plugins/instagramPlugin.d.ts +2 -0
  259. package/dist/plugins/unsplashPlugin.d.ts +16 -0
  260. package/dist/plugins/urlSourcePlugin.d.ts +2 -0
  261. package/dist/plugins-CGUls7EV.js +278 -0
  262. package/dist/solutions/adaptive-image/index.d.ts +2 -0
  263. package/dist/solutions/cloud-image-editor/CloudImageEditor.d.ts +11 -0
  264. package/dist/solutions/cloud-image-editor/index.d.ts +5 -0
  265. package/dist/solutions/file-uploader/inline/FileUploaderInline.d.ts +20 -0
  266. package/dist/solutions/file-uploader/inline/index.d.ts +1 -0
  267. package/dist/solutions/file-uploader/minimal/FileUploaderMinimal.d.ts +23 -0
  268. package/dist/solutions/file-uploader/minimal/index.d.ts +1 -0
  269. package/dist/solutions/file-uploader/regular/FileUploaderRegular.d.ts +17 -0
  270. package/dist/solutions/file-uploader/regular/index.d.ts +1 -0
  271. package/dist/types/dom.d.ts +1 -0
  272. package/dist/types/events.d.ts +4 -0
  273. package/dist/types/exported.d.ts +492 -0
  274. package/dist/types/index.d.ts +5 -0
  275. package/dist/urlSourcePlugin-_WdbEhq2.js +8 -0
  276. package/dist/utils/UID.d.ts +5 -0
  277. package/dist/utils/UID.test.d.ts +1 -0
  278. package/dist/utils/UploadSource.d.ts +37 -0
  279. package/dist/utils/WindowHeightTracker.d.ts +9 -0
  280. package/dist/utils/abilities.d.ts +1 -0
  281. package/dist/utils/applyStyles.d.ts +1 -0
  282. package/dist/utils/browser-info.d.ts +12 -0
  283. package/dist/utils/browser-info.test.d.ts +1 -0
  284. package/dist/utils/cdn-utils.d.ts +53 -0
  285. package/dist/utils/cdn-utils.test.d.ts +1 -0
  286. package/dist/utils/comma-separated.d.ts +2 -0
  287. package/dist/utils/debounce.d.ts +3 -0
  288. package/dist/utils/delay.d.ts +1 -0
  289. package/dist/utils/fileTypes.d.ts +11 -0
  290. package/dist/utils/fileTypes.test.d.ts +1 -0
  291. package/dist/utils/get-top-level-origin.d.ts +1 -0
  292. package/dist/utils/get-top-level-origin.test.d.ts +1 -0
  293. package/dist/utils/getLocaleDirection.d.ts +1 -0
  294. package/dist/utils/getPluralForm.d.ts +1 -0
  295. package/dist/utils/getPluralForm.test.d.ts +1 -0
  296. package/dist/utils/isPromiseLike.d.ts +1 -0
  297. package/dist/utils/isPromiseLike.test.d.ts +1 -0
  298. package/dist/utils/isSecureTokenExpired.d.ts +8 -0
  299. package/dist/utils/isSecureTokenExpired.test.d.ts +1 -0
  300. package/dist/utils/memoize.d.ts +1 -0
  301. package/dist/utils/memoize.test.d.ts +1 -0
  302. package/dist/utils/mixinClass.d.ts +8 -0
  303. package/dist/utils/parseCdnUrl.d.ts +11 -0
  304. package/dist/utils/parseCdnUrl.test.d.ts +1 -0
  305. package/dist/utils/parseShrink.d.ts +7 -0
  306. package/dist/utils/parseShrink.test.d.ts +1 -0
  307. package/dist/utils/preloadImage.d.ts +10 -0
  308. package/dist/utils/prettyBytes.d.ts +11 -0
  309. package/dist/utils/prettyBytes.test.d.ts +1 -0
  310. package/dist/utils/resizeImage.d.ts +1 -0
  311. package/dist/utils/stringToArray.d.ts +1 -0
  312. package/dist/utils/stringToArray.test.d.ts +1 -0
  313. package/dist/utils/template-utils.d.ts +16 -0
  314. package/dist/utils/template-utils.test.d.ts +1 -0
  315. package/dist/utils/throttle.d.ts +3 -0
  316. package/dist/utils/toKebabCase.d.ts +2 -0
  317. package/dist/utils/toKebabCase.test.d.ts +1 -0
  318. package/dist/utils/transparentPixelSrc.d.ts +1 -0
  319. package/dist/utils/uniqueArray.d.ts +1 -0
  320. package/dist/utils/uniqueArray.test.d.ts +1 -0
  321. package/dist/utils/userAgent.d.ts +2 -0
  322. package/dist/utils/validators/collection/index.d.ts +2 -0
  323. package/dist/utils/validators/collection/validateCollectionUploadError.d.ts +2 -0
  324. package/dist/utils/validators/collection/validateMultiple.d.ts +2 -0
  325. package/dist/utils/validators/file/index.d.ts +4 -0
  326. package/dist/utils/validators/file/validateFileType.d.ts +2 -0
  327. package/dist/utils/validators/file/validateIsImage.d.ts +2 -0
  328. package/dist/utils/validators/file/validateMaxSizeLimit.d.ts +2 -0
  329. package/dist/utils/validators/file/validateUploadError.d.ts +2 -0
  330. package/dist/utils/warnOnce.d.ts +1 -0
  331. package/dist/utils/wildcardRegexp.d.ts +1 -0
  332. package/dist/utils/wildcardRegexp.test.d.ts +1 -0
  333. package/dist/utils/withResolvers.d.ts +5 -0
  334. package/dist/utils/withResolvers.test.d.ts +1 -0
  335. package/package.json +8 -2
  336. package/web/ActivityHeader-BFdTdVfD.js +9 -0
  337. package/web/ActivityHeader-DQy6rII1.js +9 -0
  338. package/web/ActivityHeader-DvzMl0uj.js +9 -0
  339. package/web/ActivityHeader-i4x6_Fne.js +9 -0
  340. package/web/CameraSource-BAWIA4Wm.js +508 -0
  341. package/web/CameraSource-BqZCQcij.js +11 -0
  342. package/web/CameraSource-Brxr4tz4.js +508 -0
  343. package/web/CameraSource-BvBJ5Uzy.js +508 -0
  344. package/web/CameraSource-CkHzIE-h.js +11 -0
  345. package/web/CameraSource-D964yPLu.js +508 -0
  346. package/web/CameraSource-DE48Az-f.js +11 -0
  347. package/web/CameraSource-DyPebtRF.js +478 -0
  348. package/web/CameraSource-pj7Xo81m.js +11 -0
  349. package/web/CloudImageEditor-CTgUWB07.js +2192 -0
  350. package/web/CloudImageEditor-CxqV9Lwm.js +2192 -0
  351. package/web/CloudImageEditor-DoLWHpqV.js +2192 -0
  352. package/web/CloudImageEditor-Drywn265.js +2192 -0
  353. package/web/CloudImageEditor-MXcaDtMx.js +2187 -0
  354. package/web/CloudImageEditorActivity-BPzmfaJV.js +85 -0
  355. package/web/CloudImageEditorActivity-Br8pU5gd.js +11 -0
  356. package/web/CloudImageEditorActivity-Cw8b2CEz.js +11 -0
  357. package/web/CloudImageEditorActivity-Df1ySGq0.js +86 -0
  358. package/web/CloudImageEditorActivity-DinG5r0y.js +11 -0
  359. package/web/CloudImageEditorActivity-DmnLLINR.js +85 -0
  360. package/web/CloudImageEditorActivity-U90BGCek.js +85 -0
  361. package/web/CloudImageEditorActivity-dNLQZRZI.js +11 -0
  362. package/web/CloudImageEditorActivity-ur-hQ-6p.js +85 -0
  363. package/web/Config-8hlBNhvs.js +455 -0
  364. package/web/Config-BDZhPIyz.js +455 -0
  365. package/web/Config-CJVNrrjj.js +455 -0
  366. package/web/Config-DvkVtlQ7.js +455 -0
  367. package/web/ExternalSource-B9ycBFiD.js +10 -0
  368. package/web/ExternalSource-BE7HX47E.js +250 -0
  369. package/web/ExternalSource-BL5GSlol.js +250 -0
  370. package/web/ExternalSource-BXQY6Dlc.js +10 -0
  371. package/web/ExternalSource-BXxH3JCD.js +250 -0
  372. package/web/ExternalSource-BYSS-PPV.js +245 -0
  373. package/web/ExternalSource-C57a61QN.js +10 -0
  374. package/web/ExternalSource-CKfMtOgU.js +250 -0
  375. package/web/ExternalSource-DP6q8ylB.js +10 -0
  376. package/web/LitUploaderBlock-AX6jOdAS.js +996 -0
  377. package/web/LitUploaderBlock-BjAaoLl2.js +996 -0
  378. package/web/LitUploaderBlock-D8E5HuwH.js +996 -0
  379. package/web/LitUploaderBlock-Dl3ce0Tc.js +996 -0
  380. package/web/LitUploaderBlock-Oi33U0uf.js +996 -0
  381. package/web/UrlSource-B9SX3K0L.js +10 -0
  382. package/web/UrlSource-C3zB1rCb.js +70 -0
  383. package/web/UrlSource-C7bEU6Xv.js +10 -0
  384. package/web/UrlSource-CE389CBz.js +70 -0
  385. package/web/UrlSource-CnvAJ58Y.js +10 -0
  386. package/web/UrlSource-CqF0h6B-.js +10 -0
  387. package/web/UrlSource-D-971Nut.js +70 -0
  388. package/web/UrlSource-DhI3YCt5.js +70 -0
  389. package/web/UrlSource-hWV7jtB2.js +70 -0
  390. package/web/abstract/CTX.d.ts +40 -0
  391. package/web/abstract/TypedCollection.d.ts +47 -0
  392. package/web/abstract/TypedCollection.test.d.ts +1 -0
  393. package/web/abstract/TypedData.d.ts +12 -0
  394. package/web/abstract/TypedData.test.d.ts +1 -0
  395. package/web/abstract/UploaderPublicApi.d.ts +41 -0
  396. package/web/abstract/buildOutputCollectionState.d.ts +3 -0
  397. package/web/abstract/customConfigOptions.d.ts +65 -0
  398. package/web/abstract/defineComponents.d.ts +1 -0
  399. package/web/abstract/features/ClipboardLayer.d.ts +12 -0
  400. package/web/abstract/loadFileUploaderFrom.d.ts +13 -0
  401. package/web/abstract/localeRegistry.d.ts +5 -0
  402. package/web/abstract/managers/LocaleManager.d.ts +10 -0
  403. package/web/abstract/managers/ModalManager.d.ts +53 -0
  404. package/web/abstract/managers/SecureUploadsManager.d.ts +7 -0
  405. package/web/abstract/managers/TelemetryManager.d.ts +41 -0
  406. package/web/abstract/managers/ValidationManager.d.ts +34 -0
  407. package/web/abstract/managers/__tests__/ModalManager.test.d.ts +13 -0
  408. package/web/abstract/managers/__tests__/SecureUploadsManager.test.d.ts +1 -0
  409. package/web/abstract/managers/a11y.d.ts +9 -0
  410. package/web/abstract/managers/plugin/PluginManager.d.ts +25 -0
  411. package/web/abstract/managers/plugin/PluginTypes.d.ts +146 -0
  412. package/web/abstract/managers/plugin/index.d.ts +2 -0
  413. package/web/abstract/sharedConfigKey.d.ts +2 -0
  414. package/web/abstract/uploadEntrySchema.d.ts +34 -0
  415. package/web/blocks/ActivityHeader/ActivityHeader.d.ts +8 -0
  416. package/web/blocks/CameraSource/CameraSource.d.ts +121 -0
  417. package/web/blocks/CameraSource/__tests__/calcCameraModes.test.d.ts +1 -0
  418. package/web/blocks/CameraSource/calcCameraModes.d.ts +5 -0
  419. package/web/blocks/CameraSource/constants.d.ts +15 -0
  420. package/web/blocks/CloudImageEditor/index.d.ts +1 -0
  421. package/web/blocks/CloudImageEditor/src/CloudImageEditorBlock.d.ts +60 -0
  422. package/web/blocks/CloudImageEditor/src/CropFrame.d.ts +56 -0
  423. package/web/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.d.ts +24 -0
  424. package/web/blocks/CloudImageEditor/src/EditorButtonControl.d.ts +14 -0
  425. package/web/blocks/CloudImageEditor/src/EditorCropButtonControl.d.ts +13 -0
  426. package/web/blocks/CloudImageEditor/src/EditorFilterControl.d.ts +35 -0
  427. package/web/blocks/CloudImageEditor/src/EditorImageCropper.d.ts +56 -0
  428. package/web/blocks/CloudImageEditor/src/EditorImageFader.d.ts +63 -0
  429. package/web/blocks/CloudImageEditor/src/EditorOperationControl.d.ts +15 -0
  430. package/web/blocks/CloudImageEditor/src/EditorScroller.d.ts +15 -0
  431. package/web/blocks/CloudImageEditor/src/EditorSlider.d.ts +33 -0
  432. package/web/blocks/CloudImageEditor/src/EditorToolbar.d.ts +68 -0
  433. package/web/blocks/CloudImageEditor/src/crop-utils.d.ts +36 -0
  434. package/web/blocks/CloudImageEditor/src/crop-utils.test.d.ts +1 -0
  435. package/web/blocks/CloudImageEditor/src/cropper-constants.d.ts +10 -0
  436. package/web/blocks/CloudImageEditor/src/elements/button/BtnUi.d.ts +31 -0
  437. package/web/blocks/CloudImageEditor/src/elements/line-loader/LineLoaderUi.d.ts +19 -0
  438. package/web/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.d.ts +27 -0
  439. package/web/blocks/CloudImageEditor/src/elements/slider/SliderUi.d.ts +38 -0
  440. package/web/blocks/CloudImageEditor/src/index.d.ts +15 -0
  441. package/web/blocks/CloudImageEditor/src/lib/classNames.d.ts +5 -0
  442. package/web/blocks/CloudImageEditor/src/lib/classNames.test.d.ts +1 -0
  443. package/web/blocks/CloudImageEditor/src/lib/linspace.d.ts +1 -0
  444. package/web/blocks/CloudImageEditor/src/lib/linspace.test.d.ts +1 -0
  445. package/web/blocks/CloudImageEditor/src/lib/parseCropPreset.d.ts +4 -0
  446. package/web/blocks/CloudImageEditor/src/lib/parseCropPreset.test.d.ts +1 -0
  447. package/web/blocks/CloudImageEditor/src/lib/parseTabs.d.ts +2 -0
  448. package/web/blocks/CloudImageEditor/src/lib/pick.d.ts +1 -0
  449. package/web/blocks/CloudImageEditor/src/lib/pick.test.d.ts +1 -0
  450. package/web/blocks/CloudImageEditor/src/lib/transformationUtils.d.ts +7 -0
  451. package/web/blocks/CloudImageEditor/src/state.d.ts +20 -0
  452. package/web/blocks/CloudImageEditor/src/svg-sprite.d.ts +2 -0
  453. package/web/blocks/CloudImageEditor/src/toolbar-constants.d.ts +61 -0
  454. package/web/blocks/CloudImageEditor/src/types.d.ts +60 -0
  455. package/web/blocks/CloudImageEditor/src/util.d.ts +2 -0
  456. package/web/blocks/CloudImageEditor/src/utils/parseFilterValue.d.ts +7 -0
  457. package/web/blocks/CloudImageEditor/src/utils/parseFilterValue.test.d.ts +1 -0
  458. package/web/blocks/CloudImageEditorActivity/CloudImageEditorActivity.d.ts +25 -0
  459. package/web/blocks/Config/Config.d.ts +60 -0
  460. package/web/blocks/Config/assertions.d.ts +5 -0
  461. package/web/blocks/Config/computed-properties.d.ts +24 -0
  462. package/web/blocks/Config/computed-properties.test.d.ts +1 -0
  463. package/web/blocks/Config/initialConfig.d.ts +6 -0
  464. package/web/blocks/Config/normalizeConfigValue.d.ts +2 -0
  465. package/web/blocks/Config/validatorsType.d.ts +18 -0
  466. package/web/blocks/Copyright/Copyright.d.ts +10 -0
  467. package/web/blocks/DropArea/DropArea.d.ts +47 -0
  468. package/web/blocks/DropArea/addDropzone.d.ts +17 -0
  469. package/web/blocks/DropArea/getDropItems.d.ts +12 -0
  470. package/web/blocks/ExternalSource/ExternalSource.d.ts +45 -0
  471. package/web/blocks/ExternalSource/MessageBridge.d.ts +11 -0
  472. package/web/blocks/ExternalSource/buildThemeDefinition.d.ts +4 -0
  473. package/web/blocks/ExternalSource/query-string.d.ts +1 -0
  474. package/web/blocks/ExternalSource/types.d.ts +105 -0
  475. package/web/blocks/FileItem/FileItem.d.ts +50 -0
  476. package/web/blocks/FileItem/FileItemConfig.d.ts +10 -0
  477. package/web/blocks/FormInput/FormInput.d.ts +18 -0
  478. package/web/blocks/Icon/Icon.d.ts +19 -0
  479. package/web/blocks/Img/Img.d.ts +14 -0
  480. package/web/blocks/Img/ImgBase.d.ts +29 -0
  481. package/web/blocks/Img/ImgConfig.d.ts +28 -0
  482. package/web/blocks/Img/configurations.d.ts +11 -0
  483. package/web/blocks/Img/props-map.d.ts +28 -0
  484. package/web/blocks/Img/utils/parseObjectToString.d.ts +2 -0
  485. package/web/blocks/Modal/Modal.d.ts +34 -0
  486. package/web/blocks/PluginActivityRenderer/PluginActivityRenderer.d.ts +32 -0
  487. package/web/blocks/PluginActivityRenderer/index.d.ts +1 -0
  488. package/web/blocks/ProgressBar/ProgressBar.d.ts +21 -0
  489. package/web/blocks/ProgressBarCommon/ProgressBarCommon.d.ts +17 -0
  490. package/web/blocks/Select/Select.d.ts +18 -0
  491. package/web/blocks/SimpleBtn/SimpleBtn.d.ts +15 -0
  492. package/web/blocks/SourceBtn/SourceBtn.d.ts +23 -0
  493. package/web/blocks/SourceList/SourceList.d.ts +24 -0
  494. package/web/blocks/Spinner/Spinner.d.ts +9 -0
  495. package/web/blocks/StartFrom/StartFrom.d.ts +12 -0
  496. package/web/blocks/Thumb/Thumb.d.ts +35 -0
  497. package/web/blocks/UploadCtxProvider/EventEmitter.d.ts +70 -0
  498. package/web/blocks/UploadCtxProvider/UploadCtxProvider.d.ts +44 -0
  499. package/web/blocks/UploadList/UploadList.d.ts +39 -0
  500. package/web/blocks/UrlSource/UrlSource.d.ts +14 -0
  501. package/web/blocks/svg-backgrounds/svg-backgrounds.d.ts +3 -0
  502. package/web/blocks/themes/uc-basic/svg-sprite.d.ts +2 -0
  503. package/web/cameraPlugin-DeedXMWV.js +8 -0
  504. package/web/cameraPlugin-Duy1QwjB.js +8 -0
  505. package/web/cameraPlugin-QS9SUOtO.js +8 -0
  506. package/web/cameraPlugin-bq8ggY04.js +8 -0
  507. package/web/cameraPlugin-cel9YgP_.js +8 -0
  508. package/web/cloud-image-editor-8DrVRZ7E.js +12 -0
  509. package/web/cloud-image-editor-BX50EK1U.js +12 -0
  510. package/web/cloud-image-editor-DSW3oWq-.js +12 -0
  511. package/web/cloud-image-editor-DuI2Lx4M.js +12 -0
  512. package/web/cloudImageEditorPlugin-5my6aD36.js +8 -0
  513. package/web/cloudImageEditorPlugin-Bk19DmJv.js +8 -0
  514. package/web/cloudImageEditorPlugin-CcdnmtBW.js +8 -0
  515. package/web/cloudImageEditorPlugin-DQJmDl03.js +8 -0
  516. package/web/cloudImageEditorPlugin-kojghfqw.js +8 -0
  517. package/web/constants-BCfCF0cJ.js +4025 -0
  518. package/web/core.d.ts +42 -0
  519. package/web/env.d.ts +2 -0
  520. package/web/externalSourcesPlugin-BTeRm5C0.js +8 -0
  521. package/web/externalSourcesPlugin-BXgVeojg.js +8 -0
  522. package/web/externalSourcesPlugin-BgLpuIK9.js +8 -0
  523. package/web/externalSourcesPlugin-DMc9zs4T.js +8 -0
  524. package/web/externalSourcesPlugin-Dm9vnTBv.js +8 -0
  525. package/web/file-uploader.iife.min.js +697 -8
  526. package/web/file-uploader.min.js +1858 -7
  527. package/web/imageShrinkPlugin-BdHgEGZH.js +8 -0
  528. package/web/imageShrinkPlugin-BjkMGfvT.js +8 -0
  529. package/web/imageShrinkPlugin-CCkGHL2w.js +8 -0
  530. package/web/imageShrinkPlugin-D4WjaRGo.js +8 -0
  531. package/web/imageShrinkPlugin-DqYGutVx.js +8 -0
  532. package/web/index.d.ts +42 -0
  533. package/web/instagramPlugin-BTMz0K2a.js +8 -0
  534. package/web/instagramPlugin-BbIKgTH7.js +8 -0
  535. package/web/instagramPlugin-CQQhsEJa.js +8 -0
  536. package/web/instagramPlugin-Cm7lWKae.js +8 -0
  537. package/web/instagramPlugin-DcclxM_d.js +8 -0
  538. package/web/lit/BaseComponent.d.ts +12 -0
  539. package/web/lit/Constructor.d.ts +1 -0
  540. package/web/lit/CssDataMixin.d.ts +7 -0
  541. package/web/lit/LightDomMixin.d.ts +8 -0
  542. package/web/lit/LitActivityBlock.d.ts +53 -0
  543. package/web/lit/LitBlock.d.ts +83 -0
  544. package/web/lit/LitSolutionBlock.d.ts +21 -0
  545. package/web/lit/LitUploaderBlock.d.ts +53 -0
  546. package/web/lit/PubSubCompat.d.ts +18 -0
  547. package/web/lit/RegisterableElementMixin.d.ts +7 -0
  548. package/web/lit/SharedState.d.ts +119 -0
  549. package/web/lit/SymbioteCompatMixin.d.ts +40 -0
  550. package/web/lit/TestModeController.d.ts +16 -0
  551. package/web/lit/Uid.d.ts +3 -0
  552. package/web/lit/activity-constants.d.ts +11 -0
  553. package/web/lit/createDebugPrinter.d.ts +3 -0
  554. package/web/lit/findBlockInCtx.d.ts +3 -0
  555. package/web/lit/getOutputData.d.ts +2 -0
  556. package/web/lit/hasBlockInCtx.d.ts +3 -0
  557. package/web/lit/l10n.d.ts +5 -0
  558. package/web/lit/parseCssPropertyValue.d.ts +1 -0
  559. package/web/lit/shared-instances.d.ts +65 -0
  560. package/web/locales/file-uploader/ar.d.ts +137 -0
  561. package/web/locales/file-uploader/az.d.ts +129 -0
  562. package/web/locales/file-uploader/ca.d.ts +131 -0
  563. package/web/locales/file-uploader/cs.d.ts +133 -0
  564. package/web/locales/file-uploader/da.d.ts +129 -0
  565. package/web/locales/file-uploader/de.d.ts +129 -0
  566. package/web/locales/file-uploader/el.d.ts +129 -0
  567. package/web/locales/file-uploader/en.d.ts +129 -0
  568. package/web/locales/file-uploader/es.d.ts +131 -0
  569. package/web/locales/file-uploader/et.d.ts +129 -0
  570. package/web/locales/file-uploader/fi.d.ts +129 -0
  571. package/web/locales/file-uploader/fr.d.ts +131 -0
  572. package/web/locales/file-uploader/he.d.ts +131 -0
  573. package/web/locales/file-uploader/hy.d.ts +129 -0
  574. package/web/locales/file-uploader/is.d.ts +129 -0
  575. package/web/locales/file-uploader/it.d.ts +131 -0
  576. package/web/locales/file-uploader/ja.d.ts +129 -0
  577. package/web/locales/file-uploader/ka.d.ts +129 -0
  578. package/web/locales/file-uploader/kk.d.ts +129 -0
  579. package/web/locales/file-uploader/ko.d.ts +129 -0
  580. package/web/locales/file-uploader/lv.d.ts +131 -0
  581. package/web/locales/file-uploader/nb.d.ts +129 -0
  582. package/web/locales/file-uploader/nl.d.ts +129 -0
  583. package/web/locales/file-uploader/pl.d.ts +133 -0
  584. package/web/locales/file-uploader/pt.d.ts +131 -0
  585. package/web/locales/file-uploader/ro.d.ts +131 -0
  586. package/web/locales/file-uploader/ru.d.ts +133 -0
  587. package/web/locales/file-uploader/sk.d.ts +133 -0
  588. package/web/locales/file-uploader/sr.d.ts +131 -0
  589. package/web/locales/file-uploader/sv.d.ts +129 -0
  590. package/web/locales/file-uploader/tr.d.ts +129 -0
  591. package/web/locales/file-uploader/uk.d.ts +133 -0
  592. package/web/locales/file-uploader/vi.d.ts +129 -0
  593. package/web/locales/file-uploader/zh-TW.d.ts +129 -0
  594. package/web/locales/file-uploader/zh.d.ts +129 -0
  595. package/web/plugins/cameraPlugin.d.ts +2 -0
  596. package/web/plugins/cloudImageEditorPlugin.d.ts +2 -0
  597. package/web/plugins/externalSourcesPlugin.d.ts +2 -0
  598. package/web/plugins/imageShrinkPlugin.d.ts +2 -0
  599. package/web/plugins/instagramPlugin.d.ts +2 -0
  600. package/web/plugins/unsplashPlugin.d.ts +16 -0
  601. package/web/plugins/urlSourcePlugin.d.ts +2 -0
  602. package/web/plugins-Bt7FXHKx.js +562 -0
  603. package/web/plugins-CaaolyMk.js +562 -0
  604. package/web/plugins-Cjgw5oWg.js +562 -0
  605. package/web/plugins-CzNtrVQB.js +562 -0
  606. package/web/plugins-DS0hIs2V.js +563 -0
  607. package/web/ref-BOnG19ns.js +4040 -0
  608. package/web/ref-BejJFG7m.js +4040 -0
  609. package/web/ref-DcRg7zo9.js +4040 -0
  610. package/web/ref-ZWPcLQB9.js +4040 -0
  611. package/web/solutions/adaptive-image/index.d.ts +2 -0
  612. package/web/solutions/cloud-image-editor/CloudImageEditor.d.ts +11 -0
  613. package/web/solutions/cloud-image-editor/index.d.ts +5 -0
  614. package/web/solutions/file-uploader/inline/FileUploaderInline.d.ts +20 -0
  615. package/web/solutions/file-uploader/inline/index.d.ts +1 -0
  616. package/web/solutions/file-uploader/minimal/FileUploaderMinimal.d.ts +23 -0
  617. package/web/solutions/file-uploader/minimal/index.d.ts +1 -0
  618. package/web/solutions/file-uploader/regular/FileUploaderRegular.d.ts +17 -0
  619. package/web/solutions/file-uploader/regular/index.d.ts +1 -0
  620. package/web/style-map-BmZdux7T.js +37 -0
  621. package/web/style-map-CZ6fSV6e.js +37 -0
  622. package/web/style-map-Dk7mLCrB.js +37 -0
  623. package/web/style-map-HkHnu9oA.js +37 -0
  624. package/web/style-map-tw1yUEaj.js +37 -0
  625. package/web/types/dom.d.ts +1 -0
  626. package/web/types/events.d.ts +4 -0
  627. package/web/types/exported.d.ts +492 -0
  628. package/web/types/index.d.ts +5 -0
  629. package/web/uc-basic.layered.min.css +6046 -7
  630. package/web/uc-basic.min.css +5487 -6
  631. package/web/uc-cloud-image-editor.layered.min.css +1884 -7
  632. package/web/uc-cloud-image-editor.min.css +1675 -6
  633. package/web/uc-cloud-image-editor.min.js +456 -7
  634. package/web/uc-file-uploader-inline.layered.min.css +4352 -7
  635. package/web/uc-file-uploader-inline.min.css +3836 -6
  636. package/web/uc-file-uploader-inline.min.js +1858 -7
  637. package/web/uc-file-uploader-minimal.layered.min.css +4352 -7
  638. package/web/uc-file-uploader-minimal.min.css +3836 -6
  639. package/web/uc-file-uploader-minimal.min.js +1858 -7
  640. package/web/uc-file-uploader-regular.layered.min.css +4352 -7
  641. package/web/uc-file-uploader-regular.min.css +3836 -6
  642. package/web/uc-file-uploader-regular.min.js +1858 -7
  643. package/web/uc-img.min.js +894 -7
  644. package/web/urlSourcePlugin-9lhcr02f.js +8 -0
  645. package/web/urlSourcePlugin-C-sLGhGb.js +8 -0
  646. package/web/urlSourcePlugin-DNXDpnRD.js +8 -0
  647. package/web/urlSourcePlugin-JnD0cnxb.js +8 -0
  648. package/web/urlSourcePlugin-hcMU2K6T.js +8 -0
  649. package/web/utils/UID.d.ts +5 -0
  650. package/web/utils/UID.test.d.ts +1 -0
  651. package/web/utils/UploadSource.d.ts +37 -0
  652. package/web/utils/WindowHeightTracker.d.ts +9 -0
  653. package/web/utils/abilities.d.ts +1 -0
  654. package/web/utils/applyStyles.d.ts +1 -0
  655. package/web/utils/browser-info.d.ts +12 -0
  656. package/web/utils/browser-info.test.d.ts +1 -0
  657. package/web/utils/cdn-utils.d.ts +53 -0
  658. package/web/utils/cdn-utils.test.d.ts +1 -0
  659. package/web/utils/comma-separated.d.ts +2 -0
  660. package/web/utils/debounce.d.ts +3 -0
  661. package/web/utils/delay.d.ts +1 -0
  662. package/web/utils/fileTypes.d.ts +11 -0
  663. package/web/utils/fileTypes.test.d.ts +1 -0
  664. package/web/utils/get-top-level-origin.d.ts +1 -0
  665. package/web/utils/get-top-level-origin.test.d.ts +1 -0
  666. package/web/utils/getLocaleDirection.d.ts +1 -0
  667. package/web/utils/getPluralForm.d.ts +1 -0
  668. package/web/utils/getPluralForm.test.d.ts +1 -0
  669. package/web/utils/isPromiseLike.d.ts +1 -0
  670. package/web/utils/isPromiseLike.test.d.ts +1 -0
  671. package/web/utils/isSecureTokenExpired.d.ts +8 -0
  672. package/web/utils/isSecureTokenExpired.test.d.ts +1 -0
  673. package/web/utils/memoize.d.ts +1 -0
  674. package/web/utils/memoize.test.d.ts +1 -0
  675. package/web/utils/mixinClass.d.ts +8 -0
  676. package/web/utils/parseCdnUrl.d.ts +11 -0
  677. package/web/utils/parseCdnUrl.test.d.ts +1 -0
  678. package/web/utils/parseShrink.d.ts +7 -0
  679. package/web/utils/parseShrink.test.d.ts +1 -0
  680. package/web/utils/preloadImage.d.ts +10 -0
  681. package/web/utils/prettyBytes.d.ts +11 -0
  682. package/web/utils/prettyBytes.test.d.ts +1 -0
  683. package/web/utils/resizeImage.d.ts +1 -0
  684. package/web/utils/stringToArray.d.ts +1 -0
  685. package/web/utils/stringToArray.test.d.ts +1 -0
  686. package/web/utils/template-utils.d.ts +16 -0
  687. package/web/utils/template-utils.test.d.ts +1 -0
  688. package/web/utils/throttle.d.ts +3 -0
  689. package/web/utils/toKebabCase.d.ts +2 -0
  690. package/web/utils/toKebabCase.test.d.ts +1 -0
  691. package/web/utils/transparentPixelSrc.d.ts +1 -0
  692. package/web/utils/uniqueArray.d.ts +1 -0
  693. package/web/utils/uniqueArray.test.d.ts +1 -0
  694. package/web/utils/userAgent.d.ts +2 -0
  695. package/web/utils/validators/collection/index.d.ts +2 -0
  696. package/web/utils/validators/collection/validateCollectionUploadError.d.ts +2 -0
  697. package/web/utils/validators/collection/validateMultiple.d.ts +2 -0
  698. package/web/utils/validators/file/index.d.ts +4 -0
  699. package/web/utils/validators/file/validateFileType.d.ts +2 -0
  700. package/web/utils/validators/file/validateIsImage.d.ts +2 -0
  701. package/web/utils/validators/file/validateMaxSizeLimit.d.ts +2 -0
  702. package/web/utils/validators/file/validateUploadError.d.ts +2 -0
  703. package/web/utils/warnOnce.d.ts +1 -0
  704. package/web/utils/wildcardRegexp.d.ts +1 -0
  705. package/web/utils/wildcardRegexp.test.d.ts +1 -0
  706. package/web/utils/withResolvers.d.ts +5 -0
  707. package/web/utils/withResolvers.test.d.ts +1 -0
  708. package/dist/index.ssr.js +0 -1538
  709. package/web/file-uploader.iife.min.d.ts +0 -2859
  710. package/web/file-uploader.iife.min.js.LEGAL.txt +0 -71
  711. package/web/file-uploader.min.d.ts +0 -2859
  712. package/web/file-uploader.min.js.LEGAL.txt +0 -71
  713. package/web/uc-cloud-image-editor.min.d.ts +0 -2816
  714. package/web/uc-cloud-image-editor.min.js.LEGAL.txt +0 -70
  715. package/web/uc-file-uploader-inline.min.d.ts +0 -2859
  716. package/web/uc-file-uploader-inline.min.js.LEGAL.txt +0 -71
  717. package/web/uc-file-uploader-minimal.min.d.ts +0 -2859
  718. package/web/uc-file-uploader-minimal.min.js.LEGAL.txt +0 -71
  719. package/web/uc-file-uploader-regular.min.d.ts +0 -2859
  720. package/web/uc-file-uploader-regular.min.js.LEGAL.txt +0 -71
  721. package/web/uc-img.min.d.ts +0 -75
  722. package/web/uc-img.min.js.LEGAL.txt +0 -24
@@ -1,7 +1,4352 @@
1
- /**
2
- * @license
3
- * Package: @uploadcare/file-uploader@1.27.1 (MIT)
4
- * License: https://github.com/uploadcare/blob/main/LICENSE
5
- * Built: 2026-02-16T22:57:48.623Z
6
- */
7
- @layer uc,uc.base,uc.components,uc.rules,uc.solutions,uc.post-reset,uc.base,uc.rules,uc.post-reset;@layer uc.components{uc-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--uc-button-size);height:var(--uc-button-size)}uc-icon svg{width:calc(var(--uc-button-size) / 2);height:calc(var(--uc-button-size) / 2);overflow:visible}}@layer uc.components{@supports selector(dialog::backdrop){:where([uc-modal])>dialog::backdrop{background-color:#0000001a}:where([uc-modal])[strokes]>dialog::backdrop{background-image:var(--modal-backdrop-background-image)}}:where([uc-modal])>dialog[open]{transform:translateY(0);visibility:visible;opacity:1}:where([uc-modal])>dialog:not([open]){transform:translateY(20px);visibility:hidden;opacity:0}:where([uc-modal])>dialog{display:flex;flex-direction:column;width:min(var(--uc-dialog-width),100%);max-width:min(calc(100% - var(--uc-padding) * 2),var(--uc-dialog-max-width));min-height:var(--uc-button-size);max-height:min(calc(100% - var(--uc-padding) * 2),var(--uc-dialog-max-height));margin:auto;padding:0;overflow:hidden;background-color:var(--uc-background);border:0;border-radius:calc(var(--uc-radius) * 1.75);box-shadow:var(--uc-dialog-shadow);transition:transform .4s ease,opacity .4s ease}:where(.uc-contrast) :where([uc-modal])>dialog{outline:1px solid var(--uc-border)}}@layer uc.components{uc-copyright{display:flex;width:100%;justify-content:center}uc-copyright .uc-credits{all:unset;position:absolute;bottom:12px;background-color:var(--uc-background);padding:2px 5px;border-radius:6px;color:var(--uc-muted-foreground);font-weight:400;font-size:12px;opacity:.9;cursor:pointer;transition:opacity var(--uc-transition),background-color var(--uc-transition)}uc-copyright .uc-credits:focus-visible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}uc-copyright .uc-credits:hover{opacity:1;background-color:var(--uc-muted)}}@layer uc.components{uc-progress-bar{--visible-opacity: 1;--l-progress-value: 0;position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;transition:opacity .3s;opacity:1}uc-progress-bar.uc-progress-bar--hidden{opacity:0}uc-progress-bar .uc-progress{position:absolute;width:calc(var(--l-progress-value) * 1%);height:100%;background-color:var(--uc-primary);transform:translate(0);opacity:var(--visible-opacity);transition:width .6s,opacity .3s}uc-progress-bar .uc-progress--hidden{opacity:0;transition:opacity .3s}uc-progress-bar .uc-fake-progress{--l-fake-progress-width: 30;position:absolute;width:calc(var(--l-fake-progress-width) * 1%);height:100%;background-color:var(--uc-primary);animation:fake-progress-animation 1s ease-in-out infinite;opacity:var(--visible-opacity);transition:opacity .3s;z-index:1}uc-progress-bar .uc-fake-progress--hidden{opacity:0;animation:none}@keyframes fake-progress-animation{0%{transform:translate(-100%)}to{transform:translate(calc(100 / var(--l-fake-progress-width) * 100 * 1%))}}}@layer uc.components{uc-progress-bar-common{position:fixed;right:0;bottom:0;left:0;z-index:10000;display:block;height:10px;background-color:var(--uc-background);transition:opacity .3s}uc-progress-bar-common:not([active]){opacity:0;pointer-events:none}}@layer uc.components{uc-select{display:inline-flex}uc-select select{position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--uc-button-size);padding:0 14px;font-size:1em;font-family:inherit;white-space:nowrap;border:none;border-radius:var(--uc-radius);cursor:pointer;user-select:none;transition:background-color var(--uc-transition);color:var(--uc-secondary-foreground);background-color:var(--uc-secondary)}}@layer uc.components{uc-source-btn>button{display:flex;align-items:center;margin-bottom:2px;padding:2px var(--uc-padding);color:var(--uc-foreground);border-radius:var(--uc-radius);cursor:pointer;transition:background-color var(--uc-transition),color var(--uc-transition);user-select:none;width:100%;background-color:unset;height:unset}uc-source-btn:last-child>button{margin-bottom:0}uc-source-btn>button:hover{background-color:var(--uc-primary-transparent)}:where(.uc-contrast) uc-source-btn>button:hover{background-color:var(--uc-secondary);color:var(--uc-foreground)}uc-source-btn uc-icon{display:inline-flex;flex-grow:1;justify-content:center;min-width:var(--uc-button-size);margin-right:var(--uc-padding);opacity:.8}:where(.uc-contrast) uc-source-btn uc-icon{opacity:1}uc-source-btn .uc-txt{display:flex;align-items:center;box-sizing:border-box;width:100%;height:var(--uc-button-size);padding:0;white-space:nowrap;border:none}}@layer uc.components{@keyframes uc-spinner-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.uc-spinner{width:1em;height:1em;border:solid 2px transparent;border-top-color:currentColor;border-left-color:currentColor;border-radius:50%;animation:uc-spinner-keyframes .4s linear infinite}}@layer uc.components{uc-thumb{width:100%;height:100%}.uc-thumb{position:relative;overflow:hidden;width:100%;height:100%}.uc-thumb__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}}@layer uc.components{uc-activity-header{display:flex;justify-content:space-between;gap:var(--uc-padding);padding:var(--uc-padding);color:var(--uc-foreground);font-weight:500;font-size:1em}uc-activity-header>*{display:flex;align-items:center}uc-activity-header>div>uc-icon{width:auto}uc-activity-header>div{gap:var(--uc-padding)}}@layer uc.components{uc-start-from{display:block;overflow-y:auto}uc-start-from .uc-content{display:grid;grid-auto-flow:row;gap:calc(var(--uc-padding) * 2);width:100%;height:100%;padding:calc(var(--uc-padding) * 2);background-color:var(--uc-background)}[uc-modal]>dialog:has(uc-start-from[active]){width:var(--uc-dialog-width)}[uc-modal] uc-start-from uc-drop-area{border-radius:var(--uc-radius)}@media only screen and (max-width:430px){[uc-modal] uc-start-from uc-drop-area{display:none}}}@layer uc.components{uc-upload-list{position:relative;display:flex;flex-direction:column;width:100%;height:max-content;overflow:hidden;background-color:var(--uc-background);transition:opacity var(--uc-transition)}uc-upload-list .uc-no-files{height:32px;padding:20px}uc-upload-list .uc-files{display:block;flex:1;min-height:32px;padding:0 var(--uc-padding);overflow:auto}uc-upload-list .uc-files-wrapper{display:contents}uc-upload-list .uc-toolbar{display:flex;gap:4px;justify-content:space-between;padding:var(--uc-padding);background-color:var(--uc-background)}uc-upload-list .uc-toolbar-spacer{flex:1}uc-upload-list uc-drop-area{position:absolute;top:0;left:0;width:calc(100% - var(--uc-padding) * 2);height:calc(100% - var(--uc-padding) * 2);margin:var(--uc-padding);border-radius:var(--uc-radius)}uc-upload-list uc-activity-header>.uc-header-text{padding:0 var(--uc-padding)}uc-upload-list .uc-common-error{border-radius:var(--uc-radius);color:var(--uc-destructive-foreground);background-color:var(--uc-destructive);display:flex;align-items:center;justify-content:center;padding:var(--uc-padding);margin:4px var(--uc-padding) 0 var(--uc-padding);font-size:.925em}uc-upload-list .uc-add-more-btn uc-icon{display:none}uc-upload-list[mode=grid] .uc-files{display:flex;flex-wrap:wrap;gap:var(--uc-grid-gap)}uc-upload-list .uc-files .uc-add-more-btn,uc-upload-list[mode=grid] uc-file-item{flex:0 0 calc((100% - (var(--uc-grid-gap) * (var(--uc-grid-col) - 1))) / var(--uc-grid-col));max-width:calc((100% - (var(--uc-grid-gap) * (var(--uc-grid-col) - 1))) / var(--uc-grid-col));height:var(--uc-grid-preview-image-height);aspect-ratio:var(--uc-grid-aspect-ratio)}uc-upload-list .uc-files .uc-add-more-btn{display:none}}@layer uc.components{uc-file-item{--uc-file-item-gap: 4px;--uc-file-item-height: calc(var(--uc-preview-size) + var(--uc-padding) * 2 + var(--uc-file-item-gap));display:block;overflow:hidden;min-height:var(--uc-file-item-height)}uc-file-item:last-of-type{--uc-file-item-gap: 0}uc-file-item>.uc-inner{position:relative;display:grid;grid-template-columns:var(--uc-preview-size) 1fr max-content;gap:2px;align-items:center;margin-bottom:var(--uc-file-item-gap);padding:var(--uc-padding);overflow:hidden;font-size:.925em;background-color:var(--uc-muted);border-radius:var(--uc-radius);transition:background-color var(--uc-transition)}uc-file-item>.uc-inner[data-focused]{background-color:transparent}uc-file-item>.uc-inner[data-uploading] .uc-edit-btn{display:none}uc-file-item>:where(.uc-inner[data-failed],.uc-inner[data-limit-overflow]){background-color:var(--uc-destructive)}uc-file-item .uc-thumb{position:relative;display:inline-flex;width:var(--uc-preview-size);height:var(--uc-preview-size);background-color:var(--uc-secondary);background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:var(--uc-radius)}uc-file-item .uc-file-name-wrapper{text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:100%;padding-right:var(--uc-padding);padding-left:var(--uc-padding);overflow:hidden;color:var(--uc-muted-foreground)}uc-file-item .uc-file-name{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}uc-file-item .uc-file-error{display:none;color:var(--uc-destructive-foreground);font-size:.85em;z-index:2}uc-file-item button.uc-remove-btn,uc-file-item button.uc-edit-btn{color:var(--uc-muted-foreground)}uc-file-item button svg{pointer-events:none}uc-file-item button.uc-upload-btn{display:none}uc-file-item .uc-badge{position:absolute;bottom:2px;right:2px;width:14px;height:14px;color:var(--uc-background);background-color:var(--uc-foreground);border-radius:50%;transform:scale(.3);opacity:0;transition:opacity var(--uc-transition),transform var(--uc-transition);display:flex;justify-content:center;align-items:center}uc-file-item>.uc-inner:where([data-failed],[data-limit-overflow],[data-finished]) .uc-badge{transform:scale(1);opacity:1}uc-file-item>.uc-inner:where([data-failed],[data-limit-overflow]) .uc-badge{background-color:var(--uc-destructive-foreground)}uc-file-item>.uc-inner:where([data-failed],[data-limit-overflow]) .uc-file-error{display:block}uc-file-item .uc-badge uc-icon,uc-file-item .uc-badge uc-icon svg{width:100%;height:100%}uc-file-item .uc-progress-bar{--visible-opacity: .7;top:calc(100% - 2px);height:2px}:where(.uc-contrast) uc-file-item .uc-progress-bar{--visible-opacity: 1}uc-file-item .uc-file-actions{display:flex;gap:2px;align-items:center;justify-content:center}uc-file-item[mode=grid]{overflow:visible;min-height:initial}uc-file-item[mode=grid] .uc-inner{height:100%;grid-template-columns:1fr;grid-template-rows:1fr max-content;padding:0;background-color:transparent;margin-bottom:0;border-radius:0}uc-file-item[mode=grid] .uc-inner[data-failed] .uc-badge{display:none}uc-file-item[mode=grid] .uc-thumb{width:100%;height:100%}uc-file-item[mode=grid] .uc-badge{right:var(--uc-padding);bottom:var(--uc-padding)}uc-file-item[mode=grid] .uc-file-name-wrapper{padding:0}uc-file-item[mode=grid] .uc-file-name:not([hidden])+.uc-file-error{bottom:calc(var(--uc-padding) + var(--uc-font-size))}uc-file-item[mode=grid] .uc-file-error{position:absolute;background-color:var(--uc-destructive-foreground);border-radius:var(--uc-radius);color:var(--uc-background);bottom:var(--uc-padding);left:var(--uc-padding);right:var(--uc-padding);padding:calc(var(--uc-padding) / 2) var(--uc-padding)}uc-file-item[mode=grid] .uc-file-hint{position:absolute;background-color:var(--uc-background);border-radius:var(--uc-radius);color:var(--uc-foreground);bottom:calc(var(--uc-padding) * 2);left:var(--uc-padding);right:var(--uc-padding);padding:calc(var(--uc-padding) / 2) var(--uc-padding)}uc-file-item[mode=grid] .uc-file-actions{position:absolute;top:var(--uc-padding);right:var(--uc-padding)}uc-file-item[mode=grid] button{background-color:var(--uc-background)}uc-file-item[mode=grid] button:hover{background-color:var(--uc-muted)}uc-file-item[mode=grid] .uc-progress-bar{width:initial;height:4px;top:initial;bottom:var(--uc-padding);left:var(--uc-padding);right:var(--uc-padding);border-radius:var(--uc-radius);z-index:1;transition:background-color .3s,opacity .3s;background-color:var(--uc-background)}uc-file-item[mode=grid] .uc-progress-bar :is(.uc-fake-progress,.uc-progress){background-color:var(--uc-primary)}uc-file-item[mode=grid] .uc-progress-bar[hasfilename]{bottom:calc(var(--uc-padding) + var(--uc-font-size))}}@layer uc.components{:where([uc-drop-area]){padding:2px;overflow:hidden;border:1px dashed var(--uc-border);border-radius:calc(var(--uc-radius) * 1.75);transition:border var(--uc-transition),border-radius var(--uc-transition)}:where([uc-drop-area]),:where([uc-drop-area]) .uc-content-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%}:where([uc-drop-area]) .uc-text{position:relative;margin:var(--uc-padding);color:var(--uc-muted-foreground);transition:color var(--uc-transition)}:where([uc-drop-area])[ghost][drag-state=inactive]{display:none}:where([uc-drop-area])[ghost]:not([fullscreen]):is([drag-state=active],[drag-state=near],[drag-state=over]){background:var(--uc-background)}:where([uc-drop-area]):is([drag-state=active],[drag-state=near],[drag-state=over],:hover){background:var(--uc-primary-transparent);border-color:var(--uc-primary-transparent)}:where(.uc-contrast) :where([uc-drop-area]):is([drag-state=active],[drag-state=near],[drag-state=over],:hover){color:var(--uc-foreground);background:transparent;border-color:var(--uc-foreground);border-width:2px;border-style:solid}:where([uc-drop-area]):is([drag-state=active],[drag-state=near]){opacity:1}:where([uc-drop-area])[drag-state=over]{border-color:var(--uc-primary);opacity:1}:where([uc-drop-area])[with-icon]{min-height:180px}:where([uc-drop-area])[with-icon] .uc-content-wrapper{display:flex;flex-direction:column}:where([uc-drop-area])[with-icon] .uc-text{color:var(--uc-foreground);font-weight:500;font-size:1.1em}:where([uc-drop-area])[with-icon] .uc-icon-container{position:relative;width:64px;height:64px;margin:var(--uc-padding);overflow:hidden;color:var(--uc-foreground);background-color:var(--uc-muted);border-radius:50%;transition:color var(--uc-transition),background-color var(--uc-transition)}:where([uc-drop-area])[with-icon] uc-icon{position:absolute;width:32px;height:32px;top:calc(50% - 16px);left:calc(50% - 16px);transition:transform var(--uc-transition)}:where([uc-drop-area])[with-icon] uc-icon:last-child{transform:translateY(48px)}:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-icon-container,:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-text{color:var(--uc-foreground)}:where([uc-drop-area])[with-icon]:hover .uc-icon-container{background-color:var(--uc-primary-transparent)}:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-icon-container{background-color:var(--uc-muted)}:where([uc-drop-area])[with-icon]>.uc-content-wrapper:is([drag-state=active],[drag-state=near],[drag-state=over]) .uc-icon-container{color:var(--uc-primary-foreground);background-color:var(--uc-primary)}:where([uc-drop-area])[with-icon]>.uc-content-wrapper:is([drag-state=active],[drag-state=near],[drag-state=over]) .uc-text{color:var(--uc-foreground)}:where(.uc-contrast) :where([uc-drop-area])[with-icon]>.uc-content-wrapper:is([drag-state=active],[drag-state=near],[drag-state=over]) .uc-text{color:var(--uc-foreground)}:where([uc-drop-area])[with-icon]>.uc-content-wrapper:is([drag-state=active],[drag-state=near],[drag-state=over]) uc-icon:first-child{transform:translateY(-48px)}:where([uc-drop-area])[with-icon]>.uc-content-wrapper:is([drag-state=active],[drag-state=near],[drag-state=over]) uc-icon:last-child{transform:translateY(0)}:where([uc-drop-area])[with-icon]>.uc-content-wrapper[drag-state=near] uc-icon:last-child{transform:scale(1.3)}:where([uc-drop-area])[with-icon]>.uc-content-wrapper[drag-state=over] uc-icon:last-child{transform:scale(1.5)}:where([uc-drop-area])[fullscreen]{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;width:calc(100vw - var(--uc-padding) * 2);height:calc(100vh - var(--uc-padding) * 2);margin:var(--uc-padding)}:where([uc-drop-area])[fullscreen] .uc-content-wrapper{width:100%;max-width:calc(var(--uc-dialog-width) * .8);height:180px;color:var(--uc-foreground);background-color:var(--uc-background);border-radius:calc(var(--uc-radius) * 1.75);box-shadow:var(--uc-dialog-shadow);transition:color var(--uc-transition),background-color var(--uc-transition),box-shadow var(--uc-transition),border-radius var(--uc-transition),transform var(--uc-transition)}:where([uc-drop-area])[with-icon][fullscreen][drag-state=active]>.uc-content-wrapper,:where([uc-drop-area])[with-icon][fullscreen][drag-state=near]>.uc-content-wrapper{transform:translateY(10px);opacity:0}:where([uc-drop-area])[with-icon][fullscreen][drag-state=over]>.uc-content-wrapper{transform:translateY(0);opacity:1}:is(:where([uc-drop-area])[with-icon][fullscreen])>.uc-content-wrapper uc-icon:first-child{transform:translateY(-48px)}:where([uc-drop-area])[clickable]{cursor:pointer}}@layer uc.components{uc-url-source{display:block;background-color:var(--uc-background)}uc-url-source>.uc-content{display:grid;gap:4px;grid-template-columns:1fr min-content;padding:var(--uc-padding);padding-top:0}uc-url-source .uc-url-input{display:flex}}@layer uc.components{uc-camera-source{position:relative;display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden;background-color:var(--uc-background);border-radius:var(--uc-radius)}[uc-modal]>dialog:has(uc-camera-source[active]){width:100%;height:100%}uc-camera-source video{display:block;width:100%;max-height:100%;object-fit:contain;object-position:center center;background-color:var(--uc-muted);border-radius:var(--uc-radius)}uc-camera-source .uc-toolbar{position:absolute;bottom:0;display:flex;justify-content:space-between;width:100%;padding:var(--uc-padding);background-color:var(--uc-background)}uc-camera-source .uc-content{display:flex;flex:1;justify-content:center;width:100%;height:100%;padding:var(--uc-padding);padding-top:0;overflow:hidden}uc-camera-source .uc-message-box{display:flex;flex-direction:column;gap:40px;align-items:center;justify-content:center;padding:40px 40px 0;color:var(--uc-foreground)}uc-camera-source .uc-message-box button{color:var(--uc-primary-foreground);background-color:var(--uc-primary)}uc-camera-source .uc-shot-btn{width:58px;height:58px;color:var(--uc-background);background-color:var(--uc-primary-light);border-radius:50%;opacity:.85;transition:bottom var(--uc-transition),opacity var(--uc-transition),transform var(--uc-transition)}uc-camera-source .uc-shot-btn:hover{transform:scale(1.05);opacity:1}uc-camera-source .uc-shot-btn:active{transform:scale(1);opacity:1}uc-camera-source .uc-shot-btn[disabled]{bottom:-80px}uc-camera-source .uc-shot-btn uc-icon svg{width:20px;height:20px}uc-camera-source .uc-controls{position:relative;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;padding:0 var(--uc-padding) var(--uc-padding);min-height:74px}uc-camera-source:not(.uc-initialized) .uc-controls{display:none}uc-camera-source .uc-switcher{display:flex;gap:calc(var(--uc-padding) / 2)}uc-camera-source .uc-switch.uc-active{background-color:var(--uc-secondary)}uc-camera-source .uc-camera-actions{display:flex;justify-content:center;align-items:center;gap:5px}uc-camera-source .uc-stop-record{background-color:var(--uc-destructive-foreground-light);opacity:1}:where(uc-camera-source:is(.uc-recording)) .uc-recording-timer uc-icon{display:none}:where(uc-camera-source:is(.uc-recording)) .uc-recording-timer{pointer-events:none}uc-camera-source .uc-recording-timer{z-index:1;position:relative;overflow:hidden}:where(uc-camera-source) .uc-recording-timer uc-icon{width:10px;height:10px;margin-right:10px}uc-camera-source .uc-recording-timer .uc-line{position:absolute;content:"";bottom:0;left:0;right:0;height:2px;background-color:var(--uc-foreground-light);transform:scaleX(0);transform-origin:left;transition:transform var(--uc-transition)}uc-camera-source .uc-btn-microphone{z-index:1}uc-camera-source .uc-select{display:flex}uc-camera-source .uc-audio-select{width:98px}uc-camera-source .uc-audio-select select{width:100%}uc-camera-source .uc-camera-action{position:absolute;inset:0 var(--uc-padding) var(--uc-padding);margin:0 auto}}@layer uc.solutions{[uc-cloud-image-editor]{--color-primary-accent: var(--uc-primary);--color-text-base: var(--uc-foreground);--color-text-accent-contrast: var(--uc-background);--color-fill-contrast: var(--uc-background);--color-modal-backdrop: oklch(0% 0 0 / .1);--color-image-background: var(--uc-muted);--color-focus-ring: var(--color-primary-accent);--color-crop-guides: var(--uc-foreground);--font-size-ui: var(--uc-font-size);--size-touch-area: var(--uc-button-size);--size-panel-heading: calc(var(--uc-button-size) + var(--uc-padding) * 2);--size-ui-min-width: 130px;--size-line-width: 1px;--size-modal-width: 650px;--size-icon: calc(var(--uc-button-size) / 2);--border-radius-editor: var(--uc-radius);--border-radius-thumb: var(--uc-radius);--border-radius-ui: var(--uc-radius);--border-radius-base: var(--uc-radius);--cldtr-gap-min: 5px;--cldtr-gap-mid-1: 10px;--cldtr-gap-mid-2: 15px;--cldtr-gap-max: 20px;--transition-duration-2: var(--transition-duration-all, .2s);--transition-duration-3: var(--transition-duration-all, .3s);--transition-duration-4: var(--transition-duration-all, .4s);--transition-duration-5: var(--transition-duration-all, .5s);--modal-header-opacity: 1;--modal-header-height: var(--size-panel-heading);--modal-toolbar-height: var(--size-panel-heading);--transparent-pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);display:block;width:100%;height:100%;max-height:100%}[uc-cloud-image-editor] :is([can-handle-paste]:hover,[can-handle-paste]:focus){--can-handle-paste: "true"}[uc-cloud-image-editor] :is([tabindex]:focus-visible,[tabindex]:hover,[with-effects]:focus-visible,[with-effects]:hover){--filter-effect: var(--hover-filter) !important;--opacity-effect: var(--hover-opacity) !important;--color-effect: var(--hover-color-rgb) !important;--background-effect: var(--hover-background) !important}[uc-cloud-image-editor] :is([tabindex]:active,[with-effects]:active){--filter-effect: var(--down-filter) !important;--opacity-effect: var(--down-opacity) !important;--color-effect: var(--down-color-rgb) !important;--background-effect: var(--down-background) !important}[uc-cloud-image-editor] :is([tabindex][active],[with-effects][active]){--filter-effect: var(--active-filter) !important;--opacity-effect: var(--active-opacity) !important;--color-effect: var(--active-color-rgb) !important;--background-effect: var(--active-background) !important}[uc-cloud-image-editor] [hidden-scrollbar]::-webkit-scrollbar{display:none}[uc-cloud-image-editor] [hidden-scrollbar]{-ms-overflow-style:none;scrollbar-width:none}[uc-cloud-image-editor].uc-editor_ON{--modal-header-opacity: 0;--modal-header-height: 0px;--modal-toolbar-height: calc(var(--size-panel-heading) * 2)}[uc-cloud-image-editor].uc-editor_OFF{--modal-header-opacity: 1;--modal-header-height: var(--size-panel-heading);--modal-toolbar-height: var(--size-panel-heading)}[uc-cloud-image-editor]>.uc-wrapper{--l-min-img-height: var(--modal-toolbar-height);--l-max-img-height: 100%;--l-edit-button-width: 120px;--l-toolbar-horizontal-padding: var(--cldtr-gap-mid-1);position:relative;display:grid;grid-template-rows:minmax(var(--l-min-img-height),var(--l-max-img-height)) minmax(var(--modal-toolbar-height),auto);height:100%;overflow:hidden;overflow-y:auto}@media only screen and (max-width:800px){[uc-cloud-image-editor]>.uc-wrapper{--l-edit-button-width: 70px;--l-toolbar-horizontal-padding: var(--cldtr-gap-min)}}[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport{display:flex;align-items:center;justify-content:center;overflow:hidden}[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-image_container>.uc-image{--viewer-image-opacity: 1;position:absolute;top:0;left:0;z-index:10;display:block;box-sizing:border-box;width:100%;height:100%;object-fit:scale-down;background-color:var(--color-image-background);transform:scale(1);opacity:var(--viewer-image-opacity);user-select:none;pointer-events:auto}[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-image_container>.uc-image.uc-image_visible_viewer{transition:opacity var(--transition-duration-3) ease-in-out,transform var(--transition-duration-4)}[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-image_container>.uc-image.uc-image_hidden_to_cropper{--viewer-image-opacity: 0;background-image:var(--transparent-pixel);transform:scale(1);transition:transform var(--transition-duration-4),opacity var(--transition-duration-3) steps(1,jump-end);pointer-events:none}[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-image_container>.uc-image.uc-image_hidden_effects{--viewer-image-opacity: 0;transform:scale(1);transition:opacity var(--transition-duration-3) cubic-bezier(.5,0,1,1),transform var(--transition-duration-4);pointer-events:none}[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-image_container{position:relative;display:block;width:100%;height:100%;background-color:var(--color-image-background);transition:var(--transition-duration-3)}[uc-cloud-image-editor]>.uc-wrapper>.uc-toolbar{position:relative;transition:.3s}[uc-cloud-image-editor]>.uc-wrapper>.uc-toolbar>.uc-toolbar_content{position:absolute;bottom:0;left:0;box-sizing:border-box;width:100%;height:var(--modal-toolbar-height);min-height:var(--size-panel-heading);background-color:var(--color-fill-contrast)}[uc-cloud-image-editor]>.uc-wrapper>.uc-toolbar>.uc-toolbar_content.uc-toolbar_content__viewer{display:flex;align-items:center;justify-content:space-between;height:var(--size-panel-heading);padding-right:var(--l-toolbar-horizontal-padding);padding-left:var(--l-toolbar-horizontal-padding)}[uc-cloud-image-editor]>.uc-wrapper>.uc-toolbar>.uc-toolbar_content.uc-toolbar_content__editor{display:flex}[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-info_pan{position:absolute;user-select:none}[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-file_type_outer{position:absolute;z-index:2;display:flex;max-width:120px;transform:translate(-40px);user-select:none}[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-file_type_outer>.uc-file_type{padding:4px .8em}[uc-cloud-image-editor]>.uc-wrapper>.uc-network_problems_splash{position:absolute;z-index:999;display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--color-fill-contrast)}[uc-cloud-image-editor]>.uc-wrapper>.uc-network_problems_splash>.uc-network_problems_content{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center}[uc-cloud-image-editor]>.uc-wrapper>.uc-network_problems_splash>.uc-network_problems_content>.uc-network_problems_icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--uc-foreground);background-color:var(--uc-muted);border-radius:50%}[uc-cloud-image-editor]>.uc-wrapper>.uc-network_problems_splash>.uc-network_problems_content>.uc-network_problems_text{margin-top:var(--cldtr-gap-max);font-size:var(--font-size-ui);color:var(--uc-foreground)}[uc-cloud-image-editor]>.uc-wrapper>.uc-network_problems_splash>.uc-network_problems_footer{display:flex;align-items:center;justify-content:center;height:var(--size-panel-heading)}uc-crop-frame>.uc-svg{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;border-top-left-radius:var(--border-radius-base);border-top-right-radius:var(--border-radius-base);opacity:inherit;transition:var(--transition-duration-3)}uc-crop-frame>.uc-thumb{--idle-color-rgb: var(--color-text-base);--hover-color-rgb: var(--color-primary-accent);--focus-color-rgb: var(--color-primary-accent);--down-color-rgb: var(--color-primary-accent);--color-effect: var(--idle-color-rgb);color:var(--color-effect);transition:color var(--transition-duration-3),opacity var(--transition-duration-3)}uc-crop-frame .uc-thumb--visible{opacity:1;pointer-events:auto}uc-crop-frame .uc-thumb--hidden{opacity:0;pointer-events:none}uc-crop-frame .uc-guides{transition:var(--transition-duration-3)}uc-crop-frame .uc-guides--hidden{opacity:0}uc-crop-frame .uc-guides--semi-hidden{opacity:.2}uc-crop-frame .uc-guides--visible{opacity:1}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{--l-base-min-width: var(--uc-button-size);--l-base-height: var(--uc-button-size);--opacity-effect: var(--idle-opacity);--color-effect: var(--idle-color-rgb);--background-effect: var(--idle-background);--filter-effect: var(--idle-filter);--idle-color-rgb: var(--uc-secondary-foreground);--idle-opacity: 1;--idle-filter: 1;--idle-background: var(--uc-secondary);--hover-color-rgb: var(--uc-secondary-foreground);--hover-opacity: 1;--hover-filter: .8;--hover-background: var(--uc-secondary-hover);--down-color-rgb: var(--hover-color-rgb);--down-opacity: 1;--down-filter: .6;--down-background: var(--uc-secondary);border-radius:var(--uc-radius)}uc-editor-button-control>button,uc-editor-crop-button-control>button,uc-editor-aspect-ratio-button-control>button,uc-editor-freeform-button-control>button,uc-editor-filter-control>button,uc-editor-operation-control>button{all:unset;position:relative;display:grid;grid-template-columns:var(--l-base-min-width) auto;grid-template-rows:100%;align-items:center;height:var(--l-base-height);color:var(--color-effect);opacity:var(--opacity-effect);cursor:pointer;transition:var(--l-width-transition)}uc-editor-freeform-button-control>button{grid-template-columns:auto var(--l-base-min-width)}uc-editor-freeform-button-control>button>uc-icon{margin-left:var(--cldtr-gap-mid-1);width:10px}: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{width:var(--size-icon);height:var(--size-icon)}uc-editor-filter-control>uc-icon.uc-original-icon>svg{width:100%;height:100%}uc-editor-button-control.uc-active,uc-editor-operation-control.uc-active,uc-editor-crop-button-control.uc-active,uc-editor-aspect-ratio-button-control.uc-active,uc-editor-freeform-button-control.uc-active,uc-editor-filter-control.uc-active{--idle-color-rgb: var(--uc-primary-foreground);--idle-background: var(--uc-primary);--idle-opacity: 1;--hover-color-rgb: var(--uc-primary-foreground);--hover-background: var(--uc-primary);--hover-opacity: 1}uc-editor-button-control.uc-not_active,uc-editor-operation-control.uc-not_active,uc-editor-crop-button-control.uc-not_active,uc-editor-aspect-ratio-button-control.uc-not_active,uc-editor-freeform-button-control.uc-not_active,uc-editor-filter-control.uc-not_active{--idle-color-rgb: var(--uc-secondary-foreground)}:where(.uc-contrast) uc-editor-button-control.uc-not_active,:where(.uc-contrast) uc-editor-operation-control.uc-not_active,:where(.uc-contrast) uc-editor-crop-button-control.uc-not_active,:where(.uc-contrast) uc-editor-freeform-button-control.uc-not_active,:where(.uc-contrast) uc-editor-aspect-ratio-button-control.uc-not_active,:where(.uc-contrast) uc-editor-filter-control.uc-not_active{--idle-background: transparent;--hover-background: var(--uc-secondary);outline:1px solid var(--uc-border);outline-offset:-1px}uc-editor-button-control>button:before,uc-editor-operation-control>button:before,uc-editor-crop-button-control>button:before,uc-editor-freeform-button-control>button:before,uc-editor-aspect-ratio-button-control>button:before,uc-editor-filter-control>button:before{position:absolute;content:"";right:0;left:0;z-index:-1;width:100%;height:100%;background-color:var(--background-effect);border-radius:var(--border-radius-editor);transition:var(--transition-duration-3)}uc-editor-button-control>button .uc-title,uc-editor-operation-control>button .uc-title,uc-editor-crop-button-control>button .uc-title,uc-editor-aspect-ratio-button-control>button .uc-title,uc-editor-freeform-button-control>button .uc-title,uc-editor-filter-control>button .uc-title{padding-right:var(--cldtr-gap-mid-1);font-size:.7em;letter-spacing:1.004px;text-transform:uppercase}uc-editor-freeform-button-control>button .uc-title{padding-left:var(--cldtr-gap-mid-1);padding-right:0}uc-editor-button-control>button uc-icon,uc-editor-operation-control>button uc-icon,uc-editor-crop-button-control>button uc-icon,uc-editor-aspect-ratio-button-control>button uc-icon,uc-editor-freeform-button-control>button uc-icon,uc-editor-filter-control>button uc-icon{pointer-events:none}uc-editor-filter-control>button .uc-preview{position:absolute;right:0;left:0;z-index:-1;width:100%;height:var(--l-base-height);background-repeat:no-repeat;background-size:contain;border-radius:var(--border-radius-editor);opacity:0;filter:brightness(var(--filter-effect));transition:var(--transition-duration-3)}uc-editor-filter-control.uc-not_active .uc-preview[data-loaded]{opacity:1}uc-editor-filter-control.uc-active .uc-preview{opacity:0}uc-editor-filter-control>.uc-original-icon{color:var(--color-effect);opacity:.3}uc-editor-image-cropper{position:absolute;top:0;left:0;z-index:10;display:block;width:100%;height:100%;opacity:0;pointer-events:none;touch-action:none;color:var(--color-crop-guides)}uc-editor-image-cropper.uc-active_from_editor{transform:scale(1) translate(0);opacity:1;transition:transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1) .4s,opacity var(--transition-duration-3);pointer-events:auto}uc-editor-image-cropper.uc-active_from_viewer{transform:scale(1) translate(0);opacity:1;transition:transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1) .4s,opacity var(--transition-duration-3);pointer-events:auto}uc-editor-image-cropper.uc-inactive_to_editor{opacity:0;transition:transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1),opacity var(--transition-duration-3) calc(var(--transition-duration-3) + .05s);pointer-events:none}uc-editor-image-cropper>.uc-canvas{position:absolute;top:0;left:0;z-index:1;display:block;width:100%;height:100%}uc-editor-image-fader{position:absolute;top:0;left:0;display:block;width:100%;height:100%}uc-editor-image-fader.uc-active_from_viewer{z-index:3;transform:scale(1);opacity:1;transition:transform var(--transition-duration-4),opacity var(--transition-duration-3) steps(1,jump-start);pointer-events:auto}uc-editor-image-fader.uc-active_from_cropper{z-index:3;transform:scale(1);opacity:1;transition:transform var(--transition-duration-4),opacity var(--transition-duration-3) steps(1,jump-end);pointer-events:auto}uc-editor-image-fader.uc-inactive_to_cropper{z-index:3;transform:scale(1);opacity:0;transition:transform var(--transition-duration-4),opacity var(--transition-duration-3) steps(1,jump-end);pointer-events:none}uc-editor-image-fader .uc-fader-image{position:absolute;top:0;left:0;display:block;width:100%;height:100%;object-fit:scale-down;transform:scale(1);user-select:none;content-visibility:auto}uc-editor-image-fader .uc-fader-image--preview{background-color:var(--color-image-background);border-top-left-radius:var(--border-radius-base);border-top-right-radius:var(--border-radius-base);transform:scale(1);opacity:0;transition:var(--transition-duration-3)}uc-editor-scroller{display:flex;align-items:center;width:100%;height:100%;overflow-x:scroll}uc-editor-slider{display:flex;align-items:center;justify-content:center;width:100%;height:var(--size-panel-heading)}uc-editor-toolbar{position:relative;width:100%;height:100%}@media only screen and (max-width:600px){uc-editor-toolbar{--l-tab-gap: var(--cldtr-gap-mid-1);--l-slider-padding: var(--uc-padding);--l-controls-padding: var(--uc-padding)}}@media only screen and (min-width:601px){uc-editor-toolbar{--l-tab-gap: var(--cldtr-gap-max);--l-slider-padding: var(--uc-padding);--l-controls-padding: var(--uc-padding)}}uc-editor-toolbar>.uc-toolbar-container{position:relative;width:100%;height:100%;overflow:hidden}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar{position:absolute;display:grid;grid-template-rows:1fr 1fr;width:100%;height:100%;background-color:var(--color-fill-contrast);transition:opacity var(--transition-duration-3) ease-in-out,transform var(--transition-duration-3) ease-in-out,visibility var(--transition-duration-3) ease-in-out}.uc-sub-toolbar>.uc-list-aspect-ratio-container>.uc-list-aspect-ratio{display:grid;grid-auto-flow:column;justify-content:center;align-items:center;gap:6px;height:var(--size-panel-heading)}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar.uc-sub-toolbar--visible{transform:translateY(0);opacity:1;pointer-events:auto}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar.uc-sub-toolbar--top-hidden{transform:translateY(100%);opacity:0;pointer-events:none}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar.uc-sub-toolbar--bottom-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row{display:flex;align-items:center;justify-content:space-between;padding-right:var(--l-controls-padding);padding-left:var(--l-controls-padding)}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row>.uc-tab-toggles{position:relative;display:grid;grid-auto-flow:column;gap:0px var(--l-tab-gap);align-items:center;height:100%}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row>.uc-tab-toggles>.uc-tab-toggles_indicator{position:absolute;bottom:0;left:0;width:var(--size-touch-area);height:2px;background-color:var(--uc-secondary-foreground);transform:translate(0);transition:transform var(--transition-duration-3)}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-tab-content-row{position:relative}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-tab-content-row>.uc-tab-content{position:absolute;top:0;left:0;display:flex;width:100%;height:100%;overflow:hidden;content-visibility:auto}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row>.uc-tab-toggles>.uc-tab-toggle.uc-tab-toggle--visible{display:contents}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row>.uc-tab-toggles>.uc-tab-toggle.uc-tab-toggle--hidden{display:none}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row>.uc-tab-toggles.uc-tab-toggles--hidden{display:none}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row>.uc-tab-toggles>.uc-tab-toggle>uc-btn-ui{width:var(--uc-button-size)}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row>.uc-tab-toggles>.uc-tab-toggle>uc-btn-ui>uc-icon>svg{width:var(--size-icon);height:var(--size-icon)}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-tab-content-row>.uc-tab-content .uc-controls-list_align{display:grid;grid-template-areas:". inner .";grid-template-columns:1fr auto 1fr;box-sizing:border-box;min-width:100%;padding-left:var(--uc-padding)}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-tab-content-row>.uc-tab-content .uc-controls-list_inner{display:grid;grid-area:inner;grid-auto-flow:column;gap:6px}uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-tab-content-row>.uc-tab-content .uc-controls-list_inner:last-child{padding-right:var(--uc-padding)}uc-editor-toolbar .uc-info-tooltip_container{position:absolute;display:flex;align-items:flex-start;justify-content:center;width:100%;height:100%}uc-editor-toolbar .uc-info-tooltip_wrapper{position:absolute;top:calc(-100% - var(--cldtr-gap-mid-2));display:flex;flex-direction:column;justify-content:flex-end;height:100%;pointer-events:none}uc-editor-toolbar .uc-info-tooltip{z-index:10;padding:3px 6px;color:var(--color-text-base);font-size:.7em;letter-spacing:1px;text-transform:uppercase;background-color:var(--color-text-accent-contrast);border-radius:var(--border-radius-editor);transform:translateY(100%);opacity:0;transition:var(--transition-duration-3)}uc-editor-toolbar .uc-info-tooltip_visible{transform:translateY(0);opacity:1}uc-editor-toolbar .uc-slider{padding-right:var(--l-slider-padding);padding-left:var(--l-slider-padding)}uc-btn-ui>button{--filter-effect: var(--idle-brightness);--opacity-effect: var(--idle-opacity);--color-effect: var(--idle-color-rgb);--background-effect: var(--idle-background);--l-transition-effect: var( --css-transition, color var(--transition-duration-2), background-color var(--transition-duration-2), filter var(--transition-duration-2) );all:unset;display:inline-flex;align-items:center;box-sizing:var(--css-box-sizing, border-box);height:var(--css-height, var(--uc-button-size));padding-right:var(--css-padding-right, 14px);padding-left:var(--css-padding-left, 14px);font-size:1em;color:var(--color-effect);background-color:var(--background-effect);border-radius:var(--uc-radius);opacity:var(--opacity-effect);cursor:pointer;filter:brightness(var(--filter-effect));transition:var(--l-transition-effect);user-select:none}uc-btn-ui>button>uc-icon{pointer-events:none}uc-btn-ui .uc-text{white-space:nowrap}uc-btn-ui .uc-icon{display:flex;align-items:center;justify-content:center;color:var(--color-effect);filter:brightness(var(--filter-effect));transition:var(--l-transition-effect)}uc-btn-ui .uc-icon_left{margin-right:var(--cldtr-gap-mid-1);margin-left:0}uc-btn-ui .uc-icon_right{margin-right:0;margin-left:var(--cldtr-gap-mid-1)}uc-btn-ui .uc-icon_single{margin-right:0;margin-left:0}uc-btn-ui .uc-icon_hidden{display:none;margin:0}uc-btn-ui.uc-primary>button{--idle-color-rgb: var(--uc-primary-foreground);--idle-brightness: 1;--idle-opacity: 1;--idle-background: var(--uc-primary);--hover-color-rgb: var(--uc-primary-foreground);--hover-brightness: 1;--hover-opacity: 1;--hover-background: var(--uc-primary-hover);--down-color-rgb: var(--uc-primary-foreground);--down-brightness: .75;--down-opacity: 1;--down-background: var(--uc-primary);--active-color-rgb: var(--uc-primary-foreground);--active-brightness: 1;--active-opacity: 1;--active-background: var(--uc-primary)}uc-btn-ui.uc-primary-icon>button{--idle-color-rgb: var(--uc-primary);--idle-brightness: 1;--idle-opacity: 1;--idle-background: transparent;--hover-color-rgb: var(--uc-primary);--hover-brightness: 1;--hover-opacity: 1;--hover-background: var(--uc-primary-transparent);--down-color-rgb: var(--uc-primary);--down-brightness: .75;--down-opacity: 1;--down-background: var(--uc-primary-transparent);--active-color-rgb: var(--uc-primary-foreground);--active-brightness: 1;--active-opacity: 1;--active-background: var(--uc-primary);padding:0;width:var(--uc-button-size)}uc-btn-ui.uc-secondary>button{--idle-color-rgb: var(--uc-secondary-foreground);--idle-brightness: 1;--idle-opacity: 1;--idle-background: var(--uc-secondary);--hover-color-rgb: var(--uc-secondary-foreground);--hover-brightness: 1;--hover-opacity: 1;--hover-background: var(--uc-secondary-hover);--down-color-rgb: var(--uc-secondary-foreground);--down-brightness: 1;--down-opacity: 1;--down-background: var(--uc-secondary-hover);--active-color-rgb: var(--uc-secondary-foreground);--active-brightness: 1;--active-opacity: 1;--active-background: transparent}:where(.uc-contrast) uc-btn-ui.uc-secondary>button{border:1px solid var(--uc-border)}uc-btn-ui.uc-secondary-icon>button{--idle-color-rgb: var(--uc-secondary-foreground);--idle-brightness: 1;--idle-opacity: 1;--idle-background: transparent;--hover-color-rgb: var(--uc-secondary-foreground);--hover-brightness: 1;--hover-opacity: 1;--hover-background: var(--uc-secondary);--down-color-rgb: var(--uc-secondary-foreground);--down-brightness: 1;--down-opacity: 1;--down-background: var(--uc-secondary);--active-color-rgb: var(--uc-secondary-foreground);--active-brightness: 1;--active-opacity: 1;--active-background: transparent;padding:0;width:var(--uc-button-size)}uc-btn-ui.uc-tab>button{--idle-color-rgb: var(--uc-secondary-foreground);--idle-brightness: 1;--idle-opacity: 1;--idle-background: transparent;--hover-color-rgb: var(--uc-secondary-foreground);--hover-brightness: 1;--hover-opacity: 1;--hover-background: var(--uc-secondary);--down-color-rgb: var(--uc-secondary-foreground);--down-brightness: 1;--down-opacity: 1;--down-background: var(--uc-secondary);--active-color-rgb: var(--uc-secondary-foreground);--active-brightness: 1;--active-opacity: 1;--active-background: transparent;padding:0;width:var(--uc-button-size)}uc-btn-ui.uc-default>button{--idle-color-rgb: var(--uc-secondary-foreground);--idle-brightness: 1;--idle-opacity: 1;--idle-background: var(--uc-secondary);--hover-color-rgb: var(--uc-secondary-foreground);--hover-brightness: 1;--hover-opacity: 1;--hover-background: var(--uc-secondary-hover);--down-color-rgb: var(--uc-secondary-foreground);--down-brightness: .75;--down-opacity: 1;--down-background: var(--uc-secondary);--active-color-rgb: var(--uc-primary);--active-brightness: 1;--active-opacity: 1;--active-background: var(--uc-primary-transparent)}:where(.uc-contrast) uc-btn-ui.uc-default>button{--idle-background: transparent;--hover-background: var(--uc-secondary);--active-background: var(--uc-foreground);--active-color-rgb: var(--uc-background)}uc-line-loader-ui{position:absolute;top:0;left:0;z-index:9999;width:100%;height:2px;opacity:.5}uc-line-loader-ui .uc-inner{width:25%;max-width:200px;height:100%}uc-line-loader-ui .uc-line{width:100%;height:100%;background-color:var(--uc-primary);transform:translate(-101%);transition:transform 1s}uc-slider-ui{--l-thumb-size: 24px;--l-zero-dot-size: 5px;--l-zero-dot-offset: 2px;--idle-color-rgb: var(--uc-foreground);--hover-color-rgb: var(--uc-primary);--down-color-rgb: var(--uc-primary);--color-effect: var(--idle-color-rgb);--l-color: var(--color-effect);position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:calc(var(--l-thumb-size) + (var(--l-zero-dot-size) + var(--l-zero-dot-offset)) * 2)}uc-slider-ui .uc-thumb{position:absolute;left:0;width:var(--l-thumb-size);height:var(--l-thumb-size);background-color:var(--l-color);border-radius:50%;transform:translate(0);opacity:1;transition:opacity var(--transition-duration-2),background-color var(--transition-duration-2)}uc-slider-ui .uc-steps{position:absolute;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;height:100%;padding-right:calc(var(--l-thumb-size) / 2);padding-left:calc(var(--l-thumb-size) / 2)}uc-slider-ui .uc-border-step{width:0px;height:10px;border-right:1px solid var(--uc-foreground);opacity:1;transition:border-color var(--transition-duration-2)}uc-slider-ui .uc-minor-step{width:0px;height:4px;border-right:1px solid var(--uc-foreground);opacity:.6;transition:border-color var(--transition-duration-2)}uc-slider-ui .uc-zero-dot{position:absolute;top:calc(100% - var(--l-zero-dot-offset) * 2);left:calc(var(--l-thumb-size) / 2 - var(--l-zero-dot-size) / 2);width:var(--l-zero-dot-size);height:var(--l-zero-dot-size);background-color:var(--color-primary-accent);border-radius:50%;opacity:0;transition:var(--transition-duration-3)}uc-slider-ui .uc-input{position:absolute;width:calc(100% - 10px);height:100%;margin:0;cursor:pointer;opacity:0}uc-presence-toggle.uc-transition{transition:opacity var(--transition-duration-3),visibility var(--transition-duration-3)}uc-presence-toggle.uc-visible{opacity:1;pointer-events:inherit}uc-presence-toggle.uc-hidden{opacity:0;pointer-events:none}uc-presence-toggle.uc-initial{display:none!important;transition:none!important}[uc-cloud-image-editor] [role=button]:focus-visible,[uc-cloud-image-editor] button:focus-visible{outline:1px auto Highlight;outline:1px auto -webkit-focus-ring-color}[uc-cloud-image-editor] .uc-cloud-mask{pointer-events:none}[uc-aspect-ratio-freeform] button{display:flex}[uc-aspect-ratio-freeform] uc-icon{display:none}[uc-aspect-ratio-freeform] .uc-title{padding-left:var(--cldtr-gap-mid-1)}:where(uc-editor-freeform-button-control,uc-editor-aspect-ratio-button-control:last-of-type){margin-right:calc(3 * var(--cldtr-gap-mid-1))}}@layer uc.solutions{:where([uc-cloud-image-editor]) uc-icon{display:flex;justify-content:center;width:100%;height:100%}:where([uc-cloud-image-editor]) uc-icon svg{width:calc(var(--uc-button-size) / 2);height:calc(var(--uc-button-size) / 2)}}@layer uc.components{uc-cloud-image-editor-activity{position:relative;display:flex;width:100%;height:100%;overflow:hidden;background-color:var(--uc-background)}[uc-modal]>dialog:has(uc-cloud-image-editor-activity[active]){width:100%;height:100%}}@layer uc.components{uc-config{display:none}}@layer uc.components{uc-external-source{display:flex;flex-direction:column;width:100%;height:100%;background-color:var(--uc-background);overflow:hidden;position:relative}[uc-modal]>dialog:has(uc-external-source[active]){width:100%;height:100%}uc-external-source>.uc-content{position:relative;display:grid;flex:1;grid-template-rows:1fr min-content}uc-external-source iframe{display:block;width:100%;height:100%;border:none}uc-external-source .uc-iframe-wrapper{overflow:hidden}uc-external-source .uc-toolbar{display:flex;width:100%;gap:var(--uc-padding);align-items:center;justify-content:space-between;padding:var(--uc-padding);border-top:1px solid var(--uc-border)}uc-external-source .uc-back-btn{padding-left:0}uc-external-source .uc-selection-status-box{color:var(--uc-foreground);display:flex;flex-direction:column;align-items:center;justify-content:center}uc-external-source .uc-selection-status-box button{color:var(--uc-primary);height:auto;padding:0;background:none}uc-external-source .uc-selection-status-box button:hover{text-decoration:underline}uc-external-source uc-activity-header{position:absolute;width:100%;justify-content:flex-end;z-index:1;left:0;top:0;right:0;pointer-events:none}uc-external-source uc-activity-header .uc-close-btn{pointer-events:auto}uc-external-source .uc-done-btn>span.uc-hidden{visibility:hidden;pointer-events:none}uc-external-source .uc-done-btn>uc-spinner{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center}}@layer uc.components{:where([uc-simple-btn]){position:relative;display:inline-flex}:where([uc-simple-btn]) button{height:auto;gap:.5em;padding:var(--uc-simple-btn-padding);background-color:var(--uc-simple-btn);color:var(--uc-simple-btn-foreground);font-size:var(--uc-simple-btn-font-size);font-family:var(--uc-simple-btn-font-family)}:where([uc-simple-btn]) button uc-icon{width:auto;height:auto}:where([uc-simple-btn]) button uc-icon svg{width:.9em;height:.9em}:where([uc-simple-btn]) button:hover{background-color:var(--uc-simple-btn-hover)}:where([uc-simple-btn])>uc-drop-area{display:contents}:where([uc-simple-btn]) .uc-visual-drop-area{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--uc-simple-btn-padding);background-color:transparent;color:transparent;font-size:var(--uc-simple-btn-font-size);border:1px dashed var(--uc-simple-btn-foreground);border-radius:inherit;opacity:0;transition:opacity var(--uc-transition)}:where([uc-simple-btn])>uc-drop-area[drag-state=active] .uc-visual-drop-area{opacity:1}:where([uc-simple-btn])>uc-drop-area[drag-state=inactive] .uc-visual-drop-area{opacity:0}:where([uc-simple-btn])>uc-drop-area[drag-state=near] .uc-visual-drop-area{opacity:1}:where([uc-simple-btn])>uc-drop-area[drag-state=over] .uc-visual-drop-area{opacity:1}}@layer uc.solutions{[uc-file-uploader-inline] uc-start-from{height:100%;container-type:inline-size}[uc-file-uploader-inline]{--cfg-done-activity: "start-from";--cfg-init-activity: "start-from";flex:1}[uc-file-uploader-inline] uc-activity-header:after{width:var(--uc-button-size);height:var(--uc-button-size);content:""}[uc-file-uploader-inline] uc-activity-header .uc-close-btn{display:none}[uc-file-uploader-inline] uc-copyright .uc-credits{position:static}@container (min-width: 500px){[uc-file-uploader-inline] uc-start-from .uc-content{grid-template-columns:1fr max-content;grid-template-rows:1fr max-content;height:100%}[uc-file-uploader-inline] uc-start-from uc-copyright{grid-column:2}[uc-file-uploader-inline] uc-start-from uc-drop-area{grid-row:span 3}[uc-file-uploader-inline] uc-start-from:has(uc-copyright[hidden]) uc-drop-area{grid-row:span 2}[uc-file-uploader-inline] uc-start-from:has(.uc-cancel-btn[hidden]) uc-drop-area{grid-row:span 2}[uc-file-uploader-inline] uc-start-from:has(uc-copyright[hidden]):has(.uc-cancel-btn[hidden]) uc-drop-area{grid-row:span 1}}}@layer uc,uc.base,uc.components,uc.rules,uc.solutions,uc.post-reset;@layer uc.base{:where([uc-wgt-common]){--cfg-init-activity: "start-from";--cfg-done-activity: ""}}@layer uc.base{:where([uc-wgt-common]){--uc-font-family: system-ui;--uc-font-size: 14px;--uc-line-height: normal;--uc-simple-btn-font-family: system-ui;--uc-simple-btn-font-size: 14px;--uc-button-size: 32px;--uc-preview-size: 32px;--uc-padding: 10px;--uc-radius: 8px;--uc-transition: .2s ease;--uc-dialog-width: 430px;--uc-dialog-max-width: 920px;--uc-dialog-max-height: 675px;--uc-simple-btn-padding: 7px 14px;--uc-grid-col: 3;--uc-grid-preview-image-height: auto;--uc-grid-gap: calc(var(--uc-padding) / 2);--uc-grid-aspect-ratio: 1 / 1;--uc-background: var(--uc-background-light);--uc-foreground: var(--uc-foreground-light);--uc-primary: var(--uc-primary-light);--uc-primary-hover: var(--uc-primary-hover-light);--uc-primary-transparent: var(--uc-primary-transparent-light);--uc-primary-foreground: var(--uc-primary-foreground-light);--uc-secondary: var(--uc-secondary-light);--uc-secondary-hover: var(--uc-secondary-hover-light);--uc-secondary-foreground: var(--uc-secondary-foreground-light);--uc-muted: var(--uc-muted-light);--uc-muted-foreground: var(--uc-muted-foreground-light);--uc-destructive: var(--uc-destructive-light);--uc-destructive-foreground: var(--uc-destructive-foreground-light);--uc-border: var(--uc-border-light);--uc-dialog-shadow: var(--uc-dialog-shadow-light);--uc-simple-btn: var(--uc-simple-btn-light);--uc-simple-btn-hover: var(--uc-simple-btn-hover-light);--uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light)}@supports not (color: oklch(0% 0 0)){:where([uc-wgt-common]){--uc-primary-rgb-light: 23 75 215;--uc-primary-light: rgb(var(--uc-primary-rgb-light));--uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);--uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);--uc-background-light: rgb(255 255 255);--uc-foreground-light: rgb(24 24 24);--uc-primary-foreground-light: #fff;--uc-secondary-light: rgb(24 24 24 / 5%);--uc-secondary-hover-light: rgb(24 24 24 / 8%);--uc-secondary-foreground-light: rgb(24 24 24);--uc-muted-light: rgb(245 245 245);--uc-muted-foreground-light: rgb(113 113 113);--uc-destructive-light: rgb(232 19 20 / 5%);--uc-destructive-foreground-light: rgb(232 19 20);--uc-border-light: rgb(228 228 232);--uc-dialog-shadow-light: 0px 6px 20px rgb(0 0 0 / 10%);--uc-simple-btn-light: rgb(235 235 235);--uc-simple-btn-hover-light: rgb(228 228 228);--uc-simple-btn-foreground-light: rgb(24 24 24);--uc-primary-rgb-dark: 87 154 255;--uc-primary-dark: rgb(var(--uc-primary-rgb-dark));--uc-primary-hover-dark: rgb(var(--uc-primary-rgb-dark) / 90%);--uc-primary-transparent-dark: rgb(var(--uc-primary-rgb-dark) / 7%);--uc-background-dark: rgb(27 27 27);--uc-foreground-dark: rgb(225 225 225);--uc-primary-foreground-dark: rgb(0 0 0);--uc-secondary-dark: rgb(225 225 225 / 7%);--uc-secondary-hover-dark: rgb(225 225 225 / 10%);--uc-secondary-foreground-dark: rgb(225 225 225);--uc-muted-dark: rgb(36 36 36);--uc-muted-foreground-dark: rgb(152 152 152);--uc-destructive-dark: rgb(244 90 79 / 10%);--uc-destructive-foreground-dark: rgb(244 90 79);--uc-border-dark: rgb(61 61 61);--uc-dialog-shadow-dark: 0px 6px 20px rgb(0 0 0 / 25%);--uc-simple-btn-dark: rgb(36 36 36);--uc-simple-btn-hover-dark: rgb(43 43 43);--uc-simple-btn-foreground-dark: rgb(255 255 255)}}@supports (color: oklch(0% 0 0)){:where([uc-wgt-common]){--uc-primary-oklch-light: 47% .22 264;--uc-primary-light: oklch(var(--uc-primary-oklch-light));--uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);--uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);--uc-background-light: oklch(100% 0 0);--uc-foreground-light: oklch(21% 0 0);--uc-primary-foreground-light: oklch(100% 0 0);--uc-secondary-light: oklch(21% 0 0 / .05);--uc-secondary-hover-light: oklch(21% 0 0 / .08);--uc-secondary-foreground-light: oklch(21% 0 0);--uc-muted-light: oklch(97% 0 0);--uc-muted-foreground-light: oklch(40% 0 0);--uc-destructive-light: oklch(59% .235 28.5 / .05);--uc-destructive-foreground-light: oklch(59% .235 28.5);--uc-border-light: oklch(92% 0 0);--uc-dialog-shadow-light: 0px 6px 20px oklch(0% 0 0 / .1);--uc-simple-btn-light: oklch(94% 0 0);--uc-simple-btn-hover-light: oklch(92% 0 0);--uc-simple-btn-foreground-light: oklch(20% 0 0);--uc-primary-oklch-dark: 69% .1768 258.4;--uc-primary-dark: oklch(var(--uc-primary-oklch-dark));--uc-primary-hover-dark: oklch(var(--uc-primary-oklch-dark) / 90%);--uc-primary-transparent-dark: oklch(var(--uc-primary-oklch-dark) / 7%);--uc-background-dark: oklch(22% 0 0);--uc-foreground-dark: oklch(91% 0 0);--uc-primary-foreground-dark: oklch(0% 0 0);--uc-secondary-dark: oklch(91% 0 0 / .07);--uc-secondary-hover-dark: oklch(91% 0 0 / .1);--uc-secondary-foreground-dark: oklch(91% 0 0);--uc-muted-dark: oklch(26% 0 0);--uc-muted-foreground-dark: oklch(68% 0 0);--uc-destructive-dark: oklch(67% .191 27.5 / .1);--uc-destructive-foreground-dark: oklch(67% .191 27.5);--uc-border-dark: oklch(36% 0 0);--uc-dialog-shadow-dark: 0px 6px 20px oklch(0% 0 0 / .25);--uc-simple-btn-dark: oklch(26% 0 0);--uc-simple-btn-hover-dark: oklch(29% 0 0);--uc-simple-btn-foreground-dark: oklch(100% 0 0)}}@media only screen and (max-height:600px){:where([uc-wgt-common]){--uc-dialog-max-height: 100%}}@media only screen and (max-width:680px){:where([uc-wgt-common]){--uc-grid-col: 2}}@media only screen and (max-width:430px){:where([uc-wgt-common]){--uc-dialog-max-width: 100vw;--uc-dialog-max-height: var(--uploadcare-blocks-window-height);--uc-grid-col: 1}}@media(prefers-color-scheme:light){:where([uc-wgt-common]){--uc-background: var(--uc-background-light);--uc-foreground: var(--uc-foreground-light);--uc-primary: var(--uc-primary-light);--uc-primary-hover: var(--uc-primary-hover-light);--uc-primary-transparent: var(--uc-primary-transparent-light);--uc-primary-foreground: var(--uc-primary-foreground-light);--uc-secondary: var(--uc-secondary-light);--uc-secondary-hover: var(--uc-secondary-hover-light);--uc-secondary-foreground: var(--uc-secondary-foreground-light);--uc-muted: var(--uc-muted-light);--uc-muted-foreground: var(--uc-muted-foreground-light);--uc-destructive: var(--uc-destructive-light);--uc-destructive-foreground: var(--uc-destructive-foreground-light);--uc-border: var(--uc-border-light);--uc-dialog-shadow: var(--uc-dialog-shadow-light);--uc-simple-btn: var(--uc-simple-btn-light);--uc-simple-btn-hover: var(--uc-simple-btn-hover-light);--uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light)}}@media(prefers-color-scheme:dark){:where([uc-wgt-common]){--uc-background: var(--uc-background-dark);--uc-foreground: var(--uc-foreground-dark);--uc-primary: var(--uc-primary-dark);--uc-primary-hover: var(--uc-primary-hover-dark);--uc-primary-transparent: var(--uc-primary-transparent-dark);--uc-primary-foreground: var(--uc-primary-foreground-dark);--uc-secondary: var(--uc-secondary-dark);--uc-secondary-hover: var(--uc-secondary-hover-dark);--uc-secondary-foreground: var(--uc-secondary-foreground-dark);--uc-muted: var(--uc-muted-dark);--uc-muted-foreground: var(--uc-muted-foreground-dark);--uc-destructive: var(--uc-destructive-dark);--uc-destructive-foreground: var(--uc-destructive-foreground-dark);--uc-border: var(--uc-border-dark);--uc-dialog-shadow: var(--uc-dialog-shadow-dark);--uc-simple-btn: var(--uc-simple-btn-dark);--uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);--uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark)}}:where(.uc-light){--uc-background: var(--uc-background-light);--uc-foreground: var(--uc-foreground-light);--uc-primary: var(--uc-primary-light);--uc-primary-hover: var(--uc-primary-hover-light);--uc-primary-transparent: var(--uc-primary-transparent-light);--uc-primary-foreground: var(--uc-primary-foreground-light);--uc-secondary: var(--uc-secondary-light);--uc-secondary-hover: var(--uc-secondary-hover-light);--uc-secondary-foreground: var(--uc-secondary-foreground-light);--uc-muted: var(--uc-muted-light);--uc-muted-foreground: var(--uc-muted-foreground-light);--uc-destructive: var(--uc-destructive-light);--uc-destructive-foreground: var(--uc-destructive-foreground-light);--uc-border: var(--uc-border-light);--uc-dialog-shadow: var(--uc-dialog-shadow-light);--uc-simple-btn: var(--uc-simple-btn-light);--uc-simple-btn-hover: var(--uc-simple-btn-hover-light);--uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light)}:where(.uc-dark){--uc-background: var(--uc-background-dark);--uc-foreground: var(--uc-foreground-dark);--uc-primary: var(--uc-primary-dark);--uc-primary-hover: var(--uc-primary-hover-dark);--uc-primary-transparent: var(--uc-primary-transparent-dark);--uc-primary-foreground: var(--uc-primary-foreground-dark);--uc-secondary: var(--uc-secondary-dark);--uc-secondary-hover: var(--uc-secondary-hover-dark);--uc-secondary-foreground: var(--uc-secondary-foreground-dark);--uc-muted: var(--uc-muted-dark);--uc-muted-foreground: var(--uc-muted-foreground-dark);--uc-destructive: var(--uc-destructive-dark);--uc-destructive-foreground: var(--uc-destructive-foreground-dark);--uc-border: var(--uc-border-dark);--uc-dialog-shadow: var(--uc-dialog-shadow-dark);--uc-simple-btn: var(--uc-simple-btn-dark);--uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);--uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark)}:where(.uc-purple){--uc-primary-oklch-light: 47% .22 300;--uc-primary-oklch-dark: 69% .1768 300}:where(.uc-red){--uc-primary-oklch-light: 47% .21 21;--uc-primary-oklch-dark: 71% .1768 21}:where(.uc-orange){--uc-primary-oklch-light: 47% .1376 51.88;--uc-primary-oklch-dark: 69% .1768 51.88}:where(.uc-green){--uc-primary-oklch-light: 45% .14 130;--uc-primary-oklch-dark: 69% .1768 130}:where(.uc-turquoise){--uc-primary-oklch-light: 45% .0854 174;--uc-primary-oklch-dark: 69% .1768 174}:where(.uc-gray){--uc-primary-oklch-light: 10% 0 0;--uc-primary-oklch-dark: 97% 0 0}:where(.uc-contrast){--uc-border-light: oklch(50% 0 0);--uc-border-dark: oklch(50% 0 0);--uc-muted-light: oklch(98% 0 0);--uc-muted-dark: oklch(16% 0 0);--uc-muted-foreground-light: oklch(20% 0 0);--uc-muted-foreground-dark: oklch(80% 0 0);--uc-background-light: oklch(100% 0 0);--uc-foreground-light: oklch(0% 0 0);--uc-background-dark: oklch(10% 0 0);--uc-foreground-dark: oklch(100% 0 0)}}@layer uc.base{:where([uc-wgt-common]){color:var(--uc-foreground);font-size:var(--uc-font-size);line-height:var(--uc-line-height);font-family:var(--uc-font-family)}:where([uc-wgt-common]) *{box-sizing:border-box}:where([uc-wgt-common]) button{display:flex;align-items:center;justify-content:center;height:var(--uc-button-size);padding-right:14px;padding-left:14px;font-size:1em;font-family:inherit;white-space:nowrap;border:none;border-radius:var(--uc-radius);cursor:pointer;user-select:none;transition:background-color var(--uc-transition)}:where([uc-wgt-common]) button:focus-visible{outline-offset:2px}:where([uc-wgt-common]) button.uc-primary-btn{color:var(--uc-primary-foreground);background-color:var(--uc-primary)}:where([uc-wgt-common]) button.uc-primary-btn:hover{background-color:var(--uc-primary-hover)}:where([uc-wgt-common]) button.uc-secondary-btn{color:var(--uc-secondary-foreground);background-color:var(--uc-secondary)}:where([uc-wgt-common]) button.uc-secondary-btn:hover{background-color:var(--uc-secondary-hover)}:where([uc-wgt-common].uc-contrast) button.uc-secondary-btn{border:1px solid var(--uc-border)}:where([uc-wgt-common]) button.uc-mini-btn{height:var(--uc-button-size);padding:0;background-color:transparent;color:var(--uc-secondary-foreground)}:where([uc-wgt-common]) button.uc-mini-btn:hover{background-color:var(--uc-secondary)}:where([uc-wgt-common]) :is(button[disabled],button.uc-primary-btn[disabled],button.uc-secondary-btn[disabled]){opacity:.5;pointer-events:none}:where([uc-wgt-common]) a{color:var(--uc-primary);text-decoration:none}:where([uc-wgt-common]) a[disabled]{pointer-events:none}:where([uc-wgt-common]) input[type=text]{display:flex;width:100%;height:var(--uc-button-size);padding-right:10px;padding-left:10px;color:var(--uc-foreground);font-size:1em;font-family:inherit;background-color:var(--uc-background);border:1px solid var(--uc-border);outline:1px solid transparent;border-radius:var(--uc-radius);transition:border-color var(--uc-transition),outline-color var(--uc-transition)}:where([uc-wgt-common]) input[type=text]::placeholder{color:var(--uc-muted-foreground)}:where([uc-wgt-common]) input[type=text]:focus{outline-color:var(--uc-primary-hover);border-color:var(--uc-primary-hover)}:where([uc-wgt-common]) input[disabled]{opacity:.6;pointer-events:none}:where([uc-wgt-common]) uc-select[disabled],:where([uc-wgt-common]) select[disabled]{opacity:.6;pointer-events:none}}@layer uc.rules{:where([uc-wgt-common]) [hidden]{display:none}:where([uc-wgt-common]) [activity]:not([active],.active){display:none}:where([uc-wgt-common]) dialog:not([open]) [activity]{display:none}}@layer uc.post-reset{:where([uc-wgt-common]) uc-source-btn[type]{all:unset}}@layer uc.solutions{:where([uc-file-uploader-minimal]){--cfg-init-activity: "start-from";--cfg-done-activity: "upload-list";position:relative;display:block}[uc-file-uploader-minimal]>uc-start-from .uc-content{display:flex;flex-direction:column;gap:4px;padding:0;overflow:hidden;align-items:center;background-color:transparent}:where([uc-file-uploader-minimal]>uc-start-from uc-drop-area){display:flex;position:relative;align-items:center;justify-content:center;width:100%;min-height:calc(var(--uc-preview-size) + var(--uc-padding) * 2 + 8px);padding:0;text-align:center;background-color:var(--uc-muted);border-radius:calc(var(--uc-radius) * 1.75)}:where(.uc-contrast) :where([uc-file-uploader-minimal]>uc-start-from uc-drop-area){background-color:transparent}:where([uc-file-uploader-minimal]>uc-start-from uc-drop-area):before{content:"";z-index:-1;width:100%;height:100%;position:absolute;background-color:var(--uc-background)}:where([uc-file-uploader-minimal]:has([single])>uc-start-from uc-drop-area){aspect-ratio:var(--uc-grid-aspect-ratio)}[uc-file-uploader-minimal] uc-upload-list uc-activity-header{display:none}[uc-file-uploader-minimal] uc-upload-list>.uc-toolbar{background-color:transparent}[uc-file-uploader-minimal] uc-upload-list{width:100%;height:unset;padding:4px;background-color:var(--uc-background);border:1px dashed var(--uc-border);border-radius:calc(var(--uc-radius) * 1.75)}[uc-file-uploader-minimal] uc-upload-list .uc-files{padding:0}[uc-file-uploader-minimal] uc-upload-list .uc-toolbar{display:block;padding:0}[uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-cancel-btn,[uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-upload-btn,[uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-done-btn{display:none}[uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn{width:100%;height:calc(var(--uc-preview-size) + var(--uc-padding) * 2);margin-top:4px}[uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn[disabled]{display:none}[uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn>span{display:none}[uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn>uc-icon{display:flex}[uc-file-uploader-minimal][mode=list] uc-file-item uc-progress-bar{top:0;height:100%}[uc-file-uploader-minimal][mode=list] uc-file-item uc-progress-bar .uc-progress{background-color:var(--uc-primary-transparent);border-radius:var(--uc-radius)}[uc-file-uploader-minimal][mode=list] uc-file-item uc-progress-bar .uc-fake-progress{background-color:var(--uc-primary-transparent);border-radius:var(--uc-radius)}[uc-file-uploader-minimal] uc-upload-list uc-drop-area{width:100%;height:100%;margin:0;border-radius:calc(var(--uc-radius) * 1.75)}[uc-file-uploader-minimal] uc-upload-list .uc-common-error{margin:4px 0 0}[uc-file-uploader-minimal] uc-copyright .uc-credits{position:static}[uc-file-uploader-minimal][mode=grid] uc-upload-list .uc-toolbar .uc-add-more-btn{display:none}[uc-file-uploader-minimal][mode=grid] uc-upload-list .uc-files .uc-add-more-btn{display:flex}[uc-file-uploader-minimal][mode=grid] uc-upload-list .uc-files .uc-add-more-btn>span{display:none}[uc-file-uploader-minimal][mode=grid] uc-upload-list .uc-files .uc-add-more-btn>uc-icon{display:flex}}
1
+ @layer uc.components {
2
+ uc-icon {
3
+ display: inline-flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ width: var(--uc-button-size);
7
+ height: var(--uc-button-size);
8
+ }
9
+
10
+ uc-icon svg {
11
+ width: calc(var(--uc-button-size) / 2);
12
+ height: calc(var(--uc-button-size) / 2);
13
+ overflow: visible;
14
+ }
15
+ }
16
+ @layer uc.components {
17
+ uc-config {
18
+ display: none;
19
+ }
20
+ }
21
+ @layer uc.components {
22
+ uc-activity-header {
23
+ display: flex;
24
+ justify-content: space-between;
25
+ gap: var(--uc-padding);
26
+ padding: var(--uc-padding);
27
+ color: var(--uc-foreground);
28
+ font-weight: 500;
29
+ font-size: 1em;
30
+ }
31
+
32
+ uc-activity-header > * {
33
+ display: flex;
34
+ align-items: center;
35
+ }
36
+
37
+ uc-activity-header > div > uc-icon {
38
+ width: auto;
39
+ }
40
+
41
+ uc-activity-header > div {
42
+ gap: var(--uc-padding);
43
+ }
44
+ }
45
+ @layer uc.components {
46
+ uc-select {
47
+ display: inline-flex;
48
+ }
49
+
50
+ uc-select select {
51
+ position: relative;
52
+ display: inline-flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ height: var(--uc-button-size);
56
+ padding: 0 14px;
57
+ font-size: 1em;
58
+ font-family: inherit;
59
+ white-space: nowrap;
60
+ border: none;
61
+ border-radius: var(--uc-radius);
62
+ cursor: pointer;
63
+ user-select: none;
64
+ transition: background-color var(--uc-transition);
65
+ color: var(--uc-secondary-foreground);
66
+ background-color: var(--uc-secondary);
67
+ }
68
+ }
69
+ @layer uc.components {
70
+ uc-camera-source {
71
+ position: relative;
72
+ display: flex;
73
+ flex-direction: column;
74
+ width: 100%;
75
+ height: 100%;
76
+ max-height: 100%;
77
+ overflow: hidden;
78
+ background-color: var(--uc-background);
79
+ border-radius: var(--uc-radius);
80
+ }
81
+
82
+ [uc-modal] > dialog:has([activity="camera"][active]) {
83
+ width: 100%;
84
+ height: 100%;
85
+ }
86
+
87
+ uc-camera-source video {
88
+ display: block;
89
+ width: 100%;
90
+ max-height: 100%;
91
+ object-fit: contain;
92
+ object-position: center center;
93
+ background-color: var(--uc-muted);
94
+ border-radius: var(--uc-radius);
95
+ }
96
+
97
+ uc-camera-source .uc-toolbar {
98
+ position: absolute;
99
+ bottom: 0;
100
+ display: flex;
101
+ justify-content: space-between;
102
+ width: 100%;
103
+ padding: var(--uc-padding);
104
+ background-color: var(--uc-background);
105
+ }
106
+
107
+ uc-camera-source .uc-content {
108
+ display: flex;
109
+ flex: 1;
110
+ justify-content: center;
111
+ width: 100%;
112
+ height: 100%;
113
+ padding: var(--uc-padding);
114
+ padding-top: 0;
115
+ overflow: hidden;
116
+ }
117
+
118
+ uc-camera-source .uc-message-box {
119
+ display: flex;
120
+ flex-direction: column;
121
+ gap: 40px;
122
+ align-items: center;
123
+ justify-content: center;
124
+ padding: 40px 40px 0;
125
+ color: var(--uc-foreground);
126
+ }
127
+
128
+ uc-camera-source .uc-message-box button {
129
+ color: var(--uc-primary-foreground);
130
+ background-color: var(--uc-primary);
131
+ }
132
+
133
+ uc-camera-source .uc-shot-btn {
134
+ width: 58px;
135
+ height: 58px;
136
+ color: var(--uc-background);
137
+ background-color: var(--uc-primary-light);
138
+ border-radius: 50%;
139
+ opacity: 0.85;
140
+ transition:
141
+ bottom var(--uc-transition),
142
+ opacity var(--uc-transition),
143
+ transform var(--uc-transition);
144
+ }
145
+
146
+ uc-camera-source .uc-shot-btn:hover {
147
+ transform: scale(1.05);
148
+ opacity: 1;
149
+ }
150
+
151
+ uc-camera-source .uc-shot-btn:active {
152
+ transform: scale(1);
153
+ opacity: 1;
154
+ }
155
+
156
+ uc-camera-source .uc-shot-btn[disabled] {
157
+ bottom: -80px;
158
+ }
159
+
160
+ uc-camera-source .uc-shot-btn uc-icon svg {
161
+ width: 20px;
162
+ height: 20px;
163
+ }
164
+
165
+ uc-camera-source .uc-controls {
166
+ position: relative;
167
+ display: flex;
168
+ align-items: center;
169
+ flex-wrap: wrap;
170
+ justify-content: space-between;
171
+ padding: 0 var(--uc-padding) var(--uc-padding);
172
+ min-height: 74px;
173
+ }
174
+
175
+ uc-camera-source:not(.uc-initialized) .uc-controls {
176
+ display: none;
177
+ }
178
+
179
+ uc-camera-source .uc-switcher {
180
+ display: flex;
181
+ gap: calc(var(--uc-padding) / 2);
182
+ }
183
+ uc-camera-source .uc-switch.uc-active {
184
+ background-color: var(--uc-secondary);
185
+ }
186
+
187
+ uc-camera-source .uc-camera-actions {
188
+ display: flex;
189
+ justify-content: center;
190
+ align-items: center;
191
+ gap: 5px;
192
+ }
193
+
194
+ uc-camera-source .uc-stop-record {
195
+ background-color: var(--uc-destructive-foreground-light);
196
+ opacity: 1;
197
+ }
198
+
199
+ :where(uc-camera-source:is(.uc-recording)) .uc-recording-timer uc-icon {
200
+ display: none;
201
+ }
202
+
203
+ :where(uc-camera-source:is(.uc-recording)) .uc-recording-timer {
204
+ pointer-events: none;
205
+ }
206
+
207
+ uc-camera-source .uc-recording-timer {
208
+ z-index: 1;
209
+ position: relative;
210
+ overflow: hidden;
211
+ }
212
+
213
+ :where(uc-camera-source) .uc-recording-timer uc-icon {
214
+ width: 10px;
215
+ height: 10px;
216
+ margin-right: 10px;
217
+ }
218
+
219
+ uc-camera-source .uc-recording-timer .uc-line {
220
+ position: absolute;
221
+ content: "";
222
+ bottom: 0;
223
+ left: 0;
224
+ right: 0;
225
+ height: 2px;
226
+ background-color: var(--uc-foreground-light);
227
+ transform: scaleX(0);
228
+ transform-origin: left;
229
+ transition: transform var(--uc-transition);
230
+ }
231
+
232
+ uc-camera-source .uc-btn-microphone {
233
+ z-index: 1;
234
+ }
235
+
236
+ uc-camera-source .uc-select {
237
+ display: flex;
238
+ }
239
+
240
+ uc-camera-source .uc-audio-select {
241
+ width: 98px;
242
+ }
243
+
244
+ uc-camera-source .uc-audio-select select {
245
+ width: 100%;
246
+ }
247
+
248
+ uc-camera-source .uc-camera-action {
249
+ position: absolute;
250
+ inset: 0 var(--uc-padding) var(--uc-padding);
251
+ margin: 0 auto;
252
+ }
253
+ }
254
+ @layer uc.components {
255
+ uc-cloud-image-editor-activity {
256
+ position: relative;
257
+ display: flex;
258
+ width: 100%;
259
+ height: 100%;
260
+ overflow: hidden;
261
+ background-color: var(--uc-background);
262
+ }
263
+
264
+ [uc-modal] > dialog:has([activity="cloud-image-edit"][active]) {
265
+ width: 100%;
266
+ height: 100%;
267
+ }
268
+ }
269
+ @layer uc.components {
270
+ @keyframes uc-spinner-keyframes {
271
+ from {
272
+ transform: rotate(0deg);
273
+ }
274
+ to {
275
+ transform: rotate(360deg);
276
+ }
277
+ }
278
+
279
+ .uc-spinner {
280
+ width: 1em;
281
+ height: 1em;
282
+ border: solid 2px transparent;
283
+ border-top-color: currentColor;
284
+ border-left-color: currentColor;
285
+ border-radius: 50%;
286
+ animation: uc-spinner-keyframes 400ms linear infinite;
287
+ }
288
+ }
289
+ @layer uc.components {
290
+ uc-external-source {
291
+ display: flex;
292
+ flex-direction: column;
293
+ width: 100%;
294
+ height: 100%;
295
+ background-color: var(--uc-background);
296
+ overflow: hidden;
297
+ position: relative;
298
+ }
299
+
300
+ [uc-modal] > dialog:has([activity="external"][active]) {
301
+ width: 100%;
302
+ height: 100%;
303
+ }
304
+
305
+ uc-external-source > .uc-content {
306
+ position: relative;
307
+ display: grid;
308
+ flex: 1;
309
+ grid-template-rows: 1fr min-content;
310
+ }
311
+
312
+ uc-external-source iframe {
313
+ display: block;
314
+ width: 100%;
315
+ height: 100%;
316
+ border: none;
317
+ }
318
+
319
+ uc-external-source .uc-iframe-wrapper {
320
+ overflow: hidden;
321
+ }
322
+
323
+ uc-external-source .uc-toolbar {
324
+ display: flex;
325
+ width: 100%;
326
+ gap: var(--uc-padding);
327
+ align-items: center;
328
+ justify-content: space-between;
329
+ padding: var(--uc-padding);
330
+ border-top: 1px solid var(--uc-border);
331
+ }
332
+
333
+ uc-external-source .uc-back-btn {
334
+ padding-left: 0;
335
+ }
336
+
337
+ uc-external-source .uc-selection-status-box {
338
+ color: var(--uc-foreground);
339
+ display: flex;
340
+ flex-direction: column;
341
+ align-items: center;
342
+ justify-content: center;
343
+ }
344
+
345
+ uc-external-source .uc-selection-status-box button {
346
+ color: var(--uc-primary);
347
+ height: auto;
348
+ padding: 0;
349
+ background: none;
350
+ }
351
+
352
+ uc-external-source .uc-selection-status-box button:hover {
353
+ text-decoration: underline;
354
+ }
355
+
356
+ uc-external-source uc-activity-header {
357
+ position: absolute;
358
+ width: 100%;
359
+ justify-content: flex-end;
360
+ z-index: 1;
361
+ left: 0;
362
+ top: 0;
363
+ right: 0;
364
+ pointer-events: none;
365
+ }
366
+
367
+ uc-external-source uc-activity-header .uc-close-btn {
368
+ pointer-events: auto;
369
+ }
370
+
371
+ uc-external-source .uc-done-btn > span.uc-hidden {
372
+ visibility: hidden;
373
+ pointer-events: none;
374
+ }
375
+
376
+ uc-external-source .uc-done-btn > uc-spinner {
377
+ position: absolute;
378
+ width: 100%;
379
+ height: 100%;
380
+ display: flex;
381
+ align-items: center;
382
+ justify-content: center;
383
+ }
384
+ }
385
+ @layer uc.components {
386
+ uc-url-source {
387
+ display: block;
388
+ background-color: var(--uc-background);
389
+ }
390
+
391
+ uc-url-source > .uc-content {
392
+ display: grid;
393
+ gap: 4px;
394
+ grid-template-columns: 1fr min-content;
395
+ padding: var(--uc-padding);
396
+ padding-top: 0;
397
+ }
398
+
399
+ uc-url-source .uc-url-input {
400
+ display: flex;
401
+ }
402
+ }
403
+ @layer uc.components {
404
+ @supports selector(dialog::backdrop) {
405
+ :where([uc-modal]) > dialog::backdrop {
406
+ /* backdrop don't inherit theme properties */
407
+ background-color: oklch(0% 0 0 / 0.1);
408
+ }
409
+ :where([uc-modal])[strokes] > dialog::backdrop {
410
+ /* TODO: it's not working, fix it */
411
+ background-image: var(--modal-backdrop-background-image);
412
+ }
413
+ }
414
+
415
+ :where([uc-modal]) > dialog[open] {
416
+ transform: translateY(0px);
417
+ visibility: visible;
418
+ opacity: 1;
419
+ }
420
+
421
+ :where([uc-modal]) > dialog:not([open]) {
422
+ transform: translateY(20px);
423
+ visibility: hidden;
424
+ opacity: 0;
425
+ }
426
+
427
+ :where([uc-modal]) > dialog {
428
+ display: flex;
429
+ flex-direction: column;
430
+ width: min(var(--uc-dialog-width), 100%);
431
+ max-width: min(calc(100% - var(--uc-padding) * 2), var(--uc-dialog-max-width));
432
+ min-height: var(--uc-button-size);
433
+ max-height: min(calc(100% - var(--uc-padding) * 2), var(--uc-dialog-max-height));
434
+ margin: auto;
435
+ padding: 0;
436
+ overflow: hidden;
437
+ background-color: var(--uc-background);
438
+ border: 0;
439
+ border-radius: calc(var(--uc-radius) * 1.75);
440
+ box-shadow: var(--uc-dialog-shadow);
441
+ transition:
442
+ transform 0.4s ease,
443
+ opacity 0.4s ease;
444
+ }
445
+
446
+ :where(.uc-contrast) :where([uc-modal]) > dialog {
447
+ outline: 1px solid var(--uc-border);
448
+ }
449
+ }
450
+ @layer uc.components {
451
+ uc-copyright {
452
+ display: flex;
453
+ width: 100%;
454
+ justify-content: center;
455
+ }
456
+
457
+ uc-copyright .uc-credits {
458
+ all: unset;
459
+ position: absolute;
460
+ bottom: 12px;
461
+ background-color: var(--uc-background);
462
+ padding: 2px 5px;
463
+ border-radius: 6px;
464
+ color: var(--uc-muted-foreground);
465
+ font-weight: normal;
466
+ font-size: 12px;
467
+ opacity: 0.9;
468
+ cursor: pointer;
469
+ transition:
470
+ opacity var(--uc-transition),
471
+ background-color var(--uc-transition);
472
+ }
473
+
474
+ uc-copyright .uc-credits:focus-visible {
475
+ outline: 1px auto Highlight;
476
+ outline: 1px auto -webkit-focus-ring-color;
477
+ }
478
+
479
+ uc-copyright .uc-credits:hover {
480
+ opacity: 1;
481
+ background-color: var(--uc-muted);
482
+ }
483
+ }
484
+ @layer uc.components {
485
+ uc-progress-bar {
486
+ --visible-opacity: 1;
487
+ --l-progress-value: 0;
488
+
489
+ position: absolute;
490
+ top: 0;
491
+ bottom: 0;
492
+ left: 0;
493
+ width: 100%;
494
+ height: 100%;
495
+ overflow: hidden;
496
+ pointer-events: none;
497
+ transition: opacity 0.3s;
498
+ opacity: 1;
499
+ }
500
+
501
+ uc-progress-bar.uc-progress-bar--hidden {
502
+ opacity: 0;
503
+ }
504
+
505
+ uc-progress-bar .uc-progress {
506
+ position: absolute;
507
+ width: calc(var(--l-progress-value) * 1%);
508
+ height: 100%;
509
+ background-color: var(--uc-primary);
510
+ transform: translateX(0);
511
+ opacity: var(--visible-opacity);
512
+ transition:
513
+ width 0.6s,
514
+ opacity 0.3s;
515
+ }
516
+
517
+ uc-progress-bar .uc-progress--hidden {
518
+ opacity: 0;
519
+ transition: opacity 0.3s;
520
+ }
521
+
522
+ uc-progress-bar .uc-fake-progress {
523
+ --l-fake-progress-width: 30;
524
+
525
+ position: absolute;
526
+ width: calc(var(--l-fake-progress-width) * 1%);
527
+ height: 100%;
528
+ background-color: var(--uc-primary);
529
+ animation: fake-progress-animation 1s ease-in-out infinite;
530
+ opacity: var(--visible-opacity);
531
+ transition: opacity 0.3s;
532
+ z-index: 1;
533
+ }
534
+
535
+ uc-progress-bar .uc-fake-progress--hidden {
536
+ opacity: 0;
537
+ animation: none;
538
+ }
539
+
540
+ @keyframes fake-progress-animation {
541
+ from {
542
+ transform: translateX(-100%);
543
+ }
544
+
545
+ to {
546
+ transform: translateX(calc(100 / var(--l-fake-progress-width) * 100 * 1%));
547
+ }
548
+ }
549
+ }
550
+ @layer uc.components {
551
+ uc-progress-bar-common {
552
+ position: fixed;
553
+ right: 0;
554
+ bottom: 0;
555
+ left: 0;
556
+ z-index: 10000;
557
+ display: block;
558
+ height: 10px;
559
+ background-color: var(--uc-background);
560
+ transition: opacity 0.3s;
561
+ }
562
+
563
+ uc-progress-bar-common:not([active]) {
564
+ opacity: 0;
565
+ pointer-events: none;
566
+ }
567
+ }
568
+ @layer uc.components {
569
+ uc-source-btn > button {
570
+ display: flex;
571
+ align-items: center;
572
+ margin-bottom: 2px;
573
+ padding: 2px var(--uc-padding);
574
+ color: var(--uc-foreground);
575
+ border-radius: var(--uc-radius);
576
+ cursor: pointer;
577
+ transition:
578
+ background-color var(--uc-transition),
579
+ color var(--uc-transition);
580
+ user-select: none;
581
+ width: 100%;
582
+ background-color: unset;
583
+ height: unset;
584
+ }
585
+
586
+ uc-source-btn:last-child > button {
587
+ margin-bottom: 0;
588
+ }
589
+
590
+ uc-source-btn > button:hover {
591
+ background-color: var(--uc-primary-transparent);
592
+ }
593
+
594
+ :where(.uc-contrast) uc-source-btn > button:hover {
595
+ background-color: var(--uc-secondary);
596
+ color: var(--uc-foreground);
597
+ }
598
+
599
+ uc-source-btn uc-icon {
600
+ display: inline-flex;
601
+ flex-grow: 1;
602
+ justify-content: center;
603
+ min-width: var(--uc-button-size);
604
+ margin-right: var(--uc-padding);
605
+ opacity: 0.8;
606
+ }
607
+
608
+ :where(.uc-contrast) uc-source-btn uc-icon {
609
+ opacity: 1;
610
+ }
611
+
612
+ uc-source-btn .uc-txt {
613
+ display: flex;
614
+ align-items: center;
615
+ box-sizing: border-box;
616
+ width: 100%;
617
+ height: var(--uc-button-size);
618
+ padding: 0;
619
+ white-space: nowrap;
620
+ border: none;
621
+ }
622
+ }
623
+ @layer uc.components {
624
+ uc-thumb {
625
+ width: 100%;
626
+ height: 100%;
627
+ }
628
+
629
+ .uc-thumb {
630
+ position: relative;
631
+ overflow: hidden;
632
+ width: 100%;
633
+ height: 100%;
634
+ }
635
+
636
+ .uc-thumb__img {
637
+ position: absolute;
638
+ inset: 0;
639
+ width: 100%;
640
+ height: 100%;
641
+ object-fit: cover;
642
+ display: block;
643
+ pointer-events: none;
644
+ }
645
+ }
646
+ @layer uc.components {
647
+ uc-start-from {
648
+ display: block;
649
+ overflow-y: auto;
650
+ }
651
+
652
+ uc-start-from .uc-content {
653
+ display: grid;
654
+ grid-auto-flow: row;
655
+ gap: calc(var(--uc-padding) * 2);
656
+ width: 100%;
657
+ height: 100%;
658
+ padding: calc(var(--uc-padding) * 2);
659
+ background-color: var(--uc-background);
660
+ }
661
+
662
+ [uc-modal] > dialog:has(uc-start-from[active]) {
663
+ width: var(--uc-dialog-width);
664
+ }
665
+
666
+ [uc-modal] uc-start-from uc-drop-area {
667
+ border-radius: var(--uc-radius);
668
+ }
669
+
670
+ @media only screen and (max-width: 430px) {
671
+ [uc-modal] uc-start-from uc-drop-area {
672
+ display: none;
673
+ }
674
+ }
675
+ }
676
+ @layer uc.components {
677
+ uc-upload-list {
678
+ position: relative;
679
+ display: flex;
680
+ flex-direction: column;
681
+ width: 100%;
682
+ height: max-content;
683
+ overflow: hidden;
684
+ background-color: var(--uc-background);
685
+ transition: opacity var(--uc-transition);
686
+ }
687
+
688
+ uc-upload-list .uc-no-files {
689
+ height: 32px;
690
+ padding: 20px;
691
+ }
692
+
693
+ uc-upload-list .uc-files {
694
+ display: block;
695
+ flex: 1;
696
+ min-height: 32px;
697
+ padding: 0 var(--uc-padding);
698
+ overflow: auto;
699
+ }
700
+
701
+ uc-upload-list .uc-files-wrapper {
702
+ display: contents;
703
+ }
704
+
705
+ uc-upload-list .uc-toolbar {
706
+ display: flex;
707
+ gap: 4px;
708
+ justify-content: space-between;
709
+ padding: var(--uc-padding);
710
+ background-color: var(--uc-background);
711
+ }
712
+
713
+ uc-upload-list .uc-toolbar-spacer {
714
+ flex: 1;
715
+ }
716
+
717
+ uc-upload-list uc-drop-area {
718
+ position: absolute;
719
+ top: 0;
720
+ left: 0;
721
+ width: calc(100% - var(--uc-padding) * 2);
722
+ height: calc(100% - var(--uc-padding) * 2);
723
+ margin: var(--uc-padding);
724
+ border-radius: var(--uc-radius);
725
+ }
726
+
727
+ uc-upload-list uc-activity-header > .uc-header-text {
728
+ padding: 0 var(--uc-padding);
729
+ }
730
+
731
+ uc-upload-list .uc-common-error {
732
+ border-radius: var(--uc-radius);
733
+ color: var(--uc-destructive-foreground);
734
+ background-color: var(--uc-destructive);
735
+ display: flex;
736
+ align-items: center;
737
+ justify-content: center;
738
+ padding: var(--uc-padding);
739
+ margin: 4px var(--uc-padding) 0 var(--uc-padding);
740
+ font-size: 0.925em;
741
+ }
742
+
743
+ uc-upload-list .uc-add-more-btn uc-icon {
744
+ display: none;
745
+ }
746
+
747
+ /* GRID */
748
+ uc-upload-list[mode="grid"] .uc-files {
749
+ display: flex;
750
+ flex-wrap: wrap;
751
+ gap: var(--uc-grid-gap);
752
+ }
753
+
754
+ uc-upload-list .uc-files .uc-add-more-btn,
755
+ uc-upload-list[mode="grid"] uc-file-item {
756
+ flex: 0 0 calc((100% - (var(--uc-grid-gap) * (var(--uc-grid-col) - 1))) / var(--uc-grid-col));
757
+ max-width: calc((100% - (var(--uc-grid-gap) * (var(--uc-grid-col) - 1))) / var(--uc-grid-col));
758
+ height: var(--uc-grid-preview-image-height);
759
+ aspect-ratio: var(--uc-grid-aspect-ratio);
760
+ }
761
+
762
+ uc-upload-list .uc-files .uc-add-more-btn {
763
+ display: none;
764
+ }
765
+ }
766
+ @layer uc.components {
767
+ uc-file-item {
768
+ --uc-file-item-gap: 4px;
769
+ --uc-file-item-height: calc(var(--uc-preview-size) + var(--uc-padding) * 2 + var(--uc-file-item-gap));
770
+
771
+ display: block;
772
+ overflow: hidden;
773
+ min-height: var(--uc-file-item-height);
774
+ }
775
+
776
+ uc-file-item:last-of-type {
777
+ --uc-file-item-gap: 0;
778
+ }
779
+
780
+ uc-file-item > .uc-inner {
781
+ position: relative;
782
+ display: grid;
783
+ grid-template-columns: var(--uc-preview-size) 1fr max-content;
784
+ gap: 2px;
785
+ align-items: center;
786
+ margin-bottom: var(--uc-file-item-gap);
787
+ padding: var(--uc-padding);
788
+ overflow: hidden;
789
+ font-size: 0.925em;
790
+ background-color: var(--uc-muted);
791
+ border-radius: var(--uc-radius);
792
+ transition: background-color var(--uc-transition);
793
+ }
794
+
795
+ uc-file-item > .uc-inner[data-focused] {
796
+ background-color: transparent;
797
+ }
798
+
799
+ uc-file-item > .uc-inner[data-uploading] .uc-edit-btn {
800
+ display: none;
801
+ }
802
+
803
+ uc-file-item > :where(.uc-inner[data-failed], .uc-inner[data-limit-overflow]) {
804
+ background-color: var(--uc-destructive);
805
+ }
806
+
807
+ uc-file-item .uc-thumb {
808
+ position: relative;
809
+ display: inline-flex;
810
+ width: var(--uc-preview-size);
811
+ height: var(--uc-preview-size);
812
+ background-color: var(--uc-secondary);
813
+ background-position: center center;
814
+ background-repeat: no-repeat;
815
+ background-size: cover;
816
+ border-radius: var(--uc-radius);
817
+ }
818
+
819
+ uc-file-item .uc-file-name-wrapper {
820
+ text-align: left;
821
+ display: flex;
822
+ flex-direction: column;
823
+ align-items: flex-start;
824
+ justify-content: center;
825
+ max-width: 100%;
826
+ padding-right: var(--uc-padding);
827
+ padding-left: var(--uc-padding);
828
+ overflow: hidden;
829
+ color: var(--uc-muted-foreground);
830
+ }
831
+
832
+ uc-file-item .uc-file-name {
833
+ max-width: 100%;
834
+ overflow: hidden;
835
+ white-space: nowrap;
836
+ text-overflow: ellipsis;
837
+ }
838
+
839
+ uc-file-item .uc-file-error {
840
+ display: none;
841
+ color: var(--uc-destructive-foreground);
842
+ font-size: 0.85em;
843
+ z-index: 2;
844
+ }
845
+
846
+ uc-file-item button.uc-remove-btn,
847
+ uc-file-item button.uc-edit-btn {
848
+ color: var(--uc-muted-foreground);
849
+ }
850
+
851
+ uc-file-item button svg {
852
+ pointer-events: none;
853
+ }
854
+
855
+ uc-file-item button.uc-upload-btn {
856
+ display: none;
857
+ }
858
+
859
+ uc-file-item .uc-badge {
860
+ position: absolute;
861
+ bottom: 2px;
862
+ right: 2px;
863
+ width: 14px;
864
+ height: 14px;
865
+ color: var(--uc-background);
866
+ background-color: var(--uc-foreground);
867
+ border-radius: 50%;
868
+ transform: scale(0.3);
869
+ opacity: 0;
870
+ transition:
871
+ opacity var(--uc-transition),
872
+ transform var(--uc-transition);
873
+ display: flex;
874
+ justify-content: center;
875
+ align-items: center;
876
+ }
877
+
878
+ uc-file-item > .uc-inner:where([data-failed], [data-limit-overflow], [data-finished]) .uc-badge {
879
+ transform: scale(1);
880
+ opacity: 1;
881
+ }
882
+
883
+ uc-file-item > .uc-inner:where([data-failed], [data-limit-overflow]) .uc-badge {
884
+ background-color: var(--uc-destructive-foreground);
885
+ }
886
+
887
+ uc-file-item > .uc-inner:where([data-failed], [data-limit-overflow]) .uc-file-error {
888
+ display: block;
889
+ }
890
+
891
+ uc-file-item .uc-badge uc-icon,
892
+ uc-file-item .uc-badge uc-icon svg {
893
+ width: 100%;
894
+ height: 100%;
895
+ }
896
+
897
+ uc-file-item .uc-progress-bar {
898
+ --visible-opacity: 0.7;
899
+
900
+ top: calc(100% - 2px);
901
+ height: 2px;
902
+ }
903
+
904
+ :where(.uc-contrast) uc-file-item .uc-progress-bar {
905
+ --visible-opacity: 1;
906
+ }
907
+
908
+ uc-file-item .uc-file-actions {
909
+ display: flex;
910
+ gap: 2px;
911
+ align-items: center;
912
+ justify-content: center;
913
+ }
914
+
915
+ /* File item in the grid */
916
+ uc-file-item[mode="grid"] {
917
+ overflow: visible;
918
+ min-height: initial;
919
+ }
920
+
921
+ uc-file-item[mode="grid"] .uc-inner {
922
+ height: 100%;
923
+ grid-template-columns: 1fr;
924
+ grid-template-rows: 1fr max-content;
925
+ padding: 0;
926
+ background-color: transparent;
927
+ margin-bottom: 0;
928
+ border-radius: 0;
929
+ }
930
+
931
+ uc-file-item[mode="grid"] .uc-inner[data-failed] .uc-badge {
932
+ display: none;
933
+ }
934
+
935
+ uc-file-item[mode="grid"] .uc-thumb {
936
+ width: 100%;
937
+ height: 100%;
938
+ }
939
+
940
+ uc-file-item[mode="grid"] .uc-badge {
941
+ right: var(--uc-padding);
942
+ bottom: var(--uc-padding);
943
+ }
944
+
945
+ uc-file-item[mode="grid"] .uc-file-name-wrapper {
946
+ padding: 0;
947
+ }
948
+
949
+ uc-file-item[mode="grid"] .uc-file-name:not([hidden]) + .uc-file-error {
950
+ bottom: calc(var(--uc-padding) + var(--uc-font-size));
951
+ }
952
+
953
+ uc-file-item[mode="grid"] .uc-file-error {
954
+ position: absolute;
955
+ background-color: var(--uc-destructive-foreground);
956
+ border-radius: var(--uc-radius);
957
+ color: var(--uc-background);
958
+ bottom: var(--uc-padding);
959
+ left: var(--uc-padding);
960
+ right: var(--uc-padding);
961
+ padding: calc(var(--uc-padding) / 2) var(--uc-padding);
962
+ }
963
+
964
+ uc-file-item[mode="grid"] .uc-file-hint {
965
+ position: absolute;
966
+ background-color: var(--uc-background);
967
+ border-radius: var(--uc-radius);
968
+ color: var(--uc-foreground);
969
+ bottom: calc(var(--uc-padding) * 2);
970
+ left: var(--uc-padding);
971
+ right: var(--uc-padding);
972
+ padding: calc(var(--uc-padding) / 2) var(--uc-padding);
973
+ }
974
+
975
+ uc-file-item[mode="grid"] .uc-file-actions {
976
+ position: absolute;
977
+ top: var(--uc-padding);
978
+ right: var(--uc-padding);
979
+ }
980
+
981
+ uc-file-item[mode="grid"] button {
982
+ background-color: var(--uc-background);
983
+ }
984
+
985
+ uc-file-item[mode="grid"] button:hover {
986
+ background-color: var(--uc-muted);
987
+ }
988
+
989
+ uc-file-item[mode="grid"] .uc-progress-bar {
990
+ width: initial;
991
+ height: 4px;
992
+ top: initial;
993
+ bottom: var(--uc-padding);
994
+ left: var(--uc-padding);
995
+ right: var(--uc-padding);
996
+ border-radius: var(--uc-radius);
997
+ z-index: 1;
998
+ transition:
999
+ background-color 0.3s,
1000
+ opacity 0.3s;
1001
+ background-color: var(--uc-background);
1002
+ }
1003
+
1004
+ uc-file-item[mode="grid"] .uc-progress-bar :is(.uc-fake-progress, .uc-progress) {
1005
+ background-color: var(--uc-primary);
1006
+ }
1007
+
1008
+ uc-file-item[mode="grid"] .uc-progress-bar[hasfilename] {
1009
+ bottom: calc(var(--uc-padding) + var(--uc-font-size));
1010
+ }
1011
+ }
1012
+ @layer uc.components {
1013
+ :where([uc-drop-area]) {
1014
+ padding: 2px;
1015
+ overflow: hidden;
1016
+ border: 1px dashed var(--uc-border);
1017
+ border-radius: calc(var(--uc-radius) * 1.75);
1018
+ transition:
1019
+ border var(--uc-transition),
1020
+ border-radius var(--uc-transition);
1021
+ }
1022
+
1023
+ :where([uc-drop-area]),
1024
+ :where([uc-drop-area]) .uc-content-wrapper {
1025
+ display: flex;
1026
+ align-items: center;
1027
+ justify-content: center;
1028
+ width: 100%;
1029
+ height: 100%;
1030
+ }
1031
+
1032
+ :where([uc-drop-area]) .uc-text {
1033
+ position: relative;
1034
+ margin: var(--uc-padding);
1035
+ color: var(--uc-muted-foreground);
1036
+ transition: color var(--uc-transition);
1037
+ }
1038
+
1039
+ :where([uc-drop-area])[ghost][drag-state="inactive"] {
1040
+ display: none;
1041
+ }
1042
+
1043
+ :where([uc-drop-area])[ghost]:not([fullscreen]):is([drag-state="active"], [drag-state="near"], [drag-state="over"]) {
1044
+ background: var(--uc-background);
1045
+ }
1046
+
1047
+ :where([uc-drop-area]):is([drag-state="active"], [drag-state="near"], [drag-state="over"], :hover) {
1048
+ background: var(--uc-primary-transparent);
1049
+ border-color: var(--uc-primary-transparent);
1050
+ }
1051
+
1052
+ :where(.uc-contrast)
1053
+ :where([uc-drop-area]):is([drag-state="active"], [drag-state="near"], [drag-state="over"], :hover) {
1054
+ color: var(--uc-foreground);
1055
+ background: transparent;
1056
+ border-color: var(--uc-foreground);
1057
+ border-width: 2px;
1058
+ border-style: solid;
1059
+ }
1060
+
1061
+ :where([uc-drop-area]):is([drag-state="active"], [drag-state="near"]) {
1062
+ opacity: 1;
1063
+ }
1064
+
1065
+ :where([uc-drop-area])[drag-state="over"] {
1066
+ border-color: var(--uc-primary);
1067
+ opacity: 1;
1068
+ }
1069
+
1070
+ :where([uc-drop-area])[with-icon] {
1071
+ min-height: 180px;
1072
+ }
1073
+
1074
+ :where([uc-drop-area])[with-icon] .uc-content-wrapper {
1075
+ display: flex;
1076
+ flex-direction: column;
1077
+ }
1078
+
1079
+ :where([uc-drop-area])[with-icon] .uc-text {
1080
+ color: var(--uc-foreground);
1081
+ font-weight: 500;
1082
+ font-size: 1.1em;
1083
+ }
1084
+
1085
+ :where([uc-drop-area])[with-icon] .uc-icon-container {
1086
+ position: relative;
1087
+ width: 64px;
1088
+ height: 64px;
1089
+ margin: var(--uc-padding);
1090
+ overflow: hidden;
1091
+ color: var(--uc-foreground);
1092
+ background-color: var(--uc-muted);
1093
+ border-radius: 50%;
1094
+ transition:
1095
+ color var(--uc-transition),
1096
+ background-color var(--uc-transition);
1097
+ }
1098
+
1099
+ :where([uc-drop-area])[with-icon] uc-icon {
1100
+ position: absolute;
1101
+ width: 32px;
1102
+ height: 32px;
1103
+ top: calc(50% - 16px);
1104
+ left: calc(50% - 16px);
1105
+ transition: transform var(--uc-transition);
1106
+ }
1107
+
1108
+ :where([uc-drop-area])[with-icon] uc-icon:last-child {
1109
+ transform: translateY(48px);
1110
+ }
1111
+
1112
+ :where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-icon-container,
1113
+ :where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-text {
1114
+ color: var(--uc-foreground);
1115
+ }
1116
+
1117
+ :where([uc-drop-area])[with-icon]:hover .uc-icon-container {
1118
+ background-color: var(--uc-primary-transparent);
1119
+ }
1120
+
1121
+ :where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-icon-container {
1122
+ background-color: var(--uc-muted);
1123
+ }
1124
+
1125
+ :where([uc-drop-area])[with-icon]
1126
+ > .uc-content-wrapper:is([drag-state="active"], [drag-state="near"], [drag-state="over"])
1127
+ .uc-icon-container {
1128
+ color: var(--uc-primary-foreground);
1129
+ background-color: var(--uc-primary);
1130
+ }
1131
+
1132
+ :where([uc-drop-area])[with-icon]
1133
+ > .uc-content-wrapper:is([drag-state="active"], [drag-state="near"], [drag-state="over"])
1134
+ .uc-text {
1135
+ color: var(--uc-foreground);
1136
+ }
1137
+
1138
+ :where(.uc-contrast)
1139
+ :where([uc-drop-area])[with-icon]
1140
+ > .uc-content-wrapper:is([drag-state="active"], [drag-state="near"], [drag-state="over"])
1141
+ .uc-text {
1142
+ color: var(--uc-foreground);
1143
+ }
1144
+
1145
+ :where([uc-drop-area])[with-icon]
1146
+ > .uc-content-wrapper:is([drag-state="active"], [drag-state="near"], [drag-state="over"])
1147
+ uc-icon:first-child {
1148
+ transform: translateY(-48px);
1149
+ }
1150
+
1151
+ :where([uc-drop-area])[with-icon]
1152
+ > .uc-content-wrapper:is([drag-state="active"], [drag-state="near"], [drag-state="over"])
1153
+ uc-icon:last-child {
1154
+ transform: translateY(0);
1155
+ }
1156
+
1157
+ :where([uc-drop-area])[with-icon] > .uc-content-wrapper[drag-state="near"] uc-icon:last-child {
1158
+ transform: scale(1.3);
1159
+ }
1160
+
1161
+ :where([uc-drop-area])[with-icon] > .uc-content-wrapper[drag-state="over"] uc-icon:last-child {
1162
+ transform: scale(1.5);
1163
+ }
1164
+
1165
+ :where([uc-drop-area])[fullscreen] {
1166
+ position: fixed;
1167
+ top: 0;
1168
+ right: 0;
1169
+ bottom: 0;
1170
+ left: 0;
1171
+ z-index: 2147483647;
1172
+ display: flex;
1173
+ align-items: center;
1174
+ justify-content: center;
1175
+ width: calc(100vw - var(--uc-padding) * 2);
1176
+ height: calc(100vh - var(--uc-padding) * 2);
1177
+ margin: var(--uc-padding);
1178
+ }
1179
+
1180
+ :where([uc-drop-area])[fullscreen] .uc-content-wrapper {
1181
+ width: 100%;
1182
+ max-width: calc(var(--uc-dialog-width) * 0.8);
1183
+ height: 180px;
1184
+ color: var(--uc-foreground);
1185
+ background-color: var(--uc-background);
1186
+ border-radius: calc(var(--uc-radius) * 1.75);
1187
+ box-shadow: var(--uc-dialog-shadow);
1188
+ transition:
1189
+ color var(--uc-transition),
1190
+ background-color var(--uc-transition),
1191
+ box-shadow var(--uc-transition),
1192
+ border-radius var(--uc-transition),
1193
+ transform var(--uc-transition);
1194
+ }
1195
+
1196
+ :where([uc-drop-area])[with-icon][fullscreen][drag-state="active"] > .uc-content-wrapper,
1197
+ :where([uc-drop-area])[with-icon][fullscreen][drag-state="near"] > .uc-content-wrapper {
1198
+ transform: translateY(10px);
1199
+ opacity: 0;
1200
+ }
1201
+
1202
+ :where([uc-drop-area])[with-icon][fullscreen][drag-state="over"] > .uc-content-wrapper {
1203
+ transform: translateY(0px);
1204
+ opacity: 1;
1205
+ }
1206
+
1207
+ :is(:where([uc-drop-area])[with-icon][fullscreen]) > .uc-content-wrapper uc-icon:first-child {
1208
+ transform: translateY(-48px);
1209
+ }
1210
+
1211
+ :where([uc-drop-area])[clickable] {
1212
+ cursor: pointer;
1213
+ }
1214
+ }
1215
+ @layer uc.components {
1216
+ :where([uc-simple-btn]) {
1217
+ position: relative;
1218
+ display: inline-flex;
1219
+ }
1220
+
1221
+ :where([uc-simple-btn]) button {
1222
+ height: auto;
1223
+ gap: 0.5em;
1224
+ padding: var(--uc-simple-btn-padding);
1225
+ background-color: var(--uc-simple-btn);
1226
+ color: var(--uc-simple-btn-foreground);
1227
+ font-size: var(--uc-simple-btn-font-size);
1228
+ font-family: var(--uc-simple-btn-font-family);
1229
+ }
1230
+
1231
+ :where([uc-simple-btn]) button uc-icon {
1232
+ width: auto;
1233
+ height: auto;
1234
+ }
1235
+
1236
+ :where([uc-simple-btn]) button uc-icon svg {
1237
+ width: 0.9em;
1238
+ height: 0.9em;
1239
+ }
1240
+
1241
+ :where([uc-simple-btn]) button:hover {
1242
+ background-color: var(--uc-simple-btn-hover);
1243
+ }
1244
+
1245
+ :where([uc-simple-btn]) > uc-drop-area {
1246
+ display: contents;
1247
+ }
1248
+
1249
+ :where([uc-simple-btn]) .uc-visual-drop-area {
1250
+ position: absolute;
1251
+ top: 0px;
1252
+ left: 0px;
1253
+ display: flex;
1254
+ align-items: center;
1255
+ justify-content: center;
1256
+ width: 100%;
1257
+ height: 100%;
1258
+ padding: var(--uc-simple-btn-padding);
1259
+ background-color: transparent;
1260
+ color: transparent;
1261
+ font-size: var(--uc-simple-btn-font-size);
1262
+ border: 1px dashed var(--uc-simple-btn-foreground);
1263
+ border-radius: inherit;
1264
+ opacity: 0;
1265
+ transition: opacity var(--uc-transition);
1266
+ }
1267
+
1268
+ :where([uc-simple-btn]) > uc-drop-area[drag-state="active"] .uc-visual-drop-area {
1269
+ opacity: 1;
1270
+ }
1271
+ :where([uc-simple-btn]) > uc-drop-area[drag-state="inactive"] .uc-visual-drop-area {
1272
+ opacity: 0;
1273
+ }
1274
+ :where([uc-simple-btn]) > uc-drop-area[drag-state="near"] .uc-visual-drop-area {
1275
+ opacity: 1;
1276
+ }
1277
+ :where([uc-simple-btn]) > uc-drop-area[drag-state="over"] .uc-visual-drop-area {
1278
+ opacity: 1;
1279
+ }
1280
+ }
1281
+ @layer uc.components {
1282
+ uc-plugin-activity-host {
1283
+ position: relative;
1284
+ display: flex;
1285
+ width: 100%;
1286
+ height: 100%;
1287
+ overflow: hidden;
1288
+ }
1289
+ }
1290
+ @layer uc, uc.base, uc.components, uc.rules, uc.solutions, uc.post-reset;
1291
+ @layer uc.base {
1292
+ :where([uc-wgt-common]) {
1293
+ --cfg-init-activity: "start-from";
1294
+ --cfg-done-activity: "";
1295
+ }
1296
+ }
1297
+ @layer uc.base {
1298
+ :where([uc-wgt-common]) {
1299
+ /* Font */
1300
+ --uc-font-family: system-ui;
1301
+ --uc-font-size: 14px;
1302
+ --uc-line-height: normal;
1303
+ --uc-simple-btn-font-family: system-ui;
1304
+ --uc-simple-btn-font-size: 14px;
1305
+
1306
+ /* Sizes */
1307
+ --uc-button-size: 32px;
1308
+ --uc-preview-size: 32px;
1309
+ --uc-padding: 10px;
1310
+ --uc-radius: 8px;
1311
+ --uc-transition: 0.2s ease;
1312
+ --uc-dialog-width: 430px;
1313
+ --uc-dialog-max-width: 920px;
1314
+ --uc-dialog-max-height: 675px;
1315
+ --uc-simple-btn-padding: 7px 14px;
1316
+
1317
+ --uc-grid-col: 3;
1318
+ --uc-grid-preview-image-height: auto;
1319
+ --uc-grid-gap: calc(var(--uc-padding) / 2);
1320
+ --uc-grid-aspect-ratio: 1 / 1;
1321
+
1322
+ /* Default colors, in case of media query failure */
1323
+ --uc-background: var(--uc-background-light);
1324
+ --uc-foreground: var(--uc-foreground-light);
1325
+ --uc-primary: var(--uc-primary-light);
1326
+ --uc-primary-hover: var(--uc-primary-hover-light);
1327
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
1328
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
1329
+ --uc-secondary: var(--uc-secondary-light);
1330
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
1331
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
1332
+ --uc-muted: var(--uc-muted-light);
1333
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
1334
+ --uc-destructive: var(--uc-destructive-light);
1335
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
1336
+ --uc-border: var(--uc-border-light);
1337
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
1338
+ --uc-simple-btn: var(--uc-simple-btn-light);
1339
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
1340
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
1341
+ }
1342
+
1343
+ @supports not (color: oklch(0% 0 0)) {
1344
+ :where([uc-wgt-common]) {
1345
+ /* Light colors RGB fallback */
1346
+ --uc-primary-rgb-light: 23 75 215;
1347
+ --uc-primary-light: rgb(var(--uc-primary-rgb-light));
1348
+ --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);
1349
+ --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);
1350
+ --uc-background-light: rgb(255 255 255);
1351
+ --uc-foreground-light: rgb(24 24 24);
1352
+ --uc-primary-foreground-light: #fff;
1353
+ --uc-secondary-light: rgb(24 24 24 / 5%);
1354
+ --uc-secondary-hover-light: rgb(24 24 24 / 8%);
1355
+ --uc-secondary-foreground-light: rgb(24 24 24);
1356
+ --uc-muted-light: rgb(245 245 245);
1357
+ --uc-muted-foreground-light: rgb(113 113 113);
1358
+ --uc-destructive-light: rgb(232 19 20 / 5%);
1359
+ --uc-destructive-foreground-light: rgb(232 19 20);
1360
+ --uc-border-light: rgb(228 228 232);
1361
+ --uc-dialog-shadow-light: 0px 6px 20px rgb(0 0 0 / 10%);
1362
+ --uc-simple-btn-light: rgb(235 235 235);
1363
+ --uc-simple-btn-hover-light: rgb(228 228 228);
1364
+ --uc-simple-btn-foreground-light: rgb(24 24 24);
1365
+
1366
+ /* Dark colors RGB fallback */
1367
+ --uc-primary-rgb-dark: 87 154 255;
1368
+ --uc-primary-dark: rgb(var(--uc-primary-rgb-dark));
1369
+ --uc-primary-hover-dark: rgb(var(--uc-primary-rgb-dark) / 90%);
1370
+ --uc-primary-transparent-dark: rgb(var(--uc-primary-rgb-dark) / 7%);
1371
+ --uc-background-dark: rgb(27 27 27);
1372
+ --uc-foreground-dark: rgb(225 225 225);
1373
+ --uc-primary-foreground-dark: rgb(0 0 0);
1374
+ --uc-secondary-dark: rgb(225 225 225 / 7%);
1375
+ --uc-secondary-hover-dark: rgb(225 225 225 / 10%);
1376
+ --uc-secondary-foreground-dark: rgb(225 225 225);
1377
+ --uc-muted-dark: rgb(36 36 36);
1378
+ --uc-muted-foreground-dark: rgb(152 152 152);
1379
+ --uc-destructive-dark: rgb(244 90 79 / 10%);
1380
+ --uc-destructive-foreground-dark: rgb(244 90 79);
1381
+ --uc-border-dark: rgb(61 61 61);
1382
+ --uc-dialog-shadow-dark: 0px 6px 20px rgb(0 0 0 / 25%);
1383
+ --uc-simple-btn-dark: rgb(36 36 36);
1384
+ --uc-simple-btn-hover-dark: rgb(43 43 43);
1385
+ --uc-simple-btn-foreground-dark: rgb(255 255 255);
1386
+ }
1387
+ }
1388
+
1389
+ @supports (color: oklch(0% 0 0)) {
1390
+ :where([uc-wgt-common]) {
1391
+ /* Light colors OKLCH */
1392
+ --uc-primary-oklch-light: 47% 0.22 264; /* Quick customization: change this value to your brand color */
1393
+ --uc-primary-light: oklch(var(--uc-primary-oklch-light));
1394
+ --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
1395
+ --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);
1396
+ --uc-background-light: oklch(100% 0 0);
1397
+ --uc-foreground-light: oklch(21% 0 0);
1398
+ --uc-primary-foreground-light: oklch(100% 0 0);
1399
+ --uc-secondary-light: oklch(21% 0 0 / 0.05);
1400
+ --uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
1401
+ --uc-secondary-foreground-light: oklch(21% 0 0);
1402
+ --uc-muted-light: oklch(97% 0 0);
1403
+ --uc-muted-foreground-light: oklch(40% 0 0);
1404
+ --uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
1405
+ --uc-destructive-foreground-light: oklch(59% 0.235 28.5);
1406
+ --uc-border-light: oklch(92% 0 0);
1407
+ --uc-dialog-shadow-light: 0px 6px 20px oklch(0% 0 0 / 0.1);
1408
+ --uc-simple-btn-light: oklch(94% 0 0);
1409
+ --uc-simple-btn-hover-light: oklch(92% 0 0);
1410
+ --uc-simple-btn-foreground-light: oklch(20% 0 0);
1411
+
1412
+ /* Dark colors OKLCH */
1413
+ --uc-primary-oklch-dark: 69% 0.1768 258.4; /* Quick customization: change this value to your brand color */
1414
+ --uc-primary-dark: oklch(var(--uc-primary-oklch-dark));
1415
+ --uc-primary-hover-dark: oklch(var(--uc-primary-oklch-dark) / 90%);
1416
+ --uc-primary-transparent-dark: oklch(var(--uc-primary-oklch-dark) / 7%);
1417
+ --uc-background-dark: oklch(22% 0 0);
1418
+ --uc-foreground-dark: oklch(91% 0 0);
1419
+ --uc-primary-foreground-dark: oklch(0% 0 0);
1420
+ --uc-secondary-dark: oklch(91% 0 0 / 0.07);
1421
+ --uc-secondary-hover-dark: oklch(91% 0 0 / 0.1);
1422
+ --uc-secondary-foreground-dark: oklch(91% 0 0);
1423
+ --uc-muted-dark: oklch(26% 0 0);
1424
+ --uc-muted-foreground-dark: oklch(68% 0 0);
1425
+ --uc-destructive-dark: oklch(67% 0.191 27.5 / 0.1);
1426
+ --uc-destructive-foreground-dark: oklch(67% 0.191 27.5);
1427
+ --uc-border-dark: oklch(36% 0 0);
1428
+ --uc-dialog-shadow-dark: 0px 6px 20px oklch(0% 0 0 / 0.25);
1429
+ --uc-simple-btn-dark: oklch(26% 0 0);
1430
+ --uc-simple-btn-hover-dark: oklch(29% 0 0);
1431
+ --uc-simple-btn-foreground-dark: oklch(100% 0 0);
1432
+ }
1433
+ }
1434
+
1435
+ @media only screen and (max-height: 600px) {
1436
+ :where([uc-wgt-common]) {
1437
+ --uc-dialog-max-height: 100%;
1438
+ }
1439
+ }
1440
+
1441
+ @media only screen and (max-width: 680px) {
1442
+ :where([uc-wgt-common]) {
1443
+ --uc-grid-col: 2;
1444
+ }
1445
+ }
1446
+
1447
+ @media only screen and (max-width: 430px) {
1448
+ :where([uc-wgt-common]) {
1449
+ --uc-dialog-max-width: 100vw;
1450
+ --uc-dialog-max-height: var(--uploadcare-blocks-window-height);
1451
+ --uc-grid-col: 1;
1452
+ }
1453
+ }
1454
+
1455
+ @media (prefers-color-scheme: light) {
1456
+ :where([uc-wgt-common]) {
1457
+ --uc-background: var(--uc-background-light);
1458
+ --uc-foreground: var(--uc-foreground-light);
1459
+ --uc-primary: var(--uc-primary-light);
1460
+ --uc-primary-hover: var(--uc-primary-hover-light);
1461
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
1462
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
1463
+ --uc-secondary: var(--uc-secondary-light);
1464
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
1465
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
1466
+ --uc-muted: var(--uc-muted-light);
1467
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
1468
+ --uc-destructive: var(--uc-destructive-light);
1469
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
1470
+ --uc-border: var(--uc-border-light);
1471
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
1472
+ --uc-simple-btn: var(--uc-simple-btn-light);
1473
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
1474
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
1475
+ }
1476
+ }
1477
+
1478
+ @media (prefers-color-scheme: dark) {
1479
+ :where([uc-wgt-common]) {
1480
+ --uc-background: var(--uc-background-dark);
1481
+ --uc-foreground: var(--uc-foreground-dark);
1482
+ --uc-primary: var(--uc-primary-dark);
1483
+ --uc-primary-hover: var(--uc-primary-hover-dark);
1484
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
1485
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
1486
+ --uc-secondary: var(--uc-secondary-dark);
1487
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
1488
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
1489
+ --uc-muted: var(--uc-muted-dark);
1490
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
1491
+ --uc-destructive: var(--uc-destructive-dark);
1492
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
1493
+ --uc-border: var(--uc-border-dark);
1494
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
1495
+ --uc-simple-btn: var(--uc-simple-btn-dark);
1496
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
1497
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
1498
+ }
1499
+ }
1500
+
1501
+ :where(.uc-light) {
1502
+ --uc-background: var(--uc-background-light);
1503
+ --uc-foreground: var(--uc-foreground-light);
1504
+ --uc-primary: var(--uc-primary-light);
1505
+ --uc-primary-hover: var(--uc-primary-hover-light);
1506
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
1507
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
1508
+ --uc-secondary: var(--uc-secondary-light);
1509
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
1510
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
1511
+ --uc-muted: var(--uc-muted-light);
1512
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
1513
+ --uc-destructive: var(--uc-destructive-light);
1514
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
1515
+ --uc-border: var(--uc-border-light);
1516
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
1517
+ --uc-simple-btn: var(--uc-simple-btn-light);
1518
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
1519
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
1520
+ }
1521
+
1522
+ :where(.uc-dark) {
1523
+ --uc-background: var(--uc-background-dark);
1524
+ --uc-foreground: var(--uc-foreground-dark);
1525
+ --uc-primary: var(--uc-primary-dark);
1526
+ --uc-primary-hover: var(--uc-primary-hover-dark);
1527
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
1528
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
1529
+ --uc-secondary: var(--uc-secondary-dark);
1530
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
1531
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
1532
+ --uc-muted: var(--uc-muted-dark);
1533
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
1534
+ --uc-destructive: var(--uc-destructive-dark);
1535
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
1536
+ --uc-border: var(--uc-border-dark);
1537
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
1538
+ --uc-simple-btn: var(--uc-simple-btn-dark);
1539
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
1540
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
1541
+ }
1542
+
1543
+ :where(.uc-purple) {
1544
+ --uc-primary-oklch-light: 47% 0.22 300;
1545
+ --uc-primary-oklch-dark: 69% 0.1768 300;
1546
+ }
1547
+
1548
+ :where(.uc-red) {
1549
+ --uc-primary-oklch-light: 47% 0.21 21;
1550
+ --uc-primary-oklch-dark: 71% 0.1768 21;
1551
+ }
1552
+
1553
+ :where(.uc-orange) {
1554
+ --uc-primary-oklch-light: 47% 0.1376 51.88;
1555
+ --uc-primary-oklch-dark: 69% 0.1768 51.88;
1556
+ }
1557
+
1558
+ :where(.uc-green) {
1559
+ --uc-primary-oklch-light: 45% 0.14 130;
1560
+ --uc-primary-oklch-dark: 69% 0.1768 130;
1561
+ }
1562
+
1563
+ :where(.uc-turquoise) {
1564
+ --uc-primary-oklch-light: 45% 0.0854 174;
1565
+ --uc-primary-oklch-dark: 69% 0.1768 174;
1566
+ }
1567
+
1568
+ :where(.uc-gray) {
1569
+ --uc-primary-oklch-light: 10% 0 0;
1570
+ --uc-primary-oklch-dark: 97% 0 0;
1571
+ }
1572
+
1573
+ :where(.uc-contrast) {
1574
+ --uc-border-light: oklch(50% 0 0);
1575
+ --uc-border-dark: oklch(50% 0 0);
1576
+
1577
+ --uc-muted-light: oklch(98% 0 0);
1578
+ --uc-muted-dark: oklch(16% 0 0);
1579
+
1580
+ --uc-muted-foreground-light: oklch(20% 0 0);
1581
+ --uc-muted-foreground-dark: oklch(80% 0 0);
1582
+
1583
+ --uc-background-light: oklch(100% 0 0);
1584
+ --uc-foreground-light: oklch(0% 0 0);
1585
+
1586
+ --uc-background-dark: oklch(10% 0 0);
1587
+ --uc-foreground-dark: oklch(100% 0 0);
1588
+ }
1589
+ }
1590
+ @layer uc.base {
1591
+ :where([uc-wgt-common]) {
1592
+ color: var(--uc-foreground);
1593
+ font-size: var(--uc-font-size);
1594
+ line-height: var(--uc-line-height);
1595
+ font-family: var(--uc-font-family);
1596
+ }
1597
+
1598
+ :where([uc-wgt-common]) * {
1599
+ box-sizing: border-box;
1600
+ }
1601
+
1602
+ :where([uc-wgt-common]) button {
1603
+ display: flex;
1604
+ align-items: center;
1605
+ justify-content: center;
1606
+ height: var(--uc-button-size);
1607
+ padding-right: 14px;
1608
+ padding-left: 14px;
1609
+ font-size: 1em;
1610
+ font-family: inherit;
1611
+ white-space: nowrap;
1612
+ border: none;
1613
+ border-radius: var(--uc-radius);
1614
+ cursor: pointer;
1615
+ user-select: none;
1616
+ transition: background-color var(--uc-transition);
1617
+ }
1618
+
1619
+ :where([uc-wgt-common]) button:focus-visible {
1620
+ outline-offset: 2px;
1621
+ }
1622
+
1623
+ :where([uc-wgt-common]) button.uc-primary-btn {
1624
+ color: var(--uc-primary-foreground);
1625
+ background-color: var(--uc-primary);
1626
+ }
1627
+
1628
+ :where([uc-wgt-common]) button.uc-primary-btn:hover {
1629
+ background-color: var(--uc-primary-hover);
1630
+ }
1631
+
1632
+ :where([uc-wgt-common]) button.uc-secondary-btn {
1633
+ color: var(--uc-secondary-foreground);
1634
+ background-color: var(--uc-secondary);
1635
+ }
1636
+
1637
+ :where([uc-wgt-common]) button.uc-secondary-btn:hover {
1638
+ background-color: var(--uc-secondary-hover);
1639
+ }
1640
+
1641
+ :where([uc-wgt-common].uc-contrast) button.uc-secondary-btn {
1642
+ border: 1px solid var(--uc-border);
1643
+ }
1644
+
1645
+ :where([uc-wgt-common]) button.uc-mini-btn {
1646
+ height: var(--uc-button-size);
1647
+ padding: 0;
1648
+ background-color: transparent;
1649
+ color: var(--uc-secondary-foreground);
1650
+ }
1651
+
1652
+ :where([uc-wgt-common]) button.uc-mini-btn:hover {
1653
+ background-color: var(--uc-secondary);
1654
+ }
1655
+
1656
+ :where([uc-wgt-common]) :is(button[disabled], button.uc-primary-btn[disabled], button.uc-secondary-btn[disabled]) {
1657
+ opacity: 0.5;
1658
+ pointer-events: none;
1659
+ }
1660
+
1661
+ :where([uc-wgt-common]) a {
1662
+ color: var(--uc-primary);
1663
+ text-decoration: none;
1664
+ }
1665
+
1666
+ /* TODO: if we're using disabled <a> somewhere, we should stop */
1667
+ :where([uc-wgt-common]) a[disabled] {
1668
+ pointer-events: none;
1669
+ }
1670
+
1671
+ :where([uc-wgt-common]) input[type="text"] {
1672
+ display: flex;
1673
+ width: 100%;
1674
+ height: var(--uc-button-size);
1675
+ padding-right: 10px;
1676
+ padding-left: 10px;
1677
+ color: var(--uc-foreground);
1678
+ font-size: 1em;
1679
+ font-family: inherit;
1680
+ background-color: var(--uc-background);
1681
+ border: 1px solid var(--uc-border);
1682
+ outline: 1px solid transparent;
1683
+ border-radius: var(--uc-radius);
1684
+ transition:
1685
+ border-color var(--uc-transition),
1686
+ outline-color var(--uc-transition);
1687
+ }
1688
+
1689
+ :where([uc-wgt-common]) input[type="text"]::placeholder {
1690
+ color: var(--uc-muted-foreground);
1691
+ }
1692
+
1693
+ :where([uc-wgt-common]) input[type="text"]:focus {
1694
+ outline-color: var(--uc-primary-hover);
1695
+ border-color: var(--uc-primary-hover);
1696
+ }
1697
+
1698
+ /* TODO: check if there's any necessity of disabled input */
1699
+ :where([uc-wgt-common]) input[disabled] {
1700
+ opacity: 0.6;
1701
+ pointer-events: none;
1702
+ }
1703
+ :where([uc-wgt-common]) uc-select[disabled],
1704
+ :where([uc-wgt-common]) select[disabled] {
1705
+ opacity: 0.6;
1706
+ pointer-events: none;
1707
+ }
1708
+ }
1709
+ @layer uc.rules {
1710
+ :where([uc-wgt-common]) [hidden] {
1711
+ display: none;
1712
+ }
1713
+
1714
+ :where([uc-wgt-common]) [activity]:not([active], .active) {
1715
+ display: none;
1716
+ }
1717
+
1718
+ :where([uc-wgt-common]) dialog:not([open]) [activity] {
1719
+ display: none;
1720
+ }
1721
+ }
1722
+ @layer uc.post-reset {
1723
+ :where([uc-wgt-common]) uc-source-btn[type] {
1724
+ all: unset;
1725
+ }
1726
+ }
1727
+ @layer uc, uc.base, uc.components, uc.rules, uc.solutions, uc.post-reset;
1728
+ @layer uc.base {
1729
+ :where([uc-wgt-common]) {
1730
+ --cfg-init-activity: "start-from";
1731
+ --cfg-done-activity: "";
1732
+ }
1733
+ }
1734
+ @layer uc.base {
1735
+ :where([uc-wgt-common]) {
1736
+ /* Font */
1737
+ --uc-font-family: system-ui;
1738
+ --uc-font-size: 14px;
1739
+ --uc-line-height: normal;
1740
+ --uc-simple-btn-font-family: system-ui;
1741
+ --uc-simple-btn-font-size: 14px;
1742
+
1743
+ /* Sizes */
1744
+ --uc-button-size: 32px;
1745
+ --uc-preview-size: 32px;
1746
+ --uc-padding: 10px;
1747
+ --uc-radius: 8px;
1748
+ --uc-transition: 0.2s ease;
1749
+ --uc-dialog-width: 430px;
1750
+ --uc-dialog-max-width: 920px;
1751
+ --uc-dialog-max-height: 675px;
1752
+ --uc-simple-btn-padding: 7px 14px;
1753
+
1754
+ --uc-grid-col: 3;
1755
+ --uc-grid-preview-image-height: auto;
1756
+ --uc-grid-gap: calc(var(--uc-padding) / 2);
1757
+ --uc-grid-aspect-ratio: 1 / 1;
1758
+
1759
+ /* Default colors, in case of media query failure */
1760
+ --uc-background: var(--uc-background-light);
1761
+ --uc-foreground: var(--uc-foreground-light);
1762
+ --uc-primary: var(--uc-primary-light);
1763
+ --uc-primary-hover: var(--uc-primary-hover-light);
1764
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
1765
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
1766
+ --uc-secondary: var(--uc-secondary-light);
1767
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
1768
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
1769
+ --uc-muted: var(--uc-muted-light);
1770
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
1771
+ --uc-destructive: var(--uc-destructive-light);
1772
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
1773
+ --uc-border: var(--uc-border-light);
1774
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
1775
+ --uc-simple-btn: var(--uc-simple-btn-light);
1776
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
1777
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
1778
+ }
1779
+
1780
+ @supports not (color: oklch(0% 0 0)) {
1781
+ :where([uc-wgt-common]) {
1782
+ /* Light colors RGB fallback */
1783
+ --uc-primary-rgb-light: 23 75 215;
1784
+ --uc-primary-light: rgb(var(--uc-primary-rgb-light));
1785
+ --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);
1786
+ --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);
1787
+ --uc-background-light: rgb(255 255 255);
1788
+ --uc-foreground-light: rgb(24 24 24);
1789
+ --uc-primary-foreground-light: #fff;
1790
+ --uc-secondary-light: rgb(24 24 24 / 5%);
1791
+ --uc-secondary-hover-light: rgb(24 24 24 / 8%);
1792
+ --uc-secondary-foreground-light: rgb(24 24 24);
1793
+ --uc-muted-light: rgb(245 245 245);
1794
+ --uc-muted-foreground-light: rgb(113 113 113);
1795
+ --uc-destructive-light: rgb(232 19 20 / 5%);
1796
+ --uc-destructive-foreground-light: rgb(232 19 20);
1797
+ --uc-border-light: rgb(228 228 232);
1798
+ --uc-dialog-shadow-light: 0px 6px 20px rgb(0 0 0 / 10%);
1799
+ --uc-simple-btn-light: rgb(235 235 235);
1800
+ --uc-simple-btn-hover-light: rgb(228 228 228);
1801
+ --uc-simple-btn-foreground-light: rgb(24 24 24);
1802
+
1803
+ /* Dark colors RGB fallback */
1804
+ --uc-primary-rgb-dark: 87 154 255;
1805
+ --uc-primary-dark: rgb(var(--uc-primary-rgb-dark));
1806
+ --uc-primary-hover-dark: rgb(var(--uc-primary-rgb-dark) / 90%);
1807
+ --uc-primary-transparent-dark: rgb(var(--uc-primary-rgb-dark) / 7%);
1808
+ --uc-background-dark: rgb(27 27 27);
1809
+ --uc-foreground-dark: rgb(225 225 225);
1810
+ --uc-primary-foreground-dark: rgb(0 0 0);
1811
+ --uc-secondary-dark: rgb(225 225 225 / 7%);
1812
+ --uc-secondary-hover-dark: rgb(225 225 225 / 10%);
1813
+ --uc-secondary-foreground-dark: rgb(225 225 225);
1814
+ --uc-muted-dark: rgb(36 36 36);
1815
+ --uc-muted-foreground-dark: rgb(152 152 152);
1816
+ --uc-destructive-dark: rgb(244 90 79 / 10%);
1817
+ --uc-destructive-foreground-dark: rgb(244 90 79);
1818
+ --uc-border-dark: rgb(61 61 61);
1819
+ --uc-dialog-shadow-dark: 0px 6px 20px rgb(0 0 0 / 25%);
1820
+ --uc-simple-btn-dark: rgb(36 36 36);
1821
+ --uc-simple-btn-hover-dark: rgb(43 43 43);
1822
+ --uc-simple-btn-foreground-dark: rgb(255 255 255);
1823
+ }
1824
+ }
1825
+
1826
+ @supports (color: oklch(0% 0 0)) {
1827
+ :where([uc-wgt-common]) {
1828
+ /* Light colors OKLCH */
1829
+ --uc-primary-oklch-light: 47% 0.22 264; /* Quick customization: change this value to your brand color */
1830
+ --uc-primary-light: oklch(var(--uc-primary-oklch-light));
1831
+ --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
1832
+ --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);
1833
+ --uc-background-light: oklch(100% 0 0);
1834
+ --uc-foreground-light: oklch(21% 0 0);
1835
+ --uc-primary-foreground-light: oklch(100% 0 0);
1836
+ --uc-secondary-light: oklch(21% 0 0 / 0.05);
1837
+ --uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
1838
+ --uc-secondary-foreground-light: oklch(21% 0 0);
1839
+ --uc-muted-light: oklch(97% 0 0);
1840
+ --uc-muted-foreground-light: oklch(40% 0 0);
1841
+ --uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
1842
+ --uc-destructive-foreground-light: oklch(59% 0.235 28.5);
1843
+ --uc-border-light: oklch(92% 0 0);
1844
+ --uc-dialog-shadow-light: 0px 6px 20px oklch(0% 0 0 / 0.1);
1845
+ --uc-simple-btn-light: oklch(94% 0 0);
1846
+ --uc-simple-btn-hover-light: oklch(92% 0 0);
1847
+ --uc-simple-btn-foreground-light: oklch(20% 0 0);
1848
+
1849
+ /* Dark colors OKLCH */
1850
+ --uc-primary-oklch-dark: 69% 0.1768 258.4; /* Quick customization: change this value to your brand color */
1851
+ --uc-primary-dark: oklch(var(--uc-primary-oklch-dark));
1852
+ --uc-primary-hover-dark: oklch(var(--uc-primary-oklch-dark) / 90%);
1853
+ --uc-primary-transparent-dark: oklch(var(--uc-primary-oklch-dark) / 7%);
1854
+ --uc-background-dark: oklch(22% 0 0);
1855
+ --uc-foreground-dark: oklch(91% 0 0);
1856
+ --uc-primary-foreground-dark: oklch(0% 0 0);
1857
+ --uc-secondary-dark: oklch(91% 0 0 / 0.07);
1858
+ --uc-secondary-hover-dark: oklch(91% 0 0 / 0.1);
1859
+ --uc-secondary-foreground-dark: oklch(91% 0 0);
1860
+ --uc-muted-dark: oklch(26% 0 0);
1861
+ --uc-muted-foreground-dark: oklch(68% 0 0);
1862
+ --uc-destructive-dark: oklch(67% 0.191 27.5 / 0.1);
1863
+ --uc-destructive-foreground-dark: oklch(67% 0.191 27.5);
1864
+ --uc-border-dark: oklch(36% 0 0);
1865
+ --uc-dialog-shadow-dark: 0px 6px 20px oklch(0% 0 0 / 0.25);
1866
+ --uc-simple-btn-dark: oklch(26% 0 0);
1867
+ --uc-simple-btn-hover-dark: oklch(29% 0 0);
1868
+ --uc-simple-btn-foreground-dark: oklch(100% 0 0);
1869
+ }
1870
+ }
1871
+
1872
+ @media only screen and (max-height: 600px) {
1873
+ :where([uc-wgt-common]) {
1874
+ --uc-dialog-max-height: 100%;
1875
+ }
1876
+ }
1877
+
1878
+ @media only screen and (max-width: 680px) {
1879
+ :where([uc-wgt-common]) {
1880
+ --uc-grid-col: 2;
1881
+ }
1882
+ }
1883
+
1884
+ @media only screen and (max-width: 430px) {
1885
+ :where([uc-wgt-common]) {
1886
+ --uc-dialog-max-width: 100vw;
1887
+ --uc-dialog-max-height: var(--uploadcare-blocks-window-height);
1888
+ --uc-grid-col: 1;
1889
+ }
1890
+ }
1891
+
1892
+ @media (prefers-color-scheme: light) {
1893
+ :where([uc-wgt-common]) {
1894
+ --uc-background: var(--uc-background-light);
1895
+ --uc-foreground: var(--uc-foreground-light);
1896
+ --uc-primary: var(--uc-primary-light);
1897
+ --uc-primary-hover: var(--uc-primary-hover-light);
1898
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
1899
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
1900
+ --uc-secondary: var(--uc-secondary-light);
1901
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
1902
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
1903
+ --uc-muted: var(--uc-muted-light);
1904
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
1905
+ --uc-destructive: var(--uc-destructive-light);
1906
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
1907
+ --uc-border: var(--uc-border-light);
1908
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
1909
+ --uc-simple-btn: var(--uc-simple-btn-light);
1910
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
1911
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
1912
+ }
1913
+ }
1914
+
1915
+ @media (prefers-color-scheme: dark) {
1916
+ :where([uc-wgt-common]) {
1917
+ --uc-background: var(--uc-background-dark);
1918
+ --uc-foreground: var(--uc-foreground-dark);
1919
+ --uc-primary: var(--uc-primary-dark);
1920
+ --uc-primary-hover: var(--uc-primary-hover-dark);
1921
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
1922
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
1923
+ --uc-secondary: var(--uc-secondary-dark);
1924
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
1925
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
1926
+ --uc-muted: var(--uc-muted-dark);
1927
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
1928
+ --uc-destructive: var(--uc-destructive-dark);
1929
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
1930
+ --uc-border: var(--uc-border-dark);
1931
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
1932
+ --uc-simple-btn: var(--uc-simple-btn-dark);
1933
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
1934
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
1935
+ }
1936
+ }
1937
+
1938
+ :where(.uc-light) {
1939
+ --uc-background: var(--uc-background-light);
1940
+ --uc-foreground: var(--uc-foreground-light);
1941
+ --uc-primary: var(--uc-primary-light);
1942
+ --uc-primary-hover: var(--uc-primary-hover-light);
1943
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
1944
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
1945
+ --uc-secondary: var(--uc-secondary-light);
1946
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
1947
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
1948
+ --uc-muted: var(--uc-muted-light);
1949
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
1950
+ --uc-destructive: var(--uc-destructive-light);
1951
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
1952
+ --uc-border: var(--uc-border-light);
1953
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
1954
+ --uc-simple-btn: var(--uc-simple-btn-light);
1955
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
1956
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
1957
+ }
1958
+
1959
+ :where(.uc-dark) {
1960
+ --uc-background: var(--uc-background-dark);
1961
+ --uc-foreground: var(--uc-foreground-dark);
1962
+ --uc-primary: var(--uc-primary-dark);
1963
+ --uc-primary-hover: var(--uc-primary-hover-dark);
1964
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
1965
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
1966
+ --uc-secondary: var(--uc-secondary-dark);
1967
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
1968
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
1969
+ --uc-muted: var(--uc-muted-dark);
1970
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
1971
+ --uc-destructive: var(--uc-destructive-dark);
1972
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
1973
+ --uc-border: var(--uc-border-dark);
1974
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
1975
+ --uc-simple-btn: var(--uc-simple-btn-dark);
1976
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
1977
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
1978
+ }
1979
+
1980
+ :where(.uc-purple) {
1981
+ --uc-primary-oklch-light: 47% 0.22 300;
1982
+ --uc-primary-oklch-dark: 69% 0.1768 300;
1983
+ }
1984
+
1985
+ :where(.uc-red) {
1986
+ --uc-primary-oklch-light: 47% 0.21 21;
1987
+ --uc-primary-oklch-dark: 71% 0.1768 21;
1988
+ }
1989
+
1990
+ :where(.uc-orange) {
1991
+ --uc-primary-oklch-light: 47% 0.1376 51.88;
1992
+ --uc-primary-oklch-dark: 69% 0.1768 51.88;
1993
+ }
1994
+
1995
+ :where(.uc-green) {
1996
+ --uc-primary-oklch-light: 45% 0.14 130;
1997
+ --uc-primary-oklch-dark: 69% 0.1768 130;
1998
+ }
1999
+
2000
+ :where(.uc-turquoise) {
2001
+ --uc-primary-oklch-light: 45% 0.0854 174;
2002
+ --uc-primary-oklch-dark: 69% 0.1768 174;
2003
+ }
2004
+
2005
+ :where(.uc-gray) {
2006
+ --uc-primary-oklch-light: 10% 0 0;
2007
+ --uc-primary-oklch-dark: 97% 0 0;
2008
+ }
2009
+
2010
+ :where(.uc-contrast) {
2011
+ --uc-border-light: oklch(50% 0 0);
2012
+ --uc-border-dark: oklch(50% 0 0);
2013
+
2014
+ --uc-muted-light: oklch(98% 0 0);
2015
+ --uc-muted-dark: oklch(16% 0 0);
2016
+
2017
+ --uc-muted-foreground-light: oklch(20% 0 0);
2018
+ --uc-muted-foreground-dark: oklch(80% 0 0);
2019
+
2020
+ --uc-background-light: oklch(100% 0 0);
2021
+ --uc-foreground-light: oklch(0% 0 0);
2022
+
2023
+ --uc-background-dark: oklch(10% 0 0);
2024
+ --uc-foreground-dark: oklch(100% 0 0);
2025
+ }
2026
+ }
2027
+ @layer uc.base {
2028
+ :where([uc-wgt-common]) {
2029
+ color: var(--uc-foreground);
2030
+ font-size: var(--uc-font-size);
2031
+ line-height: var(--uc-line-height);
2032
+ font-family: var(--uc-font-family);
2033
+ }
2034
+
2035
+ :where([uc-wgt-common]) * {
2036
+ box-sizing: border-box;
2037
+ }
2038
+
2039
+ :where([uc-wgt-common]) button {
2040
+ display: flex;
2041
+ align-items: center;
2042
+ justify-content: center;
2043
+ height: var(--uc-button-size);
2044
+ padding-right: 14px;
2045
+ padding-left: 14px;
2046
+ font-size: 1em;
2047
+ font-family: inherit;
2048
+ white-space: nowrap;
2049
+ border: none;
2050
+ border-radius: var(--uc-radius);
2051
+ cursor: pointer;
2052
+ user-select: none;
2053
+ transition: background-color var(--uc-transition);
2054
+ }
2055
+
2056
+ :where([uc-wgt-common]) button:focus-visible {
2057
+ outline-offset: 2px;
2058
+ }
2059
+
2060
+ :where([uc-wgt-common]) button.uc-primary-btn {
2061
+ color: var(--uc-primary-foreground);
2062
+ background-color: var(--uc-primary);
2063
+ }
2064
+
2065
+ :where([uc-wgt-common]) button.uc-primary-btn:hover {
2066
+ background-color: var(--uc-primary-hover);
2067
+ }
2068
+
2069
+ :where([uc-wgt-common]) button.uc-secondary-btn {
2070
+ color: var(--uc-secondary-foreground);
2071
+ background-color: var(--uc-secondary);
2072
+ }
2073
+
2074
+ :where([uc-wgt-common]) button.uc-secondary-btn:hover {
2075
+ background-color: var(--uc-secondary-hover);
2076
+ }
2077
+
2078
+ :where([uc-wgt-common].uc-contrast) button.uc-secondary-btn {
2079
+ border: 1px solid var(--uc-border);
2080
+ }
2081
+
2082
+ :where([uc-wgt-common]) button.uc-mini-btn {
2083
+ height: var(--uc-button-size);
2084
+ padding: 0;
2085
+ background-color: transparent;
2086
+ color: var(--uc-secondary-foreground);
2087
+ }
2088
+
2089
+ :where([uc-wgt-common]) button.uc-mini-btn:hover {
2090
+ background-color: var(--uc-secondary);
2091
+ }
2092
+
2093
+ :where([uc-wgt-common]) :is(button[disabled], button.uc-primary-btn[disabled], button.uc-secondary-btn[disabled]) {
2094
+ opacity: 0.5;
2095
+ pointer-events: none;
2096
+ }
2097
+
2098
+ :where([uc-wgt-common]) a {
2099
+ color: var(--uc-primary);
2100
+ text-decoration: none;
2101
+ }
2102
+
2103
+ /* TODO: if we're using disabled <a> somewhere, we should stop */
2104
+ :where([uc-wgt-common]) a[disabled] {
2105
+ pointer-events: none;
2106
+ }
2107
+
2108
+ :where([uc-wgt-common]) input[type="text"] {
2109
+ display: flex;
2110
+ width: 100%;
2111
+ height: var(--uc-button-size);
2112
+ padding-right: 10px;
2113
+ padding-left: 10px;
2114
+ color: var(--uc-foreground);
2115
+ font-size: 1em;
2116
+ font-family: inherit;
2117
+ background-color: var(--uc-background);
2118
+ border: 1px solid var(--uc-border);
2119
+ outline: 1px solid transparent;
2120
+ border-radius: var(--uc-radius);
2121
+ transition:
2122
+ border-color var(--uc-transition),
2123
+ outline-color var(--uc-transition);
2124
+ }
2125
+
2126
+ :where([uc-wgt-common]) input[type="text"]::placeholder {
2127
+ color: var(--uc-muted-foreground);
2128
+ }
2129
+
2130
+ :where([uc-wgt-common]) input[type="text"]:focus {
2131
+ outline-color: var(--uc-primary-hover);
2132
+ border-color: var(--uc-primary-hover);
2133
+ }
2134
+
2135
+ /* TODO: check if there's any necessity of disabled input */
2136
+ :where([uc-wgt-common]) input[disabled] {
2137
+ opacity: 0.6;
2138
+ pointer-events: none;
2139
+ }
2140
+ :where([uc-wgt-common]) uc-select[disabled],
2141
+ :where([uc-wgt-common]) select[disabled] {
2142
+ opacity: 0.6;
2143
+ pointer-events: none;
2144
+ }
2145
+ }
2146
+ @layer uc.rules {
2147
+ :where([uc-wgt-common]) [hidden] {
2148
+ display: none;
2149
+ }
2150
+
2151
+ :where([uc-wgt-common]) [activity]:not([active], .active) {
2152
+ display: none;
2153
+ }
2154
+
2155
+ :where([uc-wgt-common]) dialog:not([open]) [activity] {
2156
+ display: none;
2157
+ }
2158
+ }
2159
+ @layer uc.post-reset {
2160
+ :where([uc-wgt-common]) uc-source-btn[type] {
2161
+ all: unset;
2162
+ }
2163
+ }
2164
+ @layer uc.solutions {
2165
+ [uc-file-uploader-inline] uc-start-from {
2166
+ height: 100%;
2167
+ container-type: inline-size;
2168
+ }
2169
+
2170
+ [uc-file-uploader-inline] {
2171
+ --cfg-done-activity: "start-from";
2172
+ --cfg-init-activity: "start-from";
2173
+
2174
+ flex: 1;
2175
+ }
2176
+
2177
+ [uc-file-uploader-inline] uc-activity-header::after {
2178
+ width: var(--uc-button-size);
2179
+ height: var(--uc-button-size);
2180
+ content: "";
2181
+ }
2182
+
2183
+ [uc-file-uploader-inline] uc-activity-header .uc-close-btn {
2184
+ display: none;
2185
+ }
2186
+
2187
+ [uc-file-uploader-inline] uc-copyright .uc-credits {
2188
+ position: static;
2189
+ }
2190
+
2191
+ @container (min-width: 500px) {
2192
+ [uc-file-uploader-inline] uc-start-from .uc-content {
2193
+ grid-template-columns: 1fr max-content;
2194
+ grid-template-rows: 1fr max-content;
2195
+ height: 100%;
2196
+ }
2197
+
2198
+ [uc-file-uploader-inline] uc-start-from uc-copyright {
2199
+ grid-column: 2;
2200
+ }
2201
+
2202
+ [uc-file-uploader-inline] uc-start-from uc-drop-area {
2203
+ grid-row: span 3;
2204
+ }
2205
+
2206
+ [uc-file-uploader-inline] uc-start-from:has(uc-copyright[hidden]) uc-drop-area {
2207
+ grid-row: span 2;
2208
+ }
2209
+
2210
+ [uc-file-uploader-inline] uc-start-from:has(.uc-cancel-btn[hidden]) uc-drop-area {
2211
+ grid-row: span 2;
2212
+ }
2213
+
2214
+ [uc-file-uploader-inline] uc-start-from:has(uc-copyright[hidden]):has(.uc-cancel-btn[hidden]) uc-drop-area {
2215
+ grid-row: span 1;
2216
+ }
2217
+ }
2218
+ }
2219
+ @layer uc, uc.base, uc.components, uc.rules, uc.solutions, uc.post-reset;
2220
+ @layer uc.base {
2221
+ :where([uc-wgt-common]) {
2222
+ --cfg-init-activity: "start-from";
2223
+ --cfg-done-activity: "";
2224
+ }
2225
+ }
2226
+ @layer uc.base {
2227
+ :where([uc-wgt-common]) {
2228
+ /* Font */
2229
+ --uc-font-family: system-ui;
2230
+ --uc-font-size: 14px;
2231
+ --uc-line-height: normal;
2232
+ --uc-simple-btn-font-family: system-ui;
2233
+ --uc-simple-btn-font-size: 14px;
2234
+
2235
+ /* Sizes */
2236
+ --uc-button-size: 32px;
2237
+ --uc-preview-size: 32px;
2238
+ --uc-padding: 10px;
2239
+ --uc-radius: 8px;
2240
+ --uc-transition: 0.2s ease;
2241
+ --uc-dialog-width: 430px;
2242
+ --uc-dialog-max-width: 920px;
2243
+ --uc-dialog-max-height: 675px;
2244
+ --uc-simple-btn-padding: 7px 14px;
2245
+
2246
+ --uc-grid-col: 3;
2247
+ --uc-grid-preview-image-height: auto;
2248
+ --uc-grid-gap: calc(var(--uc-padding) / 2);
2249
+ --uc-grid-aspect-ratio: 1 / 1;
2250
+
2251
+ /* Default colors, in case of media query failure */
2252
+ --uc-background: var(--uc-background-light);
2253
+ --uc-foreground: var(--uc-foreground-light);
2254
+ --uc-primary: var(--uc-primary-light);
2255
+ --uc-primary-hover: var(--uc-primary-hover-light);
2256
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
2257
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
2258
+ --uc-secondary: var(--uc-secondary-light);
2259
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
2260
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
2261
+ --uc-muted: var(--uc-muted-light);
2262
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
2263
+ --uc-destructive: var(--uc-destructive-light);
2264
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
2265
+ --uc-border: var(--uc-border-light);
2266
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
2267
+ --uc-simple-btn: var(--uc-simple-btn-light);
2268
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
2269
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
2270
+ }
2271
+
2272
+ @supports not (color: oklch(0% 0 0)) {
2273
+ :where([uc-wgt-common]) {
2274
+ /* Light colors RGB fallback */
2275
+ --uc-primary-rgb-light: 23 75 215;
2276
+ --uc-primary-light: rgb(var(--uc-primary-rgb-light));
2277
+ --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);
2278
+ --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);
2279
+ --uc-background-light: rgb(255 255 255);
2280
+ --uc-foreground-light: rgb(24 24 24);
2281
+ --uc-primary-foreground-light: #fff;
2282
+ --uc-secondary-light: rgb(24 24 24 / 5%);
2283
+ --uc-secondary-hover-light: rgb(24 24 24 / 8%);
2284
+ --uc-secondary-foreground-light: rgb(24 24 24);
2285
+ --uc-muted-light: rgb(245 245 245);
2286
+ --uc-muted-foreground-light: rgb(113 113 113);
2287
+ --uc-destructive-light: rgb(232 19 20 / 5%);
2288
+ --uc-destructive-foreground-light: rgb(232 19 20);
2289
+ --uc-border-light: rgb(228 228 232);
2290
+ --uc-dialog-shadow-light: 0px 6px 20px rgb(0 0 0 / 10%);
2291
+ --uc-simple-btn-light: rgb(235 235 235);
2292
+ --uc-simple-btn-hover-light: rgb(228 228 228);
2293
+ --uc-simple-btn-foreground-light: rgb(24 24 24);
2294
+
2295
+ /* Dark colors RGB fallback */
2296
+ --uc-primary-rgb-dark: 87 154 255;
2297
+ --uc-primary-dark: rgb(var(--uc-primary-rgb-dark));
2298
+ --uc-primary-hover-dark: rgb(var(--uc-primary-rgb-dark) / 90%);
2299
+ --uc-primary-transparent-dark: rgb(var(--uc-primary-rgb-dark) / 7%);
2300
+ --uc-background-dark: rgb(27 27 27);
2301
+ --uc-foreground-dark: rgb(225 225 225);
2302
+ --uc-primary-foreground-dark: rgb(0 0 0);
2303
+ --uc-secondary-dark: rgb(225 225 225 / 7%);
2304
+ --uc-secondary-hover-dark: rgb(225 225 225 / 10%);
2305
+ --uc-secondary-foreground-dark: rgb(225 225 225);
2306
+ --uc-muted-dark: rgb(36 36 36);
2307
+ --uc-muted-foreground-dark: rgb(152 152 152);
2308
+ --uc-destructive-dark: rgb(244 90 79 / 10%);
2309
+ --uc-destructive-foreground-dark: rgb(244 90 79);
2310
+ --uc-border-dark: rgb(61 61 61);
2311
+ --uc-dialog-shadow-dark: 0px 6px 20px rgb(0 0 0 / 25%);
2312
+ --uc-simple-btn-dark: rgb(36 36 36);
2313
+ --uc-simple-btn-hover-dark: rgb(43 43 43);
2314
+ --uc-simple-btn-foreground-dark: rgb(255 255 255);
2315
+ }
2316
+ }
2317
+
2318
+ @supports (color: oklch(0% 0 0)) {
2319
+ :where([uc-wgt-common]) {
2320
+ /* Light colors OKLCH */
2321
+ --uc-primary-oklch-light: 47% 0.22 264; /* Quick customization: change this value to your brand color */
2322
+ --uc-primary-light: oklch(var(--uc-primary-oklch-light));
2323
+ --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
2324
+ --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);
2325
+ --uc-background-light: oklch(100% 0 0);
2326
+ --uc-foreground-light: oklch(21% 0 0);
2327
+ --uc-primary-foreground-light: oklch(100% 0 0);
2328
+ --uc-secondary-light: oklch(21% 0 0 / 0.05);
2329
+ --uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
2330
+ --uc-secondary-foreground-light: oklch(21% 0 0);
2331
+ --uc-muted-light: oklch(97% 0 0);
2332
+ --uc-muted-foreground-light: oklch(40% 0 0);
2333
+ --uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
2334
+ --uc-destructive-foreground-light: oklch(59% 0.235 28.5);
2335
+ --uc-border-light: oklch(92% 0 0);
2336
+ --uc-dialog-shadow-light: 0px 6px 20px oklch(0% 0 0 / 0.1);
2337
+ --uc-simple-btn-light: oklch(94% 0 0);
2338
+ --uc-simple-btn-hover-light: oklch(92% 0 0);
2339
+ --uc-simple-btn-foreground-light: oklch(20% 0 0);
2340
+
2341
+ /* Dark colors OKLCH */
2342
+ --uc-primary-oklch-dark: 69% 0.1768 258.4; /* Quick customization: change this value to your brand color */
2343
+ --uc-primary-dark: oklch(var(--uc-primary-oklch-dark));
2344
+ --uc-primary-hover-dark: oklch(var(--uc-primary-oklch-dark) / 90%);
2345
+ --uc-primary-transparent-dark: oklch(var(--uc-primary-oklch-dark) / 7%);
2346
+ --uc-background-dark: oklch(22% 0 0);
2347
+ --uc-foreground-dark: oklch(91% 0 0);
2348
+ --uc-primary-foreground-dark: oklch(0% 0 0);
2349
+ --uc-secondary-dark: oklch(91% 0 0 / 0.07);
2350
+ --uc-secondary-hover-dark: oklch(91% 0 0 / 0.1);
2351
+ --uc-secondary-foreground-dark: oklch(91% 0 0);
2352
+ --uc-muted-dark: oklch(26% 0 0);
2353
+ --uc-muted-foreground-dark: oklch(68% 0 0);
2354
+ --uc-destructive-dark: oklch(67% 0.191 27.5 / 0.1);
2355
+ --uc-destructive-foreground-dark: oklch(67% 0.191 27.5);
2356
+ --uc-border-dark: oklch(36% 0 0);
2357
+ --uc-dialog-shadow-dark: 0px 6px 20px oklch(0% 0 0 / 0.25);
2358
+ --uc-simple-btn-dark: oklch(26% 0 0);
2359
+ --uc-simple-btn-hover-dark: oklch(29% 0 0);
2360
+ --uc-simple-btn-foreground-dark: oklch(100% 0 0);
2361
+ }
2362
+ }
2363
+
2364
+ @media only screen and (max-height: 600px) {
2365
+ :where([uc-wgt-common]) {
2366
+ --uc-dialog-max-height: 100%;
2367
+ }
2368
+ }
2369
+
2370
+ @media only screen and (max-width: 680px) {
2371
+ :where([uc-wgt-common]) {
2372
+ --uc-grid-col: 2;
2373
+ }
2374
+ }
2375
+
2376
+ @media only screen and (max-width: 430px) {
2377
+ :where([uc-wgt-common]) {
2378
+ --uc-dialog-max-width: 100vw;
2379
+ --uc-dialog-max-height: var(--uploadcare-blocks-window-height);
2380
+ --uc-grid-col: 1;
2381
+ }
2382
+ }
2383
+
2384
+ @media (prefers-color-scheme: light) {
2385
+ :where([uc-wgt-common]) {
2386
+ --uc-background: var(--uc-background-light);
2387
+ --uc-foreground: var(--uc-foreground-light);
2388
+ --uc-primary: var(--uc-primary-light);
2389
+ --uc-primary-hover: var(--uc-primary-hover-light);
2390
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
2391
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
2392
+ --uc-secondary: var(--uc-secondary-light);
2393
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
2394
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
2395
+ --uc-muted: var(--uc-muted-light);
2396
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
2397
+ --uc-destructive: var(--uc-destructive-light);
2398
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
2399
+ --uc-border: var(--uc-border-light);
2400
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
2401
+ --uc-simple-btn: var(--uc-simple-btn-light);
2402
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
2403
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
2404
+ }
2405
+ }
2406
+
2407
+ @media (prefers-color-scheme: dark) {
2408
+ :where([uc-wgt-common]) {
2409
+ --uc-background: var(--uc-background-dark);
2410
+ --uc-foreground: var(--uc-foreground-dark);
2411
+ --uc-primary: var(--uc-primary-dark);
2412
+ --uc-primary-hover: var(--uc-primary-hover-dark);
2413
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
2414
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
2415
+ --uc-secondary: var(--uc-secondary-dark);
2416
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
2417
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
2418
+ --uc-muted: var(--uc-muted-dark);
2419
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
2420
+ --uc-destructive: var(--uc-destructive-dark);
2421
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
2422
+ --uc-border: var(--uc-border-dark);
2423
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
2424
+ --uc-simple-btn: var(--uc-simple-btn-dark);
2425
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
2426
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
2427
+ }
2428
+ }
2429
+
2430
+ :where(.uc-light) {
2431
+ --uc-background: var(--uc-background-light);
2432
+ --uc-foreground: var(--uc-foreground-light);
2433
+ --uc-primary: var(--uc-primary-light);
2434
+ --uc-primary-hover: var(--uc-primary-hover-light);
2435
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
2436
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
2437
+ --uc-secondary: var(--uc-secondary-light);
2438
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
2439
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
2440
+ --uc-muted: var(--uc-muted-light);
2441
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
2442
+ --uc-destructive: var(--uc-destructive-light);
2443
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
2444
+ --uc-border: var(--uc-border-light);
2445
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
2446
+ --uc-simple-btn: var(--uc-simple-btn-light);
2447
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
2448
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
2449
+ }
2450
+
2451
+ :where(.uc-dark) {
2452
+ --uc-background: var(--uc-background-dark);
2453
+ --uc-foreground: var(--uc-foreground-dark);
2454
+ --uc-primary: var(--uc-primary-dark);
2455
+ --uc-primary-hover: var(--uc-primary-hover-dark);
2456
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
2457
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
2458
+ --uc-secondary: var(--uc-secondary-dark);
2459
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
2460
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
2461
+ --uc-muted: var(--uc-muted-dark);
2462
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
2463
+ --uc-destructive: var(--uc-destructive-dark);
2464
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
2465
+ --uc-border: var(--uc-border-dark);
2466
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
2467
+ --uc-simple-btn: var(--uc-simple-btn-dark);
2468
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
2469
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
2470
+ }
2471
+
2472
+ :where(.uc-purple) {
2473
+ --uc-primary-oklch-light: 47% 0.22 300;
2474
+ --uc-primary-oklch-dark: 69% 0.1768 300;
2475
+ }
2476
+
2477
+ :where(.uc-red) {
2478
+ --uc-primary-oklch-light: 47% 0.21 21;
2479
+ --uc-primary-oklch-dark: 71% 0.1768 21;
2480
+ }
2481
+
2482
+ :where(.uc-orange) {
2483
+ --uc-primary-oklch-light: 47% 0.1376 51.88;
2484
+ --uc-primary-oklch-dark: 69% 0.1768 51.88;
2485
+ }
2486
+
2487
+ :where(.uc-green) {
2488
+ --uc-primary-oklch-light: 45% 0.14 130;
2489
+ --uc-primary-oklch-dark: 69% 0.1768 130;
2490
+ }
2491
+
2492
+ :where(.uc-turquoise) {
2493
+ --uc-primary-oklch-light: 45% 0.0854 174;
2494
+ --uc-primary-oklch-dark: 69% 0.1768 174;
2495
+ }
2496
+
2497
+ :where(.uc-gray) {
2498
+ --uc-primary-oklch-light: 10% 0 0;
2499
+ --uc-primary-oklch-dark: 97% 0 0;
2500
+ }
2501
+
2502
+ :where(.uc-contrast) {
2503
+ --uc-border-light: oklch(50% 0 0);
2504
+ --uc-border-dark: oklch(50% 0 0);
2505
+
2506
+ --uc-muted-light: oklch(98% 0 0);
2507
+ --uc-muted-dark: oklch(16% 0 0);
2508
+
2509
+ --uc-muted-foreground-light: oklch(20% 0 0);
2510
+ --uc-muted-foreground-dark: oklch(80% 0 0);
2511
+
2512
+ --uc-background-light: oklch(100% 0 0);
2513
+ --uc-foreground-light: oklch(0% 0 0);
2514
+
2515
+ --uc-background-dark: oklch(10% 0 0);
2516
+ --uc-foreground-dark: oklch(100% 0 0);
2517
+ }
2518
+ }
2519
+ @layer uc.base {
2520
+ :where([uc-wgt-common]) {
2521
+ color: var(--uc-foreground);
2522
+ font-size: var(--uc-font-size);
2523
+ line-height: var(--uc-line-height);
2524
+ font-family: var(--uc-font-family);
2525
+ }
2526
+
2527
+ :where([uc-wgt-common]) * {
2528
+ box-sizing: border-box;
2529
+ }
2530
+
2531
+ :where([uc-wgt-common]) button {
2532
+ display: flex;
2533
+ align-items: center;
2534
+ justify-content: center;
2535
+ height: var(--uc-button-size);
2536
+ padding-right: 14px;
2537
+ padding-left: 14px;
2538
+ font-size: 1em;
2539
+ font-family: inherit;
2540
+ white-space: nowrap;
2541
+ border: none;
2542
+ border-radius: var(--uc-radius);
2543
+ cursor: pointer;
2544
+ user-select: none;
2545
+ transition: background-color var(--uc-transition);
2546
+ }
2547
+
2548
+ :where([uc-wgt-common]) button:focus-visible {
2549
+ outline-offset: 2px;
2550
+ }
2551
+
2552
+ :where([uc-wgt-common]) button.uc-primary-btn {
2553
+ color: var(--uc-primary-foreground);
2554
+ background-color: var(--uc-primary);
2555
+ }
2556
+
2557
+ :where([uc-wgt-common]) button.uc-primary-btn:hover {
2558
+ background-color: var(--uc-primary-hover);
2559
+ }
2560
+
2561
+ :where([uc-wgt-common]) button.uc-secondary-btn {
2562
+ color: var(--uc-secondary-foreground);
2563
+ background-color: var(--uc-secondary);
2564
+ }
2565
+
2566
+ :where([uc-wgt-common]) button.uc-secondary-btn:hover {
2567
+ background-color: var(--uc-secondary-hover);
2568
+ }
2569
+
2570
+ :where([uc-wgt-common].uc-contrast) button.uc-secondary-btn {
2571
+ border: 1px solid var(--uc-border);
2572
+ }
2573
+
2574
+ :where([uc-wgt-common]) button.uc-mini-btn {
2575
+ height: var(--uc-button-size);
2576
+ padding: 0;
2577
+ background-color: transparent;
2578
+ color: var(--uc-secondary-foreground);
2579
+ }
2580
+
2581
+ :where([uc-wgt-common]) button.uc-mini-btn:hover {
2582
+ background-color: var(--uc-secondary);
2583
+ }
2584
+
2585
+ :where([uc-wgt-common]) :is(button[disabled], button.uc-primary-btn[disabled], button.uc-secondary-btn[disabled]) {
2586
+ opacity: 0.5;
2587
+ pointer-events: none;
2588
+ }
2589
+
2590
+ :where([uc-wgt-common]) a {
2591
+ color: var(--uc-primary);
2592
+ text-decoration: none;
2593
+ }
2594
+
2595
+ /* TODO: if we're using disabled <a> somewhere, we should stop */
2596
+ :where([uc-wgt-common]) a[disabled] {
2597
+ pointer-events: none;
2598
+ }
2599
+
2600
+ :where([uc-wgt-common]) input[type="text"] {
2601
+ display: flex;
2602
+ width: 100%;
2603
+ height: var(--uc-button-size);
2604
+ padding-right: 10px;
2605
+ padding-left: 10px;
2606
+ color: var(--uc-foreground);
2607
+ font-size: 1em;
2608
+ font-family: inherit;
2609
+ background-color: var(--uc-background);
2610
+ border: 1px solid var(--uc-border);
2611
+ outline: 1px solid transparent;
2612
+ border-radius: var(--uc-radius);
2613
+ transition:
2614
+ border-color var(--uc-transition),
2615
+ outline-color var(--uc-transition);
2616
+ }
2617
+
2618
+ :where([uc-wgt-common]) input[type="text"]::placeholder {
2619
+ color: var(--uc-muted-foreground);
2620
+ }
2621
+
2622
+ :where([uc-wgt-common]) input[type="text"]:focus {
2623
+ outline-color: var(--uc-primary-hover);
2624
+ border-color: var(--uc-primary-hover);
2625
+ }
2626
+
2627
+ /* TODO: check if there's any necessity of disabled input */
2628
+ :where([uc-wgt-common]) input[disabled] {
2629
+ opacity: 0.6;
2630
+ pointer-events: none;
2631
+ }
2632
+ :where([uc-wgt-common]) uc-select[disabled],
2633
+ :where([uc-wgt-common]) select[disabled] {
2634
+ opacity: 0.6;
2635
+ pointer-events: none;
2636
+ }
2637
+ }
2638
+ @layer uc.rules {
2639
+ :where([uc-wgt-common]) [hidden] {
2640
+ display: none;
2641
+ }
2642
+
2643
+ :where([uc-wgt-common]) [activity]:not([active], .active) {
2644
+ display: none;
2645
+ }
2646
+
2647
+ :where([uc-wgt-common]) dialog:not([open]) [activity] {
2648
+ display: none;
2649
+ }
2650
+ }
2651
+ @layer uc.post-reset {
2652
+ :where([uc-wgt-common]) uc-source-btn[type] {
2653
+ all: unset;
2654
+ }
2655
+ }
2656
+ @layer uc.solutions {
2657
+ /* ICONS: */
2658
+ :where([uc-file-uploader-minimal]) {
2659
+ --cfg-init-activity: "start-from";
2660
+ --cfg-done-activity: "upload-list";
2661
+
2662
+ position: relative;
2663
+ display: block;
2664
+ }
2665
+
2666
+ [uc-file-uploader-minimal] > uc-start-from .uc-content {
2667
+ display: flex;
2668
+ flex-direction: column;
2669
+ gap: 4px;
2670
+ padding: 0;
2671
+ overflow: hidden;
2672
+ align-items: center;
2673
+ background-color: transparent;
2674
+ }
2675
+
2676
+ :where([uc-file-uploader-minimal] > uc-start-from uc-drop-area) {
2677
+ display: flex;
2678
+ position: relative;
2679
+ align-items: center;
2680
+ justify-content: center;
2681
+ width: 100%;
2682
+ min-height: calc(var(--uc-preview-size) + var(--uc-padding) * 2 + 8px);
2683
+ padding: 0;
2684
+ text-align: center;
2685
+ background-color: var(--uc-muted);
2686
+ border-radius: calc(var(--uc-radius) * 1.75);
2687
+ }
2688
+
2689
+ :where(.uc-contrast) :where([uc-file-uploader-minimal] > uc-start-from uc-drop-area) {
2690
+ background-color: transparent;
2691
+ }
2692
+
2693
+ /* hack to make transparent :hover colors work in any conditions */
2694
+ :where([uc-file-uploader-minimal] > uc-start-from uc-drop-area)::before {
2695
+ content: "";
2696
+ z-index: -1;
2697
+ width: 100%;
2698
+ height: 100%;
2699
+ position: absolute;
2700
+ background-color: var(--uc-background);
2701
+ }
2702
+
2703
+ :where([uc-file-uploader-minimal]:has([single]) > uc-start-from uc-drop-area) {
2704
+ aspect-ratio: var(--uc-grid-aspect-ratio);
2705
+ }
2706
+
2707
+ [uc-file-uploader-minimal] uc-upload-list uc-activity-header {
2708
+ display: none;
2709
+ }
2710
+
2711
+ [uc-file-uploader-minimal] uc-upload-list > .uc-toolbar {
2712
+ background-color: transparent;
2713
+ }
2714
+
2715
+ [uc-file-uploader-minimal] uc-upload-list {
2716
+ width: 100%;
2717
+ height: unset;
2718
+ padding: 4px;
2719
+ background-color: var(--uc-background);
2720
+ border: 1px dashed var(--uc-border);
2721
+ border-radius: calc(var(--uc-radius) * 1.75);
2722
+ }
2723
+
2724
+ [uc-file-uploader-minimal] uc-upload-list .uc-files {
2725
+ padding: 0;
2726
+ }
2727
+
2728
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar {
2729
+ display: block;
2730
+ padding: 0;
2731
+ }
2732
+
2733
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-cancel-btn,
2734
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-upload-btn,
2735
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-done-btn {
2736
+ display: none;
2737
+ }
2738
+
2739
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn {
2740
+ width: 100%;
2741
+ height: calc(var(--uc-preview-size) + var(--uc-padding) * 2);
2742
+ margin-top: 4px;
2743
+ }
2744
+
2745
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn[disabled] {
2746
+ display: none;
2747
+ }
2748
+
2749
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn > span {
2750
+ display: none;
2751
+ }
2752
+
2753
+ [uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn > uc-icon {
2754
+ display: flex;
2755
+ }
2756
+
2757
+ [uc-file-uploader-minimal][mode="list"] uc-file-item uc-progress-bar {
2758
+ top: 0;
2759
+ height: 100%;
2760
+ }
2761
+
2762
+ [uc-file-uploader-minimal][mode="list"] uc-file-item uc-progress-bar .uc-progress {
2763
+ background-color: var(--uc-primary-transparent);
2764
+ border-radius: var(--uc-radius);
2765
+ }
2766
+
2767
+ [uc-file-uploader-minimal][mode="list"] uc-file-item uc-progress-bar .uc-fake-progress {
2768
+ background-color: var(--uc-primary-transparent);
2769
+ border-radius: var(--uc-radius);
2770
+ }
2771
+
2772
+ [uc-file-uploader-minimal] uc-upload-list uc-drop-area {
2773
+ width: 100%;
2774
+ height: 100%;
2775
+ margin: 0;
2776
+ border-radius: calc(var(--uc-radius) * 1.75);
2777
+ }
2778
+
2779
+ [uc-file-uploader-minimal] uc-upload-list .uc-common-error {
2780
+ margin: 4px 0 0;
2781
+ }
2782
+
2783
+ [uc-file-uploader-minimal] uc-copyright .uc-credits {
2784
+ position: static;
2785
+ }
2786
+
2787
+ [uc-file-uploader-minimal][mode="grid"] uc-upload-list .uc-toolbar .uc-add-more-btn {
2788
+ display: none;
2789
+ }
2790
+
2791
+ [uc-file-uploader-minimal][mode="grid"] uc-upload-list .uc-files .uc-add-more-btn {
2792
+ display: flex;
2793
+ }
2794
+
2795
+ [uc-file-uploader-minimal][mode="grid"] uc-upload-list .uc-files .uc-add-more-btn > span {
2796
+ display: none;
2797
+ }
2798
+
2799
+ [uc-file-uploader-minimal][mode="grid"] uc-upload-list .uc-files .uc-add-more-btn > uc-icon {
2800
+ display: flex;
2801
+ }
2802
+ }
2803
+ @layer uc, uc.base, uc.components, uc.rules, uc.solutions, uc.post-reset;
2804
+ @layer uc.base {
2805
+ :where([uc-wgt-common]) {
2806
+ /* Font */
2807
+ --uc-font-family: system-ui;
2808
+ --uc-font-size: 14px;
2809
+ --uc-line-height: normal;
2810
+ --uc-simple-btn-font-family: system-ui;
2811
+ --uc-simple-btn-font-size: 14px;
2812
+
2813
+ /* Sizes */
2814
+ --uc-button-size: 32px;
2815
+ --uc-preview-size: 32px;
2816
+ --uc-padding: 10px;
2817
+ --uc-radius: 8px;
2818
+ --uc-transition: 0.2s ease;
2819
+ --uc-dialog-width: 430px;
2820
+ --uc-dialog-max-width: 920px;
2821
+ --uc-dialog-max-height: 675px;
2822
+ --uc-simple-btn-padding: 7px 14px;
2823
+
2824
+ --uc-grid-col: 3;
2825
+ --uc-grid-preview-image-height: auto;
2826
+ --uc-grid-gap: calc(var(--uc-padding) / 2);
2827
+ --uc-grid-aspect-ratio: 1 / 1;
2828
+
2829
+ /* Default colors, in case of media query failure */
2830
+ --uc-background: var(--uc-background-light);
2831
+ --uc-foreground: var(--uc-foreground-light);
2832
+ --uc-primary: var(--uc-primary-light);
2833
+ --uc-primary-hover: var(--uc-primary-hover-light);
2834
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
2835
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
2836
+ --uc-secondary: var(--uc-secondary-light);
2837
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
2838
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
2839
+ --uc-muted: var(--uc-muted-light);
2840
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
2841
+ --uc-destructive: var(--uc-destructive-light);
2842
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
2843
+ --uc-border: var(--uc-border-light);
2844
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
2845
+ --uc-simple-btn: var(--uc-simple-btn-light);
2846
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
2847
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
2848
+ }
2849
+
2850
+ @supports not (color: oklch(0% 0 0)) {
2851
+ :where([uc-wgt-common]) {
2852
+ /* Light colors RGB fallback */
2853
+ --uc-primary-rgb-light: 23 75 215;
2854
+ --uc-primary-light: rgb(var(--uc-primary-rgb-light));
2855
+ --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);
2856
+ --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);
2857
+ --uc-background-light: rgb(255 255 255);
2858
+ --uc-foreground-light: rgb(24 24 24);
2859
+ --uc-primary-foreground-light: #fff;
2860
+ --uc-secondary-light: rgb(24 24 24 / 5%);
2861
+ --uc-secondary-hover-light: rgb(24 24 24 / 8%);
2862
+ --uc-secondary-foreground-light: rgb(24 24 24);
2863
+ --uc-muted-light: rgb(245 245 245);
2864
+ --uc-muted-foreground-light: rgb(113 113 113);
2865
+ --uc-destructive-light: rgb(232 19 20 / 5%);
2866
+ --uc-destructive-foreground-light: rgb(232 19 20);
2867
+ --uc-border-light: rgb(228 228 232);
2868
+ --uc-dialog-shadow-light: 0px 6px 20px rgb(0 0 0 / 10%);
2869
+ --uc-simple-btn-light: rgb(235 235 235);
2870
+ --uc-simple-btn-hover-light: rgb(228 228 228);
2871
+ --uc-simple-btn-foreground-light: rgb(24 24 24);
2872
+
2873
+ /* Dark colors RGB fallback */
2874
+ --uc-primary-rgb-dark: 87 154 255;
2875
+ --uc-primary-dark: rgb(var(--uc-primary-rgb-dark));
2876
+ --uc-primary-hover-dark: rgb(var(--uc-primary-rgb-dark) / 90%);
2877
+ --uc-primary-transparent-dark: rgb(var(--uc-primary-rgb-dark) / 7%);
2878
+ --uc-background-dark: rgb(27 27 27);
2879
+ --uc-foreground-dark: rgb(225 225 225);
2880
+ --uc-primary-foreground-dark: rgb(0 0 0);
2881
+ --uc-secondary-dark: rgb(225 225 225 / 7%);
2882
+ --uc-secondary-hover-dark: rgb(225 225 225 / 10%);
2883
+ --uc-secondary-foreground-dark: rgb(225 225 225);
2884
+ --uc-muted-dark: rgb(36 36 36);
2885
+ --uc-muted-foreground-dark: rgb(152 152 152);
2886
+ --uc-destructive-dark: rgb(244 90 79 / 10%);
2887
+ --uc-destructive-foreground-dark: rgb(244 90 79);
2888
+ --uc-border-dark: rgb(61 61 61);
2889
+ --uc-dialog-shadow-dark: 0px 6px 20px rgb(0 0 0 / 25%);
2890
+ --uc-simple-btn-dark: rgb(36 36 36);
2891
+ --uc-simple-btn-hover-dark: rgb(43 43 43);
2892
+ --uc-simple-btn-foreground-dark: rgb(255 255 255);
2893
+ }
2894
+ }
2895
+
2896
+ @supports (color: oklch(0% 0 0)) {
2897
+ :where([uc-wgt-common]) {
2898
+ /* Light colors OKLCH */
2899
+ --uc-primary-oklch-light: 47% 0.22 264; /* Quick customization: change this value to your brand color */
2900
+ --uc-primary-light: oklch(var(--uc-primary-oklch-light));
2901
+ --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
2902
+ --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);
2903
+ --uc-background-light: oklch(100% 0 0);
2904
+ --uc-foreground-light: oklch(21% 0 0);
2905
+ --uc-primary-foreground-light: oklch(100% 0 0);
2906
+ --uc-secondary-light: oklch(21% 0 0 / 0.05);
2907
+ --uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
2908
+ --uc-secondary-foreground-light: oklch(21% 0 0);
2909
+ --uc-muted-light: oklch(97% 0 0);
2910
+ --uc-muted-foreground-light: oklch(40% 0 0);
2911
+ --uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
2912
+ --uc-destructive-foreground-light: oklch(59% 0.235 28.5);
2913
+ --uc-border-light: oklch(92% 0 0);
2914
+ --uc-dialog-shadow-light: 0px 6px 20px oklch(0% 0 0 / 0.1);
2915
+ --uc-simple-btn-light: oklch(94% 0 0);
2916
+ --uc-simple-btn-hover-light: oklch(92% 0 0);
2917
+ --uc-simple-btn-foreground-light: oklch(20% 0 0);
2918
+
2919
+ /* Dark colors OKLCH */
2920
+ --uc-primary-oklch-dark: 69% 0.1768 258.4; /* Quick customization: change this value to your brand color */
2921
+ --uc-primary-dark: oklch(var(--uc-primary-oklch-dark));
2922
+ --uc-primary-hover-dark: oklch(var(--uc-primary-oklch-dark) / 90%);
2923
+ --uc-primary-transparent-dark: oklch(var(--uc-primary-oklch-dark) / 7%);
2924
+ --uc-background-dark: oklch(22% 0 0);
2925
+ --uc-foreground-dark: oklch(91% 0 0);
2926
+ --uc-primary-foreground-dark: oklch(0% 0 0);
2927
+ --uc-secondary-dark: oklch(91% 0 0 / 0.07);
2928
+ --uc-secondary-hover-dark: oklch(91% 0 0 / 0.1);
2929
+ --uc-secondary-foreground-dark: oklch(91% 0 0);
2930
+ --uc-muted-dark: oklch(26% 0 0);
2931
+ --uc-muted-foreground-dark: oklch(68% 0 0);
2932
+ --uc-destructive-dark: oklch(67% 0.191 27.5 / 0.1);
2933
+ --uc-destructive-foreground-dark: oklch(67% 0.191 27.5);
2934
+ --uc-border-dark: oklch(36% 0 0);
2935
+ --uc-dialog-shadow-dark: 0px 6px 20px oklch(0% 0 0 / 0.25);
2936
+ --uc-simple-btn-dark: oklch(26% 0 0);
2937
+ --uc-simple-btn-hover-dark: oklch(29% 0 0);
2938
+ --uc-simple-btn-foreground-dark: oklch(100% 0 0);
2939
+ }
2940
+ }
2941
+
2942
+ @media only screen and (max-height: 600px) {
2943
+ :where([uc-wgt-common]) {
2944
+ --uc-dialog-max-height: 100%;
2945
+ }
2946
+ }
2947
+
2948
+ @media only screen and (max-width: 680px) {
2949
+ :where([uc-wgt-common]) {
2950
+ --uc-grid-col: 2;
2951
+ }
2952
+ }
2953
+
2954
+ @media only screen and (max-width: 430px) {
2955
+ :where([uc-wgt-common]) {
2956
+ --uc-dialog-max-width: 100vw;
2957
+ --uc-dialog-max-height: var(--uploadcare-blocks-window-height);
2958
+ --uc-grid-col: 1;
2959
+ }
2960
+ }
2961
+
2962
+ @media (prefers-color-scheme: light) {
2963
+ :where([uc-wgt-common]) {
2964
+ --uc-background: var(--uc-background-light);
2965
+ --uc-foreground: var(--uc-foreground-light);
2966
+ --uc-primary: var(--uc-primary-light);
2967
+ --uc-primary-hover: var(--uc-primary-hover-light);
2968
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
2969
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
2970
+ --uc-secondary: var(--uc-secondary-light);
2971
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
2972
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
2973
+ --uc-muted: var(--uc-muted-light);
2974
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
2975
+ --uc-destructive: var(--uc-destructive-light);
2976
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
2977
+ --uc-border: var(--uc-border-light);
2978
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
2979
+ --uc-simple-btn: var(--uc-simple-btn-light);
2980
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
2981
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
2982
+ }
2983
+ }
2984
+
2985
+ @media (prefers-color-scheme: dark) {
2986
+ :where([uc-wgt-common]) {
2987
+ --uc-background: var(--uc-background-dark);
2988
+ --uc-foreground: var(--uc-foreground-dark);
2989
+ --uc-primary: var(--uc-primary-dark);
2990
+ --uc-primary-hover: var(--uc-primary-hover-dark);
2991
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
2992
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
2993
+ --uc-secondary: var(--uc-secondary-dark);
2994
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
2995
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
2996
+ --uc-muted: var(--uc-muted-dark);
2997
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
2998
+ --uc-destructive: var(--uc-destructive-dark);
2999
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
3000
+ --uc-border: var(--uc-border-dark);
3001
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
3002
+ --uc-simple-btn: var(--uc-simple-btn-dark);
3003
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
3004
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
3005
+ }
3006
+ }
3007
+
3008
+ :where(.uc-light) {
3009
+ --uc-background: var(--uc-background-light);
3010
+ --uc-foreground: var(--uc-foreground-light);
3011
+ --uc-primary: var(--uc-primary-light);
3012
+ --uc-primary-hover: var(--uc-primary-hover-light);
3013
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
3014
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
3015
+ --uc-secondary: var(--uc-secondary-light);
3016
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
3017
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
3018
+ --uc-muted: var(--uc-muted-light);
3019
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
3020
+ --uc-destructive: var(--uc-destructive-light);
3021
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
3022
+ --uc-border: var(--uc-border-light);
3023
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
3024
+ --uc-simple-btn: var(--uc-simple-btn-light);
3025
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
3026
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
3027
+ }
3028
+
3029
+ :where(.uc-dark) {
3030
+ --uc-background: var(--uc-background-dark);
3031
+ --uc-foreground: var(--uc-foreground-dark);
3032
+ --uc-primary: var(--uc-primary-dark);
3033
+ --uc-primary-hover: var(--uc-primary-hover-dark);
3034
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
3035
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
3036
+ --uc-secondary: var(--uc-secondary-dark);
3037
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
3038
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
3039
+ --uc-muted: var(--uc-muted-dark);
3040
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
3041
+ --uc-destructive: var(--uc-destructive-dark);
3042
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
3043
+ --uc-border: var(--uc-border-dark);
3044
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
3045
+ --uc-simple-btn: var(--uc-simple-btn-dark);
3046
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
3047
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
3048
+ }
3049
+
3050
+ :where(.uc-purple) {
3051
+ --uc-primary-oklch-light: 47% 0.22 300;
3052
+ --uc-primary-oklch-dark: 69% 0.1768 300;
3053
+ }
3054
+
3055
+ :where(.uc-red) {
3056
+ --uc-primary-oklch-light: 47% 0.21 21;
3057
+ --uc-primary-oklch-dark: 71% 0.1768 21;
3058
+ }
3059
+
3060
+ :where(.uc-orange) {
3061
+ --uc-primary-oklch-light: 47% 0.1376 51.88;
3062
+ --uc-primary-oklch-dark: 69% 0.1768 51.88;
3063
+ }
3064
+
3065
+ :where(.uc-green) {
3066
+ --uc-primary-oklch-light: 45% 0.14 130;
3067
+ --uc-primary-oklch-dark: 69% 0.1768 130;
3068
+ }
3069
+
3070
+ :where(.uc-turquoise) {
3071
+ --uc-primary-oklch-light: 45% 0.0854 174;
3072
+ --uc-primary-oklch-dark: 69% 0.1768 174;
3073
+ }
3074
+
3075
+ :where(.uc-gray) {
3076
+ --uc-primary-oklch-light: 10% 0 0;
3077
+ --uc-primary-oklch-dark: 97% 0 0;
3078
+ }
3079
+
3080
+ :where(.uc-contrast) {
3081
+ --uc-border-light: oklch(50% 0 0);
3082
+ --uc-border-dark: oklch(50% 0 0);
3083
+
3084
+ --uc-muted-light: oklch(98% 0 0);
3085
+ --uc-muted-dark: oklch(16% 0 0);
3086
+
3087
+ --uc-muted-foreground-light: oklch(20% 0 0);
3088
+ --uc-muted-foreground-dark: oklch(80% 0 0);
3089
+
3090
+ --uc-background-light: oklch(100% 0 0);
3091
+ --uc-foreground-light: oklch(0% 0 0);
3092
+
3093
+ --uc-background-dark: oklch(10% 0 0);
3094
+ --uc-foreground-dark: oklch(100% 0 0);
3095
+ }
3096
+ }
3097
+ /** biome-ignore-all lint/complexity/noImportantStyles: TODO: Refactor styles to get rid of !important rules */
3098
+ @layer uc.solutions {
3099
+ /* TODO: we should use basic theme there */
3100
+
3101
+ [uc-cloud-image-editor] {
3102
+ --color-primary-accent: var(--uc-primary);
3103
+ --color-text-base: var(--uc-foreground);
3104
+ --color-text-accent-contrast: var(--uc-background);
3105
+ --color-fill-contrast: var(--uc-background);
3106
+ --color-modal-backdrop: oklch(0% 0 0 / 0.1);
3107
+ --color-image-background: var(--uc-muted);
3108
+ --color-focus-ring: var(--color-primary-accent);
3109
+ --color-crop-guides: var(--uc-foreground);
3110
+
3111
+ --font-size-ui: var(--uc-font-size);
3112
+
3113
+ --size-touch-area: var(--uc-button-size);
3114
+ --size-panel-heading: calc(var(--uc-button-size) + var(--uc-padding) * 2);
3115
+ --size-ui-min-width: 130px;
3116
+ --size-line-width: 1px;
3117
+ --size-modal-width: 650px;
3118
+ --size-icon: calc(var(--uc-button-size) / 2);
3119
+
3120
+ /* TODO: remove icon size overrides */
3121
+
3122
+ --border-radius-editor: var(--uc-radius);
3123
+ --border-radius-thumb: var(--uc-radius);
3124
+ --border-radius-ui: var(--uc-radius);
3125
+ --border-radius-base: var(--uc-radius);
3126
+
3127
+ --cldtr-gap-min: 5px;
3128
+ --cldtr-gap-mid-1: 10px;
3129
+ --cldtr-gap-mid-2: 15px;
3130
+ --cldtr-gap-max: 20px;
3131
+
3132
+ --transition-duration-2: var(--transition-duration-all, 0.2s);
3133
+ --transition-duration-3: var(--transition-duration-all, 0.3s);
3134
+ --transition-duration-4: var(--transition-duration-all, 0.4s);
3135
+ --transition-duration-5: var(--transition-duration-all, 0.5s);
3136
+
3137
+ --modal-header-opacity: 1;
3138
+ --modal-header-height: var(--size-panel-heading);
3139
+ --modal-toolbar-height: var(--size-panel-heading);
3140
+
3141
+ --transparent-pixel: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");
3142
+
3143
+ display: block;
3144
+ width: 100%;
3145
+ height: 100%;
3146
+ max-height: 100%;
3147
+ }
3148
+
3149
+ [uc-cloud-image-editor] :is([can-handle-paste]:hover, [can-handle-paste]:focus) {
3150
+ --can-handle-paste: "true";
3151
+ }
3152
+
3153
+ [uc-cloud-image-editor]
3154
+ :is([tabindex]:focus-visible, [tabindex]:hover, [with-effects]:focus-visible, [with-effects]:hover) {
3155
+ --filter-effect: var(--hover-filter) !important;
3156
+ --opacity-effect: var(--hover-opacity) !important;
3157
+ --color-effect: var(--hover-color-rgb) !important;
3158
+ --background-effect: var(--hover-background) !important;
3159
+ }
3160
+
3161
+ [uc-cloud-image-editor] :is([tabindex]:active, [with-effects]:active) {
3162
+ --filter-effect: var(--down-filter) !important;
3163
+ --opacity-effect: var(--down-opacity) !important;
3164
+ --color-effect: var(--down-color-rgb) !important;
3165
+ --background-effect: var(--down-background) !important;
3166
+ }
3167
+
3168
+ [uc-cloud-image-editor] :is([tabindex][active], [with-effects][active]) {
3169
+ --filter-effect: var(--active-filter) !important;
3170
+ --opacity-effect: var(--active-opacity) !important;
3171
+ --color-effect: var(--active-color-rgb) !important;
3172
+ --background-effect: var(--active-background) !important;
3173
+ }
3174
+
3175
+ [uc-cloud-image-editor] [hidden-scrollbar]::-webkit-scrollbar {
3176
+ display: none;
3177
+ }
3178
+
3179
+ [uc-cloud-image-editor] [hidden-scrollbar] {
3180
+ -ms-overflow-style: none;
3181
+ scrollbar-width: none;
3182
+ }
3183
+
3184
+ [uc-cloud-image-editor].uc-editor_ON {
3185
+ --modal-header-opacity: 0;
3186
+ --modal-header-height: 0px;
3187
+ --modal-toolbar-height: calc(var(--size-panel-heading) * 2);
3188
+ }
3189
+
3190
+ [uc-cloud-image-editor].uc-editor_OFF {
3191
+ --modal-header-opacity: 1;
3192
+ --modal-header-height: var(--size-panel-heading);
3193
+ --modal-toolbar-height: var(--size-panel-heading);
3194
+ }
3195
+
3196
+ [uc-cloud-image-editor] > .uc-wrapper {
3197
+ --l-min-img-height: var(--modal-toolbar-height);
3198
+ --l-max-img-height: 100%;
3199
+ --l-edit-button-width: 120px;
3200
+ --l-toolbar-horizontal-padding: var(--cldtr-gap-mid-1);
3201
+
3202
+ position: relative;
3203
+ display: grid;
3204
+ grid-template-rows: minmax(var(--l-min-img-height), var(--l-max-img-height)) minmax(
3205
+ var(--modal-toolbar-height),
3206
+ auto
3207
+ );
3208
+ height: 100%;
3209
+ overflow: hidden;
3210
+ overflow-y: auto;
3211
+ }
3212
+
3213
+ @media only screen and (max-width: 800px) {
3214
+ [uc-cloud-image-editor] > .uc-wrapper {
3215
+ --l-edit-button-width: 70px;
3216
+ --l-toolbar-horizontal-padding: var(--cldtr-gap-min);
3217
+ }
3218
+ }
3219
+
3220
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport {
3221
+ display: flex;
3222
+ align-items: center;
3223
+ justify-content: center;
3224
+ overflow: hidden;
3225
+ }
3226
+
3227
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image {
3228
+ --viewer-image-opacity: 1;
3229
+
3230
+ position: absolute;
3231
+ top: 0px;
3232
+ left: 0px;
3233
+ z-index: 10;
3234
+ display: block;
3235
+ box-sizing: border-box;
3236
+ width: 100%;
3237
+ height: 100%;
3238
+ object-fit: scale-down;
3239
+ background-color: var(--color-image-background);
3240
+ transform: scale(1);
3241
+ opacity: var(--viewer-image-opacity);
3242
+ user-select: none;
3243
+ pointer-events: auto;
3244
+ }
3245
+
3246
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_visible_viewer {
3247
+ transition:
3248
+ opacity var(--transition-duration-3) ease-in-out,
3249
+ transform var(--transition-duration-4);
3250
+ }
3251
+
3252
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_hidden_to_cropper {
3253
+ --viewer-image-opacity: 0;
3254
+
3255
+ background-image: var(--transparent-pixel);
3256
+ transform: scale(1);
3257
+ transition:
3258
+ transform var(--transition-duration-4),
3259
+ opacity var(--transition-duration-3) steps(1, jump-end);
3260
+ pointer-events: none;
3261
+ }
3262
+
3263
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container > .uc-image.uc-image_hidden_effects {
3264
+ --viewer-image-opacity: 0;
3265
+
3266
+ transform: scale(1);
3267
+ transition:
3268
+ opacity var(--transition-duration-3) cubic-bezier(0.5, 0, 1, 1),
3269
+ transform var(--transition-duration-4);
3270
+ pointer-events: none;
3271
+ }
3272
+
3273
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-image_container {
3274
+ position: relative;
3275
+ display: block;
3276
+ width: 100%;
3277
+ height: 100%;
3278
+ background-color: var(--color-image-background);
3279
+ transition: var(--transition-duration-3);
3280
+ }
3281
+
3282
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-toolbar {
3283
+ position: relative;
3284
+ transition: 0.3s;
3285
+ }
3286
+
3287
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content {
3288
+ position: absolute;
3289
+ bottom: 0px;
3290
+ left: 0px;
3291
+ box-sizing: border-box;
3292
+ width: 100%;
3293
+ height: var(--modal-toolbar-height);
3294
+ min-height: var(--size-panel-heading);
3295
+ background-color: var(--color-fill-contrast);
3296
+ }
3297
+
3298
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content.uc-toolbar_content__viewer {
3299
+ display: flex;
3300
+ align-items: center;
3301
+ justify-content: space-between;
3302
+ height: var(--size-panel-heading);
3303
+ padding-right: var(--l-toolbar-horizontal-padding);
3304
+ padding-left: var(--l-toolbar-horizontal-padding);
3305
+ }
3306
+
3307
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-toolbar > .uc-toolbar_content.uc-toolbar_content__editor {
3308
+ display: flex;
3309
+ }
3310
+
3311
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-info_pan {
3312
+ position: absolute;
3313
+ user-select: none;
3314
+ }
3315
+
3316
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-file_type_outer {
3317
+ position: absolute;
3318
+ z-index: 2;
3319
+ display: flex;
3320
+ max-width: 120px;
3321
+ transform: translateX(-40px);
3322
+ user-select: none;
3323
+ }
3324
+
3325
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-viewport > .uc-file_type_outer > .uc-file_type {
3326
+ padding: 4px 0.8em;
3327
+ }
3328
+
3329
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash {
3330
+ position: absolute;
3331
+ z-index: 999;
3332
+ display: flex;
3333
+ flex-direction: column;
3334
+ width: 100%;
3335
+ height: 100%;
3336
+ background-color: var(--color-fill-contrast);
3337
+ }
3338
+
3339
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_content {
3340
+ display: flex;
3341
+ flex: 1;
3342
+ flex-direction: column;
3343
+ align-items: center;
3344
+ justify-content: center;
3345
+ }
3346
+
3347
+ [uc-cloud-image-editor]
3348
+ > .uc-wrapper
3349
+ > .uc-network_problems_splash
3350
+ > .uc-network_problems_content
3351
+ > .uc-network_problems_icon {
3352
+ display: flex;
3353
+ align-items: center;
3354
+ justify-content: center;
3355
+ width: 40px;
3356
+ height: 40px;
3357
+ color: var(--uc-foreground);
3358
+ background-color: var(--uc-muted);
3359
+ border-radius: 50%;
3360
+ }
3361
+
3362
+ [uc-cloud-image-editor]
3363
+ > .uc-wrapper
3364
+ > .uc-network_problems_splash
3365
+ > .uc-network_problems_content
3366
+ > .uc-network_problems_text {
3367
+ margin-top: var(--cldtr-gap-max);
3368
+ font-size: var(--font-size-ui);
3369
+ color: var(--uc-foreground);
3370
+ }
3371
+
3372
+ [uc-cloud-image-editor] > .uc-wrapper > .uc-network_problems_splash > .uc-network_problems_footer {
3373
+ display: flex;
3374
+ align-items: center;
3375
+ justify-content: center;
3376
+ height: var(--size-panel-heading);
3377
+ }
3378
+
3379
+ uc-crop-frame > .uc-svg {
3380
+ position: absolute;
3381
+ top: 0px;
3382
+ left: 0px;
3383
+ z-index: 2;
3384
+ width: 100%;
3385
+ height: 100%;
3386
+ border-top-left-radius: var(--border-radius-base);
3387
+ border-top-right-radius: var(--border-radius-base);
3388
+ opacity: inherit;
3389
+ transition: var(--transition-duration-3);
3390
+ }
3391
+
3392
+ uc-crop-frame > .uc-thumb {
3393
+ --idle-color-rgb: var(--color-text-base);
3394
+ --hover-color-rgb: var(--color-primary-accent);
3395
+ --focus-color-rgb: var(--color-primary-accent);
3396
+ --down-color-rgb: var(--color-primary-accent);
3397
+ --color-effect: var(--idle-color-rgb);
3398
+
3399
+ color: var(--color-effect);
3400
+ transition:
3401
+ color var(--transition-duration-3),
3402
+ opacity var(--transition-duration-3);
3403
+ }
3404
+
3405
+ uc-crop-frame .uc-thumb--visible {
3406
+ opacity: 1;
3407
+ pointer-events: auto;
3408
+ }
3409
+
3410
+ uc-crop-frame .uc-thumb--hidden {
3411
+ opacity: 0;
3412
+ pointer-events: none;
3413
+ }
3414
+
3415
+ uc-crop-frame .uc-guides {
3416
+ transition: var(--transition-duration-3);
3417
+ }
3418
+
3419
+ uc-crop-frame .uc-guides--hidden {
3420
+ opacity: 0;
3421
+ }
3422
+
3423
+ uc-crop-frame .uc-guides--semi-hidden {
3424
+ opacity: 0.2;
3425
+ }
3426
+
3427
+ uc-crop-frame .uc-guides--visible {
3428
+ opacity: 1;
3429
+ }
3430
+
3431
+ uc-editor-button-control,
3432
+ uc-editor-crop-button-control,
3433
+ uc-editor-aspect-ratio-button-control,
3434
+ uc-editor-freeform-button-control,
3435
+ uc-editor-filter-control,
3436
+ uc-editor-operation-control {
3437
+ --l-base-min-width: var(--uc-button-size);
3438
+ --l-base-height: var(--uc-button-size);
3439
+ --opacity-effect: var(--idle-opacity);
3440
+ --color-effect: var(--idle-color-rgb);
3441
+ --background-effect: var(--idle-background);
3442
+ --filter-effect: var(--idle-filter);
3443
+
3444
+ --idle-color-rgb: var(--uc-secondary-foreground);
3445
+ --idle-opacity: 1;
3446
+ --idle-filter: 1;
3447
+ --idle-background: var(--uc-secondary);
3448
+ --hover-color-rgb: var(--uc-secondary-foreground);
3449
+ --hover-opacity: 1;
3450
+ --hover-filter: 0.8;
3451
+ --hover-background: var(--uc-secondary-hover);
3452
+ --down-color-rgb: var(--hover-color-rgb);
3453
+ --down-opacity: 1;
3454
+ --down-filter: 0.6;
3455
+ --down-background: var(--uc-secondary);
3456
+
3457
+ border-radius: var(--uc-radius);
3458
+ }
3459
+
3460
+ uc-editor-button-control > button,
3461
+ uc-editor-crop-button-control > button,
3462
+ uc-editor-aspect-ratio-button-control > button,
3463
+ uc-editor-freeform-button-control > button,
3464
+ uc-editor-filter-control > button,
3465
+ uc-editor-operation-control > button {
3466
+ all: unset;
3467
+ position: relative;
3468
+ display: grid;
3469
+ grid-template-columns: var(--l-base-min-width) auto;
3470
+ grid-template-rows: 100%;
3471
+ align-items: center;
3472
+ height: var(--l-base-height);
3473
+ color: var(--color-effect);
3474
+ opacity: var(--opacity-effect);
3475
+ cursor: pointer;
3476
+ transition: var(--l-width-transition);
3477
+ }
3478
+
3479
+ uc-editor-freeform-button-control > button {
3480
+ grid-template-columns: auto var(--l-base-min-width);
3481
+ }
3482
+
3483
+ uc-editor-freeform-button-control > button > uc-icon {
3484
+ margin-left: var(--cldtr-gap-mid-1);
3485
+ width: 10px;
3486
+ }
3487
+
3488
+ :where(
3489
+ uc-editor-button-control,
3490
+ uc-editor-crop-button-control,
3491
+ uc-editor-aspect-ratio-button-control,
3492
+ uc-editor-freeform-button-control,
3493
+ uc-editor-filter-control,
3494
+ uc-editor-operation-control
3495
+ )
3496
+ > uc-icon
3497
+ > svg {
3498
+ width: var(--size-icon);
3499
+ height: var(--size-icon);
3500
+ }
3501
+
3502
+ uc-editor-filter-control > uc-icon.uc-original-icon > svg {
3503
+ width: 100%;
3504
+ height: 100%;
3505
+ }
3506
+
3507
+ uc-editor-button-control.uc-active,
3508
+ uc-editor-operation-control.uc-active,
3509
+ uc-editor-crop-button-control.uc-active,
3510
+ uc-editor-aspect-ratio-button-control.uc-active,
3511
+ uc-editor-freeform-button-control.uc-active,
3512
+ uc-editor-filter-control.uc-active {
3513
+ --idle-color-rgb: var(--uc-primary-foreground);
3514
+ --idle-background: var(--uc-primary);
3515
+ --idle-opacity: 1;
3516
+ --hover-color-rgb: var(--uc-primary-foreground);
3517
+ --hover-background: var(--uc-primary);
3518
+ --hover-opacity: 1;
3519
+ }
3520
+
3521
+ uc-editor-button-control.uc-not_active,
3522
+ uc-editor-operation-control.uc-not_active,
3523
+ uc-editor-crop-button-control.uc-not_active,
3524
+ uc-editor-aspect-ratio-button-control.uc-not_active,
3525
+ uc-editor-freeform-button-control.uc-not_active,
3526
+ uc-editor-filter-control.uc-not_active {
3527
+ --idle-color-rgb: var(--uc-secondary-foreground);
3528
+ }
3529
+
3530
+ :where(.uc-contrast) uc-editor-button-control.uc-not_active,
3531
+ :where(.uc-contrast) uc-editor-operation-control.uc-not_active,
3532
+ :where(.uc-contrast) uc-editor-crop-button-control.uc-not_active,
3533
+ :where(.uc-contrast) uc-editor-freeform-button-control.uc-not_active,
3534
+ :where(.uc-contrast) uc-editor-aspect-ratio-button-control.uc-not_active,
3535
+ :where(.uc-contrast) uc-editor-filter-control.uc-not_active {
3536
+ --idle-background: transparent;
3537
+ --hover-background: var(--uc-secondary);
3538
+
3539
+ outline: 1px solid var(--uc-border);
3540
+ outline-offset: -1px;
3541
+ }
3542
+
3543
+ uc-editor-button-control > button::before,
3544
+ uc-editor-operation-control > button::before,
3545
+ uc-editor-crop-button-control > button::before,
3546
+ uc-editor-freeform-button-control > button::before,
3547
+ uc-editor-aspect-ratio-button-control > button::before,
3548
+ uc-editor-filter-control > button::before {
3549
+ position: absolute;
3550
+ content: "";
3551
+ right: 0;
3552
+ left: 0;
3553
+ z-index: -1;
3554
+ width: 100%;
3555
+ height: 100%;
3556
+ background-color: var(--background-effect);
3557
+ border-radius: var(--border-radius-editor);
3558
+ transition: var(--transition-duration-3);
3559
+ }
3560
+
3561
+ uc-editor-button-control > button .uc-title,
3562
+ uc-editor-operation-control > button .uc-title,
3563
+ uc-editor-crop-button-control > button .uc-title,
3564
+ uc-editor-aspect-ratio-button-control > button .uc-title,
3565
+ uc-editor-freeform-button-control > button .uc-title,
3566
+ uc-editor-filter-control > button .uc-title {
3567
+ padding-right: var(--cldtr-gap-mid-1);
3568
+ font-size: 0.7em;
3569
+ letter-spacing: 1.004px;
3570
+ text-transform: uppercase;
3571
+ }
3572
+
3573
+ uc-editor-freeform-button-control > button .uc-title {
3574
+ padding-left: var(--cldtr-gap-mid-1);
3575
+ padding-right: 0;
3576
+ }
3577
+
3578
+ uc-editor-button-control > button uc-icon,
3579
+ uc-editor-operation-control > button uc-icon,
3580
+ uc-editor-crop-button-control > button uc-icon,
3581
+ uc-editor-aspect-ratio-button-control > button uc-icon,
3582
+ uc-editor-freeform-button-control > button uc-icon,
3583
+ uc-editor-filter-control > button uc-icon {
3584
+ pointer-events: none;
3585
+ }
3586
+
3587
+ uc-editor-filter-control > button .uc-preview {
3588
+ position: absolute;
3589
+ right: 0;
3590
+ left: 0;
3591
+ z-index: -1;
3592
+ width: 100%;
3593
+ height: var(--l-base-height);
3594
+ background-repeat: no-repeat;
3595
+ background-size: contain;
3596
+ border-radius: var(--border-radius-editor);
3597
+ opacity: 0;
3598
+ filter: brightness(var(--filter-effect));
3599
+ transition: var(--transition-duration-3);
3600
+ }
3601
+
3602
+ uc-editor-filter-control.uc-not_active .uc-preview[data-loaded] {
3603
+ opacity: 1;
3604
+ }
3605
+
3606
+ uc-editor-filter-control.uc-active .uc-preview {
3607
+ opacity: 0;
3608
+ }
3609
+
3610
+ uc-editor-filter-control > .uc-original-icon {
3611
+ color: var(--color-effect);
3612
+ opacity: 0.3;
3613
+ }
3614
+
3615
+ uc-editor-image-cropper {
3616
+ position: absolute;
3617
+ top: 0px;
3618
+ left: 0px;
3619
+ z-index: 10;
3620
+ display: block;
3621
+ width: 100%;
3622
+ height: 100%;
3623
+ opacity: 0;
3624
+ pointer-events: none;
3625
+ touch-action: none;
3626
+ color: var(--color-crop-guides);
3627
+ }
3628
+
3629
+ uc-editor-image-cropper.uc-active_from_editor {
3630
+ transform: scale(1) translate(0px, 0px);
3631
+ opacity: 1;
3632
+ transition:
3633
+ transform var(--transition-duration-4) cubic-bezier(0.37, 0, 0.63, 1) 0.4s,
3634
+ opacity var(--transition-duration-3);
3635
+ pointer-events: auto;
3636
+ }
3637
+
3638
+ uc-editor-image-cropper.uc-active_from_viewer {
3639
+ transform: scale(1) translate(0px, 0px);
3640
+ opacity: 1;
3641
+ transition:
3642
+ transform var(--transition-duration-4) cubic-bezier(0.37, 0, 0.63, 1) 0.4s,
3643
+ opacity var(--transition-duration-3);
3644
+ pointer-events: auto;
3645
+ }
3646
+
3647
+ uc-editor-image-cropper.uc-inactive_to_editor {
3648
+ opacity: 0;
3649
+ transition:
3650
+ transform var(--transition-duration-4) cubic-bezier(0.37, 0, 0.63, 1),
3651
+ opacity var(--transition-duration-3) calc(var(--transition-duration-3) + 0.05s);
3652
+ pointer-events: none;
3653
+ }
3654
+
3655
+ uc-editor-image-cropper > .uc-canvas {
3656
+ position: absolute;
3657
+ top: 0px;
3658
+ left: 0px;
3659
+ z-index: 1;
3660
+ display: block;
3661
+ width: 100%;
3662
+ height: 100%;
3663
+ }
3664
+
3665
+ uc-editor-image-fader {
3666
+ position: absolute;
3667
+ top: 0px;
3668
+ left: 0px;
3669
+ display: block;
3670
+ width: 100%;
3671
+ height: 100%;
3672
+ }
3673
+
3674
+ uc-editor-image-fader.uc-active_from_viewer {
3675
+ z-index: 3;
3676
+ transform: scale(1);
3677
+ opacity: 1;
3678
+ transition:
3679
+ transform var(--transition-duration-4),
3680
+ opacity var(--transition-duration-3) steps(1, jump-start);
3681
+ pointer-events: auto;
3682
+ }
3683
+
3684
+ uc-editor-image-fader.uc-active_from_cropper {
3685
+ z-index: 3;
3686
+ transform: scale(1);
3687
+ opacity: 1;
3688
+ transition:
3689
+ transform var(--transition-duration-4),
3690
+ opacity var(--transition-duration-3) steps(1, jump-end);
3691
+ pointer-events: auto;
3692
+ }
3693
+
3694
+ uc-editor-image-fader.uc-inactive_to_cropper {
3695
+ z-index: 3;
3696
+ transform: scale(1);
3697
+ opacity: 0;
3698
+ transition:
3699
+ transform var(--transition-duration-4),
3700
+ opacity var(--transition-duration-3) steps(1, jump-end);
3701
+ pointer-events: none;
3702
+ }
3703
+
3704
+ uc-editor-image-fader .uc-fader-image {
3705
+ position: absolute;
3706
+ top: 0px;
3707
+ left: 0px;
3708
+ display: block;
3709
+ width: 100%;
3710
+ height: 100%;
3711
+ object-fit: scale-down;
3712
+ transform: scale(1);
3713
+ user-select: none;
3714
+ content-visibility: auto;
3715
+ }
3716
+
3717
+ uc-editor-image-fader .uc-fader-image--preview {
3718
+ background-color: var(--color-image-background);
3719
+ border-top-left-radius: var(--border-radius-base);
3720
+ border-top-right-radius: var(--border-radius-base);
3721
+ transform: scale(1);
3722
+ opacity: 0;
3723
+ transition: var(--transition-duration-3);
3724
+ }
3725
+
3726
+ uc-editor-scroller {
3727
+ display: flex;
3728
+ align-items: center;
3729
+ width: 100%;
3730
+ height: 100%;
3731
+ overflow-x: scroll;
3732
+ }
3733
+
3734
+ uc-editor-slider {
3735
+ display: flex;
3736
+ align-items: center;
3737
+ justify-content: center;
3738
+ width: 100%;
3739
+ height: var(--size-panel-heading);
3740
+ }
3741
+
3742
+ uc-editor-toolbar {
3743
+ position: relative;
3744
+ width: 100%;
3745
+ height: 100%;
3746
+ }
3747
+
3748
+ @media only screen and (max-width: 600px) {
3749
+ uc-editor-toolbar {
3750
+ --l-tab-gap: var(--cldtr-gap-mid-1);
3751
+ --l-slider-padding: var(--uc-padding);
3752
+ --l-controls-padding: var(--uc-padding);
3753
+ }
3754
+ }
3755
+
3756
+ @media only screen and (min-width: 601px) {
3757
+ uc-editor-toolbar {
3758
+ --l-tab-gap: var(--cldtr-gap-max);
3759
+ --l-slider-padding: var(--uc-padding);
3760
+ --l-controls-padding: var(--uc-padding);
3761
+ }
3762
+ }
3763
+
3764
+ uc-editor-toolbar > .uc-toolbar-container {
3765
+ position: relative;
3766
+ width: 100%;
3767
+ height: 100%;
3768
+ overflow: hidden;
3769
+ }
3770
+
3771
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar {
3772
+ position: absolute;
3773
+ display: grid;
3774
+ grid-template-rows: 1fr 1fr;
3775
+ width: 100%;
3776
+ height: 100%;
3777
+ background-color: var(--color-fill-contrast);
3778
+ transition:
3779
+ opacity var(--transition-duration-3) ease-in-out,
3780
+ transform var(--transition-duration-3) ease-in-out,
3781
+ visibility var(--transition-duration-3) ease-in-out;
3782
+ }
3783
+
3784
+ .uc-sub-toolbar > .uc-list-aspect-ratio-container > .uc-list-aspect-ratio {
3785
+ display: grid;
3786
+ grid-auto-flow: column;
3787
+ justify-content: center;
3788
+ align-items: center;
3789
+ gap: 6px;
3790
+ height: var(--size-panel-heading);
3791
+ }
3792
+
3793
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--visible {
3794
+ transform: translateY(0px);
3795
+ opacity: 1;
3796
+ pointer-events: auto;
3797
+ }
3798
+
3799
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--top-hidden {
3800
+ transform: translateY(100%);
3801
+ opacity: 0;
3802
+ pointer-events: none;
3803
+ }
3804
+
3805
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar.uc-sub-toolbar--bottom-hidden {
3806
+ transform: translateY(-100%);
3807
+ opacity: 0;
3808
+ pointer-events: none;
3809
+ }
3810
+
3811
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row {
3812
+ display: flex;
3813
+ align-items: center;
3814
+ justify-content: space-between;
3815
+ padding-right: var(--l-controls-padding);
3816
+ padding-left: var(--l-controls-padding);
3817
+ }
3818
+
3819
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-controls-row > .uc-tab-toggles {
3820
+ position: relative;
3821
+ display: grid;
3822
+ grid-auto-flow: column;
3823
+ gap: 0px var(--l-tab-gap);
3824
+ align-items: center;
3825
+ height: 100%;
3826
+ }
3827
+
3828
+ uc-editor-toolbar
3829
+ > .uc-toolbar-container
3830
+ > .uc-sub-toolbar
3831
+ > .uc-controls-row
3832
+ > .uc-tab-toggles
3833
+ > .uc-tab-toggles_indicator {
3834
+ position: absolute;
3835
+ bottom: 0px;
3836
+ left: 0px;
3837
+ width: var(--size-touch-area);
3838
+ height: 2px;
3839
+ background-color: var(--uc-secondary-foreground);
3840
+ transform: translateX(0px);
3841
+ transition: transform var(--transition-duration-3);
3842
+ }
3843
+
3844
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row {
3845
+ position: relative;
3846
+ }
3847
+
3848
+ uc-editor-toolbar > .uc-toolbar-container > .uc-sub-toolbar > .uc-tab-content-row > .uc-tab-content {
3849
+ position: absolute;
3850
+ top: 0px;
3851
+ left: 0px;
3852
+ display: flex;
3853
+ width: 100%;
3854
+ height: 100%;
3855
+ overflow: hidden;
3856
+ content-visibility: auto;
3857
+ }
3858
+
3859
+ uc-editor-toolbar
3860
+ > .uc-toolbar-container
3861
+ > .uc-sub-toolbar
3862
+ > .uc-controls-row
3863
+ > .uc-tab-toggles
3864
+ > .uc-tab-toggle.uc-tab-toggle--visible {
3865
+ display: contents;
3866
+ }
3867
+
3868
+ uc-editor-toolbar
3869
+ > .uc-toolbar-container
3870
+ > .uc-sub-toolbar
3871
+ > .uc-controls-row
3872
+ > .uc-tab-toggles
3873
+ > .uc-tab-toggle.uc-tab-toggle--hidden {
3874
+ display: none;
3875
+ }
3876
+
3877
+ uc-editor-toolbar
3878
+ > .uc-toolbar-container
3879
+ > .uc-sub-toolbar
3880
+ > .uc-controls-row
3881
+ > .uc-tab-toggles.uc-tab-toggles--hidden {
3882
+ display: none;
3883
+ }
3884
+
3885
+ uc-editor-toolbar
3886
+ > .uc-toolbar-container
3887
+ > .uc-sub-toolbar
3888
+ > .uc-controls-row
3889
+ > .uc-tab-toggles
3890
+ > .uc-tab-toggle
3891
+ > uc-btn-ui {
3892
+ width: var(--uc-button-size);
3893
+ }
3894
+
3895
+ uc-editor-toolbar
3896
+ > .uc-toolbar-container
3897
+ > .uc-sub-toolbar
3898
+ > .uc-controls-row
3899
+ > .uc-tab-toggles
3900
+ > .uc-tab-toggle
3901
+ > uc-btn-ui
3902
+ > uc-icon
3903
+ > svg {
3904
+ width: var(--size-icon);
3905
+ height: var(--size-icon);
3906
+ }
3907
+
3908
+ uc-editor-toolbar
3909
+ > .uc-toolbar-container
3910
+ > .uc-sub-toolbar
3911
+ > .uc-tab-content-row
3912
+ > .uc-tab-content
3913
+ .uc-controls-list_align {
3914
+ display: grid;
3915
+ grid-template-areas: ". inner .";
3916
+ grid-template-columns: 1fr auto 1fr;
3917
+ box-sizing: border-box;
3918
+ min-width: 100%;
3919
+ padding-left: var(--uc-padding);
3920
+ }
3921
+
3922
+ uc-editor-toolbar
3923
+ > .uc-toolbar-container
3924
+ > .uc-sub-toolbar
3925
+ > .uc-tab-content-row
3926
+ > .uc-tab-content
3927
+ .uc-controls-list_inner {
3928
+ display: grid;
3929
+ grid-area: inner;
3930
+ grid-auto-flow: column;
3931
+ gap: 6px;
3932
+ }
3933
+
3934
+ uc-editor-toolbar
3935
+ > .uc-toolbar-container
3936
+ > .uc-sub-toolbar
3937
+ > .uc-tab-content-row
3938
+ > .uc-tab-content
3939
+ .uc-controls-list_inner:last-child {
3940
+ padding-right: var(--uc-padding);
3941
+ }
3942
+
3943
+ uc-editor-toolbar .uc-info-tooltip_container {
3944
+ position: absolute;
3945
+ display: flex;
3946
+ align-items: flex-start;
3947
+ justify-content: center;
3948
+ width: 100%;
3949
+ height: 100%;
3950
+ }
3951
+
3952
+ uc-editor-toolbar .uc-info-tooltip_wrapper {
3953
+ position: absolute;
3954
+ top: calc(-100% - var(--cldtr-gap-mid-2));
3955
+ display: flex;
3956
+ flex-direction: column;
3957
+ justify-content: flex-end;
3958
+ height: 100%;
3959
+ pointer-events: none;
3960
+ }
3961
+
3962
+ uc-editor-toolbar .uc-info-tooltip {
3963
+ z-index: 10;
3964
+ padding: 3px 6px;
3965
+ color: var(--color-text-base);
3966
+ font-size: 0.7em;
3967
+ letter-spacing: 1px;
3968
+ text-transform: uppercase;
3969
+ background-color: var(--color-text-accent-contrast);
3970
+ border-radius: var(--border-radius-editor);
3971
+ transform: translateY(100%);
3972
+ opacity: 0;
3973
+ transition: var(--transition-duration-3);
3974
+ }
3975
+
3976
+ uc-editor-toolbar .uc-info-tooltip_visible {
3977
+ transform: translateY(0px);
3978
+ opacity: 1;
3979
+ }
3980
+
3981
+ uc-editor-toolbar .uc-slider {
3982
+ padding-right: var(--l-slider-padding);
3983
+ padding-left: var(--l-slider-padding);
3984
+ }
3985
+
3986
+ uc-btn-ui > button {
3987
+ --filter-effect: var(--idle-brightness);
3988
+ --opacity-effect: var(--idle-opacity);
3989
+ --color-effect: var(--idle-color-rgb);
3990
+ --background-effect: var(--idle-background);
3991
+ --l-transition-effect: var(
3992
+ --css-transition,
3993
+ color var(--transition-duration-2),
3994
+ background-color var(--transition-duration-2),
3995
+ filter var(--transition-duration-2)
3996
+ );
3997
+
3998
+ all: unset;
3999
+ display: inline-flex;
4000
+ align-items: center;
4001
+ box-sizing: var(--css-box-sizing, border-box);
4002
+ height: var(--css-height, var(--uc-button-size));
4003
+ padding-right: var(--css-padding-right, 14px);
4004
+ padding-left: var(--css-padding-left, 14px);
4005
+ font-size: 1em;
4006
+ color: var(--color-effect);
4007
+ background-color: var(--background-effect);
4008
+ border-radius: var(--uc-radius);
4009
+ opacity: var(--opacity-effect);
4010
+ cursor: pointer;
4011
+ filter: brightness(var(--filter-effect));
4012
+ transition: var(--l-transition-effect);
4013
+ user-select: none;
4014
+ }
4015
+
4016
+ uc-btn-ui > button > uc-icon {
4017
+ pointer-events: none;
4018
+ }
4019
+
4020
+ uc-btn-ui .uc-text {
4021
+ white-space: nowrap;
4022
+ }
4023
+
4024
+ uc-btn-ui .uc-icon {
4025
+ display: flex;
4026
+ align-items: center;
4027
+ justify-content: center;
4028
+ color: var(--color-effect);
4029
+ filter: brightness(var(--filter-effect));
4030
+ transition: var(--l-transition-effect);
4031
+ }
4032
+
4033
+ uc-btn-ui .uc-icon_left {
4034
+ margin-right: var(--cldtr-gap-mid-1);
4035
+ margin-left: 0px;
4036
+ }
4037
+
4038
+ uc-btn-ui .uc-icon_right {
4039
+ margin-right: 0px;
4040
+ margin-left: var(--cldtr-gap-mid-1);
4041
+ }
4042
+
4043
+ uc-btn-ui .uc-icon_single {
4044
+ margin-right: 0px;
4045
+ margin-left: 0px;
4046
+ }
4047
+
4048
+ uc-btn-ui .uc-icon_hidden {
4049
+ display: none;
4050
+ margin: 0;
4051
+ }
4052
+
4053
+ uc-btn-ui.uc-primary > button {
4054
+ --idle-color-rgb: var(--uc-primary-foreground);
4055
+ --idle-brightness: 1;
4056
+ --idle-opacity: 1;
4057
+ --idle-background: var(--uc-primary);
4058
+ --hover-color-rgb: var(--uc-primary-foreground);
4059
+ --hover-brightness: 1;
4060
+ --hover-opacity: 1;
4061
+ --hover-background: var(--uc-primary-hover);
4062
+ --down-color-rgb: var(--uc-primary-foreground);
4063
+ --down-brightness: 0.75;
4064
+ --down-opacity: 1;
4065
+ --down-background: var(--uc-primary);
4066
+ --active-color-rgb: var(--uc-primary-foreground);
4067
+ --active-brightness: 1;
4068
+ --active-opacity: 1;
4069
+ --active-background: var(--uc-primary);
4070
+ }
4071
+
4072
+ uc-btn-ui.uc-primary-icon > button {
4073
+ --idle-color-rgb: var(--uc-primary);
4074
+ --idle-brightness: 1;
4075
+ --idle-opacity: 1;
4076
+ --idle-background: transparent;
4077
+ --hover-color-rgb: var(--uc-primary);
4078
+ --hover-brightness: 1;
4079
+ --hover-opacity: 1;
4080
+ --hover-background: var(--uc-primary-transparent);
4081
+ --down-color-rgb: var(--uc-primary);
4082
+ --down-brightness: 0.75;
4083
+ --down-opacity: 1;
4084
+ --down-background: var(--uc-primary-transparent);
4085
+ --active-color-rgb: var(--uc-primary-foreground);
4086
+ --active-brightness: 1;
4087
+ --active-opacity: 1;
4088
+ --active-background: var(--uc-primary);
4089
+
4090
+ padding: 0;
4091
+ width: var(--uc-button-size);
4092
+ }
4093
+
4094
+ uc-btn-ui.uc-secondary > button {
4095
+ --idle-color-rgb: var(--uc-secondary-foreground);
4096
+ --idle-brightness: 1;
4097
+ --idle-opacity: 1;
4098
+ --idle-background: var(--uc-secondary);
4099
+ --hover-color-rgb: var(--uc-secondary-foreground);
4100
+ --hover-brightness: 1;
4101
+ --hover-opacity: 1;
4102
+ --hover-background: var(--uc-secondary-hover);
4103
+ --down-color-rgb: var(--uc-secondary-foreground);
4104
+ --down-brightness: 1;
4105
+ --down-opacity: 1;
4106
+ --down-background: var(--uc-secondary-hover);
4107
+ --active-color-rgb: var(--uc-secondary-foreground);
4108
+ --active-brightness: 1;
4109
+ --active-opacity: 1;
4110
+ --active-background: transparent;
4111
+ }
4112
+
4113
+ :where(.uc-contrast) uc-btn-ui.uc-secondary > button {
4114
+ border: 1px solid var(--uc-border);
4115
+ }
4116
+
4117
+ uc-btn-ui.uc-secondary-icon > button {
4118
+ --idle-color-rgb: var(--uc-secondary-foreground);
4119
+ --idle-brightness: 1;
4120
+ --idle-opacity: 1;
4121
+ --idle-background: transparent;
4122
+ --hover-color-rgb: var(--uc-secondary-foreground);
4123
+ --hover-brightness: 1;
4124
+ --hover-opacity: 1;
4125
+ --hover-background: var(--uc-secondary);
4126
+ --down-color-rgb: var(--uc-secondary-foreground);
4127
+ --down-brightness: 1;
4128
+ --down-opacity: 1;
4129
+ --down-background: var(--uc-secondary);
4130
+ --active-color-rgb: var(--uc-secondary-foreground);
4131
+ --active-brightness: 1;
4132
+ --active-opacity: 1;
4133
+ --active-background: transparent;
4134
+
4135
+ padding: 0;
4136
+ width: var(--uc-button-size);
4137
+ }
4138
+
4139
+ uc-btn-ui.uc-tab > button {
4140
+ --idle-color-rgb: var(--uc-secondary-foreground);
4141
+ --idle-brightness: 1;
4142
+ --idle-opacity: 1;
4143
+ --idle-background: transparent;
4144
+ --hover-color-rgb: var(--uc-secondary-foreground);
4145
+ --hover-brightness: 1;
4146
+ --hover-opacity: 1;
4147
+ --hover-background: var(--uc-secondary);
4148
+ --down-color-rgb: var(--uc-secondary-foreground);
4149
+ --down-brightness: 1;
4150
+ --down-opacity: 1;
4151
+ --down-background: var(--uc-secondary);
4152
+ --active-color-rgb: var(--uc-secondary-foreground);
4153
+ --active-brightness: 1;
4154
+ --active-opacity: 1;
4155
+ --active-background: transparent;
4156
+
4157
+ padding: 0;
4158
+ width: var(--uc-button-size);
4159
+ }
4160
+
4161
+ uc-btn-ui.uc-default > button {
4162
+ --idle-color-rgb: var(--uc-secondary-foreground);
4163
+ --idle-brightness: 1;
4164
+ --idle-opacity: 1;
4165
+ --idle-background: var(--uc-secondary);
4166
+ --hover-color-rgb: var(--uc-secondary-foreground);
4167
+ --hover-brightness: 1;
4168
+ --hover-opacity: 1;
4169
+ --hover-background: var(--uc-secondary-hover);
4170
+ --down-color-rgb: var(--uc-secondary-foreground);
4171
+ --down-brightness: 0.75;
4172
+ --down-opacity: 1;
4173
+ --down-background: var(--uc-secondary);
4174
+ --active-color-rgb: var(--uc-primary);
4175
+ --active-brightness: 1;
4176
+ --active-opacity: 1;
4177
+ --active-background: var(--uc-primary-transparent);
4178
+ }
4179
+
4180
+ :where(.uc-contrast) uc-btn-ui.uc-default > button {
4181
+ --idle-background: transparent;
4182
+ --hover-background: var(--uc-secondary);
4183
+ --active-background: var(--uc-foreground);
4184
+ --active-color-rgb: var(--uc-background);
4185
+ }
4186
+
4187
+ uc-line-loader-ui {
4188
+ position: absolute;
4189
+ top: 0px;
4190
+ left: 0px;
4191
+ z-index: 9999;
4192
+ width: 100%;
4193
+ height: 2px;
4194
+ opacity: 0.5;
4195
+ }
4196
+
4197
+ uc-line-loader-ui .uc-inner {
4198
+ width: 25%;
4199
+ max-width: 200px;
4200
+ height: 100%;
4201
+ }
4202
+
4203
+ uc-line-loader-ui .uc-line {
4204
+ width: 100%;
4205
+ height: 100%;
4206
+ background-color: var(--uc-primary);
4207
+ transform: translateX(-101%);
4208
+ transition: transform 1s;
4209
+ }
4210
+
4211
+ uc-slider-ui {
4212
+ --l-thumb-size: 24px;
4213
+ --l-zero-dot-size: 5px;
4214
+ --l-zero-dot-offset: 2px;
4215
+ --idle-color-rgb: var(--uc-foreground);
4216
+ --hover-color-rgb: var(--uc-primary);
4217
+ --down-color-rgb: var(--uc-primary);
4218
+ --color-effect: var(--idle-color-rgb);
4219
+ --l-color: var(--color-effect);
4220
+
4221
+ position: relative;
4222
+ display: flex;
4223
+ align-items: center;
4224
+ justify-content: center;
4225
+ width: 100%;
4226
+ height: calc(var(--l-thumb-size) + (var(--l-zero-dot-size) + var(--l-zero-dot-offset)) * 2);
4227
+ }
4228
+
4229
+ uc-slider-ui .uc-thumb {
4230
+ position: absolute;
4231
+ left: 0px;
4232
+ width: var(--l-thumb-size);
4233
+ height: var(--l-thumb-size);
4234
+ background-color: var(--l-color);
4235
+ border-radius: 50%;
4236
+ transform: translateX(0px);
4237
+ opacity: 1;
4238
+ transition:
4239
+ opacity var(--transition-duration-2),
4240
+ background-color var(--transition-duration-2);
4241
+ }
4242
+
4243
+ uc-slider-ui .uc-steps {
4244
+ position: absolute;
4245
+ display: flex;
4246
+ align-items: center;
4247
+ justify-content: space-between;
4248
+ box-sizing: border-box;
4249
+ width: 100%;
4250
+ height: 100%;
4251
+ padding-right: calc(var(--l-thumb-size) / 2);
4252
+ padding-left: calc(var(--l-thumb-size) / 2);
4253
+ }
4254
+
4255
+ uc-slider-ui .uc-border-step {
4256
+ width: 0px;
4257
+ height: 10px;
4258
+ border-right: 1px solid var(--uc-foreground);
4259
+ opacity: 1;
4260
+ transition: border-color var(--transition-duration-2);
4261
+ }
4262
+
4263
+ uc-slider-ui .uc-minor-step {
4264
+ width: 0px;
4265
+ height: 4px;
4266
+ border-right: 1px solid var(--uc-foreground);
4267
+ opacity: 0.6;
4268
+ transition: border-color var(--transition-duration-2);
4269
+ }
4270
+
4271
+ uc-slider-ui .uc-zero-dot {
4272
+ position: absolute;
4273
+ top: calc(100% - var(--l-zero-dot-offset) * 2);
4274
+ left: calc(var(--l-thumb-size) / 2 - var(--l-zero-dot-size) / 2);
4275
+ width: var(--l-zero-dot-size);
4276
+ height: var(--l-zero-dot-size);
4277
+ background-color: var(--color-primary-accent);
4278
+ border-radius: 50%;
4279
+ opacity: 0;
4280
+ transition: var(--transition-duration-3);
4281
+ }
4282
+
4283
+ uc-slider-ui .uc-input {
4284
+ position: absolute;
4285
+ width: calc(100% - 10px);
4286
+ height: 100%;
4287
+ margin: 0;
4288
+ cursor: pointer;
4289
+ opacity: 0;
4290
+ }
4291
+
4292
+ uc-presence-toggle.uc-transition {
4293
+ transition:
4294
+ opacity var(--transition-duration-3),
4295
+ visibility var(--transition-duration-3);
4296
+ }
4297
+
4298
+ uc-presence-toggle.uc-visible {
4299
+ opacity: 1;
4300
+ pointer-events: inherit;
4301
+ }
4302
+
4303
+ uc-presence-toggle.uc-hidden {
4304
+ opacity: 0;
4305
+ pointer-events: none;
4306
+ }
4307
+
4308
+ uc-presence-toggle.uc-initial {
4309
+ display: none !important;
4310
+ transition: none !important;
4311
+ }
4312
+
4313
+ [uc-cloud-image-editor] [role="button"]:focus-visible,
4314
+ [uc-cloud-image-editor] button:focus-visible {
4315
+ outline: 1px auto Highlight;
4316
+ outline: 1px auto -webkit-focus-ring-color;
4317
+ }
4318
+
4319
+ [uc-cloud-image-editor] .uc-cloud-mask {
4320
+ pointer-events: none;
4321
+ }
4322
+
4323
+ [uc-aspect-ratio-freeform] button {
4324
+ display: flex;
4325
+ }
4326
+
4327
+ [uc-aspect-ratio-freeform] uc-icon {
4328
+ display: none;
4329
+ }
4330
+
4331
+ [uc-aspect-ratio-freeform] .uc-title {
4332
+ padding-left: var(--cldtr-gap-mid-1);
4333
+ }
4334
+
4335
+ :where(uc-editor-freeform-button-control, uc-editor-aspect-ratio-button-control:last-of-type) {
4336
+ margin-right: calc(3 * var(--cldtr-gap-mid-1));
4337
+ }
4338
+ }
4339
+ @layer uc.solutions {
4340
+ :where([uc-cloud-image-editor]) uc-icon {
4341
+ display: flex;
4342
+ justify-content: center;
4343
+ width: 100%;
4344
+ height: 100%;
4345
+ }
4346
+
4347
+ :where([uc-cloud-image-editor]) uc-icon svg {
4348
+ width: calc(var(--uc-button-size) / 2);
4349
+ height: calc(var(--uc-button-size) / 2);
4350
+ }
4351
+ }
4352
+ /*$vite$:1*/