diff options
Diffstat (limited to 'librevideojs/css/librevideojs-material')
7 files changed, 0 insertions, 7000 deletions
diff --git a/librevideojs/css/librevideojs-material/libre-skin-blue.css b/librevideojs/css/librevideojs-material/libre-skin-blue.css deleted file mode 100644 index f5cdf77..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-blue.css +++ /dev/null @@ -1,656 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = blue -Version 1.2 -Escrito por Jesús Eduardo -*/ -.librevjs-libre-materialblue-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-materialblue-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-materialblue-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-materialblue-skin .librevjs-slider-handle { -width: 0; -height: 0; -} -.librevjs-libre-materialblue-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; -} - -/* control bar */ -.librevjs-libre-materialblue-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-materialblue-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-materialblue-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-materialblue-skin.librevjs-controls-disabled .librevjs-control-bar { -display:none -} -.librevjs-libre-materialblue-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none -} -@media \0screen { -.librevjs-libre-materialblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { -content:"" -} -} -.librevjs-libre-materialblue-skin .librevjs-control { -outline:0; -position:relative; -float:left; -text-align:center; -margin:0; -padding:0; -height:3em; -width:4em -} -.librevjs-libre-materialblue-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-materialblue-skin .librevjs-control:focus:before,.librevjs-libre-materialblue-skin .librevjs-control:hover:before { -color: #2196F3; -} -/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-materialblue-skin .librevjs-control:focus { -} -.librevjs-libre-materialblue-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-materialblue-skin .librevjs-play-control { -width:5em; -cursor:pointer; -color:rgb(33, 150, 244); -} -.librevjs-libre-materialblue-skin .librevjs-play-control:before { -content:"\e001" -} -.librevjs-libre-materialblue-skin .librevjs-play-control:hover:before { -color:#2980b9; /*color de play control al pasar el cursor*/ -} -.librevjs-libre-materialblue-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" -} -/*END Color y diseño de boton play control*/ -.librevjs-libre-materialblue-skin .librevjs-mute-control,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button { -cursor:pointer; -float:right -} -.librevjs-libre-materialblue-skin .librevjs-mute-control:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button:before { -content:"\e006" -} -.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before { -content:"\e003" -} -.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before { -content:"\e004" -} -.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before { -content:"\e005" -} -.librevjs-libre-materialblue-skin .librevjs-volume-control { -width:5em; -float:right -} -.librevjs-libre-materialblue-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 -} -.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em -} - -/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-materialblue-skin .librevjs-volume-level { -position: absolute; -top: 0; -left: 0; -height: 0.5em; -/* assuming volume starts at 1.0 */ - -width: 100%; -background: #2196F3 url() -50% 0 repeat; /*color de barra volumen*/ -} -/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-materialblue-skin .librevjs-volume-bar .librevjs-volume-handle { -width:.5em; -height:.5em -} -.librevjs-libre-materialblue-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em -} -.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { -width:6em; -left:-4em -} -.librevjs-libre-materialblue-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-materialblue-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-materialblue-skin .librevjs-progress-holder { -height:100% -} -.librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialblue-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 azul */ -.librevjs-libre-materialblue-skin .librevjs-play-progress { -background: #2196F3 url() -50% 0 repeat; -} -.librevjs-libre-materialblue-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) -} -.librevjs-libre-materialblue-skin .librevjs-seek-handle { -width:1.5em; -height:100% -} -.librevjs-libre-materialblue-skin .librevjs-seek-handle:before { -padding-top:.1em -} -.librevjs-libre-materialblue-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em; -} -.librevjs-libre-materialblue-skin .librevjs-current-time { -float:left -} -.librevjs-libre-materialblue-skin .librevjs-duration { -float:left -} -.librevjs-libre-materialblue-skin .librevjs-remaining-time { -display:none; -float:left -} -.librevjs-time-divider { -float:left; -line-height:3em -} -.librevjs-libre-materialblue-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right -} -.librevjs-libre-materialblue-skin .librevjs-fullscreen-control:before { -content:"\e000" -} -.librevjs-libre-materialblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { -content:"\e00b" -} - -/*Centrado del button Play y personalizado*/ -.librevjs-libre-materialblue-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: #2196F3; -} -/* Hide if controls are disabled */ -.librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; -} -/* Hide when video starts playing */ -.librevjs-libre-materialblue-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-materialblue-skin.librevjs-using-native-controls .librevjs-big-play-button { -display: none; -} -.librevjs-libre-materialblue-skin:hover .librevjs-big-play-button, -.librevjs-libre-materialblue-skin .librevjs-big-play-button:focus { -color: #0289f4; /*color boton focus*/ -} -.librevjs-libre-materialblue-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-materialblue-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-materialblue-skin .librevjs-menu-button { -float:right; -cursor:pointer -} -.librevjs-libre-materialblue-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-materialblue-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-materialblue-skin .librevjs-menu-button:hover .librevjs-menu { -display:block -} -.librevjs-libre-materialblue-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-materialblue-skin .librevjs-menu-button ul li.librevjs-selected { -color: #ffffff; -background-color: rgb(33, 150, 244); -} -.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:hover { -outline: 0; -color: #fff; -background-color: #2196F3; -} -/*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-materialblue-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-materialblue-skin .librevjs-subtitles-button:before { -content:"\e00c" -} -.librevjs-libre-materialblue-skin .librevjs-captions-button:before { -content:"\e008" -} -.librevjs-libre-materialblue-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialblue-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-materialblue-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-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ -color: rgb(33, 150, 244); -background-color: inherit; -} -.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ -color: rgb(11, 137, 237); -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-materialblue-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-materialblue-skin .librevjs-big-play-button { - top:35%; - } -} -@media screen and (max-width: 150px){ - .librevjs-libre-materialblue-skin .librevjs-big-play-button{ - font-size: 3em; - } -} -@media screen and (max-width: 90px){ - .librevjs-libre-materialblue-skin .librevjs-big-play-button{ - font-size: 2em; - } -} diff --git a/librevideojs/css/librevideojs-material/libre-skin-grey.css b/librevideojs/css/librevideojs-material/libre-skin-grey.css deleted file mode 100644 index cd74eef..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-grey.css +++ /dev/null @@ -1,656 +0,0 @@ -/*! -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; - } -} diff --git a/librevideojs/css/librevideojs-material/libre-skin-purple.css b/librevideojs/css/librevideojs-material/libre-skin-purple.css deleted file mode 100644 index 3eeb9d6..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-purple.css +++ /dev/null @@ -1,656 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = Purple -Version 1.2 -Escrito por Jesús Eduardo -*/ -.librevjs-libre-materialpurple-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-materialpurple-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-materialpurple-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-materialpurple-skin .librevjs-slider-handle { -width: 0; -height: 0; -} -.librevjs-libre-materialpurple-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; -} - -/* control bar */ -.librevjs-libre-materialpurple-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-materialpurple-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-materialpurple-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-materialpurple-skin.librevjs-controls-disabled .librevjs-control-bar { -display:none -} -.librevjs-libre-materialpurple-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none -} -@media \0screen { - .librevjs-libre-materialpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -.librevjs-libre-materialpurple-skin .librevjs-control { -outline:0; -position:relative; -float:left; -text-align:center; -margin:0; -padding:0; -height:3em; -width:4em -} -.librevjs-libre-materialpurple-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-materialpurple-skin .librevjs-control:focus:before,.librevjs-libre-materialpurple-skin .librevjs-control:hover:before { -color: #9c27b0; -} -/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-materialpurple-skin .librevjs-control:focus { -} -.librevjs-libre-materialpurple-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-materialpurple-skin .librevjs-play-control { -width:5em; -cursor:pointer; -color: rgb(156, 39, 176); -} -.librevjs-libre-materialpurple-skin .librevjs-play-control:before { -content:"\e001" -} -.librevjs-libre-materialpurple-skin .librevjs-play-control:hover:before { -color:#8e44ad; /*color de play control al pasar el cursor*/ -} -.librevjs-libre-materialpurple-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" -} -/*END Color y diseño de boton play control*/ -.librevjs-libre-materialpurple-skin .librevjs-mute-control,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button { -cursor:pointer; -float:right -} -.librevjs-libre-materialpurple-skin .librevjs-mute-control:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button:before { -content:"\e006" -} -.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before { -content:"\e003" -} -.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before { -content:"\e004" -} -.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before { -content:"\e005" -} -.librevjs-libre-materialpurple-skin .librevjs-volume-control { -width:5em; -float:right -} -.librevjs-libre-materialpurple-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 -} -.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em -} - -/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-materialpurple-skin .librevjs-volume-level { -position: absolute; -top: 0; -left: 0; -height: 0.5em; -/* assuming volume starts at 1.0 */ - -width: 100%; -background: #9c27b0 url() -50% 0 repeat; /*color de barra volumen*/ -} -/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-materialpurple-skin .librevjs-volume-bar .librevjs-volume-handle { -width:.5em; -height:.5em -} -.librevjs-libre-materialpurple-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em -} -.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { -width:6em; -left:-4em -} -.librevjs-libre-materialpurple-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-materialpurple-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-materialpurple-skin .librevjs-progress-holder { -height:100% -} -.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialpurple-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 purpura */ -.librevjs-libre-materialpurple-skin .librevjs-play-progress { -background: #9c27b0 url() -50% 0 repeat; -} -.librevjs-libre-materialpurple-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) -} -.librevjs-libre-materialpurple-skin .librevjs-seek-handle { -width:1.5em; -height:100% -} -.librevjs-libre-materialpurple-skin .librevjs-seek-handle:before { -padding-top:.1em -} -.librevjs-libre-materialpurple-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em; -} -.librevjs-libre-materialpurple-skin .librevjs-current-time { -float:left -} -.librevjs-libre-materialpurple-skin .librevjs-duration { -float:left -} -.librevjs-libre-materialpurple-skin .librevjs-remaining-time { -display:none; -float:left -} -.librevjs-time-divider { -float:left; -line-height:3em -} -.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right -} -.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control:before { -content:"\e000" -} -.librevjs-libre-materialpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { -content:"\e00b" -} - -/*Centrado del button Play y personalizado*/ -.librevjs-libre-materialpurple-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: #9c27b0; -} -/* Hide if controls are disabled */ -.librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; -} -/* Hide when video starts playing */ -.librevjs-libre-materialpurple-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-materialpurple-skin.librevjs-using-native-controls .librevjs-big-play-button { -display: none; -} -.librevjs-libre-materialpurple-skin:hover .librevjs-big-play-button, -.librevjs-libre-materialpurple-skin .librevjs-big-play-button:focus { -color: rgb(142, 68, 173); /*color boton focus purpura oscuro*/ -} -.librevjs-libre-materialpurple-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-materialpurple-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-materialpurple-skin .librevjs-menu-button { -float:right; -cursor:pointer; -} -.librevjs-libre-materialpurple-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-materialpurple-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-materialpurple-skin .librevjs-menu-button:hover .librevjs-menu { -display:block; -} -.librevjs-libre-materialpurple-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-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected { -color: #ffffff; -background-color: rgb(156, 39, 176); -} -.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover { -outline: 0; -color: #fff; -background-color: #9c27b0; -} -/*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-materialpurple-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-materialpurple-skin .librevjs-subtitles-button:before { -content:"\e00c" -} -.librevjs-libre-materialpurple-skin .librevjs-captions-button:before { -content:"\e008" -} -.librevjs-libre-materialpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialpurple-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-materialpurple-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-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ -color:#9c27b0; -background-color: inherit; -} -.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ -color:#8e44ad; -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-materialpurple-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-materialpurple-skin .librevjs-big-play-button { - top:35%; - } -} -@media screen and (max-width: 150px){ - .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ - font-size: 3em; - } -} -@media screen and (max-width: 90px){ - .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ - font-size: 2em; - } -} diff --git a/librevideojs/css/librevideojs-material/libre-skin-red.css b/librevideojs/css/librevideojs-material/libre-skin-red.css deleted file mode 100644 index 2a14676..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-red.css +++ /dev/null @@ -1,654 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = Red -Version 1.2 -Escrito por Jesús Eduardo -*/ -.librevjs-libre-materialred-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-materialred-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-materialred-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-materialred-skin .librevjs-slider-handle { -width: 0; -height: 0; -} -.librevjs-libre-materialred-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; -} - -/* control bar */ -.librevjs-libre-materialred-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-materialred-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-materialred-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-materialred-skin.librevjs-controls-disabled .librevjs-control-bar { -display:none -} -.librevjs-libre-materialred-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none -} -@media \0screen { - .librevjs-libre-materialred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -.librevjs-libre-materialred-skin .librevjs-control { -outline:0; -position:relative; -float:left; -text-align:center; -margin:0; -padding:0; -height:3em; -width:4em -} -.librevjs-libre-materialred-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-materialred-skin .librevjs-control:focus:before,.librevjs-libre-materialred-skin .librevjs-control:hover:before { -color: #f44336; -} -/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-materialred-skin .librevjs-control:focus { -} -.librevjs-libre-materialred-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-materialred-skin .librevjs-play-control { -width:5em; -cursor:pointer; -color: rgb(244, 67, 54); -} -.librevjs-libre-materialred-skin .librevjs-play-control:before { -content:"\e001" -} -.librevjs-libre-materialred-skin .librevjs-play-control:hover:before { -color:#f22e1f; /*color de play control al pasar el cursor*/ -} -.librevjs-libre-materialred-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" -} -/*END Color y diseño de boton play control*/ -.librevjs-libre-materialred-skin .librevjs-mute-control,.librevjs-libre-materialred-skin .librevjs-volume-menu-button { -cursor:pointer; -float:right -} -.librevjs-libre-materialred-skin .librevjs-mute-control:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button:before { -content:"\e006" -} -.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-0:before { -content:"\e003" -} -.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-1:before { -content:"\e004" -} -.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-2:before { -content:"\e005" -} -.librevjs-libre-materialred-skin .librevjs-volume-control { -width:5em; -float:right -} -.librevjs-libre-materialred-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 -} -.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em -} - -/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-materialred-skin .librevjs-volume-level { -position: absolute; -top: 0; -left: 0; -height: 0.5em; -/* assuming volume starts at 1.0 */ - -width: 100%; -background: #f44336 url() -50% 0 repeat; /*color de barra volumen*/ -} -/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-materialred-skin .librevjs-volume-bar .librevjs-volume-handle { -width:.5em; -height:.5em -} -.librevjs-libre-materialred-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em -} -.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { -width:6em; -left:-4em -} -.librevjs-libre-materialred-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-materialred-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-materialred-skin .librevjs-progress-holder { -height:100% -} -.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialred-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 rojo */ -.librevjs-libre-materialred-skin .librevjs-play-progress { -background: #f44336 url() -50% 0 repeat; -} -.librevjs-libre-materialred-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) -} -.librevjs-libre-materialred-skin .librevjs-seek-handle { -width:1.5em; -height:100% -} -.librevjs-libre-materialred-skin .librevjs-seek-handle:before { -padding-top:.1em -} -.librevjs-libre-materialred-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em -} -.librevjs-libre-materialred-skin .librevjs-current-time { -float:left -} -.librevjs-libre-materialred-skin .librevjs-duration { -float:left -} -.librevjs-libre-materialred-skin .librevjs-remaining-time { -display:none; -float:left -} -.librevjs-time-divider { -float:left; -line-height:3em -} -.librevjs-libre-materialred-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right -} -.librevjs-libre-materialred-skin .librevjs-fullscreen-control:before { -content:"\e000" -} -.librevjs-libre-materialred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { -content:"\e00b" -} - -/*Centrado del button Play y personalizado*/ -.librevjs-libre-materialred-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: #f44336; -} -/* Hide if controls are disabled */ -.librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; -} -/* Hide when video starts playing */ -.librevjs-libre-materialred-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-materialred-skin.librevjs-using-native-controls .librevjs-big-play-button { -display: none; -} -.librevjs-libre-materialred-skin:hover .librevjs-big-play-button, -.librevjs-libre-materialred-skin .librevjs-big-play-button:focus { -color: rgba(244, 67, 54, 0.89); /*color boton focus*/ -} -.librevjs-libre-materialred-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-materialred-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-materialred-skin .librevjs-menu-button { -float:right; -cursor:pointer -} -.librevjs-libre-materialred-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-materialred-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-materialred-skin .librevjs-menu-button:hover .librevjs-menu { -display:block -} -.librevjs-libre-materialred-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-materialred-skin .librevjs-menu-button ul li.librevjs-selected { -color: #ffffff; -background-color: rgb(244, 67, 54); -} -.librevjs-libre-materialred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:hover { -outline: 0; -color: #fff; -background-color: #f44336; -} -/*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-materialred-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-materialred-skin .librevjs-subtitles-button:before { -content:"\e00c" -} -.librevjs-libre-materialred-skin .librevjs-captions-button:before { -content:"\e008" -} -.librevjs-libre-materialred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialred-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-materialred-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-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ -color: rgb(246, 44, 30); -background-color: inherit; -} -.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ -color: rgb(244, 67, 54); -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-materialred-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-materialred-skin .librevjs-big-play-button { - top:35%; - } -} -@media screen and (max-width: 150px){ - .librevjs-libre-materialred-skin .librevjs-big-play-button{ - font-size: 3em; - } -} -@media screen and (max-width: 90px){ - .librevjs-libre-materialred-skin .librevjs-big-play-button{ - font-size: 2em; - } -} diff --git a/librevideojs/css/librevideojs-material/libre-skin-teal.css b/librevideojs/css/librevideojs-material/libre-skin-teal.css deleted file mode 100644 index d36a6ac..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-teal.css +++ /dev/null @@ -1,655 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = Teal -Version 1.2 -Escrito por Jesús Eduardo -*/ -.librevjs-libre-materialteal-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-materialteal-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-materialteal-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-materialteal-skin .librevjs-slider-handle { -width: 0; -height: 0; -} -.librevjs-libre-materialteal-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; -} - -/* control bar */ -.librevjs-libre-materialteal-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-materialteal-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-materialteal-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-materialteal-skin.librevjs-controls-disabled .librevjs-control-bar { -display:none -} -.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none -} -@media \0screen { - .librevjs-libre-materialteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -.librevjs-libre-materialteal-skin .librevjs-control { -outline:0; -position:relative; -float:left; -text-align:center; -margin:0; -padding:0; -height:3em; -width:4em -} -.librevjs-libre-materialteal-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-materialteal-skin .librevjs-control:focus:before,.librevjs-libre-materialteal-skin .librevjs-control:hover:before { -color: #1de9b6; -} -/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-materialteal-skin .librevjs-control:focus { -} -.librevjs-libre-materialteal-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-materialteal-skin .librevjs-play-control { -width:5em; -cursor:pointer; -color:rgb(29, 233, 182); -} -.librevjs-libre-materialteal-skin .librevjs-play-control:before { -content:"\e001" -} -.librevjs-libre-materialteal-skin .librevjs-play-control:hover:before { -color:#007c5d; /*color de play control al pasar el cursor*/ -} -.librevjs-libre-materialteal-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" -} -/*END Color y diseño de boton play control*/ -.librevjs-libre-materialteal-skin .librevjs-mute-control,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button { -cursor:pointer; -float:right -} -.librevjs-libre-materialteal-skin .librevjs-mute-control:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button:before { -content:"\e006" -} -.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before { -content:"\e003" -} -.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before { -content:"\e004" -} -.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before { -content:"\e005" -} -.librevjs-libre-materialteal-skin .librevjs-volume-control { -width:5em; -float:right -} -.librevjs-libre-materialteal-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 -} -.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em -} - -/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-materialteal-skin .librevjs-volume-level { -position: absolute; -top: 0; -left: 0; -height: 0.5em; -/* assuming volume starts at 1.0 */ - -width: 100%; -background: #1de9b6 url() -50% 0 repeat; -} -/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-materialteal-skin .librevjs-volume-bar .librevjs-volume-handle { -width:.5em; -height:.5em -} -.librevjs-libre-materialteal-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em; -} -.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { -width:6em; -left:-4em; -} -.librevjs-libre-materialteal-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-materialteal-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-materialteal-skin .librevjs-progress-holder { -height:100%; -} -.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialteal-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 azul */ -.librevjs-libre-materialteal-skin .librevjs-play-progress { -background: #1de9b6 url() -50% 0 repeat; -} -.librevjs-libre-materialteal-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) -} -.librevjs-libre-materialteal-skin .librevjs-seek-handle { -width:1.5em; -height:100% -} -.librevjs-libre-materialteal-skin .librevjs-seek-handle:before { -padding-top:.1em -} -.librevjs-libre-materialteal-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em -} -.librevjs-libre-materialteal-skin .librevjs-current-time { -float:left -} -.librevjs-libre-materialteal-skin .librevjs-duration { -float:left -} -.librevjs-libre-materialteal-skin .librevjs-remaining-time { -display:none; -float:left -} -.librevjs-time-divider { -float:left; -line-height:3em -} -.librevjs-libre-materialteal-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right -} -.librevjs-libre-materialteal-skin .librevjs-fullscreen-control:before { -content:"\e000" -} -.librevjs-libre-materialteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { -content:"\e00b" -} - -/*Centrado del button Play y personalizado*/ -.librevjs-libre-materialteal-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: #1abc9c; -} -/* Hide if controls are disabled */ -.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; -} -/* Hide when video starts playing */ -.librevjs-libre-materialteal-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-materialteal-skin.librevjs-using-native-controls .librevjs-big-play-button { -display: none; -} -.librevjs-libre-materialteal-skin:hover .librevjs-big-play-button, -.librevjs-libre-materialteal-skin .librevjs-big-play-button:focus { -color: #16a085; -} -.librevjs-libre-materialteal-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-materialteal-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-materialteal-skin .librevjs-menu-button { -float:right; -cursor:pointer; -} -.librevjs-libre-materialteal-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-materialteal-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-materialteal-skin .librevjs-menu-button:hover .librevjs-menu { -display:block; -} -.librevjs-libre-materialteal-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-materialteal-skin .librevjs-menu-button ul li.librevjs-selected { -color: rgb(1, 56, 47); -background-color: rgb(29, 233, 182); -} -.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:hover { -outline: 0; -color: #004d40; -background-color: #1de9b6; -} -/*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-materialteal-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-materialteal-skin .librevjs-subtitles-button:before { -content:"\e00c" -} -.librevjs-libre-materialteal-skin .librevjs-captions-button:before { -content:"\e008" -} -.librevjs-libre-materialteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialteal-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.8em; -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-materialteal-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-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ -color:rgb(26, 187, 156); -background-color: inherit; -} -.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ -color: rgb(29, 233, 182); -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-materialteal-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-materialteal-skin .librevjs-big-play-button { - top:35%; - } -} -@media screen and (max-width: 150px){ - .librevjs-libre-materialteal-skin .librevjs-big-play-button{ - font-size: 3em; - } -} -@media screen and (max-width: 90px){ - .librevjs-libre-materialteal-skin .librevjs-big-play-button{ - font-size: 2em; - } -} diff --git a/librevideojs/css/librevideojs-material/libre-skin-yellow.css b/librevideojs/css/librevideojs-material/libre-skin-yellow.css deleted file mode 100644 index 22b2b08..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-yellow.css +++ /dev/null @@ -1,654 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = Yellow -Version 1.2 -Escrito por Jesús Eduardo -*/ -.librevjs-libre-materialyellow-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-materialyellow-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-materialyellow-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-materialyellow-skin .librevjs-slider-handle { -width: 0; -height: 0; -} -.librevjs-libre-materialyellow-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; -} - -/* control bar */ -.librevjs-libre-materialyellow-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-materialyellow-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-materialyellow-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-materialyellow-skin.librevjs-controls-disabled .librevjs-control-bar { -display:none -} -.librevjs-libre-materialyellow-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none -} -@media \0screen { - .librevjs-libre-materialyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -.librevjs-libre-materialyellow-skin .librevjs-control { -outline:0; -position:relative; -float:left; -text-align:center; -margin:0; -padding:0; -height:3em; -width:4em -} -.librevjs-libre-materialyellow-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-materialyellow-skin .librevjs-control:focus:before,.librevjs-libre-materialyellow-skin .librevjs-control:hover:before { -color: #f1c40f; -} -/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-materialyellow-skin .librevjs-control:focus { -} -.librevjs-libre-materialyellow-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-materialyellow-skin .librevjs-play-control { -width:5em; -cursor:pointer; -color: rgb(241, 196, 14); -} -.librevjs-libre-materialyellow-skin .librevjs-play-control:before { -content:"\e001" -} -.librevjs-libre-materialyellow-skin .librevjs-play-control:hover:before { -color:#f39c12; /*color de play control al pasar el cursor*/ -} -.librevjs-libre-materialyellow-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" -} -/*END Color y diseño de boton play control*/ -.librevjs-libre-materialyellow-skin .librevjs-mute-control,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button { -cursor:pointer; -float:right -} -.librevjs-libre-materialyellow-skin .librevjs-mute-control:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button:before { -content:"\e006" -} -.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before { -content:"\e003" -} -.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before { -content:"\e004" -} -.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before { -content:"\e005" -} -.librevjs-libre-materialyellow-skin .librevjs-volume-control { -width:5em; -float:right -} -.librevjs-libre-materialyellow-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0; -} -.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em; -} - -/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-materialyellow-skin .librevjs-volume-level { -position: absolute; -top: 0; -left: 0; -height: 0.5em; -/* assuming volume starts at 1.0 */ - -width: 100%; -background: #f1c40f url() -50% 0 repeat; /*color de barra volumen*/ -} -/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-materialyellow-skin .librevjs-volume-bar .librevjs-volume-handle { -width:.5em; -height:.5em; -} -.librevjs-libre-materialyellow-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em -} -.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { -width:6em; -left:-4em -} -.librevjs-libre-materialyellow-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-materialyellow-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-materialyellow-skin .librevjs-progress-holder { -height:100% -} -.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialyellow-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 amarillo */ -.librevjs-libre-materialyellow-skin .librevjs-play-progress { -background: #f1c40f url() -50% 0 repeat; -} -.librevjs-libre-materialyellow-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4); -} -.librevjs-libre-materialyellow-skin .librevjs-seek-handle { -width:1.5em; -height:100%; -} -.librevjs-libre-materialyellow-skin .librevjs-seek-handle:before { -padding-top:.1em -} -.librevjs-libre-materialyellow-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em; -} -.librevjs-libre-materialyellow-skin .librevjs-current-time { -float:left -} -.librevjs-libre-materialyellow-skin .librevjs-duration { -float:left -} -.librevjs-libre-materialyellow-skin .librevjs-remaining-time { -display:none; -float:left; -} -.librevjs-time-divider { -float:left; -line-height:3em -} -.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right; -} -.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control:before { -content:"\e000" -} -.librevjs-libre-materialyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { -content:"\e00b" -} - -/*Centrado del button Play y personalizado*/ -.librevjs-libre-materialyellow-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: #f1c40f; -} -/* Hide if controls are disabled */ -.librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; -} -/* Hide when video starts playing */ -.librevjs-libre-materialyellow-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-materialyellow-skin.librevjs-using-native-controls .librevjs-big-play-button { -display: none; -} -.librevjs-libre-materialyellow-skin:hover .librevjs-big-play-button, -.librevjs-libre-materialyellow-skin .librevjs-big-play-button:focus { -color: rgb(244, 156, 18); /*color boton focus amarillo oscuro*/ -} -.librevjs-libre-materialyellow-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-materialyellow-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-materialyellow-skin .librevjs-menu-button { -float:right; -cursor:pointer; -} -.librevjs-libre-materialyellow-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-materialyellow-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-materialyellow-skin .librevjs-menu-button:hover .librevjs-menu { -display:block; -} -.librevjs-libre-materialyellow-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-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected { -color: #ffffff; -background-color: rgb(241, 196, 14); -} -.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover { -outline: 0; -color: #fff; - background-color: #f1c40f; -} -/*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-materialyellow-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-materialyellow-skin .librevjs-subtitles-button:before { -content:"\e00c" -} -.librevjs-libre-materialyellow-skin .librevjs-captions-button:before { -content:"\e008" -} -.librevjs-libre-materialyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialyellow-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-materialyellow-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-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ -color:#f1c40f; -background-color: inherit; -} -.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ -color:#f39c12; -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-materialyellow-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-materialyellow-skin .librevjs-big-play-button { - top:35%; - } -} -@media screen and (max-width: 150px){ - .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ - font-size: 3em; - } -} -@media screen and (max-width: 90px){ - .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ - font-size: 2em; - } -} diff --git a/librevideojs/css/librevideojs-material/master.css b/librevideojs/css/librevideojs-material/master.css deleted file mode 100644 index 8aaa213..0000000 --- a/librevideojs/css/librevideojs-material/master.css +++ /dev/null @@ -1,3069 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados -Version 1.4 -Escrito por Jesús Eduardo -*/ -/* SKIN -================================================================================ -The main class name for all skin-specific styles. To make your own skin, -replace all occurances of 'librevjs-default-skin' with a new name. Then add your new -skin name to your video tag instead of the default skin. -e.g. <video class="librevideo-js my-skin-name"> -*/ -/* Custom Icon Font --------------------------------------------------------------------------------- -The control icons are from a custom font. Each icon corresponds to a character -(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. -*/ -/* Universal fonts */ -@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"); -} -/* Skins -=========================================================================================================================*/ -/* Skin-Blue ------------------------------------------------------------------------------------------------------------*/ -.librevjs-libre-materialblue-skin { -color:#ccc; -background-color: inherit; -} - -/* Base UI Component Classes -------------------------------------------------------------------------------*/ -/* Slider - used for Volume bar and Seek bar */ -.librevjs-libre-materialblue-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-materialblue-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-materialblue-skin .librevjs-slider-handle { -width: 0; -height: 0; -} -.librevjs-libre-materialblue-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; -} - -/* Control Bar --------------------------------------------------------------------------------- -The default control bar that is a container for most of the controls. -*/ -.librevjs-libre-materialblue-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); -} -/* Show the control bar only once the video has started playing */ -.librevjs-libre-materialblue-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 -} -/* Hide the control bar when the video is playing and the user is inactive */ -.librevjs-libre-materialblue-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-materialblue-skin.librevjs-controls-disabled .librevjs-control-bar { -display:none -} -.librevjs-libre-materialblue-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none -} -@media \0screen { - .librevjs-libre-materialblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -/* General styles for individual controls. */ -.librevjs-libre-materialblue-skin .librevjs-control { -outline:0; -position:relative; -float:left; -text-align:center; -margin:0; -padding:0; -height:3em; -width:4em -} -/* FreeArt button icons: http://artlibre.org/licence/lal */ -.librevjs-libre-materialblue-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) -} -/* Replacement for focus outline */ -.librevjs-libre-materialblue-skin .librevjs-control:focus:before,.librevjs-libre-materialblue-skin .librevjs-control:hover:before { -color: #2196F3; -} -.librevjs-libre-materialblue-skin .librevjs-control:focus { - /* outline: 0; */ - /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ -} -/* Hide control text visually, but have it available for screenreaders */ -.librevjs-libre-materialblue-skin .librevjs-control-text { -border:0; -clip:rect(0 0 0 0); -height:1px; -margin:-1px; -overflow:hidden; -padding:0; -position:absolute; -width:1px -} - -/* Play/Pause --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialblue-skin .librevjs-play-control { -width:5em; -cursor:pointer; -color:rgb(33, 150, 244); -} -.librevjs-libre-materialblue-skin .librevjs-play-control:before { -content:"\e001" -} -.librevjs-libre-materialblue-skin .librevjs-play-control:hover:before { -color:#2980b9; /*color de play control al pasar el cursor*/ -} -.librevjs-libre-materialblue-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" -} -/* Volume/Mute --------------------------------------------------------------------------------- */ -.librevjs-libre-materialblue-skin .librevjs-mute-control,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button { -cursor:pointer; -float:right -} -.librevjs-libre-materialblue-skin .librevjs-mute-control:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button:before { -content:"\e006" -} -.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before { -content:"\e003" -} -.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before { -content:"\e004" -} -.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before { -content:"\e005" -} -.librevjs-libre-materialblue-skin .librevjs-volume-control { -width:5em; -float:right -} -.librevjs-libre-materialblue-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 -} -.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em -} - -/*Personalización del nivel de volumen*/ -.librevjs-libre-materialblue-skin .librevjs-volume-level { -position: absolute; -top: 0; -left: 0; -height: 0.5em; -/* assuming volume starts at 1.0 */ - -width: 100%; -background: #2196F3 url() -50% 0 repeat; -} -.librevjs-libre-materialblue-skin .librevjs-volume-bar .librevjs-volume-handle { -width:.5em; -height:.5em -} -.librevjs-libre-materialblue-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em; -} -.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { -width:6em; -left:-4em; -} - -/* Progress --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialblue-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-materialblue-skin:hover .librevjs-progress-control { -font-size:.9em; --webkit-transition:all .2s; --moz-transition:all .2s; --o-transition:all .2s; -transition:all .2s; -} -/* Box containing play and load progress. Also acts as seek scrubber. */ -.librevjs-libre-materialblue-skin .librevjs-progress-holder { -height:100%; -} -/* Progress Bars */ -.librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-load-progress { -position:absolute; -display:block; -height:100%; -margin:0; -padding:0; -left:0; -top:0 -} -.librevjs-libre-materialblue-skin .librevjs-play-progress { -background: #2196F3 url() -50% 0 repeat; -} -.librevjs-libre-materialblue-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) -} -.librevjs-libre-materialblue-skin .librevjs-seek-handle { -width:1.5em; -height:100% -} -.librevjs-libre-materialblue-skin .librevjs-seek-handle:before { -padding-top:.1em -} - -/* Time Display --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialblue-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em -} -.librevjs-libre-materialblue-skin .librevjs-current-time { -float:left -} -.librevjs-libre-materialblue-skin .librevjs-duration { -float:left -} -.librevjs-libre-materialblue-skin .librevjs-remaining-time { -display:none; -float:left -} - -/* Fullscreen --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialblue-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right -} -.librevjs-libre-materialblue-skin .librevjs-fullscreen-control:before { -content:"\e000" -} -/* Switch to the exit icon when the player is in fullscreen */ -.librevjs-libre-materialblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { -content:"\e00b" -} - -/* Big Play Button (play button at start) --------------------------------------------------------------------------------- -Positioning of the play button in the center or other corners can be done more -easily in the skin designer by LibreVideoJS FreeArts. -*/ -.librevjs-libre-materialblue-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: #2196F3; -} -/* Hide if controls are disabled */ -.librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; -} -/* Hide when video starts playing */ -.librevjs-libre-materialblue-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-materialblue-skin.librevjs-using-native-controls .librevjs-big-play-button { -display: none; -} -.librevjs-libre-materialblue-skin:hover .librevjs-big-play-button, -.librevjs-libre-materialblue-skin .librevjs-big-play-button:focus { -color: #0289f4; /*color boton focus*/ -} -.librevjs-libre-materialblue-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%; -} -/* Menu Buttons (Captions/Subtitles/etc.) --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialblue-skin .librevjs-menu-button { -float:right; -cursor:pointer; -} -.librevjs-libre-materialblue-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); -} -/* Button Pop-up Menu */ -.librevjs-libre-materialblue-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { -display:block; -padding:0; -margin:0; -position:absolute; -width:10em; -bottom:1.5em; -/* Same bottom as librevjs-menu border-top */ -max-height:15em; -overflow:auto; -left:-5em; -/* Width of menu - width of button / 2 */ -/* background-color-with-alpha */ -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-materialblue-skin .librevjs-menu-button:hover .librevjs-menu { -display:block; -} -.librevjs-libre-materialblue-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; -} - -/* Select color menu subtitles/captions */ -.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected { -color: rgb(11, 21, 42); -background-color: rgb(33, 150, 244); -} -.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:hover { -outline: 0; -color: rgb(11, 21, 42); -background-color: #2196F3; -} -/*End Select color menu subtitles/caption */ -.librevjs-libre-materialblue-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; -} -/* Subtitles Button */ -.librevjs-libre-materialblue-skin .librevjs-subtitles-button:before { -content:"\e00c" -} -/* Captions Button */ -.librevjs-libre-materialblue-skin .librevjs-captions-button:before { -content:"\e008" -} -/* Replacement for focus outline */ -.librevjs-libre-materialblue-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialblue-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; -} -/* Hide disabled or unsupported controls */ -.librevjs-libre-materialblue-skin .librevjs-hidden { -display:none -} - -/*Title Resolution | subtitles and Caption*/ -.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ -color:rgb(33, 150, 244); -background-color: inherit; -} -.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ -color: rgb(11, 137, 237); -background-color: inherit; -} - -@media screen and (max-width: 400px){ - .librevjs-libre-materialblue-skin .librevjs-big-play-button{ - font-size: 5em; - top: 45%; - } -} -@media screen and (max-width: 200px){ - .librevjs-libre-materialblue-skin .librevjs-big-play-button { - top:35%; - } -} -@media screen and (max-width: 150px){ - .librevjs-libre-materialblue-skin .librevjs-big-play-button{ - font-size: 3em; - } -} -@media screen and (max-width: 90px){ - .librevjs-libre-materialblue-skin .librevjs-big-play-button{ - font-size: 2em; - } -} - -/* Skin-Grey -------------------------------------------------------------------------------------------------------*/ -.librevjs-libre-materialgrey-skin { -color:#ccc; -background-color: inherit; -} -/* Base UI Component Classes --------------------------------------------------------------------------------- -/* Slider - used for Volume bar and Seek bar */ -.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 --------------------------------------------------------------------------------- -The default control bar that is a container for most of the controls. -*/ -.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); -} -/* Show the control bar only once the video has started playing */ -.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 -} -/* Hide the control bar when the video is playing and the user is inactive */ -.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:"" - } -} -/* General styles for individual controls. */ -.librevjs-libre-materialgrey-skin .librevjs-control { -outline:0; -position:relative; -float:left; -text-align:center; -margin:0; -padding:0; -height:3em; -width:4em -} -/* FreeArt button icons: http://artlibre.org/licence/lal */ -.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) -} -/* Replacement for focus outline */ -.librevjs-libre-materialgrey-skin .librevjs-control:focus:before,.librevjs-libre-materialgrey-skin .librevjs-control:hover:before { -color: #9e9e9e; -} -.librevjs-libre-materialgrey-skin .librevjs-control:focus { - /* outline: 0; */ - /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ -} -/* Hide control text visually, but have it available for screenreaders */ -.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 -} -/* Play/Pause --------------------------------------------------------------------------------- -*/ -.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" -} -/* Volume/Mute --------------------------------------------------------------------------------- */ -.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 -} - -/*Personalización del 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; -} -.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; -} -/* Progress --------------------------------------------------------------------------------- -*/ -.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; -} -/* Box containing play and load progress. Also acts as seek scrubber. */ -.librevjs-libre-materialgrey-skin .librevjs-progress-holder { -height:100%; -} -/* Progress Bars */ -.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 -} -.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 -} -/* Time Display --------------------------------------------------------------------------------- -*/ -.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 -} -/* Fullscreen --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right -} -.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control:before { -content:"\e000" -} -/* Switch to the exit icon when the player is in fullscreen */ -.librevjs-libre-materialgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { -content:"\e00b" -} - -/* Big Play Button (play button at start) --------------------------------------------------------------------------------- -Positioning of the play button in the center or other corners can be done more -easily in the skin designer by LibreVideoJS FreeArts. -*/ -.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%; -} -/* Menu Buttons (Captions/Subtitles/etc.) --------------------------------------------------------------------------------- -*/ -.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); -} -/* Button Pop-up Menu */ -.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; -/* Same bottom as librevjs-menu border-top */ -max-height:15em; -overflow:auto; -left:-5em; -/* Width of menu - width of button / 2 */ -/* background-color-with-alpha */ -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; -} - -/* Select color menu subtitles/captions */ -.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected { -color: #fff; -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 Select color menu subtitles/caption */ -.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; -} -/* Subtitles Button */ -.librevjs-libre-materialgrey-skin .librevjs-subtitles-button:before { -content:"\e00c" -} -/* Captions Button */ -.librevjs-libre-materialgrey-skin .librevjs-captions-button:before { -content:"\e008" -} -/* Replacement for focus outline */ -.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; -} -/* Hide disabled or unsupported controls */ -.librevjs-libre-materialgrey-skin .librevjs-hidden { -display:none -} -/*Title Resolution | subtitles and 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; -} - -@media screen and (max-width: 400px){ - .librevjs-libre-materialgrey-skin .librevjs-big-play-button{ - font-size: 5em; - top: 45%; - } -} -@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; - } -} - -/* Skin-Purple -----------------------------------------------------------------------------------------------------*/ -.librevjs-libre-materialpurple-skin { -color:#ccc; -background-color: inherit; -} -/* Base UI Component Classes --------------------------------------------------------------------------------- -/* Slider - used for Volume bar and Seek bar */ -.librevjs-libre-materialpurple-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-materialpurple-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-materialpurple-skin .librevjs-slider-handle { -width: 0; -height: 0; -} -.librevjs-libre-materialpurple-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; -} - -/* Control Bar --------------------------------------------------------------------------------- -The default control bar that is a container for most of the controls. -*/ -.librevjs-libre-materialpurple-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); -} -/* Show the control bar only once the video has started playing */ -.librevjs-libre-materialpurple-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 -} -/* Hide the control bar when the video is playing and the user is inactive */ -.librevjs-libre-materialpurple-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-materialpurple-skin.librevjs-controls-disabled .librevjs-control-bar { -display:none -} -.librevjs-libre-materialpurple-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none -} -@media \0screen { - .librevjs-libre-materialpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -/* General styles for individual controls. */ -.librevjs-libre-materialpurple-skin .librevjs-control { -outline:0; -position:relative; -float:left; -text-align:center; -margin:0; -padding:0; -height:3em; -width:4em -} -/* FreeArt button icons: http://artlibre.org/licence/lal */ -.librevjs-libre-materialpurple-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) -} -/* Replacement for focus outline */ -.librevjs-libre-materialpurple-skin .librevjs-control:focus:before,.librevjs-libre-materialpurple-skin .librevjs-control:hover:before { -color: #9c27b0; -} -.librevjs-libre-materialpurple-skin .librevjs-control:focus { - /* outline: 0; */ - /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ -} -/* Hide control text visually, but have it available for screenreaders */ -.librevjs-libre-materialpurple-skin .librevjs-control-text { -border:0; -clip:rect(0 0 0 0); -height:1px; -margin:-1px; -overflow:hidden; -padding:0; -position:absolute; -width:1px -} -/* Play/Pause --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialpurple-skin .librevjs-play-control { -width:5em; -cursor:pointer; -color:rgb(156, 39, 176); -} -.librevjs-libre-materialpurple-skin .librevjs-play-control:before { -content:"\e001" -} -.librevjs-libre-materialpurple-skin .librevjs-play-control:hover:before { -color:#8e44ad; /*color de play control al pasar el cursor*/ -} -.librevjs-libre-materialpurple-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" -} -/* Volume/Mute --------------------------------------------------------------------------------- */ -.librevjs-libre-materialpurple-skin .librevjs-mute-control,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button { -cursor:pointer; -float:right -} -.librevjs-libre-materialpurple-skin .librevjs-mute-control:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button:before { -content:"\e006" -} -.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before { -content:"\e003" -} -.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before { -content:"\e004" -} -.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before { -content:"\e005" -} -.librevjs-libre-materialpurple-skin .librevjs-volume-control { -width:5em; -float:right -} -.librevjs-libre-materialpurple-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 -} -.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em -} - -/*Personalización del nivel de volumen*/ -.librevjs-libre-materialpurple-skin .librevjs-volume-level { -position: absolute; -top: 0; -left: 0; -height: 0.5em; -/* assuming volume starts at 1.0 */ - -width: 100%; -background: #9c27b0 url() -50% 0 repeat; -} -.librevjs-libre-materialpurple-skin .librevjs-volume-bar .librevjs-volume-handle { -width:.5em; -height:.5em -} -.librevjs-libre-materialpurple-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em; -} -.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { -width:6em; -left:-4em; -} -/* Progress --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialpurple-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-materialpurple-skin:hover .librevjs-progress-control { -font-size:.9em; --webkit-transition:all .2s; --moz-transition:all .2s; --o-transition:all .2s; -transition:all .2s; -} -/* Box containing play and load progress. Also acts as seek scrubber. */ -.librevjs-libre-materialpurple-skin .librevjs-progress-holder { -height:100%; -} -/* Progress Bars */ -.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-load-progress { -position:absolute; -display:block; -height:100%; -margin:0; -padding:0; -left:0; -top:0 -} -.librevjs-libre-materialpurple-skin .librevjs-play-progress { -background: #9c27b0 url() -50% 0 repeat; -} -.librevjs-libre-materialpurple-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) -} -.librevjs-libre-materialpurple-skin .librevjs-seek-handle { -width:1.5em; -height:100% -} -.librevjs-libre-materialpurple-skin .librevjs-seek-handle:before { -padding-top:.1em -} -/* Time Display --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialpurple-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em -} -.librevjs-libre-materialpurple-skin .librevjs-current-time { -float:left -} -.librevjs-libre-materialpurple-skin .librevjs-duration { -float:left -} -.librevjs-libre-materialpurple-skin .librevjs-remaining-time { -display:none; -float:left -} - -/* Fullscreen --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right -} -.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control:before { -content:"\e000" -} -/* Switch to the exit icon when the player is in fullscreen */ -.librevjs-libre-materialpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { -content:"\e00b" -} - -/* Big Play Button (play button at start) --------------------------------------------------------------------------------- -Positioning of the play button in the center or other corners can be done more -easily in the skin designer by LibreVideoJS FreeArts. -*/ -.librevjs-libre-materialpurple-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: #9c27b0; -} -/* Hide if controls are disabled */ -.librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; -} -/* Hide when video starts playing */ -.librevjs-libre-materialpurple-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-materialpurple-skin.librevjs-using-native-controls .librevjs-big-play-button { -display: none; -} -.librevjs-libre-materialpurple-skin:hover .librevjs-big-play-button, -.librevjs-libre-materialpurple-skin .librevjs-big-play-button:focus { -color: rgb(142, 68, 173); /*color boton focus purpura oscuro*/ -} -.librevjs-libre-materialpurple-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%; -} -/* Menu Buttons (Captions/Subtitles/etc.) --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialpurple-skin .librevjs-menu-button { -float:right; -cursor:pointer; -} -.librevjs-libre-materialpurple-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); -} -/* Button Pop-up Menu */ -.librevjs-libre-materialpurple-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { -display:block; -padding:0; -margin:0; -position:absolute; -width:10em; -bottom:1.5em; -/* Same bottom as librevjs-menu border-top */ -max-height:15em; -overflow:auto; -left:-5em; -/* Width of menu - width of button / 2 */ -/* background-color-with-alpha */ -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-materialpurple-skin .librevjs-menu-button:hover .librevjs-menu { -display:block; -} -.librevjs-libre-materialpurple-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; -} - -/* Select color menu subtitles/captions */ -.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected { -color: #fff; -background-color: rgb(156, 39, 176); -} -.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover { -outline: 0; -color: #fff; -background-color: #9c27b0; -} -/*End Select color menu subtitles/caption */ -.librevjs-libre-materialpurple-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; -} -/* Subtitles Button */ -.librevjs-libre-materialpurple-skin .librevjs-subtitles-button:before { -content:"\e00c" -} -/* Captions Button */ -.librevjs-libre-materialpurple-skin .librevjs-captions-button:before { -content:"\e008" -} -/* Replacement for focus outline */ -.librevjs-libre-materialpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialpurple-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; -} -/* Hide disabled or unsupported controls */ -.librevjs-libre-materialpurple-skin .librevjs-hidden { -display:none -} -/*Title Resolution | subtitles and Caption*/ -.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ -color: #9c27b0; -background-color: inherit; -} -.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ -color: #8e44ad; -background-color: inherit; -} - -@media screen and (max-width: 400px){ - .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ - font-size: 5em; - top: 45%; - } -} -@media screen and (max-width: 200px){ - .librevjs-libre-materialpurple-skin .librevjs-big-play-button { - top:35%; - } -} -@media screen and (max-width: 150px){ - .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ - font-size: 3em; - } -} -@media screen and (max-width: 90px){ - .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ - font-size: 2em; - } -} - -/* Skin-Red --------------------------------------------------------------------------------------------------------*/ -.librevjs-libre-materialred-skin { -color:#ccc; -background-color: inherit; -} - -/* Base UI Component Classes --------------------------------------------------------------------------------- -/* Slider - used for Volume bar and Seek bar */ -.librevjs-libre-materialred-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-materialred-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-materialred-skin .librevjs-slider-handle { -width: 0; -height: 0; -} -.librevjs-libre-materialred-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; -} - -/* Control Bar --------------------------------------------------------------------------------- -The default control bar that is a container for most of the controls. -*/ -.librevjs-libre-materialred-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); -} -/* Show the control bar only once the video has started playing */ -.librevjs-libre-materialred-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 -} -/* Hide the control bar when the video is playing and the user is inactive */ -.librevjs-libre-materialred-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-materialred-skin.librevjs-controls-disabled .librevjs-control-bar { -display:none -} -.librevjs-libre-materialred-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none -} -@media \0screen { - .librevjs-libre-materialred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -/* General styles for individual controls. */ -.librevjs-libre-materialred-skin .librevjs-control { -outline:0; -position:relative; -float:left; -text-align:center; -margin:0; -padding:0; -height:3em; -width:4em -} -/* FreeArt button icons: http://artlibre.org/licence/lal */ -.librevjs-libre-materialred-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) -} -/* Replacement for focus outline */ -.librevjs-libre-materialred-skin .librevjs-control:focus:before,.librevjs-libre-materialred-skin .librevjs-control:hover:before { -color: #f44336; -} -.librevjs-libre-materialred-skin .librevjs-control:focus { - /* outline: 0; */ - /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ -} -/* Hide control text visually, but have it available for screenreaders */ -.librevjs-libre-materialred-skin .librevjs-control-text { -border:0; -clip:rect(0 0 0 0); -height:1px; -margin:-1px; -overflow:hidden; -padding:0; -position:absolute; -width:1px -} -/* Play/Pause --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialred-skin .librevjs-play-control { -width:5em; -cursor:pointer; -color:rgb(244, 67, 54); -} -.librevjs-libre-materialred-skin .librevjs-play-control:before { -content:"\e001" -} -.librevjs-libre-materialred-skin .librevjs-play-control:hover:before { -color:#f22e1f; /*color de play control al pasar el cursor*/ -} -.librevjs-libre-materialred-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" -} -/* Volume/Mute --------------------------------------------------------------------------------- */ -.librevjs-libre-materialred-skin .librevjs-mute-control,.librevjs-libre-materialred-skin .librevjs-volume-menu-button { -cursor:pointer; -float:right -} -.librevjs-libre-materialred-skin .librevjs-mute-control:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button:before { -content:"\e006" -} -.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-0:before { -content:"\e003" -} -.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-1:before { -content:"\e004" -} -.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-2:before { -content:"\e005" -} -.librevjs-libre-materialred-skin .librevjs-volume-control { -width:5em; -float:right -} -.librevjs-libre-materialred-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 -} -.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em -} - -/*Personalización del nivel de volumen*/ -.librevjs-libre-materialred-skin .librevjs-volume-level { -position: absolute; -top: 0; -left: 0; -height: 0.5em; -/* assuming volume starts at 1.0 */ - -width: 100%; -background: #f44336 url() -50% 0 repeat; -} -.librevjs-libre-materialred-skin .librevjs-volume-bar .librevjs-volume-handle { -width:.5em; -height:.5em -} -.librevjs-libre-materialred-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em; -} -.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { -width:6em; -left:-4em; -} -/* Progress --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialred-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-materialred-skin:hover .librevjs-progress-control { -font-size:.9em; --webkit-transition:all .2s; --moz-transition:all .2s; --o-transition:all .2s; -transition:all .2s; -} -/* Box containing play and load progress. Also acts as seek scrubber. */ -.librevjs-libre-materialred-skin .librevjs-progress-holder { -height:100%; -} -/* Progress Bars */ -.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-load-progress { -position:absolute; -display:block; -height:100%; -margin:0; -padding:0; -left:0; -top:0 -} -.librevjs-libre-materialred-skin .librevjs-play-progress { -background: #f44336 url() -50% 0 repeat; -} -.librevjs-libre-materialred-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) -} -.librevjs-libre-materialred-skin .librevjs-seek-handle { -width:1.5em; -height:100% -} -.librevjs-libre-materialred-skin .librevjs-seek-handle:before { -padding-top:.1em -} -/* Time Display --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialred-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em -} -.librevjs-libre-materialred-skin .librevjs-current-time { -float:left -} -.librevjs-libre-materialred-skin .librevjs-duration { -float:left -} -.librevjs-libre-materialred-skin .librevjs-remaining-time { -display:none; -float:left -} -/* Fullscreen --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialred-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right -} -.librevjs-libre-materialred-skin .librevjs-fullscreen-control:before { -content:"\e000" -} -/* Switch to the exit icon when the player is in fullscreen */ -.librevjs-libre-materialred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { -content:"\e00b" -} - -/* Big Play Button (play button at start) --------------------------------------------------------------------------------- -Positioning of the play button in the center or other corners can be done more -easily in the skin designer by LibreVideoJS FreeArts. -*/ -.librevjs-libre-materialred-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: #f44336; -} -/* Hide if controls are disabled */ -.librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; -} -/* Hide when video starts playing */ -.librevjs-libre-materialred-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-materialred-skin.librevjs-using-native-controls .librevjs-big-play-button { -display: none; -} -.librevjs-libre-materialred-skin:hover .librevjs-big-play-button, -.librevjs-libre-materialred-skin .librevjs-big-play-button:focus { -color: rgba(244, 67, 54, 0.89); /*color boton focus*/ -} -.librevjs-libre-materialred-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%; -} -/* Menu Buttons (Captions/Subtitles/etc.) --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialred-skin .librevjs-menu-button { -float:right; -cursor:pointer; -} -.librevjs-libre-materialred-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); -} -/* Button Pop-up Menu */ -.librevjs-libre-materialred-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; -/* Same bottom as librevjs-menu border-top */ -overflow:auto; -left:-5em; -/* Width of menu - width of button / 2 */ -/* background-color-with-alpha */ -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-materialred-skin .librevjs-menu-button:hover .librevjs-menu { -display:block; -} -.librevjs-libre-materialred-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; -} - -/* Select color menu subtitles/captions */ -.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected { -color: #fff; -background-color: rgb(244, 67, 54); -} -.librevjs-libre-materialred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:hover { -outline: 0; -color: #fff; -background-color: #f44336; -} -/*End Select color menu subtitles/caption */ -.librevjs-libre-materialred-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; -} -/* Subtitles Button */ -.librevjs-libre-materialred-skin .librevjs-subtitles-button:before { -content:"\e00c" -} -/* Captions Button */ -.librevjs-libre-materialred-skin .librevjs-captions-button:before { -content:"\e008" -} -/* Replacement for focus outline */ -.librevjs-libre-materialred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialred-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; -} -/* Hide disabled or unsupported controls */ -.librevjs-libre-materialred-skin .librevjs-hidden { -display:none -} -/*Title Resolution | subtitles and Caption*/ -.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ -color: rgb(246, 44, 30); -background-color: inherit; -} -.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ -color: rgb(244, 67, 54); -background-color: inherit; -} - -@media screen and (max-width: 400px){ - .librevjs-libre-materialred-skin .librevjs-big-play-button{ - font-size: 5em; - top: 45%; - } -} -@media screen and (max-width: 200px){ - .librevjs-libre-materialred-skin .librevjs-big-play-button { - top:35%; - } -} -@media screen and (max-width: 150px){ - .librevjs-libre-materialred-skin .librevjs-big-play-button{ - font-size: 3em; - } -} -@media screen and (max-width: 90px){ - .librevjs-libre-materialred-skin .librevjs-big-play-button{ - font-size: 2em; - } -} - -/* Skin-Teal -------------------------------------------------------------------------------------------------------*/ -.librevjs-libre-materialteal-skin { -color:#ccc; -background-color: inherit; -} -/* Base UI Component Classes --------------------------------------------------------------------------------- -/* Slider - used for Volume bar and Seek bar */ -.librevjs-libre-materialteal-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-materialteal-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-materialteal-skin .librevjs-slider-handle { -width: 0; -height: 0; -} -.librevjs-libre-materialteal-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; -} - -/* Control Bar --------------------------------------------------------------------------------- -The default control bar that is a container for most of the controls. -*/ -.librevjs-libre-materialteal-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); -} -/* Show the control bar only once the video has started playing */ -.librevjs-libre-materialteal-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 -} -/* Hide the control bar when the video is playing and the user is inactive */ -.librevjs-libre-materialteal-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-materialteal-skin.librevjs-controls-disabled .librevjs-control-bar { -display:none -} -.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none -} -@media \0screen { - .librevjs-libre-materialteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -/* General styles for individual controls. */ -.librevjs-libre-materialteal-skin .librevjs-control { -outline:0; -position:relative; -float:left; -text-align:center; -margin:0; -padding:0; -height:3em; -width:4em -} -/* FreeArt button icons: http://artlibre.org/licence/lal */ -.librevjs-libre-materialteal-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) -} -/* Replacement for focus outline */ -.librevjs-libre-materialteal-skin .librevjs-control:focus:before,.librevjs-libre-materialteal-skin .librevjs-control:hover:before { -color: #1de9b6; -} -.librevjs-libre-materialteal-skin .librevjs-control:focus { - /* outline: 0; */ - /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ -} -/* Hide control text visually, but have it available for screenreaders */ -.librevjs-libre-materialteal-skin .librevjs-control-text { -border:0; -clip:rect(0 0 0 0); -height:1px; -margin:-1px; -overflow:hidden; -padding:0; -position:absolute; -width:1px -} -/* Play/Pause --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialteal-skin .librevjs-play-control { -width:5em; -cursor:pointer; -color:rgb(29, 233, 182); -} -.librevjs-libre-materialteal-skin .librevjs-play-control:before { -content:"\e001" -} -.librevjs-libre-materialteal-skin .librevjs-play-control:hover:before { -color:#007c5d; /*color de play control al pasar el cursor*/ -} -.librevjs-libre-materialteal-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" -} -/* Volume/Mute --------------------------------------------------------------------------------- */ -.librevjs-libre-materialteal-skin .librevjs-mute-control,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button { -cursor:pointer; -float:right -} -.librevjs-libre-materialteal-skin .librevjs-mute-control:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button:before { -content:"\e006" -} -.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before { -content:"\e003" -} -.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before { -content:"\e004" -} -.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before { -content:"\e005" -} -.librevjs-libre-materialteal-skin .librevjs-volume-control { -width:5em; -float:right -} -.librevjs-libre-materialteal-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 -} -.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em -} - -/*Personalización del nivel de volumen*/ -.librevjs-libre-materialteal-skin .librevjs-volume-level { -position: absolute; -top: 0; -left: 0; -height: 0.5em; -/* assuming volume starts at 1.0 */ - -width: 100%; -background: #1de9b6 url() -50% 0 repeat; -} -.librevjs-libre-materialteal-skin .librevjs-volume-bar .librevjs-volume-handle { -width:.5em; -height:.5em -} -.librevjs-libre-materialteal-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em; -} -.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { -width:6em; -left:-4em; -} -/* Progress --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialteal-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-materialteal-skin:hover .librevjs-progress-control { -font-size:.9em; --webkit-transition:all .2s; --moz-transition:all .2s; --o-transition:all .2s; -transition:all .2s; -} -/* Box containing play and load progress. Also acts as seek scrubber. */ -.librevjs-libre-materialteal-skin .librevjs-progress-holder { -height:100%; -} -/* Progress Bars */ -.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-load-progress { -position:absolute; -display:block; -height:100%; -margin:0; -padding:0; -left:0; -top:0 -} -.librevjs-libre-materialteal-skin .librevjs-play-progress { -background: #1de9b6 url() -50% 0 repeat; -} -.librevjs-libre-materialteal-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) -} -.librevjs-libre-materialteal-skin .librevjs-seek-handle { -width:1.5em; -height:100% -} -.librevjs-libre-materialteal-skin .librevjs-seek-handle:before { -padding-top:.1em -} -/* Time Display --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialteal-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em -} -.librevjs-libre-materialteal-skin .librevjs-current-time { -float:left -} -.librevjs-libre-materialteal-skin .librevjs-duration { -float:left -} -.librevjs-libre-materialteal-skin .librevjs-remaining-time { -display:none; -float:left -} - -/* Fullscreen --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialteal-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right -} -.librevjs-libre-materialteal-skin .librevjs-fullscreen-control:before { -content:"\e000" -} -/* Switch to the exit icon when the player is in fullscreen */ -.librevjs-libre-materialteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { -content:"\e00b" -} - -/* Big Play Button (play button at start) --------------------------------------------------------------------------------- -Positioning of the play button in the center or other corners can be done more -easily in the skin designer by LibreVideoJS FreeArts. -*/ -.librevjs-libre-materialteal-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: #1abc9c; -} -/* Hide if controls are disabled */ -.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; -} -/* Hide when video starts playing */ -.librevjs-libre-materialteal-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-materialteal-skin.librevjs-using-native-controls .librevjs-big-play-button { -display: none; -} -.librevjs-libre-materialteal-skin:hover .librevjs-big-play-button, -.librevjs-libre-materialteal-skin .librevjs-big-play-button:focus { -color: #16a085; -} -.librevjs-libre-materialteal-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%; -} - -/* Menu Buttons (Captions/Subtitles/etc.) --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialteal-skin .librevjs-menu-button { -float:right; -cursor:pointer; -} -.librevjs-libre-materialteal-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); -} -/* Button Pop-up Menu */ -.librevjs-libre-materialteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { -display:block; -padding:0; -margin:0; -position:absolute; -width:10em; -bottom:1.5em; -/* Same bottom as librevjs-menu border-top */ -max-height:15em; -overflow:auto; -left:-5em; -/* Width of menu - width of button / 2 */ -/* background-color-with-alpha */ -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-materialteal-skin .librevjs-menu-button:hover .librevjs-menu { -display:block; -} -.librevjs-libre-materialteal-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; -} - -/* Select color menu subtitles/captions */ -.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected { -color: rgb(1, 56, 47); -background-color: rgb(29, 233, 182); -} -.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:hover { -outline: 0; -color: #004d40; -background-color: #1de9b6; -} -/*End Select color menu subtitles/caption */ -.librevjs-libre-materialteal-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; -} -/* Subtitles Button */ -.librevjs-libre-materialteal-skin .librevjs-subtitles-button:before { -content:"\e00c" -} -/* Captions Button */ -.librevjs-libre-materialteal-skin .librevjs-captions-button:before { -content:"\e008" -} -/* Replacement for focus outline */ -.librevjs-libre-materialteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialteal-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; -} -/* Hide disabled or unsupported controls */ -.librevjs-libre-materialteal-skin .librevjs-hidden { -display:none -} -/*Title Resolution | subtitles and Caption*/ -.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ -color:rgb(26, 187, 156); -background-color: inherit; -} -.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ -color: rgb(29, 233, 182); -background-color: inherit; -} - -@media screen and (max-width: 400px){ - .librevjs-libre-materialteal-skin .librevjs-big-play-button{ - font-size: 5em; - top: 45%; - } -} -@media screen and (max-width: 200px){ - .librevjs-libre-materialteal-skin .librevjs-big-play-button { - top:35%; - } -} -@media screen and (max-width: 150px){ - .librevjs-libre-materialteal-skin .librevjs-big-play-button{ - font-size: 3em; - } -} -@media screen and (max-width: 90px){ - .librevjs-libre-materialteal-skin .librevjs-big-play-button{ - font-size: 2em; - } -} - -/* Skin-Yellow -----------------------------------------------------------------------------------------------------*/ -.librevjs-libre-materialyellow-skin { -color:#ccc; -background-color: inherit; -} -/* Base UI Component Classes --------------------------------------------------------------------------------- -/* Slider - used for Volume bar and Seek bar */ -.librevjs-libre-materialyellow-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-materialyellow-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-materialyellow-skin .librevjs-slider-handle { -width: 0; -height: 0; -} -.librevjs-libre-materialyellow-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; -} - -/* Control Bar --------------------------------------------------------------------------------- -The default control bar that is a container for most of the controls. -*/ -.librevjs-libre-materialyellow-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); -} -/* Show the control bar only once the video has started playing */ -.librevjs-libre-materialyellow-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 -} -/* Hide the control bar when the video is playing and the user is inactive */ -.librevjs-libre-materialyellow-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-materialyellow-skin.librevjs-controls-disabled .librevjs-control-bar { -display:none -} -.librevjs-libre-materialyellow-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none -} -@media \0screen { - .librevjs-libre-materialyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -/* General styles for individual controls. */ -.librevjs-libre-materialyellow-skin .librevjs-control { -outline:0; -position:relative; -float:left; -text-align:center; -margin:0; -padding:0; -height:3em; -width:4em -} -/* FreeArt button icons: http://artlibre.org/licence/lal */ -.librevjs-libre-materialyellow-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) -} -/* Replacement for focus outline */ -.librevjs-libre-materialyellow-skin .librevjs-control:focus:before,.librevjs-libre-materialyellow-skin .librevjs-control:hover:before { -color: #f1c40f; -} -.librevjs-libre-materialyellow-skin .librevjs-control:focus { - /* outline: 0; */ - /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ -} -/* Hide control text visually, but have it available for screenreaders */ -.librevjs-libre-materialyellow-skin .librevjs-control-text { -border:0; -clip:rect(0 0 0 0); -height:1px; -margin:-1px; -overflow:hidden; -padding:0; -position:absolute; -width:1px -} -/* Play/Pause --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialyellow-skin .librevjs-play-control { -width:5em; -cursor:pointer; -color:rgb(241, 196, 14); -} -.librevjs-libre-materialyellow-skin .librevjs-play-control:before { -content:"\e001" -} -.librevjs-libre-materialyellow-skin .librevjs-play-control:hover:before { -color:#f39c12; /*color de play control al pasar el cursor*/ -} -.librevjs-libre-materialyellow-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" -} -/* Volume/Mute --------------------------------------------------------------------------------- */ -.librevjs-libre-materialyellow-skin .librevjs-mute-control,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button { -cursor:pointer; -float:right -} -.librevjs-libre-materialyellow-skin .librevjs-mute-control:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button:before { -content:"\e006" -} -.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before { -content:"\e003" -} -.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before { -content:"\e004" -} -.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before { -content:"\e005" -} -.librevjs-libre-materialyellow-skin .librevjs-volume-control { -width:5em; -float:right -} -.librevjs-libre-materialyellow-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 -} -.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em -} - -/*Personalización del nivel de volumen*/ -.librevjs-libre-materialyellow-skin .librevjs-volume-level { -position: absolute; -top: 0; -left: 0; -height: 0.5em; -/* assuming volume starts at 1.0 */ - -width: 100%; -background: #f1c40f url() -50% 0 repeat; -} -.librevjs-libre-materialyellow-skin .librevjs-volume-bar .librevjs-volume-handle { -width:.5em; -height:.5em -} -.librevjs-libre-materialyellow-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em; -} -.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { -width:6em; -left:-4em; -} -/* Progress --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialyellow-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-materialyellow-skin:hover .librevjs-progress-control { -font-size:.9em; --webkit-transition:all .2s; --moz-transition:all .2s; --o-transition:all .2s; -transition:all .2s; -} -/* Box containing play and load progress. Also acts as seek scrubber. */ -.librevjs-libre-materialyellow-skin .librevjs-progress-holder { -height:100%; -} -/* Progress Bars */ -.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-load-progress { -position:absolute; -display:block; -height:100%; -margin:0; -padding:0; -left:0; -top:0 -} -.librevjs-libre-materialyellow-skin .librevjs-play-progress { -background: #f1c40f url() -50% 0 repeat; -} -.librevjs-libre-materialyellow-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) -} -.librevjs-libre-materialyellow-skin .librevjs-seek-handle { -width:1.5em; -height:100% -} -.librevjs-libre-materialyellow-skin .librevjs-seek-handle:before { -padding-top:.1em -} -/* Time Display --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialyellow-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em -} -.librevjs-libre-materialyellow-skin .librevjs-current-time { -float:left -} -.librevjs-libre-materialyellow-skin .librevjs-duration { -float:left -} -.librevjs-libre-materialyellow-skin .librevjs-remaining-time { -display:none; -float:left -} - -/* Fullscreen --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right -} -.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control:before { -content:"\e000" -} -/* Switch to the exit icon when the player is in fullscreen */ -.librevjs-libre-materialyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { -content:"\e00b" -} - -/* Big Play Button (play button at start) --------------------------------------------------------------------------------- -Positioning of the play button in the center or other corners can be done more -easily in the skin designer by LibreVideoJS FreeArts. -*/ -.librevjs-libre-materialyellow-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: #f1c40f; -} -/* Hide if controls are disabled */ -.librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; -} -/* Hide when video starts playing */ -.librevjs-libre-materialyellow-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-materialyellow-skin.librevjs-using-native-controls .librevjs-big-play-button { -display: none; -} -.librevjs-libre-materialyellow-skin:hover .librevjs-big-play-button, -.librevjs-libre-materialyellow-skin .librevjs-big-play-button:focus { -color: rgb(244, 156, 18); /*color boton focus amarillo oscuro*/ -} -.librevjs-libre-materialyellow-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%; -} - -/* Menu Buttons (Captions/Subtitles/etc.) --------------------------------------------------------------------------------- -*/ -.librevjs-libre-materialyellow-skin .librevjs-menu-button { -float:right; -cursor:pointer; -} -.librevjs-libre-materialyellow-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); -} -/* Button Pop-up Menu */ -.librevjs-libre-materialyellow-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { -display:block; -padding:0; -margin:0; -position:absolute; -width:10em; -bottom:1.5em; -/* Same bottom as librevjs-menu border-top */ -max-height:15em; -overflow:auto; -left:-5em; -/* Width of menu - width of button / 2 */ -/* background-color-with-alpha */ -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-materialyellow-skin .librevjs-menu-button:hover .librevjs-menu { -display:block; -} -.librevjs-libre-materialyellow-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; -} - -/* Select color menu subtitles/captions */ -.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected { -color: #fff; -background-color: rgb(241, 196, 14); -} -.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover { -outline: 0; -color: #fff; -background-color: #f1c40f; -} -/*End Select color menu subtitles/caption */ -.librevjs-libre-materialyellow-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; -} -/* Subtitles Button */ -.librevjs-libre-materialyellow-skin .librevjs-subtitles-button:before { -content:"\e00c" -} -/* Captions Button */ -.librevjs-libre-materialyellow-skin .librevjs-captions-button:before { -content:"\e008" -} -/* Replacement for focus outline */ -.librevjs-libre-materialyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialyellow-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; -} -/* Hide disabled or unsupported controls */ -.librevjs-libre-materialyellow-skin .librevjs-hidden { -display:none -} -/*Title Resolution | subtitles and Caption*/ -.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ -color: #f1c40f; -background-color: inherit; -} -.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ -color: #f39c12; -background-color: inherit; -} - -@media screen and (max-width: 400px){ - .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ - font-size: 5em; - top: 45%; - } -} -@media screen and (max-width: 200px){ - .librevjs-libre-materialyellow-skin .librevjs-big-play-button { - top:35%; - } -} -@media screen and (max-width: 150px){ - .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ - font-size: 3em; - } -} -@media screen and (max-width: 90px){ - .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ - font-size: 2em; - } -} - -/* Global Styles -==============================================================================*/ -/* Global Time-Display */ -.librevjs-time-divider { -float:left; -line-height:3em -} -/* Global Big-Play-Button-(play-button-at-start) */ -.librevjs-error .librevjs-big-play-button { -display: none; -} -/* Global Loading Spinner */ -.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-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) - } -} -/* -REQUIRED STYLES (be careful overriding) -================================================================================ -When loading the player, the video tag is replaced with a DIV, -that will hold the video tag or object tag for other playback methods. -The div contains the video playback element (HTML5) and controls, -and sets the width and height of the video. -** If you want to add some kind of border/padding (e.g. a frame), or special -positioning, use another containing element. Otherwise you risk messing up -control positioning and full window mode. ** -*/ -.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 -} -/* Playback technology elements expand to the width/height of the containing div <video> */ -.cliplibre-js .librevjs-tech { -position:absolute; -top:0; -left:0; -width:100%; -height:100% -} -.cliplibre-js:-moz-full-screen { -position:absolute -} -/* Fullscreen Styles */ -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 -} -/* Poster Styles */ -.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% -} -/* Hide the poster when native controls are used otherwise it covers them */ -.cliplibre-js.librevjs-using-native-controls .librevjs-poster { -display:none -} -/* Text Track Styles */ -/* Overall track holder for both captions and subtitles */ -.cliplibre-js .librevjs-text-track-display { -text-align:center; -position:absolute; -bottom:4em; -left:1em; -right:1em -} -/* Individual tracks */ -.cliplibre-js .librevjs-text-track { -display:none; -font-size:1.7em; -text-align:center; -margin-bottom:.1em; -/* Transparent black background, or fallback to all black (oldIE) */ -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 -} -/* Global Hide disabled or unsupported controls */ -.librevjs-lock-showing { -display:block!important; -opacity:1; -visibility:visible -} -/* Opctional Styles No support HTML5*/ -.no_html5 { -background: black none repeat scroll 0 0; -color: white; -height: 160px; -padding: 130px 10px 20px; -text-align: center; -} -/* Global 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; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 1em; - } -} -@media screen and (max-width: 335px){ - .cliplibre-js { - font-size:6px; - } -} |