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 }