Revize 863ca316

Re #8159 - new, fixed buttons, CSS improvements, refactoring

website/public/css/style.css

@@ -1 @@
-@charset "UTF-8";
 @import url("https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap");
 html, body {
   position: relative;
@@ -768 +767 @@
   }
 }
 
-.player .next, .player .prev, .player .play, .player .pause, .player .lock-date {
+.player .next-btn, .player .prev-btn, .player .animate-btn, .player .lock-btn {
   display: inline-block;
   width: 42px;
   height: 42px;
@@ -782 +781 @@
   cursor: pointer;
 }
 
-.player .next:hover, .player .prev:hover, .player .play:hover, .player .pause:hover, .player .lock-date:hover {
+.player .next-btn:hover, .player .prev-btn:hover, .player .animate-btn:hover, .player .lock-btn:hover {
   opacity: 1;
 }
 
-.player .next:after, .player .prev:after, .player .play:after, .player .pause:after, .player .lock-date:after {
+.player .next-btn:after, .player .prev-btn:after, .player .animate-btn:after, .player .lock-btn:after {
   content: "";
   display: inline-block;
   width: 7px;
@@ -796 +795 @@
   left: calc(50% - 4px);
 }
 
-.player .play, .player .pause {
+.player .animate-btn {
   width: 57px;
   height: 57px;
   opacity: 1;
 }
 
 @media (max-width: 991.98px) {
-  .player .play, .player .pause {
+  .player .animate-btn {
     order: 3;
   }
 }
 
-.player .play:hover, .player .pause:hover {
+.player .animate-btn:hover {
   opacity: .7;
 }
 
-.player .play:after, .player .pause:after {
+.player .animate-btn:after {
   width: 10px;
   height: 16px;
   top: calc(50% - 8px);
 }
 
-.player .play:after {
-  left: calc(50% - 2px);
+.player .animate-btn.play:after {
+  left: calc(50% - 3px);
   background: url("../img/btn-play.svg") no-repeat;
 }
 
-.player .pause:after {
-  left: calc(50% - 4px);
+.player .animate-btn.pause:after {
+  left: calc(50% - 5px);
   background: url("../img/btn-pause.png") no-repeat;
 }
 
 @media (max-width: 991.98px) {
-  .player .next {
+  .player .next-btn {
     order: 3;
   }
 }
 
 @media (max-width: 575.98px) {
-  .player .next {
+  .player .next-btn {
     margin-right: 0;
   }
 }
 
-.player .next:after {
+.player .next-btn:after {
   background: url("../img/btn-next.svg") no-repeat;
 }
 
 @media (max-width: 991.98px) {
-  .player .prev {
+  .player .prev-btn {
     order: 2;
   }
 }
 
-.player .prev:after {
+.player .prev-btn:after {
   background: url("../img/btn-prev.svg") no-repeat;
 }
 
-.player .datetime {
+.player .timeline-wrapper {
   display: flex;
 }
 
 @media (max-width: 390px) {
-  .player .datetime {
+  .player .timeline-wrapper {
     display: block;
     text-align: center;
     margin-right: 10px;
@@ -884 +883 @@
   }
 }
 
-.player .date span {
-  padding: 3px 6px 4px 12px;
+.player .date:hover .lock-btn:after {
+  background-position: 0 0;
 }
 
 .player .date.lock {
   background: #0b155a;
 }
 
-.player .date.lock .lock-date {
-  border: 0px;
+.player .date.lock:hover .lock-btn:after {
+  background-position: -8px 0;
+}
+
+.player .date.lock .lock-btn {
+  border: 0;
   box-shadow: none;
 }
 
-.player .date.lock .lock-date:after {
+.player .date.lock .lock-btn:after {
   background-position: 0 0;
 }
 
-.player .date.lock .lock-date:hover:after {
-  background-position: -8px 0;
+.player .date span {
+  padding: 3px 6px 4px 12px;
 }
 
-.player .date .lock-date {
+.player .date .lock-btn {
   width: 26px;
   height: 26px;
   margin-right: 2px;
   opacity: 1;
   border: 1px solid #ffffff;
-  /* box-shadow: 0 0 0 2px $secondary-bg-color; */
 }
 
-.player .date .lock-date:after {
-  background-position: -8px 0;
-}
-
-.player .date .lock-date:hover {
-  /* box-shadow: 0 0 0 2px rgba(11, 21, 90, .2); */
-  background: rgba(11, 21, 90, 0.2);
-}
-
-.player .date .lock-date:hover:after {
-  background-position: 0 0;
-}
-
-.player .date .lock-date:after {
+.player .date .lock-btn:after {
   content: '';
   display: inline-block;
   width: 8px;
@@ -936 +925 @@
   background-size: cover;
 }
 
+.player .date .lock-btn:hover:after {
+  background-position: 0 0;
+}
+
 .player .timeline {
   display: flex;
   height: 30px;
@@ -1212 +1205 @@
   margin-bottom: auto;
 }
 
-header.map .nav-item:nth-child(3), header.map .nav-item:last-child {
+header.map .nav-item:nth-child(3) {
   border: 0;
 }
 
-header.map .nav-item .btn-secondary {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  outline: none;
-  border-radius: 50px;
-  height: 40px;
-  width: 40px;
-  margin-left: 10px;
-  transition: all 0.2s ease-out;
-  color: #0048A9;
-  background: white;
-  -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);
+header.map .nav-item:last-child {
+  margin-top: 0;
+  margin-bottom: 0;
+  border-left: 1px solid #1C6CC0;
+  background: #0057be;
 }
 
 @media (max-width: 991.98px) {
-  header.map .nav-item .btn-secondary {
-    width: 100%;
-    border-radius: .25rem;
-    margin-left: 0px;
-    margin-top: 10px;
-    margin-bottom: -10px;
+  header.map .nav-item:last-child {
+    margin: 10px 5px 0 5px;
+    border: 0;
   }
 }
 
-header.map .nav-item .btn-secondary:after {
-  padding-bottom: 4px;
-  content: '↺';
-  font-weight: 400;
-  font-size: 30px;
-  transform: rotateZ(0);
-  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
+header.map .nav-item:last-child:hover {
+  background: #004fb3;
 }
 
-header.map .nav-item .btn-secondary:hover {
-  color: #0048A9;
-  background: white !important;
-  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
-  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
-  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
+header.map .nav-item .btn-secondary {
+  display: inline-block;
+  outline: none;
+  padding: 0 30px;
+  background: url("../img/btn-refresh.svg") no-repeat center center;
 }
 
-header.map .nav-item .btn-secondary:hover:after {
-  transform: rotateZ(-90deg);
-  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
+header.map .nav-item .btn-secondary:hover {
+  background: url("../img/btn-refresh.svg") no-repeat center center !important;
 }
 
-header.map .nav-item .btn-secondary:active, header.map .nav-item .btn-secondary:focus {
-  background: #f0f0f0 !important;
-  color: #0048A9 !important;
+@media (max-width: 991.98px) {
+  header.map .nav-item .btn-secondary {
+    width: 100%;
+    padding: 20px;
+  }
 }
 
 header.map .nav-item input:hover {