basic audio trim complete

1 files changed, 12 insertions, 10 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index 92476e298..59c21210a 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -1,9 +1,9 @@
+@import "../global/globalCssVariables.scss";
+
 .collectionStackedTimeline {
   position: absolute;
   width: 100%;
   height: 100%;
-  border: gray solid 1px;
-  border-radius: 3px;
   z-index: 1000;
   overflow: hidden;
   top: 0px;
@@ -11,19 +11,21 @@
   .collectionStackedTimeline-trim-shade {
     position: absolute;
     height: 100%;
-    background-color: black;
+    background-color: $dark-gray;
     opacity: 0.3;
   }
 
   .collectionStackedTimeline-trim-controls {
     height: 100%;
     position: absolute;
-    border: 2px solid yellow;
+    box-sizing: border-box;
+    border: 2px solid $medium-blue;
     display: flex;
     justify-content: space-between;
+    max-width: 100%;
 
     .collectionStackedTimeline-trim-handle {
-      background-color: yellow;
+      background-color: $medium-blue;
       height: 100%;
       width: 5px;
       cursor: ew-resize;
@@ -35,19 +37,19 @@
     width: 10px;
     top: 2.5%;
     height: 95%;
-    background: lightblue;
-    border-radius: 5px;
+    background: $light-blue;
+    border-radius: 3px;
     opacity: 0.3;
     z-index: 500;
     border-style: solid;
-    border-color: darkblue;
+    border-color: $medium-blue;
     border-width: 1px;
   }
 
   .collectionStackedTimeline-current {
     width: 1px;
     height: 100%;
-    background-color: red;
+    background-color: $pink;
     position: absolute;
     top: 0px;
     pointer-events: none;
@@ -64,7 +66,7 @@
 
     .collectionStackedTimeline-left-resizer,
     .collectionStackedTimeline-resizer {
-      background: dimgrey;
+      background: $medium-gray;
       position: absolute;
       top: 0;
       height: 100%;