Cleanup styling

- Remove color override
- Simplify how the dynamic label vs cog icon is styled
- Don't use !important, but specificity to override video.js
- Use more isolated method to center the menu.

lib/videojs-resolution-switcher.css

@@ -1,12 +1,11 @@
-.vjs-resolution-button {
+.vjs-resolution-button.vjs-menu-icon {
-  color: #ccc;
   font-family: VideoJS;
+  font-weight: normal;
+  font-style: normal;
 }
 
-.vjs-resolution-button .vjs-resolution-button-staticlabel:before {
+.vjs-resolution-button.vjs-menu-icon:before {
   content: '\f110';
-  font-size: 1.8em;
-  line-height: 1.67;
 }
 
 .vjs-resolution-button .vjs-resolution-button-label {
@@ -19,19 +18,15 @@
   height: 100%;
   text-align: center;
   box-sizing: inherit;
-  font-family: Arial, Helvetica, sans-serif;
 }
 
-.vjs-resolution-button ul.vjs-menu-content {
+.vjs-resolution-button .vjs-menu .vjs-menu-content {
-  width: 4em !important;
+  width: 4em;
-}
+  left: 50%; /* Center the menu, in it's parent */
-
+  margin-left: -2em; /* half of width, to center */
-.vjs-resolution-button .vjs-menu {
-  left: 0;
 }
 
 .vjs-resolution-button .vjs-menu li {
   text-transform: none;
   font-size: 1em;
-  font-family: Arial, Helvetica, sans-serif;
 }

lib/videojs-resolution-switcher.js

@@ -117,10 +117,8 @@
 
         if(settings.dynamicLabel){
           this.el().appendChild(label);
-        }else{
+        } else {
-          var staticLabel = document.createElement('span');
+          videojs.addClass(this.el(), 'vjs-menu-icon');
-					videojs.addClass(staticLabel, 'vjs-resolution-button-staticlabel');
-          this.el().appendChild(staticLabel);
         }
        },
        createItems: function(){
@@ -164,7 +162,7 @@
           groupedSrc = {};
 
 			videojs.addClass(label, 'vjs-resolution-button-label');
-			
+
       /**
        * Updates player sources or returns current source URL
        * @param   {Array}  [src] array of sources [{src: '', type: '', label: '', res: ''}]
@@ -276,29 +274,29 @@
         } else if (groupedSrc.res[selectedRes]) {
           selectedLabel = groupedSrc.res[selectedRes][0].label;
         }
-				
+
         return {res: selectedRes, label: selectedLabel, sources: groupedSrc.res[selectedRes]};
       }
-			
+
 			function initResolutionForYt(player){
 				// Init resolution
 				player.tech_.ytPlayer.setPlaybackQuality('default');
-				
+
 				// Capture events
 				player.tech_.ytPlayer.addEventListener('onPlaybackQualityChange', function(){
 					player.trigger('resolutionchange');
 				});
-				
+
 				// We must wait for play event
 				player.one('play', function(){
 					var qualities = player.tech_.ytPlayer.getAvailableQualityLevels();
 					// Map youtube qualities names
 					var _yts = {
 						highres: {res: 1080, label: '1080', yt: 'highres'},
-						hd1080: {res: 1080, label: '1080', yt: 'hd1080'}, 
+						hd1080: {res: 1080, label: '1080', yt: 'hd1080'},
-						hd720: {res: 720, label: '720', yt: 'hd720'}, 
+						hd720: {res: 720, label: '720', yt: 'hd720'},
 						large: {res: 480, label: '480', yt: 'large'},
-						medium: {res: 360, label: '360', yt: 'medium'}, 
+						medium: {res: 360, label: '360', yt: 'medium'},
 						small: {res: 240, label: '240', yt: 'small'},
 						tiny: {res: 144, label: '144', yt: 'tiny'},
 						auto: {res: 0, label: 'auto', yt: 'default'}
@@ -325,10 +323,10 @@
 					};
 
 					var choosen = {label: 'auto', res: 0, sources: groupedSrc.label.auto};
-					var menuButton = new ResolutionMenuButton(player, { 
+					var menuButton = new ResolutionMenuButton(player, {
-						sources: groupedSrc, 
+						sources: groupedSrc,
-						initialySelectedLabel: choosen.label, 
+						initialySelectedLabel: choosen.label,
-						initialySelectedRes: choosen.res, 
+						initialySelectedRes: choosen.res,
 						customSourcePicker: _customSourcePicker
 					}, settings, label);
 
@@ -336,14 +334,14 @@
 					player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton);
 				});
 			}
-			
+
 			player.ready(function(){
 				if(player.options_.sources.length > 1){
 					// tech: Html5 and Flash
 					// Create resolution switcher for videos form <source> tag inside <video>
 					player.updateSrc(player.options_.sources);
 				}
-				
+
 				if(player.techName_ === 'Youtube'){
 					// tech: YouTube
 					initResolutionForYt(player);