basic audio trim complete

1 files changed, 29 insertions, 25 deletions

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 0fb0dc70e..ac2b19fd6 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -1,3 +1,6 @@
+@import "../global/globalCssVariables.scss";
+
+
 .audiobox-container,
 .audiobox-container-interactive {
   width: 100%;
@@ -19,10 +22,11 @@
       height: 100%;
       align-items: center;
       display: inherit;
-      background: dimgray;
+      background: $medium-gray;
       left: 0px;
+      color: $dark-gray;
       &:hover {
-        color: white;
+        color: $black;
         cursor: pointer;
       }
     }
@@ -61,13 +65,13 @@
     position: relative;
     padding-right: 5px;
     display: flex;
-    background-color: red;
+    background-color: $medium-blue;
 
     .time {
       position: relative;
       height: 100%;
       width: 100%;
-      font-size: 20;
+      font-size: $large-header;
       text-align: center;
       top: 5;
     }
@@ -77,9 +81,11 @@
       margin-top: auto;
       margin-bottom: auto;
       width: 25px;
+      width: 25px;
       padding: 5px;
+      color: $dark-gray;
       &:hover {
-        background-color: crimson;
+        color: $black;
       }
     }
   }
@@ -89,16 +95,15 @@
     height: 100%;
     position: relative;
     display: flex;
-    padding-left: 2px;
-    background: black;
+    background: $dark-gray;
 
     .audiobox-dictation {
       position: absolute;
-      width: 32px;
+      width: 40px;
       height: 100%;
       align-items: center;
       display: inherit;
-      background: dimgray;
+      background: $medium-gray;
       left: 0px;
     }
 
@@ -110,22 +115,23 @@
       padding-right: 5px;
       display: flex;
       flex-direction: column;
+      justify-content: center;
 
-      .audiobox-playhead {
+      .audiobox-buttons {
         position: relative;
         margin-top: auto;
         margin-bottom: auto;
-        margin-right: 2px;
-        height: 25px;
+        width: 30px;
+        height: 30px;
         border-radius: 50%;
-        background-color: black;
-        color: white;
+        background-color: $dark-gray;
+        color: $white;
         display: flex;
         align-items: center;
         justify-content: center;
+        left: 5px;
         &:hover {
-          background-color: grey;
-          color: lightgrey;
+          background-color: $black;
         }
 
         svg {
@@ -141,30 +147,28 @@
         margin-top: auto;
         margin-bottom: auto;
         width: 25px;
-        padding: 2px;
         align-items: center;
         display: inherit;
-        background: dimgray;
+        background: $medium-gray;
       }
 
       .audiobox-timeline {
         position: absolute;
         width: 100%;
-        border: gray solid 1px;
-        border-radius: 3px;
         z-index: 1000;
         overflow: hidden;
+        border-right: 5px solid black;
       }
 
       .audioBox-total-time,
       .audioBox-current-time {
         position: absolute;
-        font-size: 8;
+        font-size: $small-text;
         top: 100%;
-        color: white;
+        color: $white;
       }
       .audioBox-current-time {
-        left: 30px;
+        left: 42px;
       }
 
       .audioBox-total-time {
@@ -189,12 +193,12 @@
     font-size: 3em;
   }
 
-  .audiobox-container .audiobox-controls .audiobox-player .audiobox-playhead,
+  .audiobox-container .audiobox-controls .audiobox-player .audiobox-buttons,
   .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation,
   .audiobox-container-interactive
     .audiobox-controls
     .audiobox-player
-    .audiobox-playhead {
+    .audiobox-buttons {
     width: 70px;
   }
 }