1 files changed, 142 insertions, 0 deletions
diff --git a/src/client/views/animationtimeline/Timeline.scss b/src/client/views/animationtimeline/Timeline.scss
new file mode 100644
index 000000000..990bc681c
--- /dev/null
+++ b/src/client/views/animationtimeline/Timeline.scss
@@ -0,0 +1,142 @@
+@import "./../globalCssVariables.scss"; 
+
+.minimize{
+    position:relative; 
+    z-index: 1000; 
+    height: 30px; 
+    width: 100px; 
+}
+
+.timeline-toolbox{
+    position:absolute; 
+    display:flex;
+    align-items: flex-start; 
+    flex-direction: row;  
+    top: 10px;
+    div{
+        margin-left:10px; 
+    }
+}
+.timeline-container{
+    width:100%;
+    height:300px; 
+    position:absolute;
+    background-color: $light-color-secondary;
+    box-shadow: 0px 10px 20px; 
+
+    .info-container{ 
+        margin-top: 50px; 
+        right:20px; 
+        position:absolute; 
+        height: calc(100% - 100px); 
+        width: calc(100% - 140px); 
+        overflow: hidden;
+
+        .scrubberbox{
+            position:absolute; 
+            background-color: transparent; 
+            height: 30px;
+            width:100%; 
+            
+            .tick{
+                height:100%; 
+                width: 1px; 
+                background-color:black; 
+
+            }   
+        }
+        .scrubber{
+            top:30px; 
+            height: 100%; 
+            width: 2px; 
+            position:absolute;
+            z-index: 1001;
+            background-color:black; 
+            .scrubberhead{
+                top: -30px; 
+                height: 30px; 
+                width: 30px;
+                background-color:transparent; 
+                border-radius: 50%; 
+                border: 5px solid black; 
+                left: -15px;
+                position:absolute;                 
+            }
+        }
+
+        .trackbox{
+            top: 30px; 
+            height:calc(100% - 30px);
+            width:100%;
+            border:1px;
+            overflow:hidden;
+            background-color:white;
+            position:absolute;
+            box-shadow: -10px 0px 10px 10px grey; 
+        }
+        
+    }
+    .title-container{
+        margin-top: 80px; 
+        margin-left: 20px; 
+        height: calc(100% - 100px - 30px); 
+        width: 100px; 
+        background-color:white;
+        overflow: hidden;  
+        .datapane{
+            top:0px; 
+            width: 100px; 
+            height: 75px; 
+            border: 1px solid $dark-color;
+            background-color: $intermediate-color; 
+            color: white; 
+            position:relative; 
+            float:left; 
+            border-style:solid; 
+        }
+    }
+    .resize{
+        bottom: 5px; 
+        position:absolute; 
+        height: 30px; 
+        width: 50px; 
+        left: calc(50% - 25px);
+    }
+}
+
+
+
+.overview{
+    position: absolute; 
+    height: 50px; 
+    width: 200px; 
+    background-color: black; 
+    .container{        
+        position: absolute; 
+        float: left 0px; 
+        top: 25%; 
+        height: 75%; 
+        width: 100%; 
+        background-color: grey; 
+    }
+}
+
+.round-toggle {
+    position: absolute;
+    height: 40px;
+    width: 80px;
+    background-color: white;
+    border: 2px solid purple;
+    border-radius: 20px;
+    input{
+        opacity: 0; 
+        height: 0; 
+        width: 0; 
+    }
+    .slider{
+        height: 40px; 
+        width: 40px; 
+        background-color: black; 
+        border-radius: 20px; 
+    }
+}
+\ No newline at end of file