added a hideUI option to hide buttons. fixed a mess of runtime warnings mostly related to how scss files can be included in each other

1 files changed, 21 insertions, 21 deletions

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 4337401e3..933a383ea 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -1,4 +1,4 @@
-@import '../global/globalCssVariables.module.scss';
+@use '../global/globalCssVariables.module.scss' as global;
 
 .audiobox-container {
     width: 100%;
@@ -19,30 +19,30 @@
 
     .audiobox-dictation {
         width: 40px;
-        background: $medium-gray;
-        color: $dark-gray;
+        background: global.$medium-gray;
+        color: global.$dark-gray;
         display: flex;
         justify-content: center;
         align-items: center;
 
         &:hover {
-            color: $black;
+            color: global.$black;
         }
     }
 
     .audiobox-start-record {
-        color: $white;
-        background: $dark-gray;
+        color: global.$white;
+        background: global.$dark-gray;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: $body-text;
+        font-size: global.$body-text;
         width: 100%;
         height: 100%;
         gap: 5px;
 
         &:hover {
-            background: $black;
+            background: global.$black;
         }
     }
 
@@ -54,11 +54,11 @@
         gap: 5px;
         width: 100%;
         height: 100%;
-        background: $dark-gray;
+        background: global.$dark-gray;
         color: white;
 
         .record-timecode {
-            font-size: $large-header;
+            font-size: global.$large-header;
         }
 
         .record-button {
@@ -66,7 +66,7 @@
             width: 30px;
             height: 30px;
             border-radius: 50%;
-            background: $dark-gray;
+            background: global.$dark-gray;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -76,7 +76,7 @@
             }
 
             &:hover {
-                background: $black;
+                background: global.$black;
             }
         }
     }
@@ -87,10 +87,10 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    background: $dark-gray;
+    background: global.$dark-gray;
     width: 100%;
     height: 100%;
-    color: $white;
+    color: global.$white;
 
     .audiobox-button {
         margin: 2.5px;
@@ -98,7 +98,7 @@
         width: 25px;
         height: 25px;
         border-radius: 50%;
-        background: $dark-gray;
+        background: global.$dark-gray;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -108,7 +108,7 @@
         }
 
         &:hover {
-            background: $black;
+            background: global.$black;
         }
     }
 
@@ -132,7 +132,7 @@
         height: 6px;
         cursor: pointer;
         box-shadow: 0;
-        background: $light-gray;
+        background: global.$light-gray;
         border-radius: 3px;
     }
 
@@ -142,7 +142,7 @@
         height: 10px;
         width: 10px;
         border-radius: 10px;
-        background: $medium-blue;
+        background: global.$medium-blue;
         cursor: pointer;
         -webkit-appearance: none;
         margin-top: -2px;
@@ -180,12 +180,12 @@
     .audiobox-playback {
         width: 100%;
         height: 100%;
-        background: $white;
+        background: global.$white;
 
         .audiobox-timeline {
             height: calc(100% - 50px);
             width: 100%;
-            background: $white;
+            background: global.$white;
             position: absolute;
         }
 
@@ -203,7 +203,7 @@
         width: 100%;
         height: 20px;
         padding: 3px;
-        font-size: $small-text;
+        font-size: global.$small-text;
 
         .bottom-controls-middle {
             display: flex;