peertube/client/src/sass/include/_miniature.scss

@use '_variables' as *;
@use '_mixins' as *;

@mixin miniature-name {
  @include peertube-word-wrap(false);

  font-size: 1.1em;
  transition: color 0.2s;
  font-weight: $font-semibold;
  color: pvar(--mainForegroundColor);

  &:hover {
    text-decoration: none;
  }

  &.blur-filter {
    @include padding-left(4px);

    filter: blur(3px);
  }
}

@mixin miniature-thumbnail {
  $play-overlay-transition: 0.2s ease;
  $play-overlay-height: 26px;
  $play-overlay-width: 18px;

  @include disable-outline;

  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 3px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #ececec;
  transition: filter $play-overlay-transition;

  .play-overlay {
    position: absolute;
    right: 0;
    bottom: 0;

    width: inherit;
    height: inherit;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.3);

    &,
    .icon {
      transition: all $play-overlay-transition;
    }

    .icon {
      @include play-icon($play-overlay-width, $play-overlay-height);
    }
  }

  &:hover {
    text-decoration: none !important;

    .play-overlay {
      opacity: 1;

      .icon {
        transform: translate(-50%, -50%) scale(1);
      }
    }
  }

  &.focus-visible {
    box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
    outline: none;
  }

  img {
    width: inherit;
    height: inherit;

    &.blur-filter {
      filter: blur(20px);
      transform: scale(1.03);
    }
  }
}

@mixin thumbnail-size-component ($width, $height) {
  ::ng-deep .video-thumbnail {
    width: $width;
    height: $height;
  }
}

@mixin static-thumbnail-overlay {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
}

// Use margin by default, or padding if $margin is false
@mixin grid-videos-miniature-margins ($margin: true, $min-margin: 0) {
  --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};

  @if $margin {
    @include margin-left(var(--gridVideosMiniatureMargins) !important);
    @include margin-right(var(--gridVideosMiniatureMargins) !important);
  } @else {
    @include padding-left(var(--gridVideosMiniatureMargins) !important);
    @include padding-right(var(--gridVideosMiniatureMargins) !important);
  }

  @media screen and (max-width: $mobile-view) {
    --gridVideosMiniatureMargins: #{$min-margin};

    width: auto;
  }
}

@mixin grid-videos-miniature-layout {
  @media screen and (min-width: $mobile-view) {
    .videos,
    .playlists {
      --miniatureMinWidth: #{$video-thumbnail-width - 25px};
      --miniatureMaxWidth: #{$video-thumbnail-width};

      display: grid;
      column-gap: 30px;
      grid-template-columns: repeat(
        auto-fill,
        minmax(var(--miniatureMinWidth), 1fr)
      );

      .video-wrapper,
      .playlist-wrapper {
        margin: 0 auto;
        width: 100%;

        my-video-miniature,
        my-video-playlist-miniature {
          display: block;
          min-width: var(--miniatureMinWidth);
          max-width: var(--miniatureMaxWidth);
        }
      }

      @media screen and (min-width: #{breakpoint(xm)}) {
        column-gap: 15px;
      }

      @media screen and (min-width: #{breakpoint(fhd)}) {
        column-gap: 2%;
      }
    }
  }
}

@mixin grid-videos-miniature-layout-with-margins {
  @include grid-videos-miniature-margins;
  @include grid-videos-miniature-layout;
}