]> git.mxchange.org Git - friendica.git/blob - library/video-js/video-js.css
Merge pull request #678 from fermionic/20130511-update-videojs
[friendica.git] / library / video-js / video-js.css
1 /*
2 VideoJS Default Styles (http://videojs.com)
3 Version GENERATED_AT_BUILD
4 */
5
6 /*
7 REQUIRED STYLES (be careful overriding)
8 ================================================================================ */
9 /* When loading the player, the video tag is replaced with a DIV,
10    that will hold the video tag or object tag for other playback methods.
11    The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video.
12
13    ** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
14    Otherwise you risk messing up control positioning and full window mode. **
15 */
16 .video-js {
17   background-color: #000;
18   position: relative;
19   padding: 0;
20   /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
21   font-size: 10px;
22   /* Allow poster to be vertially aligned. */
23   vertical-align: middle;
24   /*  display: table-cell; */ /*This works in Safari but not Firefox.*/
25 }
26
27 /* Playback technology elements expand to the width/height of the containing div.
28     <video> or <object> */
29 .video-js .vjs-tech {
30   position: absolute;
31   top: 0;
32   left: 0;
33   width: 100%;
34   height: 100%;
35 }
36
37 /* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
38 .video-js:-moz-full-screen { position: absolute; }
39
40 /* Fullscreen Styles */
41 body.vjs-full-window {
42   padding: 0;
43   margin: 0;
44   height: 100%;
45   overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
46 }
47 .video-js.vjs-fullscreen {
48   position: fixed;
49   overflow: hidden;
50   z-index: 1000;
51   left: 0;
52   top: 0;
53   bottom: 0;
54   right: 0;
55   width: 100% !important;
56   height: 100% !important;
57   _position: absolute; /* IE6 Full-window (underscore hack) */
58 }
59 .video-js:-webkit-full-screen {
60   width: 100% !important; height: 100% !important;
61 }
62
63 /* Poster Styles */
64 .vjs-poster {
65   background-repeat: no-repeat;
66   background-position: 50% 50%;
67   background-size: contain;
68   cursor: pointer;
69   height: 100%;
70   margin: 0;
71   padding: 0;
72   position: relative;
73   width: 100%;
74 }
75 .vjs-poster img {
76   display: block;
77   margin: 0 auto;
78   max-height: 100%;
79   padding: 0;
80   width: 100%;
81 }
82
83 /* Text Track Styles */
84 /* Overall track holder for both captions and subtitles */
85 .video-js .vjs-text-track-display {
86   text-align: center;
87   position: absolute;
88   bottom: 4em;
89   left: 1em; /* Leave padding on left and right */
90   right: 1em;
91   font-family: Arial, sans-serif;
92 }
93 /* Individual tracks */
94 .video-js .vjs-text-track {
95   display: none;
96   font-size: 1.4em;
97   text-align: center;
98   margin-bottom: 0.1em;
99   /* Transparent black background, or fallback to all black (oldIE) */
100   background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
101 }
102 .video-js .vjs-subtitles { color: #fff; } /* Subtitles are white */
103 .video-js .vjs-captions { color: #fc6; } /* Captions are yellow */
104 .vjs-tt-cue { display: block; }
105
106 /* Fading sytles, used to fade control bar. */
107 .vjs-fade-in {
108   display: block !important;
109   visibility: visible; /* Needed to make sure things hide in older browsers too. */
110   opacity: 1;
111
112   -webkit-transition: visibility 0.1s, opacity 0.1s;
113      -moz-transition: visibility 0.1s, opacity 0.1s;
114       -ms-transition: visibility 0.1s, opacity 0.1s;
115        -o-transition: visibility 0.1s, opacity 0.1s;
116           transition: visibility 0.1s, opacity 0.1s;
117 }
118 .vjs-fade-out {
119   display: block !important;
120   visibility: hidden;
121   opacity: 0;
122
123   -webkit-transition: visibility 1.5s, opacity 1.5s;
124      -moz-transition: visibility 1.5s, opacity 1.5s;
125       -ms-transition: visibility 1.5s, opacity 1.5s;
126        -o-transition: visibility 1.5s, opacity 1.5s;
127           transition: visibility 1.5s, opacity 1.5s;
128
129   /* Wait a moment before fading out the control bar */
130   -webkit-transition-delay: 2s;
131      -moz-transition-delay: 2s;
132       -ms-transition-delay: 2s;
133        -o-transition-delay: 2s;
134           transition-delay: 2s;
135 }
136 /* Hide disabled or unsupported controls */
137 .vjs-default-skin .vjs-hidden { display: none; }
138
139 .vjs-lock-showing {
140   display: block !important;
141   opacity: 1;
142   visibility: visible;
143 }
144
145 /* DEFAULT SKIN (override in another file to create new skins)
146 ================================================================================
147 Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
148 so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */
149
150 /* Base UI Component Classes
151 -------------------------------------------------------------------------------- */
152 @font-face{
153   font-family: 'VideoJS';
154   src: url('font/vjs.eot');
155   src: url('font/vjs.eot') format('embedded-opentype'),
156   url('font/vjs.woff') format('woff'),
157   url('font/vjs.ttf') format('truetype');
158   font-weight: normal;
159   font-style: normal;
160 }
161
162 .vjs-default-skin {
163   color: #ccc;
164 }
165
166 /* Slider - used for Volume bar and Seek bar */
167 .vjs-default-skin .vjs-slider {
168   outline: 0; /* Replace browser focus hightlight with handle highlight */
169   position: relative;
170   cursor: pointer;
171   padding: 0;
172
173   background: rgb(50, 50, 50); /* IE8- Fallback */
174   background: rgba(100, 100, 100, 0.5);
175 }
176
177 .vjs-default-skin .vjs-slider:focus {
178   background: rgb(70, 70, 70); /* IE8- Fallback */
179   background: rgba(100, 100, 100, 0.70);
180
181   -webkit-box-shadow: 0 0 2em rgba(255, 255, 255, 1);
182      -moz-box-shadow: 0 0 2em rgba(255, 255, 255, 1);
183           box-shadow: 0 0 2em rgba(255, 255, 255, 1);
184 }
185
186 .vjs-default-skin .vjs-slider-handle {
187   position: absolute;
188   /* Needed for IE6 */
189   left: 0;
190   top: 0;
191 }
192
193 .vjs-default-skin .vjs-slider-handle:before {
194   /*content: "\f111";*/ /* Circle icon = f111 */
195   content: "\e009"; /* Square icon */
196   font-family: VideoJS;
197   font-size: 1em;
198   line-height: 1;
199   text-align: center;
200   text-shadow: 0em 0em 1em #fff;
201
202   position: absolute;
203   top: 0;
204   left: 0;
205
206   /* Rotate the square icon to make a diamond */
207   -webkit-transform: rotate(-45deg);
208      -moz-transform: rotate(-45deg);
209       -ms-transform: rotate(-45deg);
210        -o-transform: rotate(-45deg);
211   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
212 }
213
214 /* Control Bar
215 -------------------------------------------------------------------------------- */
216 /* The default control bar. Created by controls.js */
217 .vjs-default-skin .vjs-control-bar {
218   display: none; /* Start hidden */
219   position: absolute;
220   /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
221   bottom: 0;
222   /* 100% width of player div */
223   left: 0;
224   right: 0;
225   /* Controls are absolutely position, so no padding necessary */
226   padding: 0;
227   margin: 0;
228   /* Height includes any margin you want above or below control items */
229   height: 3.0em;
230   background-color: rgb(0, 0, 0);
231   /* Slight blue so it can be seen more easily on black. */
232   background-color: rgba(7, 40, 50, 0.7);
233   /* Default font settings */
234   font-style: normal;
235   font-weight: normal;
236   font-family: Arial, sans-serif;
237 }
238
239 /* General styles for individual controls. */
240 .vjs-default-skin .vjs-control {
241   outline: none;
242   position: relative;
243   float: left;
244   text-align: center;
245   margin: 0;
246   padding: 0;
247   height: 3.0em;
248   width: 4em;
249 }
250
251 /* FontAwsome button icons */
252 .vjs-default-skin .vjs-control:before {
253   font-family: VideoJS;
254   font-size: 1.5em;
255   line-height: 2;
256   position: absolute;
257   top: 0;
258   left: 0;
259   width: 100%;
260   height: 100%;
261   text-align: center;
262   text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
263 }
264
265 /* Replacement for focus outline */
266 .vjs-default-skin .vjs-control:focus:before,
267 .vjs-default-skin .vjs-control:hover:before {
268   text-shadow: 0em 0em 1em rgba(255, 255, 255, 1);
269 }
270
271 .vjs-default-skin .vjs-control:focus { /*  outline: 0; */ /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ }
272
273 /* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
274 .vjs-default-skin .vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
275
276 /* Play/Pause
277 -------------------------------------------------------------------------------- */
278 .vjs-default-skin .vjs-play-control {
279   width: 5em;
280   cursor: pointer;
281 }
282 .vjs-default-skin .vjs-play-control:before {
283   content: "\e001"; /* Play Icon */
284 }
285 .vjs-default-skin.vjs-playing .vjs-play-control:before {
286   content: "\e002"; /* Pause Icon */
287 }
288
289 /* Rewind
290 -------------------------------------------------------------------------------- */
291 /*.vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
292 .vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; }
293 */
294
295 /* Volume/Mute
296 -------------------------------------------------------------------------------- */
297 .vjs-default-skin .vjs-mute-control,
298 .vjs-default-skin .vjs-volume-menu-button {
299   cursor: pointer;
300   float: right;
301 }
302 .vjs-default-skin .vjs-mute-control:before,
303 .vjs-default-skin .vjs-volume-menu-button:before {
304   content: "\e006"; /* Full volume */
305 }
306 .vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
307 .vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
308   content: "\e003"; /* No volume */
309 }
310 .vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
311 .vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
312   content: "\e004"; /* Half volume */
313 }
314 .vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
315 .vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
316   content: "\e005"; /* Full volume */
317 }
318
319 .vjs-default-skin .vjs-volume-control {
320   width: 5em;
321   float: right;
322 }
323 .vjs-default-skin .vjs-volume-bar {
324   width: 5em;
325   height: 0.6em;
326   margin: 1.1em auto 0;
327 }
328
329 .vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
330   height: 2.9em;
331 }
332
333 .vjs-default-skin .vjs-volume-level {
334   position: absolute;
335   top: 0;
336   left: 0;
337   height: 0.5em;
338
339   background: #66A8CC
340     url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC)
341     -50% 0 repeat;
342 }
343 .vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
344   width: 0.5em;
345   height: 0.5em;
346 }
347
348 .vjs-default-skin .vjs-volume-handle:before {
349   font-size: 0.9em;
350   top: -0.2em;
351   left: -0.2em;
352
353   width: 1em;
354   height: 1em;
355 }
356
357 .vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
358   width: 6em;
359   left: -4em;
360 }
361
362 /*.vjs-default-skin .vjs-menu-button .vjs-volume-control {
363   height: 1.5em;
364 }*/
365
366 /* Progress
367 -------------------------------------------------------------------------------- */
368 .vjs-default-skin .vjs-progress-control {
369   position: absolute;
370   left: 0;
371   right: 0;
372   width: auto;
373   font-size: 0.3em;
374   height: 1em;
375   /* Set above the rest of the controls. */
376   top: -1em;
377
378   /* Shrink the bar slower than it grows. */
379   -webkit-transition: top 0.4s, height 0.4s, font-size 0.4s, -webkit-transform 0.4s;
380      -moz-transition: top 0.4s, height 0.4s, font-size 0.4s,    -moz-transform 0.4s;
381        -o-transition: top 0.4s, height 0.4s, font-size 0.4s,      -o-transform 0.4s;
382           transition: top 0.4s, height 0.4s, font-size 0.4s,         transform 0.4s;
383
384 }
385
386 /* On hover, make the progress bar grow to something that's more clickable.
387     This simply changes the overall font for the progress bar, and this
388     updates both the em-based widths and heights, as wells as the icon font */
389 .vjs-default-skin:hover .vjs-progress-control {
390   font-size: .9em;
391
392   /* Even though we're not changing the top/height, we need to include them in
393       the transition so they're handled correctly. */
394   -webkit-transition: top 0.2s, height 0.2s, font-size 0.2s, -webkit-transform 0.2s;
395      -moz-transition: top 0.2s, height 0.2s, font-size 0.2s,    -moz-transform 0.2s;
396        -o-transition: top 0.2s, height 0.2s, font-size 0.2s,      -o-transform 0.2s;
397           transition: top 0.2s, height 0.2s, font-size 0.2s,         transform 0.2s;
398 }
399
400 /* Box containing play and load progresses. Also acts as seek scrubber. */
401 .vjs-default-skin .vjs-progress-holder {
402   /* Placement within the progress control item */
403   height: 100%;
404 }
405
406 /* Progress Bars */
407 .vjs-default-skin .vjs-progress-holder .vjs-play-progress,
408 .vjs-default-skin .vjs-progress-holder .vjs-load-progress {
409   position: absolute;
410   display: block;
411   height: 100%;
412   margin: 0;
413   padding: 0;
414   /* Needed for IE6 */
415   left: 0;
416   top: 0;
417 }
418
419 .vjs-default-skin .vjs-play-progress {
420   /*
421     Using a data URI to create the white diagonal lines with a transparent
422       background. Surprising works in IE8.
423       Created using http://www.patternify.com
424     Changing the first color value will change the bar color.
425     Also using a paralax effect to make the lines move backwards.
426       The -50% left position makes that happen.
427   */
428   background: #66A8CC
429     url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC)
430     -50% 0 repeat;
431 }
432 .vjs-default-skin .vjs-load-progress {
433   background: rgb(100, 100, 100); /* IE8- Fallback */
434   background: rgba(255, 255, 255, 0.4);
435 }
436
437 .vjs-default-skin .vjs-seek-handle {
438   width: 1.5em;
439   height: 100%;
440 }
441
442 .vjs-default-skin .vjs-seek-handle:before {
443   padding-top: 0.1em; /* Minor adjustment */
444 }
445
446 /* Time Display
447 -------------------------------------------------------------------------------- */
448 .vjs-default-skin .vjs-time-controls {
449   font-size: 1em;
450   /* Align vertically by making the line height the same as the control bar */
451   line-height: 3em;
452 }
453 .vjs-default-skin .vjs-current-time { float: left; }
454 .vjs-default-skin .vjs-duration { float: left; }
455 /* Remaining time is in the HTML, but not included in default design */
456 .vjs-default-skin .vjs-remaining-time { display: none; float: left; }
457 .vjs-time-divider { float: left; line-height: 3em; }
458
459 /* Fullscreen
460 -------------------------------------------------------------------------------- */
461 .vjs-default-skin .vjs-fullscreen-control {
462   width: 3.8em;
463   cursor: pointer;
464   float: right;
465 }
466 .vjs-default-skin .vjs-fullscreen-control:before {
467   content: "\e000"; /* Enter full screen */
468 }
469 .vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
470   content: "\e00b"; /* Exit full screen */
471 }
472
473 /* Big Play Button (at start)
474 ---------------------------------------------------------*/
475 .vjs-default-skin .vjs-big-play-button {
476   display: block;
477   z-index: 2;
478   position: absolute;
479   top: 2em;
480   left: 2em;
481   width: 12.0em;
482   height: 8.0em;
483   margin: 0;
484   text-align: center;
485   vertical-align: middle;
486   cursor: pointer;
487   opacity: 1;
488
489   /* Need a slightly gray bg so it can be seen on black backgrounds */
490   background-color: rgb(40, 40, 40);
491   background-color: rgba(7, 40, 50, 0.7);
492
493   border: 0.3em solid rgb(50, 50, 50);
494   border-color: rgba(255, 255, 255, 0.25);
495
496   -webkit-border-radius: 25px;
497      -moz-border-radius: 25px;
498           border-radius: 25px;
499
500   -webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
501      -moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
502           box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
503
504   -webkit-transition: border 0.4s, -webkit-box-shadow 0.4s, -webkit-transform 0.4s;
505      -moz-transition: border 0.4s,    -moz-box-shadow 0.4s,    -moz-transform 0.4s;
506        -o-transition: border 0.4s,      -o-box-shadow 0.4s,      -o-transform 0.4s;
507           transition: border 0.4s,         box-shadow 0.4s,         transform 0.4s;
508 }
509
510 .vjs-default-skin:hover .vjs-big-play-button,
511 .vjs-default-skin .vjs-big-play-button:focus {
512   outline: 0;
513   border-color: rgb(255, 255, 255);
514   border-color: rgba(255, 255, 255, 1);
515   /* IE8 needs a non-glow hover state */
516   background-color: rgb(80, 80, 80);
517   background-color: rgba(50, 50, 50, 0.75);
518
519   -webkit-box-shadow: 0 0 3em #fff;
520      -moz-box-shadow: 0 0 3em #fff;
521           box-shadow: 0 0 3em #fff;
522
523   -webkit-transition: border 0s, -webkit-box-shadow 0s, -webkit-transform 0s;
524      -moz-transition: border 0s,    -moz-box-shadow 0s,    -moz-transform 0s;
525        -o-transition: border 0s,      -o-box-shadow 0s,      -o-transform 0s;
526           transition: border 0s,         box-shadow 0s,         transform 0s;
527 }
528
529 .vjs-default-skin .vjs-big-play-button:before {
530   content: "\e001"; /* Play icon */
531   font-family: VideoJS;
532   font-size: 3em;
533   line-height: 2.66;
534   text-shadow: 0.05em 0.05em 0.1em #000;
535   text-align: center; /* Needed for IE8 */
536
537   position: absolute;
538   left: 0;
539   width: 100%;
540   height: 100%;
541 }
542
543 /* Loading Spinner
544 ---------------------------------------------------------*/
545 .vjs-loading-spinner {
546   display: none;
547   position: absolute;
548   top: 50%;
549   left: 50%;
550
551   font-size: 5em;
552   line-height: 1;
553
554   width: 1em;
555   height: 1em;
556
557   margin-left: -0.5em;
558   margin-top: -0.5em;
559
560   opacity: 0.75;
561
562   -webkit-animation: spin 1.5s infinite linear;
563      -moz-animation: spin 1.5s infinite linear;
564        -o-animation: spin 1.5s infinite linear;
565           animation: spin 1.5s infinite linear;
566 }
567
568 .vjs-default-skin .vjs-loading-spinner:before {
569   content: "\e00a"; /* Loading spinner icon */
570   font-family: VideoJS;
571
572   position: absolute;
573   width: 1em;
574   height: 1em;
575   text-align: center;
576   text-shadow: 0em 0em 0.1em #000;
577 }
578
579 /* Add a gradient to the spinner by overlaying another copy.
580    Text gradient plus a text shadow doesn't work
581    and `background-clip: text` only works in Webkit. */
582 .vjs-default-skin .vjs-loading-spinner:after {
583   content: "\e00a"; /* Loading spinner icon */
584   font-family: VideoJS;
585
586   position: absolute;
587   width: 1em;
588   height: 1em;
589   text-align: center;
590
591   -webkit-background-clip: text;
592   -webkit-text-fill-color: transparent;
593 }
594
595 @-moz-keyframes spin {
596   0% { -moz-transform: rotate(0deg); }
597   100% { -moz-transform: rotate(359deg); }
598 }
599 @-webkit-keyframes spin {
600   0% { -webkit-transform: rotate(0deg); }
601   100% { -webkit-transform: rotate(359deg); }
602 }
603 @-o-keyframes spin {
604   0% { -o-transform: rotate(0deg); }
605   100% { -o-transform: rotate(359deg); }
606 }
607 @-ms-keyframes spin {
608   0% { -ms-transform: rotate(0deg); }
609   100% { -ms-transform: rotate(359deg); }
610 }
611 @keyframes spin {
612   0% { transform: rotate(0deg); }
613   100% { transform: rotate(359deg); }
614 }
615
616 /* Menu Buttons (Captions/Subtitles/etc.)
617 -------------------------------------------------------------------------------- */
618 .vjs-default-skin .vjs-menu-button {
619   float: right;
620   cursor: pointer;
621 }
622
623 .vjs-default-skin .vjs-menu {
624   display: none;
625   position: absolute;
626   bottom: 0;
627   left: 0em; /* (Width of vjs-menu - width of button) / 2 */
628   width: 0em;
629   height: 0em;
630   margin-bottom: 3em;
631
632   border-left: 2em solid transparent;
633   border-right: 2em solid transparent;
634
635   border-top: 1.55em solid rgb(0, 0, 0); /* Same top as ul bottom */
636   border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */
637 }
638
639 /* Button Pop-up Menu */
640 .vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
641   display: block;
642   padding: 0; margin: 0;
643   position: absolute;
644   width: 10em;
645   bottom: 1.5em; /* Same bottom as vjs-menu border-top */
646   max-height: 15em;
647   overflow: auto;
648
649   left: -5em; /* Width of menu - width of button / 2 */
650
651   background-color: rgb(0, 0, 0);
652   background-color: rgba(7, 40, 50, 0.7);
653
654   -webkit-box-shadow: -20px -20px 0px rgba(255, 255, 255, 0.5);
655      -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 0.5);
656           box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
657 }
658
659 /*.vjs-default-skin .vjs-menu-button:focus ul,*/ /* This is not needed because keyboard accessibility for the caption button is not handled with the focus any more. */
660 .vjs-default-skin .vjs-menu-button:hover .vjs-menu {
661   display: block;
662 }
663 .vjs-default-skin .vjs-menu-button ul li {
664   list-style: none;
665   margin: 0;
666   padding: 0.3em 0 0.3em 0;
667   line-height: 1.4em;
668   font-size: 1.2em;
669   font-weight: normal;
670   text-align: center;
671   text-transform: lowercase;
672 }
673 .vjs-default-skin .vjs-menu-button ul li.vjs-selected {
674   background-color: #000;
675 }
676 .vjs-default-skin .vjs-menu-button ul li:focus,
677 .vjs-default-skin .vjs-menu-button ul li:hover,
678 .vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
679 .vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
680   background-color: rgb(255, 255, 255);
681   background-color: rgba(255, 255, 255, 0.75);
682   color: #111;
683   outline: 0;
684
685   -webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
686      -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
687           box-shadow: 0 0 1em rgba(255, 255, 255, 1);
688 }
689 .vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
690   text-align: center;
691   text-transform: uppercase;
692   font-size: 1em;
693   line-height: 2em;
694   padding: 0;
695   margin: 0 0 0.3em 0;
696   font-weight: bold;
697   cursor: default;
698 }
699
700 /* Subtitles Button */
701 .vjs-default-skin .vjs-subtitles-button:before { content: "\e00c"; }
702
703 /* There's unfortunately no CC button in FontAwesome, so we need
704     to manually create one. Please +1 the fontawesome request.
705     https://github.com/FortAwesome/Font-Awesome/issues/968 */
706 .vjs-default-skin .vjs-captions-button {
707   font-size: 1em; /* Font icons are 1.5em */
708 }
709 .vjs-default-skin .vjs-captions-button:before {
710   content: "\e008";
711   font-family: VideoJS;
712   font-size: 1.5em;
713   line-height: 2;
714   position: absolute;
715   top: 0;
716   left: 0;
717   width: 100%;
718   height: 100%;
719   text-align: center;
720   text-shadow: none;
721 }
722
723
724 /* Replacement for focus outline */
725 .vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
726 .vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
727   -webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
728      -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1);
729           box-shadow: 0 0 1em rgba(255, 255, 255, 1);
730 }