4 @mixin miniature-name {
5 @include ellipsis-multiline(
10 transition: color 0.2s;
12 font-weight: $font-semibold;
13 color: var(--mainForegroundColor);
18 text-decoration: none;
27 $play-overlay-transition: 0.2s ease;
28 $play-overlay-height: 26px;
29 $play-overlay-width: 18px;
31 @mixin miniature-thumbnail($width: $video-thumbnail-width, $height: $video-thumbnail-height) {
32 @include disable-outline;
34 display: inline-block;
40 background-color: #ececec;
41 transition: filter $play-overlay-transition;
51 background-color: rgba(0, 0, 0, 0.7);
54 transition: all $play-overlay-transition;
64 transform: translate(-50%, -50%) scale(0.5);
66 border-top: ($play-overlay-height / 2) solid transparent;
67 border-bottom: ($play-overlay-height / 2) solid transparent;
69 border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
74 text-decoration: none !important;
80 transform: translate(-50%, -50%) scale(1);
86 box-shadow: 0 0 0 2px var(--mainColor);
95 transform : scale(1.03);
100 @mixin static-thumbnail-overlay {
101 display: inline-block;
102 background-color: rgba(0, 0, 0, 0.7);
106 @mixin video-miniature-small-screen {
109 /deep/ .video-miniature {
115 .video-miniature-information {
116 width: 100% !important;