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.7);
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: 0 0 0 2px var(--mainColor);
92 transform : scale(1.03);
97 @mixin thumbnail-size-component ($width, $height) {
98 /deep/ .video-thumbnail {
104 @mixin static-thumbnail-overlay {
105 display: inline-block;
106 background-color: rgba(0, 0, 0, 0.7);
110 @mixin video-miniature-small-screen {
113 /deep/ .video-miniature {
119 .video-miniature-information {
120 width: 100% !important;
129 margin: 0 -15px 10px -15px;
131 height: calc(100vw / #{$video-thumbnail-ratio});
142 @mixin miniature-rows {
143 max-height: 540px; // 2 rows max
157 font-weight: $font-semibold;
160 justify-content: space-between;
163 &:hover, &:focus:not(.focus-visible), &:active {
164 text-decoration: none;
168 color: var(--mainForegroundColor);
180 @include avatar(28px);
187 color: $grey-foreground-color;
197 @media screen and (max-width: $mobile-view) {
201 @include video-miniature-small-screen;
209 @mixin adapt-margin-content-width {
210 width: $video-miniature-width * 6;
211 margin: auto !important;
213 @media screen and (max-width: 1800px) {
214 width: $video-miniature-width * 5;
217 @media screen and (max-width: 1800px - $video-miniature-width) {
218 width: $video-miniature-width * 4;
221 @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
222 width: $video-miniature-width * 3;
225 @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
226 width: $video-miniature-width * 2;
229 @media screen and (max-width: 500px) {
231 margin: 0 !important;
234 @include video-miniature-small-screen;