fix: add smooth transition to volume control appear on hover in microvideo (#215)

* fix: add smooth transition to volume control appear on hover and correct related CSS issues

Author: ronald-urbina

themes/microvideo/template.html

@@ -84,6 +84,7 @@
 
   :host([controlbarvertical]) :is(media-control-bar, .control-group) {
     flex-direction: column;
+    width: 40px;
   }
 
   .volume-group {
@@ -93,7 +94,7 @@
   }
 
   :host([controlbarplace$="end"]) .volume-group {
-    flex-direction: row-reverse;
+    flex-direction: row;
   }
 
   :host([controlbarplace$="end"]) .volume-group:first-child .volume-range-span {
@@ -117,6 +118,7 @@
     position: relative;
     overflow: hidden;
     width: 0;
+    transition: width .2s ease-in-out , height .2s ease-in-out;
   }
 
   .volume-group:hover .volume-range-span,
@@ -156,7 +158,7 @@
   media-control-bar:has(.volume-group:hover),
   [keyboardcontrol] media-control-bar:has(.volume-group:focus-within) {
     top: var(--_control-bar-offset-top, 0);
-    left: var(--_control-bar-offset-left, calc(var(--_volume-range-expand-width) / 2));
+    left: var(--_control-bar-offset-left, - var(--_volume-range-expand-width));
   }
 
   :host([controlbarplace$="start"]),
@@ -169,7 +171,7 @@
   }
 
   :host([controlbarvertical][controlbarplace^="center"]) {
-    --_control-bar-offset-top: calc(var(--_volume-range-expand-height) / 2);
+    --_control-bar-offset-top: - var(--_volume-range-expand-height);
   }
 
   media-time-range {