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.
This commit is contained in:
Derk-Jan Hartman 2016-04-23 17:36:32 +02:00
parent dc3383cc48
commit c1a41a4635
2 changed files with 24 additions and 31 deletions

View file

@ -1,12 +1,11 @@
.vjs-resolution-button {
color: #ccc;
.vjs-resolution-button.vjs-menu-icon {
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 {
width: 4em !important;
}
.vjs-resolution-button .vjs-menu {
left: 0;
.vjs-resolution-button .vjs-menu .vjs-menu-content {
width: 4em;
left: 50%; /* Center the menu, in it's parent */
margin-left: -2em; /* half of width, to center */
}
.vjs-resolution-button .vjs-menu li {
text-transform: none;
font-size: 1em;
font-family: Arial, Helvetica, sans-serif;
}

View file

@ -118,9 +118,7 @@
if(settings.dynamicLabel){
this.el().appendChild(label);
} else {
var staticLabel = document.createElement('span');
videojs.addClass(staticLabel, 'vjs-resolution-button-staticlabel');
this.el().appendChild(staticLabel);
videojs.addClass(this.el(), 'vjs-menu-icon');
}
},
createItems: function(){