4 @mixin miniature-name {
5 @include ellipsis-multiline(1.1em, 2);
7 transition: color 0.2s;
8 font-weight: $font-semibold;
9 color: pvar(--mainForegroundColor);
14 text-decoration: none;
23 $play-overlay-transition: 0.2s ease;
24 $play-overlay-height: 26px;
25 $play-overlay-width: 18px;
27 @mixin miniature-thumbnail {
28 @include disable-outline;
31 flex-direction: column;
35 width: $video-thumbnail-width;
36 height: $video-thumbnail-height;
37 background-color: #ececec;
38 transition: filter $play-overlay-transition;
48 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 @mixin miniature-rows {
105 border-top: none !important;
111 font-weight: $font-semibold;
115 justify-content: space-between;
118 border-top: 1px solid $separator-border-color;
122 &:hover, &:focus:not(.focus-visible), &:active {
123 text-decoration: none;
127 color: pvar(--mainForegroundColor);
139 @include channel-avatar(28px);
146 color: pvar(--greyForegroundColor);
159 display: inline-block;
161 text-transform: uppercase;
162 color: pvar(--greyForegroundColor);
164 font-weight: $font-semibold;
165 text-decoration: none;
168 @media screen and (max-width: $mobile-view) {
179 // Use margin by default, or padding if $margin is false
180 @mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) {
181 --fluidVideosMiniatureMargins: #{pvar(--horizontalMarginContent)};
184 margin-left: var(--fluidVideosMiniatureMargins) !important;
185 margin-right: var(--fluidVideosMiniatureMargins) !important;
187 padding-left: var(--fluidVideosMiniatureMargins) !important;
188 padding-right: var(--fluidVideosMiniatureMargins) !important;
191 @media screen and (max-width: $mobile-view) {
192 --fluidVideosMiniatureMargins: $min-margin;
198 @mixin fluid-videos-miniature-layout {
199 @include fluid-videos-miniature-margins;
201 @media screen and (max-width: $mobile-view) {
205 ::ng-deep .video-miniature {
211 .video-miniature-information {
212 width: 100% !important;
227 @media screen and (min-width: $mobile-view) {
229 --miniature-min-width: #{$video-thumbnail-width - 15px};
230 --miniature-max-width: #{$video-thumbnail-width};
234 grid-template-columns: repeat(
237 var(--miniature-min-width),
242 @media screen and (min-width: #{breakpoint(fhd)}) {
244 --miniature-min-width: #{$video-thumbnail-width};
253 min-width: var(--miniature-min-width);
254 max-width: var(--miniature-max-width);