@uploadcare/file-uploader/blocks/themes/uc-basic/theme.css

Building blocks for Uploadcare products integration

:where([uc-wgt-common]) {
  /* Font */
  --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;

  /* Sizes */
  --uc-button-size: 32px;
  --uc-preview-size: 32px;
  --uc-padding: 10px;
  --uc-radius: 8px;
  --uc-transition: 0.2s ease;
  --uc-dialog-width: 430px;
  --uc-dialog-max-width: 920px;
  --uc-dialog-max-height: 675px;
  --uc-simple-btn-padding: 7px 14px;

  --uc-grid-col: 3;
  --uc-grid-preview-image-height: auto;
  --uc-grid-gap: calc(var(--uc-padding) / 2);
  --uc-grid-aspect-ratio: 1 / 1;

  /* Default colors, in case of media query failure */
  --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]) {
    /* Light colors RGB fallback */
    --uc-primary-rgb-light: 23 75 215;
    --uc-primary-light: rgb(var(--uc-primary-rgb-light));
    --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);
    --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);
    --uc-background-light: rgb(255 255 255);
    --uc-foreground-light: rgb(24 24 24);
    --uc-primary-foreground-light: #fff;
    --uc-secondary-light: rgb(24 24 24 / 5%);
    --uc-secondary-hover-light: rgb(24 24 24 / 8%);
    --uc-secondary-foreground-light: rgb(24 24 24);
    --uc-muted-light: rgb(245 245 245);
    --uc-muted-foreground-light: rgb(113 113 113);
    --uc-destructive-light: rgb(232 19 20 / 5%);
    --uc-destructive-foreground-light: rgb(232 19 20);
    --uc-border-light: rgb(228 228 232);
    --uc-dialog-shadow-light: 0px 6px 20px rgb(0 0 0 / 10%);
    --uc-simple-btn-light: rgb(235 235 235);
    --uc-simple-btn-hover-light: rgb(228 228 228);
    --uc-simple-btn-foreground-light: rgb(24 24 24);

    /* Dark colors RGB fallback */
    --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]) {
    /* Light colors OKLCH */
    --uc-primary-oklch-light: 47% 0.22 264; /* Quick customization: change this value to your brand color */
    --uc-primary-light: oklch(var(--uc-primary-oklch-light));
    --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
    --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);
    --uc-background-light: oklch(100% 0 0);
    --uc-foreground-light: oklch(21% 0 0);
    --uc-primary-foreground-light: oklch(100% 0 0);
    --uc-secondary-light: oklch(21% 0 0 / 0.05);
    --uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
    --uc-secondary-foreground-light: oklch(21% 0 0);
    --uc-muted-light: oklch(97% 0 0);
    --uc-muted-foreground-light: oklch(40% 0 0);
    --uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
    --uc-destructive-foreground-light: oklch(59% 0.235 28.5);
    --uc-border-light: oklch(92% 0 0);
    --uc-dialog-shadow-light: 0px 6px 20px oklch(0% 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);

    /* Dark colors OKLCH */
    --uc-primary-oklch-dark: 69% 0.1768 258.4; /* Quick customization: change this value to your brand color */
    --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 / 0.07);
    --uc-secondary-hover-dark: oklch(91% 0 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% 0.191 27.5 / 0.1);
    --uc-destructive-foreground-dark: oklch(67% 0.191 27.5);
    --uc-border-dark: oklch(36% 0 0);
    --uc-dialog-shadow-dark: 0px 6px 20px oklch(0% 0 0 / 0.25);
    --uc-simple-btn-dark: oklch(26% 0 0);
    --uc-simple-btn-hover-dark: oklch(29% 0 0);
    --uc-simple-btn-foreground-dark: oklch(100% 0 0);
  }
}

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

@media only screen and (max-width: 680px) {
  :where([uc-wgt-common]) {
    --uc-grid-col: 2;
  }
}

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

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

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

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

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

:where(.uc-purple) {
  --uc-primary-oklch-light: 47% 0.22 300;
  --uc-primary-oklch-dark: 69% 0.1768 300;
}

:where(.uc-red) {
  --uc-primary-oklch-light: 47% 0.21 21;
  --uc-primary-oklch-dark: 71% 0.1768 21;
}

:where(.uc-orange) {
  --uc-primary-oklch-light: 47% 0.1376 51.88;
  --uc-primary-oklch-dark: 69% 0.1768 51.88;
}

:where(.uc-green) {
  --uc-primary-oklch-light: 45% 0.14 130;
  --uc-primary-oklch-dark: 69% 0.1768 130;
}

:where(.uc-turquoise) {
  --uc-primary-oklch-light: 45% 0.0854 174;
  --uc-primary-oklch-dark: 69% 0.1768 174;
}

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

:where(.uc-contrast) {
  --uc-border-light: oklch(50% 0 0);
  --uc-border-dark: oklch(50% 0 0);

  --uc-muted-light: oklch(98% 0 0);
  --uc-muted-dark: oklch(16% 0 0);

  --uc-muted-foreground-light: oklch(20% 0 0);
  --uc-muted-foreground-dark: oklch(80% 0 0);

  --uc-background-light: oklch(100% 0 0);
  --uc-foreground-light: oklch(0% 0 0);

  --uc-background-dark: oklch(10% 0 0);
  --uc-foreground-dark: oklch(100% 0 0);
}