Made a few volume skin changes #2553
Conversation
- Removed the non-default volume controls from the control bar - Made the volume default to inline - Started fixing the inline volume
| @@ -44,12 +44,14 @@ | |||
| } | |||
|
|
|||
| // Hover state | |||
| .video-js .vjs-menu-button-inline:hover { | |||
| .video-js .vjs-menu-button-inline:hover, | |||
| .video-js .vjs-menu-button-inline.vjs-slider-active { | |||
There was a problem hiding this comment.
why not just use :focus (or :active)?
There was a problem hiding this comment.
The menu button isn't actually in focus here, the internal slider is. I have the slider firing an event when it's active so the menu button can catch it add this class to itself.
|
All the volume in all their glory.
Surprisingly working in IE8 too. I forced the inline volume to just be always showing in IE8. It might be possible to make it work the same but not sure it's worth the effort. I also did a pass on reducing the selector strength on the involved components here and was able to clean up a bunch. Could use another review. |
| @@ -46,7 +46,7 @@ ControlBar.prototype.options_ = { | |||
| loadEvent: 'play', | |||
| children: [ | |||
| 'playToggle', | |||
| 'volumeMenuButton', | |||
| { name: 'volumeMenuButton', inline: true }, | |||
There was a problem hiding this comment.
I guess I should switch the default of the volume menu button to inline
|
I like the removal of specificity in the selectors. Seems like good changes. |
|
Awesome, thanks! |
Related to #2507
Still need to figure out transitions on tab navigation. Looks a little wonky. Need @mmcc to check it out.
UPDATE: Also there seems to be something off with Safari's tab navigation now