cleaned up video/audio/stackedTimeline css. restored SpaceKey trigger to start/stop creating an anchor.

1 files changed, 20 insertions, 204 deletions

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 4a3bbf8d8..fc881ca25 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -7,11 +7,6 @@
     position: relative;
     cursor: default;
 
-    .audiobox-inner {
-        width:100%;
-        height: 100%;
-    }
-
     .audiobox-buttons {
         display: flex;
         width: 100%;
@@ -26,20 +21,13 @@
             display: inherit;
             background: dimgray;
             left: 0px;
-        }
-
-        .audiobox-dictation:hover {
-            color: white;
-            cursor: pointer;
+            &:hover {
+                color: white;
+                cursor: pointer;
+            }
         }
     }
 
-    .audiobox-handle {
-        width: 20px;
-        height: 100%;
-        display: inline-block;
-    }
-
     .audiobox-control,
     .audiobox-control-interactive {
         top: 0;
@@ -53,21 +41,16 @@
         pointer-events: all;
     }
 
+    .audiobox-record-interactive,
     .audiobox-record {
         pointer-events: all;
         width: 100%;
         height: 100%;
         position: relative;
-        pointer-events: none;
     }
 
-    .audiobox-record-interactive {
-        pointer-events: all;
-        width: 100%;
-        height: 100%;
-        position: relative;
-
-        
+    .audiobox-record {
+        pointer-events: none;
     }
 
     .recording {
@@ -95,10 +78,9 @@
             margin-bottom: auto;
             width: 25px;
             padding: 5px;
-        }
-
-        .buttons:hover {
-            background-color: crimson;
+            &:hover{
+                background-color: crimson;
+            }
         }
     }
 
@@ -138,13 +120,10 @@
                 border-radius: 50%;
                 background-color: black;
                 color: white;
-            }
-
-            .audiobox-playhead:hover {
-                // background-color:  black;
-                // border-radius: 5px;
-                background-color: grey;
-                color: lightgrey;
+                &:hover {
+                    background-color: grey;
+                    color: lightgrey;
+                }
             }
 
             .audiobox-dictation {
@@ -166,29 +145,6 @@
                 z-index: 1000;
                 overflow: hidden;
 
-                .audiobox-container {
-                    position: absolute;
-                    width: 10px;
-                    top: 2.5%;
-                    height: 0px;
-                    background: lightblue;
-                    border-radius: 5px;
-                    // box-shadow: black 2px 2px 1px;
-                    opacity: 0.3;
-                    z-index: 500;
-                    border-style: solid;
-                    border-color: darkblue;
-                    border-width: 1px;
-                }
-
-                .audiobox-current {
-                    width: 1px;
-                    height: 100%;
-                    background-color: red;
-                    position: absolute;
-                    top: 0px;
-                }
-
                 .waveform {
                     position: relative;
                     width: 100%;
@@ -206,161 +162,21 @@
                         width: 100%  !important;
                     }
                 }
-
-                .audiobox-linker,
-                .audiobox-linker-mini {
-                    position: absolute;
-                    width: 15px;
-                    min-height: 10px;
-                    height: 15px;
-                    margin-left: -2.55px;
-                    background: gray;
-                    border-radius: 100%;
-                    opacity: 0.9;
-                    box-shadow: black 2px 2px 1px;
-
-                    .linkAnchorBox-cont {
-                        position: relative !important;
-                        height: 100% !important;
-                        width: 100% !important;
-                        left: unset !important;
-                        top: unset !important;
-                    }
-                }
-
-                .audiobox-linker-mini {
-                    width: 8px;
-                    min-height: 8px;
-                    height: 8px;
-                    box-shadow: black 1px 1px 1px;
-                    margin-left: -1;
-                    margin-top: -2;
-
-                    .linkAnchorBox-cont {
-                        position: relative !important;
-                        height: 100% !important;
-                        width: 100% !important;
-                        left: unset !important;
-                        top: unset !important;
-                    }
-                }
-
-                .audiobox-linker:hover,
-                .audiobox-linker-mini:hover {
-                    opacity: 1;
-                }
-
-                .audiobox-marker-container,
-                .audiobox-marker-minicontainer {
-                    position: absolute;
-                    width: 10px;
-                    height: 10px;
-                    top: 2.5%;
-                    background: gray;
-                    border-radius: 50%;
-                    box-shadow: black 2px 2px 1px;
-                    overflow: visible;
-                    cursor: pointer;
-
-                    .audiobox-marker {
-                        position: relative;
-                        height: 100%;
-                        // height: calc(100% - 15px);
-                        width: 100%;
-                        //margin-top: 15px;
-                    }
-
-                    .audio-marker:hover {
-                        border: orange 2px solid;
-                    }
-                }
-
-                .audiobox-marker-timeline,
-                .audiobox-marker-minicontainer {
-                    position: absolute;
-                    width: 10px;
-                    height: 90%;
-                    top: 2.5%;
-                    border-radius: 5px;
-
-                    .left-resizer {
-                        background: dimgrey;     
-                    }
-                    .resizer {
-                        background: dimgrey;
-                    }
-
-                    .audiobox-marker {
-                        position: relative;
-                        height: calc(100% - 15px);
-                        margin-top: 15px;
-                    }
-
-                    .audio-marker:hover {
-                        border: orange 2px solid;
-                    }
-
-                    .resizer {
-                        position: absolute;
-                        top: 0;
-                        right: 0;
-                        pointer-events: all;
-                        cursor: ew-resize;
-                        height: 100%;
-                        width: 10px;
-                        z-index: 100;
-                    }
-
-                    .click {
-                        position: relative;
-                        height: 100%;
-                        width: 100%;
-                        z-index: 100;
-                    }
-
-                    .left-resizer {
-                        position: absolute;
-                        left: 0;
-                        top : 0;
-                        pointer-events: all;
-                        cursor: ew-resize;
-                        height: 100%;
-                        width: 10px;
-                        z-index: 100;
-                    }
-                }
-
-                .audiobox-marker-timeline:hover,
-                .audiobox-marker-minicontainer:hover {
-                    opacity: 0.8;
-                }
-
-                .audiobox-marker-minicontainer {
-                    width: 5px;
-                    border-radius: 1px;
-
-                    .audiobox-marker {
-                        position: relative;
-                        height: 100%;
-                        margin-top: 8px;
-                    }
-                }
             }
 
-            .current-time {
+            .audioBox-total-time,
+            .audioBox-current-time {
                 position: absolute;
                 font-size: 8;
                 top: 100%;
-                left: 30px;
                 color: white;
             }
+            .audioBox-current-time {
+                left: 30px;
+            }
 
-            .total-time {
-                position: absolute;
-                top: 100%;
-                font-size: 8;
+            .audioBox-total-time {
                 right: 2px;
-                color: white;
             }
         }
     }