blob: ba05b6a8eac9846863ed01553990208afc1bc088 (
plain) (
tree)
|
|
@import '_variables';
@import '_mixins';
@mixin miniature-name {
@include ellipsis-multiline(1.1em, 2);
transition: color 0.2s;
font-weight: $font-semibold;
color: var(--mainForegroundColor);
margin-top: 10px;
margin-bottom: 5px;
&:hover {
text-decoration: none;
}
&.blur-filter {
filter: blur(3px);
padding-left: 4px;
}
}
$play-overlay-transition: 0.2s ease;
$play-overlay-height: 26px;
$play-overlay-width: 18px;
@mixin miniature-thumbnail {
@include disable-outline;
display: flex;
flex-direction: column;
position: relative;
border-radius: 3px;
overflow: hidden;
width: $video-thumbnail-width;
height: $video-thumbnail-height;
background-color: #ececec;
transition: filter $play-overlay-transition;
.play-overlay {
position: absolute;
right: 0;
bottom: 0;
width: inherit;
height: inherit;
opacity: 0;
background-color: rgba(0, 0, 0, 0.7);
&, .icon {
transition: all $play-overlay-transition;
}
.icon {
width: 0;
height: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.5);
border-top: ($play-overlay-height / 2) solid transparent;
border-bottom: ($play-overlay-height / 2) solid transparent;
border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
}
}
&:hover {
text-decoration: none !important;
.play-overlay {
opacity: 1;
.icon {
transform: translate(-50%, -50%) scale(1);
}
}
}
&.focus-visible {
box-shadow: 0 0 0 2px var(--mainColor);
}
img {
width: inherit;
height: inherit;
&.blur-filter {
filter: blur(20px);
transform : scale(1.03);
}
}
}
@mixin thumbnail-size-component ($width, $height) {
/deep/ .video-thumbnail {
width: $width;
height: $height;
}
}
@mixin static-thumbnail-overlay {
display: inline-block;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
}
@mixin video-miniature-small-screen {
text-align: center;
/deep/ .video-miniature {
padding-right: 0;
height: auto;
width: 100%;
margin-bottom: 20px;
.video-miniature-information {
width: 100% !important;
text-align: left;
span {
width: 100%;
}
}
.video-thumbnail {
margin: 0 -15px 10px -15px;
width: 100vw;
height: calc(100vw / #{$video-thumbnail-ratio});
img {
width: 100%;
height: 100%;
}
}
}
}
|