scrub through timeline with arrow keys, minor video fixes

1 files changed, 30 insertions, 19 deletions

diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index 4871599b8..a75248fa0 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -1,4 +1,6 @@
-.mini-viewer{
+@import "../global/globalCssVariables.scss";
+
+.mini-viewer {
     cursor: grab;
     position: absolute;
     right: 10;
@@ -14,22 +16,21 @@
     height: 100%;
     position: relative;
     .videoBox-viewer {
-        display:flex;
+        display: flex;
         flex-direction: column;
         height: 100%;
         border-radius: inherit;
-        opacity: 0.99;  // hack!  overcomes some kind of Chrome weirdness where buttons (e.g., snapshot) disappear at some point as the video is resized larger
+        opacity: 0.99; // hack!  overcomes some kind of Chrome weirdness where buttons (e.g., snapshot) disappear at some point as the video is resized larger
+        background: $dark-gray;
     }
     .inkingCanvas-paths-markers {
-        opacity : 0.4; // we shouldn't have to do this, but since chrome crawls to a halt with z-index unset in videoBox-content, this is a workaround
-    }
-    .collectionStackedTimeline {
-        background: beige;
+        opacity: 0.4; // we shouldn't have to do this, but since chrome crawls to a halt with z-index unset in videoBox-content, this is a workaround
     }
+
     .videoBox-stackPanel {
         z-index: -1;
         width: 100%;
-        position: relative; 
+        position: relative;
     }
 
     .videoBox-annotationLayer {
@@ -43,18 +44,24 @@
     }
 }
 
-.videoBox-content-YouTube, .videoBox-content-YouTube-fullScreen,
-.videoBox-content, .videoBox-content-interactive, .videoBox-cont-fullScreen {
+.videoBox-content-YouTube,
+.videoBox-content-YouTube-fullScreen,
+.videoBox-content,
+.videoBox-content-interactive,
+.videoBox-cont-fullScreen {
     width: 100%;
     z-index: -1; // 0;  // logically this should be 0 (or unset) which would give us transparent brush strokes over videos.  However, this makes Chrome crawl to a halt
     position: absolute;
 }
 
-.videoBox-content, .videoBox-content-interactive, .videoBox-content-fullScreen {
-    height: Auto; 
+.videoBox-content,
+.videoBox-content-interactive,
+.videoBox-content-fullScreen {
+    height: Auto;
 }
 
-.videoBox-content-YouTube, .videoBox-content-YouTube-fullScreen  {
+.videoBox-content-YouTube,
+.videoBox-content-YouTube-fullScreen {
     height: 100%;
 }
 
@@ -68,17 +75,21 @@
     right: 5px;
     top: 5px;
     display: none;
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: rgba($dark-gray, 0.6);
 }
-.videoBox-time, .videoBox-snapshot, .videoBox-timelineButton, .videoBox-play, .videoBox-full {
-    color : white;
+.videoBox-time,
+.videoBox-snapshot,
+.videoBox-timelineButton,
+.videoBox-play,
+.videoBox-full {
+    color: white;
     position: relative;
     transform-origin: left top;
-    pointer-events:all;
+    pointer-events: all;
     padding-right: 5px;
     cursor: pointer;
     &:hover {
-        background-color: gray;
+        background-color: $medium-gray;
     }
 }
 
@@ -86,4 +97,4 @@
     .videoBox-ui {
         display: flex;
     }
-}
\ No newline at end of file
+}