enhance media controls: improve animations and adjust layout properties

src/browser/base/content/zen-styles/zen-media-controls.css

@@ -59,12 +59,13 @@
 
   &:hover {
     & #zen-media-main-vbox {
+      transition-delay: 0s;
       gap: 6px;
     }
 
     .show-on-hover {
       max-height: 50px;
-      margin: 2px 6px;
+      padding: 2px 6px;
       margin-bottom: 0;
       opacity: 1;
       transform: translateY(0);
@@ -108,14 +109,13 @@
   .show-on-hover {
     max-height: 0;
     opacity: 0;
-    overflow: hidden;
     transform: translateY(5px);
-    margin: 0 6px;
+    padding: 0 6px;
     transition:
       max-height 0.1s ease-in-out,
       opacity 0.1s ease-in-out,
       transform 0.05s ease-in-out,
-      margin 0.15s ease-in-out;
+      padding 0.15s ease-in-out;
   }
 
   #zen-media-current-time,
@@ -127,24 +127,12 @@
   }
 }
 
-@keyframes zen-media-controls-show {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 #zen-media-controls-toolbar {
   display: none;
   animation: none;
   transition: none;
 
   &:not([hidden]) {
-    animation: zen-media-controls-show 0.2s ease-out;
     display: flex;
     height: 2.5rem;
     overflow: visible;
@@ -163,7 +151,7 @@
 
 #zen-media-service-title {
   align-self: center;
-  font-size: 13px;
+  font-size: math;
   margin-left: 6px;
 
   & label {
@@ -200,7 +188,7 @@
 }
 
 #zen-media-service-hbox {
-  margin-top: 6px;
+  padding-top: 6px;
 }
 
 #zen-media-info-vbox {

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -1174,7 +1174,7 @@
     }
 
     & .titlebar-buttonbox-container {
-      margin-left: calc(-1 * var(--zen-toolbox-max-width)) !important;
+      margin-left: calc(-1 * var(--zen-toolbox-max-width) + var(--zen-toolbox-padding) / 2) !important;
     }
 
     & #zen-appcontent-wrapper {