fixed marker document decorations on scroll in zoomed timeline

1 files changed, 70 insertions, 53 deletions

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index d466c6c3b..b3df7e79f 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -92,6 +92,62 @@
     height: 100%;
     color: $white;
 
+    .audiobox-button {
+        margin: 2.5px;
+        cursor: pointer;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background: $dark-gray;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+            width: 15px;
+        }
+
+        &:hover {
+            background: $black;
+        }
+    }
+
+    svg {
+        width: 10px;
+    }
+
+    input[type="range"] {
+        width: 70px;
+        -webkit-appearance: none;
+        background: none;
+        margin: 5px;
+    }
+
+    input[type="range"]:focus {
+        outline: none;
+    }
+
+    input[type="range"]::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 6px;
+        cursor: pointer;
+        box-shadow: 0;
+        background: $light-gray;
+        border-radius: 3px;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+        box-shadow: 0;
+        border: 0;
+        height: 10px;
+        width: 10px;
+        border-radius: 10px;
+        background: $medium-blue;
+        cursor: pointer;
+        -webkit-appearance: none;
+        margin: -2px;
+    }
+
     .audiobox-controls {
         display: flex;
         flex-direction: row;
@@ -104,66 +160,20 @@
             display: flex;
             flex-direction: row;
             width: 100px;
-
-            .audiobox-button {
-                margin: 2.5px;
-                cursor: pointer;
-                width: 25px;
-                height: 25px;
-                border-radius: 50%;
-                background: $dark-gray;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-                svg {
-                    width: 15px;
-                }
-
-                &:hover {
-                    background: $black;
-                }
-            }
         }
 
         .controls-right {
             display: flex;
             flex-direction: row;
 
-            svg {
-                width: 10px;
-            }
-
-            input[type="range"] {
-                width: 70px;
-                -webkit-appearance: none;
-                background: none;
-                margin: 5px;
-            }
-
-            input[type="range"]:focus {
-                outline: none;
-            }
-
-            input[type="range"]::-webkit-slider-runnable-track {
-                width: 100%;
-                height: 6px;
-                cursor: pointer;
-                box-shadow: 0;
-                background: $light-gray;
-                border-radius: 3px;
-            }
+            .audiobox-button {
+                width: 15px;
+                height: 15px;
+                margin: 0;
 
-            input[type="range"]::-webkit-slider-thumb {
-                box-shadow: 0;
-                border: 0;
-                height: 10px;
-                width: 10px;
-                border-radius: 10px;
-                background: $medium-blue;
-                cursor: pointer;
-                -webkit-appearance: none;
-                margin: -2px;
+                svg {
+                    width: 10px;
+                }
             }
         }
     }
@@ -171,6 +181,7 @@
     .audiobox-playback {
         width: 100%;
         height: calc(100% - 50px);
+        background: $white;
 
         .audiobox-timeline {
             height: 100%;
@@ -193,5 +204,11 @@
         height: 20px;
         padding: 3px;
         font-size: $small-text;
+
+        .bottom-controls-middle {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
     }
 }