video + timeline are synchronized
This commit is contained in:
+1
-1
@@ -1 +1 @@
|
||||
#pictures,body,html{position:relative;overflow:hidden}#pictures,#pictures video,#root,body,html{width:100%;height:100%}#map,#timeline{position:absolute;z-index:9;bottom:0;left:0;background-color:rgba(255,255,255,.6);border-radius:2px}body,html{margin:0;padding:0;background-color:#000}#root{position:relative}#header{position:absolute;z-index:10;top:0;left:0}#pictures{z-index:5}#pictures video source:not(.1080p){display:none}#timeline{width:67%;margin:1% 0 1% 32%;height:3em}#map{width:30%;margin:1%;height:40%}
|
||||
#timelaps,body,html{position:relative;overflow:hidden}#root,#timelaps,body,html{width:100%;height:100%}#map,#timeline{z-index:9;bottom:0}#header,#map,#timeline{position:absolute;left:0}body,html{margin:0;padding:0;background-color:#000}#root{position:relative}#header{z-index:10;top:0}#timelaps{z-index:5}#timelaps video#timelapsvid{position:absolute;top:0;left:0;width:100%;height:100%}@media (min-aspect-ratio:16 / 9){#timelaps video#timelapsvid{height:300%;top:-100%}}@media (max-aspect-ratio:16 / 9){#timelaps video#timelapsvid{width:300%;left:-100%}}#timeline{width:67%;margin:1% 0 1% 32%;padding:7px;background-color:rgba(0,0,0,.8);border-radius:2px}#timeline .vis-background,#timeline .vis-background.vis-horizontal,#timeline .vis-background.vis-vertical,#timeline .vis-panel.vis-bottom,#timeline .vis-panel.vis-center,#timeline .vis-panel.vis-top,#timeline .vis-time-axis,#timeline .vis-timeline{border:none}#timeline .vis-text{color:#fff}#timeline .vis-custom-time.videotime{background-color:red}#map{width:30%;margin:1%;height:40%;background-color:rgba(255,255,255,.6);border-radius:2px;display:none}
|
||||
@@ -18,17 +18,26 @@ html, body {
|
||||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
#pictures {
|
||||
#timelaps {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden; }
|
||||
#pictures video {
|
||||
#timelaps video#timelapsvid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
#pictures video source:not(.1080p) {
|
||||
display: none; }
|
||||
@media (min-aspect-ratio: 16 / 9) {
|
||||
#timelaps video#timelapsvid {
|
||||
height: 300%;
|
||||
top: -100%; } }
|
||||
@media (max-aspect-ratio: 16 / 9) {
|
||||
#timelaps video#timelapsvid {
|
||||
width: 300%;
|
||||
left: -100%; } }
|
||||
|
||||
#timeline {
|
||||
position: absolute;
|
||||
@@ -37,9 +46,19 @@ html, body {
|
||||
left: 0;
|
||||
width: 67%;
|
||||
margin: 1% 0 1% 32%;
|
||||
height: 3em;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
padding: 7px;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 2px; }
|
||||
#timeline .vis-timeline {
|
||||
border: none; }
|
||||
#timeline .vis-time-axis,
|
||||
#timeline .vis-background, #timeline .vis-background.vis-horizontal, #timeline .vis-background.vis-vertical,
|
||||
#timeline .vis-panel.vis-center, #timeline .vis-panel.vis-top, #timeline .vis-panel.vis-bottom {
|
||||
border: none; }
|
||||
#timeline .vis-text {
|
||||
color: white; }
|
||||
#timeline .vis-custom-time.videotime {
|
||||
background-color: red; }
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
@@ -50,4 +69,5 @@ html, body {
|
||||
margin: 1%;
|
||||
height: 40%;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 2px; }
|
||||
border-radius: 2px;
|
||||
display: none; }
|
||||
|
||||
Reference in New Issue
Block a user