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});