@uploadcare/file-uploader 1.27.0 → 1.28.0-alpha.0

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