Revize c892003d

Re #8159 - CSS improvements, timeline clickable, code refactoring

website/public/css/style.scss

@@ -6 +6 @@
 
 $primary-bg-color: #0048A9;
 $primary-bg-color-darker: #004fb3;
+$input-bg-hover: #336dba;
 $secondary-bg-color: #0b155a;
 
 $primary-text-color: #ffffff;
@@ -717 +718 @@
 }
 
 
-// PŘEHRÁVAČ HEATMAPY
+// DOLNÍ OVLÁDACÍ PANEL HEATMAPY
 .player {
   width: 100%;
   display: flex;
@@ -850 +851 @@
     position: relative;
     padding: 0 10px;
     border-radius: 100px;
+    cursor: pointer;
     background-color: rgba(11, 21, 90, .7);
 
     @include media-breakpoint-down(md) {
@@ -955 +957 @@
   background: url($images-dir + 'footer-bg.svg') no-repeat;
 
   @include media-breakpoint-down(md) {
-    
     width: 320px;
     height: 143px;
     background-size: 100%;
@@ -1003 +1004 @@
   }
 }
 
-// INFORMACE O KONKRÉTNÍM BODĚ V HEATMAPĚ
+
+// POPUP O KONKRÉTNÍM BODĚ V HEATMAPĚ
 .leaflet-popup-content-wrapper, .leaflet-popup-tip {
   font-family: 'Be Vietnam', sans-serif;
   text-align: center;
-  color: white;
+  color: $primary-text-color;
 }
 
 .leaflet-popup-content-wrapper {
@@ -1074 +1076 @@
   }
 
   .btn-secondary {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     outline: none;
     border-radius: 50px;
     height: 40px;
@@ -1085 +1090 @@
     -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
     -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 
     @include media-breakpoint-down(md) {
       width: 100%;
@@ -1098 +1099 @@
       margin-bottom: -10px;
     }
 
-    &:after{
+    &:after {
       padding-bottom: 4px;
       content: '↺';
       font-weight: 400;
@@ -1136 +1137 @@
       color: #000;
     }
   }
+}
 
-  select {
-    &:hover {
-      cursor: pointer;
-      background: rgba(255, 255, 255, .2);
 
-      option {
-        background: $primary-bg-color;
-      }
-    }
+// MENU PRO VÝBĚR ČASU/DATOVÝCH SAD
+.dropdown {
+  min-width: 200px;
 
-    &:focus {
-      background: $primary-bg-color;
-      color: white;
-    }
+  input[type="radio"]:checked ~ label {
+    font-weight: 800;
   }
-}
-.custom-dropdown-item {
-  margin: 0px !important;
-}
-.custom-dropdown-item .disabled {
-  cursor: not-allowed !important;
-}
-.custom-control-label {
-  font-weight: 300 !important;
-  margin: 0px !important;
-}
-.custom-dropdown {
-  cursor: not-allowed;
-}
 
-input[type=radio]:checked~label {
-  font-weight: 800;
-}
-
-.dropdown {
   .btn {
     width: 100%;
     text-align: left;
@@ -1180 +1156 @@
     background: $primary-bg-color;
 
     &:hover {
-      background: #336dba;
+      background: $input-bg-hover;
     }
   }
 
@@ -1188 +1164 @@
     width: 100%;
     max-height: 300px;
     overflow-y: auto;
+    z-index: 1001;
   }
 
-  .dropdown-item label {
-    width: 100% !important;
-    cursor: pointer;
+  .dropdown-item {
+    &:active {
+      background: $primary-bg-color;
+    }
+    
+    label {
+      width: 100% !important;
+      margin-left: 0;
+      cursor: pointer;
+    }
   }
 
-  #dataset-dropdown-time .dropdown-item:nth-of-type(even) {
+  #dropdown-time .dropdown-item:nth-of-type(even) {
     background: rgba(0,0,0,.05);
 
     &:active {
-      background: #007bff;
+      background: $primary-bg-color;
     }
   }
 }