static-cms/src/components/MediaLibrary/MediaLibrary.css

@import './MediaLibraryFooter.css';

:root {
  --mediaLibraryCardWidth: 300px;
  --mediaLibraryCardMargin: 10px;
  --mediaLibraryCardOutsideWidth: calc(var(--mediaLibraryCardWidth) + var(--mediaLibraryCardMargin) * 2);
}

.nc-mediaLibrary-dialog {
  width: calc(var(--mediaLibraryCardOutsideWidth) + 48px);

  @media (width >= 800px) {
    width: calc(var(--mediaLibraryCardOutsideWidth) * 2 + 48px);
  }

  @media (width >= 1120px) {
    width: calc(var(--mediaLibraryCardOutsideWidth) * 3 + 48px);
  }

  @media (width >= 1440px) {
    width: calc(var(--mediaLibraryCardOutsideWidth) * 4 + 48px);
  }

  @media (width >= 1760px) {
    width: calc(var(--mediaLibraryCardOutsideWidth) * 5 + 48px);
  }

  @media (width >= 2080px) {
    width: calc(var(--mediaLibraryCardOutsideWidth) * 6 + 48px);
  }
}

.nc-mediaLibrary-title {
  position: absolute;
  margin-top: 20px;
}

.nc-mediaLibrary-searchInput {
  @apply --input;
  font-family: var(--fontFamilyPrimary);
  width: 50%;
  max-width: 800px;
  margin: 12px auto;
  display: inline-block;
  position: relative;
  z-index: 1;
}

.nc-mediaLibrary-emptyMessage {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nc-mediaLibrary-cardGrid-container {
  height: calc(100% - 150px);
  margin: 20px auto 0;
  overflow-y: auto;
}

.nc-mediaLibrary-cardGrid {
  display: flex;
  flex-wrap: wrap;
}

.nc-mediaLibrary-card {
  width: var(--mediaLibraryCardWidth);
  height: 240px;
  margin: var(--mediaLibraryCardMargin);
  border: var(--textFieldBorder);
  border-radius: var(--borderRadius);
  cursor: pointer;
  overflow: hidden;
}

.nc-mediaLibrary-card-selected {
  border-color: var(--primaryColor);
}

.nc-mediaLibrary-cardImage {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 2px 2px 0 0;
}

.nc-mediaLibrary-cardText {
  color: var(--textColor);
  padding: 8px;
  margin-top: 20px;
  overflow-wrap: break-word;
  line-height: 1.3 !important;
}

.nc-mediaLibrary-dialogPrivate {
  background-color: var(--backgroundAltColor);

  & .nc-mediaLibrary-title,
  & .nc-mediaLibrary-emptyMessage,
  & .nc-mediaLibrary-paginatingMessage,
  & h1 {
    color: var(--textFieldBorderColor);
  }

  & .nc-mediaLibrary-card,
  & .nc-mediaLibrary-searchInput {
    background-color: var(--textFieldBorderColor);
  }

  & button:disabled,
  & label[disabled] {
    background-color: rgba(217, 217, 217, 0.15);
  }
}