From 910e4d8a22a312d2ca0b8a970ff434604f7c6f91 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 23 Oct 2019 23:35:01 -0400
Subject: several fixes to audio documents to make linking work better and to
 customize the audio controls UI

---
 src/client/views/nodes/AudioBox.scss | 62 ++++++++++++++++++++++++++++++++----
 1 file changed, 55 insertions(+), 7 deletions(-)

(limited to 'src/client/views/nodes/AudioBox.scss')

diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss
index 14b90c570..3d6f6c4f9 100644
--- a/src/client/views/nodes/AudioBox.scss
+++ b/src/client/views/nodes/AudioBox.scss
@@ -1,10 +1,10 @@
 .audiobox-container, .audiobox-container-interactive {
     width: 100%;
     height: 100%;
-    min-height: 32px;
     position: inherit;
     display:flex;
     pointer-events: all;
+    cursor:default;
     .audiobox-handle {
         width:20px;
         height:100%;
@@ -35,18 +35,66 @@
         width:100%;
         height:100%;
         position: relative;
-        display: grid;
+        display: flex;
         .audiobox-player {
             margin-top:auto;
             margin-bottom:auto;
             width:100%;
+            height: 80%;
             position: relative;
-            display: grid;
-            .audiobox-marker {
-                position:absolute;
-                width:10px;
+            display: flex;
+            .audiobox-playhead {
+                position: relative;
+                margin-top: auto;
+                margin-bottom: auto;
+                width: 25px;
+            }
+            .audiobox-timeline {
+                position:relative;
                 height:100%;
-                background:green;
+                width:100%;
+                .audiobox-current {
+                    width: 1px;
+                    height:100%;
+                    background-color: red;
+                    position: absolute;;
+                }
+                .audiobox-linker {
+                    position:absolute;
+                    width:15px;
+                    min-height:10px;
+                    height:15px;
+                    margin-left:-2.55px;
+                    background:gray;
+                    border-radius: 100%;
+                    background-color: transparent;
+                    box-shadow: black 2px 2px 1px;
+                    .docuLinkBox-cont {
+                        width:15px !important;
+                        height:15px !important;
+                        left: calc(100% - 15px) !important;
+                        top: calc(100% - 15px) !important;
+                    }
+                }
+                .audiobox-linker:hover {
+                    transform:scale(1.5);
+                }
+                .audiobox-marker-container {
+                    position:absolute;
+                    width:10px;
+                    height:100%;
+                    background:gray;
+                    border-radius: 5px;
+                    box-shadow: black 2px 2px 1px;
+                    .audiobox-marker {
+                        position:relative;
+                        height: calc(100% - 15px);
+                        margin-top: 15px;
+                    }
+                    .audio-marker:hover {
+                        border: orange 2px solid;
+                    }
+                }
             }
         }
     }
-- 
cgit v1.2.3-70-g09d2