Revize 351696d5

Re #7926, finishing controls on map

website/public/css/style.scss

@@ -7 +7 @@
 @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap');
 
 html, body {
+  font-family: 'Be Vietnam', sans-serif;
+  color: #fff;
   position: relative;
   height: 96.2%;
   background: #242C6B;
 
-  @include media-breakpoint-down(sm) {
-    height: auto;
+  &.intro {
+    @include media-breakpoint-down(sm) {
+      height: auto;
+    }
   }
 }
 
-body {
-  font-family: 'Be Vietnam', sans-serif;
-  color: #fff;
-}
-
 header {
   height: 70px;
   background: #0048A9;
@@ -119 +118 @@
 
   .navbar-button {
     padding: .5rem 22px;
+    margin-right: 40px;
     border: 1px solid #fff;
     border-radius: 20px;
     text-decoration: none;
@@ -219 +219 @@
         display: none;
         border: 0;
 
-        /*@include media-breakpoint-down(lg) {
-
-          margin: 0 10px 0 20px;
-        }*/
-
         @include media-breakpoint-down(md) {
           display: block;
           width: 100%;
@@ -634 +629 @@
 // SEZNAM LOKACÍ NA MAPĚ
 .map-locations {
   position: absolute;
+  top: 105px;
   right: 50px;
-  top: 110px;
   z-index: 1000;
   border-radius: 22px;
   background-color: rgba(11, 21, 90, .7);
 
+  @include media-breakpoint-down(md) {
+    top: 90px;
+    right: 20px;
+  }
+
   .menu {
+    display: inline-block;
     position: relative;
     padding: 10px 60px 13px 16px;
-    margin-bottom: 10px;
+    text-decoration: none;
     border-radius: 50px;
     opacity: 1;
     background: #0B155A;
 
+    @include media-breakpoint-down(xs) {
+      min-width: 280px;
+      width: 100%;
+      padding-bottom: 16px;
+      font-size: 14px;
+    }
+
     .circle {
       display: inline-block;
       width: 40px;
@@ -672 +680 @@
   }
 
   .locations {
+    z-index: 1000;
+
     ul {
+      margin-top: 10px;
       padding-left: 36px;
       padding-right: 20px;
       font-size: 15px;
       list-style-image: url($images-dir + 'li-bullet.svg');
+
+      @include media-breakpoint-down(xs) {
+        font-size: 13.5px;
+      }
     }
 
     li {
@@ -699 +714 @@
   bottom: -40px;
   z-index: 1000;
 
+  @include media-breakpoint-down(xs) {
+    bottom: -30px;
+  }
+
   .next, .prev, .play {
     display: inline-block;
-    width: 50px;
-    height: 50px;
+    width: 42px;
+    height: 42px;
     margin-right: 20px;
     position: relative;
     border-radius: 50%;
@@ -712 +731 @@
     background: #0B155A;
     cursor: pointer;
 
+    &:hover {
+      opacity: 1;
+    }
+
     &:after {
       content: "";
       display: inline-block;
@@ -724 +747 @@
   }
 
   .play {
-    width: 65px;
-    height: 65px;
+    width: 57px;
+    height: 57px;
     opacity: 1;
 
+    &:hover {
+      opacity: .7;
+    }
+
     &:after {
       width: 10px;
       height: 16px;
@@ -745 +772 @@
     background: url($images-dir + 'btn-prev.svg') no-repeat top right;
   }
 
+  .timeline {
+    display: flex;
+    height: 30px;
+    flex-direction: row;
+    position: relative;
+    padding: 0 10px;
+    border-radius: 100px;
+    background-color: rgba(11, 21, 90, .7);
+
+    @include media-breakpoint-down(md) {
+      padding: 0;
+    }
+
+    .hour {
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+
+      &:before {
+        content: "";
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #fff;
+      }
+
+      &:after {
+        content: "";
+        display: inline-block;
+        position: relative;
+        top: -2px;
+        width: 20px;
+        height: 2px;
+        background: #fff;
+      }
+    }
+
+    .end-dot:before {
+      content: "";
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: #fff;
+
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+    }
+  }
+
   .time {
     display: flex;
     justify-content: center;
@@ -752 +831 @@
     width: 64px;
     font-size: 15px;
     padding: 3px 0 4px 0;
+    z-index: 1000;
     border-radius: 15px;
     background: #0B155A;
+
+    @include media-breakpoint-up(lg) {
+      position: absolute;
+
+      &.hour-0 {left: 0;}
+      &.hour-1 {left: 25px;}
+      &.hour-2 {left: 50px;}
+      &.hour-3 {left: 75px;}
+      &.hour-4 {left: 100px;}
+      &.hour-5 {left: 125px;}
+      &.hour-6 {left: 150px;}
+      &.hour-7 {left: 175px;}
+      &.hour-8 {left: 200px;}
+      &.hour-9 {left: 225px;}
+      &.hour-10 {left: 250px;}
+      &.hour-11 {left: 275px;}
+      &.hour-12 {left: 300px;}
+      &.hour-13 {left: 325px;}
+      &.hour-14 {left: 350px;}
+      &.hour-15 {left: 375px;}
+      &.hour-16 {left: 400px;}
+      &.hour-17 {left: 425px;}
+      &.hour-18 {left: 450px;}
+      &.hour-19 {left: 475px;}
+      &.hour-20 {left: 500px;}
+      &.hour-21 {left: 525px;}
+      &.hour-22 {left: 550px;}
+      &.hour-23 {left: 585px;}
+    }
   }
 }