1 files changed, 32 insertions, 50 deletions

diff --git a/src/client/views/nodes/VideoBox.scss b/src/client/views/nodes/VideoBox.scss
index d4cddd65e..aa51714da 100644
--- a/src/client/views/nodes/VideoBox.scss
+++ b/src/client/views/nodes/VideoBox.scss
@@ -80,55 +80,49 @@
 //     pointer-events: all;
 // }
 
+.videoBox-ui-wrapper {
+    width: 0;
+    height: 0;
+}
+
 .videoBox-ui {
     position: absolute;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     display: flex;
-    width: 100%;
-    visibility: none;
-    opacity: 0;
     background-color: $dark-gray;
     color: white;
     border-radius: 100px;
-    transform-origin: bottom left;
-    left: 0;
-    bottom: 0;
-
-    transition: top 0.5s, width 0.5s, opacity 0.2s, visibility 0s;
-    height: 24px;
-    padding: 0 20px;
+    height: 40px;
+    padding: 0 10px 0 7px;
+    transition: opacity 0.3s;
+    z-index: 100001;
 
     .timecode-controls {
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
-        margin: 0 5px;
+        margin: 0 2px;
         flex-grow: 2;
-        font-size: 12px;
-
-        .timecode {
-            margin: 0 5px;
-        }
+        font-size: 14px;
 
         .timeline-slider {
-            margin: 0 10px 0 10px;
+            margin: 5px;
             flex-grow: 2;
         }
     }
 
-    .toolbar-slider.volume,
-    .toolbar-slider.zoom {
-        width: 100px;
+    .toolbar-slider.volume, .toolbar-slider.zoom {
+        width: 50px;
     }
 
     .videobox-button {
-        margin: 5px;
+        margin: 2px;
         cursor: pointer;
-        width: 24px;
-        height: 24px;
+        width: 25px;
+        height: 25px;
         border-radius: 50%;
         background: $dark-gray;
         display: flex;
@@ -140,8 +134,8 @@
         }
 
         svg {
-            width: 18px;
-            height: 18px;
+            width: 15px;
+            height: 15px;
         }
     }
 }
@@ -163,28 +157,17 @@
     }
 }
 
-.videoBox:hover {
-    .videoBox-ui {
-        visibility: visible;
-        opacity: 1;
-        z-index: 10000;
-    }
-}
-
-.videoBox-content-fullScreen,
-.videoBox-content-fullScreen-interactive {
+.videoBox-content-fullScreen, .videoBox-content-fullScreen-interactive {
     display: flex;
     justify-content: center;
-    align-items: center;
-
-    &:hover {
-        .videoBox-ui {
-            opacity: 0;
-        }
-    }
+    align-items: flex-end;
 
-    .videoBox-ui:hover {
-        opacity: 1;
+    .videoBox-ui {
+        left: 50%;
+        top: 90%;
+        transform: translate(-50%, -50%);
+        width: 80%;
+        transition: top 0s, width 0s, opacity 0.3s, visibility 0.3s;
     }
 }
 
@@ -195,7 +178,6 @@ video::-webkit-media-controls {
 input[type="range"] {
     -webkit-appearance: none;
     background: none;
-    margin: 10px;
 }
 
 input[type="range"]:focus {
@@ -204,19 +186,19 @@ input[type="range"]:focus {
 
 input[type="range"]::-webkit-slider-runnable-track {
     width: 100%;
-    height: 18px;
+    height: 10px;
     cursor: pointer;
     box-shadow: 0;
     background: $light-gray;
-    border-radius: 18px;
+    border-radius: 10px;
 }
 
 input[type="range"]::-webkit-slider-thumb {
     box-shadow: 0;
     border: 0;
-    height: 20px;
-    width: 20px;
-    border-radius: 20px;
+    height: 12px;
+    width: 12px;
+    border-radius: 10px;
     background: $medium-blue;
     cursor: pointer;
     -webkit-appearance: none;