You are here

Home » API reference » Video.js (HTML5 Video Player) 7

hu.css in Video.js (HTML5 Video Player) 7

Same filename and directory in other branches
  1. 6 theme/hu.css
/*
VideoJS HuCSS Skin (http://videojs.com)
Version 2.0.0
*/

.hu-css .vjs-controls {
  height: 47px; opacity: 0.95; color: #fff;
  background: #3A3835;
}
.hu-css.video-js-box.vjs-controls-below .vjs-controls { background: #3A3835; }

.hu-css .vjs-controls > div {
  top: 0;
  background: none;
  border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
  box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
}

/* Top Level Items */
.hu-css .vjs-controls > div.vjs-play-control,
.hu-css .vjs-controls > div.vjs-volume-control,
.hu-css .vjs-controls > div.vjs-fullscreen-control {
  bottom: 20px; height: 27px;
}
/* Bottom Level Items */
.hu-css .vjs-controls > div.vjs-progress-control, .hu-css .vjs-controls > div.vjs-time-control {
  margin-top: 28px; height: 19px;
}

/* Placement of Control Items */
.hu-css .vjs-controls > div.vjs-play-control       { width: 33px; left: 0px; }
.hu-css .vjs-controls > div.vjs-progress-control   { width: left: 84px; right: 0; }
.hu-css .vjs-controls > div.vjs-time-control       { width: 84px; left: 0px; }
.hu-css .vjs-controls > div.vjs-volume-control     { width: 43px; right: 44px; }
.hu-css .vjs-controls > div.vjs-fullscreen-control { width: 43px; right: 0px; }

/* Play/Pause
-------------------------------------------------------------------------------- */
.hu-css.vjs-paused .vjs-play-control span { margin: 9px 0 0 12px; }
.hu-css.vjs-playing .vjs-play-control span { margin: 9px 0 0 12px; }
.hu-css .vjs-play-control:hover { background-color: #000; }

/* Progress
-------------------------------------------------------------------------------- */
.hu-css .vjs-progress-holder { /* Box containing play and load progresses */
  height: 19px; border: none;
  margin: 0px 0px 0 0px; /* Placement within the progress control item */
  background: #000;
  border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
}
.hu-css .vjs-progress-holder div { height: 13px; margin-top: 3px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
.hu-css .vjs-play-progress {
  /* Default */ background: #777;
  /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#777));
  /* Firefox */ background: -moz-linear-gradient(top,  #999,  #777);
}
.hu-css .vjs-load-progress { background: #555; }

/* Time Display
-------------------------------------------------------------------------------- */
.hu-css .vjs-controls .vjs-time-control { font-size: 11px; background: #000; }
.hu-css .vjs-controls .vjs-time-control span { line-height: 19px; /* Centering vertically */ }

/* Volume
-------------------------------------------------------------------------------- */
/*.hu-css .vjs-volume-control:hover { background-color: #000; }*/
.hu-css .vjs-volume-control div { margin: 0 5px 0 5px; padding: 9px 0 0 0; }
.hu-css .vjs-volume-control div span { /* Individual volume bars */
  margin: 0 2px 0 0; /* Space between */
  width: 3px; height: 0px; /* Total height is height + bottom border */
  border-bottom: 12px solid #555; /* Default (off) color and height of visible portion */
}
.hu-css .vjs-volume-control div span.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ }
/* Creating differnt bar heights through height (transparent) and bottom border (visible). */
.hu-css .vjs-volume-control div span:nth-child(1) { border-bottom-width: 2px; height: 10px; }
.hu-css .vjs-volume-control div span:nth-child(2) { border-bottom-width: 4px; height: 8px; }
.hu-css .vjs-volume-control div span:nth-child(3) { border-bottom-width: 6px; height: 6px; }
.hu-css .vjs-volume-control div span:nth-child(4) { border-bottom-width: 8px; height: 4px; }
.hu-css .vjs-volume-control div span:nth-child(5) { border-bottom-width: 10px; height: 2px; }

/* Fullscreen
-------------------------------------------------------------------------------- */
.hu-css .vjs-fullscreen-control:hover { background-color: #000; }
.hu-css .vjs-fullscreen-control div { margin: 8px 0 0 0px; padding-left: 13px; height: 13px; border-left: 1px solid #555; }
.hu-css .vjs-fullscreen-control div span:nth-child(1) { margin-right: 9px; margin-bottom: 5px; border-top: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
.hu-css .vjs-fullscreen-control div span:nth-child(2) { border-top: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
.hu-css .vjs-fullscreen-control div span:nth-child(3) { clear: both; margin: 0 9px 0 0; border-bottom: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
.hu-css .vjs-fullscreen-control div span:nth-child(4) { border-bottom: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
/* Icon when video is in fullscreen mode */
.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(1) { border: none; border-bottom: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(2) { border: none; border-bottom: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }
.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(3) { border: none; border-top: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }
.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(4) { border: none; border-top: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }

/* Big Play Button (at start)
---------------------------------------------------------*/
.hu-css div.vjs-big-play-button {
  width: 76px; height: 70px; margin: -35px 0 0 -38px;
  border: 1px solid #ccc; opacity: 0.8;
  border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;

  background: rgba(50,50,50,0.8);

  /* CSS Shadows */
  box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
}
.hu-css 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;
}
.hu-css div.vjs-big-play-button span {
  margin: 16px 0 0 21px;
  /* 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);
}

File

theme/hu.css
View source 
  1. /*

  2. VideoJS HuCSS Skin (http://videojs.com)

  3. Version 2.0.0

  4. */

  5. 

  6. .hu-css .vjs-controls {

  7.   height: 47px; opacity: 0.95; color: #fff;

  8.   background: #3A3835;

  9. }

  10. .hu-css.video-js-box.vjs-controls-below .vjs-controls { background: #3A3835; }

  11. 

  12. .hu-css .vjs-controls > div {

  13.   top: 0;

  14.   background: none;

  15.   border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;

  16.   box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;

  17. }

  18. 

  19. /* Top Level Items */

  20. .hu-css .vjs-controls > div.vjs-play-control,

  21. .hu-css .vjs-controls > div.vjs-volume-control,

  22. .hu-css .vjs-controls > div.vjs-fullscreen-control {

  23.   bottom: 20px; height: 27px;

  24. }

  25. /* Bottom Level Items */

  26. .hu-css .vjs-controls > div.vjs-progress-control, .hu-css .vjs-controls > div.vjs-time-control {

  27.   margin-top: 28px; height: 19px;

  28. }

  29. 

  30. /* Placement of Control Items */

  31. .hu-css .vjs-controls > div.vjs-play-control       { width: 33px; left: 0px; }

  32. .hu-css .vjs-controls > div.vjs-progress-control   { width: left: 84px; right: 0; }

  33. .hu-css .vjs-controls > div.vjs-time-control       { width: 84px; left: 0px; }

  34. .hu-css .vjs-controls > div.vjs-volume-control     { width: 43px; right: 44px; }

  35. .hu-css .vjs-controls > div.vjs-fullscreen-control { width: 43px; right: 0px; }

  36. 

  37. /* Play/Pause

  38. -------------------------------------------------------------------------------- */

  39. .hu-css.vjs-paused .vjs-play-control span { margin: 9px 0 0 12px; }

  40. .hu-css.vjs-playing .vjs-play-control span { margin: 9px 0 0 12px; }

  41. .hu-css .vjs-play-control:hover { background-color: #000; }

  42. 

  43. /* Progress

  44. -------------------------------------------------------------------------------- */

  45. .hu-css .vjs-progress-holder { /* Box containing play and load progresses */

  46.   height: 19px; border: none;

  47.   margin: 0px 0px 0 0px; /* Placement within the progress control item */

  48.   background: #000;

  49.   border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;

  50. }

  51. .hu-css .vjs-progress-holder div { height: 13px; margin-top: 3px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }

  52. .hu-css .vjs-play-progress {

  53.   /* Default */ background: #777;

  54.   /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#777));

  55.   /* Firefox */ background: -moz-linear-gradient(top,  #999,  #777);

  56. }

  57. .hu-css .vjs-load-progress { background: #555; }

  58. 

  59. /* Time Display

  60. -------------------------------------------------------------------------------- */

  61. .hu-css .vjs-controls .vjs-time-control { font-size: 11px; background: #000; }

  62. .hu-css .vjs-controls .vjs-time-control span { line-height: 19px; /* Centering vertically */ }

  63. 

  64. /* Volume

  65. -------------------------------------------------------------------------------- */

  66. /*.hu-css .vjs-volume-control:hover { background-color: #000; }*/

  67. .hu-css .vjs-volume-control div { margin: 0 5px 0 5px; padding: 9px 0 0 0; }

  68. .hu-css .vjs-volume-control div span { /* Individual volume bars */

  69.   margin: 0 2px 0 0; /* Space between */

  70.   width: 3px; height: 0px; /* Total height is height + bottom border */

  71.   border-bottom: 12px solid #555; /* Default (off) color and height of visible portion */

  72. }

  73. .hu-css .vjs-volume-control div span.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ }

  74. /* Creating differnt bar heights through height (transparent) and bottom border (visible). */

  75. .hu-css .vjs-volume-control div span:nth-child(1) { border-bottom-width: 2px; height: 10px; }

  76. .hu-css .vjs-volume-control div span:nth-child(2) { border-bottom-width: 4px; height: 8px; }

  77. .hu-css .vjs-volume-control div span:nth-child(3) { border-bottom-width: 6px; height: 6px; }

  78. .hu-css .vjs-volume-control div span:nth-child(4) { border-bottom-width: 8px; height: 4px; }

  79. .hu-css .vjs-volume-control div span:nth-child(5) { border-bottom-width: 10px; height: 2px; }

  80. 

  81. /* Fullscreen

  82. -------------------------------------------------------------------------------- */

  83. .hu-css .vjs-fullscreen-control:hover { background-color: #000; }

  84. .hu-css .vjs-fullscreen-control div { margin: 8px 0 0 0px; padding-left: 13px; height: 13px; border-left: 1px solid #555; }

  85. .hu-css .vjs-fullscreen-control div span:nth-child(1) { margin-right: 9px; margin-bottom: 5px; border-top: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }

  86. .hu-css .vjs-fullscreen-control div span:nth-child(2) { border-top: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }

  87. .hu-css .vjs-fullscreen-control div span:nth-child(3) { clear: both; margin: 0 9px 0 0; border-bottom: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }

  88. .hu-css .vjs-fullscreen-control div span:nth-child(4) { border-bottom: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }

  89. /* Icon when video is in fullscreen mode */

  90. .hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(1) { border: none; border-bottom: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }

  91. .hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(2) { border: none; border-bottom: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }

  92. .hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(3) { border: none; border-top: 4px solid #fff; border-left: 4px solid rgba(0,0,0,0); }

  93. .hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(4) { border: none; border-top: 4px solid #fff; border-right: 4px solid rgba(0,0,0,0); }

  94. 

  95. /* Big Play Button (at start)

  96. ---------------------------------------------------------*/

  97. .hu-css div.vjs-big-play-button {

  98.   width: 76px; height: 70px; margin: -35px 0 0 -38px;

  99.   border: 1px solid #ccc; opacity: 0.8;

  100.   border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px;

  101. 

  102.   background: rgba(50,50,50,0.8);

  103. 

  104.   /* CSS Shadows */

  105.   box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;

  106. }

  107. .hu-css div.vjs-big-play-button:hover {

  108.   box-shadow: 0px 0px 80px #fff; -webkit-box-shadow: 0px 0px 80px #fff; -moz-box-shadow: 0px 0px 80px #fff;

  109. }

  110. .hu-css div.vjs-big-play-button span {

  111.   margin: 16px 0 0 21px;

  112.   /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */

  113.   border-left: 40px solid #fff; /* Width & Color of play icon */

  114.   /* Height of play icon is total top & bottom border widths. Color is transparent. */

  115.   border-top: 20px solid rgba(0,0,0,0); border-bottom: 20px solid rgba(0,0,0,0);

  116. }