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

//  M E D I A
//  T H U M B

.media__thumb {
  @include thumbnail;
  position: relative;
  border-radius: var(--card-radius);
  object-fit: cover;
  background-color: var(--color-placeholder-background);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

//  M E D I A
//  T I T L E

.media__uri {
  position: absolute;
  transform: translateY(-130%);
  font-size: var(--font-xsmall);
  color: var(--color-text-subtitle);

  @media (max-width: $breakpoint-small) {
    position: static;
    transform: none;
    margin-bottom: var(--spacing-xs);
    max-width: 100%;
    white-space: nowrap;
  }

  // This is terrible and should not be removed
  .icon {
    margin-right: var(--spacing-xs) / 2;
    margin-bottom: -0.08rem;
  }
}

.media__uri--inline {
  @extend .media__uri;
  position: relative;
  transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media__uri--right {
  @extend .media__uri;
  right: 0;
}

//  M E D I A
//  S U B T I T L E

.media__subtitle {
  align-self: flex-start;
  color: var(--color-text-subtitle);
  font-size: var(--font-small);

  svg {
    stroke: var(--color-text-subtitle);
  }
}

.media__subtitle--between {
  @extend .media__subtitle;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.media__info-text {
  word-break: break-word;

  &:not(:last-of-type) {
    margin-bottom: var(--spacing-m);
  }

  &.media__info-text--constrained {
    max-width: 50rem;
  }
}

.media__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 0;

  @media (max-width: $breakpoint-small) {
    justify-content: flex-start;
    padding-top: var(--spacing-s);

    > * {
      margin-right: var(--spacing-s);
      margin-bottom: var(--spacing-s);
    }
  }
}