search

uploadcare / react-file-uploader

MIT License
8 stars 0 forks source link

CSS File Not Found at @uploadcare/react-uploader/core.css? #47

Closed VikR1000 closed 3 weeks ago

VikR1000 commented 1 month ago

Describe the bug

import "@uploadcare/react-uploader/core.css" throws because there appears to be no such file

@uploadcare/react-uploader/core.css does not appear to be created on npm install.

run npm i @uploadcare/react-uploader in terminal. run import "@uploadcare/react-uploader/core.css"; in app

Expected behavior

CSS is imported

Code / screenshots

Environment

syedmaazsaeed commented 1 month ago

I can Fix this Issue. I am a full-stack developer and Software Engineer. I have been working in the MERN stack for 3 years.

syedmaazsaeed commented 1 month ago

@VikR1000 Here is Your Solution . Try this . If the problem persists. Then Send me SS. I will guide you more .

  1. Check Package Version: Ensure you're using the latest version of @uploadcare/react-uploader. Run this command to update 

                                 npm install @uploadcare/react-uploader@latest

  2. Verify the Package Contents: After installing, check if core.css exists in the package. Run

                                  ls node_modules/@uploadcare/react-uploader/

If core.css is not present, it might be missing in this version of the package.

  3. Correct Import Path: The import path might be wrong if core.css is in a different folder. Double-check the folder structure and modify the import statement.

                                    import "@uploadcare/react-uploader/path-to-the-core.css";
VikR1000 commented 1 month ago

npm install @uploadcare/react-uploader@latest up to date, audited 1020 packages in 4s

ls node_modules/@uploadcare/react-uploader/ LICENSE README.md dist package.json

It seems like it's just not there.

I went through the repo trying to find "core.css" and couldn't find that file in any folder in the repo.

VikR1000 commented 1 month ago

Does anyone here have a copy of core.css? If so could you please upload it here?

VikR1000 commented 1 month ago

Found it in the demo at:

https://app.uploadcare.com/projects/72f9f2f1b9af03528011/get-started/#react-uploader

:where([uc-wgt-common]) { --cfg-init-activity: "start-from"; --cfg-done-activity: ""; --uc-font-family: system-ui; --uc-font-size: 14px; --uc-line-height: normal; --uc-simple-btn-font-family: system-ui; --uc-simple-btn-font-size: 14px; --uc-button-size: 32px; --uc-preview-size: 32px; --uc-padding: 10px; --uc-radius: 8px; --uc-transition: .2s ease; --uc-dialog-width: 430px; --uc-dialog-max-width: 800px; --uc-dialog-max-height: 600px; --uc-simple-btn-padding: 7px 14px; --uc-background: var(--uc-background-light); --uc-foreground: var(--uc-foreground-light); --uc-primary: var(--uc-primary-light); --uc-primary-hover: var(--uc-primary-hover-light); --uc-primary-transparent: var(--uc-primary-transparent-light); --uc-primary-foreground: var(--uc-primary-foreground-light); --uc-secondary: var(--uc-secondary-light); --uc-secondary-hover: var(--uc-secondary-hover-light); --uc-secondary-foreground: var(--uc-secondary-foreground-light); --uc-muted: var(--uc-muted-light); --uc-muted-foreground: var(--uc-muted-foreground-light); --uc-destructive: var(--uc-destructive-light); --uc-destructive-foreground: var(--uc-destructive-foreground-light); --uc-border: var(--uc-border-light); --uc-dialog-shadow: var(--uc-dialog-shadow-light); --uc-simple-btn: var(--uc-simple-btn-light); --uc-simple-btn-hover: var(--uc-simple-btn-hover-light); --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light) }

@supports not (color: oklch(0% 0 0)) { :where([uc-wgt-common]) { --uc-primary-rgb-light: 54 112 253; --uc-primary-light: rgb(var(--uc-primary-rgb-light)); --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%); --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%); --uc-background-light: rgb(255 255 255); --uc-foreground-light: rgb(24 24 24); --uc-primary-foreground-light: #fff; --uc-secondary-light: rgb(24 24 24 / 5%); --uc-secondary-hover-light: rgb(24 24 24 / 8%); --uc-secondary-foreground-light: rgb(24 24 24); --uc-muted-light: rgb(245 245 245); --uc-muted-foreground-light: rgb(113 113 113); --uc-destructive-light: rgb(232 19 20 / 5%); --uc-destructive-foreground-light: rgb(232 19 20); --uc-border-light: rgb(228 228 232); --uc-dialog-shadow-light: 0px 6px 20px rgb(0 0 0 / 10%); --uc-simple-btn-light: rgb(235 235 235); --uc-simple-btn-hover-light: rgb(228 228 228); --uc-simple-btn-foreground-light: rgb(24 24 24); --uc-primary-rgb-dark: 87 154 255; --uc-primary-dark: rgb(var(--uc-primary-rgb-dark)); --uc-primary-hover-dark: rgb(var(--uc-primary-rgb-dark) / 90%); --uc-primary-transparent-dark: rgb(var(--uc-primary-rgb-dark) / 7%); --uc-background-dark: rgb(27 27 27); --uc-foreground-dark: rgb(225 225 225); --uc-primary-foreground-dark: rgb(0 0 0); --uc-secondary-dark: rgb(225 225 225 / 7%); --uc-secondary-hover-dark: rgb(225 225 225 / 10%); --uc-secondary-foreground-dark: rgb(225 225 225); --uc-muted-dark: rgb(36 36 36); --uc-muted-foreground-dark: rgb(152 152 152); --uc-destructive-dark: rgb(244 90 79 / 10%); --uc-destructive-foreground-dark: rgb(244 90 79); --uc-border-dark: rgb(61 61 61); --uc-dialog-shadow-dark: 0px 6px 20px rgb(0 0 0 / 25%); --uc-simple-btn-dark: rgb(36 36 36); --uc-simple-btn-hover-dark: rgb(43 43 43); --uc-simple-btn-foreground-dark: rgb(255 255 255) } }

@supports (color: oklch(0% 0 0)) { :where([uc-wgt-common]) { --uc-primary-oklch-light: 59% .22 264; --uc-primary-light: oklch(var(--uc-primary-oklch-light)); --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%); --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 10%); --uc-background-light: oklch(100% 0 0); --uc-foreground-light: oklch(21% 0 0); --uc-primary-foreground-light: oklch(100% 0 0); --uc-secondary-light: oklch(21% 0 0 / .05); --uc-secondary-hover-light: oklch(21% 0 0 / .08); --uc-secondary-foreground-light: oklch(21% 0 0); --uc-muted-light: oklch(97% 0 0); --uc-muted-foreground-light: oklch(55% 0 0); --uc-destructive-light: oklch(59% .235 28.5 / .05); --uc-destructive-foreground-light: oklch(59% .235 28.5); --uc-border-light: oklch(92% 0 0); --uc-dialog-shadow-light: 0px 6px 20px oklch(0% 0 0 / .1); --uc-simple-btn-light: oklch(94% 0 0); --uc-simple-btn-hover-light: oklch(92% 0 0); --uc-simple-btn-foreground-light: oklch(20% 0 0); --uc-primary-oklch-dark: 69% .1768 258.4; --uc-primary-dark: oklch(var(--uc-primary-oklch-dark)); --uc-primary-hover-dark: oklch(var(--uc-primary-oklch-dark) / 90%); --uc-primary-transparent-dark: oklch(var(--uc-primary-oklch-dark) / 7%); --uc-background-dark: oklch(22% 0 0); --uc-foreground-dark: oklch(91% 0 0); --uc-primary-foreground-dark: oklch(0% 0 0); --uc-secondary-dark: oklch(91% 0 0 / .07); --uc-secondary-hover-dark: oklch(91% 0 0 / .1); --uc-secondary-foreground-dark: oklch(91% 0 0); --uc-muted-dark: oklch(26% 0 0); --uc-muted-foreground-dark: oklch(68% 0 0); --uc-destructive-dark: oklch(67% .191 27.5 / .1); --uc-destructive-foreground-dark: oklch(67% .191 27.5); --uc-border-dark: oklch(36% 0 0); --uc-dialog-shadow-dark: 0px 6px 20px oklch(0% 0 0 / .25); --uc-simple-btn-dark: oklch(26% 0 0); --uc-simple-btn-hover-dark: oklch(29% 0 0); --uc-simple-btn-foreground-dark: oklch(100% 0 0) } }

@media only screen and (max-height: 600px) { :where([uc-wgt-common]) { --uc-dialog-max-height: 100% } }

@media only screen and (max-width: 430px) { :where([uc-wgt-common]) { --uc-dialog-max-width: 100vw; --uc-dialog-max-height: var(--uploadcare-blocks-window-height) } }

@media (prefers-color-scheme: light) { :where([uc-wgt-common]) { --uc-background: var(--uc-background-light); --uc-foreground: var(--uc-foreground-light); --uc-primary: var(--uc-primary-light); --uc-primary-hover: var(--uc-primary-hover-light); --uc-primary-transparent: var(--uc-primary-transparent-light); --uc-primary-foreground: var(--uc-primary-foreground-light); --uc-secondary: var(--uc-secondary-light); --uc-secondary-hover: var(--uc-secondary-hover-light); --uc-secondary-foreground: var(--uc-secondary-foreground-light); --uc-muted: var(--uc-muted-light); --uc-muted-foreground: var(--uc-muted-foreground-light); --uc-destructive: var(--uc-destructive-light); --uc-destructive-foreground: var(--uc-destructive-foreground-light); --uc-border: var(--uc-border-light); --uc-dialog-shadow: var(--uc-dialog-shadow-light); --uc-simple-btn: var(--uc-simple-btn-light); --uc-simple-btn-hover: var(--uc-simple-btn-hover-light); --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light) } }

@media (prefers-color-scheme: dark) { :where([uc-wgt-common]) { --uc-background: var(--uc-background-dark); --uc-foreground: var(--uc-foreground-dark); --uc-primary: var(--uc-primary-dark); --uc-primary-hover: var(--uc-primary-hover-dark); --uc-primary-transparent: var(--uc-primary-transparent-dark); --uc-primary-foreground: var(--uc-primary-foreground-dark); --uc-secondary: var(--uc-secondary-dark); --uc-secondary-hover: var(--uc-secondary-hover-dark); --uc-secondary-foreground: var(--uc-secondary-foreground-dark); --uc-muted: var(--uc-muted-dark); --uc-muted-foreground: var(--uc-muted-foreground-dark); --uc-destructive: var(--uc-destructive-dark); --uc-destructive-foreground: var(--uc-destructive-foreground-dark); --uc-border: var(--uc-border-dark); --uc-dialog-shadow: var(--uc-dialog-shadow-dark); --uc-simple-btn: var(--uc-simple-btn-dark); --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark); --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark) } }

:where(.uc-light) { --uc-background: var(--uc-background-light); --uc-foreground: var(--uc-foreground-light); --uc-primary: var(--uc-primary-light); --uc-primary-hover: var(--uc-primary-hover-light); --uc-primary-transparent: var(--uc-primary-transparent-light); --uc-primary-foreground: var(--uc-primary-foreground-light); --uc-secondary: var(--uc-secondary-light); --uc-secondary-hover: var(--uc-secondary-hover-light); --uc-secondary-foreground: var(--uc-secondary-foreground-light); --uc-muted: var(--uc-muted-light); --uc-muted-foreground: var(--uc-muted-foreground-light); --uc-destructive: var(--uc-destructive-light); --uc-destructive-foreground: var(--uc-destructive-foreground-light); --uc-border: var(--uc-border-light); --uc-dialog-shadow: var(--uc-dialog-shadow-light); --uc-simple-btn: var(--uc-simple-btn-light); --uc-simple-btn-hover: var(--uc-simple-btn-hover-light); --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-light) }

:where(.uc-dark) { --uc-background: var(--uc-background-dark); --uc-foreground: var(--uc-foreground-dark); --uc-primary: var(--uc-primary-dark); --uc-primary-hover: var(--uc-primary-hover-dark); --uc-primary-transparent: var(--uc-primary-transparent-dark); --uc-primary-foreground: var(--uc-primary-foreground-dark); --uc-secondary: var(--uc-secondary-dark); --uc-secondary-hover: var(--uc-secondary-hover-dark); --uc-secondary-foreground: var(--uc-secondary-foreground-dark); --uc-muted: var(--uc-muted-dark); --uc-muted-foreground: var(--uc-muted-foreground-dark); --uc-destructive: var(--uc-destructive-dark); --uc-destructive-foreground: var(--uc-destructive-foreground-dark); --uc-border: var(--uc-border-dark); --uc-dialog-shadow: var(--uc-dialog-shadow-dark); --uc-simple-btn: var(--uc-simple-btn-dark); --uc-simple-btn-hover: var(--uc-simple-btn-hover-dark); --uc-simple-btn-foreground: var(--uc-simple-btn-foreground-dark) }

:where(.uc-purple) { --uc-primary-oklch-light: 59% .22 300; --uc-primary-oklch-dark: 69% .1768 300 }

:where(.uc-red) { --uc-primary-oklch-light: 59% .22 21; --uc-primary-oklch-dark: 69% .1768 21 }

:where(.uc-orange) { --uc-primary-oklch-light: 59% .1724 51.88; --uc-primary-oklch-dark: 69% .1768 51.88 }

:where(.uc-green) { --uc-primary-oklch-light: 59% .1724 130; --uc-primary-oklch-dark: 69% .1768 130 }

:where(.uc-turquoise) { --uc-primary-oklch-light: 59% .1523 174; --uc-primary-oklch-dark: 69% .1768 174 }

:where(.uc-gray) { --uc-primary-oklch-light: 10% 0 0; --uc-primary-oklch-dark: 97% 0 0 }

:where([uc-wgt-common]) { color: var(--uc-foreground); font-size: var(--uc-font-size); line-height: var(--uc-line-height); font-family: var(--uc-font-family) }

:where([uc-wgt-common]) * { box-sizing: border-box }

:where([uc-wgt-common]) [hidden] { display: none!important }

:where([uc-wgt-common]) [activity]:not([active]) { display: none }

:where([uc-wgt-common]) dialog:not([open]) [activity] { display: none }

:where([uc-wgt-common]) button { display: flex; align-items: center; justify-content: center; height: var(--uc-button-size); padding-right: 14px; padding-left: 14px; font-size: 1em; font-family: inherit; white-space: nowrap; border: none; border-radius: var(--uc-radius); cursor: pointer; -webkit-user-select: none; user-select: none; transition: background-color var(--uc-transition) }

:where([uc-wgt-common]) button.uc-primary-btn { color: var(--uc-primary-foreground); background-color: var(--uc-primary) }

:where([uc-wgt-common]) button.uc-primary-btn:hover { background-color: var(--uc-primary-hover) }

:where([uc-wgt-common]) button.uc-secondary-btn { color: var(--uc-secondary-foreground); background-color: var(--uc-secondary) }

:where([uc-wgt-common]) button.uc-secondary-btn:hover { background-color: var(--uc-secondary-hover) }

:where([uc-wgt-common]) button.uc-mini-btn { height: var(--uc-button-size); padding: 0; background-color: transparent; color: var(--uc-secondary-foreground) }

:where([uc-wgt-common]) button.uc-mini-btn:hover { background-color: var(--uc-secondary) }

:where([uc-wgt-common]) :is(button[disabled],button.uc-primary-btn[disabled],button.uc-secondary-btn[disabled]) { opacity: .5; pointer-events: none }

:where([uc-wgt-common]) a { color: var(--uc-primary); text-decoration: none }

:where([uc-wgt-common]) a[disabled] { pointer-events: none }

:where([uc-wgt-common]) input[type=text] { display: flex; width: 100%; height: var(--uc-button-size); padding-right: 10px; padding-left: 10px; color: var(--uc-foreground); font-size: 1em; font-family: inherit; background-color: var(--uc-background); border: 1px solid var(--uc-border); outline: 1px solid transparent; border-radius: var(--uc-radius); transition: border-color var(--uc-transition),outline-color var(--uc-transition) }

:where([uc-wgt-common]) input[type=text]::-webkit-input-placeholder { color: var(--uc-muted-foreground) }

:where([uc-wgt-common]) input[type=text]::placeholder { color: var(--uc-muted-foreground) }

:where([uc-wgt-common]) input[type=text]:focus { outline-color: var(--uc-primary-hover); border-color: var(--uc-primary-hover) }

:where([uc-wgt-common]) input[disabled] { opacity: .6; pointer-events: none }

uc-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--uc-button-size); height: var(--uc-button-size) }

uc-icon svg { width: calc(var(--uc-button-size) / 2); height: calc(var(--uc-button-size) / 2) }

uc-range { position: relative; display: inline-flex; align-items: center; justify-content: center; height: var(--uc-button-size) }

uc-range datalist { display: none }

uc-range input { width: 100%; height: 100%; opacity: 0 }

uc-range .uc-track-wrapper { position: absolute; right: 10px; left: 10px; display: flex; align-items: center; justify-content: center; height: 2px; -webkit-user-select: none; user-select: none; pointer-events: none }

uc-range .uc-track { position: absolute; right: 0; left: 0; display: flex; align-items: center; justify-content: center; height: 2px; background-color: currentColor; border-radius: 2px; opacity: .5 }

uc-range .uc-slider { position: absolute; width: 16px; height: 16px; background-color: currentColor; border-radius: 100%; -webkit-transform: translate(-50%); transform: translate(-50%) }

uc-range .uc-bar { position: absolute; left: 0; height: 100%; background-color: currentColor; border-radius: 2px }

uc-range .uc-caption { position: absolute; display: inline-flex; justify-content: center }

uc-config { display: none }

:where([uc-simple-btn]) { position: relative; display: inline-flex }

:where([uc-simple-btn]) button { height: auto; gap: .5em; padding: var(--uc-simple-btn-padding); background-color: var(--uc-simple-btn); color: var(--uc-simple-btn-foreground); font-size: var(--uc-simple-btn-font-size); font-family: var(--uc-simple-btn-font-family) }

:where([uc-simple-btn]) button uc-icon { width: auto; height: auto }

:where([uc-simple-btn]) button uc-icon svg { width: .9em; height: .9em }

:where([uc-simple-btn]) button:hover { background-color: var(--uc-simple-btn-hover) }

:where([uc-simple-btn])>uc-drop-area { display: contents }

:where([uc-simple-btn]) .uc-visual-drop-area { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--uc-simple-btn-padding); background-color: transparent; color: transparent; font-size: var(--uc-simple-btn-font-size); border: 1px dashed var(--uc-simple-btn-foreground); border-radius: inherit; opacity: 0; transition: opacity var(--uc-transition) }

:where([uc-simple-btn])>uc-drop-area[drag-state=active] .uc-visual-drop-area { opacity: 1 }

:where([uc-simple-btn])>uc-drop-area[drag-state=inactive] .uc-visual-drop-area { opacity: 0 }

:where([uc-simple-btn])>uc-drop-area[drag-state=near] .uc-visual-drop-area { opacity: 1 }

:where([uc-simple-btn])>uc-drop-area[drag-state=over] .uc-visual-drop-area { opacity: 1 }

uc-source-btn>button { display: flex; align-items: center; margin-bottom: 2px; padding: 2px var(--uc-padding); color: var(--uc-foreground); border-radius: var(--uc-radius); cursor: pointer; transition: background-color var(--uc-transition),color var(--uc-transition); -webkit-user-select: none; user-select: none; width: 100%; background-color: unset; height: unset }

uc-source-btn:last-child>button { margin-bottom: 0 }

uc-source-btn>button:hover { color: var(--uc-primary); background-color: var(--uc-primary-transparent) }

uc-source-btn uc-icon { display: inline-flex; flex-grow: 1; justify-content: center; min-width: var(--uc-button-size); margin-right: var(--uc-padding); opacity: .8 }

uc-source-btn .uc-txt { display: flex; align-items: center; box-sizing: border-box; width: 100%; height: var(--uc-button-size); padding: 0; white-space: nowrap; border: none }

:where([uc-drop-area]) { padding: 2px; overflow: hidden; border: 1px dashed var(--uc-border); border-radius: calc(var(--uc-radius) * 1.75); transition: border var(--uc-transition),border-radius var(--uc-transition) }

:where([uc-drop-area]),:where([uc-drop-area]) .uc-content-wrapper { display: flex; align-items: center; justify-content: center; width: 100%; height: 100% }

:where([uc-drop-area]) .uc-text { position: relative; margin: var(--uc-padding); color: var(--uc-muted-foreground); transition: color var(--uc-transition) }

:where([uc-drop-area])[ghost][drag-state=inactive] { display: none }

:where([uc-drop-area])[ghost]:not([fullscreen]):is([drag-state=active],[drag-state=near],[drag-state=over]) { background: var(--uc-background) }

:where([uc-drop-area])[with-icon]>.uc-content-wrapper:is([drag-state=active],[drag-state=near],[drag-state=over]) :is(.uc-text,.uc-icon-container) { color: var(--uc-primary) }

:where([uc-drop-area]):is([drag-state=active],[drag-state=near],[drag-state=over],:hover) { color: var(--uc-primary); background: var(--uc-primary-transparent); border-color: var(--uc-primary-transparent) }

:where([uc-drop-area]):is([drag-state=active],[drag-state=near]) { opacity: 1 }

:where([uc-drop-area])[drag-state=over] { border-color: var(--uc-primary); opacity: 1 }

:where([uc-drop-area])[with-icon] { min-height: 180px }

:where([uc-drop-area])[with-icon] .uc-content-wrapper { display: flex; flex-direction: column }

:where([uc-drop-area])[with-icon] .uc-text { color: var(--uc-foreground); font-weight: 500; font-size: 1.1em }

:where([uc-drop-area])[with-icon] .uc-icon-container { position: relative; width: 64px; height: 64px; margin: var(--uc-padding); overflow: hidden; color: var(--uc-foreground); background-color: var(--uc-muted); border-radius: 50%; transition: color var(--uc-transition),background-color var(--uc-transition) }

:where([uc-drop-area])[with-icon] uc-icon { position: absolute; width: 32px; height: 32px; top: calc(50% - 16px); left: calc(50% - 16px); transition: -webkit-transform var(--uc-transition); transition: transform var(--uc-transition); transition: transform var(--uc-transition),-webkit-transform var(--uc-transition) }

:where([uc-drop-area])[with-icon] uc-icon:last-child { -webkit-transform: translateY(48px); transform: translateY(48px) }

:where([uc-drop-area])[with-icon]:hover .uc-icon-container,:where([uc-drop-area])[with-icon]:hover .uc-text { color: var(--uc-primary) }

:where([uc-drop-area])[with-icon]:hover .uc-icon-container { background-color: var(--uc-primary-transparent) }

:where([uc-drop-area])[with-icon]>.uc-content-wrapper:is([drag-state=active],[drag-state=near],[drag-state=over]) .uc-icon-container { color: var(--uc-primary-foreground); background-color: var(--uc-primary) }

:where([uc-drop-area])[with-icon]>.uc-content-wrapper:is([drag-state=active],[drag-state=near],[drag-state=over]) .uc-text { color: var(--uc-primary) }

:where([uc-drop-area])[with-icon]>.uc-content-wrapper:is([drag-state=active],[drag-state=near],[drag-state=over]) uc-icon:first-child { -webkit-transform: translateY(-48px); transform: translateY(-48px) }

:where([uc-drop-area])[with-icon]>.uc-content-wrapper:is([drag-state=active],[drag-state=near],[drag-state=over]) uc-icon:last-child { -webkit-transform: translateY(0); transform: translateY(0) }

:where([uc-drop-area])[with-icon]>.uc-content-wrapper[drag-state=near] uc-icon:last-child { -webkit-transform: scale(1.3); transform: scale(1.3) }

:where([uc-drop-area])[with-icon]>.uc-content-wrapper[drag-state=over] uc-icon:last-child { -webkit-transform: scale(1.5); transform: scale(1.5) }

:where([uc-drop-area])[fullscreen] { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; width: calc(100vw - var(--uc-padding) 2); height: calc(100vh - var(--uc-padding) 2); margin: var(--uc-padding) }

:where([uc-drop-area])[fullscreen] .uc-content-wrapper { width: 100%; max-width: calc(var(--uc-dialog-width) .8); height: 180px; color: var(--uc-foreground); background-color: var(--uc-background); border-radius: calc(var(--uc-radius) 1.75); box-shadow: var(--uc-dialog-shadow); transition: color var(--uc-transition),background-color var(--uc-transition),box-shadow var(--uc-transition),border-radius var(--uc-transition),-webkit-transform var(--uc-transition); transition: color var(--uc-transition),background-color var(--uc-transition),box-shadow var(--uc-transition),border-radius var(--uc-transition),transform var(--uc-transition); transition: color var(--uc-transition),background-color var(--uc-transition),box-shadow var(--uc-transition),border-radius var(--uc-transition),transform var(--uc-transition),-webkit-transform var(--uc-transition) }

:where([uc-drop-area])[with-icon][fullscreen][drag-state=active]>.uc-content-wrapper,:where([uc-drop-area])[with-icon][fullscreen][drag-state=near]>.uc-content-wrapper { -webkit-transform: translateY(10px); transform: translateY(10px); opacity: 0 }

:where([uc-drop-area])[with-icon][fullscreen][drag-state=over]>.uc-content-wrapper { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 }

:is(:where([uc-drop-area])[with-icon][fullscreen])>.uc-content-wrapper uc-icon:first-child { -webkit-transform: translateY(-48px); transform: translateY(-48px) }

:where([uc-drop-area])[clickable] { cursor: pointer }

:where([uc-modal]) { --modal-max-content-height: calc( var(--uploadcare-blocks-window-height, 100vh) - 4 * var(--uc-padding) - var(--uc-button-size) ); --modal-content-height-fill: var(--uploadcare-blocks-window-height, 100vh) }

:where([uc-modal])[dialog-fallback] { --uc-z-max: 2147483647; position: fixed; z-index: var(--uc-z-max); display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; pointer-events: none; inset: 0 }

:where([uc-modal])[dialog-fallback] dialog[open] { z-index: var(--uc-z-max); pointer-events: auto }

:where([uc-modal])[dialog-fallback] dialog[open]+.uc-backdrop { position: fixed; top: 0; left: 0; z-index: calc(var(--uc-z-max) - 1); align-items: center; justify-content: center; width: 100vw; height: 100vh; background-color: #0000001a; pointer-events: auto }

:where([uc-modal])[strokes][dialog-fallback] dialog[open]+.uc-backdrop { background-image: var(--modal-backdrop-background-image) }

@supports selector(dialog::backdrop) { :where([uc-modal])>dialog::-webkit-backdrop { background-color: #0000001a }

:where([uc-modal])>dialog::backdrop {
    background-color: #0000001a
}

:where([uc-modal])[strokes]>dialog::-webkit-backdrop {
    background-image: var(--modal-backdrop-background-image)
}

:where([uc-modal])[strokes]>dialog::backdrop {
    background-image: var(--modal-backdrop-background-image)
}

}

:where([uc-modal])>dialog[open] { -webkit-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1 }

:where([uc-modal])>dialog:not([open]) { -webkit-transform: translateY(20px); transform: translateY(20px); visibility: hidden; opacity: 0 }

:where([uc-modal])>dialog { display: flex; flex-direction: column; width: -webkit-max-content; width: max-content; max-width: min(calc(100% - var(--uc-padding) 2),calc(var(--uc-dialog-max-width) - var(--uc-padding) 2)); min-height: var(--uc-button-size); max-height: calc(var(--uc-dialog-max-height) - var(--uc-padding) 2); margin: auto; padding: 0; overflow: hidden; background-color: var(--uc-background); border: 0; border-radius: calc(var(--uc-radius) 1.75); box-shadow: var(--uc-dialog-shadow); transition: opacity .4s ease,-webkit-transform .4s ease; transition: transform .4s ease,opacity .4s ease; transition: transform .4s ease,opacity .4s ease,-webkit-transform .4s ease }

@media only screen and (max-width: 430px),only screen and (max-height: 600px) { :where([uc-modal])>dialog>.uc-content { height:var(--modal-max-content-height) } }

uc-url-source { display: block; background-color: var(--uc-background) }

[uc-modal] uc-url-source { width: min(calc(var(--uc-dialog-width) - var(--uc-padding) 2),calc(var(--uc-dialog-max-width) - var(--uc-padding) 2),calc(100vw - var(--uc-padding) * 2)) }

uc-url-source>.uc-content { display: grid; grid-gap: 4px; grid-template-columns: 1fr -webkit-min-content; grid-template-columns: 1fr min-content; padding: var(--uc-padding); padding-top: 0 }

uc-url-source .uc-url-input { display: flex }

uc-camera-source { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; max-height: 100%; overflow: hidden; background-color: var(--uc-background); border-radius: var(--uc-radius) }

[uc-modal] uc-camera-source { width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) 2),calc(100vw - var(--uc-padding) 2)); height: 100vh; max-height: var(--modal-max-content-height) }

uc-camera-source.uc-initialized { height: -webkit-max-content; height: max-content }

@media only screen and (max-width: 430px) { uc-camera-source { width:calc(100vw - var(--uc-padding) * 2); height: var(--modal-content-height-fill, 100%) } }

uc-camera-source video { display: block; width: 100%; max-height: 100%; object-fit: contain; object-position: center center; background-color: var(--uc-muted); border-radius: var(--uc-radius) }

uc-camera-source .uc-toolbar { position: absolute; bottom: 0; display: flex; justify-content: space-between; width: 100%; padding: var(--uc-padding); background-color: var(--uc-background) }

uc-camera-source .uc-content { display: flex; flex: 1; justify-content: center; width: 100%; padding: var(--uc-padding); padding-top: 0; overflow: hidden }

uc-camera-source .uc-message-box { display: flex; flex-direction: column; grid-gap: 40px; align-items: center; justify-content: center; padding: 40px 40px 0; color: var(--uc-foreground) }

uc-camera-source .uc-message-box button { color: var(--uc-primary-foreground); background-color: var(--uc-primary) }

uc-camera-source .uc-shot-btn { position: absolute; bottom: 20px; width: 58px; height: 58px; color: var(--uc-background); background-color: var(--uc-foreground); border-radius: 50%; opacity: .85; transition: bottom var(--uc-transition),opacity var(--uc-transition),-webkit-transform var(--uc-transition); transition: bottom var(--uc-transition),opacity var(--uc-transition),transform var(--uc-transition); transition: bottom var(--uc-transition),opacity var(--uc-transition),transform var(--uc-transition),-webkit-transform var(--uc-transition) }

uc-camera-source .uc-shot-btn:hover { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 1 }

uc-camera-source .uc-shot-btn:active { -webkit-transform: scale(1); transform: scale(1); opacity: 1 }

uc-camera-source .uc-shot-btn[disabled] { bottom: -80px }

uc-camera-source .uc-shot-btn uc-icon svg { width: 20px; height: 20px }

uc-external-source { display: flex; flex-direction: column; width: 100%; height: 100%; background-color: var(--uc-background); overflow: hidden }

[uc-modal] uc-external-source { width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) 2),calc(var(--uc-dialog-max-width) - var(--uc-padding) 2)); height: var(--modal-content-height-fill, 100%); max-height: var(--modal-max-content-height) }

uc-external-source>.uc-content { position: relative; display: grid; flex: 1; grid-template-rows: 1fr -webkit-min-content; grid-template-rows: 1fr min-content }

@media only screen and (max-width: 430px) { uc-external-source { width:calc(100vw - var(--uc-padding) * 2); height: var(--modal-content-height-fill, 100%) } }

uc-external-source iframe { display: block; width: 100%; height: 100%; border: none }

uc-external-source .uc-iframe-wrapper { overflow: hidden }

uc-external-source .uc-toolbar { display: grid; grid-gap: var(--uc-padding); grid-template-columns: -webkit-max-content 1fr -webkit-max-content -webkit-max-content; grid-template-columns: max-content 1fr max-content max-content; align-items: center; width: 100%; padding: var(--uc-padding); border-top: 1px solid var(--uc-border) }

uc-external-source .uc-back-btn { padding-left: 0 }

uc-external-source .uc-selected-counter { display: flex; grid-gap: var(--uc-padding); align-items: center; justify-content: space-between; padding: var(--uc-padding); color: var(--uc-muted-foreground) }

uc-upload-list { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; background-color: var(--uc-background); transition: opacity var(--uc-transition) }

[uc-modal] uc-upload-list { width: min(calc(var(--uc-dialog-width) - var(--uc-padding) 2),calc(var(--uc-dialog-max-width) - var(--uc-padding) 2),calc(100vw - var(--uc-padding) * 2)); height: -webkit-max-content; height: max-content; max-height: var(--modal-max-content-height) }

uc-upload-list .uc-no-files { height: 32px; padding: 20px }

uc-upload-list .uc-files { display: block; flex: 1; min-height: 32px; padding: 0 var(--uc-padding); overflow: auto }

uc-upload-list .uc-toolbar { display: flex; gap: 4px; justify-content: space-between; padding: var(--uc-padding); background-color: var(--uc-background) }

uc-upload-list .uc-toolbar-spacer { flex: 1 }

uc-upload-list uc-drop-area { position: absolute; top: 0; left: 0; width: calc(100% - var(--uc-padding) 2); height: calc(100% - var(--uc-padding) 2); margin: var(--uc-padding); border-radius: var(--uc-radius) }

uc-upload-list uc-activity-header>.uc-header-text { padding: 0 var(--uc-padding) }

uc-upload-list .uc-common-error { border-radius: var(--uc-radius); color: var(--uc-destructive-foreground); background-color: var(--uc-destructive); display: flex; align-items: center; justify-content: center; padding: var(--uc-padding); margin: 4px var(--uc-padding) 0 var(--uc-padding); font-size: .925em }

uc-upload-list .uc-add-more-btn uc-icon { display: none }

uc-start-from { display: block; overflow-y: auto }

uc-start-from .uc-content { display: grid; grid-auto-flow: row; gap: calc(var(--uc-padding) 2); width: 100%; height: 100%; padding: calc(var(--uc-padding) 2); background-color: var(--uc-background) }

[uc-modal] uc-start-from { width: min(calc(var(--uc-dialog-width) - var(--uc-padding) 2),calc(var(--uc-dialog-max-width) - var(--uc-padding) 2),calc(100vw - var(--uc-padding) * 2)) }

[uc-modal] uc-start-from uc-drop-area { border-radius: var(--uc-radius) }

@media only screen and (max-width: 430px) { [uc-modal] uc-start-from uc-drop-area { display:none } }

uc-file-item { --uc-file-item-gap: 4px; --uc-file-item-height: calc(var(--uc-preview-size) + var(--uc-padding) * 2 + var(--uc-file-item-gap)); display: block; overflow: hidden; min-height: var(--uc-file-item-height) }

uc-file-item:last-of-type { --uc-file-item-gap: 0 }

uc-file-item>.uc-inner { position: relative; display: grid; grid-template-columns: var(--uc-preview-size) 1fr -webkit-max-content; grid-template-columns: var(--uc-preview-size) 1fr max-content; gap: 2px; align-items: center; margin-bottom: var(--uc-file-item-gap); padding: var(--uc-padding); overflow: hidden; font-size: .925em; background-color: var(--uc-muted); border-radius: var(--uc-radius); transition: background-color var(--uc-transition) }

uc-file-item>.uc-inner[focused] { background-color: transparent }

uc-file-item>.uc-inner[uploading] .uc-edit-btn { display: none }

uc-file-item>:where(.uc-inner[failed],.uc-inner[limit-overflow]) { background-color: var(--uc-destructive) }

uc-file-item .uc-thumb { position: relative; display: inline-flex; width: var(--uc-preview-size); height: var(--uc-preview-size); background-color: var(--uc-secondary); background-position: center center; background-size: cover; border-radius: var(--uc-radius) }

uc-file-item .uc-file-name-wrapper { text-align: left; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; max-width: 100%; padding-right: var(--uc-padding); padding-left: var(--uc-padding); overflow: hidden; color: var(--uc-muted-foreground) }

uc-file-item .uc-file-name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }

uc-file-item .uc-file-error { display: none; color: var(--uc-destructive-foreground); font-size: .85em }

uc-file-item button.uc-remove-btn,uc-file-item button.uc-edit-btn { color: var(--uc-muted-foreground) }

uc-file-item button svg { pointer-events: none }

uc-file-item button.uc-upload-btn { display: none }

uc-file-item .uc-badge { position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; color: var(--uc-background); background-color: var(--uc-foreground); border-radius: 50%; -webkit-transform: scale(.3); transform: scale(.3); opacity: 0; transition: opacity var(--uc-transition),-webkit-transform var(--uc-transition); transition: opacity var(--uc-transition),transform var(--uc-transition); transition: opacity var(--uc-transition),transform var(--uc-transition),-webkit-transform var(--uc-transition); display: flex; justify-content: center; align-items: center }

uc-file-item>.uc-inner:where([failed],[limit-overflow],[finished]) .uc-badge { -webkit-transform: scale(1); transform: scale(1); opacity: 1 }

uc-file-item>.uc-inner:where([failed],[limit-overflow]) .uc-badge { background-color: var(--uc-destructive-foreground) }

uc-file-item>.uc-inner:where([failed],[limit-overflow]) .uc-file-error { display: block }

uc-file-item .uc-badge uc-icon,uc-file-item .uc-badge uc-icon svg { width: 100%; height: 100% }

uc-file-item .uc-progress-bar { opacity: .5; top: calc(100% - 2px); height: 2px }

uc-file-item .uc-file-actions { display: flex; gap: 2px; align-items: center; justify-content: center }

uc-progress-bar-common { position: fixed; right: 0; bottom: 0; left: 0; z-index: 10000; display: block; height: 10px; background-color: var(--uc-background); transition: opacity .3s }

uc-progress-bar-common:not([active]) { opacity: 0; pointer-events: none }

uc-progress-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none }

uc-progress-bar .uc-progress { width: calc(var(--l-width) * 1%); height: 100%; background-color: var(--uc-primary); -webkit-transform: translate(0); transform: translate(0); opacity: 1; transition: width .6s,opacity .3s }

uc-progress-bar .uc-progress--hidden { opacity: 0 }

uc-activity-header { display: flex; justify-content: space-between; gap: var(--uc-padding); padding: var(--uc-padding); color: var(--uc-foreground); font-weight: 500; font-size: 1em }

uc-activity-header>* { display: flex; align-items: center }

uc-copyright { display: flex; width: 100%; justify-content: center }

uc-copyright .uc-credits { all: unset; position: absolute; bottom: 12px; background-color: var(--uc-background); padding: 2px 5px; border-radius: 6px; color: var(--uc-muted-foreground); font-weight: 400; font-size: 12px; opacity: .9; cursor: pointer; transition: opacity var(--uc-transition),background-color var(--uc-transition) }

uc-copyright .uc-credits:focus-visible { outline: 1px auto -webkit-focus-ring-color }

uc-copyright .uc-credits:hover { opacity: 1; background-color: var(--uc-muted) }

[uc-cloud-image-editor] { --color-primary-accent: var(--uc-primary); --color-text-base: var(--uc-foreground); --color-text-accent-contrast: var(--uc-background); --color-fill-contrast: var(--uc-background); --color-modal-backdrop: oklch(0 0 0 / .1); --color-image-background: var(--uc-muted); --color-focus-ring: var(--color-primary-accent); --color-crop-guides: var(--uc-foreground); --font-size-ui: var(--uc-font-size); --size-touch-area: var(--uc-button-size); --size-panel-heading: calc(var(--uc-button-size) + var(--uc-padding) * 2); --size-ui-min-width: 130px; --size-line-width: 1px; --size-modal-width: 650px; --size-icon: calc(var(--uc-button-size) / 2); --border-radius-editor: var(--uc-radius); --border-radius-thumb: var(--uc-radius); --border-radius-ui: var(--uc-radius); --border-radius-base: var(--uc-radius); --cldtr-gap-min: 5px; --cldtr-gap-mid-1: 10px; --cldtr-gap-mid-2: 15px; --cldtr-gap-max: 20px; --transition-duration-2: var(--transition-duration-all, .2s); --transition-duration-3: var(--transition-duration-all, .3s); --transition-duration-4: var(--transition-duration-all, .4s); --transition-duration-5: var(--transition-duration-all, .5s); --modal-header-opacity: 1; --modal-header-height: var(--size-panel-heading); --modal-toolbar-height: var(--size-panel-heading); --transparent-pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=); display: block; width: 100%; height: 100%; max-height: 100% }

[uc-cloud-image-editor] :is([can-handle-paste]:hover,[can-handle-paste]:focus) { --can-handle-paste: "true" }

[uc-cloud-image-editor] :is([tabindex][focus-visible],[tabindex]:hover,[with-effects][focus-visible],[with-effects]:hover) { --filter-effect: var(--hover-filter) !important; --opacity-effect: var(--hover-opacity) !important; --color-effect: var(--hover-color-rgb) !important; --background-effect: var(--hover-background) !important }

[uc-cloud-image-editor] :is([tabindex]:active,[with-effects]:active) { --filter-effect: var(--down-filter) !important; --opacity-effect: var(--down-opacity) !important; --color-effect: var(--down-color-rgb) !important; --background-effect: var(--down-background) !important }

[uc-cloud-image-editor] :is([tabindex][active],[with-effects][active]) { --filter-effect: var(--active-filter) !important; --opacity-effect: var(--active-opacity) !important; --color-effect: var(--active-color-rgb) !important; --background-effect: var(--active-background) !important }

[uc-cloud-image-editor] [hidden-scrollbar]::-webkit-scrollbar { display: none }

[uc-cloud-image-editor] [hidden-scrollbar] { -ms-overflow-style: none; scrollbar-width: none }

[uc-cloud-image-editor].uc-editor_ON { --modal-header-opacity: 0; --modal-header-height: 0px; --modal-toolbar-height: calc(var(--size-panel-heading) * 2) }

[uc-cloud-image-editor].uc-editor_OFF { --modal-header-opacity: 1; --modal-header-height: var(--size-panel-heading); --modal-toolbar-height: var(--size-panel-heading) }

[uc-cloud-image-editor]>.uc-wrapper { --l-min-img-height: var(--modal-toolbar-height); --l-max-img-height: 100%; --l-edit-button-width: 120px; --l-toolbar-horizontal-padding: var(--cldtr-gap-mid-1); position: relative; display: grid; grid-template-rows: minmax(var(--l-min-img-height),var(--l-max-img-height)) minmax(var(--modal-toolbar-height),auto); height: 100%; overflow: hidden; overflow-y: auto }

@media only screen and (max-width: 800px) { [uc-cloud-image-editor]>.uc-wrapper { --l-edit-button-width: 70px; --l-toolbar-horizontal-padding: var(--cldtr-gap-min) } }

[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport { display: flex; align-items: center; justify-content: center; overflow: hidden }

[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-image_container>.uc-image { --viewer-image-opacity: 1; position: absolute; top: 0; left: 0; z-index: 10; display: block; box-sizing: border-box; width: 100%; height: 100%; object-fit: scale-down; background-color: var(--color-image-background); -webkit-transform: scale(1); transform: scale(1); opacity: var(--viewer-image-opacity); -webkit-user-select: none; user-select: none; pointer-events: auto }

[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-image_container>.uc-image.uc-image_visible_viewer { transition: opacity var(--transition-duration-3) ease-in-out,-webkit-transform var(--transition-duration-4); transition: opacity var(--transition-duration-3) ease-in-out,transform var(--transition-duration-4); transition: opacity var(--transition-duration-3) ease-in-out,transform var(--transition-duration-4),-webkit-transform var(--transition-duration-4) }

[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-image_container>.uc-image.uc-image_hidden_to_cropper { --viewer-image-opacity: 0; background-image: var(--transparent-pixel); -webkit-transform: scale(1); transform: scale(1); transition: opacity var(--transition-duration-3) steps(1,jump-end),-webkit-transform var(--transition-duration-4); transition: transform var(--transition-duration-4),opacity var(--transition-duration-3) steps(1,jump-end); transition: transform var(--transition-duration-4),opacity var(--transition-duration-3) steps(1,jump-end),-webkit-transform var(--transition-duration-4); pointer-events: none }

[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-image_container>.uc-image.uc-image_hidden_effects { --viewer-image-opacity: 0; -webkit-transform: scale(1); transform: scale(1); transition: opacity var(--transition-duration-3) cubic-bezier(.5,0,1,1),-webkit-transform var(--transition-duration-4); transition: opacity var(--transition-duration-3) cubic-bezier(.5,0,1,1),transform var(--transition-duration-4); transition: opacity var(--transition-duration-3) cubic-bezier(.5,0,1,1),transform var(--transition-duration-4),-webkit-transform var(--transition-duration-4); pointer-events: none }

[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-image_container { position: relative; display: block; width: 100%; height: 100%; background-color: var(--color-image-background); transition: var(--transition-duration-3) }

[uc-cloud-image-editor]>.uc-wrapper>.uc-toolbar { position: relative; transition: .3s }

[uc-cloud-image-editor]>.uc-wrapper>.uc-toolbar>.uc-toolbar_content { position: absolute; bottom: 0; left: 0; box-sizing: border-box; width: 100%; height: var(--modal-toolbar-height); min-height: var(--size-panel-heading); background-color: var(--color-fill-contrast) }

[uc-cloud-image-editor]>.uc-wrapper>.uc-toolbar>.uc-toolbar_content.uc-toolbar_content__viewer { display: flex; align-items: center; justify-content: space-between; height: var(--size-panel-heading); padding-right: var(--l-toolbar-horizontal-padding); padding-left: var(--l-toolbar-horizontal-padding) }

[uc-cloud-image-editor]>.uc-wrapper>.uc-toolbar>.uc-toolbar_content.uc-toolbar_content__editor { display: flex }

[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-info_pan { position: absolute; -webkit-user-select: none; user-select: none }

[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-file_type_outer { position: absolute; z-index: 2; display: flex; max-width: 120px; -webkit-transform: translate(-40px); transform: translate(-40px); -webkit-user-select: none; user-select: none }

[uc-cloud-image-editor]>.uc-wrapper>.uc-viewport>.uc-file_type_outer>.uc-file_type { padding: 4px .8em }

[uc-cloud-image-editor]>.uc-wrapper>.uc-network_problems_splash { position: absolute; z-index: 4; display: flex; flex-direction: column; width: 100%; height: 100%; background-color: var(--color-fill-contrast) }

[uc-cloud-image-editor]>.uc-wrapper>.uc-network_problems_splash>.uc-network_problems_content { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center }

[uc-cloud-image-editor]>.uc-wrapper>.uc-network_problems_splash>.uc-network_problems_content>.uc-network_problems_icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--uc-foreground); background-color: var(--uc-muted); border-radius: 50% }

[uc-cloud-image-editor]>.uc-wrapper>.uc-network_problems_splash>.uc-network_problems_content>.uc-network_problems_text { margin-top: var(--cldtr-gap-max); font-size: var(--font-size-ui); color: var(--uc-foreground) }

[uc-cloud-image-editor]>.uc-wrapper>.uc-network_problems_splash>.uc-network_problems_footer { display: flex; align-items: center; justify-content: center; height: var(--size-panel-heading) }

uc-crop-frame>.uc-svg { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; border-top-left-radius: var(--border-radius-base); border-top-right-radius: var(--border-radius-base); opacity: inherit; transition: var(--transition-duration-3) }

uc-crop-frame>.uc-thumb { --idle-color-rgb: var(--color-text-base); --hover-color-rgb: var(--color-primary-accent); --focus-color-rgb: var(--color-primary-accent); --down-color-rgb: var(--color-primary-accent); --color-effect: var(--idle-color-rgb); color: var(--color-effect); transition: color var(--transition-duration-3),opacity var(--transition-duration-3) }

uc-crop-frame>.uc-thumb--visible { opacity: 1; pointer-events: auto }

uc-crop-frame>.uc-thumb--hidden { opacity: 0; pointer-events: none }

uc-crop-frame>.uc-guides { transition: var(--transition-duration-3) }

uc-crop-frame>.uc-guides--hidden { opacity: 0 }

uc-crop-frame>.uc-guides--semi-hidden { opacity: .2 }

uc-crop-frame>.uc-guides--visible { opacity: 1 }

uc-editor-button-control,uc-editor-crop-button-control,uc-editor-filter-control,uc-editor-operation-control { --l-base-min-width: var(--uc-button-size); --l-base-height: var(--uc-button-size); --opacity-effect: var(--idle-opacity); --color-effect: var(--idle-color-rgb); --background-effect: var(--idle-background); --filter-effect: var(--idle-filter); --idle-color-rgb: var(--uc-secondary-foreground); --idle-opacity: 1; --idle-filter: 1; --idle-background: var(--uc-secondary); --hover-color-rgb: var(--uc-secondary-foreground); --hover-opacity: 1; --hover-filter: .8; --hover-background: var(--uc-secondary-hover); --down-color-rgb: var(--hover-color-rgb); --down-opacity: 1; --down-filter: .6; --down-background: var(--uc-secondary) }

uc-editor-button-control>button,uc-editor-crop-button-control>button,uc-editor-filter-control>button,uc-editor-operation-control>button { all: unset; position: relative; display: grid; grid-template-columns: var(--l-base-min-width) auto; grid-template-rows: 100%; align-items: center; height: var(--l-base-height); color: var(--color-effect); opacity: var(--opacity-effect); outline: none; cursor: pointer; transition: var(--l-width-transition) }

:where(uc-editor-button-control,uc-editor-crop-button-control,uc-editor-filter-control,uc-editor-operation-control)>uc-icon>svg { width: var(--size-icon); height: var(--size-icon) }

uc-editor-filter-control>uc-icon.uc-original-icon>svg { width: 100%; height: 100% }

uc-editor-button-control.uc-active,uc-editor-operation-control.uc-active,uc-editor-crop-button-control.uc-active,uc-editor-filter-control.uc-active { --idle-color-rgb: var(--uc-primary); --idle-background: var(--uc-primary-transparent); --idle-opacity: .9; --hover-color-rgb: var(--uc-primary); --hover-background: var(--uc-primary-transparent); --hover-opacity: 1 }

uc-editor-filter-control.uc-not_active .uc-preview[loaded] { opacity: 1 }

uc-editor-filter-control.uc-active .uc-preview { opacity: 0 }

uc-editor-button-control.uc-not_active,uc-editor-operation-control.uc-not_active,uc-editor-crop-button-control.uc-not_active,uc-editor-filter-control.uc-not_active { --idle-color-rgb: var(--uc-secondary-foreground) }

uc-editor-button-control>button:before,uc-editor-operation-control>button:before,uc-editor-crop-button-control>button:before,uc-editor-filter-control>button:before { position: absolute; content: ""; right: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: var(--background-effect); border-radius: var(--border-radius-editor); transition: var(--transition-duration-3) }

uc-editor-button-control>button .uc-title,uc-editor-operation-control>button .uc-title,uc-editor-crop-button-control>button .uc-title,uc-editor-filter-control>button .uc-title { padding-right: var(--cldtr-gap-mid-1); font-size: .7em; letter-spacing: 1.004px; text-transform: uppercase }

uc-editor-button-control>button uc-icon,uc-editor-operation-control>button uc-icon,uc-editor-crop-button-control>button uc-icon,uc-editor-filter-control>button uc-icon { pointer-events: none }

uc-editor-filter-control>button .uc-preview { position: absolute; right: 0; left: 0; z-index: -1; width: 100%; height: var(--l-base-height); background-repeat: no-repeat; background-size: contain; border-radius: var(--border-radius-editor); opacity: 0; -webkit-filter: brightness(var(--filter-effect)); filter: brightness(var(--filter-effect)); transition: var(--transition-duration-3) }

uc-editor-filter-control>.uc-original-icon { color: var(--color-effect); opacity: .3 }

uc-editor-image-cropper { position: absolute; top: 0; left: 0; z-index: 10; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; touch-action: none; color: var(--color-crop-guides) }

uc-editor-image-cropper.uc-active_from_editor { -webkit-transform: scale(1) translate(0); transform: scale(1) translate(0); opacity: 1; transition: opacity var(--transition-duration-3),-webkit-transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1) .4s; transition: transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1) .4s,opacity var(--transition-duration-3); transition: transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1) .4s,opacity var(--transition-duration-3),-webkit-transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1) .4s; pointer-events: auto }

uc-editor-image-cropper.uc-active_from_viewer { -webkit-transform: scale(1) translate(0); transform: scale(1) translate(0); opacity: 1; transition: opacity var(--transition-duration-3),-webkit-transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1) .4s; transition: transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1) .4s,opacity var(--transition-duration-3); transition: transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1) .4s,opacity var(--transition-duration-3),-webkit-transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1) .4s; pointer-events: auto }

uc-editor-image-cropper.uc-inactive_to_editor { opacity: 0; transition: opacity var(--transition-duration-3) calc(var(--transition-duration-3) + .05s),-webkit-transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1); transition: transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1),opacity var(--transition-duration-3) calc(var(--transition-duration-3) + .05s); transition: transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1),opacity var(--transition-duration-3) calc(var(--transition-duration-3) + .05s),-webkit-transform var(--transition-duration-4) cubic-bezier(.37,0,.63,1); pointer-events: none }

uc-editor-image-cropper>.uc-canvas { position: absolute; top: 0; left: 0; z-index: 1; display: block; width: 100%; height: 100% }

uc-editor-image-fader { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100% }

uc-editor-image-fader.uc-active_from_viewer { z-index: 3; -webkit-transform: scale(1); transform: scale(1); opacity: 1; transition: opacity var(--transition-duration-3) steps(1,jump-start),-webkit-transform var(--transition-duration-4); transition: transform var(--transition-duration-4),opacity var(--transition-duration-3) steps(1,jump-start); transition: transform var(--transition-duration-4),opacity var(--transition-duration-3) steps(1,jump-start),-webkit-transform var(--transition-duration-4); pointer-events: auto }

uc-editor-image-fader.uc-active_from_cropper { z-index: 3; -webkit-transform: scale(1); transform: scale(1); opacity: 1; transition: opacity var(--transition-duration-3) steps(1,jump-end),-webkit-transform var(--transition-duration-4); transition: transform var(--transition-duration-4),opacity var(--transition-duration-3) steps(1,jump-end); transition: transform var(--transition-duration-4),opacity var(--transition-duration-3) steps(1,jump-end),-webkit-transform var(--transition-duration-4); pointer-events: auto }

uc-editor-image-fader.uc-inactive_to_cropper { z-index: 3; -webkit-transform: scale(1); transform: scale(1); opacity: 0; transition: opacity var(--transition-duration-3) steps(1,jump-end),-webkit-transform var(--transition-duration-4); transition: transform var(--transition-duration-4),opacity var(--transition-duration-3) steps(1,jump-end); transition: transform var(--transition-duration-4),opacity var(--transition-duration-3) steps(1,jump-end),-webkit-transform var(--transition-duration-4); pointer-events: none }

uc-editor-image-fader .uc-fader-image { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: scale-down; -webkit-transform: scale(1); transform: scale(1); -webkit-user-select: none; user-select: none; content-visibility: auto }

uc-editor-image-fader .uc-fader-image--preview { background-color: var(--color-image-background); border-top-left-radius: var(--border-radius-base); border-top-right-radius: var(--border-radius-base); -webkit-transform: scale(1); transform: scale(1); opacity: 0; transition: var(--transition-duration-3) }

uc-editor-scroller { display: flex; align-items: center; width: 100%; height: 100%; overflow-x: scroll }

uc-editor-slider { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--size-panel-heading) }

uc-editor-toolbar { position: relative; width: 100%; height: 100% }

@media only screen and (max-width: 600px) { uc-editor-toolbar { --l-tab-gap: var(--cldtr-gap-mid-1); --l-slider-padding: var(--uc-padding); --l-controls-padding: var(--uc-padding) } }

@media only screen and (min-width: 601px) { uc-editor-toolbar { --l-tab-gap: var(--cldtr-gap-max); --l-slider-padding: var(--uc-padding); --l-controls-padding: var(--uc-padding) } }

uc-editor-toolbar>.uc-toolbar-container { position: relative; width: 100%; height: 100%; overflow: hidden }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar { position: absolute; display: grid; grid-template-rows: 1fr 1fr; width: 100%; height: 100%; background-color: var(--color-fill-contrast); transition: opacity var(--transition-duration-3) ease-in-out,visibility var(--transition-duration-3) ease-in-out,-webkit-transform var(--transition-duration-3) ease-in-out; transition: opacity var(--transition-duration-3) ease-in-out,transform var(--transition-duration-3) ease-in-out,visibility var(--transition-duration-3) ease-in-out; transition: opacity var(--transition-duration-3) ease-in-out,transform var(--transition-duration-3) ease-in-out,visibility var(--transition-duration-3) ease-in-out,-webkit-transform var(--transition-duration-3) ease-in-out }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar.uc-sub-toolbar--visible { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; pointer-events: auto }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar.uc-sub-toolbar--top-hidden { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; pointer-events: none }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar.uc-sub-toolbar--bottom-hidden { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; pointer-events: none }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row { display: flex; align-items: center; justify-content: space-between; padding-right: var(--l-controls-padding); padding-left: var(--l-controls-padding) }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row>.uc-tab-toggles { position: relative; display: grid; grid-auto-flow: column; grid-gap: 0px var(--l-tab-gap); align-items: center; height: 100% }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row>.uc-tab-toggles>.uc-tab-toggles_indicator { position: absolute; bottom: 0; left: 0; width: var(--size-touch-area); height: 2px; background-color: var(--uc-secondary-foreground); -webkit-transform: translate(0); transform: translate(0); transition: -webkit-transform var(--transition-duration-3); transition: transform var(--transition-duration-3); transition: transform var(--transition-duration-3),-webkit-transform var(--transition-duration-3) }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-tab-content-row { position: relative }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-tab-content-row>.uc-tab-content { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; overflow: hidden; opacity: 0; content-visibility: auto }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-tab-content-row>.uc-tab-content.uc-tab-content--visible { opacity: 1; pointer-events: auto }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-tab-content-row>.uc-tab-content.uc-tab-content--hidden { opacity: 0; pointer-events: none }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row>.uc-tab-toggles>.uc-tab-toggle.uc-tab-toggle--visible { display: contents }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row>.uc-tab-toggles>.uc-tab-toggle.uc-tab-toggle--hidden { display: none }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row>.uc-tab-toggles.uc-tab-toggles--hidden { display: none }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row>.uc-tab-toggles>.uc-tab-toggle>uc-btn-ui { width: var(--uc-button-size) }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-controls-row>.uc-tab-toggles>.uc-tab-toggle>uc-btn-ui>uc-icon>svg { width: var(--size-icon); height: var(--size-icon) }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-tab-content-row>.uc-tab-content .uc-controls-list_align { display: grid; grid-template-areas: ". inner ."; grid-template-columns: 1fr auto 1fr; box-sizing: border-box; min-width: 100%; padding-left: var(--uc-padding) }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-tab-content-row>.uc-tab-content .uc-controls-list_inner { display: grid; grid-area: inner; grid-auto-flow: column; gap: 6px }

uc-editor-toolbar>.uc-toolbar-container>.uc-sub-toolbar>.uc-tab-content-row>.uc-tab-content .uc-controls-list_inner:last-child { padding-right: var(--uc-padding) }

uc-editor-toolbar .uc-controls-list_last-item { margin-right: var(--cldtr-gap-max) }

uc-editor-toolbar .uc-info-tooltip_container { position: absolute; display: flex; align-items: flex-start; justify-content: center; width: 100%; height: 100% }

uc-editor-toolbar .uc-info-tooltip_wrapper { position: absolute; top: calc(-100% - var(--cldtr-gap-mid-2)); display: flex; flex-direction: column; justify-content: flex-end; height: 100%; pointer-events: none }

uc-editor-toolbar .uc-info-tooltip { z-index: 3; padding: 3px 6px; color: var(--color-text-base); font-size: .7em; letter-spacing: 1px; text-transform: uppercase; background-color: var(--color-text-accent-contrast); border-radius: var(--border-radius-editor); -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; transition: var(--transition-duration-3) }

uc-editor-toolbar .uc-info-tooltip_visible { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 }

uc-editor-toolbar .uc-slider { padding-right: var(--l-slider-padding); padding-left: var(--l-slider-padding) }

uc-btn-ui>button { --filter-effect: var(--idle-brightness); --opacity-effect: var(--idle-opacity); --color-effect: var(--idle-color-rgb); --background-effect: var(--idle-background); --l-transition-effect: var( --css-transition, color var(--transition-duration-2), background-color var(--transition-duration-2), filter var(--transition-duration-2) ); all: unset; display: inline-flex; align-items: center; box-sizing: var(--css-box-sizing, border-box); height: var(--css-height, var(--uc-button-size)); padding-right: var(--css-padding-right, 14px); padding-left: var(--css-padding-left, 14px); font-size: 1em; color: var(--color-effect); background-color: var(--background-effect); border-radius: var(--uc-radius); opacity: var(--opacity-effect); outline: none; cursor: pointer; -webkit-filter: brightness(var(--filter-effect)); filter: brightness(var(--filter-effect)); transition: var(--l-transition-effect); -webkit-user-select: none; user-select: none }

uc-btn-ui>button>uc-icon { pointer-events: none }

uc-btn-ui .uc-text { white-space: nowrap }

uc-btn-ui .uc-icon { display: flex; align-items: center; justify-content: center; color: var(--color-effect); -webkit-filter: brightness(var(--filter-effect)); filter: brightness(var(--filter-effect)); transition: var(--l-transition-effect) }

uc-btn-ui .uc-icon_left { margin-right: var(--cldtr-gap-mid-1); margin-left: 0 }

uc-btn-ui .uc-icon_right { margin-right: 0; margin-left: var(--cldtr-gap-mid-1) }

uc-btn-ui .uc-icon_single { margin-right: 0; margin-left: 0 }

uc-btn-ui .uc-icon_hidden { display: none; margin: 0 }

uc-btn-ui.uc-primary>button { --idle-color-rgb: var(--uc-primary-foreground); --idle-brightness: 1; --idle-opacity: 1; --idle-background: var(--uc-primary); --hover-color-rgb: var(--uc-primary-foreground); --hover-brightness: 1; --hover-opacity: 1; --hover-background: var(--uc-primary-hover); --down-color-rgb: var(--uc-primary-foreground); --down-brightness: .75; --down-opacity: 1; --down-background: var(--uc-primary); --active-color-rgb: var(--uc-primary-foreground); --active-brightness: 1; --active-opacity: 1; --active-background: var(--uc-primary) }

uc-btn-ui.uc-primary-icon>button { --idle-color-rgb: var(--uc-primary); --idle-brightness: 1; --idle-opacity: 1; --idle-background: transparent; --hover-color-rgb: var(--uc-primary); --hover-brightness: 1; --hover-opacity: 1; --hover-background: var(--uc-primary-transparent); --down-color-rgb: var(--uc-primary); --down-brightness: .75; --down-opacity: 1; --down-background: var(--uc-primary-transparent); --active-color-rgb: var(--uc-primary-foreground); --active-brightness: 1; --active-opacity: 1; --active-background: var(--uc-primary); padding: 0; width: var(--uc-button-size) }

uc-btn-ui.uc-secondary>button { --idle-color-rgb: var(--uc-secondary-foreground); --idle-brightness: 1; --idle-opacity: 1; --idle-background: var(--uc-secondary); --hover-color-rgb: var(--uc-secondary-foreground); --hover-brightness: 1; --hover-opacity: 1; --hover-background: var(--uc-secondary-hover); --down-color-rgb: var(--uc-secondary-foreground); --down-brightness: 1; --down-opacity: 1; --down-background: var(--uc-secondary-hover); --active-color-rgb: var(--uc-secondary-foreground); --active-brightness: 1; --active-opacity: 1; --active-background: transparent }

uc-btn-ui.uc-secondary-icon>button { --idle-color-rgb: var(--uc-secondary-foreground); --idle-brightness: 1; --idle-opacity: 1; --idle-background: transparent; --hover-color-rgb: var(--uc-secondary-foreground); --hover-brightness: 1; --hover-opacity: 1; --hover-background: var(--uc-secondary); --down-color-rgb: var(--uc-secondary-foreground); --down-brightness: 1; --down-opacity: 1; --down-background: var(--uc-secondary); --active-color-rgb: var(--uc-secondary-foreground); --active-brightness: 1; --active-opacity: 1; --active-background: transparent; padding: 0; width: var(--uc-button-size) }

uc-btn-ui.uc-tab>button { --idle-color-rgb: var(--uc-secondary-foreground); --idle-brightness: 1; --idle-opacity: 1; --idle-background: transparent; --hover-color-rgb: var(--uc-secondary-foreground); --hover-brightness: 1; --hover-opacity: 1; --hover-background: var(--uc-secondary); --down-color-rgb: var(--uc-secondary-foreground); --down-brightness: 1; --down-opacity: 1; --down-background: var(--uc-secondary); --active-color-rgb: var(--uc-secondary-foreground); --active-brightness: 1; --active-opacity: 1; --active-background: transparent; padding: 0; width: var(--uc-button-size) }

uc-btn-ui.uc-default>button { --idle-color-rgb: var(--uc-secondary-foreground); --idle-brightness: 1; --idle-opacity: 1; --idle-background: var(--uc-secondary); --hover-color-rgb: var(--uc-secondary-foreground); --hover-brightness: 1; --hover-opacity: 1; --hover-background: var(--uc-secondary-hover); --down-color-rgb: var(--uc-secondary-foreground); --down-brightness: .75; --down-opacity: 1; --down-background: var(--uc-secondary); --active-color-rgb: var(--uc-primary); --active-brightness: 1; --active-opacity: 1; --active-background: var(--uc-primary-transparent) }

uc-line-loader-ui { position: absolute; top: 0; left: 0; z-index: 9999; width: 100%; height: 2px; opacity: .5 }

uc-line-loader-ui .uc-inner { width: 25%; max-width: 200px; height: 100% }

uc-line-loader-ui .uc-line { width: 100%; height: 100%; background-color: var(--uc-primary); -webkit-transform: translate(-101%); transform: translate(-101%); transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s,-webkit-transform 1s }

uc-slider-ui { --l-thumb-size: 24px; --l-zero-dot-size: 5px; --l-zero-dot-offset: 2px; --idle-color-rgb: var(--uc-foreground); --hover-color-rgb: var(--uc-primary); --down-color-rgb: var(--uc-primary); --color-effect: var(--idle-color-rgb); --l-color: var(--color-effect); position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: calc(var(--l-thumb-size) + (var(--l-zero-dot-size) + var(--l-zero-dot-offset)) * 2) }

uc-slider-ui .uc-thumb { position: absolute; left: 0; width: var(--l-thumb-size); height: var(--l-thumb-size); background-color: var(--l-color); border-radius: 50%; -webkit-transform: translate(0); transform: translate(0); opacity: 1; transition: opacity var(--transition-duration-2),background-color var(--transition-duration-2) }

uc-slider-ui .uc-steps { position: absolute; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 100%; height: 100%; padding-right: calc(var(--l-thumb-size) / 2); padding-left: calc(var(--l-thumb-size) / 2) }

uc-slider-ui .uc-border-step { width: 0px; height: 10px; border-right: 1px solid var(--l-color); opacity: .6; transition: border-color var(--transition-duration-2) }

uc-slider-ui .uc-minor-step { width: 0px; height: 4px; border-right: 1px solid var(--l-color); opacity: .2; transition: border-color var(--transition-duration-2) }

uc-slider-ui .uc-zero-dot { position: absolute; top: calc(100% - var(--l-zero-dot-offset) * 2); left: calc(var(--l-thumb-size) / 2 - var(--l-zero-dot-size) / 2); width: var(--l-zero-dot-size); height: var(--l-zero-dot-size); background-color: var(--color-primary-accent); border-radius: 50%; opacity: 0; transition: var(--transition-duration-3) }

uc-slider-ui .uc-input { position: absolute; width: calc(100% - 10px); height: 100%; margin: 0; cursor: pointer; opacity: 0 }

uc-presence-toggle.uc-transition { transition: opacity var(--transition-duration-3),visibility var(--transition-duration-3) }

uc-presence-toggle.uc-visible { opacity: 1; pointer-events: inherit }

uc-presence-toggle.uc-hidden { opacity: 0; pointer-events: none }

uc-presence-toggle.uc-initial { display: none!important; transition: none!important }

[uc-cloud-image-editor] [role=button]:focus-visible,[uc-cloud-image-editor] button:focus-visible { outline: 1px auto -webkit-focus-ring-color }

:where([uc-cloud-image-editor]) uc-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100% }

:where([uc-cloud-image-editor]) uc-icon svg { width: calc(var(--uc-button-size) / 2); height: calc(var(--uc-button-size) / 2) }

uc-cloud-image-editor-activity { position: relative; display: flex; width: 100%; height: 100%; overflow: hidden; background-color: var(--uc-background) }

[uc-modal] uc-cloud-image-editor-activity { width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) 2),calc(100vw - var(--uc-padding) 2)); height: var(--modal-content-height-fill, 100%) }

uc-select { display: inline-flex }

uc-select select { position: relative; display: inline-flex; align-items: center; justify-content: center; height: var(--uc-button-size); padding: 0 14px; font-size: 1em; font-family: inherit; white-space: nowrap; border: none; border-radius: var(--uc-radius); cursor: pointer; -webkit-user-select: none; user-select: none; transition: background-color var(--uc-transition); color: var(--uc-secondary-foreground); background-color: var(--uc-secondary) }

egordidenko commented 1 month ago

Hello @VikR1000,

Thank you for the question. I would like to help you. May I know more information about your problem? Perhaps can you provide MRE?

However, to begin with:

  1. uninstall @uploadcare/react-uploader
  2. install @uploadcare/react-uploader
  3. Check the @uploadcare/react-uploader directory in the node_modules folder for dist/libs.css.
VikR1000 commented 1 month ago

I tried dist/libs.css yesterday. It was not the correct CSS. :) Fortunately the CSS I posted last night appears to be the correct CSS provided by Uploadcare. I just saved it to my server and am loading it from there.

egordidenko commented 1 month ago

Alternatively, you can get the css file from the CDN:

For regular mode: 

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-regular.min.css"
>

For minimal mode: 

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-minimal.min.css"
>

For inline mode: 

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@1/web/uc-file-uploader-inline.min.css"
>
VikR1000 commented 1 month ago

Excellent!

nd0ut commented 1 month ago

@VikR1000 @syedmaazsaeed

Hey there! Could you let me know which bundler you're using? Is your project ESM or CJS?

The export ./core.css is specified in the exports field of package.json and is mapped to ./dist/libs.css. This will only work with ESM bundlers.

VikR1000 commented 1 month ago

My bundler, Meteor, is ESM. @uploadcare/react-uploader/ was installed using NPM. As you can see from the screenshot copied here, no file named @uploadcare/react-uploader/core.css was installed:

Screenshot 2024-09-25 at 8 42 27 AM
nd0ut commented 1 month ago

no file named @uploadcare/react-uploader/core.css was installed:

That’s fine. As I mentioned earlier, the ./core.css import is mapped to the ./dist/libs.css file through the exports field.

It seems like Meteor still doesn’t support the exports field, see https://github.com/meteor/meteor/discussions/11727

VikR1000 commented 1 month ago

Interesting. I think you're right. At the same time, no other npm package I use requires the exports field. Perhaps an alternative approach to the location of the .css file would be helpful.