merge with mehek video

1 files changed, 38 insertions, 3 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index e8b6817b4..bb98e1c99 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -6,8 +6,18 @@
     overflow-y: hidden;
     border: none;
     background-color: $white;
-    border: 2px solid $dark-gray;
     border-width: 0 2px 0 2px;
+
+    &:hover {
+        .collectionStackedTimeline-hover {
+            display: block;
+        }
+    }
+}
+
+.timeline-container:hover + .timeline-hoverUI {
+    display: flex;
+    justify-content: center;
 }
 
 ::-webkit-scrollbar {
@@ -19,6 +29,7 @@
     background: $off-white;
     z-index: 1000;
     height: 100%;
+    overflow: hidden;
 
     .collectionStackedTimeline-trim-shade {
         position: absolute;
@@ -61,15 +72,23 @@
         border-width: 1px;
     }
 
-    .collectionStackedTimeline-current {
+    .collectionStackedTimeline-current, .collectionStackedTimeline-hover {
         width: 1px;
         height: 100%;
-        background-color: $pink;
         position: absolute;
         top: 0px;
         pointer-events: none;
     }
 
+    .collectionStackedTimeline-current {
+        background-color: $pink;
+    }
+
+    .collectionStackedTimeline-hover {
+        display: none;
+        background-color: $medium-blue;
+    }
+
     .collectionStackedTimeline-marker-timeline {
         position: absolute;
         top: 2.5%;
@@ -108,3 +127,19 @@
         pointer-events: none;
     }
 }
+
+.timeline-hoverUI {
+    position: absolute;
+    z-index: 10000;
+    transform: translate(-50%, 100%);
+    height: 100%;
+    display: none;
+
+    .hoverTime {
+        position: absolute;
+        color: $dark-gray;
+        transform: translate(0, -100%);
+
+        font-weight: bold;
+    }
+}
\ No newline at end of file