Revize b7a21811

Re #8161 - new timeline button due animation per day(s)

website/public/css/style.css

@@ -768 +768 @@
   }
 }
 
-.player .next, .player .prev, .player .play, .player .pause {
+.player .next, .player .prev, .player .play, .player .pause, .player .lock-date {
   display: inline-block;
   width: 42px;
   height: 42px;
@@ -782 +782 @@
   cursor: pointer;
 }
 
-.player .next:hover, .player .prev:hover, .player .play:hover, .player .pause:hover {
+.player .next:hover, .player .prev:hover, .player .play:hover, .player .pause:hover, .player .lock-date:hover {
   opacity: 1;
 }
 
-.player .next:after, .player .prev:after, .player .play:after, .player .pause:after {
+.player .next:after, .player .prev:after, .player .play:after, .player .pause:after, .player .lock-date:after {
   content: "";
   display: inline-block;
   width: 7px;
@@ -867 +867 @@
 }
 
 .player .date {
+  display: flex;
+  align-items: center;
+  align-content: center;
   font-size: 15px;
-  padding: 3px 12px 4px 12px;
   margin-right: 10px;
   text-align: center;
   border-radius: 15px;
   cursor: pointer;
-  background: #0b155a;
+  background: rgba(11, 21, 90, 0.7);
 }
 
 @media (max-width: 390px) {
@@ -882 +884 @@
   }
 }
 
-.player .date:hover {
-  opacity: .7;
+.player .date span {
+  padding: 3px 6px 4px 12px;
+}
+
+.player .date .lock-date {
+  width: 26px;
+  height: 26px;
+  margin-right: 2px;
+  opacity: 1;
+  border: 1px solid #ffffff;
+  box-shadow: 0 0 0 2px #0b155a;
+}
+
+.player .date .lock-date:hover {
+  box-shadow: 0 0 0 2px rgba(11, 21, 90, 0.2);
+  background: rgba(11, 21, 90, 0.2);
+}
+
+.player .date .lock-date:hover:after {
+  background-position: -8px 0;
+}
+
+.player .date .lock-date:after {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 11px;
+  background: url("../img/btn-lock.svg") no-repeat 0 0;
+  background-size: cover;
+}
+
+.player .date .lock-date.unlock:after {
+  background-position: -8px 0;
+}
+
+.player .date .lock-date.unlock:hover:after {
+  background-position: 0 0;
 }
 
 .player .timeline {