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;
61 transform: translate(-50%, -50%) scale(0.5);
63 border-top: ($play-overlay-height / 2) solid transparent;
64 border-bottom: ($play-overlay-height / 2) solid transparent;
66 border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
71 text-decoration: none !important;
77 transform: translate(-50%, -50%) scale(1);
83 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
93 transform : scale(1.03);
98 @mixin thumbnail-size-component ($width, $height) {
99 ::ng-deep .video-thumbnail {
105 @mixin static-thumbnail-overlay {
106 display: inline-block;
107 background-color: rgba(0, 0, 0, 0.7);
111 @mixin miniature-rows {
116 border-top: none !important;
122 font-weight: $font-semibold;
126 justify-content: space-between;
127 border-top: 1px solid $separator-border-color;
130 &:hover, &:focus:not(.focus-visible), &:active {
131 text-decoration: none;
135 color: pvar(--mainForegroundColor);
147 @include avatar(28px);
154 color: pvar(--greyForegroundColor);
167 display: inline-block;
169 text-transform: uppercase;
170 color: pvar(--greyForegroundColor);
172 font-weight: $font-semibold;
173 text-decoration: none;
176 @media screen and (max-width: $mobile-view) {
187 @mixin fluid-videos-miniature-layout {
188 margin-left: $not-expanded-horizontal-margins !important;
189 margin-right: $not-expanded-horizontal-margins !important;
191 @media screen and (max-width: $mobile-view) {
193 margin: 0 !important;
198 ::ng-deep .video-miniature {
204 .video-miniature-information {
205 width: 100% !important;
220 @media screen and (min-width: #{breakpoint(fhd)}) {
221 margin-left: 6vw !important;
222 margin-right: 6vw !important;
225 @media screen and (min-width: $mobile-view) {
228 --miniature-min-width: #{$video-thumbnail-width - 15px};
229 --miniature-max-width: #{$video-thumbnail-width};
233 grid-template-columns: repeat(
236 var(--miniature-min-width),
241 @media screen and (min-width: #{breakpoint(fhd)}) {
243 --miniature-min-width: #{$video-thumbnail-width};
252 min-width: var(--miniature-min-width);
253 max-width: var(--miniature-max-width);