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