1 @use '_variables' as *;
4 @mixin miniature-name {
5 @include ellipsis-multiline(1.1em, 2);
6 @include peertube-word-wrap(false);
8 transition: color 0.2s;
9 font-weight: $font-semibold;
10 color: pvar(--mainForegroundColor);
13 text-decoration: none;
17 @include padding-left(4px);
23 @mixin miniature-thumbnail {
24 $play-overlay-transition: 0.2s ease;
25 $play-overlay-height: 26px;
26 $play-overlay-width: 18px;
28 @include disable-outline;
31 flex-direction: column;
37 background-color: #ececec;
38 transition: filter $play-overlay-transition;
48 background-color: rgba(0, 0, 0, 0.3);
52 transition: all $play-overlay-transition;
56 @include play-icon($play-overlay-width, $play-overlay-height);
61 text-decoration: none !important;
67 transform: translate(-50%, -50%) scale(1);
73 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
83 transform: scale(1.03);
88 @mixin thumbnail-size-component ($width, $height) {
89 ::ng-deep .video-thumbnail {
95 @mixin static-thumbnail-overlay {
96 display: inline-block;
97 background-color: rgba(0, 0, 0, 0.7);
101 // Use margin by default, or padding if $margin is false
102 @mixin grid-videos-miniature-margins ($margin: true, $min-margin: 0) {
103 --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
106 @include margin-left(var(--gridVideosMiniatureMargins) !important);
107 @include margin-right(var(--gridVideosMiniatureMargins) !important);
109 @include padding-left(var(--gridVideosMiniatureMargins) !important);
110 @include padding-right(var(--gridVideosMiniatureMargins) !important);
113 @media screen and (max-width: $mobile-view) {
114 --gridVideosMiniatureMargins: #{$min-margin};
120 @mixin grid-videos-miniature-layout {
121 @media screen and (min-width: $mobile-view) {
124 --miniatureMinWidth: #{$video-thumbnail-width - 25px};
125 --miniatureMaxWidth: #{$video-thumbnail-width};
129 grid-template-columns: repeat(
131 minmax(var(--miniatureMinWidth), 1fr)
140 my-video-playlist-miniature {
142 min-width: var(--miniatureMinWidth);
143 max-width: var(--miniatureMaxWidth);
147 @media screen and (min-width: #{breakpoint(xm)}) {
151 @media screen and (min-width: #{breakpoint(fhd)}) {
158 @mixin grid-videos-miniature-layout-with-margins {
159 @include grid-videos-miniature-margins;
160 @include grid-videos-miniature-layout;