@uploadcare/file-uploader/blocks/DropArea/drop-area.css

Building blocks for Uploadcare products integration

: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]):is([drag-state='active'], [drag-state='near'], [drag-state='over'], :hover) {
  background: var(--uc-primary-transparent);
  border-color: var(--uc-primary-transparent);
}

:where(.uc-contrast)
  :where([uc-drop-area]):is([drag-state='active'], [drag-state='near'], [drag-state='over'], :hover) {
  color: var(--uc-foreground);
  background: transparent;
  border-color: var(--uc-foreground);
  border-width: 2px;
  border-style: solid;
}

: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: transform var(--uc-transition);
}

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

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

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

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

: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-foreground);
}

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

:where([uc-drop-area])[with-icon]
  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
  uc-icon:first-child {
  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 {
  transform: translateY(0);
}

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

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

:where([uc-drop-area])[fullscreen] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 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) * 0.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),
    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 {
  transform: translateY(10px);
  opacity: 0;
}

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

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

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