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__title {
  margin-bottom: var(--spacing-medium);
}

.media__title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--font-weight-bold);
  white-space: normal;
  font-size: var(--font-title);
  display: inline;
}

.media__title-badge {
  float: right;
  margin-left: var(--spacing-small);
  margin-top: 5px;
}

.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;
  }

  // This is terrible and should not be removed
  .icon {
    margin-right: var(--spacing-xsmall) / 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;
}

.media__uri--large {
  margin-bottom: var(--spacing-medium);
}

.media__insufficient-credits {
  padding: 10px;
}

//  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;
}

.media__subtitle--large {
  display: block;

  > button {
    display: block;
  }
}

.media__subtitle__channel {
  font-weight: var(--font-weight-bold);
  margin: var(--spacing-small) 0;
}

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

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

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

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

.media__document-thumbnail {
  margin-top: 0;
}