123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- 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;
- }
- }
- #teaser{
- position:absolute; z-index: 50;
- top:0; left:0; width:100%; height:100%;
- background-color: #000;
- background-image: url(../assets/lagare.png);
- background-size: cover;
- background-repeat: no-repeat;
- .layer{
- position: absolute;
- width:100%; height:100%;
- top:0; left:0;
- background-color: rgba(0,0,0,0.7);
- }
- .popup{
- position: absolute;
- background-color: rgba(0,0,0,0.8);
- width:20%; left:50%; top:45%; margin-left: -10%;
- border-radius: 4px;
- h1{
- color: #fff;
- text-align: center;
- font-family: monospace;
- }
- }
- }
- body.teasing{
- #timelaps, #mapin, #mapout{display: none;}
- }
|