Merge branch 'monika_animation' of https://github.com/browngraphicslab/Dash-Web into animationtimeline_two

1 files changed, 83 insertions, 68 deletions

diff --git a/src/client/views/animationtimeline/TimelineOverview.scss b/src/client/views/animationtimeline/TimelineOverview.scss
index c7f9bd059..a0b9d462b 100644
--- a/src/client/views/animationtimeline/TimelineOverview.scss
+++ b/src/client/views/animationtimeline/TimelineOverview.scss
@@ -1,85 +1,100 @@
-@import "./../globalCssVariables.scss"; 
+@import "./../globalCssVariables.scss";
 
+$timelineColor: #9acedf;
+$timelineDark: #77a1aa;
 
-.timeline-overview-container{ 
-    padding: 0px; 
-    margin: 0px; 
-    width: 300px; 
-    height: 40px;
-    background: white; 
-    position: relative; 
-    border: 2px solid black; 
-    
-    .timeline-overview-visible{
-        position: absolute; 
-        height: 100%; 
-        background: green; 
+.timelineOverview-bounding {
+    width: 100%;
+    margin-right: 10px;
+}
+
+.timeline-overview-container {
+    // padding: 0px;
+    margin-right: 5px;
+    // margin: 0px;
+    margin-left: 5px;
+    // width: 300px;
+    width: 100%;
+    height: 25px;
+    background: white;
+    position: relative;
+    border: 2px solid $timelineDark;
+    // width: 100%;
+
+    .timeline-overview-visible {
+        position: absolute;
+        height: 21px;
+        background: $timelineColor;
         display: inline-block;
-        margin: 0px; 
-        padding: 0px; 
+        margin: 0px;
+        padding: 0px;
+        // top: 1px;
     }
-    .timeline-overview-scrubber-container{   
-        margin: 0px; 
-        padding: 0px; 
-        position: absolute; 
+
+    .timeline-overview-scrubber-container {
+        margin: 0px;
+        padding: 0px;
+        position: absolute;
         height: 100%;
-        width: 2px; 
-        top: 0px; 
-        left: 0px; 
+        width: 2px;
+        top: 0px;
+        left: 0px;
         z-index: 1001;
-        background-color:black; 
-        display: inline-block; 
+        background-color: black;
+        display: inline-block;
 
-        .timeline-overview-scrubber-head{   
-            padding: 0px; 
-            margin: 0px; 
-            position:absolute; 
-            height: 30px; 
-            width: 30px;
-            background-color:transparent; 
-            border-radius: 50%; 
-            border: 5px solid black; 
-            left: -15px;
-            top: -30px; 
+        .timeline-overview-scrubber-head {
+            padding: 0px;
+            margin: 0px;
+            position: absolute;
+            height: 10px;
+            width: 10px;
+            background-color: white;
+            border-radius: 50%;
+            border: 2px solid black;
+            left: -4px;
+            // top: -30px;
+            top: -10px;
         }
     }
 }
 
 
 
-.timeline-play-bar{
-    position: relative; 
-    padding: 0px; 
-    margin: 0px; 
-    width: 300px; 
-    height: 4px; 
-    background-color: grey;
+.timeline-play-bar {
+    position: relative;
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+    height: 4px;
+    background-color: $timelineColor;
     border-radius: 20px;
-    cursor: pointer; 
-    
-    .timeline-play-head{
-        position: absolute; 
-        padding: 0px; 
-        margin: 0px; 
-        width: 20px; 
-        height: 20px; 
-        border-radius: 50%; 
-        background-color: white; 
-        border: 3px grey solid; 
-        left: 0px; 
-        top: -10px; 
-        cursor: pointer; 
+    cursor: pointer;
+
+    .timeline-play-head {
+        position: absolute;
+        padding: 0px;
+        margin: 0px;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background-color: white;
+        border: 3px solid $timelineColor;
+        left: 0px;
+        top: -8px;
+        cursor: pointer;
     }
-}  
-.timeline-play-tail{
-    position: absolute; 
-    padding: 0px; 
-    margin: 0px; 
-    height: 4px; 
-    width: 0px;   
-    z-index: 1000; 
-    background-color: green;
+}
+
+.timeline-play-tail {
+    position: absolute;
+    padding: 0px;
+    margin: 0px;
+    height: 4px;
+    width: 0px;
+    z-index: 1000;
+    background-color: $timelineColor;
     border-radius: 20px;
-    margin-top: -4px; 
-    cursor: pointer; 
+    margin-top: -4px;
+    cursor: pointer;
 }
\ No newline at end of file