fixed videobox ui sizing. added rotation for imageBoxs

1 files changed, 26 insertions, 17 deletions

diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index f47a71469..f267407eb 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -15,6 +15,7 @@
     width: 100%;
     height: 100%;
     position: relative;
+
     .videoBox-viewer {
         display: flex;
         flex-direction: column;
@@ -23,6 +24,7 @@
         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
     }
@@ -52,17 +54,20 @@
     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;
+
     video {
         width: auto;
-        height: 100%; 
-        display: flex; 
+        height: 100%;
+        display: flex;
         margin: auto;
     }
 }
 
-.videoBox-content, .videoBox-content-interactive, .videoBox-content-fullScreen {
+.videoBox-content,
+.videoBox-content-interactive,
+.videoBox-content-fullScreen {
     width: 100%;
-    height: 100%; 
+    height: 100%;
     left: 0px;
 }
 
@@ -82,17 +87,18 @@
     justify-content: center;
     display: flex;
     width: 100%;
+    height: 38px;
     visibility: none;
     opacity: 0;
     background-color: $dark-gray;
     color: white;
     border-radius: 100px;
-    top: calc(100% - 20px);
-    left: 50%;
-    transform: translate(-50%, -100%);
-    
+    transform-origin: bottom left;
+    left: 0;
+    bottom: 0;
+
     transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0s;
-    height: 120px;
+    height: 38px;
     padding: 0 20px;
 
     .timecode-controls {
@@ -102,27 +108,28 @@
         justify-content: center;
         margin: 0 5px;
         flex-grow: 2;
-        font-size: 32px;
+        font-size: 14px;
 
         .timecode {
             margin: 0 5px;
         }
 
         .timeline-slider {
-            margin: 0 20px 0 20px;
+            margin: 0 10px 0 10px;
             flex-grow: 2;
         }
     }
 
-    .toolbar-slider.volume, .toolbar-slider.zoom {
+    .toolbar-slider.volume,
+    .toolbar-slider.zoom {
         width: 100px;
     }
 
     .videobox-button {
         margin: 5px;
         cursor: pointer;
-        width: 70px;
-        height: 70px;
+        width: 38px;
+        height: 38px;
         border-radius: 50%;
         background: $dark-gray;
         display: flex;
@@ -134,8 +141,8 @@
         }
 
         svg {
-            width: 40px;
-            height: 40px;
+            width: 25px;
+            height: 25px;
         }
     }
 }
@@ -151,6 +158,7 @@
     pointer-events: all;
     padding-right: 5px;
     cursor: pointer;
+
     &:hover {
         background-color: $medium-gray;
     }
@@ -164,7 +172,8 @@
     }
 }
 
-.videoBox-content-fullScreen, .videoBox-content-fullScreen-interactive {
+.videoBox-content-fullScreen,
+.videoBox-content-fullScreen-interactive {
     display: flex;
     justify-content: center;
     align-items: center;