Revize c892003d

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

website/public/css/style.css

@@ -893 +893 @@
   position: relative;
   padding: 0 10px;
   border-radius: 100px;
+  cursor: pointer;
   background-color: rgba(11, 21, 90, 0.7);
 }
 
@@ -1101 +1102 @@
 .leaflet-popup-content-wrapper, .leaflet-popup-tip {
   font-family: 'Be Vietnam', sans-serif;
   text-align: center;
-  color: white;
+  color: #ffffff;
 }
 
 .leaflet-popup-content-wrapper .leaflet-popup-content strong {
@@ -1166 +1167 @@
 }
 
 header.map .nav-item .btn-secondary {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   outline: none;
   border-radius: 50px;
   height: 40px;
@@ -1177 +1181 @@
   -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;
 }
 
 @media (max-width: 991.98px) {
@@ -1229 +1229 @@
   color: #000;
 }
 
-header.map .nav-item select:hover {
-  cursor: pointer;
-  background: rgba(255, 255, 255, 0.2);
-}
-
-header.map .nav-item select:hover option {
-  background: #0048A9;
-}
-
-header.map .nav-item select:focus {
-  background: #0048A9;
-  color: white;
-}
-
-.custom-dropdown-item {
-  margin: 0px !important;
-}
-
-.custom-dropdown-item .disabled {
-  cursor: not-allowed !important;
-}
-
-.custom-control-label {
-  font-weight: 300 !important;
-  margin: 0px !important;
+.dropdown {
+  min-width: 200px;
 }
 
-.custom-dropdown {
-  cursor: not-allowed;
-}
-
-input[type=radio]:checked ~ label {
+.dropdown input[type="radio"]:checked ~ label {
   font-weight: 800;
 }
 
@@ -1280 +1253 @@
   width: 100%;
   max-height: 300px;
   overflow-y: auto;
+  z-index: 1001;
+}
+
+.dropdown .dropdown-item:active {
+  background: #0048A9;
 }
 
 .dropdown .dropdown-item label {
   width: 100% !important;
+  margin-left: 0;
   cursor: pointer;
 }
 
-.dropdown #dataset-dropdown-time .dropdown-item:nth-of-type(even) {
+.dropdown #dropdown-time .dropdown-item:nth-of-type(even) {
   background: rgba(0, 0, 0, 0.05);
 }
 
-.dropdown #dataset-dropdown-time .dropdown-item:nth-of-type(even):active {
-  background: #007bff;
+.dropdown #dropdown-time .dropdown-item:nth-of-type(even):active {
+  background: #0048A9;
 }