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