Hide the volume bar by setting its content's width to zero.

videojs · Sep 25, 2014 · f53583e · f53583e
1 parent 757c592
commit f53583e
Showing 1 changed file with 16 additions and 9 deletions.
diff --git a/src/css/video-js.less b/src/css/video-js.less
@@ -717,25 +717,29 @@ easily in the skin designer. http://designer.videojs.com/
 }
 
 .vjs-default-skin .vjs-menu {
-  z-index: -1;
-  display: block;
+  display: none;
   position: absolute;
   bottom: 0;
   left: 0em; /* (Width of vjs-menu - width of button) / 2 */
   width: 0em;
   height: 0em;
   margin-bottom: 3em;
+}
 
+.vjs-default-skin .vjs-menu,
+.vjs-default-skin .vjs-volume-menu-button:hover .vjs-menu,
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing {
   border-left: 2em solid transparent;
   border-right: 2em solid transparent;
 
   border-top: 1.55em solid rgb(0, 0, 0); /* Same width top as ul bottom */
   border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */
 }
 
-.vjs-default-skin .vjs-control-content .vjs-menu {
-  z-index: 0;
-  display: none;
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu {
+  display: block;
+  width: 0px;
+  border: none;
 }
 
 /* Button Pop-up Menu */
@@ -753,11 +757,14 @@ easily in the skin designer. http://designer.videojs.com/
   .background-color-with-alpha(@control-bg-color, @control-bg-alpha);
   .box-shadow(-0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2));
 }
-
-.vjs-default-skin .vjs-menu-button:hover .vjs-menu,
-.vjs-default-skin .vjs-menu-button .vjs-menu.vjs-lock-showing {
-  z-index: 1;
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
+  width: 0px;
+}
+.vjs-default-skin .vjs-volume-menu-button:hover .vjs-menu .vjs-menu-content,
+.vjs-default-skin .vjs-volume-menu-button .vjs-menu.vjs-lock-showing .vjs-menu-content {
+  width: 10em;
 }
+.vjs-default-skin .vjs-menu-button:hover .vjs-control-content .vjs-menu,
 .vjs-default-skin .vjs-control-content .vjs-menu.vjs-lock-showing {
   display: block;
 }