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