4 @mixin miniature-name {
5 @include ellipsis-multiline(1.1em, 2);
7 transition: color 0.2s;
8 font-weight: $font-semibold;
9 color: var(--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} var(--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 video-miniature-small-screen {
114 ::ng-deep .video-miniature {
120 .video-miniature-information {
121 width: 100% !important;
130 margin: 0 -15px 10px -15px;
132 height: calc(100vw / #{$video-thumbnail-ratio});
143 @mixin miniature-rows {
148 border-top: none !important;
158 font-weight: $font-semibold;
162 justify-content: space-between;
163 border-top: 1px solid $separator-border-color;
166 &:hover, &:focus:not(.focus-visible), &:active {
167 text-decoration: none;
171 color: var(--mainForegroundColor);
183 @include avatar(28px);
190 color: $grey-foreground-color;
203 display: inline-block;
205 text-transform: uppercase;
206 color: $grey-foreground-color;
208 font-weight: $font-semibold;
209 text-decoration: none;
212 @media screen and (max-width: $mobile-view) {
216 @include video-miniature-small-screen;
224 @mixin adapt-margin-content-width {
225 width: $video-miniature-width * 6;
226 margin: auto !important;
228 @media screen and (max-width: 1800px) {
229 width: $video-miniature-width * 5;
232 @media screen and (max-width: 1800px - $video-miniature-width) {
233 width: $video-miniature-width * 4;
236 @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
237 width: $video-miniature-width * 3;
240 @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
241 width: $video-miniature-width * 2;
244 @media screen and (max-width: $mobile-view) {
246 margin: 0 !important;
249 @include video-miniature-small-screen;