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(--border-radius-thumbnail);
  object-fit: cover;
  background-color: var(--color-placeholder-background);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0px 0px 0px 1px rgba(var(--color-primary-dynamic), 0.3) inset;
}

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

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

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

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

.media__subtitle--centered {
  @extend .media__subtitle;
  align-self: auto;
  align-items: center;
  display: flex;

  .media__subtitle--centered::before {
    content: '•';
    margin-right: var(--spacing-s);
  }
}

.media__subtitle--between {
  @extend .media__subtitle;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-direction: row;
  flex-wrap: wrap;

  @media (max-width: $breakpoint-medium) {
    display: block;
  }
}

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

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

  &.media__info-text--constrained {
    max-width: 50rem;
    font-size: var(--font-small);
  }
}

.media__info-text--contracted {
  margin-top: var(--spacing-m);
  max-height: 5rem;
  overflow: hidden;
  font-size: var(--font-small);
}

.media__info-text--expanded {
  margin-top: var(--spacing-m);
  font-size: var(--font-small);
}

.media__info-text--contracted,
.media__info-text--expanded {
  margin-top: var(--spacing-m);
  max-width: 50rem;

  @media (max-width: $breakpoint-small) {
    margin-top: 0px;
  }
}

.media__info-text--contracted {
  @extend .media__info-text--expanded;
  overflow: hidden;

  .mediaInfo__description {
    max-height: 5rem;
  }
}

@media (max-width: $breakpoint-small) {
  .mediaInfo__description {
    margin-top: var(--spacing-s);
  }
}

.media__info-text--fade {
  //overflow-wrap: anywhere; // safari only
  // both needed for compatibility
  -webkit-mask-image: -webkit-gradient(linear, left 55%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
  mask-image: -webkit-gradient(linear, left 55%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}

.media__info-expand {
  margin-top: var(--spacing-s);
}

.media__info-text-preview {
  @extend .media__info-text;

  max-height: 5rem;
  overflow: auto;
  padding: var(--spacing-xxs) 0; // for scrollbar to auto-hide
}

.media__actions {
  @include font-sans;
  position: relative;
  display: flex;
  margin-top: 0;

  > *:not(:last-child) {
    margin-right: var(--spacing-m);
  }

  .button--file-action {
    background-color: unset;
  }

  .button {
    &:hover {
      color: var(--color-link);

      .icon {
        stroke: var(--color-link);
      }
    }
  }

  .ratio-wrapper {
    position: relative;
    width: 100%;
    margin-right: var(--spacing-m);

    .ratio-bar {
      position: absolute;
      display: flex;
      left: 0px;
      bottom: -2px;
      width: 100%;
      height: 3px;
      background-color: var(--color-text);
      z-index: 2;
      border-radius: 2px;
      overflow: hidden;

      .ratio-bar-like {
        height: 100%;
        background-color: var(--color-fire);
      }

      .ratio-bar-dislike {
        height: 100%;
        background-color: var(--color-slime);
      }
    }

    .button-dislike {
      margin-right: 0px;
      float: right;
    }

    @media (max-width: $breakpoint-small) {
      margin-right: 0px;
      .ratio-bar {
        height: 1px;
        bottom: -1px;
      }
    }
  }

  @media (max-width: $breakpoint-small) {
    flex-wrap: wrap;
    justify-content: flex-end !important;
    margin: 0;
    padding: 0;

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

    .button--file-action--menu {
      width: unset;
    }

    .icon--Plus {
      top: -2px;
    }

    .button--file-action:last-child {
      margin-right: 0;
    }

    .button--file-action {
      display: flex;
      padding-left: var(--spacing-m);
      margin-right: var(--spacing-xxxs);
      justify-content: center;
      align-items: center;

      margin-bottom: var(--spacing-xxs);

      .button__content {
        justify-content: space-between;

        .button__label {
          margin: 0;
          margin-top: 2px;
          margin-left: var(--spacing-xxxs);
          font-size: var(--font-small);
        }
      }

      .button__label {
        display: none;
      }
    }

    .ratio-wrapper {
      .button {
        display: inline-block;
        background-color: unset;
        margin-bottom: 0;
      }
    }
    .ratio-wrapper ~ .button--file-action {
      flex: auto;
    }

    &.stretch {
      margin-top: var(--spacing-xxxs);
      .button {
        flex: auto;
        background-color: var(--color-header-background);
        margin-right: var(--spacing-xxs);
        .button__content {
          justify-content: center;
        }
      }
      .section {
        margin-right: unset;
        margin-left: var(--spacing-xxs);
        .button {
          margin-right: 0;
        }
      }
    }
  }
}

.media__details {
  @extend .help;
  font-size: var(--font-xxsmall);
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-s);
  color: var(--color-text);

  &:not(:last-child) {
    margin-bottom: var(--spacing-s);
  }
}