diff options
Diffstat (limited to 'librevideojs')
| -rw-r--r-- | librevideojs/css/librevideojs-material/libre-skin-blue.css | 656 | ||||
| -rw-r--r-- | librevideojs/css/librevideojs-material/libre-skin-grey.css | 656 | ||||
| -rw-r--r-- | librevideojs/css/librevideojs-material/libre-skin-purple.css | 656 | ||||
| -rw-r--r-- | librevideojs/css/librevideojs-material/libre-skin-red.css | 654 | ||||
| -rw-r--r-- | librevideojs/css/librevideojs-material/libre-skin-teal.css | 655 | ||||
| -rw-r--r-- | librevideojs/css/librevideojs-material/libre-skin-yellow.css | 654 | ||||
| -rw-r--r-- | librevideojs/css/librevideojs-material/master.css | 3069 | ||||
| -rw-r--r-- | librevideojs/js/cliplibrejs.dev.js | 514 | ||||
| -rw-r--r-- | librevideojs/selector/video-quality-selector.css | 34 | ||||
| -rw-r--r-- | librevideojs/selector/video-quality-selector.js | 439 |
10 files changed, 511 insertions, 7476 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; - } -} diff --git a/librevideojs/js/cliplibrejs.dev.js b/librevideojs/js/cliplibrejs.dev.js index d779226..1361b40 100644 --- a/librevideojs/js/cliplibrejs.dev.js +++ b/librevideojs/js/cliplibrejs.dev.js @@ -6,7 +6,7 @@ * @licstart The following is the entire license notice for the * JavaScript code in this page. * - * Copyleft 2016 Jesús Eduardo + * Copyleft 2016 Jesus Eduardo * * The JavaScript code in this page is free software: you can * redistribute it and/or modify it under the terms of the GNU @@ -66,7 +66,6 @@ var librevjs = function(id, options, ready){ if (ready) { librevjs.players[id].ready(ready); } - return librevjs.players[id]; // Otherwise get element for ID @@ -6305,5 +6304,514 @@ if (document.readyState === 'complete') { // You have to wait at least once in case this script is loaded after your video in the DOM (weird behavior only with minified version) librevjs.autoSetupTimeout(1); librevjs.plugin = function(name, init){ - librevjs.Player.prototype[name] = init; +librevjs.Player.prototype[name] = init; }; +/* Selector Quality +@base: https://github.com/dominic-p/videojs-resolution-selector +================================================================================ */ +(function(_V_) { + /*********************************************************************************** + * Define some helper functions + ***********************************************************************************/ + var methods = { + /** + * Utility function for merging 2 objects recursively. It treats + * arrays like plain objects and it relies on a for...in loop which will + * break if the Object prototype is messed with. + * + * @param (object) destination The object to modify and return + * @param (object) source The object to use to overwrite the first + * object + * + * @returns (object) The modified first object is returned + */ + extend : function(destination, source){ + for (var prop in source){ + // Sanity check + if (!source.hasOwnProperty(prop)){continue;} + + // Enable recursive (deep) object extension + if (typeof source[prop] == 'object' && null !== source[prop]) { + destination[prop] = methods.extend( destination[prop] || {}, source[prop] ); + } else { + destination[prop] = source[prop]; + } + } + return destination; + }, + + /** + * In a future version, this can be made more intelligent, + * but for now, we'll just add a "p" at the end if we are passed + * numbers. + * + * @param (string) res The resolution to make a label for + * + * @returns (string) The label text string + */ + res_label : function(res){ + return (/^\d+$/.test(res)) ? res + 'p' : res; + }, + matchResolution: function(resStack, res){ + }, + + /** + * returns a dummy object that implements the basic get/set + * functionality of the Cookies library. Used in the case where + * the Cookies library is not present + */ + buildCookiesDummy: function(){ + return{ + get: function(key){ + return ""; + }, + set: function(key, val){ + return false; + } + }; + } + }; + + /*********************************************************************************** + * Setup our resolution menu items + ***********************************************************************************/ + _V_.ResolutionMenuItem = _V_.MenuItem.extend({ + + /** @constructor */ + init : function(player, options){ + + // Modify options for parent MenuItem class's init. + options.label = methods.res_label(options.res); + options.selected = (options.res.toString() === player.getCurrentRes().toString()); + + // Call the parent constructor + _V_.MenuItem.call(this, player, options); + + // Store the resolution as a call property + this.resolution = options.res; + + // Register our click handler + this.on('click', this.onClick); + + // Toggle the selected class whenever the resolution changes + player.on('changeRes', _V_.bind(this, function(){ + if (this.resolution == player.getCurrentRes()){ + this.selected(true); + } else { + this.selected(false); + } + })); + } + }); + + // Handle clicks on the menu items + _V_.ResolutionMenuItem.prototype.onClick = function(){ + var player = this.player(), + video_el = player.el().firstChild, + current_time = player.currentTime(), + is_paused = player.paused(), + button_nodes = player.controlBar.resolutionSelector.el().firstChild.children, + button_node_count = button_nodes.length; + + // Do nothing if we aren't changing resolutions + if (player.getCurrentRes() == this.resolution){return;} + + // Make sure the loadedmetadata event will fire + if ('none' == video_el.preload) {video_el.preload = 'metadata';} + + // Change the source and make sure we don't start the video over + player.src( player.availableRes[this.resolution]).one('loadedmetadata', function() { + player.currentTime(current_time); + if (!is_paused) {player.play();} + }); + + // Save the newly selected resolution in our player options property + player.currentRes = this.resolution; + + // Update the button text + while (button_node_count > 0){ + button_node_count--; + if ('librevjs-current-res' == button_nodes[button_node_count].className){ + button_nodes[button_node_count].innerHTML = methods.res_label(this.resolution); + break; + } + } + + // Update the classes to reflect the currently selected resolution + player.trigger('changeRes'); + }; + + /*********************************************************************************** + * Setup our resolution menu title item + ***********************************************************************************/ + _V_.ResolutionTitleMenuItem = _V_.MenuItem.extend({ + + init : function(player, options){ + + // Call the parent constructor + _V_.MenuItem.call(this, player, options); + + // No click handler for the menu title + this.off('click'); + } + }); + + /*********************************************************************************** + * Define our resolution selector button + ***********************************************************************************/ + _V_.ResolutionSelector = _V_.MenuButton.extend({ + + /** @constructor */ + init : function(player, options) { + + // Add our list of available resolutions to the player object + player.availableRes = options.available_res; + + // Call the parent constructor + _V_.MenuButton.call(this, player, options); + } + }); + + // Create a menu item for each available resolution + _V_.ResolutionSelector.prototype.createItems = function(){ + + var player = this.player(), + items = [], + current_res; + + // Add the menu title item + items.push( new _V_.ResolutionTitleMenuItem(player,{ + el : _V_.Component.prototype.createEl('li',{ + className : 'librevjs-menu-title librevjs-res-menu-title', + innerHTML : 'Calidad' + }) + })); + + // Add an item for each available resolution + for (current_res in player.availableRes){ + // Don't add an item for the length attribute + if ('length' == current_res) {continue;} + items.push( new _V_.ResolutionMenuItem(player,{ + res : current_res + })); + } + + // Sort the available resolutions in descending order + items.sort(function(a,b){ + if (typeof a.resolution == 'undefined'){ + return -1; + } else { + return parseInt(b.resolution) - parseInt(a.resolution); + } + }); + return items; + }; + + /*********************************************************************************** + * Register the plugin with cliplibrejs, main plugin function + ***********************************************************************************/ + _V_.plugin('resolutionSelector', function(options){ + + // Only enable the plugin on HTML5 videos + if (!this.el().firstChild.canPlayType){return;} + + var player = this, + sources = player.options().sources, + i = sources.length, + j, + found_type, + + // Override default options with those provided + settings = methods.extend({ + + default_res : '', // (string) The resolution that should be selected by default ( '480' or '480,1080,240' ) + force_types : false // (array) List of media types. If passed, we need to have source for each type in each resolution or that resolution will not be an option + + }, options || {}), + + available_res = {length : 0}, + current_res, + resolutionSelector, + + // Split default resolutions if set and valid, otherwise default to an empty array + default_resolutions = (settings.default_res && typeof settings.default_res == 'string') ? settings.default_res.split( ',' ) : [], + cookieNamespace = 'cliplibrejs.resolutionSelector', + resCookieName = cookieNamespace + '.res', + cookieRef = (typeof(Cookies) === "function") ? Cookies : methods.buildCookiesDummy(); + + // Get all of the available resoloutions + while (i > 0){ + + i--; + + // Skip sources that don't have data-res attributes + if (!sources[i]['data-res']){continue;} + current_res = sources[i]['data-res']; + if (typeof available_res[current_res] !== 'object'){ + available_res[current_res] = []; + available_res.length++; + } + available_res[current_res].push( sources[i] ); + } + + // Check for forced types + if (settings.force_types){ + // Loop through all available resoultions + for (current_res in available_res){ + // Don't count the length property as a resolution + if ('length' == current_res){continue;} + i = settings.force_types.length; + // For each resolution loop through the required types + while (i > 0){ + + i--; + + j = available_res[current_res].length; + found_types = 0; + + // For each required type loop through the available sources to check if its there + while (j > 0){ + + j--; + + if (settings.force_types[i] === available_res[current_res][j].type){ + found_types++; + } + } // End loop through current resolution sources + + if (found_types < settings.force_types.length){ + delete available_res[current_res]; + available_res.length--; + break; + } + } // End loop through required types + } // End loop through resolutions + } + + // Make sure we have at least 2 available resolutions before we add the button + if (available_res.length < 2) {return;} + + var resCookie = cookieRef.get(resCookieName) + if (resCookie) { + // rebuild the default_resolutions stack with the cookie's resolution on top + default_resolutions = [resCookie].concat(default_resolutions); + } + + // Loop through the choosen default resolutions if there were any + for (i = 0; i < default_resolutions.length; i++){ + // Set the video to start out with the first available default res + if (available_res[default_resolutions[i]]){ + player.src(available_res[default_resolutions[i]]); + player.currentRes = default_resolutions[i]; + break; + } + } + + // Helper function to get the current resolution + player.getCurrentRes = function(){ + if (typeof player.currentRes !== 'undefined'){ + return player.currentRes; + } else { + try { + return res = player.options().sources[0]['data-res']; + } catch(e) { + return ''; + } + } + }; + + // Get the started resolution + current_res = player.getCurrentRes(); + + if (current_res) {current_res = methods.res_label(current_res);} + + // Add the resolution selector button + resolutionSelector = new _V_.ResolutionSelector(player,{ + el : _V_.Component.prototype.createEl( null,{ + className : 'librevjs-res-button librevjs-menu-button librevjs-control', + innerHTML : '<div class="librevjs-control-content"><span class="librevjs-current-res">' + (current_res || 'Quality') + '</span></div>', + role : 'button', + 'aria-live' : 'polite', // let the screen reader user know that the text of the button may change + tabIndex : 0 + }), + available_res : available_res + }); + + // Attach an event to remember previous res selection via cookie + this.on('changeRes', function(){ + cookieRef.set(resCookieName, player.getCurrentRes()); + }); + + // Attach an event to update player.src once on loadedmetadata + // if a resolution was previously set + this.one('loadedmetadata', function(){ + var resCookie = cookieRef.get(resCookieName); + + if (resCookie) { + player.src(player.availableRes[resCookie]); + player.currentRes = resCookie; + player.trigger( 'changeRes' ); + } + }); + + // Add the button to the control bar object and the DOM + player.controlBar.resolutionSelector = player.controlBar.addChild( resolutionSelector ); + }); +})(cliplibrejs); + +/* Hotkeys for LibreVideoJS +@base: https://github.com/ctd1500/videojs-hotkeys +================================================================================ */ +(function(window, cliplibrejs){ + 'use strict'; + + window['cliplibrejs_hotkeys'] = {version: "0.2.4"}; + var hotkeys = function(options){ + var player = this; + var def_options = { + volumeStep: 0.1, + seekStep: 5, + enableMute: true, + enableFullscreen: true, + enableNumbers: true, + }; + options = options || {}; + + // Set default player tabindex to handle keydown and doubleclick events + if (!player.el().hasAttribute('tabIndex')){ + player.el().setAttribute('tabIndex', '-1'); + } + + player.on('play', function(){ + // Fix allowing the YouTube plugin to have hotkey support. + var ifblocker = player.el().querySelector('.iframeblocker'); + if (ifblocker && + ifblocker.style.display == ""){ + ifblocker.style.display = "block"; + ifblocker.style.bottom = "39px"; + } + }); + + var keyDown = function keyDown(event){ + var ewhich = event.which; + var volumeStep = options.volumeStep || def_options.volumeStep; + var seekStep = options.seekStep || def_options.seekStep; + var enableMute = options.enableMute || def_options.enableMute; + var enableFull = options.enableFullscreen || def_options.enableFullscreen; + var enableNumbers = options.enableNumbers || def_options.enableNumbers; + + // When controls are disabled, hotkeys will be disabled as well + if (player.controls()){ + + // Don't catch keys if any control buttons are focused + var activeEl = document.activeElement; + if (activeEl == player.el() || + activeEl == player.el().querySelector('.librevjs-tech') || + activeEl == player.el().querySelector('.librevjs-control-bar') || + activeEl == player.el().querySelector('.iframeblocker')){ + + // Spacebar toggles play/pause + if (ewhich === 32){ + event.preventDefault(); + if (this.player_.paused()){ + this.player_.play(); + } else { + this.player_.pause(); + } + } + + // Seeking with the left/right arrow keys + else if (ewhich === 37){ // Left Arrow + event.preventDefault(); + var curTime = player.currentTime() - seekStep; + + // The flash player tech will allow you to seek into negative + // numbers and break the seekbar, so try to prevent that. + if (player.currentTime() <= seekStep){ + curTime = 0; + } + player.currentTime(curTime); + } else if (ewhich === 39){ // Right Arrow + event.preventDefault(); + player.currentTime(player.currentTime() + seekStep); + } + + // Volume control with the up/down arrow keys + else if (ewhich === 40){ // Down Arrow + event.preventDefault(); + player.volume(player.volume() - volumeStep); + } else if (ewhich === 38){ // Up Arrow + event.preventDefault(); + player.volume(player.volume() + volumeStep); + } + + // Toggle Mute with the M key + else if (ewhich === 77){ + if (enableMute) { + if (player.muted()){ + player.muted(false); + } else { + player.muted(true); + } + } + } + + // Toggle Fullscreen with the F key + else if (ewhich === 70){ + if (enableFull){ + if (this.player_.isFullScreen){ + this.player_.cancelFullScreen(); + } else{ + this.player_.requestFullScreen(); + } + } + } + + // Number keys from 0-9 skip to a percentage of the video. 0 is 0% and 9 is 90% + else if ((ewhich > 47 && ewhich < 59) || (ewhich > 95 && ewhich < 106)){ + if (enableNumbers){ + var sub = 48; + if (ewhich > 95){ + sub = 96; + } + var number = ewhich - sub; + event.preventDefault(); + player.currentTime(player.duration() * number * 0.1); + } + } + } + } + }; + + var doubleClick = function doubleClick(event){ + var enableFull = options.enableFullscreen || def_options.enableFullscreen; + + // When controls are disabled, hotkeys will be disabled as well + if (player.controls()){ + + // Don't catch clicks if any control buttons are focused + var activeEl = event.relatedTarget || event.toElement || document.activeElement; + if (activeEl == player.el() || + activeEl == player.el().querySelector('.librevjs-tech') || + activeEl == player.el().querySelector('.iframeblocker')){ + + if (enableFull){ + if (this.player_.isFullScreen){ + this.player_.cancelFullScreen(); + } else{ + this.player_.requestFullScreen(); + } + } + } + } + }; + + player.on('keydown', keyDown); + player.on('dblclick', doubleClick); + + return this; + }; + + cliplibrejs.plugin('hotkeys', hotkeys); + +})(window, window.cliplibrejs); diff --git a/librevideojs/selector/video-quality-selector.css b/librevideojs/selector/video-quality-selector.css deleted file mode 100644 index 112c1fb..0000000 --- a/librevideojs/selector/video-quality-selector.css +++ /dev/null @@ -1,34 +0,0 @@ -/*! -LibreVideoJS Selector -Version 1.4 -Escrito por Jesús Eduardo -*/ -@charset "utf-8"; -/* -You are free to style the button however you wish. I plan to use -an icon from my site's own icon font to make it more visible. These -are just basic styles to make it look ok with plain text. -*/ - -/* Position the button */ -.librevjs-res-button { - font-weight: bold; - float: right; - line-height: 3em; -} - -/* Don't show hover effects on title */ -ul li.librevjs-menu-title.librevjs-res-menu-title:hover { - cursor: default; - background-color: transparent; - -moz-box-shadow: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -/* Needed to keep text visible in video.js 4.9 */ -.librevjs-res-button .librevjs-control-text { - width: auto; - height: auto; - clip: auto; -} diff --git a/librevideojs/selector/video-quality-selector.js b/librevideojs/selector/video-quality-selector.js deleted file mode 100644 index 263db14..0000000 --- a/librevideojs/selector/video-quality-selector.js +++ /dev/null @@ -1,439 +0,0 @@ -/*! - * @source: here! - * @base: https://github.com/dominic-p/videojs-resolution-selector - * - * @licstart The following is the entire license notice for the - * JavaScript code in this page. - * - * Copyleft 2016 Jesus Estupiñán Medina - * - * The JavaScript code in this page is free software: you can - * redistribute it and/or modify it under the terms of the GNU - * General Public License (GNU GPL) as published by the Free Software - * Foundation, either version 3 of the License, or (at your option) - * any later version. The code is distributed WITHOUT ANY WARRANTY; - * without even the implied warranty of MERCHANTABILITY or FITNESS - * FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. - * - * As additional permission under GNU GPL version 3 section 7, you - * may distribute non-source (e.g., minimized or compacted) forms of - * that code without the copy of the GNU GPL normally required by - * section 4, provided you include this license notice and a URL - * through which recipients can access the Corresponding Source. - * - * @licend The above is the entire license notice - * for the JavaScript code in this page. - * -*/ -/** - * LibreVideoJS Resolution Selector - * - * This plugin for LibreVideo.js adds a resolution selector option - * to the toolbar. Usage: - * - * <video> - * <source data-res="480" src="..." /> - * <source data-res="240" src="..." /> - * </video> - */ - - (function( _V_ ) { - - /*********************************************************************************** - * Define some helper functions - ***********************************************************************************/ - var methods = { - - /** - * Utility function for merging 2 objects recursively. It treats - * arrays like plain objects and it relies on a for...in loop which will - * break if the Object prototype is messed with. - * - * @param (object) destination The object to modify and return - * @param (object) source The object to use to overwrite the first - * object - * - * @returns (object) The modified first object is returned - */ - extend : function( destination, source ) { - - for ( var prop in source ) { - - // Sanity check - if ( ! source.hasOwnProperty( prop ) ) { continue; } - - // Enable recursive (deep) object extension - if ( typeof source[prop] == 'object' && null !== source[prop] ) { - - destination[prop] = methods.extend( destination[prop] || {}, source[prop] ); - - } else { - - destination[prop] = source[prop]; - } - } - - return destination; - }, - - /** - * In a future version, this can be made more intelligent, - * but for now, we'll just add a "p" at the end if we are passed - * numbers. - * - * @param (string) res The resolution to make a label for - * - * @returns (string) The label text string - */ - res_label : function( res ) { - - return ( /^\d+$/.test( res ) ) ? res + 'p' : res; - }, - - matchResolution: function(resStack, res) { - }, - - /** - * returns a dummy object that implements the basic get/set - * functionality of the Cookies library. Used in the case where - * the Cookies library is not present - */ - buildCookiesDummy: function() { - return { - get: function(key) { - return ""; - }, - set: function(key, val) { - return false; - } - }; - } - }; - - /*********************************************************************************** - * Setup our resolution menu items - ***********************************************************************************/ - _V_.ResolutionMenuItem = _V_.MenuItem.extend({ - - /** @constructor */ - init : function( player, options ){ - - // Modify options for parent MenuItem class's init. - options.label = methods.res_label( options.res ); - options.selected = ( options.res.toString() === player.getCurrentRes().toString() ); - - // Call the parent constructor - _V_.MenuItem.call( this, player, options ); - - // Store the resolution as a call property - this.resolution = options.res; - - // Register our click handler - this.on( 'click', this.onClick ); - - // Toggle the selected class whenever the resolution changes - player.on( 'changeRes', _V_.bind( this, function() { - - if ( this.resolution == player.getCurrentRes() ) { - - this.selected( true ); - - } else { - - this.selected( false ); - } - })); - } - }); - - // Handle clicks on the menu items - _V_.ResolutionMenuItem.prototype.onClick = function() { - - var player = this.player(), - video_el = player.el().firstChild, - current_time = player.currentTime(), - is_paused = player.paused(), - button_nodes = player.controlBar.resolutionSelector.el().firstChild.children, - button_node_count = button_nodes.length; - - // Do nothing if we aren't changing resolutions - if ( player.getCurrentRes() == this.resolution ) { return; } - - // Make sure the loadedmetadata event will fire - if ( 'none' == video_el.preload ) { video_el.preload = 'metadata'; } - - // Change the source and make sure we don't start the video over - player.src( player.availableRes[this.resolution] ).one( 'loadedmetadata', function() { - - player.currentTime( current_time ); - - if ( ! is_paused ) { player.play(); } - }); - - // Save the newly selected resolution in our player options property - player.currentRes = this.resolution; - - // Update the button text - while ( button_node_count > 0 ) { - - button_node_count--; - - if ( 'librevjs-current-res' == button_nodes[button_node_count].className ) { - - button_nodes[button_node_count].innerHTML = methods.res_label( this.resolution ); - break; - } - } - - // Update the classes to reflect the currently selected resolution - player.trigger( 'changeRes' ); - }; - - /*********************************************************************************** - * Setup our resolution menu title item - ***********************************************************************************/ - _V_.ResolutionTitleMenuItem = _V_.MenuItem.extend({ - - init : function( player, options ) { - - // Call the parent constructor - _V_.MenuItem.call( this, player, options ); - - // No click handler for the menu title - this.off( 'click' ); - } - }); - - /*********************************************************************************** - * Define our resolution selector button - ***********************************************************************************/ - _V_.ResolutionSelector = _V_.MenuButton.extend({ - - /** @constructor */ - init : function( player, options ) { - - // Add our list of available resolutions to the player object - player.availableRes = options.available_res; - - // Call the parent constructor - _V_.MenuButton.call( this, player, options ); - } - }); - - // Create a menu item for each available resolution - _V_.ResolutionSelector.prototype.createItems = function() { - - var player = this.player(), - items = [], - current_res; - - // Add the menu title item - items.push( new _V_.ResolutionTitleMenuItem( player, { - - el : _V_.Component.prototype.createEl( 'li', { - - className : 'librevjs-menu-title librevjs-res-menu-title', - innerHTML : 'Calidad' - }) - })); - - // Add an item for each available resolution - for ( current_res in player.availableRes ) { - - // Don't add an item for the length attribute - if ( 'length' == current_res ) { continue; } - - items.push( new _V_.ResolutionMenuItem( player, { - res : current_res - })); - } - - // Sort the available resolutions in descending order - items.sort(function( a, b ) { - - if ( typeof a.resolution == 'undefined' ) { - - return -1; - - } else { - - return parseInt( b.resolution ) - parseInt( a.resolution ); - } - }); - - return items; - }; - - /*********************************************************************************** - * Register the plugin with cliplibrejs, main plugin function - ***********************************************************************************/ - _V_.plugin( 'resolutionSelector', function( options ) { - - // Only enable the plugin on HTML5 videos - if ( ! this.el().firstChild.canPlayType ) { return; } - - var player = this, - sources = player.options().sources, - i = sources.length, - j, - found_type, - - // Override default options with those provided - settings = methods.extend({ - - default_res : '', // (string) The resolution that should be selected by default ( '480' or '480,1080,240' ) - force_types : false // (array) List of media types. If passed, we need to have source for each type in each resolution or that resolution will not be an option - - }, options || {} ), - - available_res = { length : 0 }, - current_res, - resolutionSelector, - - // Split default resolutions if set and valid, otherwise default to an empty array - default_resolutions = ( settings.default_res && typeof settings.default_res == 'string' ) ? settings.default_res.split( ',' ) : [], - cookieNamespace = 'cliplibrejs.resolutionSelector', - resCookieName = cookieNamespace + '.res', - cookieRef = (typeof(Cookies) === "function") ? Cookies : methods.buildCookiesDummy(); - - // Get all of the available resoloutions - while ( i > 0 ) { - - i--; - - // Skip sources that don't have data-res attributes - if ( ! sources[i]['data-res'] ) { continue; } - - current_res = sources[i]['data-res']; - - if ( typeof available_res[current_res] !== 'object' ) { - - available_res[current_res] = []; - available_res.length++; - } - - available_res[current_res].push( sources[i] ); - } - - // Check for forced types - if ( settings.force_types ) { - - // Loop through all available resoultions - for ( current_res in available_res ) { - - // Don't count the length property as a resolution - if ( 'length' == current_res ) { continue; } - - i = settings.force_types.length; - - // For each resolution loop through the required types - while ( i > 0 ) { - - i--; - - j = available_res[current_res].length; - found_types = 0; - - // For each required type loop through the available sources to check if its there - while ( j > 0 ) { - - j--; - - if ( settings.force_types[i] === available_res[current_res][j].type ) { - - found_types++; - } - } // End loop through current resolution sources - - if ( found_types < settings.force_types.length ) { - - delete available_res[current_res]; - available_res.length--; - break; - } - } // End loop through required types - } // End loop through resolutions - } - - // Make sure we have at least 2 available resolutions before we add the button - if ( available_res.length < 2 ) { return; } - - var resCookie = cookieRef.get(resCookieName) - - if (resCookie) { - // rebuild the default_resolutions stack with the cookie's resolution on top - default_resolutions = [resCookie].concat(default_resolutions); - } - - // Loop through the choosen default resolutions if there were any - for ( i = 0; i < default_resolutions.length; i++ ) { - // Set the video to start out with the first available default res - if ( available_res[default_resolutions[i]] ) { - - player.src( available_res[default_resolutions[i]] ); - player.currentRes = default_resolutions[i]; - break; - } - } - - // Helper function to get the current resolution - player.getCurrentRes = function() { - - if ( typeof player.currentRes !== 'undefined' ) { - - return player.currentRes; - - } else { - - try { - - return res = player.options().sources[0]['data-res']; - - } catch(e) { - - return ''; - } - } - }; - - // Get the started resolution - current_res = player.getCurrentRes(); - - if ( current_res ) { current_res = methods.res_label( current_res ); } - - // Add the resolution selector button - resolutionSelector = new _V_.ResolutionSelector( player, { - - el : _V_.Component.prototype.createEl( null, { - - className : 'librevjs-res-button librevjs-menu-button librevjs-control', - innerHTML : '<div class="librevjs-control-content"><span class="librevjs-current-res">' + ( current_res || 'Quality' ) + '</span></div>', - role : 'button', - 'aria-live' : 'polite', // let the screen reader user know that the text of the button may change - tabIndex : 0 - - }), - available_res : available_res - }); - - // Attach an event to remember previous res selection via cookie - this.on('changeRes', function() { - cookieRef.set(resCookieName, player.getCurrentRes()); - }); - - // Attach an event to update player.src once on loadedmetadata - // if a resolution was previously set - this.one('loadedmetadata', function() { - var resCookie = cookieRef.get(resCookieName); - - if (resCookie) { - player.src(player.availableRes[resCookie]); - player.currentRes = resCookie; - player.trigger( 'changeRes' ); - } - }); - - // Add the button to the control bar object and the DOM - player.controlBar.resolutionSelector = player.controlBar.addChild( resolutionSelector ); - }); - })( cliplibrejs ); |