feat(UI): Hide volume slider when not hovering over the mute button (#8426)

Close #8422

Author: avelad

ui/less/range_elements.less

@@ -142,6 +142,28 @@
 .shaka-volume-bar-container {
   width: 100px;
   padding: 0;
+  transition-property: opacity, width;
+  transition-duration: 250ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+
+  &:active,
+  &:focus,
+  &:hover {
+    width: 100px !important;
+    opacity: 1 !important;
+  }
+}
+
+.shaka-mute-button + .shaka-volume-bar-container {
+  width: 0;
+  opacity: 0;
+}
+
+.shaka-mute-button:active + .shaka-volume-bar-container,
+.shaka-mute-button:focus + .shaka-volume-bar-container,
+.shaka-mute-button:hover + .shaka-volume-bar-container {
+  width: 100px;
+  opacity: 1;
 }
 
 .shaka-range-element {