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;
22 @mixin miniature-thumbnail {
23 $play-overlay-transition: 0.2s ease;
24 $play-overlay-height: 26px;
25 $play-overlay-width: 18px;
27 @include disable-outline;
30 flex-direction: column;
36 background-color: #ececec;
37 transition: filter $play-overlay-transition;
47 background-color: rgba(0, 0, 0, 0.3);
51 transition: all $play-overlay-transition;
55 @include play-icon($play-overlay-width, $play-overlay-height);
60 text-decoration: none !important;
66 transform: translate(-50%, -50%) scale(1);
72 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
82 transform: scale(1.03);
87 @mixin thumbnail-size-component ($width, $height) {
88 ::ng-deep .video-thumbnail {
94 @mixin static-thumbnail-overlay {
95 display: inline-block;
96 background-color: rgba(0, 0, 0, 0.7);
100 // Use margin by default, or padding if $margin is false
101 @mixin grid-videos-miniature-margins ($margin: true, $min-margin: 0) {
102 --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
105 margin-left: var(--gridVideosMiniatureMargins) !important;
106 margin-right: var(--gridVideosMiniatureMargins) !important;
108 padding-left: var(--gridVideosMiniatureMargins) !important;
109 padding-right: var(--gridVideosMiniatureMargins) !important;
112 @media screen and (max-width: $mobile-view) {
113 --gridVideosMiniatureMargins: #{$min-margin};
119 @mixin grid-videos-miniature-layout {
120 @include grid-videos-miniature-margins;
122 @media screen and (min-width: $mobile-view) {
125 --miniatureMinWidth: #{$video-thumbnail-width - 25px};
126 --miniatureMaxWidth: #{$video-thumbnail-width};
130 grid-template-columns: repeat(
132 minmax(var(--miniatureMinWidth), 1fr)
141 my-video-playlist-miniature {
143 min-width: var(--miniatureMinWidth);
144 max-width: var(--miniatureMaxWidth);
148 @media screen and (min-width: #{breakpoint(xm)}) {
152 @media screen and (min-width: #{breakpoint(fhd)}) {