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

//  M E D I A
//  C A R D
.media-card {
  @include mediaThumbHoverZoom;
  font-size: 1.2rem;
  border-radius: var(--card-radius);

  .media__title {
    margin-bottom: var(--spacing-small);
  }
}

//  M E D I A
//  P E N D I N G

.media--pending {
  opacity: 0.5;

  &:hover {
    cursor: default;
  }
}

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

.media__thumb {
  @include thumbnail;
  border-radius: var(--card-radius);

  &:not(.media__thumb--nsfw) {
    background-color: $lbry-gray-2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    [data-mode='dark'] & {
      background-color: var(--dm-color-04);
    }
  }
}

.media__thumb--nsfw {
  background-color: $lbry-grape-5;
  background-image: linear-gradient(to bottom right, $lbry-teal-3, $lbry-grape-5 100%);
}

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

.media__title {
  font-weight: 600;
  white-space: normal;
  font-size: 1em;
}

.media__title--large {
  cursor: default;
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 2rem;
  line-height: 1.33;
  margin-right: var(--spacing-small);
}

.media__uri {
  font-size: 1.1rem;
  min-width: 0;
  margin-right: var(--spacing-small);
  max-width: 100%;
}

.media__insufficient-credits {
  padding: 10px;
}

//  M E D I A
//  A C T I O N S

.media__actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--spacing-small);
  margin-bottom: var(--spacing-small);
}

.media__actions--between {
  justify-content: space-between;
}

.media__actions--nowrap {
  flex-wrap: nowrap;
}

.media__action-group {
  > *:not(:last-child) {
    margin-right: var(--spacing-medium);
  }
}

.media__action-group--large {
  display: flex;
  margin-top: var(--spacing-small);
  margin-bottom: var(--spacing-small);

  > * {
    font-size: 1.15rem;

    &:not(:last-child) {
      margin-right: var(--spacing-large);
    }
  }

  &:not(:last-child) {
    margin-right: var(--spacing-large);
  }
}

// M E D I A
// S U B T E X T
//
// Wrapper around low level media information (date, channel)
//
.media__subtext {
  color: rgba($lbry-black, 0.8);
  font-size: 0.9em;

  html[data-mode='dark'] & {
    color: rgba($lbry-white, 0.7);
  }
}

.media__subtext--large {
  font-size: 1.2em;
}

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

.media__subtitle {
  align-self: flex-start;
  font-size: 0.8em;
  color: rgba($lbry-black, 0.6);

  [data-mode='dark'] & {
    color: rgba($lbry-white, 0.8);
  }
}

.media__subtitle--large {
  display: block;

  > button {
    display: block;
  }
}

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

//  M E D I A
//  I N F O

.media__info {
  word-wrap: break-word;

  [data-mode='dark'] & {
    border-color: rgba($lbry-gray-5, 0.2);
  }
}

.media__info--large {
  border-top: 1px solid $lbry-gray-1;
  margin-top: var(--spacing-medium);

  [data-mode='dark'] & {
    border-color: rgba($lbry-gray-5, 0.2);
  }
}

.media__info-text {
  font-size: 1.15rem;
  word-break: break-word;

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

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

  &.media__info-text--center {
    text-align: center;
  }

  .button__label {
    text-align: left;
    white-space: normal;
  }
}

.media__info-title {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: var(--spacing-small);
}

//  M E D I A
//  M E S S A G E

.media__message {
  font-size: 1.1rem;
  padding: var(--spacing-medium);
  margin: var(--spacing-medium) var(--spacing-large);
  white-space: normal;
}

//  M E D I A
//  T E X T

.media__text {
  font-size: 2.5rem;

  [data-mode='dark'] & {
    color: $lbry-white;
  }
}