fix(FEC-11284): empty top bar fix (#610)

Moved back Margins to left / right containers instead of padding in the top bar
Removed padding in bottom bar when not shown and added delay in animation for it not to be visible while sliding out / in
Replaced traslate -y in top bar with margin-top because it didn't effect the interactive area
Reduced top bar and bottom bar appearance / disappearing animation to 100 to match the captions animation. If we to increase it we will need to increase them both.

src/components/bottom-bar/_bottom-bar.scss

@@ -6,15 +6,15 @@
   visibility: hidden;
   height: auto;
   max-height: 0;
-  transition: #{$hover-animation-time}ms max-height ease-in-out, #{$hover-animation-time}ms visibility ease-in-out;
+  transition: #{$hover-animation-time}ms max-height ease-in-out, #{$hover-animation-time}ms visibility ease-in-out, 0ms padding linear #{$hover-animation-time}ms;
   width: 100%;
   margin-top: auto;
   bottom: 0;
   left: 0;
   z-index: 1;
   pointer-events: auto;
   position: relative;
-  padding: 0 #{$gui-gutter}px #{$bottom-bar-bottom-gutter}px;
+  padding: 0;
 
   &.hide {
     display: none;
@@ -84,7 +84,9 @@
   &:not(.overlay-active) {
     .bottom-bar {
       visibility: visible;
+      padding: 0 #{$gui-gutter}px #{$bottom-bar-bottom-gutter}px;
       max-height: #{$bottom-bar-max-height}px;
+      transition: #{$hover-animation-time}ms max-height ease-in-out, #{$hover-animation-time}ms visibility ease-in-out;
       &.line-break {
         max-height: 92px;
       }

src/components/top-bar/_top-bar.scss

@@ -6,10 +6,9 @@
   visibility: hidden;
   position: relative;
   height: auto;
-  transform: translateY(#{-$top-bar-max-height}px);
-  transition: #{$hover-animation-time}ms visibility ease-in-out, #{$hover-animation-time}ms transform ease-in-out;
+  margin-top: #{-$top-bar-max-height}px;
+  transition: #{$hover-animation-time}ms visibility ease-in-out, #{$hover-animation-time}ms margin-top ease-in-out;
   width: 100%;
-  padding: #{$top-bar-top-bottom-gutter}px #{$gui-gutter}px;
   top: 0;
   left: 0;
   z-index: 1;
@@ -21,6 +20,11 @@
     height: calc(100% - #{2 * $top-bar-top-bottom-gutter}px);
     width: calc(100% - #{2 * $gui-gutter}px);
     margin: #{$top-bar-top-bottom-gutter}px #{$gui-gutter}px;
+    &:empty {
+      margin: 0 0 #{$gui-gutter}px 0;
+      height: 0;
+      width: 0;
+    }
   }
   &.disabled {
     pointer-events: none;
@@ -33,16 +37,19 @@
     float: left;
     text-align: left;
     min-width: 0;
+    margin: #{$top-bar-top-bottom-gutter}px 0 #{$top-bar-top-bottom-gutter}px #{$gui-gutter}px;
     &:empty {
-      margin: 0;
+      margin: 0 0 #{$gui-gutter}px 0;
     }
     pointer-events: none;
   }
   .right-controls {
     float: right;
     text-align: left;
+    margin: #{$top-bar-top-bottom-gutter}px #{$gui-gutter}px #{$top-bar-top-bottom-gutter}px 0;
     &:empty {
-      margin: 0;
+      margin: 0 0 #{$gui-gutter}px 0;
+
     }
     pointer-events: none;
 
@@ -65,7 +72,8 @@
   &:not(.overlay-active) {
     .top-bar {
       visibility: visible;
-      transform: translateY(0);
+      margin-top: 0;
+
     }
   }
 }
@@ -81,6 +89,14 @@
 .player.size-sm .top-bar {
   padding: #{$top-bar-top-bottom-gutter}px #{$gui-small-gutter}px;
 
+  .left-controls {
+    margin: #{$top-bar-top-bottom-gutter}px 0 #{$top-bar-top-bottom-gutter}px #{$gui-small-gutter}px;
+  }
+
+  .right-controls {
+    margin: #{$top-bar-top-bottom-gutter}px #{$gui-small-gutter}px #{$top-bar-top-bottom-gutter}px 0;
+
+  }
   .top-bar-area {
     width: calc(100% - #{2 * $gui-small-gutter}px);
     margin: #{$top-bar-top-bottom-gutter}px #{$gui-small-gutter}px;

src/styles/_variables.scss

@@ -26,7 +26,7 @@ $spinner-colors: rgb(218, 31, 38), rgb(6, 168, 133), rgb(0, 147, 68), rgb(248, 1
   rgb(252, 210, 3);
 $default-transition-time: 500;
 $default-hovering-offset: 60px;
-$hover-animation-time: 300;
+$hover-animation-time: 100;
 $top-bar-max-height: 60;
 $top-bar-top-bottom-gutter: 14;
 $bottom-bar-max-height: 60;