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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (466) hide show
  1. package/dist/ActivityHeader-R6Mlx-dA.js +9 -0
  2. package/dist/ActivityHeader.css +23 -0
  3. package/dist/ActivityHeader.layered.css +24 -0
  4. package/dist/{CameraSource-DbyO6GoK.js → CameraSource-DDwj1jCV.js} +106 -76
  5. package/dist/CameraSource-n1tun2Df.js +10 -0
  6. package/dist/CameraSource.css +180 -0
  7. package/dist/CameraSource.layered.css +209 -0
  8. package/dist/{CloudImageEditor-BIxf1V4M.js → CloudImageEditor-DcVoIRb3.js} +66 -65
  9. package/dist/{CloudImageEditorActivity-d4DpK6fQ.js → CloudImageEditorActivity-Csij4nlC.js} +4 -4
  10. package/dist/{CloudImageEditorActivity-CJxP5N0S.js → CloudImageEditorActivity-DD4NdU0P.js} +4 -4
  11. package/dist/CloudImageEditorActivity.css +14 -0
  12. package/dist/CloudImageEditorActivity.layered.css +15 -0
  13. package/dist/{Config-DuWre5p3.js → Config-DKOromHY.js} +27 -27
  14. package/dist/Config.css +4 -0
  15. package/dist/Config.layered.css +5 -0
  16. package/dist/ExternalSource-6MSUgxqy.js +10 -0
  17. package/dist/{ExternalSource-BKTFp95O.js → ExternalSource-DVEjSkPB.js} +56 -51
  18. package/dist/ExternalSource.css +98 -0
  19. package/dist/ExternalSource.layered.css +116 -0
  20. package/dist/{Icon-CqTVC82Q.js → Icon-tXRTvEF2.js} +7 -8
  21. package/dist/Icon.css +14 -0
  22. package/dist/Icon.layered.css +15 -0
  23. package/dist/{LitUploaderBlock-BA34rzeU.js → LitUploaderBlock-LxeOZ0ya.js} +65 -65
  24. package/dist/{UrlSource-DZK5EBwT.js → UrlSource-BkyX00I2.js} +5 -5
  25. package/dist/UrlSource-RI8TSD48.js +10 -0
  26. package/dist/UrlSource.css +17 -0
  27. package/dist/UrlSource.layered.css +18 -0
  28. package/dist/abstract/loadFileUploaderFrom.js +3 -3
  29. package/dist/cameraPlugin-weRKO7eG.js +8 -0
  30. package/dist/{cloud-image-editor-fNswWrI4.js → cloud-image-editor-hhbyNWLG.js} +6 -6
  31. package/dist/cloud-image-editor.css +1380 -0
  32. package/dist/cloud-image-editor.layered.css +1549 -0
  33. package/dist/cloudImageEditorPlugin-FjUgbMK3.js +8 -0
  34. package/dist/{en-DNCwRJsB.js → en-8OWEmZim.js} +2 -2
  35. package/dist/env-mM-ksNPq.js +8 -0
  36. package/dist/env.js +3 -3
  37. package/dist/externalSourcesPlugin-CMBmLT8S.js +8 -0
  38. package/dist/imageShrinkPlugin-BN6loiP2.js +8 -0
  39. package/dist/index-base.css +2497 -0
  40. package/dist/index-base.layered.css +2837 -0
  41. package/dist/index.css +9 -3964
  42. package/dist/index.d.ts +13 -0
  43. package/dist/index.js +827 -42
  44. package/dist/index.layered.css +9 -4478
  45. package/dist/instagramPlugin-CXRm8MGL.js +8 -0
  46. package/dist/{loadFileUploaderFrom-BWJM43Yq.js → loadFileUploaderFrom-Bfz8L3VB.js} +3 -3
  47. package/dist/locales/file-uploader/ar.js +2 -2
  48. package/dist/locales/file-uploader/az.js +2 -2
  49. package/dist/locales/file-uploader/ca.js +2 -2
  50. package/dist/locales/file-uploader/cs.js +2 -2
  51. package/dist/locales/file-uploader/da.js +2 -2
  52. package/dist/locales/file-uploader/de.js +2 -2
  53. package/dist/locales/file-uploader/el.js +2 -2
  54. package/dist/locales/file-uploader/en.js +3 -3
  55. package/dist/locales/file-uploader/es.js +2 -2
  56. package/dist/locales/file-uploader/et.js +2 -2
  57. package/dist/locales/file-uploader/fi.js +2 -2
  58. package/dist/locales/file-uploader/fr.js +2 -2
  59. package/dist/locales/file-uploader/he.js +2 -2
  60. package/dist/locales/file-uploader/hy.js +2 -2
  61. package/dist/locales/file-uploader/is.js +2 -2
  62. package/dist/locales/file-uploader/it.js +2 -2
  63. package/dist/locales/file-uploader/ja.js +2 -2
  64. package/dist/locales/file-uploader/ka.js +2 -2
  65. package/dist/locales/file-uploader/kk.js +2 -2
  66. package/dist/locales/file-uploader/ko.js +2 -2
  67. package/dist/locales/file-uploader/lv.js +2 -2
  68. package/dist/locales/file-uploader/nb.js +2 -2
  69. package/dist/locales/file-uploader/nl.js +2 -2
  70. package/dist/locales/file-uploader/pl.js +2 -2
  71. package/dist/locales/file-uploader/pt.js +2 -2
  72. package/dist/locales/file-uploader/ro.js +2 -2
  73. package/dist/locales/file-uploader/ru.js +2 -2
  74. package/dist/locales/file-uploader/sk.js +2 -2
  75. package/dist/locales/file-uploader/sr.js +2 -2
  76. package/dist/locales/file-uploader/sv.js +2 -2
  77. package/dist/locales/file-uploader/tr.js +2 -2
  78. package/dist/locales/file-uploader/uk.js +2 -2
  79. package/dist/locales/file-uploader/vi.js +2 -2
  80. package/dist/locales/file-uploader/zh-TW.js +2 -2
  81. package/dist/locales/file-uploader/zh.js +2 -2
  82. package/dist/{plugins-DxjsQUa8.js → plugins-CGUls7EV.js} +6 -6
  83. package/dist/urlSourcePlugin-_WdbEhq2.js +8 -0
  84. package/package.json +1 -1
  85. package/web/ActivityHeader-BFdTdVfD.js +9 -0
  86. package/web/ActivityHeader-DQy6rII1.js +9 -0
  87. package/web/ActivityHeader-DvzMl0uj.js +9 -0
  88. package/web/ActivityHeader-i4x6_Fne.js +9 -0
  89. package/web/CameraSource-BAWIA4Wm.js +508 -0
  90. package/web/CameraSource-BqZCQcij.js +11 -0
  91. package/web/CameraSource-Brxr4tz4.js +508 -0
  92. package/web/CameraSource-BvBJ5Uzy.js +508 -0
  93. package/web/CameraSource-CkHzIE-h.js +11 -0
  94. package/web/CameraSource-D964yPLu.js +508 -0
  95. package/web/CameraSource-DE48Az-f.js +11 -0
  96. package/web/CameraSource-DyPebtRF.js +478 -0
  97. package/web/CameraSource-pj7Xo81m.js +11 -0
  98. package/web/CloudImageEditor-CTgUWB07.js +2192 -0
  99. package/web/CloudImageEditor-CxqV9Lwm.js +2192 -0
  100. package/web/CloudImageEditor-DoLWHpqV.js +2192 -0
  101. package/web/CloudImageEditor-Drywn265.js +2192 -0
  102. package/web/CloudImageEditor-MXcaDtMx.js +2187 -0
  103. package/web/CloudImageEditorActivity-BPzmfaJV.js +85 -0
  104. package/web/CloudImageEditorActivity-Br8pU5gd.js +11 -0
  105. package/web/CloudImageEditorActivity-Cw8b2CEz.js +11 -0
  106. package/web/CloudImageEditorActivity-Df1ySGq0.js +86 -0
  107. package/web/CloudImageEditorActivity-DinG5r0y.js +11 -0
  108. package/web/CloudImageEditorActivity-DmnLLINR.js +85 -0
  109. package/web/CloudImageEditorActivity-U90BGCek.js +85 -0
  110. package/web/CloudImageEditorActivity-dNLQZRZI.js +11 -0
  111. package/web/CloudImageEditorActivity-ur-hQ-6p.js +85 -0
  112. package/web/Config-8hlBNhvs.js +455 -0
  113. package/web/Config-BDZhPIyz.js +455 -0
  114. package/web/Config-CJVNrrjj.js +455 -0
  115. package/web/Config-DvkVtlQ7.js +455 -0
  116. package/web/ExternalSource-B9ycBFiD.js +10 -0
  117. package/web/ExternalSource-BE7HX47E.js +250 -0
  118. package/web/ExternalSource-BL5GSlol.js +250 -0
  119. package/web/ExternalSource-BXQY6Dlc.js +10 -0
  120. package/web/ExternalSource-BXxH3JCD.js +250 -0
  121. package/web/ExternalSource-BYSS-PPV.js +245 -0
  122. package/web/ExternalSource-C57a61QN.js +10 -0
  123. package/web/ExternalSource-CKfMtOgU.js +250 -0
  124. package/web/ExternalSource-DP6q8ylB.js +10 -0
  125. package/web/LitUploaderBlock-AX6jOdAS.js +996 -0
  126. package/web/LitUploaderBlock-BjAaoLl2.js +996 -0
  127. package/web/LitUploaderBlock-D8E5HuwH.js +996 -0
  128. package/web/LitUploaderBlock-Dl3ce0Tc.js +996 -0
  129. package/web/LitUploaderBlock-Oi33U0uf.js +996 -0
  130. package/web/UrlSource-B9SX3K0L.js +10 -0
  131. package/web/UrlSource-C3zB1rCb.js +70 -0
  132. package/web/UrlSource-C7bEU6Xv.js +10 -0
  133. package/web/UrlSource-CE389CBz.js +70 -0
  134. package/web/UrlSource-CnvAJ58Y.js +10 -0
  135. package/web/UrlSource-CqF0h6B-.js +10 -0
  136. package/web/UrlSource-D-971Nut.js +70 -0
  137. package/web/UrlSource-DhI3YCt5.js +70 -0
  138. package/web/UrlSource-hWV7jtB2.js +70 -0
  139. package/web/abstract/CTX.d.ts +40 -0
  140. package/web/abstract/TypedCollection.d.ts +47 -0
  141. package/web/abstract/TypedCollection.test.d.ts +1 -0
  142. package/web/abstract/TypedData.d.ts +12 -0
  143. package/web/abstract/TypedData.test.d.ts +1 -0
  144. package/web/abstract/UploaderPublicApi.d.ts +41 -0
  145. package/web/abstract/buildOutputCollectionState.d.ts +3 -0
  146. package/web/abstract/customConfigOptions.d.ts +65 -0
  147. package/web/abstract/defineComponents.d.ts +1 -0
  148. package/web/abstract/features/ClipboardLayer.d.ts +12 -0
  149. package/web/abstract/loadFileUploaderFrom.d.ts +13 -0
  150. package/web/abstract/localeRegistry.d.ts +5 -0
  151. package/web/abstract/managers/LocaleManager.d.ts +10 -0
  152. package/web/abstract/managers/ModalManager.d.ts +53 -0
  153. package/web/abstract/managers/SecureUploadsManager.d.ts +7 -0
  154. package/web/abstract/managers/TelemetryManager.d.ts +41 -0
  155. package/web/abstract/managers/ValidationManager.d.ts +34 -0
  156. package/web/abstract/managers/__tests__/ModalManager.test.d.ts +13 -0
  157. package/web/abstract/managers/__tests__/SecureUploadsManager.test.d.ts +1 -0
  158. package/web/abstract/managers/a11y.d.ts +9 -0
  159. package/web/abstract/managers/plugin/PluginManager.d.ts +25 -0
  160. package/web/abstract/managers/plugin/PluginTypes.d.ts +146 -0
  161. package/web/abstract/managers/plugin/index.d.ts +2 -0
  162. package/web/abstract/sharedConfigKey.d.ts +2 -0
  163. package/web/abstract/uploadEntrySchema.d.ts +34 -0
  164. package/web/blocks/ActivityHeader/ActivityHeader.d.ts +8 -0
  165. package/web/blocks/CameraSource/CameraSource.d.ts +121 -0
  166. package/web/blocks/CameraSource/__tests__/calcCameraModes.test.d.ts +1 -0
  167. package/web/blocks/CameraSource/calcCameraModes.d.ts +5 -0
  168. package/web/blocks/CameraSource/constants.d.ts +15 -0
  169. package/web/blocks/CloudImageEditor/index.d.ts +1 -0
  170. package/web/blocks/CloudImageEditor/src/CloudImageEditorBlock.d.ts +60 -0
  171. package/web/blocks/CloudImageEditor/src/CropFrame.d.ts +56 -0
  172. package/web/blocks/CloudImageEditor/src/EditorAspectRatioButtonControl.d.ts +24 -0
  173. package/web/blocks/CloudImageEditor/src/EditorButtonControl.d.ts +14 -0
  174. package/web/blocks/CloudImageEditor/src/EditorCropButtonControl.d.ts +13 -0
  175. package/web/blocks/CloudImageEditor/src/EditorFilterControl.d.ts +35 -0
  176. package/web/blocks/CloudImageEditor/src/EditorImageCropper.d.ts +56 -0
  177. package/web/blocks/CloudImageEditor/src/EditorImageFader.d.ts +63 -0
  178. package/web/blocks/CloudImageEditor/src/EditorOperationControl.d.ts +15 -0
  179. package/web/blocks/CloudImageEditor/src/EditorScroller.d.ts +15 -0
  180. package/web/blocks/CloudImageEditor/src/EditorSlider.d.ts +33 -0
  181. package/web/blocks/CloudImageEditor/src/EditorToolbar.d.ts +68 -0
  182. package/web/blocks/CloudImageEditor/src/crop-utils.d.ts +36 -0
  183. package/web/blocks/CloudImageEditor/src/crop-utils.test.d.ts +1 -0
  184. package/web/blocks/CloudImageEditor/src/cropper-constants.d.ts +10 -0
  185. package/web/blocks/CloudImageEditor/src/elements/button/BtnUi.d.ts +31 -0
  186. package/web/blocks/CloudImageEditor/src/elements/line-loader/LineLoaderUi.d.ts +19 -0
  187. package/web/blocks/CloudImageEditor/src/elements/presence-toggle/PresenceToggle.d.ts +27 -0
  188. package/web/blocks/CloudImageEditor/src/elements/slider/SliderUi.d.ts +38 -0
  189. package/web/blocks/CloudImageEditor/src/index.d.ts +15 -0
  190. package/web/blocks/CloudImageEditor/src/lib/classNames.d.ts +5 -0
  191. package/web/blocks/CloudImageEditor/src/lib/classNames.test.d.ts +1 -0
  192. package/web/blocks/CloudImageEditor/src/lib/linspace.d.ts +1 -0
  193. package/web/blocks/CloudImageEditor/src/lib/linspace.test.d.ts +1 -0
  194. package/web/blocks/CloudImageEditor/src/lib/parseCropPreset.d.ts +4 -0
  195. package/web/blocks/CloudImageEditor/src/lib/parseCropPreset.test.d.ts +1 -0
  196. package/web/blocks/CloudImageEditor/src/lib/parseTabs.d.ts +2 -0
  197. package/web/blocks/CloudImageEditor/src/lib/pick.d.ts +1 -0
  198. package/web/blocks/CloudImageEditor/src/lib/pick.test.d.ts +1 -0
  199. package/web/blocks/CloudImageEditor/src/lib/transformationUtils.d.ts +7 -0
  200. package/web/blocks/CloudImageEditor/src/state.d.ts +20 -0
  201. package/web/blocks/CloudImageEditor/src/svg-sprite.d.ts +2 -0
  202. package/web/blocks/CloudImageEditor/src/toolbar-constants.d.ts +61 -0
  203. package/web/blocks/CloudImageEditor/src/types.d.ts +60 -0
  204. package/web/blocks/CloudImageEditor/src/util.d.ts +2 -0
  205. package/web/blocks/CloudImageEditor/src/utils/parseFilterValue.d.ts +7 -0
  206. package/web/blocks/CloudImageEditor/src/utils/parseFilterValue.test.d.ts +1 -0
  207. package/web/blocks/CloudImageEditorActivity/CloudImageEditorActivity.d.ts +25 -0
  208. package/web/blocks/Config/Config.d.ts +60 -0
  209. package/web/blocks/Config/assertions.d.ts +5 -0
  210. package/web/blocks/Config/computed-properties.d.ts +24 -0
  211. package/web/blocks/Config/computed-properties.test.d.ts +1 -0
  212. package/web/blocks/Config/initialConfig.d.ts +6 -0
  213. package/web/blocks/Config/normalizeConfigValue.d.ts +2 -0
  214. package/web/blocks/Config/validatorsType.d.ts +18 -0
  215. package/web/blocks/Copyright/Copyright.d.ts +10 -0
  216. package/web/blocks/DropArea/DropArea.d.ts +47 -0
  217. package/web/blocks/DropArea/addDropzone.d.ts +17 -0
  218. package/web/blocks/DropArea/getDropItems.d.ts +12 -0
  219. package/web/blocks/ExternalSource/ExternalSource.d.ts +45 -0
  220. package/web/blocks/ExternalSource/MessageBridge.d.ts +11 -0
  221. package/web/blocks/ExternalSource/buildThemeDefinition.d.ts +4 -0
  222. package/web/blocks/ExternalSource/query-string.d.ts +1 -0
  223. package/web/blocks/ExternalSource/types.d.ts +105 -0
  224. package/web/blocks/FileItem/FileItem.d.ts +50 -0
  225. package/web/blocks/FileItem/FileItemConfig.d.ts +10 -0
  226. package/web/blocks/FormInput/FormInput.d.ts +18 -0
  227. package/web/blocks/Icon/Icon.d.ts +19 -0
  228. package/web/blocks/Img/Img.d.ts +14 -0
  229. package/web/blocks/Img/ImgBase.d.ts +29 -0
  230. package/web/blocks/Img/ImgConfig.d.ts +28 -0
  231. package/web/blocks/Img/configurations.d.ts +11 -0
  232. package/web/blocks/Img/props-map.d.ts +28 -0
  233. package/web/blocks/Img/utils/parseObjectToString.d.ts +2 -0
  234. package/web/blocks/Modal/Modal.d.ts +34 -0
  235. package/web/blocks/PluginActivityRenderer/PluginActivityRenderer.d.ts +32 -0
  236. package/web/blocks/PluginActivityRenderer/index.d.ts +1 -0
  237. package/web/blocks/ProgressBar/ProgressBar.d.ts +21 -0
  238. package/web/blocks/ProgressBarCommon/ProgressBarCommon.d.ts +17 -0
  239. package/web/blocks/Select/Select.d.ts +18 -0
  240. package/web/blocks/SimpleBtn/SimpleBtn.d.ts +15 -0
  241. package/web/blocks/SourceBtn/SourceBtn.d.ts +23 -0
  242. package/web/blocks/SourceList/SourceList.d.ts +24 -0
  243. package/web/blocks/Spinner/Spinner.d.ts +9 -0
  244. package/web/blocks/StartFrom/StartFrom.d.ts +12 -0
  245. package/web/blocks/Thumb/Thumb.d.ts +35 -0
  246. package/web/blocks/UploadCtxProvider/EventEmitter.d.ts +70 -0
  247. package/web/blocks/UploadCtxProvider/UploadCtxProvider.d.ts +44 -0
  248. package/web/blocks/UploadList/UploadList.d.ts +39 -0
  249. package/web/blocks/UrlSource/UrlSource.d.ts +14 -0
  250. package/web/blocks/svg-backgrounds/svg-backgrounds.d.ts +3 -0
  251. package/web/blocks/themes/uc-basic/svg-sprite.d.ts +2 -0
  252. package/web/cameraPlugin-DeedXMWV.js +8 -0
  253. package/web/cameraPlugin-Duy1QwjB.js +8 -0
  254. package/web/cameraPlugin-QS9SUOtO.js +8 -0
  255. package/web/cameraPlugin-bq8ggY04.js +8 -0
  256. package/web/cameraPlugin-cel9YgP_.js +8 -0
  257. package/web/cloud-image-editor-8DrVRZ7E.js +12 -0
  258. package/web/cloud-image-editor-BX50EK1U.js +12 -0
  259. package/web/cloud-image-editor-DSW3oWq-.js +12 -0
  260. package/web/cloud-image-editor-DuI2Lx4M.js +12 -0
  261. package/web/cloudImageEditorPlugin-5my6aD36.js +8 -0
  262. package/web/cloudImageEditorPlugin-Bk19DmJv.js +8 -0
  263. package/web/cloudImageEditorPlugin-CcdnmtBW.js +8 -0
  264. package/web/cloudImageEditorPlugin-DQJmDl03.js +8 -0
  265. package/web/cloudImageEditorPlugin-kojghfqw.js +8 -0
  266. package/web/constants-BCfCF0cJ.js +4025 -0
  267. package/web/core.d.ts +42 -0
  268. package/web/env.d.ts +2 -0
  269. package/web/externalSourcesPlugin-BTeRm5C0.js +8 -0
  270. package/web/externalSourcesPlugin-BXgVeojg.js +8 -0
  271. package/web/externalSourcesPlugin-BgLpuIK9.js +8 -0
  272. package/web/externalSourcesPlugin-DMc9zs4T.js +8 -0
  273. package/web/externalSourcesPlugin-Dm9vnTBv.js +8 -0
  274. package/web/file-uploader.iife.min.js +697 -0
  275. package/web/file-uploader.min.js +1859 -0
  276. package/web/imageShrinkPlugin-BdHgEGZH.js +8 -0
  277. package/web/imageShrinkPlugin-BjkMGfvT.js +8 -0
  278. package/web/imageShrinkPlugin-CCkGHL2w.js +8 -0
  279. package/web/imageShrinkPlugin-D4WjaRGo.js +8 -0
  280. package/web/imageShrinkPlugin-DqYGutVx.js +8 -0
  281. package/web/index.d.ts +42 -0
  282. package/web/instagramPlugin-BTMz0K2a.js +8 -0
  283. package/web/instagramPlugin-BbIKgTH7.js +8 -0
  284. package/web/instagramPlugin-CQQhsEJa.js +8 -0
  285. package/web/instagramPlugin-Cm7lWKae.js +8 -0
  286. package/web/instagramPlugin-DcclxM_d.js +8 -0
  287. package/web/lit/BaseComponent.d.ts +12 -0
  288. package/web/lit/Constructor.d.ts +1 -0
  289. package/web/lit/CssDataMixin.d.ts +7 -0
  290. package/web/lit/LightDomMixin.d.ts +8 -0
  291. package/web/lit/LitActivityBlock.d.ts +53 -0
  292. package/web/lit/LitBlock.d.ts +83 -0
  293. package/web/lit/LitSolutionBlock.d.ts +21 -0
  294. package/web/lit/LitUploaderBlock.d.ts +53 -0
  295. package/web/lit/PubSubCompat.d.ts +18 -0
  296. package/web/lit/RegisterableElementMixin.d.ts +7 -0
  297. package/web/lit/SharedState.d.ts +119 -0
  298. package/web/lit/SymbioteCompatMixin.d.ts +40 -0
  299. package/web/lit/TestModeController.d.ts +16 -0
  300. package/web/lit/Uid.d.ts +3 -0
  301. package/web/lit/activity-constants.d.ts +11 -0
  302. package/web/lit/createDebugPrinter.d.ts +3 -0
  303. package/web/lit/findBlockInCtx.d.ts +3 -0
  304. package/web/lit/getOutputData.d.ts +2 -0
  305. package/web/lit/hasBlockInCtx.d.ts +3 -0
  306. package/web/lit/l10n.d.ts +5 -0
  307. package/web/lit/parseCssPropertyValue.d.ts +1 -0
  308. package/web/lit/shared-instances.d.ts +65 -0
  309. package/web/locales/file-uploader/ar.d.ts +137 -0
  310. package/web/locales/file-uploader/az.d.ts +129 -0
  311. package/web/locales/file-uploader/ca.d.ts +131 -0
  312. package/web/locales/file-uploader/cs.d.ts +133 -0
  313. package/web/locales/file-uploader/da.d.ts +129 -0
  314. package/web/locales/file-uploader/de.d.ts +129 -0
  315. package/web/locales/file-uploader/el.d.ts +129 -0
  316. package/web/locales/file-uploader/en.d.ts +129 -0
  317. package/web/locales/file-uploader/es.d.ts +131 -0
  318. package/web/locales/file-uploader/et.d.ts +129 -0
  319. package/web/locales/file-uploader/fi.d.ts +129 -0
  320. package/web/locales/file-uploader/fr.d.ts +131 -0
  321. package/web/locales/file-uploader/he.d.ts +131 -0
  322. package/web/locales/file-uploader/hy.d.ts +129 -0
  323. package/web/locales/file-uploader/is.d.ts +129 -0
  324. package/web/locales/file-uploader/it.d.ts +131 -0
  325. package/web/locales/file-uploader/ja.d.ts +129 -0
  326. package/web/locales/file-uploader/ka.d.ts +129 -0
  327. package/web/locales/file-uploader/kk.d.ts +129 -0
  328. package/web/locales/file-uploader/ko.d.ts +129 -0
  329. package/web/locales/file-uploader/lv.d.ts +131 -0
  330. package/web/locales/file-uploader/nb.d.ts +129 -0
  331. package/web/locales/file-uploader/nl.d.ts +129 -0
  332. package/web/locales/file-uploader/pl.d.ts +133 -0
  333. package/web/locales/file-uploader/pt.d.ts +131 -0
  334. package/web/locales/file-uploader/ro.d.ts +131 -0
  335. package/web/locales/file-uploader/ru.d.ts +133 -0
  336. package/web/locales/file-uploader/sk.d.ts +133 -0
  337. package/web/locales/file-uploader/sr.d.ts +131 -0
  338. package/web/locales/file-uploader/sv.d.ts +129 -0
  339. package/web/locales/file-uploader/tr.d.ts +129 -0
  340. package/web/locales/file-uploader/uk.d.ts +133 -0
  341. package/web/locales/file-uploader/vi.d.ts +129 -0
  342. package/web/locales/file-uploader/zh-TW.d.ts +129 -0
  343. package/web/locales/file-uploader/zh.d.ts +129 -0
  344. package/web/plugins/cameraPlugin.d.ts +2 -0
  345. package/web/plugins/cloudImageEditorPlugin.d.ts +2 -0
  346. package/web/plugins/externalSourcesPlugin.d.ts +2 -0
  347. package/web/plugins/imageShrinkPlugin.d.ts +2 -0
  348. package/web/plugins/instagramPlugin.d.ts +2 -0
  349. package/web/plugins/unsplashPlugin.d.ts +16 -0
  350. package/web/plugins/urlSourcePlugin.d.ts +2 -0
  351. package/web/plugins-Bt7FXHKx.js +562 -0
  352. package/web/plugins-CaaolyMk.js +562 -0
  353. package/web/plugins-Cjgw5oWg.js +562 -0
  354. package/web/plugins-CzNtrVQB.js +562 -0
  355. package/web/plugins-DS0hIs2V.js +563 -0
  356. package/web/ref-BOnG19ns.js +4040 -0
  357. package/web/ref-BejJFG7m.js +4040 -0
  358. package/web/ref-DcRg7zo9.js +4040 -0
  359. package/web/ref-ZWPcLQB9.js +4040 -0
  360. package/web/solutions/adaptive-image/index.d.ts +2 -0
  361. package/web/solutions/cloud-image-editor/CloudImageEditor.d.ts +11 -0
  362. package/web/solutions/cloud-image-editor/index.d.ts +5 -0
  363. package/web/solutions/file-uploader/inline/FileUploaderInline.d.ts +20 -0
  364. package/web/solutions/file-uploader/inline/index.d.ts +1 -0
  365. package/web/solutions/file-uploader/minimal/FileUploaderMinimal.d.ts +23 -0
  366. package/web/solutions/file-uploader/minimal/index.d.ts +1 -0
  367. package/web/solutions/file-uploader/regular/FileUploaderRegular.d.ts +17 -0
  368. package/web/solutions/file-uploader/regular/index.d.ts +1 -0
  369. package/web/style-map-BmZdux7T.js +37 -0
  370. package/web/style-map-CZ6fSV6e.js +37 -0
  371. package/web/style-map-Dk7mLCrB.js +37 -0
  372. package/web/style-map-HkHnu9oA.js +37 -0
  373. package/web/style-map-tw1yUEaj.js +37 -0
  374. package/web/types/dom.d.ts +1 -0
  375. package/web/types/events.d.ts +4 -0
  376. package/web/types/exported.d.ts +492 -0
  377. package/web/types/index.d.ts +5 -0
  378. package/web/uc-basic.layered.min.css +6046 -0
  379. package/web/uc-basic.min.css +5487 -0
  380. package/web/uc-cloud-image-editor.layered.min.css +1884 -0
  381. package/web/uc-cloud-image-editor.min.css +1675 -0
  382. package/web/uc-cloud-image-editor.min.js +457 -0
  383. package/web/uc-file-uploader-inline.layered.min.css +4352 -0
  384. package/web/uc-file-uploader-inline.min.css +3836 -0
  385. package/web/uc-file-uploader-inline.min.js +1859 -0
  386. package/web/uc-file-uploader-minimal.layered.min.css +4352 -0
  387. package/web/uc-file-uploader-minimal.min.css +3836 -0
  388. package/web/uc-file-uploader-minimal.min.js +1859 -0
  389. package/web/uc-file-uploader-regular.layered.min.css +4352 -0
  390. package/web/uc-file-uploader-regular.min.css +3836 -0
  391. package/web/uc-file-uploader-regular.min.js +1859 -0
  392. package/web/uc-img.min.js +895 -0
  393. package/web/urlSourcePlugin-9lhcr02f.js +8 -0
  394. package/web/urlSourcePlugin-C-sLGhGb.js +8 -0
  395. package/web/urlSourcePlugin-DNXDpnRD.js +8 -0
  396. package/web/urlSourcePlugin-JnD0cnxb.js +8 -0
  397. package/web/urlSourcePlugin-hcMU2K6T.js +8 -0
  398. package/web/utils/UID.d.ts +5 -0
  399. package/web/utils/UID.test.d.ts +1 -0
  400. package/web/utils/UploadSource.d.ts +37 -0
  401. package/web/utils/WindowHeightTracker.d.ts +9 -0
  402. package/web/utils/abilities.d.ts +1 -0
  403. package/web/utils/applyStyles.d.ts +1 -0
  404. package/web/utils/browser-info.d.ts +12 -0
  405. package/web/utils/browser-info.test.d.ts +1 -0
  406. package/web/utils/cdn-utils.d.ts +53 -0
  407. package/web/utils/cdn-utils.test.d.ts +1 -0
  408. package/web/utils/comma-separated.d.ts +2 -0
  409. package/web/utils/debounce.d.ts +3 -0
  410. package/web/utils/delay.d.ts +1 -0
  411. package/web/utils/fileTypes.d.ts +11 -0
  412. package/web/utils/fileTypes.test.d.ts +1 -0
  413. package/web/utils/get-top-level-origin.d.ts +1 -0
  414. package/web/utils/get-top-level-origin.test.d.ts +1 -0
  415. package/web/utils/getLocaleDirection.d.ts +1 -0
  416. package/web/utils/getPluralForm.d.ts +1 -0
  417. package/web/utils/getPluralForm.test.d.ts +1 -0
  418. package/web/utils/isPromiseLike.d.ts +1 -0
  419. package/web/utils/isPromiseLike.test.d.ts +1 -0
  420. package/web/utils/isSecureTokenExpired.d.ts +8 -0
  421. package/web/utils/isSecureTokenExpired.test.d.ts +1 -0
  422. package/web/utils/memoize.d.ts +1 -0
  423. package/web/utils/memoize.test.d.ts +1 -0
  424. package/web/utils/mixinClass.d.ts +8 -0
  425. package/web/utils/parseCdnUrl.d.ts +11 -0
  426. package/web/utils/parseCdnUrl.test.d.ts +1 -0
  427. package/web/utils/parseShrink.d.ts +7 -0
  428. package/web/utils/parseShrink.test.d.ts +1 -0
  429. package/web/utils/preloadImage.d.ts +10 -0
  430. package/web/utils/prettyBytes.d.ts +11 -0
  431. package/web/utils/prettyBytes.test.d.ts +1 -0
  432. package/web/utils/resizeImage.d.ts +1 -0
  433. package/web/utils/stringToArray.d.ts +1 -0
  434. package/web/utils/stringToArray.test.d.ts +1 -0
  435. package/web/utils/template-utils.d.ts +16 -0
  436. package/web/utils/template-utils.test.d.ts +1 -0
  437. package/web/utils/throttle.d.ts +3 -0
  438. package/web/utils/toKebabCase.d.ts +2 -0
  439. package/web/utils/toKebabCase.test.d.ts +1 -0
  440. package/web/utils/transparentPixelSrc.d.ts +1 -0
  441. package/web/utils/uniqueArray.d.ts +1 -0
  442. package/web/utils/uniqueArray.test.d.ts +1 -0
  443. package/web/utils/userAgent.d.ts +2 -0
  444. package/web/utils/validators/collection/index.d.ts +2 -0
  445. package/web/utils/validators/collection/validateCollectionUploadError.d.ts +2 -0
  446. package/web/utils/validators/collection/validateMultiple.d.ts +2 -0
  447. package/web/utils/validators/file/index.d.ts +4 -0
  448. package/web/utils/validators/file/validateFileType.d.ts +2 -0
  449. package/web/utils/validators/file/validateIsImage.d.ts +2 -0
  450. package/web/utils/validators/file/validateMaxSizeLimit.d.ts +2 -0
  451. package/web/utils/validators/file/validateUploadError.d.ts +2 -0
  452. package/web/utils/warnOnce.d.ts +1 -0
  453. package/web/utils/wildcardRegexp.d.ts +1 -0
  454. package/web/utils/wildcardRegexp.test.d.ts +1 -0
  455. package/web/utils/withResolvers.d.ts +5 -0
  456. package/web/utils/withResolvers.test.d.ts +1 -0
  457. package/dist/CameraSource-px4BzEMI.js +0 -9
  458. package/dist/ExternalSource-CR5DG0Jv.js +0 -9
  459. package/dist/UrlSource-BxVL9Pve.js +0 -9
  460. package/dist/cameraPlugin-dGash48Q.js +0 -8
  461. package/dist/cloudImageEditorPlugin-2EU0Pm_j.js +0 -8
  462. package/dist/env-B1nfXy9i.js +0 -8
  463. package/dist/externalSourcesPlugin-DKQqk3AC.js +0 -8
  464. package/dist/imageShrinkPlugin-DAx8eRen.js +0 -8
  465. package/dist/instagramPlugin-k67tMAo3.js +0 -8
  466. package/dist/urlSourcePlugin-9xdB7Pvw.js +0 -8
package/dist/index-base.css ADDED
@@ -0,0 +1,2497 @@
1
+ /* TODO: if we're using disabled <a> somewhere, we should stop */
2
+
3
+ /* TODO: check if there's any necessity of disabled input */
4
+ /* TODO: if we're using disabled <a> somewhere, we should stop */
5
+ /* TODO: check if there's any necessity of disabled input */
6
+ /* TODO: if we're using disabled <a> somewhere, we should stop */
7
+ /* TODO: check if there's any necessity of disabled input */
8
+ /* TODO: if we're using disabled <a> somewhere, we should stop */
9
+ /* TODO: check if there's any necessity of disabled input */
10
+ @keyframes fake-progress-animation {
11
+ from {
12
+ transform: translateX(-100%);
13
+ }
14
+
15
+ to {
16
+ transform: translateX(calc(100 / var(--l-fake-progress-width) * 100 * 1%));
17
+ }
18
+ }
19
+ /* GRID */
20
+ /* File item in the grid */
21
+ /* ICONS: */
22
+ /* hack to make transparent :hover colors work in any conditions */:where([uc-wgt-common]) {
23
+ --cfg-init-activity: "start-from";
24
+ --cfg-done-activity: "";
25
+ }
26
+ :where([uc-wgt-common]) {
27
+ /* Font */
28
+ --uc-font-family: system-ui;
29
+ --uc-font-size: 14px;
30
+ --uc-line-height: normal;
31
+ --uc-simple-btn-font-family: system-ui;
32
+ --uc-simple-btn-font-size: 14px;
33
+
34
+ /* Sizes */
35
+ --uc-button-size: 32px;
36
+ --uc-preview-size: 32px;
37
+ --uc-padding: 10px;
38
+ --uc-radius: 8px;
39
+ --uc-transition: 0.2s ease;
40
+ --uc-dialog-width: 430px;
41
+ --uc-dialog-max-width: 920px;
42
+ --uc-dialog-max-height: 675px;
43
+ --uc-simple-btn-padding: 7px 14px;
44
+
45
+ --uc-grid-col: 3;
46
+ --uc-grid-preview-image-height: auto;
47
+ --uc-grid-gap: calc(var(--uc-padding) / 2);
48
+ --uc-grid-aspect-ratio: 1 / 1;
49
+
50
+ /* Default colors, in case of media query failure */
51
+ --uc-background: var(--uc-background-light);
52
+ --uc-foreground: var(--uc-foreground-light);
53
+ --uc-primary: var(--uc-primary-light);
54
+ --uc-primary-hover: var(--uc-primary-hover-light);
55
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
56
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
57
+ --uc-secondary: var(--uc-secondary-light);
58
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
59
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
60
+ --uc-muted: var(--uc-muted-light);
61
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
62
+ --uc-destructive: var(--uc-destructive-light);
63
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
64
+ --uc-border: var(--uc-border-light);
65
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
66
+ --uc-simple-btn: var(--uc-simple-btn-light);
67
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
68
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
69
+ }
70
+ @supports not (color: oklch(0% 0 0)) {
71
+ :where([uc-wgt-common]) {
72
+ /* Light colors RGB fallback */
73
+ --uc-primary-rgb-light: 23 75 215;
74
+ --uc-primary-light: rgb(var(--uc-primary-rgb-light));
75
+ --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);
76
+ --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);
77
+ --uc-background-light: rgb(255 255 255);
78
+ --uc-foreground-light: rgb(24 24 24);
79
+ --uc-primary-foreground-light: #fff;
80
+ --uc-secondary-light: rgb(24 24 24 / 5%);
81
+ --uc-secondary-hover-light: rgb(24 24 24 / 8%);
82
+ --uc-secondary-foreground-light: rgb(24 24 24);
83
+ --uc-muted-light: rgb(245 245 245);
84
+ --uc-muted-foreground-light: rgb(113 113 113);
85
+ --uc-destructive-light: rgb(232 19 20 / 5%);
86
+ --uc-destructive-foreground-light: rgb(232 19 20);
87
+ --uc-border-light: rgb(228 228 232);
88
+ --uc-dialog-shadow-light: 0px 6px 20px rgb(0 0 0 / 10%);
89
+ --uc-simple-btn-light: rgb(235 235 235);
90
+ --uc-simple-btn-hover-light: rgb(228 228 228);
91
+ --uc-simple-btn-foreground-light: rgb(24 24 24);
92
+
93
+ /* Dark colors RGB fallback */
94
+ --uc-primary-rgb-dark: 87 154 255;
95
+ --uc-primary-dark: rgb(var(--uc-primary-rgb-dark));
96
+ --uc-primary-hover-dark: rgb(var(--uc-primary-rgb-dark) / 90%);
97
+ --uc-primary-transparent-dark: rgb(var(--uc-primary-rgb-dark) / 7%);
98
+ --uc-background-dark: rgb(27 27 27);
99
+ --uc-foreground-dark: rgb(225 225 225);
100
+ --uc-primary-foreground-dark: rgb(0 0 0);
101
+ --uc-secondary-dark: rgb(225 225 225 / 7%);
102
+ --uc-secondary-hover-dark: rgb(225 225 225 / 10%);
103
+ --uc-secondary-foreground-dark: rgb(225 225 225);
104
+ --uc-muted-dark: rgb(36 36 36);
105
+ --uc-muted-foreground-dark: rgb(152 152 152);
106
+ --uc-destructive-dark: rgb(244 90 79 / 10%);
107
+ --uc-destructive-foreground-dark: rgb(244 90 79);
108
+ --uc-border-dark: rgb(61 61 61);
109
+ --uc-dialog-shadow-dark: 0px 6px 20px rgb(0 0 0 / 25%);
110
+ --uc-simple-btn-dark: rgb(36 36 36);
111
+ --uc-simple-btn-hover-dark: rgb(43 43 43);
112
+ --uc-simple-btn-foreground-dark: rgb(255 255 255);
113
+ }
114
+ }
115
+ @supports (color: oklch(0% 0 0)) {
116
+ :where([uc-wgt-common]) {
117
+ /* Light colors OKLCH */
118
+ --uc-primary-oklch-light: 47% 0.22 264; /* Quick customization: change this value to your brand color */
119
+ --uc-primary-light: oklch(var(--uc-primary-oklch-light));
120
+ --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
121
+ --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);
122
+ --uc-background-light: oklch(100% 0 0);
123
+ --uc-foreground-light: oklch(21% 0 0);
124
+ --uc-primary-foreground-light: oklch(100% 0 0);
125
+ --uc-secondary-light: oklch(21% 0 0 / 0.05);
126
+ --uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
127
+ --uc-secondary-foreground-light: oklch(21% 0 0);
128
+ --uc-muted-light: oklch(97% 0 0);
129
+ --uc-muted-foreground-light: oklch(40% 0 0);
130
+ --uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
131
+ --uc-destructive-foreground-light: oklch(59% 0.235 28.5);
132
+ --uc-border-light: oklch(92% 0 0);
133
+ --uc-dialog-shadow-light: 0px 6px 20px oklch(0% 0 0 / 0.1);
134
+ --uc-simple-btn-light: oklch(94% 0 0);
135
+ --uc-simple-btn-hover-light: oklch(92% 0 0);
136
+ --uc-simple-btn-foreground-light: oklch(20% 0 0);
137
+
138
+ /* Dark colors OKLCH */
139
+ --uc-primary-oklch-dark: 69% 0.1768 258.4; /* Quick customization: change this value to your brand color */
140
+ --uc-primary-dark: oklch(var(--uc-primary-oklch-dark));
141
+ --uc-primary-hover-dark: oklch(var(--uc-primary-oklch-dark) / 90%);
142
+ --uc-primary-transparent-dark: oklch(var(--uc-primary-oklch-dark) / 7%);
143
+ --uc-background-dark: oklch(22% 0 0);
144
+ --uc-foreground-dark: oklch(91% 0 0);
145
+ --uc-primary-foreground-dark: oklch(0% 0 0);
146
+ --uc-secondary-dark: oklch(91% 0 0 / 0.07);
147
+ --uc-secondary-hover-dark: oklch(91% 0 0 / 0.1);
148
+ --uc-secondary-foreground-dark: oklch(91% 0 0);
149
+ --uc-muted-dark: oklch(26% 0 0);
150
+ --uc-muted-foreground-dark: oklch(68% 0 0);
151
+ --uc-destructive-dark: oklch(67% 0.191 27.5 / 0.1);
152
+ --uc-destructive-foreground-dark: oklch(67% 0.191 27.5);
153
+ --uc-border-dark: oklch(36% 0 0);
154
+ --uc-dialog-shadow-dark: 0px 6px 20px oklch(0% 0 0 / 0.25);
155
+ --uc-simple-btn-dark: oklch(26% 0 0);
156
+ --uc-simple-btn-hover-dark: oklch(29% 0 0);
157
+ --uc-simple-btn-foreground-dark: oklch(100% 0 0);
158
+ }
159
+ }
160
+ @media only screen and (max-height: 600px) {
161
+ :where([uc-wgt-common]) {
162
+ --uc-dialog-max-height: 100%;
163
+ }
164
+ }
165
+ @media only screen and (max-width: 680px) {
166
+ :where([uc-wgt-common]) {
167
+ --uc-grid-col: 2;
168
+ }
169
+ }
170
+ @media only screen and (max-width: 430px) {
171
+ :where([uc-wgt-common]) {
172
+ --uc-dialog-max-width: 100vw;
173
+ --uc-dialog-max-height: var(--uploadcare-blocks-window-height);
174
+ --uc-grid-col: 1;
175
+ }
176
+ }
177
+ @media (prefers-color-scheme: light) {
178
+ :where([uc-wgt-common]) {
179
+ --uc-background: var(--uc-background-light);
180
+ --uc-foreground: var(--uc-foreground-light);
181
+ --uc-primary: var(--uc-primary-light);
182
+ --uc-primary-hover: var(--uc-primary-hover-light);
183
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
184
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
185
+ --uc-secondary: var(--uc-secondary-light);
186
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
187
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
188
+ --uc-muted: var(--uc-muted-light);
189
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
190
+ --uc-destructive: var(--uc-destructive-light);
191
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
192
+ --uc-border: var(--uc-border-light);
193
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
194
+ --uc-simple-btn: var(--uc-simple-btn-light);
195
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
196
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
197
+ }
198
+ }
199
+ @media (prefers-color-scheme: dark) {
200
+ :where([uc-wgt-common]) {
201
+ --uc-background: var(--uc-background-dark);
202
+ --uc-foreground: var(--uc-foreground-dark);
203
+ --uc-primary: var(--uc-primary-dark);
204
+ --uc-primary-hover: var(--uc-primary-hover-dark);
205
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
206
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
207
+ --uc-secondary: var(--uc-secondary-dark);
208
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
209
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
210
+ --uc-muted: var(--uc-muted-dark);
211
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
212
+ --uc-destructive: var(--uc-destructive-dark);
213
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
214
+ --uc-border: var(--uc-border-dark);
215
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
216
+ --uc-simple-btn: var(--uc-simple-btn-dark);
217
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
218
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
219
+ }
220
+ }
221
+ :where(.uc-light) {
222
+ --uc-background: var(--uc-background-light);
223
+ --uc-foreground: var(--uc-foreground-light);
224
+ --uc-primary: var(--uc-primary-light);
225
+ --uc-primary-hover: var(--uc-primary-hover-light);
226
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
227
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
228
+ --uc-secondary: var(--uc-secondary-light);
229
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
230
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
231
+ --uc-muted: var(--uc-muted-light);
232
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
233
+ --uc-destructive: var(--uc-destructive-light);
234
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
235
+ --uc-border: var(--uc-border-light);
236
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
237
+ --uc-simple-btn: var(--uc-simple-btn-light);
238
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
239
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
240
+ }
241
+ :where(.uc-dark) {
242
+ --uc-background: var(--uc-background-dark);
243
+ --uc-foreground: var(--uc-foreground-dark);
244
+ --uc-primary: var(--uc-primary-dark);
245
+ --uc-primary-hover: var(--uc-primary-hover-dark);
246
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
247
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
248
+ --uc-secondary: var(--uc-secondary-dark);
249
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
250
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
251
+ --uc-muted: var(--uc-muted-dark);
252
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
253
+ --uc-destructive: var(--uc-destructive-dark);
254
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
255
+ --uc-border: var(--uc-border-dark);
256
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
257
+ --uc-simple-btn: var(--uc-simple-btn-dark);
258
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
259
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
260
+ }
261
+ :where(.uc-purple) {
262
+ --uc-primary-oklch-light: 47% 0.22 300;
263
+ --uc-primary-oklch-dark: 69% 0.1768 300;
264
+ }
265
+ :where(.uc-red) {
266
+ --uc-primary-oklch-light: 47% 0.21 21;
267
+ --uc-primary-oklch-dark: 71% 0.1768 21;
268
+ }
269
+ :where(.uc-orange) {
270
+ --uc-primary-oklch-light: 47% 0.1376 51.88;
271
+ --uc-primary-oklch-dark: 69% 0.1768 51.88;
272
+ }
273
+ :where(.uc-green) {
274
+ --uc-primary-oklch-light: 45% 0.14 130;
275
+ --uc-primary-oklch-dark: 69% 0.1768 130;
276
+ }
277
+ :where(.uc-turquoise) {
278
+ --uc-primary-oklch-light: 45% 0.0854 174;
279
+ --uc-primary-oklch-dark: 69% 0.1768 174;
280
+ }
281
+ :where(.uc-gray) {
282
+ --uc-primary-oklch-light: 10% 0 0;
283
+ --uc-primary-oklch-dark: 97% 0 0;
284
+ }
285
+ :where(.uc-contrast) {
286
+ --uc-border-light: oklch(50% 0 0);
287
+ --uc-border-dark: oklch(50% 0 0);
288
+
289
+ --uc-muted-light: oklch(98% 0 0);
290
+ --uc-muted-dark: oklch(16% 0 0);
291
+
292
+ --uc-muted-foreground-light: oklch(20% 0 0);
293
+ --uc-muted-foreground-dark: oklch(80% 0 0);
294
+
295
+ --uc-background-light: oklch(100% 0 0);
296
+ --uc-foreground-light: oklch(0% 0 0);
297
+
298
+ --uc-background-dark: oklch(10% 0 0);
299
+ --uc-foreground-dark: oklch(100% 0 0);
300
+ }
301
+ :where([uc-wgt-common]) {
302
+ color: var(--uc-foreground);
303
+ font-size: var(--uc-font-size);
304
+ line-height: var(--uc-line-height);
305
+ font-family: var(--uc-font-family);
306
+ }
307
+ :where([uc-wgt-common]) * {
308
+ box-sizing: border-box;
309
+ }
310
+ :where([uc-wgt-common]) button {
311
+ display: flex;
312
+ align-items: center;
313
+ justify-content: center;
314
+ height: var(--uc-button-size);
315
+ padding-right: 14px;
316
+ padding-left: 14px;
317
+ font-size: 1em;
318
+ font-family: inherit;
319
+ white-space: nowrap;
320
+ border: none;
321
+ border-radius: var(--uc-radius);
322
+ cursor: pointer;
323
+ user-select: none;
324
+ transition: background-color var(--uc-transition);
325
+ }
326
+ :where([uc-wgt-common]) button:focus-visible {
327
+ outline-offset: 2px;
328
+ }
329
+ :where([uc-wgt-common]) button.uc-primary-btn {
330
+ color: var(--uc-primary-foreground);
331
+ background-color: var(--uc-primary);
332
+ }
333
+ :where([uc-wgt-common]) button.uc-primary-btn:hover {
334
+ background-color: var(--uc-primary-hover);
335
+ }
336
+ :where([uc-wgt-common]) button.uc-secondary-btn {
337
+ color: var(--uc-secondary-foreground);
338
+ background-color: var(--uc-secondary);
339
+ }
340
+ :where([uc-wgt-common]) button.uc-secondary-btn:hover {
341
+ background-color: var(--uc-secondary-hover);
342
+ }
343
+ :where([uc-wgt-common].uc-contrast) button.uc-secondary-btn {
344
+ border: 1px solid var(--uc-border);
345
+ }
346
+ :where([uc-wgt-common]) button.uc-mini-btn {
347
+ height: var(--uc-button-size);
348
+ padding: 0;
349
+ background-color: transparent;
350
+ color: var(--uc-secondary-foreground);
351
+ }
352
+ :where([uc-wgt-common]) button.uc-mini-btn:hover {
353
+ background-color: var(--uc-secondary);
354
+ }
355
+ :where([uc-wgt-common]) :is(button[disabled], button.uc-primary-btn[disabled], button.uc-secondary-btn[disabled]) {
356
+ opacity: 0.5;
357
+ pointer-events: none;
358
+ }
359
+ :where([uc-wgt-common]) a {
360
+ color: var(--uc-primary);
361
+ text-decoration: none;
362
+ }
363
+ /* TODO: if we're using disabled <a> somewhere, we should stop */
364
+ :where([uc-wgt-common]) a[disabled] {
365
+ pointer-events: none;
366
+ }
367
+ :where([uc-wgt-common]) input[type="text"] {
368
+ display: flex;
369
+ width: 100%;
370
+ height: var(--uc-button-size);
371
+ padding-right: 10px;
372
+ padding-left: 10px;
373
+ color: var(--uc-foreground);
374
+ font-size: 1em;
375
+ font-family: inherit;
376
+ background-color: var(--uc-background);
377
+ border: 1px solid var(--uc-border);
378
+ outline: 1px solid transparent;
379
+ border-radius: var(--uc-radius);
380
+ transition:
381
+ border-color var(--uc-transition),
382
+ outline-color var(--uc-transition);
383
+ }
384
+ :where([uc-wgt-common]) input[type="text"]::placeholder {
385
+ color: var(--uc-muted-foreground);
386
+ }
387
+ :where([uc-wgt-common]) input[type="text"]:focus {
388
+ outline-color: var(--uc-primary-hover);
389
+ border-color: var(--uc-primary-hover);
390
+ }
391
+ /* TODO: check if there's any necessity of disabled input */
392
+ :where([uc-wgt-common]) input[disabled] {
393
+ opacity: 0.6;
394
+ pointer-events: none;
395
+ }
396
+ :where([uc-wgt-common]) uc-select[disabled],
397
+ :where([uc-wgt-common]) select[disabled] {
398
+ opacity: 0.6;
399
+ pointer-events: none;
400
+ }
401
+ :where([uc-wgt-common]):not(#\#):not(#\#) [hidden] {
402
+ display: none;
403
+ }
404
+ :where([uc-wgt-common]):not(#\#):not(#\#) [activity]:not([active], .active) {
405
+ display: none;
406
+ }
407
+ :where([uc-wgt-common]):not(#\#):not(#\#) dialog:not([open]) [activity] {
408
+ display: none;
409
+ }
410
+ :where([uc-wgt-common]):not(#\#):not(#\#):not(#\#):not(#\#) uc-source-btn[type] {
411
+ all: unset;
412
+ }
413
+ @supports selector(dialog::backdrop) {
414
+ :where([uc-modal]):not(#\#) > dialog::backdrop {
415
+ /* backdrop don't inherit theme properties */
416
+ background-color: oklch(0% 0 0 / 0.1);
417
+ }
418
+ :where([uc-modal])[strokes]:not(#\#) > dialog::backdrop {
419
+ /* TODO: it's not working, fix it */
420
+ background-image: var(--modal-backdrop-background-image);
421
+ }
422
+ }
423
+ :where([uc-modal]):not(#\#) > dialog[open] {
424
+ transform: translateY(0px);
425
+ visibility: visible;
426
+ opacity: 1;
427
+ }
428
+ :where([uc-modal]):not(#\#) > dialog:not([open]) {
429
+ transform: translateY(20px);
430
+ visibility: hidden;
431
+ opacity: 0;
432
+ }
433
+ :where([uc-modal]):not(#\#) > dialog {
434
+ display: flex;
435
+ flex-direction: column;
436
+ width: min(var(--uc-dialog-width), 100%);
437
+ max-width: min(calc(100% - var(--uc-padding) * 2), var(--uc-dialog-max-width));
438
+ min-height: var(--uc-button-size);
439
+ max-height: min(calc(100% - var(--uc-padding) * 2), var(--uc-dialog-max-height));
440
+ margin: auto;
441
+ padding: 0;
442
+ overflow: hidden;
443
+ background-color: var(--uc-background);
444
+ border: 0;
445
+ border-radius: calc(var(--uc-radius) * 1.75);
446
+ box-shadow: var(--uc-dialog-shadow);
447
+ transition:
448
+ transform 0.4s ease,
449
+ opacity 0.4s ease;
450
+ }
451
+ :where(.uc-contrast):not(#\#) :where([uc-modal]) > dialog {
452
+ outline: 1px solid var(--uc-border);
453
+ }
454
+ uc-copyright:not(#\#) {
455
+ display: flex;
456
+ width: 100%;
457
+ justify-content: center;
458
+ }
459
+ uc-copyright:not(#\#) .uc-credits {
460
+ all: unset;
461
+ position: absolute;
462
+ bottom: 12px;
463
+ background-color: var(--uc-background);
464
+ padding: 2px 5px;
465
+ border-radius: 6px;
466
+ color: var(--uc-muted-foreground);
467
+ font-weight: normal;
468
+ font-size: 12px;
469
+ opacity: 0.9;
470
+ cursor: pointer;
471
+ transition:
472
+ opacity var(--uc-transition),
473
+ background-color var(--uc-transition);
474
+ }
475
+ uc-copyright:not(#\#) .uc-credits:focus-visible {
476
+ outline: 1px auto Highlight;
477
+ outline: 1px auto -webkit-focus-ring-color;
478
+ }
479
+ uc-copyright:not(#\#) .uc-credits:hover {
480
+ opacity: 1;
481
+ background-color: var(--uc-muted);
482
+ }
483
+ uc-progress-bar:not(#\#) {
484
+ --visible-opacity: 1;
485
+ --l-progress-value: 0;
486
+
487
+ position: absolute;
488
+ top: 0;
489
+ bottom: 0;
490
+ left: 0;
491
+ width: 100%;
492
+ height: 100%;
493
+ overflow: hidden;
494
+ pointer-events: none;
495
+ transition: opacity 0.3s;
496
+ opacity: 1;
497
+ }
498
+ uc-progress-bar.uc-progress-bar--hidden:not(#\#) {
499
+ opacity: 0;
500
+ }
501
+ uc-progress-bar:not(#\#) .uc-progress {
502
+ position: absolute;
503
+ width: calc(var(--l-progress-value) * 1%);
504
+ height: 100%;
505
+ background-color: var(--uc-primary);
506
+ transform: translateX(0);
507
+ opacity: var(--visible-opacity);
508
+ transition:
509
+ width 0.6s,
510
+ opacity 0.3s;
511
+ }
512
+ uc-progress-bar:not(#\#) .uc-progress--hidden {
513
+ opacity: 0;
514
+ transition: opacity 0.3s;
515
+ }
516
+ uc-progress-bar:not(#\#) .uc-fake-progress {
517
+ --l-fake-progress-width: 30;
518
+
519
+ position: absolute;
520
+ width: calc(var(--l-fake-progress-width) * 1%);
521
+ height: 100%;
522
+ background-color: var(--uc-primary);
523
+ animation: fake-progress-animation 1s ease-in-out infinite;
524
+ opacity: var(--visible-opacity);
525
+ transition: opacity 0.3s;
526
+ z-index: 1;
527
+ }
528
+ uc-progress-bar:not(#\#) .uc-fake-progress--hidden {
529
+ opacity: 0;
530
+ animation: none;
531
+ }
532
+ uc-progress-bar-common:not(#\#) {
533
+ position: fixed;
534
+ right: 0;
535
+ bottom: 0;
536
+ left: 0;
537
+ z-index: 10000;
538
+ display: block;
539
+ height: 10px;
540
+ background-color: var(--uc-background);
541
+ transition: opacity 0.3s;
542
+ }
543
+ uc-progress-bar-common:not([active]):not(#\#) {
544
+ opacity: 0;
545
+ pointer-events: none;
546
+ }
547
+ uc-source-btn:not(#\#) > button {
548
+ display: flex;
549
+ align-items: center;
550
+ margin-bottom: 2px;
551
+ padding: 2px var(--uc-padding);
552
+ color: var(--uc-foreground);
553
+ border-radius: var(--uc-radius);
554
+ cursor: pointer;
555
+ transition:
556
+ background-color var(--uc-transition),
557
+ color var(--uc-transition);
558
+ user-select: none;
559
+ width: 100%;
560
+ background-color: unset;
561
+ height: unset;
562
+ }
563
+ uc-source-btn:last-child:not(#\#) > button {
564
+ margin-bottom: 0;
565
+ }
566
+ uc-source-btn:not(#\#) > button:hover {
567
+ background-color: var(--uc-primary-transparent);
568
+ }
569
+ :where(.uc-contrast):not(#\#) uc-source-btn > button:hover {
570
+ background-color: var(--uc-secondary);
571
+ color: var(--uc-foreground);
572
+ }
573
+ uc-source-btn:not(#\#) uc-icon {
574
+ display: inline-flex;
575
+ flex-grow: 1;
576
+ justify-content: center;
577
+ min-width: var(--uc-button-size);
578
+ margin-right: var(--uc-padding);
579
+ opacity: 0.8;
580
+ }
581
+ :where(.uc-contrast):not(#\#) uc-source-btn uc-icon {
582
+ opacity: 1;
583
+ }
584
+ uc-source-btn:not(#\#) .uc-txt {
585
+ display: flex;
586
+ align-items: center;
587
+ box-sizing: border-box;
588
+ width: 100%;
589
+ height: var(--uc-button-size);
590
+ padding: 0;
591
+ white-space: nowrap;
592
+ border: none;
593
+ }
594
+ uc-thumb:not(#\#) {
595
+ width: 100%;
596
+ height: 100%;
597
+ }
598
+ .uc-thumb:not(#\#) {
599
+ position: relative;
600
+ overflow: hidden;
601
+ width: 100%;
602
+ height: 100%;
603
+ }
604
+ .uc-thumb__img:not(#\#) {
605
+ position: absolute;
606
+ inset: 0;
607
+ width: 100%;
608
+ height: 100%;
609
+ object-fit: cover;
610
+ display: block;
611
+ pointer-events: none;
612
+ }
613
+ uc-start-from:not(#\#) {
614
+ display: block;
615
+ overflow-y: auto;
616
+ }
617
+ uc-start-from:not(#\#) .uc-content {
618
+ display: grid;
619
+ grid-auto-flow: row;
620
+ gap: calc(var(--uc-padding) * 2);
621
+ width: 100%;
622
+ height: 100%;
623
+ padding: calc(var(--uc-padding) * 2);
624
+ background-color: var(--uc-background);
625
+ }
626
+ [uc-modal]:not(#\#) > dialog:has(uc-start-from[active]) {
627
+ width: var(--uc-dialog-width);
628
+ }
629
+ [uc-modal]:not(#\#) uc-start-from uc-drop-area {
630
+ border-radius: var(--uc-radius);
631
+ }
632
+ @media only screen and (max-width: 430px) {
633
+ [uc-modal]:not(#\#) uc-start-from uc-drop-area {
634
+ display: none;
635
+ }
636
+ }
637
+ uc-upload-list:not(#\#) {
638
+ position: relative;
639
+ display: flex;
640
+ flex-direction: column;
641
+ width: 100%;
642
+ height: max-content;
643
+ overflow: hidden;
644
+ background-color: var(--uc-background);
645
+ transition: opacity var(--uc-transition);
646
+ }
647
+ uc-upload-list:not(#\#) .uc-no-files {
648
+ height: 32px;
649
+ padding: 20px;
650
+ }
651
+ uc-upload-list:not(#\#) .uc-files {
652
+ display: block;
653
+ flex: 1;
654
+ min-height: 32px;
655
+ padding: 0 var(--uc-padding);
656
+ overflow: auto;
657
+ }
658
+ uc-upload-list:not(#\#) .uc-files-wrapper {
659
+ display: contents;
660
+ }
661
+ uc-upload-list:not(#\#) .uc-toolbar {
662
+ display: flex;
663
+ gap: 4px;
664
+ justify-content: space-between;
665
+ padding: var(--uc-padding);
666
+ background-color: var(--uc-background);
667
+ }
668
+ uc-upload-list:not(#\#) .uc-toolbar-spacer {
669
+ flex: 1;
670
+ }
671
+ uc-upload-list:not(#\#) uc-drop-area {
672
+ position: absolute;
673
+ top: 0;
674
+ left: 0;
675
+ width: calc(100% - var(--uc-padding) * 2);
676
+ height: calc(100% - var(--uc-padding) * 2);
677
+ margin: var(--uc-padding);
678
+ border-radius: var(--uc-radius);
679
+ }
680
+ uc-upload-list:not(#\#) uc-activity-header > .uc-header-text {
681
+ padding: 0 var(--uc-padding);
682
+ }
683
+ uc-upload-list:not(#\#) .uc-common-error {
684
+ border-radius: var(--uc-radius);
685
+ color: var(--uc-destructive-foreground);
686
+ background-color: var(--uc-destructive);
687
+ display: flex;
688
+ align-items: center;
689
+ justify-content: center;
690
+ padding: var(--uc-padding);
691
+ margin: 4px var(--uc-padding) 0 var(--uc-padding);
692
+ font-size: 0.925em;
693
+ }
694
+ uc-upload-list:not(#\#) .uc-add-more-btn uc-icon {
695
+ display: none;
696
+ }
697
+ /* GRID */
698
+ uc-upload-list[mode="grid"]:not(#\#) .uc-files {
699
+ display: flex;
700
+ flex-wrap: wrap;
701
+ gap: var(--uc-grid-gap);
702
+ }
703
+ uc-upload-list:not(#\#) .uc-files .uc-add-more-btn,
704
+ uc-upload-list[mode="grid"]:not(#\#) uc-file-item {
705
+ flex: 0 0 calc((100% - (var(--uc-grid-gap) * (var(--uc-grid-col) - 1))) / var(--uc-grid-col));
706
+ max-width: calc((100% - (var(--uc-grid-gap) * (var(--uc-grid-col) - 1))) / var(--uc-grid-col));
707
+ height: var(--uc-grid-preview-image-height);
708
+ aspect-ratio: var(--uc-grid-aspect-ratio);
709
+ }
710
+ uc-upload-list:not(#\#) .uc-files .uc-add-more-btn {
711
+ display: none;
712
+ }
713
+ uc-file-item:not(#\#) {
714
+ --uc-file-item-gap: 4px;
715
+ --uc-file-item-height: calc(var(--uc-preview-size) + var(--uc-padding) * 2 + var(--uc-file-item-gap));
716
+
717
+ display: block;
718
+ overflow: hidden;
719
+ min-height: var(--uc-file-item-height);
720
+ }
721
+ uc-file-item:last-of-type:not(#\#) {
722
+ --uc-file-item-gap: 0;
723
+ }
724
+ uc-file-item:not(#\#) > .uc-inner {
725
+ position: relative;
726
+ display: grid;
727
+ grid-template-columns: var(--uc-preview-size) 1fr max-content;
728
+ gap: 2px;
729
+ align-items: center;
730
+ margin-bottom: var(--uc-file-item-gap);
731
+ padding: var(--uc-padding);
732
+ overflow: hidden;
733
+ font-size: 0.925em;
734
+ background-color: var(--uc-muted);
735
+ border-radius: var(--uc-radius);
736
+ transition: background-color var(--uc-transition);
737
+ }
738
+ uc-file-item:not(#\#) > .uc-inner[data-focused] {
739
+ background-color: transparent;
740
+ }
741
+ uc-file-item:not(#\#) > .uc-inner[data-uploading] .uc-edit-btn {
742
+ display: none;
743
+ }
744
+ uc-file-item:not(#\#) > :where(.uc-inner[data-failed], .uc-inner[data-limit-overflow]) {
745
+ background-color: var(--uc-destructive);
746
+ }
747
+ uc-file-item:not(#\#) .uc-thumb {
748
+ position: relative;
749
+ display: inline-flex;
750
+ width: var(--uc-preview-size);
751
+ height: var(--uc-preview-size);
752
+ background-color: var(--uc-secondary);
753
+ background-position: center center;
754
+ background-repeat: no-repeat;
755
+ background-size: cover;
756
+ border-radius: var(--uc-radius);
757
+ }
758
+ uc-file-item:not(#\#) .uc-file-name-wrapper {
759
+ text-align: left;
760
+ display: flex;
761
+ flex-direction: column;
762
+ align-items: flex-start;
763
+ justify-content: center;
764
+ max-width: 100%;
765
+ padding-right: var(--uc-padding);
766
+ padding-left: var(--uc-padding);
767
+ overflow: hidden;
768
+ color: var(--uc-muted-foreground);
769
+ }
770
+ uc-file-item:not(#\#) .uc-file-name {
771
+ max-width: 100%;
772
+ overflow: hidden;
773
+ white-space: nowrap;
774
+ text-overflow: ellipsis;
775
+ }
776
+ uc-file-item:not(#\#) .uc-file-error {
777
+ display: none;
778
+ color: var(--uc-destructive-foreground);
779
+ font-size: 0.85em;
780
+ z-index: 2;
781
+ }
782
+ uc-file-item:not(#\#) button.uc-remove-btn,
783
+ uc-file-item:not(#\#) button.uc-edit-btn {
784
+ color: var(--uc-muted-foreground);
785
+ }
786
+ uc-file-item:not(#\#) button svg {
787
+ pointer-events: none;
788
+ }
789
+ uc-file-item:not(#\#) button.uc-upload-btn {
790
+ display: none;
791
+ }
792
+ uc-file-item:not(#\#) .uc-badge {
793
+ position: absolute;
794
+ bottom: 2px;
795
+ right: 2px;
796
+ width: 14px;
797
+ height: 14px;
798
+ color: var(--uc-background);
799
+ background-color: var(--uc-foreground);
800
+ border-radius: 50%;
801
+ transform: scale(0.3);
802
+ opacity: 0;
803
+ transition:
804
+ opacity var(--uc-transition),
805
+ transform var(--uc-transition);
806
+ display: flex;
807
+ justify-content: center;
808
+ align-items: center;
809
+ }
810
+ uc-file-item:not(#\#) > .uc-inner:where([data-failed], [data-limit-overflow], [data-finished]) .uc-badge {
811
+ transform: scale(1);
812
+ opacity: 1;
813
+ }
814
+ uc-file-item:not(#\#) > .uc-inner:where([data-failed], [data-limit-overflow]) .uc-badge {
815
+ background-color: var(--uc-destructive-foreground);
816
+ }
817
+ uc-file-item:not(#\#) > .uc-inner:where([data-failed], [data-limit-overflow]) .uc-file-error {
818
+ display: block;
819
+ }
820
+ uc-file-item:not(#\#) .uc-badge uc-icon,
821
+ uc-file-item:not(#\#) .uc-badge uc-icon svg {
822
+ width: 100%;
823
+ height: 100%;
824
+ }
825
+ uc-file-item:not(#\#) .uc-progress-bar {
826
+ --visible-opacity: 0.7;
827
+
828
+ top: calc(100% - 2px);
829
+ height: 2px;
830
+ }
831
+ :where(.uc-contrast):not(#\#) uc-file-item .uc-progress-bar {
832
+ --visible-opacity: 1;
833
+ }
834
+ uc-file-item:not(#\#) .uc-file-actions {
835
+ display: flex;
836
+ gap: 2px;
837
+ align-items: center;
838
+ justify-content: center;
839
+ }
840
+ /* File item in the grid */
841
+ uc-file-item[mode="grid"]:not(#\#) {
842
+ overflow: visible;
843
+ min-height: initial;
844
+ }
845
+ uc-file-item[mode="grid"]:not(#\#) .uc-inner {
846
+ height: 100%;
847
+ grid-template-columns: 1fr;
848
+ grid-template-rows: 1fr max-content;
849
+ padding: 0;
850
+ background-color: transparent;
851
+ margin-bottom: 0;
852
+ border-radius: 0;
853
+ }
854
+ uc-file-item[mode="grid"]:not(#\#) .uc-inner[data-failed] .uc-badge {
855
+ display: none;
856
+ }
857
+ uc-file-item[mode="grid"]:not(#\#) .uc-thumb {
858
+ width: 100%;
859
+ height: 100%;
860
+ }
861
+ uc-file-item[mode="grid"]:not(#\#) .uc-badge {
862
+ right: var(--uc-padding);
863
+ bottom: var(--uc-padding);
864
+ }
865
+ uc-file-item[mode="grid"]:not(#\#) .uc-file-name-wrapper {
866
+ padding: 0;
867
+ }
868
+ uc-file-item[mode="grid"]:not(#\#) .uc-file-name:not([hidden]) + .uc-file-error {
869
+ bottom: calc(var(--uc-padding) + var(--uc-font-size));
870
+ }
871
+ uc-file-item[mode="grid"]:not(#\#) .uc-file-error {
872
+ position: absolute;
873
+ background-color: var(--uc-destructive-foreground);
874
+ border-radius: var(--uc-radius);
875
+ color: var(--uc-background);
876
+ bottom: var(--uc-padding);
877
+ left: var(--uc-padding);
878
+ right: var(--uc-padding);
879
+ padding: calc(var(--uc-padding) / 2) var(--uc-padding);
880
+ }
881
+ uc-file-item[mode="grid"]:not(#\#) .uc-file-hint {
882
+ position: absolute;
883
+ background-color: var(--uc-background);
884
+ border-radius: var(--uc-radius);
885
+ color: var(--uc-foreground);
886
+ bottom: calc(var(--uc-padding) * 2);
887
+ left: var(--uc-padding);
888
+ right: var(--uc-padding);
889
+ padding: calc(var(--uc-padding) / 2) var(--uc-padding);
890
+ }
891
+ uc-file-item[mode="grid"]:not(#\#) .uc-file-actions {
892
+ position: absolute;
893
+ top: var(--uc-padding);
894
+ right: var(--uc-padding);
895
+ }
896
+ uc-file-item[mode="grid"]:not(#\#) button {
897
+ background-color: var(--uc-background);
898
+ }
899
+ uc-file-item[mode="grid"]:not(#\#) button:hover {
900
+ background-color: var(--uc-muted);
901
+ }
902
+ uc-file-item[mode="grid"]:not(#\#) .uc-progress-bar {
903
+ width: initial;
904
+ height: 4px;
905
+ top: initial;
906
+ bottom: var(--uc-padding);
907
+ left: var(--uc-padding);
908
+ right: var(--uc-padding);
909
+ border-radius: var(--uc-radius);
910
+ z-index: 1;
911
+ transition:
912
+ background-color 0.3s,
913
+ opacity 0.3s;
914
+ background-color: var(--uc-background);
915
+ }
916
+ uc-file-item[mode="grid"]:not(#\#) .uc-progress-bar :is(.uc-fake-progress, .uc-progress) {
917
+ background-color: var(--uc-primary);
918
+ }
919
+ uc-file-item[mode="grid"]:not(#\#) .uc-progress-bar[hasfilename] {
920
+ bottom: calc(var(--uc-padding) + var(--uc-font-size));
921
+ }
922
+ :where([uc-drop-area]):not(#\#) {
923
+ padding: 2px;
924
+ overflow: hidden;
925
+ border: 1px dashed var(--uc-border);
926
+ border-radius: calc(var(--uc-radius) * 1.75);
927
+ transition:
928
+ border var(--uc-transition),
929
+ border-radius var(--uc-transition);
930
+ }
931
+ :where([uc-drop-area]):not(#\#),
932
+ :where([uc-drop-area]):not(#\#) .uc-content-wrapper {
933
+ display: flex;
934
+ align-items: center;
935
+ justify-content: center;
936
+ width: 100%;
937
+ height: 100%;
938
+ }
939
+ :where([uc-drop-area]):not(#\#) .uc-text {
940
+ position: relative;
941
+ margin: var(--uc-padding);
942
+ color: var(--uc-muted-foreground);
943
+ transition: color var(--uc-transition);
944
+ }
945
+ :where([uc-drop-area])[ghost][drag-state="inactive"]:not(#\#) {
946
+ display: none;
947
+ }
948
+ :where([uc-drop-area])[ghost]:not([fullscreen]):is([drag-state="active"], [drag-state="near"], [drag-state="over"]):not(#\#) {
949
+ background: var(--uc-background);
950
+ }
951
+ :where([uc-drop-area]):is([drag-state="active"], [drag-state="near"], [drag-state="over"], :hover):not(#\#) {
952
+ background: var(--uc-primary-transparent);
953
+ border-color: var(--uc-primary-transparent);
954
+ }
955
+ :where(.uc-contrast):not(#\#)
956
+ :where([uc-drop-area]):is([drag-state="active"], [drag-state="near"], [drag-state="over"], :hover) {
957
+ color: var(--uc-foreground);
958
+ background: transparent;
959
+ border-color: var(--uc-foreground);
960
+ border-width: 2px;
961
+ border-style: solid;
962
+ }
963
+ :where([uc-drop-area]):is([drag-state="active"], [drag-state="near"]):not(#\#) {
964
+ opacity: 1;
965
+ }
966
+ :where([uc-drop-area])[drag-state="over"]:not(#\#) {
967
+ border-color: var(--uc-primary);
968
+ opacity: 1;
969
+ }
970
+ :where([uc-drop-area])[with-icon]:not(#\#) {
971
+ min-height: 180px;
972
+ }
973
+ :where([uc-drop-area])[with-icon]:not(#\#) .uc-content-wrapper {
974
+ display: flex;
975
+ flex-direction: column;
976
+ }
977
+ :where([uc-drop-area])[with-icon]:not(#\#) .uc-text {
978
+ color: var(--uc-foreground);
979
+ font-weight: 500;
980
+ font-size: 1.1em;
981
+ }
982
+ :where([uc-drop-area])[with-icon]:not(#\#) .uc-icon-container {
983
+ position: relative;
984
+ width: 64px;
985
+ height: 64px;
986
+ margin: var(--uc-padding);
987
+ overflow: hidden;
988
+ color: var(--uc-foreground);
989
+ background-color: var(--uc-muted);
990
+ border-radius: 50%;
991
+ transition:
992
+ color var(--uc-transition),
993
+ background-color var(--uc-transition);
994
+ }
995
+ :where([uc-drop-area])[with-icon]:not(#\#) uc-icon {
996
+ position: absolute;
997
+ width: 32px;
998
+ height: 32px;
999
+ top: calc(50% - 16px);
1000
+ left: calc(50% - 16px);
1001
+ transition: transform var(--uc-transition);
1002
+ }
1003
+ :where([uc-drop-area])[with-icon]:not(#\#) uc-icon:last-child {
1004
+ transform: translateY(48px);
1005
+ }
1006
+ :where(.uc-contrast):not(#\#) :where([uc-drop-area])[with-icon]:hover .uc-icon-container,
1007
+ :where(.uc-contrast):not(#\#) :where([uc-drop-area])[with-icon]:hover .uc-text {
1008
+ color: var(--uc-foreground);
1009
+ }
1010
+ :where([uc-drop-area])[with-icon]:hover:not(#\#) .uc-icon-container {
1011
+ background-color: var(--uc-primary-transparent);
1012
+ }
1013
+ :where(.uc-contrast):not(#\#) :where([uc-drop-area])[with-icon]:hover .uc-icon-container {
1014
+ background-color: var(--uc-muted);
1015
+ }
1016
+ :where([uc-drop-area])[with-icon]:not(#\#)
1017
+ > .uc-content-wrapper:is([drag-state="active"], [drag-state="near"], [drag-state="over"])
1018
+ .uc-icon-container {
1019
+ color: var(--uc-primary-foreground);
1020
+ background-color: var(--uc-primary);
1021
+ }
1022
+ :where([uc-drop-area])[with-icon]:not(#\#)
1023
+ > .uc-content-wrapper:is([drag-state="active"], [drag-state="near"], [drag-state="over"])
1024
+ .uc-text {
1025
+ color: var(--uc-foreground);
1026
+ }
1027
+ :where(.uc-contrast):not(#\#)
1028
+ :where([uc-drop-area])[with-icon]
1029
+ > .uc-content-wrapper:is([drag-state="active"], [drag-state="near"], [drag-state="over"])
1030
+ .uc-text {
1031
+ color: var(--uc-foreground);
1032
+ }
1033
+ :where([uc-drop-area])[with-icon]:not(#\#)
1034
+ > .uc-content-wrapper:is([drag-state="active"], [drag-state="near"], [drag-state="over"])
1035
+ uc-icon:first-child {
1036
+ transform: translateY(-48px);
1037
+ }
1038
+ :where([uc-drop-area])[with-icon]:not(#\#)
1039
+ > .uc-content-wrapper:is([drag-state="active"], [drag-state="near"], [drag-state="over"])
1040
+ uc-icon:last-child {
1041
+ transform: translateY(0);
1042
+ }
1043
+ :where([uc-drop-area])[with-icon]:not(#\#) > .uc-content-wrapper[drag-state="near"] uc-icon:last-child {
1044
+ transform: scale(1.3);
1045
+ }
1046
+ :where([uc-drop-area])[with-icon]:not(#\#) > .uc-content-wrapper[drag-state="over"] uc-icon:last-child {
1047
+ transform: scale(1.5);
1048
+ }
1049
+ :where([uc-drop-area])[fullscreen]:not(#\#) {
1050
+ position: fixed;
1051
+ top: 0;
1052
+ right: 0;
1053
+ bottom: 0;
1054
+ left: 0;
1055
+ z-index: 2147483647;
1056
+ display: flex;
1057
+ align-items: center;
1058
+ justify-content: center;
1059
+ width: calc(100vw - var(--uc-padding) * 2);
1060
+ height: calc(100vh - var(--uc-padding) * 2);
1061
+ margin: var(--uc-padding);
1062
+ }
1063
+ :where([uc-drop-area])[fullscreen]:not(#\#) .uc-content-wrapper {
1064
+ width: 100%;
1065
+ max-width: calc(var(--uc-dialog-width) * 0.8);
1066
+ height: 180px;
1067
+ color: var(--uc-foreground);
1068
+ background-color: var(--uc-background);
1069
+ border-radius: calc(var(--uc-radius) * 1.75);
1070
+ box-shadow: var(--uc-dialog-shadow);
1071
+ transition:
1072
+ color var(--uc-transition),
1073
+ background-color var(--uc-transition),
1074
+ box-shadow var(--uc-transition),
1075
+ border-radius var(--uc-transition),
1076
+ transform var(--uc-transition);
1077
+ }
1078
+ :where([uc-drop-area])[with-icon][fullscreen][drag-state="active"]:not(#\#) > .uc-content-wrapper,
1079
+ :where([uc-drop-area])[with-icon][fullscreen][drag-state="near"]:not(#\#) > .uc-content-wrapper {
1080
+ transform: translateY(10px);
1081
+ opacity: 0;
1082
+ }
1083
+ :where([uc-drop-area])[with-icon][fullscreen][drag-state="over"]:not(#\#) > .uc-content-wrapper {
1084
+ transform: translateY(0px);
1085
+ opacity: 1;
1086
+ }
1087
+ :is(:where([uc-drop-area])[with-icon][fullscreen]):not(#\#) > .uc-content-wrapper uc-icon:first-child {
1088
+ transform: translateY(-48px);
1089
+ }
1090
+ :where([uc-drop-area])[clickable]:not(#\#) {
1091
+ cursor: pointer;
1092
+ }
1093
+ :where([uc-simple-btn]):not(#\#) {
1094
+ position: relative;
1095
+ display: inline-flex;
1096
+ }
1097
+ :where([uc-simple-btn]):not(#\#) button {
1098
+ height: auto;
1099
+ gap: 0.5em;
1100
+ padding: var(--uc-simple-btn-padding);
1101
+ background-color: var(--uc-simple-btn);
1102
+ color: var(--uc-simple-btn-foreground);
1103
+ font-size: var(--uc-simple-btn-font-size);
1104
+ font-family: var(--uc-simple-btn-font-family);
1105
+ }
1106
+ :where([uc-simple-btn]):not(#\#) button uc-icon {
1107
+ width: auto;
1108
+ height: auto;
1109
+ }
1110
+ :where([uc-simple-btn]):not(#\#) button uc-icon svg {
1111
+ width: 0.9em;
1112
+ height: 0.9em;
1113
+ }
1114
+ :where([uc-simple-btn]):not(#\#) button:hover {
1115
+ background-color: var(--uc-simple-btn-hover);
1116
+ }
1117
+ :where([uc-simple-btn]):not(#\#) > uc-drop-area {
1118
+ display: contents;
1119
+ }
1120
+ :where([uc-simple-btn]):not(#\#) .uc-visual-drop-area {
1121
+ position: absolute;
1122
+ top: 0px;
1123
+ left: 0px;
1124
+ display: flex;
1125
+ align-items: center;
1126
+ justify-content: center;
1127
+ width: 100%;
1128
+ height: 100%;
1129
+ padding: var(--uc-simple-btn-padding);
1130
+ background-color: transparent;
1131
+ color: transparent;
1132
+ font-size: var(--uc-simple-btn-font-size);
1133
+ border: 1px dashed var(--uc-simple-btn-foreground);
1134
+ border-radius: inherit;
1135
+ opacity: 0;
1136
+ transition: opacity var(--uc-transition);
1137
+ }
1138
+ :where([uc-simple-btn]):not(#\#) > uc-drop-area[drag-state="active"] .uc-visual-drop-area {
1139
+ opacity: 1;
1140
+ }
1141
+ :where([uc-simple-btn]):not(#\#) > uc-drop-area[drag-state="inactive"] .uc-visual-drop-area {
1142
+ opacity: 0;
1143
+ }
1144
+ :where([uc-simple-btn]):not(#\#) > uc-drop-area[drag-state="near"] .uc-visual-drop-area {
1145
+ opacity: 1;
1146
+ }
1147
+ :where([uc-simple-btn]):not(#\#) > uc-drop-area[drag-state="over"] .uc-visual-drop-area {
1148
+ opacity: 1;
1149
+ }
1150
+ uc-plugin-activity-host:not(#\#) {
1151
+ position: relative;
1152
+ display: flex;
1153
+ width: 100%;
1154
+ height: 100%;
1155
+ overflow: hidden;
1156
+ }
1157
+ :where([uc-wgt-common]) {
1158
+ --cfg-init-activity: "start-from";
1159
+ --cfg-done-activity: "";
1160
+ }
1161
+ :where([uc-wgt-common]) {
1162
+ /* Font */
1163
+ --uc-font-family: system-ui;
1164
+ --uc-font-size: 14px;
1165
+ --uc-line-height: normal;
1166
+ --uc-simple-btn-font-family: system-ui;
1167
+ --uc-simple-btn-font-size: 14px;
1168
+
1169
+ /* Sizes */
1170
+ --uc-button-size: 32px;
1171
+ --uc-preview-size: 32px;
1172
+ --uc-padding: 10px;
1173
+ --uc-radius: 8px;
1174
+ --uc-transition: 0.2s ease;
1175
+ --uc-dialog-width: 430px;
1176
+ --uc-dialog-max-width: 920px;
1177
+ --uc-dialog-max-height: 675px;
1178
+ --uc-simple-btn-padding: 7px 14px;
1179
+
1180
+ --uc-grid-col: 3;
1181
+ --uc-grid-preview-image-height: auto;
1182
+ --uc-grid-gap: calc(var(--uc-padding) / 2);
1183
+ --uc-grid-aspect-ratio: 1 / 1;
1184
+
1185
+ /* Default colors, in case of media query failure */
1186
+ --uc-background: var(--uc-background-light);
1187
+ --uc-foreground: var(--uc-foreground-light);
1188
+ --uc-primary: var(--uc-primary-light);
1189
+ --uc-primary-hover: var(--uc-primary-hover-light);
1190
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
1191
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
1192
+ --uc-secondary: var(--uc-secondary-light);
1193
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
1194
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
1195
+ --uc-muted: var(--uc-muted-light);
1196
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
1197
+ --uc-destructive: var(--uc-destructive-light);
1198
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
1199
+ --uc-border: var(--uc-border-light);
1200
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
1201
+ --uc-simple-btn: var(--uc-simple-btn-light);
1202
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
1203
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
1204
+ }
1205
+ @supports not (color: oklch(0% 0 0)) {
1206
+ :where([uc-wgt-common]) {
1207
+ /* Light colors RGB fallback */
1208
+ --uc-primary-rgb-light: 23 75 215;
1209
+ --uc-primary-light: rgb(var(--uc-primary-rgb-light));
1210
+ --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);
1211
+ --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);
1212
+ --uc-background-light: rgb(255 255 255);
1213
+ --uc-foreground-light: rgb(24 24 24);
1214
+ --uc-primary-foreground-light: #fff;
1215
+ --uc-secondary-light: rgb(24 24 24 / 5%);
1216
+ --uc-secondary-hover-light: rgb(24 24 24 / 8%);
1217
+ --uc-secondary-foreground-light: rgb(24 24 24);
1218
+ --uc-muted-light: rgb(245 245 245);
1219
+ --uc-muted-foreground-light: rgb(113 113 113);
1220
+ --uc-destructive-light: rgb(232 19 20 / 5%);
1221
+ --uc-destructive-foreground-light: rgb(232 19 20);
1222
+ --uc-border-light: rgb(228 228 232);
1223
+ --uc-dialog-shadow-light: 0px 6px 20px rgb(0 0 0 / 10%);
1224
+ --uc-simple-btn-light: rgb(235 235 235);
1225
+ --uc-simple-btn-hover-light: rgb(228 228 228);
1226
+ --uc-simple-btn-foreground-light: rgb(24 24 24);
1227
+
1228
+ /* Dark colors RGB fallback */
1229
+ --uc-primary-rgb-dark: 87 154 255;
1230
+ --uc-primary-dark: rgb(var(--uc-primary-rgb-dark));
1231
+ --uc-primary-hover-dark: rgb(var(--uc-primary-rgb-dark) / 90%);
1232
+ --uc-primary-transparent-dark: rgb(var(--uc-primary-rgb-dark) / 7%);
1233
+ --uc-background-dark: rgb(27 27 27);
1234
+ --uc-foreground-dark: rgb(225 225 225);
1235
+ --uc-primary-foreground-dark: rgb(0 0 0);
1236
+ --uc-secondary-dark: rgb(225 225 225 / 7%);
1237
+ --uc-secondary-hover-dark: rgb(225 225 225 / 10%);
1238
+ --uc-secondary-foreground-dark: rgb(225 225 225);
1239
+ --uc-muted-dark: rgb(36 36 36);
1240
+ --uc-muted-foreground-dark: rgb(152 152 152);
1241
+ --uc-destructive-dark: rgb(244 90 79 / 10%);
1242
+ --uc-destructive-foreground-dark: rgb(244 90 79);
1243
+ --uc-border-dark: rgb(61 61 61);
1244
+ --uc-dialog-shadow-dark: 0px 6px 20px rgb(0 0 0 / 25%);
1245
+ --uc-simple-btn-dark: rgb(36 36 36);
1246
+ --uc-simple-btn-hover-dark: rgb(43 43 43);
1247
+ --uc-simple-btn-foreground-dark: rgb(255 255 255);
1248
+ }
1249
+ }
1250
+ @supports (color: oklch(0% 0 0)) {
1251
+ :where([uc-wgt-common]) {
1252
+ /* Light colors OKLCH */
1253
+ --uc-primary-oklch-light: 47% 0.22 264; /* Quick customization: change this value to your brand color */
1254
+ --uc-primary-light: oklch(var(--uc-primary-oklch-light));
1255
+ --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
1256
+ --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);
1257
+ --uc-background-light: oklch(100% 0 0);
1258
+ --uc-foreground-light: oklch(21% 0 0);
1259
+ --uc-primary-foreground-light: oklch(100% 0 0);
1260
+ --uc-secondary-light: oklch(21% 0 0 / 0.05);
1261
+ --uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
1262
+ --uc-secondary-foreground-light: oklch(21% 0 0);
1263
+ --uc-muted-light: oklch(97% 0 0);
1264
+ --uc-muted-foreground-light: oklch(40% 0 0);
1265
+ --uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
1266
+ --uc-destructive-foreground-light: oklch(59% 0.235 28.5);
1267
+ --uc-border-light: oklch(92% 0 0);
1268
+ --uc-dialog-shadow-light: 0px 6px 20px oklch(0% 0 0 / 0.1);
1269
+ --uc-simple-btn-light: oklch(94% 0 0);
1270
+ --uc-simple-btn-hover-light: oklch(92% 0 0);
1271
+ --uc-simple-btn-foreground-light: oklch(20% 0 0);
1272
+
1273
+ /* Dark colors OKLCH */
1274
+ --uc-primary-oklch-dark: 69% 0.1768 258.4; /* Quick customization: change this value to your brand color */
1275
+ --uc-primary-dark: oklch(var(--uc-primary-oklch-dark));
1276
+ --uc-primary-hover-dark: oklch(var(--uc-primary-oklch-dark) / 90%);
1277
+ --uc-primary-transparent-dark: oklch(var(--uc-primary-oklch-dark) / 7%);
1278
+ --uc-background-dark: oklch(22% 0 0);
1279
+ --uc-foreground-dark: oklch(91% 0 0);
1280
+ --uc-primary-foreground-dark: oklch(0% 0 0);
1281
+ --uc-secondary-dark: oklch(91% 0 0 / 0.07);
1282
+ --uc-secondary-hover-dark: oklch(91% 0 0 / 0.1);
1283
+ --uc-secondary-foreground-dark: oklch(91% 0 0);
1284
+ --uc-muted-dark: oklch(26% 0 0);
1285
+ --uc-muted-foreground-dark: oklch(68% 0 0);
1286
+ --uc-destructive-dark: oklch(67% 0.191 27.5 / 0.1);
1287
+ --uc-destructive-foreground-dark: oklch(67% 0.191 27.5);
1288
+ --uc-border-dark: oklch(36% 0 0);
1289
+ --uc-dialog-shadow-dark: 0px 6px 20px oklch(0% 0 0 / 0.25);
1290
+ --uc-simple-btn-dark: oklch(26% 0 0);
1291
+ --uc-simple-btn-hover-dark: oklch(29% 0 0);
1292
+ --uc-simple-btn-foreground-dark: oklch(100% 0 0);
1293
+ }
1294
+ }
1295
+ @media only screen and (max-height: 600px) {
1296
+ :where([uc-wgt-common]) {
1297
+ --uc-dialog-max-height: 100%;
1298
+ }
1299
+ }
1300
+ @media only screen and (max-width: 680px) {
1301
+ :where([uc-wgt-common]) {
1302
+ --uc-grid-col: 2;
1303
+ }
1304
+ }
1305
+ @media only screen and (max-width: 430px) {
1306
+ :where([uc-wgt-common]) {
1307
+ --uc-dialog-max-width: 100vw;
1308
+ --uc-dialog-max-height: var(--uploadcare-blocks-window-height);
1309
+ --uc-grid-col: 1;
1310
+ }
1311
+ }
1312
+ @media (prefers-color-scheme: light) {
1313
+ :where([uc-wgt-common]) {
1314
+ --uc-background: var(--uc-background-light);
1315
+ --uc-foreground: var(--uc-foreground-light);
1316
+ --uc-primary: var(--uc-primary-light);
1317
+ --uc-primary-hover: var(--uc-primary-hover-light);
1318
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
1319
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
1320
+ --uc-secondary: var(--uc-secondary-light);
1321
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
1322
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
1323
+ --uc-muted: var(--uc-muted-light);
1324
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
1325
+ --uc-destructive: var(--uc-destructive-light);
1326
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
1327
+ --uc-border: var(--uc-border-light);
1328
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
1329
+ --uc-simple-btn: var(--uc-simple-btn-light);
1330
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
1331
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
1332
+ }
1333
+ }
1334
+ @media (prefers-color-scheme: dark) {
1335
+ :where([uc-wgt-common]) {
1336
+ --uc-background: var(--uc-background-dark);
1337
+ --uc-foreground: var(--uc-foreground-dark);
1338
+ --uc-primary: var(--uc-primary-dark);
1339
+ --uc-primary-hover: var(--uc-primary-hover-dark);
1340
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
1341
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
1342
+ --uc-secondary: var(--uc-secondary-dark);
1343
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
1344
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
1345
+ --uc-muted: var(--uc-muted-dark);
1346
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
1347
+ --uc-destructive: var(--uc-destructive-dark);
1348
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
1349
+ --uc-border: var(--uc-border-dark);
1350
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
1351
+ --uc-simple-btn: var(--uc-simple-btn-dark);
1352
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
1353
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
1354
+ }
1355
+ }
1356
+ :where(.uc-light) {
1357
+ --uc-background: var(--uc-background-light);
1358
+ --uc-foreground: var(--uc-foreground-light);
1359
+ --uc-primary: var(--uc-primary-light);
1360
+ --uc-primary-hover: var(--uc-primary-hover-light);
1361
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
1362
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
1363
+ --uc-secondary: var(--uc-secondary-light);
1364
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
1365
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
1366
+ --uc-muted: var(--uc-muted-light);
1367
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
1368
+ --uc-destructive: var(--uc-destructive-light);
1369
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
1370
+ --uc-border: var(--uc-border-light);
1371
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
1372
+ --uc-simple-btn: var(--uc-simple-btn-light);
1373
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
1374
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
1375
+ }
1376
+ :where(.uc-dark) {
1377
+ --uc-background: var(--uc-background-dark);
1378
+ --uc-foreground: var(--uc-foreground-dark);
1379
+ --uc-primary: var(--uc-primary-dark);
1380
+ --uc-primary-hover: var(--uc-primary-hover-dark);
1381
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
1382
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
1383
+ --uc-secondary: var(--uc-secondary-dark);
1384
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
1385
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
1386
+ --uc-muted: var(--uc-muted-dark);
1387
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
1388
+ --uc-destructive: var(--uc-destructive-dark);
1389
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
1390
+ --uc-border: var(--uc-border-dark);
1391
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
1392
+ --uc-simple-btn: var(--uc-simple-btn-dark);
1393
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
1394
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
1395
+ }
1396
+ :where(.uc-purple) {
1397
+ --uc-primary-oklch-light: 47% 0.22 300;
1398
+ --uc-primary-oklch-dark: 69% 0.1768 300;
1399
+ }
1400
+ :where(.uc-red) {
1401
+ --uc-primary-oklch-light: 47% 0.21 21;
1402
+ --uc-primary-oklch-dark: 71% 0.1768 21;
1403
+ }
1404
+ :where(.uc-orange) {
1405
+ --uc-primary-oklch-light: 47% 0.1376 51.88;
1406
+ --uc-primary-oklch-dark: 69% 0.1768 51.88;
1407
+ }
1408
+ :where(.uc-green) {
1409
+ --uc-primary-oklch-light: 45% 0.14 130;
1410
+ --uc-primary-oklch-dark: 69% 0.1768 130;
1411
+ }
1412
+ :where(.uc-turquoise) {
1413
+ --uc-primary-oklch-light: 45% 0.0854 174;
1414
+ --uc-primary-oklch-dark: 69% 0.1768 174;
1415
+ }
1416
+ :where(.uc-gray) {
1417
+ --uc-primary-oklch-light: 10% 0 0;
1418
+ --uc-primary-oklch-dark: 97% 0 0;
1419
+ }
1420
+ :where(.uc-contrast) {
1421
+ --uc-border-light: oklch(50% 0 0);
1422
+ --uc-border-dark: oklch(50% 0 0);
1423
+
1424
+ --uc-muted-light: oklch(98% 0 0);
1425
+ --uc-muted-dark: oklch(16% 0 0);
1426
+
1427
+ --uc-muted-foreground-light: oklch(20% 0 0);
1428
+ --uc-muted-foreground-dark: oklch(80% 0 0);
1429
+
1430
+ --uc-background-light: oklch(100% 0 0);
1431
+ --uc-foreground-light: oklch(0% 0 0);
1432
+
1433
+ --uc-background-dark: oklch(10% 0 0);
1434
+ --uc-foreground-dark: oklch(100% 0 0);
1435
+ }
1436
+ :where([uc-wgt-common]) {
1437
+ color: var(--uc-foreground);
1438
+ font-size: var(--uc-font-size);
1439
+ line-height: var(--uc-line-height);
1440
+ font-family: var(--uc-font-family);
1441
+ }
1442
+ :where([uc-wgt-common]) * {
1443
+ box-sizing: border-box;
1444
+ }
1445
+ :where([uc-wgt-common]) button {
1446
+ display: flex;
1447
+ align-items: center;
1448
+ justify-content: center;
1449
+ height: var(--uc-button-size);
1450
+ padding-right: 14px;
1451
+ padding-left: 14px;
1452
+ font-size: 1em;
1453
+ font-family: inherit;
1454
+ white-space: nowrap;
1455
+ border: none;
1456
+ border-radius: var(--uc-radius);
1457
+ cursor: pointer;
1458
+ user-select: none;
1459
+ transition: background-color var(--uc-transition);
1460
+ }
1461
+ :where([uc-wgt-common]) button:focus-visible {
1462
+ outline-offset: 2px;
1463
+ }
1464
+ :where([uc-wgt-common]) button.uc-primary-btn {
1465
+ color: var(--uc-primary-foreground);
1466
+ background-color: var(--uc-primary);
1467
+ }
1468
+ :where([uc-wgt-common]) button.uc-primary-btn:hover {
1469
+ background-color: var(--uc-primary-hover);
1470
+ }
1471
+ :where([uc-wgt-common]) button.uc-secondary-btn {
1472
+ color: var(--uc-secondary-foreground);
1473
+ background-color: var(--uc-secondary);
1474
+ }
1475
+ :where([uc-wgt-common]) button.uc-secondary-btn:hover {
1476
+ background-color: var(--uc-secondary-hover);
1477
+ }
1478
+ :where([uc-wgt-common].uc-contrast) button.uc-secondary-btn {
1479
+ border: 1px solid var(--uc-border);
1480
+ }
1481
+ :where([uc-wgt-common]) button.uc-mini-btn {
1482
+ height: var(--uc-button-size);
1483
+ padding: 0;
1484
+ background-color: transparent;
1485
+ color: var(--uc-secondary-foreground);
1486
+ }
1487
+ :where([uc-wgt-common]) button.uc-mini-btn:hover {
1488
+ background-color: var(--uc-secondary);
1489
+ }
1490
+ :where([uc-wgt-common]) :is(button[disabled], button.uc-primary-btn[disabled], button.uc-secondary-btn[disabled]) {
1491
+ opacity: 0.5;
1492
+ pointer-events: none;
1493
+ }
1494
+ :where([uc-wgt-common]) a {
1495
+ color: var(--uc-primary);
1496
+ text-decoration: none;
1497
+ }
1498
+ /* TODO: if we're using disabled <a> somewhere, we should stop */
1499
+ :where([uc-wgt-common]) a[disabled] {
1500
+ pointer-events: none;
1501
+ }
1502
+ :where([uc-wgt-common]) input[type="text"] {
1503
+ display: flex;
1504
+ width: 100%;
1505
+ height: var(--uc-button-size);
1506
+ padding-right: 10px;
1507
+ padding-left: 10px;
1508
+ color: var(--uc-foreground);
1509
+ font-size: 1em;
1510
+ font-family: inherit;
1511
+ background-color: var(--uc-background);
1512
+ border: 1px solid var(--uc-border);
1513
+ outline: 1px solid transparent;
1514
+ border-radius: var(--uc-radius);
1515
+ transition:
1516
+ border-color var(--uc-transition),
1517
+ outline-color var(--uc-transition);
1518
+ }
1519
+ :where([uc-wgt-common]) input[type="text"]::placeholder {
1520
+ color: var(--uc-muted-foreground);
1521
+ }
1522
+ :where([uc-wgt-common]) input[type="text"]:focus {
1523
+ outline-color: var(--uc-primary-hover);
1524
+ border-color: var(--uc-primary-hover);
1525
+ }
1526
+ /* TODO: check if there's any necessity of disabled input */
1527
+ :where([uc-wgt-common]) input[disabled] {
1528
+ opacity: 0.6;
1529
+ pointer-events: none;
1530
+ }
1531
+ :where([uc-wgt-common]) uc-select[disabled],
1532
+ :where([uc-wgt-common]) select[disabled] {
1533
+ opacity: 0.6;
1534
+ pointer-events: none;
1535
+ }
1536
+ :where([uc-wgt-common]):not(#\#):not(#\#) [hidden] {
1537
+ display: none;
1538
+ }
1539
+ :where([uc-wgt-common]):not(#\#):not(#\#) [activity]:not([active], .active) {
1540
+ display: none;
1541
+ }
1542
+ :where([uc-wgt-common]):not(#\#):not(#\#) dialog:not([open]) [activity] {
1543
+ display: none;
1544
+ }
1545
+ :where([uc-wgt-common]):not(#\#):not(#\#):not(#\#):not(#\#) uc-source-btn[type] {
1546
+ all: unset;
1547
+ }
1548
+ :where([uc-wgt-common]) {
1549
+ --cfg-init-activity: "start-from";
1550
+ --cfg-done-activity: "";
1551
+ }
1552
+ :where([uc-wgt-common]) {
1553
+ /* Font */
1554
+ --uc-font-family: system-ui;
1555
+ --uc-font-size: 14px;
1556
+ --uc-line-height: normal;
1557
+ --uc-simple-btn-font-family: system-ui;
1558
+ --uc-simple-btn-font-size: 14px;
1559
+
1560
+ /* Sizes */
1561
+ --uc-button-size: 32px;
1562
+ --uc-preview-size: 32px;
1563
+ --uc-padding: 10px;
1564
+ --uc-radius: 8px;
1565
+ --uc-transition: 0.2s ease;
1566
+ --uc-dialog-width: 430px;
1567
+ --uc-dialog-max-width: 920px;
1568
+ --uc-dialog-max-height: 675px;
1569
+ --uc-simple-btn-padding: 7px 14px;
1570
+
1571
+ --uc-grid-col: 3;
1572
+ --uc-grid-preview-image-height: auto;
1573
+ --uc-grid-gap: calc(var(--uc-padding) / 2);
1574
+ --uc-grid-aspect-ratio: 1 / 1;
1575
+
1576
+ /* Default colors, in case of media query failure */
1577
+ --uc-background: var(--uc-background-light);
1578
+ --uc-foreground: var(--uc-foreground-light);
1579
+ --uc-primary: var(--uc-primary-light);
1580
+ --uc-primary-hover: var(--uc-primary-hover-light);
1581
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
1582
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
1583
+ --uc-secondary: var(--uc-secondary-light);
1584
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
1585
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
1586
+ --uc-muted: var(--uc-muted-light);
1587
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
1588
+ --uc-destructive: var(--uc-destructive-light);
1589
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
1590
+ --uc-border: var(--uc-border-light);
1591
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
1592
+ --uc-simple-btn: var(--uc-simple-btn-light);
1593
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
1594
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
1595
+ }
1596
+ @supports not (color: oklch(0% 0 0)) {
1597
+ :where([uc-wgt-common]) {
1598
+ /* Light colors RGB fallback */
1599
+ --uc-primary-rgb-light: 23 75 215;
1600
+ --uc-primary-light: rgb(var(--uc-primary-rgb-light));
1601
+ --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);
1602
+ --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);
1603
+ --uc-background-light: rgb(255 255 255);
1604
+ --uc-foreground-light: rgb(24 24 24);
1605
+ --uc-primary-foreground-light: #fff;
1606
+ --uc-secondary-light: rgb(24 24 24 / 5%);
1607
+ --uc-secondary-hover-light: rgb(24 24 24 / 8%);
1608
+ --uc-secondary-foreground-light: rgb(24 24 24);
1609
+ --uc-muted-light: rgb(245 245 245);
1610
+ --uc-muted-foreground-light: rgb(113 113 113);
1611
+ --uc-destructive-light: rgb(232 19 20 / 5%);
1612
+ --uc-destructive-foreground-light: rgb(232 19 20);
1613
+ --uc-border-light: rgb(228 228 232);
1614
+ --uc-dialog-shadow-light: 0px 6px 20px rgb(0 0 0 / 10%);
1615
+ --uc-simple-btn-light: rgb(235 235 235);
1616
+ --uc-simple-btn-hover-light: rgb(228 228 228);
1617
+ --uc-simple-btn-foreground-light: rgb(24 24 24);
1618
+
1619
+ /* Dark colors RGB fallback */
1620
+ --uc-primary-rgb-dark: 87 154 255;
1621
+ --uc-primary-dark: rgb(var(--uc-primary-rgb-dark));
1622
+ --uc-primary-hover-dark: rgb(var(--uc-primary-rgb-dark) / 90%);
1623
+ --uc-primary-transparent-dark: rgb(var(--uc-primary-rgb-dark) / 7%);
1624
+ --uc-background-dark: rgb(27 27 27);
1625
+ --uc-foreground-dark: rgb(225 225 225);
1626
+ --uc-primary-foreground-dark: rgb(0 0 0);
1627
+ --uc-secondary-dark: rgb(225 225 225 / 7%);
1628
+ --uc-secondary-hover-dark: rgb(225 225 225 / 10%);
1629
+ --uc-secondary-foreground-dark: rgb(225 225 225);
1630
+ --uc-muted-dark: rgb(36 36 36);
1631
+ --uc-muted-foreground-dark: rgb(152 152 152);
1632
+ --uc-destructive-dark: rgb(244 90 79 / 10%);
1633
+ --uc-destructive-foreground-dark: rgb(244 90 79);
1634
+ --uc-border-dark: rgb(61 61 61);
1635
+ --uc-dialog-shadow-dark: 0px 6px 20px rgb(0 0 0 / 25%);
1636
+ --uc-simple-btn-dark: rgb(36 36 36);
1637
+ --uc-simple-btn-hover-dark: rgb(43 43 43);
1638
+ --uc-simple-btn-foreground-dark: rgb(255 255 255);
1639
+ }
1640
+ }
1641
+ @supports (color: oklch(0% 0 0)) {
1642
+ :where([uc-wgt-common]) {
1643
+ /* Light colors OKLCH */
1644
+ --uc-primary-oklch-light: 47% 0.22 264; /* Quick customization: change this value to your brand color */
1645
+ --uc-primary-light: oklch(var(--uc-primary-oklch-light));
1646
+ --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
1647
+ --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);
1648
+ --uc-background-light: oklch(100% 0 0);
1649
+ --uc-foreground-light: oklch(21% 0 0);
1650
+ --uc-primary-foreground-light: oklch(100% 0 0);
1651
+ --uc-secondary-light: oklch(21% 0 0 / 0.05);
1652
+ --uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
1653
+ --uc-secondary-foreground-light: oklch(21% 0 0);
1654
+ --uc-muted-light: oklch(97% 0 0);
1655
+ --uc-muted-foreground-light: oklch(40% 0 0);
1656
+ --uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
1657
+ --uc-destructive-foreground-light: oklch(59% 0.235 28.5);
1658
+ --uc-border-light: oklch(92% 0 0);
1659
+ --uc-dialog-shadow-light: 0px 6px 20px oklch(0% 0 0 / 0.1);
1660
+ --uc-simple-btn-light: oklch(94% 0 0);
1661
+ --uc-simple-btn-hover-light: oklch(92% 0 0);
1662
+ --uc-simple-btn-foreground-light: oklch(20% 0 0);
1663
+
1664
+ /* Dark colors OKLCH */
1665
+ --uc-primary-oklch-dark: 69% 0.1768 258.4; /* Quick customization: change this value to your brand color */
1666
+ --uc-primary-dark: oklch(var(--uc-primary-oklch-dark));
1667
+ --uc-primary-hover-dark: oklch(var(--uc-primary-oklch-dark) / 90%);
1668
+ --uc-primary-transparent-dark: oklch(var(--uc-primary-oklch-dark) / 7%);
1669
+ --uc-background-dark: oklch(22% 0 0);
1670
+ --uc-foreground-dark: oklch(91% 0 0);
1671
+ --uc-primary-foreground-dark: oklch(0% 0 0);
1672
+ --uc-secondary-dark: oklch(91% 0 0 / 0.07);
1673
+ --uc-secondary-hover-dark: oklch(91% 0 0 / 0.1);
1674
+ --uc-secondary-foreground-dark: oklch(91% 0 0);
1675
+ --uc-muted-dark: oklch(26% 0 0);
1676
+ --uc-muted-foreground-dark: oklch(68% 0 0);
1677
+ --uc-destructive-dark: oklch(67% 0.191 27.5 / 0.1);
1678
+ --uc-destructive-foreground-dark: oklch(67% 0.191 27.5);
1679
+ --uc-border-dark: oklch(36% 0 0);
1680
+ --uc-dialog-shadow-dark: 0px 6px 20px oklch(0% 0 0 / 0.25);
1681
+ --uc-simple-btn-dark: oklch(26% 0 0);
1682
+ --uc-simple-btn-hover-dark: oklch(29% 0 0);
1683
+ --uc-simple-btn-foreground-dark: oklch(100% 0 0);
1684
+ }
1685
+ }
1686
+ @media only screen and (max-height: 600px) {
1687
+ :where([uc-wgt-common]) {
1688
+ --uc-dialog-max-height: 100%;
1689
+ }
1690
+ }
1691
+ @media only screen and (max-width: 680px) {
1692
+ :where([uc-wgt-common]) {
1693
+ --uc-grid-col: 2;
1694
+ }
1695
+ }
1696
+ @media only screen and (max-width: 430px) {
1697
+ :where([uc-wgt-common]) {
1698
+ --uc-dialog-max-width: 100vw;
1699
+ --uc-dialog-max-height: var(--uploadcare-blocks-window-height);
1700
+ --uc-grid-col: 1;
1701
+ }
1702
+ }
1703
+ @media (prefers-color-scheme: light) {
1704
+ :where([uc-wgt-common]) {
1705
+ --uc-background: var(--uc-background-light);
1706
+ --uc-foreground: var(--uc-foreground-light);
1707
+ --uc-primary: var(--uc-primary-light);
1708
+ --uc-primary-hover: var(--uc-primary-hover-light);
1709
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
1710
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
1711
+ --uc-secondary: var(--uc-secondary-light);
1712
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
1713
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
1714
+ --uc-muted: var(--uc-muted-light);
1715
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
1716
+ --uc-destructive: var(--uc-destructive-light);
1717
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
1718
+ --uc-border: var(--uc-border-light);
1719
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
1720
+ --uc-simple-btn: var(--uc-simple-btn-light);
1721
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
1722
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
1723
+ }
1724
+ }
1725
+ @media (prefers-color-scheme: dark) {
1726
+ :where([uc-wgt-common]) {
1727
+ --uc-background: var(--uc-background-dark);
1728
+ --uc-foreground: var(--uc-foreground-dark);
1729
+ --uc-primary: var(--uc-primary-dark);
1730
+ --uc-primary-hover: var(--uc-primary-hover-dark);
1731
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
1732
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
1733
+ --uc-secondary: var(--uc-secondary-dark);
1734
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
1735
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
1736
+ --uc-muted: var(--uc-muted-dark);
1737
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
1738
+ --uc-destructive: var(--uc-destructive-dark);
1739
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
1740
+ --uc-border: var(--uc-border-dark);
1741
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
1742
+ --uc-simple-btn: var(--uc-simple-btn-dark);
1743
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
1744
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
1745
+ }
1746
+ }
1747
+ :where(.uc-light) {
1748
+ --uc-background: var(--uc-background-light);
1749
+ --uc-foreground: var(--uc-foreground-light);
1750
+ --uc-primary: var(--uc-primary-light);
1751
+ --uc-primary-hover: var(--uc-primary-hover-light);
1752
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
1753
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
1754
+ --uc-secondary: var(--uc-secondary-light);
1755
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
1756
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
1757
+ --uc-muted: var(--uc-muted-light);
1758
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
1759
+ --uc-destructive: var(--uc-destructive-light);
1760
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
1761
+ --uc-border: var(--uc-border-light);
1762
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
1763
+ --uc-simple-btn: var(--uc-simple-btn-light);
1764
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
1765
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
1766
+ }
1767
+ :where(.uc-dark) {
1768
+ --uc-background: var(--uc-background-dark);
1769
+ --uc-foreground: var(--uc-foreground-dark);
1770
+ --uc-primary: var(--uc-primary-dark);
1771
+ --uc-primary-hover: var(--uc-primary-hover-dark);
1772
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
1773
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
1774
+ --uc-secondary: var(--uc-secondary-dark);
1775
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
1776
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
1777
+ --uc-muted: var(--uc-muted-dark);
1778
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
1779
+ --uc-destructive: var(--uc-destructive-dark);
1780
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
1781
+ --uc-border: var(--uc-border-dark);
1782
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
1783
+ --uc-simple-btn: var(--uc-simple-btn-dark);
1784
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
1785
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
1786
+ }
1787
+ :where(.uc-purple) {
1788
+ --uc-primary-oklch-light: 47% 0.22 300;
1789
+ --uc-primary-oklch-dark: 69% 0.1768 300;
1790
+ }
1791
+ :where(.uc-red) {
1792
+ --uc-primary-oklch-light: 47% 0.21 21;
1793
+ --uc-primary-oklch-dark: 71% 0.1768 21;
1794
+ }
1795
+ :where(.uc-orange) {
1796
+ --uc-primary-oklch-light: 47% 0.1376 51.88;
1797
+ --uc-primary-oklch-dark: 69% 0.1768 51.88;
1798
+ }
1799
+ :where(.uc-green) {
1800
+ --uc-primary-oklch-light: 45% 0.14 130;
1801
+ --uc-primary-oklch-dark: 69% 0.1768 130;
1802
+ }
1803
+ :where(.uc-turquoise) {
1804
+ --uc-primary-oklch-light: 45% 0.0854 174;
1805
+ --uc-primary-oklch-dark: 69% 0.1768 174;
1806
+ }
1807
+ :where(.uc-gray) {
1808
+ --uc-primary-oklch-light: 10% 0 0;
1809
+ --uc-primary-oklch-dark: 97% 0 0;
1810
+ }
1811
+ :where(.uc-contrast) {
1812
+ --uc-border-light: oklch(50% 0 0);
1813
+ --uc-border-dark: oklch(50% 0 0);
1814
+
1815
+ --uc-muted-light: oklch(98% 0 0);
1816
+ --uc-muted-dark: oklch(16% 0 0);
1817
+
1818
+ --uc-muted-foreground-light: oklch(20% 0 0);
1819
+ --uc-muted-foreground-dark: oklch(80% 0 0);
1820
+
1821
+ --uc-background-light: oklch(100% 0 0);
1822
+ --uc-foreground-light: oklch(0% 0 0);
1823
+
1824
+ --uc-background-dark: oklch(10% 0 0);
1825
+ --uc-foreground-dark: oklch(100% 0 0);
1826
+ }
1827
+ :where([uc-wgt-common]) {
1828
+ color: var(--uc-foreground);
1829
+ font-size: var(--uc-font-size);
1830
+ line-height: var(--uc-line-height);
1831
+ font-family: var(--uc-font-family);
1832
+ }
1833
+ :where([uc-wgt-common]) * {
1834
+ box-sizing: border-box;
1835
+ }
1836
+ :where([uc-wgt-common]) button {
1837
+ display: flex;
1838
+ align-items: center;
1839
+ justify-content: center;
1840
+ height: var(--uc-button-size);
1841
+ padding-right: 14px;
1842
+ padding-left: 14px;
1843
+ font-size: 1em;
1844
+ font-family: inherit;
1845
+ white-space: nowrap;
1846
+ border: none;
1847
+ border-radius: var(--uc-radius);
1848
+ cursor: pointer;
1849
+ user-select: none;
1850
+ transition: background-color var(--uc-transition);
1851
+ }
1852
+ :where([uc-wgt-common]) button:focus-visible {
1853
+ outline-offset: 2px;
1854
+ }
1855
+ :where([uc-wgt-common]) button.uc-primary-btn {
1856
+ color: var(--uc-primary-foreground);
1857
+ background-color: var(--uc-primary);
1858
+ }
1859
+ :where([uc-wgt-common]) button.uc-primary-btn:hover {
1860
+ background-color: var(--uc-primary-hover);
1861
+ }
1862
+ :where([uc-wgt-common]) button.uc-secondary-btn {
1863
+ color: var(--uc-secondary-foreground);
1864
+ background-color: var(--uc-secondary);
1865
+ }
1866
+ :where([uc-wgt-common]) button.uc-secondary-btn:hover {
1867
+ background-color: var(--uc-secondary-hover);
1868
+ }
1869
+ :where([uc-wgt-common].uc-contrast) button.uc-secondary-btn {
1870
+ border: 1px solid var(--uc-border);
1871
+ }
1872
+ :where([uc-wgt-common]) button.uc-mini-btn {
1873
+ height: var(--uc-button-size);
1874
+ padding: 0;
1875
+ background-color: transparent;
1876
+ color: var(--uc-secondary-foreground);
1877
+ }
1878
+ :where([uc-wgt-common]) button.uc-mini-btn:hover {
1879
+ background-color: var(--uc-secondary);
1880
+ }
1881
+ :where([uc-wgt-common]) :is(button[disabled], button.uc-primary-btn[disabled], button.uc-secondary-btn[disabled]) {
1882
+ opacity: 0.5;
1883
+ pointer-events: none;
1884
+ }
1885
+ :where([uc-wgt-common]) a {
1886
+ color: var(--uc-primary);
1887
+ text-decoration: none;
1888
+ }
1889
+ /* TODO: if we're using disabled <a> somewhere, we should stop */
1890
+ :where([uc-wgt-common]) a[disabled] {
1891
+ pointer-events: none;
1892
+ }
1893
+ :where([uc-wgt-common]) input[type="text"] {
1894
+ display: flex;
1895
+ width: 100%;
1896
+ height: var(--uc-button-size);
1897
+ padding-right: 10px;
1898
+ padding-left: 10px;
1899
+ color: var(--uc-foreground);
1900
+ font-size: 1em;
1901
+ font-family: inherit;
1902
+ background-color: var(--uc-background);
1903
+ border: 1px solid var(--uc-border);
1904
+ outline: 1px solid transparent;
1905
+ border-radius: var(--uc-radius);
1906
+ transition:
1907
+ border-color var(--uc-transition),
1908
+ outline-color var(--uc-transition);
1909
+ }
1910
+ :where([uc-wgt-common]) input[type="text"]::placeholder {
1911
+ color: var(--uc-muted-foreground);
1912
+ }
1913
+ :where([uc-wgt-common]) input[type="text"]:focus {
1914
+ outline-color: var(--uc-primary-hover);
1915
+ border-color: var(--uc-primary-hover);
1916
+ }
1917
+ /* TODO: check if there's any necessity of disabled input */
1918
+ :where([uc-wgt-common]) input[disabled] {
1919
+ opacity: 0.6;
1920
+ pointer-events: none;
1921
+ }
1922
+ :where([uc-wgt-common]) uc-select[disabled],
1923
+ :where([uc-wgt-common]) select[disabled] {
1924
+ opacity: 0.6;
1925
+ pointer-events: none;
1926
+ }
1927
+ :where([uc-wgt-common]):not(#\#):not(#\#) [hidden] {
1928
+ display: none;
1929
+ }
1930
+ :where([uc-wgt-common]):not(#\#):not(#\#) [activity]:not([active], .active) {
1931
+ display: none;
1932
+ }
1933
+ :where([uc-wgt-common]):not(#\#):not(#\#) dialog:not([open]) [activity] {
1934
+ display: none;
1935
+ }
1936
+ :where([uc-wgt-common]):not(#\#):not(#\#):not(#\#):not(#\#) uc-source-btn[type] {
1937
+ all: unset;
1938
+ }
1939
+ [uc-file-uploader-inline]:not(#\#):not(#\#):not(#\#) uc-start-from {
1940
+ height: 100%;
1941
+ container-type: inline-size;
1942
+ }
1943
+ [uc-file-uploader-inline]:not(#\#):not(#\#):not(#\#) {
1944
+ --cfg-done-activity: "start-from";
1945
+ --cfg-init-activity: "start-from";
1946
+
1947
+ flex: 1;
1948
+ }
1949
+ [uc-file-uploader-inline]:not(#\#):not(#\#):not(#\#) uc-activity-header::after {
1950
+ width: var(--uc-button-size);
1951
+ height: var(--uc-button-size);
1952
+ content: "";
1953
+ }
1954
+ [uc-file-uploader-inline]:not(#\#):not(#\#):not(#\#) uc-activity-header .uc-close-btn {
1955
+ display: none;
1956
+ }
1957
+ [uc-file-uploader-inline]:not(#\#):not(#\#):not(#\#) uc-copyright .uc-credits {
1958
+ position: static;
1959
+ }
1960
+ @container (min-width: 500px) {
1961
+ [uc-file-uploader-inline]:not(#\#):not(#\#):not(#\#) uc-start-from .uc-content {
1962
+ grid-template-columns: 1fr max-content;
1963
+ grid-template-rows: 1fr max-content;
1964
+ height: 100%;
1965
+ }
1966
+
1967
+ [uc-file-uploader-inline]:not(#\#):not(#\#):not(#\#) uc-start-from uc-copyright {
1968
+ grid-column: 2;
1969
+ }
1970
+
1971
+ [uc-file-uploader-inline]:not(#\#):not(#\#):not(#\#) uc-start-from uc-drop-area {
1972
+ grid-row: span 3;
1973
+ }
1974
+
1975
+ [uc-file-uploader-inline]:not(#\#):not(#\#):not(#\#) uc-start-from:has(uc-copyright[hidden]) uc-drop-area {
1976
+ grid-row: span 2;
1977
+ }
1978
+
1979
+ [uc-file-uploader-inline]:not(#\#):not(#\#):not(#\#) uc-start-from:has(.uc-cancel-btn[hidden]) uc-drop-area {
1980
+ grid-row: span 2;
1981
+ }
1982
+
1983
+ [uc-file-uploader-inline]:not(#\#):not(#\#):not(#\#) uc-start-from:has(uc-copyright[hidden]):has(.uc-cancel-btn[hidden]) uc-drop-area {
1984
+ grid-row: span 1;
1985
+ }
1986
+ }
1987
+ :where([uc-wgt-common]) {
1988
+ --cfg-init-activity: "start-from";
1989
+ --cfg-done-activity: "";
1990
+ }
1991
+ :where([uc-wgt-common]) {
1992
+ /* Font */
1993
+ --uc-font-family: system-ui;
1994
+ --uc-font-size: 14px;
1995
+ --uc-line-height: normal;
1996
+ --uc-simple-btn-font-family: system-ui;
1997
+ --uc-simple-btn-font-size: 14px;
1998
+
1999
+ /* Sizes */
2000
+ --uc-button-size: 32px;
2001
+ --uc-preview-size: 32px;
2002
+ --uc-padding: 10px;
2003
+ --uc-radius: 8px;
2004
+ --uc-transition: 0.2s ease;
2005
+ --uc-dialog-width: 430px;
2006
+ --uc-dialog-max-width: 920px;
2007
+ --uc-dialog-max-height: 675px;
2008
+ --uc-simple-btn-padding: 7px 14px;
2009
+
2010
+ --uc-grid-col: 3;
2011
+ --uc-grid-preview-image-height: auto;
2012
+ --uc-grid-gap: calc(var(--uc-padding) / 2);
2013
+ --uc-grid-aspect-ratio: 1 / 1;
2014
+
2015
+ /* Default colors, in case of media query failure */
2016
+ --uc-background: var(--uc-background-light);
2017
+ --uc-foreground: var(--uc-foreground-light);
2018
+ --uc-primary: var(--uc-primary-light);
2019
+ --uc-primary-hover: var(--uc-primary-hover-light);
2020
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
2021
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
2022
+ --uc-secondary: var(--uc-secondary-light);
2023
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
2024
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
2025
+ --uc-muted: var(--uc-muted-light);
2026
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
2027
+ --uc-destructive: var(--uc-destructive-light);
2028
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
2029
+ --uc-border: var(--uc-border-light);
2030
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
2031
+ --uc-simple-btn: var(--uc-simple-btn-light);
2032
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
2033
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
2034
+ }
2035
+ @supports not (color: oklch(0% 0 0)) {
2036
+ :where([uc-wgt-common]) {
2037
+ /* Light colors RGB fallback */
2038
+ --uc-primary-rgb-light: 23 75 215;
2039
+ --uc-primary-light: rgb(var(--uc-primary-rgb-light));
2040
+ --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);
2041
+ --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);
2042
+ --uc-background-light: rgb(255 255 255);
2043
+ --uc-foreground-light: rgb(24 24 24);
2044
+ --uc-primary-foreground-light: #fff;
2045
+ --uc-secondary-light: rgb(24 24 24 / 5%);
2046
+ --uc-secondary-hover-light: rgb(24 24 24 / 8%);
2047
+ --uc-secondary-foreground-light: rgb(24 24 24);
2048
+ --uc-muted-light: rgb(245 245 245);
2049
+ --uc-muted-foreground-light: rgb(113 113 113);
2050
+ --uc-destructive-light: rgb(232 19 20 / 5%);
2051
+ --uc-destructive-foreground-light: rgb(232 19 20);
2052
+ --uc-border-light: rgb(228 228 232);
2053
+ --uc-dialog-shadow-light: 0px 6px 20px rgb(0 0 0 / 10%);
2054
+ --uc-simple-btn-light: rgb(235 235 235);
2055
+ --uc-simple-btn-hover-light: rgb(228 228 228);
2056
+ --uc-simple-btn-foreground-light: rgb(24 24 24);
2057
+
2058
+ /* Dark colors RGB fallback */
2059
+ --uc-primary-rgb-dark: 87 154 255;
2060
+ --uc-primary-dark: rgb(var(--uc-primary-rgb-dark));
2061
+ --uc-primary-hover-dark: rgb(var(--uc-primary-rgb-dark) / 90%);
2062
+ --uc-primary-transparent-dark: rgb(var(--uc-primary-rgb-dark) / 7%);
2063
+ --uc-background-dark: rgb(27 27 27);
2064
+ --uc-foreground-dark: rgb(225 225 225);
2065
+ --uc-primary-foreground-dark: rgb(0 0 0);
2066
+ --uc-secondary-dark: rgb(225 225 225 / 7%);
2067
+ --uc-secondary-hover-dark: rgb(225 225 225 / 10%);
2068
+ --uc-secondary-foreground-dark: rgb(225 225 225);
2069
+ --uc-muted-dark: rgb(36 36 36);
2070
+ --uc-muted-foreground-dark: rgb(152 152 152);
2071
+ --uc-destructive-dark: rgb(244 90 79 / 10%);
2072
+ --uc-destructive-foreground-dark: rgb(244 90 79);
2073
+ --uc-border-dark: rgb(61 61 61);
2074
+ --uc-dialog-shadow-dark: 0px 6px 20px rgb(0 0 0 / 25%);
2075
+ --uc-simple-btn-dark: rgb(36 36 36);
2076
+ --uc-simple-btn-hover-dark: rgb(43 43 43);
2077
+ --uc-simple-btn-foreground-dark: rgb(255 255 255);
2078
+ }
2079
+ }
2080
+ @supports (color: oklch(0% 0 0)) {
2081
+ :where([uc-wgt-common]) {
2082
+ /* Light colors OKLCH */
2083
+ --uc-primary-oklch-light: 47% 0.22 264; /* Quick customization: change this value to your brand color */
2084
+ --uc-primary-light: oklch(var(--uc-primary-oklch-light));
2085
+ --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
2086
+ --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);
2087
+ --uc-background-light: oklch(100% 0 0);
2088
+ --uc-foreground-light: oklch(21% 0 0);
2089
+ --uc-primary-foreground-light: oklch(100% 0 0);
2090
+ --uc-secondary-light: oklch(21% 0 0 / 0.05);
2091
+ --uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
2092
+ --uc-secondary-foreground-light: oklch(21% 0 0);
2093
+ --uc-muted-light: oklch(97% 0 0);
2094
+ --uc-muted-foreground-light: oklch(40% 0 0);
2095
+ --uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
2096
+ --uc-destructive-foreground-light: oklch(59% 0.235 28.5);
2097
+ --uc-border-light: oklch(92% 0 0);
2098
+ --uc-dialog-shadow-light: 0px 6px 20px oklch(0% 0 0 / 0.1);
2099
+ --uc-simple-btn-light: oklch(94% 0 0);
2100
+ --uc-simple-btn-hover-light: oklch(92% 0 0);
2101
+ --uc-simple-btn-foreground-light: oklch(20% 0 0);
2102
+
2103
+ /* Dark colors OKLCH */
2104
+ --uc-primary-oklch-dark: 69% 0.1768 258.4; /* Quick customization: change this value to your brand color */
2105
+ --uc-primary-dark: oklch(var(--uc-primary-oklch-dark));
2106
+ --uc-primary-hover-dark: oklch(var(--uc-primary-oklch-dark) / 90%);
2107
+ --uc-primary-transparent-dark: oklch(var(--uc-primary-oklch-dark) / 7%);
2108
+ --uc-background-dark: oklch(22% 0 0);
2109
+ --uc-foreground-dark: oklch(91% 0 0);
2110
+ --uc-primary-foreground-dark: oklch(0% 0 0);
2111
+ --uc-secondary-dark: oklch(91% 0 0 / 0.07);
2112
+ --uc-secondary-hover-dark: oklch(91% 0 0 / 0.1);
2113
+ --uc-secondary-foreground-dark: oklch(91% 0 0);
2114
+ --uc-muted-dark: oklch(26% 0 0);
2115
+ --uc-muted-foreground-dark: oklch(68% 0 0);
2116
+ --uc-destructive-dark: oklch(67% 0.191 27.5 / 0.1);
2117
+ --uc-destructive-foreground-dark: oklch(67% 0.191 27.5);
2118
+ --uc-border-dark: oklch(36% 0 0);
2119
+ --uc-dialog-shadow-dark: 0px 6px 20px oklch(0% 0 0 / 0.25);
2120
+ --uc-simple-btn-dark: oklch(26% 0 0);
2121
+ --uc-simple-btn-hover-dark: oklch(29% 0 0);
2122
+ --uc-simple-btn-foreground-dark: oklch(100% 0 0);
2123
+ }
2124
+ }
2125
+ @media only screen and (max-height: 600px) {
2126
+ :where([uc-wgt-common]) {
2127
+ --uc-dialog-max-height: 100%;
2128
+ }
2129
+ }
2130
+ @media only screen and (max-width: 680px) {
2131
+ :where([uc-wgt-common]) {
2132
+ --uc-grid-col: 2;
2133
+ }
2134
+ }
2135
+ @media only screen and (max-width: 430px) {
2136
+ :where([uc-wgt-common]) {
2137
+ --uc-dialog-max-width: 100vw;
2138
+ --uc-dialog-max-height: var(--uploadcare-blocks-window-height);
2139
+ --uc-grid-col: 1;
2140
+ }
2141
+ }
2142
+ @media (prefers-color-scheme: light) {
2143
+ :where([uc-wgt-common]) {
2144
+ --uc-background: var(--uc-background-light);
2145
+ --uc-foreground: var(--uc-foreground-light);
2146
+ --uc-primary: var(--uc-primary-light);
2147
+ --uc-primary-hover: var(--uc-primary-hover-light);
2148
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
2149
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
2150
+ --uc-secondary: var(--uc-secondary-light);
2151
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
2152
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
2153
+ --uc-muted: var(--uc-muted-light);
2154
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
2155
+ --uc-destructive: var(--uc-destructive-light);
2156
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
2157
+ --uc-border: var(--uc-border-light);
2158
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
2159
+ --uc-simple-btn: var(--uc-simple-btn-light);
2160
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
2161
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
2162
+ }
2163
+ }
2164
+ @media (prefers-color-scheme: dark) {
2165
+ :where([uc-wgt-common]) {
2166
+ --uc-background: var(--uc-background-dark);
2167
+ --uc-foreground: var(--uc-foreground-dark);
2168
+ --uc-primary: var(--uc-primary-dark);
2169
+ --uc-primary-hover: var(--uc-primary-hover-dark);
2170
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
2171
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
2172
+ --uc-secondary: var(--uc-secondary-dark);
2173
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
2174
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
2175
+ --uc-muted: var(--uc-muted-dark);
2176
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
2177
+ --uc-destructive: var(--uc-destructive-dark);
2178
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
2179
+ --uc-border: var(--uc-border-dark);
2180
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
2181
+ --uc-simple-btn: var(--uc-simple-btn-dark);
2182
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
2183
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
2184
+ }
2185
+ }
2186
+ :where(.uc-light) {
2187
+ --uc-background: var(--uc-background-light);
2188
+ --uc-foreground: var(--uc-foreground-light);
2189
+ --uc-primary: var(--uc-primary-light);
2190
+ --uc-primary-hover: var(--uc-primary-hover-light);
2191
+ --uc-primary-transparent: var(--uc-primary-transparent-light);
2192
+ --uc-primary-foreground: var(--uc-primary-foreground-light);
2193
+ --uc-secondary: var(--uc-secondary-light);
2194
+ --uc-secondary-hover: var(--uc-secondary-hover-light);
2195
+ --uc-secondary-foreground: var(--uc-secondary-foreground-light);
2196
+ --uc-muted: var(--uc-muted-light);
2197
+ --uc-muted-foreground: var(--uc-muted-foreground-light);
2198
+ --uc-destructive: var(--uc-destructive-light);
2199
+ --uc-destructive-foreground: var(--uc-destructive-foreground-light);
2200
+ --uc-border: var(--uc-border-light);
2201
+ --uc-dialog-shadow: var(--uc-dialog-shadow-light);
2202
+ --uc-simple-btn: var(--uc-simple-btn-light);
2203
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-light);
2204
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light);
2205
+ }
2206
+ :where(.uc-dark) {
2207
+ --uc-background: var(--uc-background-dark);
2208
+ --uc-foreground: var(--uc-foreground-dark);
2209
+ --uc-primary: var(--uc-primary-dark);
2210
+ --uc-primary-hover: var(--uc-primary-hover-dark);
2211
+ --uc-primary-transparent: var(--uc-primary-transparent-dark);
2212
+ --uc-primary-foreground: var(--uc-primary-foreground-dark);
2213
+ --uc-secondary: var(--uc-secondary-dark);
2214
+ --uc-secondary-hover: var(--uc-secondary-hover-dark);
2215
+ --uc-secondary-foreground: var(--uc-secondary-foreground-dark);
2216
+ --uc-muted: var(--uc-muted-dark);
2217
+ --uc-muted-foreground: var(--uc-muted-foreground-dark);
2218
+ --uc-destructive: var(--uc-destructive-dark);
2219
+ --uc-destructive-foreground: var(--uc-destructive-foreground-dark);
2220
+ --uc-border: var(--uc-border-dark);
2221
+ --uc-dialog-shadow: var(--uc-dialog-shadow-dark);
2222
+ --uc-simple-btn: var(--uc-simple-btn-dark);
2223
+ --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark);
2224
+ --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark);
2225
+ }
2226
+ :where(.uc-purple) {
2227
+ --uc-primary-oklch-light: 47% 0.22 300;
2228
+ --uc-primary-oklch-dark: 69% 0.1768 300;
2229
+ }
2230
+ :where(.uc-red) {
2231
+ --uc-primary-oklch-light: 47% 0.21 21;
2232
+ --uc-primary-oklch-dark: 71% 0.1768 21;
2233
+ }
2234
+ :where(.uc-orange) {
2235
+ --uc-primary-oklch-light: 47% 0.1376 51.88;
2236
+ --uc-primary-oklch-dark: 69% 0.1768 51.88;
2237
+ }
2238
+ :where(.uc-green) {
2239
+ --uc-primary-oklch-light: 45% 0.14 130;
2240
+ --uc-primary-oklch-dark: 69% 0.1768 130;
2241
+ }
2242
+ :where(.uc-turquoise) {
2243
+ --uc-primary-oklch-light: 45% 0.0854 174;
2244
+ --uc-primary-oklch-dark: 69% 0.1768 174;
2245
+ }
2246
+ :where(.uc-gray) {
2247
+ --uc-primary-oklch-light: 10% 0 0;
2248
+ --uc-primary-oklch-dark: 97% 0 0;
2249
+ }
2250
+ :where(.uc-contrast) {
2251
+ --uc-border-light: oklch(50% 0 0);
2252
+ --uc-border-dark: oklch(50% 0 0);
2253
+
2254
+ --uc-muted-light: oklch(98% 0 0);
2255
+ --uc-muted-dark: oklch(16% 0 0);
2256
+
2257
+ --uc-muted-foreground-light: oklch(20% 0 0);
2258
+ --uc-muted-foreground-dark: oklch(80% 0 0);
2259
+
2260
+ --uc-background-light: oklch(100% 0 0);
2261
+ --uc-foreground-light: oklch(0% 0 0);
2262
+
2263
+ --uc-background-dark: oklch(10% 0 0);
2264
+ --uc-foreground-dark: oklch(100% 0 0);
2265
+ }
2266
+ :where([uc-wgt-common]) {
2267
+ color: var(--uc-foreground);
2268
+ font-size: var(--uc-font-size);
2269
+ line-height: var(--uc-line-height);
2270
+ font-family: var(--uc-font-family);
2271
+ }
2272
+ :where([uc-wgt-common]) * {
2273
+ box-sizing: border-box;
2274
+ }
2275
+ :where([uc-wgt-common]) button {
2276
+ display: flex;
2277
+ align-items: center;
2278
+ justify-content: center;
2279
+ height: var(--uc-button-size);
2280
+ padding-right: 14px;
2281
+ padding-left: 14px;
2282
+ font-size: 1em;
2283
+ font-family: inherit;
2284
+ white-space: nowrap;
2285
+ border: none;
2286
+ border-radius: var(--uc-radius);
2287
+ cursor: pointer;
2288
+ user-select: none;
2289
+ transition: background-color var(--uc-transition);
2290
+ }
2291
+ :where([uc-wgt-common]) button:focus-visible {
2292
+ outline-offset: 2px;
2293
+ }
2294
+ :where([uc-wgt-common]) button.uc-primary-btn {
2295
+ color: var(--uc-primary-foreground);
2296
+ background-color: var(--uc-primary);
2297
+ }
2298
+ :where([uc-wgt-common]) button.uc-primary-btn:hover {
2299
+ background-color: var(--uc-primary-hover);
2300
+ }
2301
+ :where([uc-wgt-common]) button.uc-secondary-btn {
2302
+ color: var(--uc-secondary-foreground);
2303
+ background-color: var(--uc-secondary);
2304
+ }
2305
+ :where([uc-wgt-common]) button.uc-secondary-btn:hover {
2306
+ background-color: var(--uc-secondary-hover);
2307
+ }
2308
+ :where([uc-wgt-common].uc-contrast) button.uc-secondary-btn {
2309
+ border: 1px solid var(--uc-border);
2310
+ }
2311
+ :where([uc-wgt-common]) button.uc-mini-btn {
2312
+ height: var(--uc-button-size);
2313
+ padding: 0;
2314
+ background-color: transparent;
2315
+ color: var(--uc-secondary-foreground);
2316
+ }
2317
+ :where([uc-wgt-common]) button.uc-mini-btn:hover {
2318
+ background-color: var(--uc-secondary);
2319
+ }
2320
+ :where([uc-wgt-common]) :is(button[disabled], button.uc-primary-btn[disabled], button.uc-secondary-btn[disabled]) {
2321
+ opacity: 0.5;
2322
+ pointer-events: none;
2323
+ }
2324
+ :where([uc-wgt-common]) a {
2325
+ color: var(--uc-primary);
2326
+ text-decoration: none;
2327
+ }
2328
+ /* TODO: if we're using disabled <a> somewhere, we should stop */
2329
+ :where([uc-wgt-common]) a[disabled] {
2330
+ pointer-events: none;
2331
+ }
2332
+ :where([uc-wgt-common]) input[type="text"] {
2333
+ display: flex;
2334
+ width: 100%;
2335
+ height: var(--uc-button-size);
2336
+ padding-right: 10px;
2337
+ padding-left: 10px;
2338
+ color: var(--uc-foreground);
2339
+ font-size: 1em;
2340
+ font-family: inherit;
2341
+ background-color: var(--uc-background);
2342
+ border: 1px solid var(--uc-border);
2343
+ outline: 1px solid transparent;
2344
+ border-radius: var(--uc-radius);
2345
+ transition:
2346
+ border-color var(--uc-transition),
2347
+ outline-color var(--uc-transition);
2348
+ }
2349
+ :where([uc-wgt-common]) input[type="text"]::placeholder {
2350
+ color: var(--uc-muted-foreground);
2351
+ }
2352
+ :where([uc-wgt-common]) input[type="text"]:focus {
2353
+ outline-color: var(--uc-primary-hover);
2354
+ border-color: var(--uc-primary-hover);
2355
+ }
2356
+ /* TODO: check if there's any necessity of disabled input */
2357
+ :where([uc-wgt-common]) input[disabled] {
2358
+ opacity: 0.6;
2359
+ pointer-events: none;
2360
+ }
2361
+ :where([uc-wgt-common]) uc-select[disabled],
2362
+ :where([uc-wgt-common]) select[disabled] {
2363
+ opacity: 0.6;
2364
+ pointer-events: none;
2365
+ }
2366
+ :where([uc-wgt-common]):not(#\#):not(#\#) [hidden] {
2367
+ display: none;
2368
+ }
2369
+ :where([uc-wgt-common]):not(#\#):not(#\#) [activity]:not([active], .active) {
2370
+ display: none;
2371
+ }
2372
+ :where([uc-wgt-common]):not(#\#):not(#\#) dialog:not([open]) [activity] {
2373
+ display: none;
2374
+ }
2375
+ :where([uc-wgt-common]):not(#\#):not(#\#):not(#\#):not(#\#) uc-source-btn[type] {
2376
+ all: unset;
2377
+ }
2378
+ /* ICONS: */
2379
+ :where([uc-file-uploader-minimal]):not(#\#):not(#\#):not(#\#) {
2380
+ --cfg-init-activity: "start-from";
2381
+ --cfg-done-activity: "upload-list";
2382
+
2383
+ position: relative;
2384
+ display: block;
2385
+ }
2386
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) > uc-start-from .uc-content {
2387
+ display: flex;
2388
+ flex-direction: column;
2389
+ gap: 4px;
2390
+ padding: 0;
2391
+ overflow: hidden;
2392
+ align-items: center;
2393
+ background-color: transparent;
2394
+ }
2395
+ :where([uc-file-uploader-minimal] > uc-start-from uc-drop-area):not(#\#):not(#\#):not(#\#) {
2396
+ display: flex;
2397
+ position: relative;
2398
+ align-items: center;
2399
+ justify-content: center;
2400
+ width: 100%;
2401
+ min-height: calc(var(--uc-preview-size) + var(--uc-padding) * 2 + 8px);
2402
+ padding: 0;
2403
+ text-align: center;
2404
+ background-color: var(--uc-muted);
2405
+ border-radius: calc(var(--uc-radius) * 1.75);
2406
+ }
2407
+ :where(.uc-contrast):not(#\#):not(#\#):not(#\#) :where([uc-file-uploader-minimal] > uc-start-from uc-drop-area) {
2408
+ background-color: transparent;
2409
+ }
2410
+ /* hack to make transparent :hover colors work in any conditions */
2411
+ :where([uc-file-uploader-minimal] > uc-start-from uc-drop-area):not(#\#):not(#\#):not(#\#)::before {
2412
+ content: "";
2413
+ z-index: -1;
2414
+ width: 100%;
2415
+ height: 100%;
2416
+ position: absolute;
2417
+ background-color: var(--uc-background);
2418
+ }
2419
+ :where([uc-file-uploader-minimal]:has([single]) > uc-start-from uc-drop-area):not(#\#):not(#\#):not(#\#) {
2420
+ aspect-ratio: var(--uc-grid-aspect-ratio);
2421
+ }
2422
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-upload-list uc-activity-header {
2423
+ display: none;
2424
+ }
2425
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-upload-list > .uc-toolbar {
2426
+ background-color: transparent;
2427
+ }
2428
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-upload-list {
2429
+ width: 100%;
2430
+ height: unset;
2431
+ padding: 4px;
2432
+ background-color: var(--uc-background);
2433
+ border: 1px dashed var(--uc-border);
2434
+ border-radius: calc(var(--uc-radius) * 1.75);
2435
+ }
2436
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-upload-list .uc-files {
2437
+ padding: 0;
2438
+ }
2439
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-upload-list .uc-toolbar {
2440
+ display: block;
2441
+ padding: 0;
2442
+ }
2443
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-upload-list .uc-toolbar .uc-cancel-btn,
2444
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-upload-list .uc-toolbar .uc-upload-btn,
2445
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-upload-list .uc-toolbar .uc-done-btn {
2446
+ display: none;
2447
+ }
2448
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-upload-list .uc-toolbar .uc-add-more-btn {
2449
+ width: 100%;
2450
+ height: calc(var(--uc-preview-size) + var(--uc-padding) * 2);
2451
+ margin-top: 4px;
2452
+ }
2453
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-upload-list .uc-toolbar .uc-add-more-btn[disabled] {
2454
+ display: none;
2455
+ }
2456
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-upload-list .uc-toolbar .uc-add-more-btn > span {
2457
+ display: none;
2458
+ }
2459
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-upload-list .uc-toolbar .uc-add-more-btn > uc-icon {
2460
+ display: flex;
2461
+ }
2462
+ [uc-file-uploader-minimal][mode="list"]:not(#\#):not(#\#):not(#\#) uc-file-item uc-progress-bar {
2463
+ top: 0;
2464
+ height: 100%;
2465
+ }
2466
+ [uc-file-uploader-minimal][mode="list"]:not(#\#):not(#\#):not(#\#) uc-file-item uc-progress-bar .uc-progress {
2467
+ background-color: var(--uc-primary-transparent);
2468
+ border-radius: var(--uc-radius);
2469
+ }
2470
+ [uc-file-uploader-minimal][mode="list"]:not(#\#):not(#\#):not(#\#) uc-file-item uc-progress-bar .uc-fake-progress {
2471
+ background-color: var(--uc-primary-transparent);
2472
+ border-radius: var(--uc-radius);
2473
+ }
2474
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-upload-list uc-drop-area {
2475
+ width: 100%;
2476
+ height: 100%;
2477
+ margin: 0;
2478
+ border-radius: calc(var(--uc-radius) * 1.75);
2479
+ }
2480
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-upload-list .uc-common-error {
2481
+ margin: 4px 0 0;
2482
+ }
2483
+ [uc-file-uploader-minimal]:not(#\#):not(#\#):not(#\#) uc-copyright .uc-credits {
2484
+ position: static;
2485
+ }
2486
+ [uc-file-uploader-minimal][mode="grid"]:not(#\#):not(#\#):not(#\#) uc-upload-list .uc-toolbar .uc-add-more-btn {
2487
+ display: none;
2488
+ }
2489
+ [uc-file-uploader-minimal][mode="grid"]:not(#\#):not(#\#):not(#\#) uc-upload-list .uc-files .uc-add-more-btn {
2490
+ display: flex;
2491
+ }
2492
+ [uc-file-uploader-minimal][mode="grid"]:not(#\#):not(#\#):not(#\#) uc-upload-list .uc-files .uc-add-more-btn > span {
2493
+ display: none;
2494
+ }
2495
+ [uc-file-uploader-minimal][mode="grid"]:not(#\#):not(#\#):not(#\#) uc-upload-list .uc-files .uc-add-more-btn > uc-icon {
2496
+ display: flex;
2497
+ }