mirror of
https://github.com/mickael-kerjean/filestash
synced 2025-12-14 04:17:21 +01:00
76 lines
1.7 KiB
SCSS
76 lines
1.7 KiB
SCSS
.component_videoplayer{
|
|
background: #525659;
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
|
|
.video_container{
|
|
display: flex;
|
|
flex: 1;
|
|
|
|
text-align: center;
|
|
background: #525659;
|
|
overflow: hidden;
|
|
padding: 15px 10px 65px 10px;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
> span{
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
> div{margin: auto;}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* SKIN FOR VIDEOJS: */
|
|
.video-js{
|
|
font-size: 14px; /* Chromium bug */
|
|
max-height: 500px;
|
|
|
|
.vjs-control-bar{
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
.vjs-load-progress div{
|
|
background: var(--primary);
|
|
}
|
|
.vjs-big-play-button{
|
|
background-color: var(--primary)!important;
|
|
border-color: var(--emphasis-primary)!important;
|
|
border-width: 2px;
|
|
margin-top: -40px;
|
|
border-radius: 8px;
|
|
&:before{ font-size: 45px; color: var(--bg-color); }
|
|
}
|
|
}
|
|
|
|
|
|
.video-enter, .video-appear{
|
|
opacity: 0;
|
|
}
|
|
.video-enter.video-enter-active, .video-appear.video-appear-active{
|
|
transition: top .3s,right .3s,bottom .3s,left .3s,max-width .3s,max-height .3s;
|
|
-webkit-animation-name: zoomIn;
|
|
animation-name: zoomIn;
|
|
animation-duration: .3s;
|
|
-webkit-animation-timing-function: cubic-bezier(.51,.92,.24,1.15);
|
|
animation-timing-function: cubic-bezier(.51,.92,.24,1.15);
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
@keyframes zoomIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(.85);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|