@uploadcare/file-uploader/blocks/ExternalSource/external-source.css

Building blocks for Uploadcare products integration

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