@uploadcare/file-uploader/solutions/file-uploader/minimal/index.css

Building blocks for Uploadcare products integration

@import url('../../../blocks/themes/uc-basic/index.css');

/* ICONS: */
:where([uc-file-uploader-minimal]) {
  --cfg-init-activity: 'start-from';
  --cfg-done-activity: 'upload-list';

  position: relative;
  display: block;
}

[uc-file-uploader-minimal] > uc-start-from .uc-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  overflow: hidden;
  align-items: center;
  background-color: transparent;
}

:where([uc-file-uploader-minimal] > uc-start-from uc-drop-area) {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--uc-preview-size) + var(--uc-padding) * 2 + 8px);
  padding: 0;
  text-align: center;
  background-color: var(--uc-muted);
  border-radius: calc(var(--uc-radius) * 1.75);
}

:where(.uc-contrast) :where([uc-file-uploader-minimal] > uc-start-from uc-drop-area) {
  background-color: transparent;
}

/* hack to make transparent :hover colors work in any conditions */
:where([uc-file-uploader-minimal] > uc-start-from uc-drop-area)::before {
  content: '';
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--uc-background);
}

:where([uc-file-uploader-minimal]:has([single]) > uc-start-from uc-drop-area) {
  aspect-ratio: var(--uc-grid-aspect-ratio);
}

[uc-file-uploader-minimal] uc-upload-list uc-activity-header {
  display: none;
}

[uc-file-uploader-minimal] uc-upload-list > .uc-toolbar {
  background-color: transparent;
}

[uc-file-uploader-minimal] uc-upload-list {
  width: 100%;
  height: unset;
  padding: 4px;
  background-color: var(--uc-background);
  border: 1px dashed var(--uc-border);
  border-radius: calc(var(--uc-radius) * 1.75);
}

[uc-file-uploader-minimal] uc-upload-list .uc-files {
  padding: 0;
}

[uc-file-uploader-minimal] uc-upload-list .uc-toolbar {
  display: block;
  padding: 0;
}

[uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-cancel-btn,
[uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-upload-btn,
[uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-done-btn {
  display: none;
}

[uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn {
  width: 100%;
  height: calc(var(--uc-preview-size) + var(--uc-padding) * 2);
  margin-top: 4px;
}

[uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn[disabled] {
  display: none;
}

[uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn > span {
  display: none;
}

[uc-file-uploader-minimal] uc-upload-list .uc-toolbar .uc-add-more-btn > uc-icon {
  display: flex;
}

[uc-file-uploader-minimal] uc-file-item uc-progress-bar {
  top: 0 !important;
  height: 100% !important;
}

[uc-file-uploader-minimal] uc-file-item uc-progress-bar .uc-progress {
  background-color: var(--uc-primary-transparent);
  border-radius: var(--uc-radius);
}

[uc-file-uploader-minimal] uc-file-item uc-progress-bar .uc-fake-progress {
  background-color: var(--uc-primary-transparent);
  border-radius: var(--uc-radius);
}

[uc-file-uploader-minimal] uc-upload-list uc-drop-area {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: calc(var(--uc-radius) * 1.75);
}

[uc-file-uploader-minimal] uc-upload-list .uc-common-error {
  margin: 4px 0 0;
}

[uc-file-uploader-minimal] uc-copyright .uc-credits {
  position: static;
}

[uc-file-uploader-minimal][mode='grid'] uc-upload-list .uc-toolbar .uc-add-more-btn {
  display: none;
}

[uc-file-uploader-minimal][mode='grid'] uc-upload-list .uc-files .uc-add-more-btn {
  display: flex;
}

[uc-file-uploader-minimal][mode='grid'] uc-upload-list .uc-files .uc-add-more-btn > span {
  display: none;
}

[uc-file-uploader-minimal][mode='grid'] uc-upload-list .uc-files .uc-add-more-btn > uc-icon {
  display: flex;
}