lbry-desktop/ui/scss/component/_placeholder.scss

.placeholder {
  @include placeholder;
}

.placeholder__wrapper {
  width: 100%;
}

.placeholder {
  &.claim-preview--tile {
    background-color: unset;
    .claim-tile__info {
      .channel-thumbnail {
        margin-top: unset;
      }
    }
  }

  &.claim-preview__wrapper {
    background-color: rgba(var(--color-header-background-base), 0.5);
    margin-bottom: var(--spacing-xxs);

    .media__thumb {
      width: calc(var(--file-list-thumbnail-width) * 1.2);
      @media (max-width: $breakpoint-small) {
        width: calc(var(--file-list-thumbnail-width) * 0.8) !important;
      }
    }
  }

  .media__thumb {
    border-radius: var(--border-radius-thumbnail);
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0) inset;
  }

  .claim-preview__title {
    width: 45%;
    margin-top: 2px;
    min-height: var(--font-body);
    background-color: var(--color-text);
    border-radius: var(--border-radius);
    opacity: 0.2;
    @media (max-width: $breakpoint-small) {
      width: 94%;
    }
  }
  .claim-preview__title_b {
    @extend .claim-preview__title;
    display: none;
    width: 68%;
    margin-bottom: 9px;
    @media (max-width: $breakpoint-small) {
      display: block;
    }
  }

  .claim-tile__about {
    .media__subtitle {
      display: block;
      margin-top: calc(var(--spacing-s));
      width: 16%;
      height: var(--font-xsmall);
      background-color: var(--color-text);
      border-radius: var(--border-radius);
      opacity: 0.1;
      @media (max-width: $breakpoint-small) {
        width: 82%;
      }
    }
    .media__subtitle_b {
      display: flex;
      flex-wrap: wrap;
      margin-top: 4px;
      width: 14%;
      height: var(--font-xsmall);
      background-color: var(--color-text);
      border-radius: var(--border-radius);
      opacity: 0.1;
      @media (max-width: $breakpoint-small) {
        width: 56%;
      }
    }
  }

  .claim-tile__title {
    border-radius: var(--border-radius);
    width: 95%;
    margin-left: 0;
    margin-top: calc(var(--spacing-s) - 1px);
    min-height: var(--font-small);
    background-color: var(--color-text);
    opacity: 0.2;
  }
  .claim-tile__title_b {
    border-radius: var(--border-radius);
    width: 65%;
    margin-left: 0;
    margin-top: var(--spacing-xxs);
    min-height: var(--font-small);
    background-color: var(--color-text);
    opacity: 0.2;
    margin-bottom: calc(var(--spacing-s) + 4px);
  }

  .claim-tile__info {
    .channel-thumbnail {
      margin-top: 8px;
      width: 2.1rem;
      height: 2.1rem;
      background-color: var(--color-placeholder-background);
    }
    .claim-tile__about {
      width: 70%;
      .button__content {
        height: var(--font-xsmall);
        width: 40%;
        background-color: var(--color-text);
        opacity: 0.1;
        border-radius: var(--border-radius);
        margin-top: 2px;
      }
      .claim-tile__about--counts {
        height: var(--font-xsmall);
        width: 35%;
        background-color: var(--color-text);
        opacity: 0.1;
        border-radius: var(--border-radius);
        margin-top: 4px;
      }
    }
  }

  &:hover {
    .media__thumb {
      box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0) inset;
    }
  }
}

.placeholder--text-document {
  @include placeholder;
  height: 60vh;
}