librevideojs-html5-player/librevideojs/css/librevideojs-material/libre-skin-grey.css

/*!
LibreVideoJS Estilos personalizados = Grey
Version 1.2
Escrito por Jesús Eduardo
*/
.librevjs-libre-materialgrey-skin {
color:#ccc;
background-color: inherit;
}
@font-face {
font-family:"LibreVideoJS";
src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");
src: local('?'),
     url("../../fonts/libre-material/libre-icons.woff") format("woff"),
     url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),
     url("../../fonts/libre-material/libre-icons.svg") format("svg");
}
.librevjs-libre-materialgrey-skin .librevjs-slider {
/* Replace browser focus highlight with handle highlight */
outline: 0;
position: relative;
cursor: pointer;
padding: 0;
/* background-color-with-alpha */
background-color: #000000;
background-color: rgba(0, 0, 0, 0.5);
}
.librevjs-libre-materialgrey-skin .librevjs-slider:focus {
-webkit-box-shadow:0 0 2em #fff;
-moz-box-shadow:0 0 2em #fff;
box-shadow:0 0 2em #fff
}

/*Eliminación de botón de barra de progreso*/
.librevjs-libre-materialgrey-skin .librevjs-slider-handle {
width: 0;
height: 0;
}
.librevjs-libre-materialgrey-skin .librevjs-slider-handle:before {
text-shadow: 0em 0em 1em #fff;
position: absolute;
top: 0;
left: 0;
}

/* control bar */
.librevjs-libre-materialgrey-skin .librevjs-control-bar {
/* Start hidden */
display: none;
position: absolute;
/* Place control bar at the bottom of the player box/video.
   If you want more margin below the control bar, add more height.
*/
bottom: 0;
/* Use left/right to stretch to 100% width of player div */
left: 0;
right: 0;
/* Height includes any margin you want above or below control items */
height: 3.0em;
/* background-color-with-alpha */
background-color: #232323;
background-color: rgba(35, 35, 35, 0.8);
}
.librevjs-libre-materialgrey-skin.librevjs-has-started .librevjs-control-bar {
display:block;
visibility:visible;
opacity:1;
-webkit-transition:visibility .1s,opacity .1s;
-moz-transition:visibility .1s,opacity .1s;
-o-transition:visibility .1s,opacity .1s;
transition:visibility .1s,opacity .1s
}
.librevjs-libre-materialgrey-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
display:block;
visibility:hidden;
opacity:0;
-webkit-transition:visibility 1s,opacity 1s;
-moz-transition:visibility 1s,opacity 1s;
-o-transition:visibility 1s,opacity 1s;
transition:visibility 1s,opacity 1s
}
.librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-control-bar {
display:none
}
.librevjs-libre-materialgrey-skin.librevjs-using-native-controls .librevjs-control-bar {
display:none
}
@media \0screen {
 .librevjs-libre-materialgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
 content:""
 }
}
.librevjs-libre-materialgrey-skin .librevjs-control {
outline:0;
position:relative;
float:left;
text-align:center;
margin:0;
padding:0;
height:3em;
width:4em
}
.librevjs-libre-materialgrey-skin .librevjs-control:before {
font-family:LibreVideoJS;
font-size:1.5em;
line-height:2;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
text-align:center;
text-shadow:1px 1px 1px rgba(0,0,0,.5)
}
/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
.librevjs-libre-materialgrey-skin .librevjs-control:focus:before,.librevjs-libre-materialgrey-skin .librevjs-control:hover:before {
color: #9e9e9e;
}
/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
.librevjs-libre-materialgrey-skin .librevjs-control:focus {
}
.librevjs-libre-materialgrey-skin .librevjs-control-text {
border:0;
clip:rect(0 0 0 0);
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
width:1px
}

/*Color y diseño de boton play control*/
.librevjs-libre-materialgrey-skin .librevjs-play-control {
width:5em;
cursor:pointer;
color: rgb(158, 158, 158);
}
.librevjs-libre-materialgrey-skin .librevjs-play-control:before {
content:"\e001"
}
.librevjs-libre-materialgrey-skin .librevjs-play-control:hover:before {
color:#7c7c7c; /*color de play control al pasar el cursor*/
}
.librevjs-libre-materialgrey-skin.librevjs-playing .librevjs-play-control:before {
content:"\e002"
}
/*END Color y diseño de boton play control*/
.librevjs-libre-materialgrey-skin .librevjs-mute-control,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button {
cursor:pointer;
float:right
}
.librevjs-libre-materialgrey-skin .librevjs-mute-control:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button:before {
content:"\e006"
}
.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
content:"\e003"
}
.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
content:"\e004"
}
.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
content:"\e005"
}
.librevjs-libre-materialgrey-skin .librevjs-volume-control {
width:5em;
float:right
}
.librevjs-libre-materialgrey-skin .librevjs-volume-bar {
width:5em;
height:.6em;
margin:1.1em auto 0
}
.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu-content {
height:2.9em
}

/*PERSONALIZACION DE NIVEL DE VOLUMEN*/
.librevjs-libre-materialgrey-skin .librevjs-volume-level {
position: absolute;
top: 0;
left: 0;
height: 0.5em;
/* assuming volume starts at 1.0 */

width: 100%;
background: #9e9e9e url() -50% 0 repeat; /*color de barra volumen*/
}
/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/
.librevjs-libre-materialgrey-skin .librevjs-volume-bar .librevjs-volume-handle {
width:.5em;
height:.5em
}
.librevjs-libre-materialgrey-skin .librevjs-volume-handle:before {
font-size:.9em;
top:-.2em;
left:-.2em;
width:1em;
height:1em
}
.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
width:6em;
left:-4em
}
.librevjs-libre-materialgrey-skin .librevjs-progress-control {
position:absolute;
left:0;
right:0;
width:auto;
font-size:.3em;
height:1em;
top:-1em;
-webkit-transition:all .4s;
-moz-transition:all .4s;
-o-transition:all .4s;
transition:all .4s
}
.librevjs-libre-materialgrey-skin:hover .librevjs-progress-control {
font-size:.9em;
-webkit-transition:all .2s;
-moz-transition:all .2s;
-o-transition:all .2s;
transition:all .2s
}
.librevjs-libre-materialgrey-skin .librevjs-progress-holder {
height:100%
}
.librevjs-libre-materialgrey-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialgrey-skin .librevjs-progress-holder .librevjs-load-progress {
position:absolute;
display:block;
height:100%;
margin:0;
padding:0;
left:0;
top:0
}

/* Personalización de barra de progreso a color plata */
.librevjs-libre-materialgrey-skin .librevjs-play-progress {
background: #9e9e9e url() -50% 0 repeat;
}
.librevjs-libre-materialgrey-skin .librevjs-load-progress {
background:#646464;
background:rgba(255,255,255,.4)
}
.librevjs-libre-materialgrey-skin .librevjs-seek-handle {
width:1.5em;
height:100%
}
.librevjs-libre-materialgrey-skin .librevjs-seek-handle:before {
padding-top:.1em
}
.librevjs-libre-materialgrey-skin .librevjs-time-controls {
font-size:1em;
font-weight: 700;/*mayor visibilidad*/
line-height:3em;
}
.librevjs-libre-materialgrey-skin .librevjs-current-time {
float:left
}
.librevjs-libre-materialgrey-skin .librevjs-duration {
float:left
}
.librevjs-libre-materialgrey-skin .librevjs-remaining-time {
display:none;
float:left
}
.librevjs-time-divider {
float:left;
line-height:3em
}
.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control {
width:3.8em;
cursor:pointer;
float:right
}
.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control:before {
content:"\e000"
}
.librevjs-libre-materialgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
content:"\e00b"
}

/*Centrado del button Play y personalizado*/
.librevjs-libre-materialgrey-skin .librevjs-big-play-button {
left: 50%;
top: 40%;
font-size: 10em;
display: block;
z-index: 2;
position: absolute;
width: 1em;
height: 1em;
margin-left: -0.5em;
margin-top: -0.5em;
text-align: center;
vertical-align: middle;
cursor: pointer;
opacity: 1;
color: #9e9e9e;
}
/* Hide if controls are disabled */
.librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-big-play-button {
display: none;
}
/* Hide when video starts playing */
.librevjs-libre-materialgrey-skin.librevjs-has-started .librevjs-big-play-button {
display: none;
}
/* Hide on mobile devices. Remove when we stop using native controls
   by default on mobile
*/
.librevjs-libre-materialgrey-skin.librevjs-using-native-controls .librevjs-big-play-button {
display: none;
}
.librevjs-libre-materialgrey-skin:hover .librevjs-big-play-button,
.librevjs-libre-materialgrey-skin .librevjs-big-play-button:focus {
color: rgb(115, 115, 115); /*color boton focus grey oscuro*/
}
.librevjs-libre-materialgrey-skin .librevjs-big-play-button:before {
content: "\e007";
font-family: LibreVideoJS;
/* In order to center the play icon vertically we need to set the line height
   to the same as the button height */

text-align: center /* Needed for IE8 */;
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
.librevjs-error .librevjs-big-play-button {
display: none;
}
/*END PERSONALIZAR BIG PLAY BUTTON*/
.librevjs-loading-spinner {
display:none;
position:absolute;
top:50%;
left:50%;
font-size:4em;
line-height:1;
width:1em;
height:1em;
margin-left:-.5em;
margin-top:-.5em;
opacity:.75;
-webkit-animation:spin 1.5s infinite linear;
-moz-animation:spin 1.5s infinite linear;
-o-animation:spin 1.5s infinite linear;
animation:spin 1.5s infinite linear
}
.librevjs-libre-materialgrey-skin .librevjs-loading-spinner:before {
content:"\e01e";
font-family:LibreVideoJS;
position:absolute;
top:0;
left:0;
width:1em;
height:1em;
text-align:center;
text-shadow:0 0 .1em #000
}
@-moz-keyframes spin {
0% {
   -moz-transform:rotate(0deg)
   }
100% {
   -moz-transform:rotate(359deg)
   }
}
@-webkit-keyframes spin {
0% {
   -webkit-transform:rotate(0deg)
   }
100% {
   -webkit-transform:rotate(359deg)
   }
}
@-o-keyframes spin {
0% {
   -o-transform:rotate(0deg)
   }
100% {
   -o-transform:rotate(359deg)
   }
}
@keyframes spin {
0% {
   transform:rotate(0deg)
   }
100% {
   transform:rotate(359deg)
   }
}
.librevjs-libre-materialgrey-skin .librevjs-menu-button {
float:right;
cursor:pointer
}
.librevjs-libre-materialgrey-skin .librevjs-menu {
display:none;
position:absolute;
bottom:0;
left:0;
width:0;
height:0;
margin-bottom:3em;
border-left:2em solid transparent;
border-right:2em solid transparent;
border-top:1.55em solid #000;
border-top-color:rgba(7,40,50,.5)
}
.librevjs-libre-materialgrey-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
display:block;
padding:0;
margin:0;
position:absolute;
width:10em;
bottom:1.5em;
max-height:15em;
overflow:auto;
left:-5em;
background-color:#07141e;
background-color:rgba(7,20,30,.7);
-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)
}
.librevjs-libre-materialgrey-skin .librevjs-menu-button:hover .librevjs-menu {
display:block
}
.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li {
list-style:none;
margin:0;
padding:.3em 0;
line-height:1.4em;
font-size:1.2em;
text-align:center;
text-transform:lowercase;
color: #ccc;
}

/*COLOR DE SELECCION DE SUBTIULOS*/
.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected {
color: #ffffff;
background-color: rgb(158, 158, 158);
}
.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected:hover {
outline: 0;
color: #fff;
background-color: #9e9e9e;
}
/*END COLOR SELECCION DE SUBTITULOS*/
.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-menu-title {
text-align:center;
text-transform:uppercase;
font-size:1em;
line-height:2em;
padding:0;
margin:0 0 .3em;
font-weight:700;
cursor:default
}
.librevjs-libre-materialgrey-skin .librevjs-subtitles-button:before {
content:"\e00c"
}
.librevjs-libre-materialgrey-skin .librevjs-captions-button:before {
content:"\e008"
}
.librevjs-libre-materialgrey-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialgrey-skin .librevjs-captions-button:hover .librevjs-control-content:before {
-webkit-box-shadow:0 0 1em #fff;
-moz-box-shadow:0 0 1em #fff;
box-shadow:0 0 1em #fff
}
.cliplibre-js {
background-color:#000;
position:relative;
padding:0;
font-size:10px;
vertical-align:middle;
font-weight:500;
font-style:normal;
font-family:Arial,sans-serif;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
.cliplibre-js .librevjs-tech {
position:absolute;
top:0;
left:0;
width:100%;
height:100%
}
.cliplibre-js:-moz-full-screen {
position:absolute
}
body.librevjs-full-window {
padding:0;
margin:0;
height:100%;
overflow-y:auto
}
.cliplibre-js.librevjs-fullscreen {
position:fixed;
overflow:hidden;
z-index:1000;
left:0;
top:0;
bottom:0;
right:0;
width:100%!important;
height:100%!important;
position:absolute;
}
.cliplibre-js:-webkit-full-screen {
width:100%!important;
height:100%!important
}
.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
cursor:none
}
.librevjs-poster {
background-repeat:no-repeat;
background-position:50% 50%;
background-size:contain;
cursor:pointer;
height:100%;
margin:0;
padding:0;
position:relative;
width:100%
}
.librevjs-poster img {
display:block;
margin:0 auto;
max-height:100%;
padding:0;
width:100%
}
.cliplibre-js.librevjs-using-native-controls .librevjs-poster {
display:none
}
.cliplibre-js .librevjs-text-track-display {
text-align:center;
position:absolute;
bottom:4em;
left:1em;
right:1em
}
.cliplibre-js .librevjs-text-track {
display:none;
font-size:1.5em;
text-align:center;
margin-bottom:.1em;
background-color:#000;
background-color:rgba(0,0,0,.6)
}
.cliplibre-js .librevjs-subtitles {
color:#fff
}
.cliplibre-js .librevjs-captions {
color:rgb(255, 237, 0);
background-color: rgba(2, 7, 11, 0.7);
}
.librevjs-tt-cue {
display:block
}
.librevjs-libre-materialgrey-skin .librevjs-hidden {
display:none
}
.librevjs-lock-showing {
display:block!important;
opacity:1;
visibility:visible
}
.no_html5 {
background: black none repeat scroll 0 0;
color: white;
height: 160px;
padding: 130px 10px 20px;
text-align: center;
}
/*title de resolucion | subtitles y Caption*/
.librevjs-libre-materialgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
color:#737373;
background-color: inherit;
}
.librevjs-libre-materialgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
color:#9e9e9e;
background-color: inherit;
}
/*Responsive*/
.cliplibre-js-responsive-container.librevjs-hd {
padding-top: 56.25%;
}
.cliplibre-js-responsive-container.librevjs-sd {
padding-top: 75%;
}
.cliplibre-js-responsive-container {
width: 100%;
position: relative;
}
.cliplibre-js-responsive-container .cliplibre-js {
height: 100% !important;
width: 100% !important;
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width: 600px){
 .cliplibre-js .librevjs-text-track{
 font-size: 1.2em;
 }
 .cliplibre-js .librevjs-text-track-display{
 bottom: 2em;
 }
}
@media screen and (max-width: 413px){
  .cliplibre-js {
    font-size:8px;
  }
}
@media screen and (max-width: 400px){
 .cliplibre-js .librevjs-text-track{
 font-size: 0.9em;
 }
 .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
 font-size: 5em;
 top: 45%;
 }
 .cliplibre-js .librevjs-text-track-display{
 bottom: 1em;
 }
}
@media screen and (max-width: 335px){
  .cliplibre-js {
    font-size:6px;
  }
}
@media screen and (max-width: 200px){
 .librevjs-libre-materialgrey-skin .librevjs-big-play-button	{
 top:35%;
 }
}
@media screen and (max-width: 150px){
 .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
 font-size: 3em;
 }
}
@media screen and (max-width: 90px){
 .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
 font-size: 2em;
 }
}