html, body{
position: relative;
margin: 0; padding: 0;
overflow: hidden;
width:100%; height:100%;
background-color: black;
}
#root{
position: relative;
width:100%; height:100%;
}
#header{
position: absolute; z-index: 10;
top:0; left:0;
display: none;
}
#timelaps{
position: relative; z-index: 5;
width:100%; height:100%;
overflow: hidden;
// border: 1px solid blue;
video#timelapsvid {
position: absolute;
top: 0; left: 0;
width:100%; height:100%;
// source:not(.1080p){
// display:none;
// }
@media (min-aspect-ratio: 16/9) {
height: 200%;
top: -50%;
}
@media (max-aspect-ratio: 16/9) {
width: 200%;
left: -50%;
}
}
}
#mapout{
position: absolute; z-index: 9;
bottom:0; left:0; width:23.5%; margin:1% 0.5% 1% 1%; height:10%;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 2px;
}
#mapin{
position: absolute; z-index: 9;
bottom:0; left:25%; width:23.5%; margin:1% 0.5% 1% 0.5%; height:10%;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 2px;
}
#timeline{
position: absolute; z-index: 9;
bottom:0; right:0; width:48%; margin:1% 1% 1% 0.5%; padding:0.5%; height:8.3%;
background-color: rgba(15, 15, 15, 0.8);
border-radius: 2px;
.vis-timeline{
border:none;
}
.vis-time-axis,
.vis-background, .vis-background.vis-horizontal, .vis-background.vis-vertical,
.vis-panel.vis-center, .vis-panel.vis-top, .vis-panel.vis-bottom{
border:none;
}
.vis-text{
color:#827f7f;
}
.vis-custom-time.videotime{
background-color: #2781cc;
}
}