You are here

videojs.css in Video.js (HTML5 Video Player) 6

Same filename and directory in other branches
  1. 7 theme/videojs.css
/* DEFAULT SKIN (override in another file)
================================================================================
Using all CSS to draw the controls. Images could be used if desired.
Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
so you can upgrade to newer versions easier. */

/* Controls Layout
   Using a Holy Grail type method to allow the progress bar holder to expand into all available space,
   but using abosolute positioning for individual controls. http://www.alistapart.com/articles/holygrail */
.video-js-box ul.vjs-controls {
  list-style: none; position: absolute; margin: 0; border: none; opacity: 0.85; color: #fff;
  display: none; /* Start hidden */
  left: 0; right: 0; /* 100% width of video-js-box */
  height: 35px; /* Including any margin you want above or below control items */
  padding-left: 35px; /* Width of play button + margin */
  padding-right: 165px; /* Width of all the controls to the right of the progress control + margins */
  padding-top: 0; padding-bottom: 0;
}
/* Controls styles when below the video */
.video-js-box.vjs-controls-below ul.vjs-controls { background-color: #000; }

.video-js-box ul.vjs-controls > li { /* Direct li children of control bar */
                                     position: absolute; list-style: none; float: left; padding: 0; text-align: center;
                                     height: 25px; /* Default height of individual controls */
                                     margin: 5px 0 0 0; /* Top margin to put space between video and controls when controls are below */

                                     /* CSS Background Gradients */
                                     /* Default */ background-color: #0B151A;
                                     /* Webkit  */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 12px;
                                     /* Firefox */ background: #1F3744 -moz-linear-gradient(top,  #0B151A,  #1F3744) left 12px;

                                     /* CSS Curved Corners */
                                     border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;

                                     /* CSS Shadows */
                                     box-shadow: 1px 1px 2px #000; -webkit-box-shadow: 1px 1px 2px #000; -moz-box-shadow: 1px 1px 2px #000;
}

/* Placement of Control Items */
ul.vjs-controls > li.vjs-play-control       { width: 25px; left: 5px; }
ul.vjs-controls > li.vjs-progress-control   { width: 100%; position: relative; }
ul.vjs-controls > li.vjs-time-control       { width: 75px; right: 90px; }
ul.vjs-controls > li.vjs-volume-control     { width: 50px; right: 35px; }
ul.vjs-controls > li.vjs-fullscreen-control { width: 25px; right: 5px; }

/* Removing curves on progress control and time control to join them. */
ul.vjs-controls > li.vjs-progress-control {
  border-top-right-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0;
  border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0;
}
ul.vjs-controls > li.vjs-time-control {
  border-top-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0;
  border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0;
}

/* Play/Pause
-------------------------------------------------------------------------------- */
li.vjs-play-control { cursor: pointer !important; }
li.vjs-play-control span { display: block; font-size: 0; line-height: 0; }
li.vjs-play-control.vjs-play span {
  width: 0; height: 0; margin: 8px 0 0 8px;
  /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
  border-left: 10px solid #fff; /* Width & Color of play icon */
  /* Height of play icon is total top & bottom border widths. Color is transparent. */
  border-top: 5px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0);
}
li.vjs-play-control.vjs-pause span {
  width: 3px; height: 10px; margin: 8px auto 0;
  /* Drawing the pause bars with borders */
  border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff;
}

/* Progress
-------------------------------------------------------------------------------- */
ul.vjs-progress-holder { /* Box containing play and load progresses */
                         position: relative; list-style: none; padding: 0; overflow:hidden; cursor: pointer !important;
                         height: 9px; border: 1px solid #777;
                         margin: 7px 1px 0 5px; /* Placement within the progress control item */
                         border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
ul.vjs-progress-holder li { /* Progress Bars */
                            position: absolute; display: block; width: 0; height: 9px; margin: 0; padding: 0; list-style: none;
                            border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
li.vjs-play-progress {
  /* Default */ background: #fff;
  /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
  /* Firefox */ background: -moz-linear-gradient(top,  #fff,  #777);
}
li.vjs-load-progress {
  opacity: 0.8;
  /* Default */ background-color: #555;
  /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#aaa));
  /* Firefox */ background: -moz-linear-gradient(top,  #555,  #aaa);
}

/* Time Display
-------------------------------------------------------------------------------- */
ul.vjs-controls li.vjs-time-control { font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
ul.vjs-controls li.vjs-time-control span { line-height: 25px; /* Centering vertically */ }

/* Volume
-------------------------------------------------------------------------------- */
li.vjs-volume-control { cursor: pointer !important; }
li.vjs-volume-control ul { list-style: none; display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; }
/* Drawing the volume icon using 6 li elements */
li.vjs-volume-control ul li { /* Individual volume bars */
                              list-style: none; float: left; padding: 0;
                              margin: 0 2px 0 0; /* Space between */
                              width: 5px; height: 0px; /* Total height is height + bottom border */
                              border-bottom: 18px solid #555; /* Default (off) color and height of visible portion */
}
li.vjs-volume-control ul li.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ }
/* Creating differnt bar heights through height (transparent) and bottom border (visible). */
li.vjs-volume-control ul li:nth-child(1) { border-bottom-width: 2px; height: 16px; }
li.vjs-volume-control ul li:nth-child(2) { border-bottom-width: 4px; height: 14px; }
li.vjs-volume-control ul li:nth-child(3) { border-bottom-width: 7px; height: 11px; }
li.vjs-volume-control ul li:nth-child(4) { border-bottom-width: 10px; height: 8px; }
li.vjs-volume-control ul li:nth-child(5) { border-bottom-width: 14px; height: 4px; }
li.vjs-volume-control ul li:nth-child(6) { margin-right: 0; }

/* Fullscreen
-------------------------------------------------------------------------------- */
li.vjs-fullscreen-control { cursor: pointer !important; }
li.vjs-fullscreen-control ul {
  list-style: none; padding: 0; text-align: left; vertical-align: top; cursor: pointer !important;
  margin: 5px 0 0 5px; /* Placement within the fullscreen control item */
  width: 20px; height: 20px;
}
/* Drawing the fullscreen icon using 4 li elements */
li.vjs-fullscreen-control ul li { list-style: none; float: left; margin: 0; padding: 0; font-size: 0; line-height: 0; width: 0; text-align: left; vertical-align: top; }
li.vjs-fullscreen-control ul li:nth-child(1) { /* Top-left triangle */
                                               margin-right: 3px; /* Space between top-left and top-right */
                                               margin-bottom: 3px; /* Space between top-left and bottom-left */
                                               border-top: 6px solid #fff; /* Height and color */
                                               border-right: 6px solid rgba(0,0,0,0);  /* Width */
}
li.vjs-fullscreen-control ul li:nth-child(2) { border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
li.vjs-fullscreen-control ul li:nth-child(3) { clear: both; margin: 0 3px 0 0; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
li.vjs-fullscreen-control ul li:nth-child(4) { border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
/* Icon when video is in fullscreen mode */
.vjs-fullscreen li.vjs-fullscreen-control ul li:nth-child(1) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen li.vjs-fullscreen-control ul li:nth-child(2) { border: none; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen li.vjs-fullscreen-control ul li:nth-child(3) { border: none; border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen li.vjs-fullscreen-control ul li:nth-child(4) { border: none; border-top: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }

/* Big Play Button (at start)
---------------------------------------------------------*/
div.vjs-big-play-button {
  display: none; /* Start hidden */
  position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; z-index: 1003; text-align: center; vertical-align: center; cursor: pointer !important;
  border: 3px solid #fff; opacity: 0.9;
  border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;

  /* CSS Background Gradients */
  /* Default */ background-color: #0B151A;
  /* Webkit  */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 40px;
  /* Firefox */ background: #1F3744 -moz-linear-gradient(top,  #0B151A,  #1F3744) left 40px;

  /* CSS Shadows */
  box-shadow: 4px 4px 8px #000; -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000;
}
div.vjs-big-play-button:hover {
  box-shadow: 0px 0px 80px #fff; -webkit-box-shadow: 0px 0px 80px #fff; -moz-box-shadow: 0px 0px 80px #fff;
}

div.vjs-big-play-button span {
  display: block; font-size: 0; line-height: 0;
  width: 0; height: 0; margin: 20px 0 0 23px;
  /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
  border-left: 40px solid #fff; /* Width & Color of play icon */
  /* Height of play icon is total top & bottom border widths. Color is transparent. */
  border-top: 20px solid rgba(0,0,0,0); border-bottom: 20px solid rgba(0,0,0,0);
}

/* Download Links - Used for browsers that don't support any video.
-------------------------------------------------------------------------------- */
.vjs-no-video { font-size: small; }

/* DERIVATED SKINS FROM DEFAULT */
/* ---------------------------- */

/* VIM */
/* --- */
.vim-css ul.vjs-controls {
  color:#FFFFFF;
  height:50px;
  opacity:0.9;
  padding-left:85px;
  padding-right:160px;
}
.vim-css ul.vjs-controls > li {
  -moz-border-radius:0 0 0 0;
  -moz-box-shadow:none;
  background:none repeat scroll 0 0 rgba(23, 35, 34, 0.745);
  height:32px;
  margin:8px 0 0;
  padding:0;
  text-align:center;
  width:25px;
}
.vim-css ul.vjs-controls > li.vjs-play-control {
  left:10px;
  width:65px;
}
.vim-css ul.vjs-controls > li.vjs-progress-control {
  position:relative;
  width:100%;
}
.vim-css ul.vjs-controls > li.vjs-time-control {
  right:85px;
  width:75px;
}
.vim-css ul.vjs-controls > li.vjs-volume-control {
  right:35px;
  width:50px;
}
.vim-css ul.vjs-controls > li.vjs-fullscreen-control {
  right:10px;
  width:25px;
}
.vim-css ul.vjs-controls li.vjs-play-control {
  -moz-border-radius:5px 5px 5px 5px;
  height:40px;
  margin:0;
}
.vim-css li.vjs-play-control.vjs-play span {
  border-bottom-width:9px;
  border-left-color:#FFFFFF;
  border-left-width:18px;
  border-top-width:9px;
  margin:11px 0 0 24px;
}
.vim-css li.vjs-play-control:hover {
  background:none repeat scroll 0 0 #00ADEF;
}
.vim-css li.vjs-play-control.vjs-pause span {
  border-left:5px solid #FFFFFF;
  border-right:5px solid #FFFFFF;
  height:18px;
  margin:11px 0 0 24px;
  width:5px;
}
.vim-css ul.vjs-controls li.vjs-progress-control {
  -moz-border-radius:5px 0 0 5px;
}
.vim-css li.vjs-progress-control ul.vjs-progress-holder {
  -moz-border-radius:0 0 0 0;
  border-color:#666666;
  height:8px;
  margin:10px 5px 0 10px;
  padding:1px;
}
.vim-css li.vjs-progress-control li.vjs-play-progress {
  -moz-border-radius:0 0 0 0;
  background:none repeat scroll 0 0 #00ADEF;
  height:8px;
}
.vim-css li.vjs-progress-control li.vjs-load-progress {
  -moz-border-radius:0 0 0 0;
  background:none repeat scroll 0 0 #898F8F;
  height:8px;
}
.vim-css ul.vjs-controls li.vjs-time-control {
  font-size:11px;
}
.vim-css ul.vjs-controls li.vjs-time-control span {
  line-height:32px;
}
.vim-css li.vjs-volume-control ul {
  padding:7px 0 0 5px;
  width:30px;
}
.vim-css li.vjs-volume-control ul li {
  border-bottom:12px solid #666666;
  float:left;
  height:3px;
  list-style:none outside none;
  margin:0 2px 0 0;
  padding:0;
  width:3px;
}
.vim-css li.vjs-volume-control ul li.vjs-volume-level-on {
  border-color:#00ADEF;
}
.vim-css li.vjs-volume-control ul li:hover {
  border-bottom-width:15px;
  height:0;
}
.vim-css .vjs-fullscreen-control ul {
  margin:10px 0 0;
}
.vim-css ul.vjs-controls .vjs-fullscreen-control {
  -moz-border-radius:0 5px 5px 0;
}
.vim-css .vjs-fullscreen-control ul li:nth-child(1) {
  border-color:#FFFFFF transparent -moz-use-text-color -moz-use-text-color;
  border-style:solid solid none none;
  border-width:4px 4px medium medium;
  margin:0 4px 4px 0;
}
.vim-css .vjs-fullscreen-control ul li:nth-child(2) {
  border-color:#FFFFFF -moz-use-text-color -moz-use-text-color transparent;
  border-right:medium none;
  border-style:solid none none solid;
  border-width:4px medium medium 4px;
}
.vim-css .vjs-fullscreen-control ul li:nth-child(3) {
  border-color:-moz-use-text-color transparent #FFFFFF -moz-use-text-color;
  border-style:none solid solid none;
  border-width:medium 4px 4px medium;
  clear:both;
  margin:0 4px 0 0;
}
.vim-css .vjs-fullscreen-control ul li:nth-child(4) {
  border-color:-moz-use-text-color -moz-use-text-color #FFFFFF transparent;
  border-style:none none solid solid;
  border-width:medium medium 4px 4px;
}
.vim-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(1) {
  border-color:-moz-use-text-color -moz-use-text-color #FFFFFF transparent;
  border-style:none none solid solid;
  border-width:medium medium 4px 4px;
}
.vim-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(2) {
  border-color:-moz-use-text-color transparent #FFFFFF -moz-use-text-color;
  border-style:none solid solid none;
  border-width:medium 4px 4px medium;
}
.vim-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(3) {
  border-color:#FFFFFF -moz-use-text-color -moz-use-text-color transparent;
  border-right:medium none;
  border-style:solid none none solid;
  border-width:4px medium medium 4px;
}
.vim-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(4) {
  border-color:#FFFFFF transparent -moz-use-text-color -moz-use-text-color;
  border-style:solid solid none none;
  border-width:4px 4px medium medium;
}
.vim-css .vjs-fullscreen-control:hover ul li:nth-child(3), .vim-css .vjs-fullscreen-control:hover ul li:nth-child(4), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(1), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(2) {
  border-bottom-color:#00ADEF;
}
.vim-css .vjs-fullscreen-control:hover ul li:nth-child(1), .vim-css .vjs-fullscreen-control:hover ul li:nth-child(2), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(3), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(4) {
  border-top-color:#00ADEF;
}
.vim-css div.vjs-big-play-button {
  -moz-border-radius:10px 10px 10px 10px;
  -moz-box-shadow:none;
  background:none repeat scroll 0 0 rgba(23, 35, 34, 0.745);
  border:medium none;
  height:80px;
  margin:-40px 0 0 -65px;
  opacity:0.9;
  width:130px;
}
.vim-css div.vjs-big-play-button:hover {
  background:none repeat scroll 0 0 #00ADEF;
  opacity:1;
}
.vim-css div.vjs-big-play-button span {
  border-bottom:18px solid transparent;
  border-left:36px solid #FFFFFF;
  border-top:18px solid transparent;
  margin:22px 0 0 48px;
}

/* YOUTUBE */
/* ------- */
.tube-css ul.vjs-controls {
  background:-moz-linear-gradient(center top , #FCFCFC, #D0D0D0) repeat scroll left top #FCFCFC;
  color:#000000;
  height:25px;
  opacity:1;
  padding-left:102px;
  padding-right:83px;
}
.tube-css ul.vjs-controls > li {
  -moz-border-radius:0 0 0 0;
  -moz-box-shadow:none;
  background:none repeat scroll 0 0 transparent;
  border-color:#B1B1B1 #B1B1B1 #B1B1B1 #EEEEEE;
  border-style:solid;
  border-width:1px;
  height:23px;
  margin:0;
}
.tube-css ul.vjs-controls > li.vjs-play-control {
  left:0;
  width:25px;
}
.tube-css ul.vjs-controls > li.vjs-progress-control {
  position:relative;
  width:100%;
}
.tube-css ul.vjs-controls > li.vjs-time-control {
  left:27px;
  width:75px;
}
.tube-css ul.vjs-controls > li.vjs-volume-control {
  right:30px;
  width:50px;
}
.tube-css ul.vjs-controls > li.vjs-fullscreen-control {
  right:0;
  width:30px;
}
.tube-css ul.vjs-controls > li.vjs-progress-control {
  border-left:medium none;
}
.tube-css ul.vjs-controls > li.vjs-time-control {
  border-right:medium none;
}
.tube-css ul.vjs-controls > li:first-child {
  border-left-color:#B1B1B1;
  margin-left:0;
}
.tube-css li.vjs-play-control.vjs-play span {
  border-bottom-width:7px;
  border-left-color:#333333;
  border-left-width:13px;
  border-top-width:7px;
  margin:5px 0 0 7px;
}
.tube-css li.vjs-play-control.vjs-pause span {
  border-left:4px solid #333333;
  border-right:4px solid #333333;
  height:14px;
  margin:5px auto 0;
}
.tube-css li.vjs-play-control.vjs-play:hover span {
  border-left-color:#CF1A1A;
}
.tube-css li.vjs-play-control.vjs-pause:hover span {
  border-left-color:#CF1A1A;
  border-right-color:#CF1A1A;
}
.tube-css ul.vjs-controls li.vjs-time-control {
  font-size:11px;
}
.tube-css ul.vjs-controls li.vjs-time-control span {
  line-height:25px;
}
.tube-css ul.vjs-progress-holder {
  -moz-border-radius:0 0 0 0;
  background:-moz-linear-gradient(center top , #B1B1B1, #CACACA) repeat scroll left top #B1B1B1;
  border-color:#CACACA #CACACA #EAEAEA;
  margin-right:10px;
}
.tube-css li.vjs-progress-control li.vjs-load-progress {
  -moz-border-radius:0 0 0 0;
  background:none repeat scroll 0 0 #C89191;
}
.tube-css li.vjs-progress-control li.vjs-play-progress {
  -moz-border-radius:0 0 0 0;
  background:-moz-linear-gradient(center top , #FF3333, #CF1A1A) repeat scroll 0 0 transparent;
}
.tube-css li.vjs-volume-control ul {
  padding:3px 0 0;
}
.tube-css li.vjs-volume-control ul li {
  border-bottom-color:#CCCCCC;
}
.tube-css li.vjs-volume-control ul li.vjs-volume-level-on {
  border-color:#333333;
}
.tube-css li.vjs-volume-control:hover ul li.vjs-volume-level-on {
  border-color:#CF1A1A;
}
.tube-css .vjs-fullscreen-control ul {
  margin:4px 0 0 8px;
}
.tube-css .vjs-fullscreen-control ul li:nth-child(3), .tube-css .vjs-fullscreen-control ul li:nth-child(4), .tube-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(1), .tube-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(2) {
  border-bottom-color:#333333;
}
.tube-css .vjs-fullscreen-control ul li:nth-child(1), .tube-css .vjs-fullscreen-control ul li:nth-child(2), .tube-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(3), .tube-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(4) {
  border-top-color:#333333;
}
.tube-css .vjs-fullscreen-control:hover ul li:nth-child(3), .tube-css .vjs-fullscreen-control:hover ul li:nth-child(4), .tube-css.vjs-fullscreen:hover .vjs-fullscreen-control ul li:nth-child(1), .tube-css.vjs-fullscreen:hover .vjs-fullscreen-control ul li:nth-child(2) {
  border-bottom-color:#CF1A1A;
}
.tube-css .vjs-fullscreen-control:hover ul li:nth-child(1), .tube-css .vjs-fullscreen-control:hover ul li:nth-child(2), .tube-css.vjs-fullscreen:hover .vjs-fullscreen-control ul li:nth-child(3), .tube-css.vjs-fullscreen:hover .vjs-fullscreen-control ul li:nth-child(4) {
  border-top-color:#CF1A1A;
}
.tube-css div.vjs-big-play-button {
  -moz-border-radius:10px 10px 10px 10px;
  -moz-box-shadow:none;
  background:-moz-linear-gradient(center top , #000000, #333333) repeat scroll left 29px #000000;
  border:2px solid #CCCCCC;
  height:58px;
  margin:-29px 0 0 -42px;
  opacity:0.9;
  width:84px;
}
.tube-css div.vjs-big-play-button:hover {
  opacity:1;
}
.tube-css div.vjs-big-play-button span {
  border-bottom:18px solid transparent;
  border-left:36px solid #FFFFFF;
  border-top:18px solid transparent;
  margin:11px 0 0 26px;
}

/* HULU */
/* ---- */
.hu-css ul.vjs-controls {
  background:none repeat scroll 0 0 #3A3835;
  color:#FFFFFF;
  height:47px;
  opacity:0.95;
  padding-left:84px;
  padding-right:0;
}
.hu-css ul.vjs-controls > li {
  -moz-border-radius:0 0 0 0;
  -moz-box-shadow:none;
  background:none repeat scroll 0 0 transparent;
}
.hu-css ul.vjs-controls > li.vjs-play-control, .hu-css ul.vjs-controls > li.vjs-volume-control, .hu-css ul.vjs-controls > li.vjs-fullscreen-control {
  bottom:20px;
  height:27px;
}
.hu-css ul.vjs-controls > li.vjs-progress-control, .hu-css ul.vjs-controls > li.vjs-time-control {
  height:19px;
  margin-top:28px;
}
.hu-css ul.vjs-controls > li.vjs-play-control {
  left:0;
  width:33px;
}
.hu-css ul.vjs-controls > li.vjs-progress-control {
  position:relative;
  width:100%;
}
.hu-css ul.vjs-controls > li.vjs-time-control {
  left:0;
  width:84px;
}
.hu-css ul.vjs-controls > li.vjs-volume-control {
  right:44px;
  width:43px;
}
.hu-css ul.vjs-controls > li.vjs-fullscreen-control {
  right:0;
  width:43px;
}
.hu-css li.vjs-play-control.vjs-play span {
  margin:9px 0 0 12px;
}
.hu-css li.vjs-play-control.vjs-pause span {
  margin:9px 0 0 12px;
}
.hu-css li.vjs-play-control:hover {
  background-color:#000000;
}
.hu-css ul.vjs-progress-holder {
  -moz-border-radius:0 0 0 0;
  background:none repeat scroll 0 0 #000000;
  border:medium none;
  height:19px;
  margin:0 0 0;
}
.hu-css ul.vjs-progress-holder li {
  -moz-border-radius:0 0 0 0;
  height:13px;
  margin-top:3px;
}
.hu-css li.vjs-play-progress {
  background:-moz-linear-gradient(center top , #999999, #777777) repeat scroll 0 0 transparent;
}
.hu-css li.vjs-load-progress {
  background:none repeat scroll 0 0 #555555;
}
.hu-css ul.vjs-controls li.vjs-time-control {
  background:none repeat scroll 0 0 #000000;
  font-size:11px;
}
.hu-css ul.vjs-controls li.vjs-time-control span {
  line-height:19px;
}
.hu-css li.vjs-volume-control ul {
  margin:0 5px;
  padding:9px 0 0;
}
.hu-css li.vjs-volume-control ul li {
  border-bottom:12px solid #555555;
  height:0;
  margin:0 2px 0 0;
  width:3px;
}
.hu-css li.vjs-volume-control ul li.vjs-volume-level-on {
  border-color:#FFFFFF;
}
.hu-css li.vjs-volume-control ul li:nth-child(1) {
  border-bottom-width:2px;
  height:10px;
}
.hu-css li.vjs-volume-control ul li:nth-child(2) {
  border-bottom-width:4px;
  height:8px;
}
.hu-css li.vjs-volume-control ul li:nth-child(3) {
  border-bottom-width:6px;
  height:6px;
}
.hu-css li.vjs-volume-control ul li:nth-child(4) {
  border-bottom-width:8px;
  height:4px;
}
.hu-css li.vjs-volume-control ul li:nth-child(5) {
  border-bottom-width:10px;
  height:2px;
}
.hu-css .vjs-fullscreen-control:hover {
  background-color:#000000;
}
.hu-css .vjs-fullscreen-control ul {
  border-left:1px solid #555555;
  height:13px;
  margin:8px 0 0 0;
  padding-left:13px;
}
.hu-css .vjs-fullscreen-control ul li:nth-child(1) {
  border-right:4px solid transparent;
  border-top:4px solid #FFFFFF;
  margin-bottom:5px;
  margin-right:9px;
}
.hu-css .vjs-fullscreen-control ul li:nth-child(2) {
  border-left:4px solid transparent;
  border-top:4px solid #FFFFFF;
}
.hu-css .vjs-fullscreen-control ul li:nth-child(3) {
  border-bottom:4px solid #FFFFFF;
  border-right:4px solid transparent;
  clear:both;
  margin:0 9px 0 0;
}
.hu-css .vjs-fullscreen-control ul li:nth-child(4) {
  border-bottom:4px solid #FFFFFF;
  border-left:4px solid transparent;
}
.hu-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(1) {
  border-color:-moz-use-text-color -moz-use-text-color #FFFFFF transparent;
  border-style:none none solid solid;
  border-width:medium medium 4px 4px;
}
.hu-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(2) {
  border-color:-moz-use-text-color transparent #FFFFFF -moz-use-text-color;
  border-style:none solid solid none;
  border-width:medium 4px 4px medium;
}
.hu-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(3) {
  border-color:#FFFFFF -moz-use-text-color -moz-use-text-color transparent;
  border-right:medium none;
  border-style:solid none none solid;
  border-width:4px medium medium 4px;
}
.hu-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(4) {
  border-color:#FFFFFF transparent -moz-use-text-color -moz-use-text-color;
  border-style:solid solid none none;
  border-width:4px 4px medium medium;
}
.hu-css div.vjs-big-play-button {
  -moz-border-radius:0 0 0 0;
  -moz-box-shadow:none;
  background:none repeat scroll 0 0 rgba(50, 50, 50, 0.8);
  border:1px solid #CCCCCC;
  height:70px;
  margin:-35px 0 0 -38px;
  opacity:0.8;
  width:76px;
}
.hu-css div.vjs-big-play-button:hover {
  -moz-box-shadow:0 0 80px #FFFFFF;
}
.hu-css div.vjs-big-play-button span {
  border-bottom:20px solid transparent;
  border-left:40px solid #FFFFFF;
  border-top:20px solid transparent;
  margin:16px 0 0 21px;
}

File

theme/videojs.css
View source
  1. /* DEFAULT SKIN (override in another file)
  2. ================================================================================
  3. Using all CSS to draw the controls. Images could be used if desired.
  4. Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
  5. so you can upgrade to newer versions easier. */
  6. /* Controls Layout
  7. Using a Holy Grail type method to allow the progress bar holder to expand into all available space,
  8. but using abosolute positioning for individual controls. http://www.alistapart.com/articles/holygrail */
  9. .video-js-box ul.vjs-controls {
  10. list-style: none; position: absolute; margin: 0; border: none; opacity: 0.85; color: #fff;
  11. display: none; /* Start hidden */
  12. left: 0; right: 0; /* 100% width of video-js-box */
  13. height: 35px; /* Including any margin you want above or below control items */
  14. padding-left: 35px; /* Width of play button + margin */
  15. padding-right: 165px; /* Width of all the controls to the right of the progress control + margins */
  16. padding-top: 0; padding-bottom: 0;
  17. }
  18. /* Controls styles when below the video */
  19. .video-js-box.vjs-controls-below ul.vjs-controls { background-color: #000; }
  20. .video-js-box ul.vjs-controls > li { /* Direct li children of control bar */
  21. position: absolute; list-style: none; float: left; padding: 0; text-align: center;
  22. height: 25px; /* Default height of individual controls */
  23. margin: 5px 0 0 0; /* Top margin to put space between video and controls when controls are below */
  24. /* CSS Background Gradients */
  25. /* Default */ background-color: #0B151A;
  26. /* Webkit */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 12px;
  27. /* Firefox */ background: #1F3744 -moz-linear-gradient(top, #0B151A, #1F3744) left 12px;
  28. /* CSS Curved Corners */
  29. border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
  30. /* CSS Shadows */
  31. box-shadow: 1px 1px 2px #000; -webkit-box-shadow: 1px 1px 2px #000; -moz-box-shadow: 1px 1px 2px #000;
  32. }
  33. /* Placement of Control Items */
  34. ul.vjs-controls > li.vjs-play-control { width: 25px; left: 5px; }
  35. ul.vjs-controls > li.vjs-progress-control { width: 100%; position: relative; }
  36. ul.vjs-controls > li.vjs-time-control { width: 75px; right: 90px; }
  37. ul.vjs-controls > li.vjs-volume-control { width: 50px; right: 35px; }
  38. ul.vjs-controls > li.vjs-fullscreen-control { width: 25px; right: 5px; }
  39. /* Removing curves on progress control and time control to join them. */
  40. ul.vjs-controls > li.vjs-progress-control {
  41. border-top-right-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0;
  42. border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0;
  43. }
  44. ul.vjs-controls > li.vjs-time-control {
  45. border-top-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0;
  46. border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0;
  47. }
  48. /* Play/Pause
  49. -------------------------------------------------------------------------------- */
  50. li.vjs-play-control { cursor: pointer !important; }
  51. li.vjs-play-control span { display: block; font-size: 0; line-height: 0; }
  52. li.vjs-play-control.vjs-play span {
  53. width: 0; height: 0; margin: 8px 0 0 8px;
  54. /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
  55. border-left: 10px solid #fff; /* Width & Color of play icon */
  56. /* Height of play icon is total top & bottom border widths. Color is transparent. */
  57. border-top: 5px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0);
  58. }
  59. li.vjs-play-control.vjs-pause span {
  60. width: 3px; height: 10px; margin: 8px auto 0;
  61. /* Drawing the pause bars with borders */
  62. border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff;
  63. }
  64. /* Progress
  65. -------------------------------------------------------------------------------- */
  66. ul.vjs-progress-holder { /* Box containing play and load progresses */
  67. position: relative; list-style: none; padding: 0; overflow:hidden; cursor: pointer !important;
  68. height: 9px; border: 1px solid #777;
  69. margin: 7px 1px 0 5px; /* Placement within the progress control item */
  70. border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
  71. }
  72. ul.vjs-progress-holder li { /* Progress Bars */
  73. position: absolute; display: block; width: 0; height: 9px; margin: 0; padding: 0; list-style: none;
  74. border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
  75. }
  76. li.vjs-play-progress {
  77. /* Default */ background: #fff;
  78. /* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
  79. /* Firefox */ background: -moz-linear-gradient(top, #fff, #777);
  80. }
  81. li.vjs-load-progress {
  82. opacity: 0.8;
  83. /* Default */ background-color: #555;
  84. /* Webkit */ background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#aaa));
  85. /* Firefox */ background: -moz-linear-gradient(top, #555, #aaa);
  86. }
  87. /* Time Display
  88. -------------------------------------------------------------------------------- */
  89. ul.vjs-controls li.vjs-time-control { font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
  90. ul.vjs-controls li.vjs-time-control span { line-height: 25px; /* Centering vertically */ }
  91. /* Volume
  92. -------------------------------------------------------------------------------- */
  93. li.vjs-volume-control { cursor: pointer !important; }
  94. li.vjs-volume-control ul { list-style: none; display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; }
  95. /* Drawing the volume icon using 6 li elements */
  96. li.vjs-volume-control ul li { /* Individual volume bars */
  97. list-style: none; float: left; padding: 0;
  98. margin: 0 2px 0 0; /* Space between */
  99. width: 5px; height: 0px; /* Total height is height + bottom border */
  100. border-bottom: 18px solid #555; /* Default (off) color and height of visible portion */
  101. }
  102. li.vjs-volume-control ul li.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ }
  103. /* Creating differnt bar heights through height (transparent) and bottom border (visible). */
  104. li.vjs-volume-control ul li:nth-child(1) { border-bottom-width: 2px; height: 16px; }
  105. li.vjs-volume-control ul li:nth-child(2) { border-bottom-width: 4px; height: 14px; }
  106. li.vjs-volume-control ul li:nth-child(3) { border-bottom-width: 7px; height: 11px; }
  107. li.vjs-volume-control ul li:nth-child(4) { border-bottom-width: 10px; height: 8px; }
  108. li.vjs-volume-control ul li:nth-child(5) { border-bottom-width: 14px; height: 4px; }
  109. li.vjs-volume-control ul li:nth-child(6) { margin-right: 0; }
  110. /* Fullscreen
  111. -------------------------------------------------------------------------------- */
  112. li.vjs-fullscreen-control { cursor: pointer !important; }
  113. li.vjs-fullscreen-control ul {
  114. list-style: none; padding: 0; text-align: left; vertical-align: top; cursor: pointer !important;
  115. margin: 5px 0 0 5px; /* Placement within the fullscreen control item */
  116. width: 20px; height: 20px;
  117. }
  118. /* Drawing the fullscreen icon using 4 li elements */
  119. li.vjs-fullscreen-control ul li { list-style: none; float: left; margin: 0; padding: 0; font-size: 0; line-height: 0; width: 0; text-align: left; vertical-align: top; }
  120. li.vjs-fullscreen-control ul li:nth-child(1) { /* Top-left triangle */
  121. margin-right: 3px; /* Space between top-left and top-right */
  122. margin-bottom: 3px; /* Space between top-left and bottom-left */
  123. border-top: 6px solid #fff; /* Height and color */
  124. border-right: 6px solid rgba(0,0,0,0); /* Width */
  125. }
  126. li.vjs-fullscreen-control ul li:nth-child(2) { border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
  127. li.vjs-fullscreen-control ul li:nth-child(3) { clear: both; margin: 0 3px 0 0; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
  128. li.vjs-fullscreen-control ul li:nth-child(4) { border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
  129. /* Icon when video is in fullscreen mode */
  130. .vjs-fullscreen li.vjs-fullscreen-control ul li:nth-child(1) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
  131. .vjs-fullscreen li.vjs-fullscreen-control ul li:nth-child(2) { border: none; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
  132. .vjs-fullscreen li.vjs-fullscreen-control ul li:nth-child(3) { border: none; border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
  133. .vjs-fullscreen li.vjs-fullscreen-control ul li:nth-child(4) { border: none; border-top: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
  134. /* Big Play Button (at start)
  135. ---------------------------------------------------------*/
  136. div.vjs-big-play-button {
  137. display: none; /* Start hidden */
  138. position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; z-index: 1003; text-align: center; vertical-align: center; cursor: pointer !important;
  139. border: 3px solid #fff; opacity: 0.9;
  140. border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
  141. /* CSS Background Gradients */
  142. /* Default */ background-color: #0B151A;
  143. /* Webkit */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 40px;
  144. /* Firefox */ background: #1F3744 -moz-linear-gradient(top, #0B151A, #1F3744) left 40px;
  145. /* CSS Shadows */
  146. box-shadow: 4px 4px 8px #000; -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000;
  147. }
  148. div.vjs-big-play-button:hover {
  149. box-shadow: 0px 0px 80px #fff; -webkit-box-shadow: 0px 0px 80px #fff; -moz-box-shadow: 0px 0px 80px #fff;
  150. }
  151. div.vjs-big-play-button span {
  152. display: block; font-size: 0; line-height: 0;
  153. width: 0; height: 0; margin: 20px 0 0 23px;
  154. /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
  155. border-left: 40px solid #fff; /* Width & Color of play icon */
  156. /* Height of play icon is total top & bottom border widths. Color is transparent. */
  157. border-top: 20px solid rgba(0,0,0,0); border-bottom: 20px solid rgba(0,0,0,0);
  158. }
  159. /* Download Links - Used for browsers that don't support any video.
  160. -------------------------------------------------------------------------------- */
  161. .vjs-no-video { font-size: small; }
  162. /* DERIVATED SKINS FROM DEFAULT */
  163. /* ---------------------------- */
  164. /* VIM */
  165. /* --- */
  166. .vim-css ul.vjs-controls {
  167. color:#FFFFFF;
  168. height:50px;
  169. opacity:0.9;
  170. padding-left:85px;
  171. padding-right:160px;
  172. }
  173. .vim-css ul.vjs-controls > li {
  174. -moz-border-radius:0 0 0 0;
  175. -moz-box-shadow:none;
  176. background:none repeat scroll 0 0 rgba(23, 35, 34, 0.745);
  177. height:32px;
  178. margin:8px 0 0;
  179. padding:0;
  180. text-align:center;
  181. width:25px;
  182. }
  183. .vim-css ul.vjs-controls > li.vjs-play-control {
  184. left:10px;
  185. width:65px;
  186. }
  187. .vim-css ul.vjs-controls > li.vjs-progress-control {
  188. position:relative;
  189. width:100%;
  190. }
  191. .vim-css ul.vjs-controls > li.vjs-time-control {
  192. right:85px;
  193. width:75px;
  194. }
  195. .vim-css ul.vjs-controls > li.vjs-volume-control {
  196. right:35px;
  197. width:50px;
  198. }
  199. .vim-css ul.vjs-controls > li.vjs-fullscreen-control {
  200. right:10px;
  201. width:25px;
  202. }
  203. .vim-css ul.vjs-controls li.vjs-play-control {
  204. -moz-border-radius:5px 5px 5px 5px;
  205. height:40px;
  206. margin:0;
  207. }
  208. .vim-css li.vjs-play-control.vjs-play span {
  209. border-bottom-width:9px;
  210. border-left-color:#FFFFFF;
  211. border-left-width:18px;
  212. border-top-width:9px;
  213. margin:11px 0 0 24px;
  214. }
  215. .vim-css li.vjs-play-control:hover {
  216. background:none repeat scroll 0 0 #00ADEF;
  217. }
  218. .vim-css li.vjs-play-control.vjs-pause span {
  219. border-left:5px solid #FFFFFF;
  220. border-right:5px solid #FFFFFF;
  221. height:18px;
  222. margin:11px 0 0 24px;
  223. width:5px;
  224. }
  225. .vim-css ul.vjs-controls li.vjs-progress-control {
  226. -moz-border-radius:5px 0 0 5px;
  227. }
  228. .vim-css li.vjs-progress-control ul.vjs-progress-holder {
  229. -moz-border-radius:0 0 0 0;
  230. border-color:#666666;
  231. height:8px;
  232. margin:10px 5px 0 10px;
  233. padding:1px;
  234. }
  235. .vim-css li.vjs-progress-control li.vjs-play-progress {
  236. -moz-border-radius:0 0 0 0;
  237. background:none repeat scroll 0 0 #00ADEF;
  238. height:8px;
  239. }
  240. .vim-css li.vjs-progress-control li.vjs-load-progress {
  241. -moz-border-radius:0 0 0 0;
  242. background:none repeat scroll 0 0 #898F8F;
  243. height:8px;
  244. }
  245. .vim-css ul.vjs-controls li.vjs-time-control {
  246. font-size:11px;
  247. }
  248. .vim-css ul.vjs-controls li.vjs-time-control span {
  249. line-height:32px;
  250. }
  251. .vim-css li.vjs-volume-control ul {
  252. padding:7px 0 0 5px;
  253. width:30px;
  254. }
  255. .vim-css li.vjs-volume-control ul li {
  256. border-bottom:12px solid #666666;
  257. float:left;
  258. height:3px;
  259. list-style:none outside none;
  260. margin:0 2px 0 0;
  261. padding:0;
  262. width:3px;
  263. }
  264. .vim-css li.vjs-volume-control ul li.vjs-volume-level-on {
  265. border-color:#00ADEF;
  266. }
  267. .vim-css li.vjs-volume-control ul li:hover {
  268. border-bottom-width:15px;
  269. height:0;
  270. }
  271. .vim-css .vjs-fullscreen-control ul {
  272. margin:10px 0 0;
  273. }
  274. .vim-css ul.vjs-controls .vjs-fullscreen-control {
  275. -moz-border-radius:0 5px 5px 0;
  276. }
  277. .vim-css .vjs-fullscreen-control ul li:nth-child(1) {
  278. border-color:#FFFFFF transparent -moz-use-text-color -moz-use-text-color;
  279. border-style:solid solid none none;
  280. border-width:4px 4px medium medium;
  281. margin:0 4px 4px 0;
  282. }
  283. .vim-css .vjs-fullscreen-control ul li:nth-child(2) {
  284. border-color:#FFFFFF -moz-use-text-color -moz-use-text-color transparent;
  285. border-right:medium none;
  286. border-style:solid none none solid;
  287. border-width:4px medium medium 4px;
  288. }
  289. .vim-css .vjs-fullscreen-control ul li:nth-child(3) {
  290. border-color:-moz-use-text-color transparent #FFFFFF -moz-use-text-color;
  291. border-style:none solid solid none;
  292. border-width:medium 4px 4px medium;
  293. clear:both;
  294. margin:0 4px 0 0;
  295. }
  296. .vim-css .vjs-fullscreen-control ul li:nth-child(4) {
  297. border-color:-moz-use-text-color -moz-use-text-color #FFFFFF transparent;
  298. border-style:none none solid solid;
  299. border-width:medium medium 4px 4px;
  300. }
  301. .vim-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(1) {
  302. border-color:-moz-use-text-color -moz-use-text-color #FFFFFF transparent;
  303. border-style:none none solid solid;
  304. border-width:medium medium 4px 4px;
  305. }
  306. .vim-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(2) {
  307. border-color:-moz-use-text-color transparent #FFFFFF -moz-use-text-color;
  308. border-style:none solid solid none;
  309. border-width:medium 4px 4px medium;
  310. }
  311. .vim-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(3) {
  312. border-color:#FFFFFF -moz-use-text-color -moz-use-text-color transparent;
  313. border-right:medium none;
  314. border-style:solid none none solid;
  315. border-width:4px medium medium 4px;
  316. }
  317. .vim-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(4) {
  318. border-color:#FFFFFF transparent -moz-use-text-color -moz-use-text-color;
  319. border-style:solid solid none none;
  320. border-width:4px 4px medium medium;
  321. }
  322. .vim-css .vjs-fullscreen-control:hover ul li:nth-child(3), .vim-css .vjs-fullscreen-control:hover ul li:nth-child(4), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(1), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(2) {
  323. border-bottom-color:#00ADEF;
  324. }
  325. .vim-css .vjs-fullscreen-control:hover ul li:nth-child(1), .vim-css .vjs-fullscreen-control:hover ul li:nth-child(2), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(3), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(4) {
  326. border-top-color:#00ADEF;
  327. }
  328. .vim-css div.vjs-big-play-button {
  329. -moz-border-radius:10px 10px 10px 10px;
  330. -moz-box-shadow:none;
  331. background:none repeat scroll 0 0 rgba(23, 35, 34, 0.745);
  332. border:medium none;
  333. height:80px;
  334. margin:-40px 0 0 -65px;
  335. opacity:0.9;
  336. width:130px;
  337. }
  338. .vim-css div.vjs-big-play-button:hover {
  339. background:none repeat scroll 0 0 #00ADEF;
  340. opacity:1;
  341. }
  342. .vim-css div.vjs-big-play-button span {
  343. border-bottom:18px solid transparent;
  344. border-left:36px solid #FFFFFF;
  345. border-top:18px solid transparent;
  346. margin:22px 0 0 48px;
  347. }
  348. /* YOUTUBE */
  349. /* ------- */
  350. .tube-css ul.vjs-controls {
  351. background:-moz-linear-gradient(center top , #FCFCFC, #D0D0D0) repeat scroll left top #FCFCFC;
  352. color:#000000;
  353. height:25px;
  354. opacity:1;
  355. padding-left:102px;
  356. padding-right:83px;
  357. }
  358. .tube-css ul.vjs-controls > li {
  359. -moz-border-radius:0 0 0 0;
  360. -moz-box-shadow:none;
  361. background:none repeat scroll 0 0 transparent;
  362. border-color:#B1B1B1 #B1B1B1 #B1B1B1 #EEEEEE;
  363. border-style:solid;
  364. border-width:1px;
  365. height:23px;
  366. margin:0;
  367. }
  368. .tube-css ul.vjs-controls > li.vjs-play-control {
  369. left:0;
  370. width:25px;
  371. }
  372. .tube-css ul.vjs-controls > li.vjs-progress-control {
  373. position:relative;
  374. width:100%;
  375. }
  376. .tube-css ul.vjs-controls > li.vjs-time-control {
  377. left:27px;
  378. width:75px;
  379. }
  380. .tube-css ul.vjs-controls > li.vjs-volume-control {
  381. right:30px;
  382. width:50px;
  383. }
  384. .tube-css ul.vjs-controls > li.vjs-fullscreen-control {
  385. right:0;
  386. width:30px;
  387. }
  388. .tube-css ul.vjs-controls > li.vjs-progress-control {
  389. border-left:medium none;
  390. }
  391. .tube-css ul.vjs-controls > li.vjs-time-control {
  392. border-right:medium none;
  393. }
  394. .tube-css ul.vjs-controls > li:first-child {
  395. border-left-color:#B1B1B1;
  396. margin-left:0;
  397. }
  398. .tube-css li.vjs-play-control.vjs-play span {
  399. border-bottom-width:7px;
  400. border-left-color:#333333;
  401. border-left-width:13px;
  402. border-top-width:7px;
  403. margin:5px 0 0 7px;
  404. }
  405. .tube-css li.vjs-play-control.vjs-pause span {
  406. border-left:4px solid #333333;
  407. border-right:4px solid #333333;
  408. height:14px;
  409. margin:5px auto 0;
  410. }
  411. .tube-css li.vjs-play-control.vjs-play:hover span {
  412. border-left-color:#CF1A1A;
  413. }
  414. .tube-css li.vjs-play-control.vjs-pause:hover span {
  415. border-left-color:#CF1A1A;
  416. border-right-color:#CF1A1A;
  417. }
  418. .tube-css ul.vjs-controls li.vjs-time-control {
  419. font-size:11px;
  420. }
  421. .tube-css ul.vjs-controls li.vjs-time-control span {
  422. line-height:25px;
  423. }
  424. .tube-css ul.vjs-progress-holder {
  425. -moz-border-radius:0 0 0 0;
  426. background:-moz-linear-gradient(center top , #B1B1B1, #CACACA) repeat scroll left top #B1B1B1;
  427. border-color:#CACACA #CACACA #EAEAEA;
  428. margin-right:10px;
  429. }
  430. .tube-css li.vjs-progress-control li.vjs-load-progress {
  431. -moz-border-radius:0 0 0 0;
  432. background:none repeat scroll 0 0 #C89191;
  433. }
  434. .tube-css li.vjs-progress-control li.vjs-play-progress {
  435. -moz-border-radius:0 0 0 0;
  436. background:-moz-linear-gradient(center top , #FF3333, #CF1A1A) repeat scroll 0 0 transparent;
  437. }
  438. .tube-css li.vjs-volume-control ul {
  439. padding:3px 0 0;
  440. }
  441. .tube-css li.vjs-volume-control ul li {
  442. border-bottom-color:#CCCCCC;
  443. }
  444. .tube-css li.vjs-volume-control ul li.vjs-volume-level-on {
  445. border-color:#333333;
  446. }
  447. .tube-css li.vjs-volume-control:hover ul li.vjs-volume-level-on {
  448. border-color:#CF1A1A;
  449. }
  450. .tube-css .vjs-fullscreen-control ul {
  451. margin:4px 0 0 8px;
  452. }
  453. .tube-css .vjs-fullscreen-control ul li:nth-child(3), .tube-css .vjs-fullscreen-control ul li:nth-child(4), .tube-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(1), .tube-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(2) {
  454. border-bottom-color:#333333;
  455. }
  456. .tube-css .vjs-fullscreen-control ul li:nth-child(1), .tube-css .vjs-fullscreen-control ul li:nth-child(2), .tube-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(3), .tube-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(4) {
  457. border-top-color:#333333;
  458. }
  459. .tube-css .vjs-fullscreen-control:hover ul li:nth-child(3), .tube-css .vjs-fullscreen-control:hover ul li:nth-child(4), .tube-css.vjs-fullscreen:hover .vjs-fullscreen-control ul li:nth-child(1), .tube-css.vjs-fullscreen:hover .vjs-fullscreen-control ul li:nth-child(2) {
  460. border-bottom-color:#CF1A1A;
  461. }
  462. .tube-css .vjs-fullscreen-control:hover ul li:nth-child(1), .tube-css .vjs-fullscreen-control:hover ul li:nth-child(2), .tube-css.vjs-fullscreen:hover .vjs-fullscreen-control ul li:nth-child(3), .tube-css.vjs-fullscreen:hover .vjs-fullscreen-control ul li:nth-child(4) {
  463. border-top-color:#CF1A1A;
  464. }
  465. .tube-css div.vjs-big-play-button {
  466. -moz-border-radius:10px 10px 10px 10px;
  467. -moz-box-shadow:none;
  468. background:-moz-linear-gradient(center top , #000000, #333333) repeat scroll left 29px #000000;
  469. border:2px solid #CCCCCC;
  470. height:58px;
  471. margin:-29px 0 0 -42px;
  472. opacity:0.9;
  473. width:84px;
  474. }
  475. .tube-css div.vjs-big-play-button:hover {
  476. opacity:1;
  477. }
  478. .tube-css div.vjs-big-play-button span {
  479. border-bottom:18px solid transparent;
  480. border-left:36px solid #FFFFFF;
  481. border-top:18px solid transparent;
  482. margin:11px 0 0 26px;
  483. }
  484. /* HULU */
  485. /* ---- */
  486. .hu-css ul.vjs-controls {
  487. background:none repeat scroll 0 0 #3A3835;
  488. color:#FFFFFF;
  489. height:47px;
  490. opacity:0.95;
  491. padding-left:84px;
  492. padding-right:0;
  493. }
  494. .hu-css ul.vjs-controls > li {
  495. -moz-border-radius:0 0 0 0;
  496. -moz-box-shadow:none;
  497. background:none repeat scroll 0 0 transparent;
  498. }
  499. .hu-css ul.vjs-controls > li.vjs-play-control, .hu-css ul.vjs-controls > li.vjs-volume-control, .hu-css ul.vjs-controls > li.vjs-fullscreen-control {
  500. bottom:20px;
  501. height:27px;
  502. }
  503. .hu-css ul.vjs-controls > li.vjs-progress-control, .hu-css ul.vjs-controls > li.vjs-time-control {
  504. height:19px;
  505. margin-top:28px;
  506. }
  507. .hu-css ul.vjs-controls > li.vjs-play-control {
  508. left:0;
  509. width:33px;
  510. }
  511. .hu-css ul.vjs-controls > li.vjs-progress-control {
  512. position:relative;
  513. width:100%;
  514. }
  515. .hu-css ul.vjs-controls > li.vjs-time-control {
  516. left:0;
  517. width:84px;
  518. }
  519. .hu-css ul.vjs-controls > li.vjs-volume-control {
  520. right:44px;
  521. width:43px;
  522. }
  523. .hu-css ul.vjs-controls > li.vjs-fullscreen-control {
  524. right:0;
  525. width:43px;
  526. }
  527. .hu-css li.vjs-play-control.vjs-play span {
  528. margin:9px 0 0 12px;
  529. }
  530. .hu-css li.vjs-play-control.vjs-pause span {
  531. margin:9px 0 0 12px;
  532. }
  533. .hu-css li.vjs-play-control:hover {
  534. background-color:#000000;
  535. }
  536. .hu-css ul.vjs-progress-holder {
  537. -moz-border-radius:0 0 0 0;
  538. background:none repeat scroll 0 0 #000000;
  539. border:medium none;
  540. height:19px;
  541. margin:0 0 0;
  542. }
  543. .hu-css ul.vjs-progress-holder li {
  544. -moz-border-radius:0 0 0 0;
  545. height:13px;
  546. margin-top:3px;
  547. }
  548. .hu-css li.vjs-play-progress {
  549. background:-moz-linear-gradient(center top , #999999, #777777) repeat scroll 0 0 transparent;
  550. }
  551. .hu-css li.vjs-load-progress {
  552. background:none repeat scroll 0 0 #555555;
  553. }
  554. .hu-css ul.vjs-controls li.vjs-time-control {
  555. background:none repeat scroll 0 0 #000000;
  556. font-size:11px;
  557. }
  558. .hu-css ul.vjs-controls li.vjs-time-control span {
  559. line-height:19px;
  560. }
  561. .hu-css li.vjs-volume-control ul {
  562. margin:0 5px;
  563. padding:9px 0 0;
  564. }
  565. .hu-css li.vjs-volume-control ul li {
  566. border-bottom:12px solid #555555;
  567. height:0;
  568. margin:0 2px 0 0;
  569. width:3px;
  570. }
  571. .hu-css li.vjs-volume-control ul li.vjs-volume-level-on {
  572. border-color:#FFFFFF;
  573. }
  574. .hu-css li.vjs-volume-control ul li:nth-child(1) {
  575. border-bottom-width:2px;
  576. height:10px;
  577. }
  578. .hu-css li.vjs-volume-control ul li:nth-child(2) {
  579. border-bottom-width:4px;
  580. height:8px;
  581. }
  582. .hu-css li.vjs-volume-control ul li:nth-child(3) {
  583. border-bottom-width:6px;
  584. height:6px;
  585. }
  586. .hu-css li.vjs-volume-control ul li:nth-child(4) {
  587. border-bottom-width:8px;
  588. height:4px;
  589. }
  590. .hu-css li.vjs-volume-control ul li:nth-child(5) {
  591. border-bottom-width:10px;
  592. height:2px;
  593. }
  594. .hu-css .vjs-fullscreen-control:hover {
  595. background-color:#000000;
  596. }
  597. .hu-css .vjs-fullscreen-control ul {
  598. border-left:1px solid #555555;
  599. height:13px;
  600. margin:8px 0 0 0;
  601. padding-left:13px;
  602. }
  603. .hu-css .vjs-fullscreen-control ul li:nth-child(1) {
  604. border-right:4px solid transparent;
  605. border-top:4px solid #FFFFFF;
  606. margin-bottom:5px;
  607. margin-right:9px;
  608. }
  609. .hu-css .vjs-fullscreen-control ul li:nth-child(2) {
  610. border-left:4px solid transparent;
  611. border-top:4px solid #FFFFFF;
  612. }
  613. .hu-css .vjs-fullscreen-control ul li:nth-child(3) {
  614. border-bottom:4px solid #FFFFFF;
  615. border-right:4px solid transparent;
  616. clear:both;
  617. margin:0 9px 0 0;
  618. }
  619. .hu-css .vjs-fullscreen-control ul li:nth-child(4) {
  620. border-bottom:4px solid #FFFFFF;
  621. border-left:4px solid transparent;
  622. }
  623. .hu-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(1) {
  624. border-color:-moz-use-text-color -moz-use-text-color #FFFFFF transparent;
  625. border-style:none none solid solid;
  626. border-width:medium medium 4px 4px;
  627. }
  628. .hu-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(2) {
  629. border-color:-moz-use-text-color transparent #FFFFFF -moz-use-text-color;
  630. border-style:none solid solid none;
  631. border-width:medium 4px 4px medium;
  632. }
  633. .hu-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(3) {
  634. border-color:#FFFFFF -moz-use-text-color -moz-use-text-color transparent;
  635. border-right:medium none;
  636. border-style:solid none none solid;
  637. border-width:4px medium medium 4px;
  638. }
  639. .hu-css.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(4) {
  640. border-color:#FFFFFF transparent -moz-use-text-color -moz-use-text-color;
  641. border-style:solid solid none none;
  642. border-width:4px 4px medium medium;
  643. }
  644. .hu-css div.vjs-big-play-button {
  645. -moz-border-radius:0 0 0 0;
  646. -moz-box-shadow:none;
  647. background:none repeat scroll 0 0 rgba(50, 50, 50, 0.8);
  648. border:1px solid #CCCCCC;
  649. height:70px;
  650. margin:-35px 0 0 -38px;
  651. opacity:0.8;
  652. width:76px;
  653. }
  654. .hu-css div.vjs-big-play-button:hover {
  655. -moz-box-shadow:0 0 80px #FFFFFF;
  656. }
  657. .hu-css div.vjs-big-play-button span {
  658. border-bottom:20px solid transparent;
  659. border-left:40px solid #FFFFFF;
  660. border-top:20px solid transparent;
  661. margin:16px 0 0 21px;
  662. }