lbry-desktop/ui/scss/component/_video.scss

53 lines
925 B
SCSS
Raw Normal View History

2017-04-13 20:52:26 +02:00
video {
2017-04-14 00:32:03 +02:00
object-fit: contain;
box-sizing: border-box;
max-height: 100%;
max-width: 100%;
}
.video {
background: #000;
color: white;
2017-04-13 20:52:26 +02:00
}
2017-04-14 00:32:03 +02:00
2017-04-13 20:52:26 +02:00
.video-embedded {
2017-04-14 00:32:03 +02:00
max-width: $width-page-constrained;
2017-04-17 14:27:39 +02:00
max-height: $height-video-embedded;
height: $height-video-embedded;
2017-04-13 20:52:26 +02:00
video {
2017-04-14 00:32:03 +02:00
height: 100%;
}
&.video--hidden {
2017-04-17 14:27:39 +02:00
height: $height-video-embedded;
2017-04-13 20:52:26 +02:00
}
2017-04-14 00:32:03 +02:00
&.video--active {
2017-04-17 14:27:39 +02:00
/*background: none;*/
2017-04-14 00:32:03 +02:00
}
}
.video__cover {
text-align: center;
height: 100%;
width: 100%;
2017-04-14 01:43:17 +02:00
background-size: auto 100%;
background-position: center center;
background-repeat: no-repeat;
2017-04-14 00:32:03 +02:00
position: relative;
&:hover {
.video__play-button { @include absolute-center(); }
}
}
.video__play-button {
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
display: none;
font-size: $spacing-vertical * 3;
color: white;
z-index: 1;
background: $color-black-transparent;
left: 0;
top: 0;
2017-04-13 20:52:26 +02:00
}