diff options
Diffstat (limited to 'librevideojs/css/librevideojs-material')
12 files changed, 3656 insertions, 0 deletions
diff --git a/librevideojs/css/librevideojs-material/libre-skin-blue.css b/librevideojs/css/librevideojs-material/libre-skin-blue.css new file mode 100644 index 0000000..76ffc80 --- /dev/null +++ b/librevideojs/css/librevideojs-material/libre-skin-blue.css @@ -0,0 +1,604 @@ +/*! +LibreVideoJS Estilos personalizados = blue +Version 1.0 +Escrito por Jesús Eduardo +*/.librevjs-libre-skin { + color:#ccc; + background-color: inherit; +} +@font-face { + font-family:LibreVideoJS; + src: url('../../fonts/libre-material/libre-icons.eot'); + src: url('../../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'), 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#icomoon') format('svg'); + font-weight:400; + font-style:normal +} +.librevjs-libre-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-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-skin .librevjs-slider-handle { + width: 0; + height: 0; +} +.librevjs-libre-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + position: absolute; + top: 0; + left: 0; +} + +/* control bar + * */ +.librevjs-libre-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-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-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-skin.librevjs-controls-disabled .librevjs-control-bar { + display:none +} +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { + display:none +} +@media \0screen { + .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +.librevjs-libre-skin .librevjs-control { + outline:0; + position:relative; + float:left; + text-align:center; + margin:0; + padding:0; + height:3em; + width:4em +} +.librevjs-libre-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-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before { + color: #2196F3; +} +/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ +.librevjs-libre-skin .librevjs-control:focus { +} +.librevjs-libre-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-skin .librevjs-play-control { + width:5em; + cursor:pointer; + color:rgb(33, 150, 244); +} +.librevjs-libre-skin .librevjs-play-control:before { + content:"\e001" +} +.librevjs-libre-skin .librevjs-play-control:hover:before { + color:#2980b9; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { + content:"\e002" +} +/*END Color y diseño de boton play control*/ +.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button { + cursor:pointer; + float:right +} +.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { + content:"\e006" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content:"\e003" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content:"\e004" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content:"\e005" +} +.librevjs-libre-skin .librevjs-volume-control { + width:5em; + float:right +} +.librevjs-libre-skin .librevjs-volume-bar { + width:5em; + height:.6em; + margin:1.1em auto 0 +} +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { + height:2.9em +} + +/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ +.librevjs-libre-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-skin .librevjs-volume-bar .librevjs-volume-handle { + width:.5em; + height:.5em +} +.librevjs-libre-skin .librevjs-volume-handle:before { + font-size:.9em; + top:-.2em; + left:-.2em; + width:1em; + height:1em +} +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width:6em; + left:-4em +} +.librevjs-libre-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-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-skin .librevjs-progress-holder { + height:100% +} +.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-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-skin .librevjs-play-progress { + background: #2196F3 url() -50% 0 repeat; +} +.librevjs-libre-skin .librevjs-load-progress { + background:#646464; + background:rgba(255,255,255,.4) +} +.librevjs-libre-skin .librevjs-seek-handle { + width:1.5em; + height:100% +} +.librevjs-libre-skin .librevjs-seek-handle:before { + padding-top:.1em +} +.librevjs-libre-skin .librevjs-time-controls { + font-size:1em; + line-height:3em +} +.librevjs-libre-skin .librevjs-current-time { + float:left +} +.librevjs-libre-skin .librevjs-duration { + float:left +} +.librevjs-libre-skin .librevjs-remaining-time { + display:none; + float:left +} +.librevjs-time-divider { + float:left; + line-height:3em +} +.librevjs-libre-skin .librevjs-fullscreen-control { + width:3.8em; + cursor:pointer; + float:right +} +.librevjs-libre-skin .librevjs-fullscreen-control:before { + content:"\e000" +} +.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content:"\e00b" +} + +/*Centrado del button Play y personalizado*/ +.librevjs-libre-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-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-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-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} +.librevjs-libre-skin:hover .librevjs-big-play-button, +.librevjs-libre-skin .librevjs-big-play-button:focus { + color: #0289f4; /*color boton focus*/ +} +.librevjs-libre-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-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-skin .librevjs-menu-button { + float:right; + cursor:pointer +} +.librevjs-libre-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-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-skin .librevjs-menu-button:hover .librevjs-menu { + display:block +} +.librevjs-libre-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 DE SELECCION DE SUBTIULOS*/ +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { + color: #ffffff; + background-color: rgb(33, 150, 244); +} +.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #fff; + background-color: #2196F3; +} +/*END COLOR SELECCION DE SUBTITULOS*/ +.librevjs-libre-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-skin .librevjs-subtitles-button:before { + content:"\e00c" +} +.librevjs-libre-skin .librevjs-captions-button:before { + content:"\e008" +} +.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-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:400; + 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-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*/ +ul li.librevjs-menu-title.librevjs-res-menu-title{ + color: rgb(33, 150, 244); +} +ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ + color: rgb(11, 137, 237); +} +/*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; +} diff --git a/librevideojs/css/librevideojs-material/libre-skin-blue.min.css b/librevideojs/css/librevideojs-material/libre-skin-blue.min.css new file mode 100644 index 0000000..9f8dfeb --- /dev/null +++ b/librevideojs/css/librevideojs-material/libre-skin-blue.min.css @@ -0,0 +1,5 @@ +/*! +LibreVideoJS Estilos personalizados = blue +Version 1.0 +Escrito por Jesús Eduardo +*/.librevjs-libre-skin{color:#ccc;background-color:inherit}@font-face{font-family:LibreVideoJS;src:url('../../fonts/libre-material/libre-icons.eot');src:url('../../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'),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#icomoon') format('svg');font-weight:400;font-style:normal}.librevjs-libre-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-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-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-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-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)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#2196f3}.librevjs-libre-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#2196f4}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#2980b9}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#2196f3 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-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-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-skin .librevjs-progress-holder{height:100%}.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-skin .librevjs-play-progress{background:#2196f3 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-skin .librevjs-time-controls{font-size:1em;line-height:3em}.librevjs-libre-skin .librevjs-current-time{float:left}.librevjs-libre-skin .librevjs-duration{float:left}.librevjs-libre-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-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}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-skin:hover .librevjs-big-play-button,.librevjs-libre-skin .librevjs-big-play-button:focus{color:#0289f4}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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-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-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-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-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-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-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}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#2196f4}.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#2196f3}.librevjs-libre-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-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-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:400;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:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-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}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#2196f4}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#0b89ed}.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}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-grey.css b/librevideojs/css/librevideojs-material/libre-skin-grey.css new file mode 100644 index 0000000..c5a1960 --- /dev/null +++ b/librevideojs/css/librevideojs-material/libre-skin-grey.css @@ -0,0 +1,604 @@ +/*! +LibreVideoJS Estilos personalizados = Grey +Version 1.0 +Escrito por Jesús Eduardo +*/.librevjs-libre-skin { + color:#ccc; + background-color: inherit; +} +@font-face { + font-family:LibreVideoJS; + src: url('../../fonts/libre-material/libre-icons.eot'); + src: url('../../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'), 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#icomoon') format('svg'); + font-weight:400; + font-style:normal +} +.librevjs-libre-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-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-skin .librevjs-slider-handle { + width: 0; + height: 0; +} +.librevjs-libre-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + position: absolute; + top: 0; + left: 0; +} + +/* control bar + * */ +.librevjs-libre-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-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-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-skin.librevjs-controls-disabled .librevjs-control-bar { + display:none +} +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { + display:none +} +@media \0screen { + .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +.librevjs-libre-skin .librevjs-control { + outline:0; + position:relative; + float:left; + text-align:center; + margin:0; + padding:0; + height:3em; + width:4em +} +.librevjs-libre-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-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before { + color: #9e9e9e; +} +/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ +.librevjs-libre-skin .librevjs-control:focus { +} +.librevjs-libre-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-skin .librevjs-play-control { + width:5em; + cursor:pointer; + color: rgb(158, 158, 158); +} +.librevjs-libre-skin .librevjs-play-control:before { + content:"\e001" +} +.librevjs-libre-skin .librevjs-play-control:hover:before { + color:#7c7c7c; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { + content:"\e002" +} +/*END Color y diseño de boton play control*/ +.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button { + cursor:pointer; + float:right +} +.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { + content:"\e006" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content:"\e003" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content:"\e004" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content:"\e005" +} +.librevjs-libre-skin .librevjs-volume-control { + width:5em; + float:right +} +.librevjs-libre-skin .librevjs-volume-bar { + width:5em; + height:.6em; + margin:1.1em auto 0 +} +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { + height:2.9em +} + +/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ +.librevjs-libre-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-skin .librevjs-volume-bar .librevjs-volume-handle { + width:.5em; + height:.5em +} +.librevjs-libre-skin .librevjs-volume-handle:before { + font-size:.9em; + top:-.2em; + left:-.2em; + width:1em; + height:1em +} +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width:6em; + left:-4em +} +.librevjs-libre-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-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-skin .librevjs-progress-holder { + height:100% +} +.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-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-skin .librevjs-play-progress { + background: #9e9e9e url() -50% 0 repeat; +} +.librevjs-libre-skin .librevjs-load-progress { + background:#646464; + background:rgba(255,255,255,.4) +} +.librevjs-libre-skin .librevjs-seek-handle { + width:1.5em; + height:100% +} +.librevjs-libre-skin .librevjs-seek-handle:before { + padding-top:.1em +} +.librevjs-libre-skin .librevjs-time-controls { + font-size:1em; + line-height:3em +} +.librevjs-libre-skin .librevjs-current-time { + float:left +} +.librevjs-libre-skin .librevjs-duration { + float:left +} +.librevjs-libre-skin .librevjs-remaining-time { + display:none; + float:left +} +.librevjs-time-divider { + float:left; + line-height:3em +} +.librevjs-libre-skin .librevjs-fullscreen-control { + width:3.8em; + cursor:pointer; + float:right +} +.librevjs-libre-skin .librevjs-fullscreen-control:before { + content:"\e000" +} +.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content:"\e00b" +} + +/*Centrado del button Play y personalizado*/ +.librevjs-libre-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-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-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-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} +.librevjs-libre-skin:hover .librevjs-big-play-button, +.librevjs-libre-skin .librevjs-big-play-button:focus { + color: rgb(115, 115, 115); /*color boton focus purpura oscuro*/ +} +.librevjs-libre-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-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-skin .librevjs-menu-button { + float:right; + cursor:pointer +} +.librevjs-libre-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-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-skin .librevjs-menu-button:hover .librevjs-menu { + display:block +} +.librevjs-libre-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 DE SELECCION DE SUBTIULOS*/ +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { + color: #ffffff; + background-color: rgb(158, 158, 158); +} +.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #fff; + background-color: #9e9e9e; +} +/*END COLOR SELECCION DE SUBTITULOS*/ +.librevjs-libre-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-skin .librevjs-subtitles-button:before { + content:"\e00c" +} +.librevjs-libre-skin .librevjs-captions-button:before { + content:"\e008" +} +.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-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:400; + 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-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*/ +ul li.librevjs-menu-title.librevjs-res-menu-title{ + color:#737373; +} +ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ + color:#9e9e9e; +} +/*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; +} diff --git a/librevideojs/css/librevideojs-material/libre-skin-grey.min.css b/librevideojs/css/librevideojs-material/libre-skin-grey.min.css new file mode 100644 index 0000000..078672b --- /dev/null +++ b/librevideojs/css/librevideojs-material/libre-skin-grey.min.css @@ -0,0 +1,5 @@ +/*! +LibreVideoJS Estilos personalizados = Grey +Version 1.0 +Escrito por Jesús Eduardo +*/.librevjs-libre-skin{color:#ccc;background-color:inherit}@font-face{font-family:LibreVideoJS;src:url('../../fonts/libre-material/libre-icons.eot');src:url('../../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'),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#icomoon') format('svg');font-weight:400;font-style:normal}.librevjs-libre-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-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-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-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-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)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#9e9e9e}.librevjs-libre-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#9e9e9e}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#7c7c7c}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#9e9e9e url() -50% 0 repeat}.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-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-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-skin .librevjs-progress-holder{height:100%}.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-skin .librevjs-play-progress{background:#9e9e9e url() -50% 0 repeat}.librevjs-libre-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-skin .librevjs-time-controls{font-size:1em;line-height:3em}.librevjs-libre-skin .librevjs-current-time{float:left}.librevjs-libre-skin .librevjs-duration{float:left}.librevjs-libre-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-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}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-skin:hover .librevjs-big-play-button,.librevjs-libre-skin .librevjs-big-play-button:focus{color:#737373}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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-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-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-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-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-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-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}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#9e9e9e}.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#9e9e9e}.librevjs-libre-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-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-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:400;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:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-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}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#737373}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#9e9e9e}.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}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-purple.css b/librevideojs/css/librevideojs-material/libre-skin-purple.css new file mode 100644 index 0000000..75a4420 --- /dev/null +++ b/librevideojs/css/librevideojs-material/libre-skin-purple.css @@ -0,0 +1,604 @@ +/*! +LibreVideoJS Estilos personalizados = Purple +Version 1.0 +Escrito por Jesús Eduardo +*/.librevjs-libre-skin { + color:#ccc; + background-color: inherit; +} +@font-face { + font-family:LibreVideoJS; + src: url('../../fonts/libre-material/libre-icons.eot'); + src: url('../../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'), 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#icomoon') format('svg'); + font-weight:400; + font-style:normal +} +.librevjs-libre-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-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-skin .librevjs-slider-handle { + width: 0; + height: 0; +} +.librevjs-libre-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + position: absolute; + top: 0; + left: 0; +} + +/* control bar + * */ +.librevjs-libre-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-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-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-skin.librevjs-controls-disabled .librevjs-control-bar { + display:none +} +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { + display:none +} +@media \0screen { + .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +.librevjs-libre-skin .librevjs-control { + outline:0; + position:relative; + float:left; + text-align:center; + margin:0; + padding:0; + height:3em; + width:4em +} +.librevjs-libre-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-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before { + color: #9c27b0; +} +/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ +.librevjs-libre-skin .librevjs-control:focus { +} +.librevjs-libre-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-skin .librevjs-play-control { + width:5em; + cursor:pointer; + color: rgb(156, 39, 176); +} +.librevjs-libre-skin .librevjs-play-control:before { + content:"\e001" +} +.librevjs-libre-skin .librevjs-play-control:hover:before { + color:#8e44ad; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { + content:"\e002" +} +/*END Color y diseño de boton play control*/ +.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button { + cursor:pointer; + float:right +} +.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { + content:"\e006" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content:"\e003" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content:"\e004" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content:"\e005" +} +.librevjs-libre-skin .librevjs-volume-control { + width:5em; + float:right +} +.librevjs-libre-skin .librevjs-volume-bar { + width:5em; + height:.6em; + margin:1.1em auto 0 +} +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { + height:2.9em +} + +/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ +.librevjs-libre-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-skin .librevjs-volume-bar .librevjs-volume-handle { + width:.5em; + height:.5em +} +.librevjs-libre-skin .librevjs-volume-handle:before { + font-size:.9em; + top:-.2em; + left:-.2em; + width:1em; + height:1em +} +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width:6em; + left:-4em +} +.librevjs-libre-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-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-skin .librevjs-progress-holder { + height:100% +} +.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-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-skin .librevjs-play-progress { + background: #9c27b0 url() -50% 0 repeat; +} +.librevjs-libre-skin .librevjs-load-progress { + background:#646464; + background:rgba(255,255,255,.4) +} +.librevjs-libre-skin .librevjs-seek-handle { + width:1.5em; + height:100% +} +.librevjs-libre-skin .librevjs-seek-handle:before { + padding-top:.1em +} +.librevjs-libre-skin .librevjs-time-controls { + font-size:1em; + line-height:3em +} +.librevjs-libre-skin .librevjs-current-time { + float:left +} +.librevjs-libre-skin .librevjs-duration { + float:left +} +.librevjs-libre-skin .librevjs-remaining-time { + display:none; + float:left +} +.librevjs-time-divider { + float:left; + line-height:3em +} +.librevjs-libre-skin .librevjs-fullscreen-control { + width:3.8em; + cursor:pointer; + float:right +} +.librevjs-libre-skin .librevjs-fullscreen-control:before { + content:"\e000" +} +.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content:"\e00b" +} + +/*Centrado del button Play y personalizado*/ +.librevjs-libre-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-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-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-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} +.librevjs-libre-skin:hover .librevjs-big-play-button, +.librevjs-libre-skin .librevjs-big-play-button:focus { + color: rgb(142, 68, 173); /*color boton focus purpura oscuro*/ +} +.librevjs-libre-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-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-skin .librevjs-menu-button { + float:right; + cursor:pointer +} +.librevjs-libre-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-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-skin .librevjs-menu-button:hover .librevjs-menu { + display:block +} +.librevjs-libre-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 DE SELECCION DE SUBTIULOS*/ +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { + color: #ffffff; + background-color: rgb(156, 39, 176); +} +.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #fff; + background-color: #9c27b0; +} +/*END COLOR SELECCION DE SUBTITULOS*/ +.librevjs-libre-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-skin .librevjs-subtitles-button:before { + content:"\e00c" +} +.librevjs-libre-skin .librevjs-captions-button:before { + content:"\e008" +} +.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-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:400; + 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-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*/ +ul li.librevjs-menu-title.librevjs-res-menu-title{ + color:#9c27b0; +} +ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ + color:#8e44ad; +} +/*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; +} diff --git a/librevideojs/css/librevideojs-material/libre-skin-purple.min.css b/librevideojs/css/librevideojs-material/libre-skin-purple.min.css new file mode 100644 index 0000000..335f04d --- /dev/null +++ b/librevideojs/css/librevideojs-material/libre-skin-purple.min.css @@ -0,0 +1,5 @@ +/*! +LibreVideoJS Estilos personalizados = Purple +Version 1.0 +Escrito por Jesús Eduardo +*/.librevjs-libre-skin{color:#ccc;background-color:inherit}@font-face{font-family:LibreVideoJS;src:url('../../fonts/libre-material/libre-icons.eot');src:url('../../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'),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#icomoon') format('svg');font-weight:400;font-style:normal}.librevjs-libre-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-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-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-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-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)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#9c27b0}.librevjs-libre-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#9c27b0}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#8e44ad}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#9c27b0 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-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-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-skin .librevjs-progress-holder{height:100%}.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-skin .librevjs-play-progress{background:#9c27b0 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-skin .librevjs-time-controls{font-size:1em;line-height:3em}.librevjs-libre-skin .librevjs-current-time{float:left}.librevjs-libre-skin .librevjs-duration{float:left}.librevjs-libre-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-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}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-skin:hover .librevjs-big-play-button,.librevjs-libre-skin .librevjs-big-play-button:focus{color:#8e44ad}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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-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-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-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-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-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-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}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#9c27b0}.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#9c27b0}.librevjs-libre-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-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-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:400;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:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-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}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#9c27b0}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#8e44ad}.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}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-red.css b/librevideojs/css/librevideojs-material/libre-skin-red.css new file mode 100644 index 0000000..7783c02 --- /dev/null +++ b/librevideojs/css/librevideojs-material/libre-skin-red.css @@ -0,0 +1,604 @@ +/*! +LibreVideoJS Estilos personalizados = Red +Version 1.0 +Escrito por Jesús Eduardo +*/.librevjs-libre-skin { + color:#ccc; + background-color: inherit; +} +@font-face { + font-family:LibreVideoJS; + src: url('../../fonts/libre-material/libre-icons.eot'); + src: url('../../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'), 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#icomoon') format('svg'); + font-weight:400; + font-style:normal +} +.librevjs-libre-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-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-skin .librevjs-slider-handle { + width: 0; + height: 0; +} +.librevjs-libre-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + position: absolute; + top: 0; + left: 0; +} + +/* control bar + * */ +.librevjs-libre-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-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-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-skin.librevjs-controls-disabled .librevjs-control-bar { + display:none +} +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { + display:none +} +@media \0screen { + .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +.librevjs-libre-skin .librevjs-control { + outline:0; + position:relative; + float:left; + text-align:center; + margin:0; + padding:0; + height:3em; + width:4em +} +.librevjs-libre-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-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before { + color: #f44336; +} +/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ +.librevjs-libre-skin .librevjs-control:focus { +} +.librevjs-libre-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-skin .librevjs-play-control { + width:5em; + cursor:pointer; + color: rgb(244, 67, 54); +} +.librevjs-libre-skin .librevjs-play-control:before { + content:"\e001" +} +.librevjs-libre-skin .librevjs-play-control:hover:before { + color:#f22e1f; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { + content:"\e002" +} +/*END Color y diseño de boton play control*/ +.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button { + cursor:pointer; + float:right +} +.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { + content:"\e006" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content:"\e003" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content:"\e004" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content:"\e005" +} +.librevjs-libre-skin .librevjs-volume-control { + width:5em; + float:right +} +.librevjs-libre-skin .librevjs-volume-bar { + width:5em; + height:.6em; + margin:1.1em auto 0 +} +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { + height:2.9em +} + +/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ +.librevjs-libre-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-skin .librevjs-volume-bar .librevjs-volume-handle { + width:.5em; + height:.5em +} +.librevjs-libre-skin .librevjs-volume-handle:before { + font-size:.9em; + top:-.2em; + left:-.2em; + width:1em; + height:1em +} +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width:6em; + left:-4em +} +.librevjs-libre-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-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-skin .librevjs-progress-holder { + height:100% +} +.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-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-skin .librevjs-play-progress { + background: #f44336 url() -50% 0 repeat; +} +.librevjs-libre-skin .librevjs-load-progress { + background:#646464; + background:rgba(255,255,255,.4) +} +.librevjs-libre-skin .librevjs-seek-handle { + width:1.5em; + height:100% +} +.librevjs-libre-skin .librevjs-seek-handle:before { + padding-top:.1em +} +.librevjs-libre-skin .librevjs-time-controls { + font-size:1em; + line-height:3em +} +.librevjs-libre-skin .librevjs-current-time { + float:left +} +.librevjs-libre-skin .librevjs-duration { + float:left +} +.librevjs-libre-skin .librevjs-remaining-time { + display:none; + float:left +} +.librevjs-time-divider { + float:left; + line-height:3em +} +.librevjs-libre-skin .librevjs-fullscreen-control { + width:3.8em; + cursor:pointer; + float:right +} +.librevjs-libre-skin .librevjs-fullscreen-control:before { + content:"\e000" +} +.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content:"\e00b" +} + +/*Centrado del button Play y personalizado*/ +.librevjs-libre-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-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-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-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} +.librevjs-libre-skin:hover .librevjs-big-play-button, +.librevjs-libre-skin .librevjs-big-play-button:focus { + color: rgba(244, 67, 54, 0.89); /*color boton focus*/ +} +.librevjs-libre-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-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-skin .librevjs-menu-button { + float:right; + cursor:pointer +} +.librevjs-libre-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-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-skin .librevjs-menu-button:hover .librevjs-menu { + display:block +} +.librevjs-libre-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 DE SELECCION DE SUBTIULOS*/ +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { + color: #ffffff; + background-color: rgb(244, 67, 54); +} +.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #fff; + background-color: #f44336; +} +/*END COLOR SELECCION DE SUBTITULOS*/ +.librevjs-libre-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-skin .librevjs-subtitles-button:before { + content:"\e00c" +} +.librevjs-libre-skin .librevjs-captions-button:before { + content:"\e008" +} +.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-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:400; + 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-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*/ +ul li.librevjs-menu-title.librevjs-res-menu-title{ + color: rgb(246, 44, 30); +} +ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ + color: rgb(244, 67, 54); +} +/*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; +} diff --git a/librevideojs/css/librevideojs-material/libre-skin-red.min.css b/librevideojs/css/librevideojs-material/libre-skin-red.min.css new file mode 100644 index 0000000..536b3d3 --- /dev/null +++ b/librevideojs/css/librevideojs-material/libre-skin-red.min.css @@ -0,0 +1,5 @@ +/*! +LibreVideoJS Estilos personalizados = Red +Version 1.0 +Escrito por Jesús Eduardo +*/.librevjs-libre-skin{color:#ccc;background-color:inherit}@font-face{font-family:LibreVideoJS;src:url('../../fonts/libre-material/libre-icons.eot');src:url('../../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'),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#icomoon') format('svg');font-weight:400;font-style:normal}.librevjs-libre-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-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-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-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-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)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#f44336}.librevjs-libre-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#f44336}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#f22e1f}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#f44336 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-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-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-skin .librevjs-progress-holder{height:100%}.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-skin .librevjs-play-progress{background:#f44336 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-skin .librevjs-time-controls{font-size:1em;line-height:3em}.librevjs-libre-skin .librevjs-current-time{float:left}.librevjs-libre-skin .librevjs-duration{float:left}.librevjs-libre-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-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}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-skin:hover .librevjs-big-play-button,.librevjs-libre-skin .librevjs-big-play-button:focus{color:rgba(244,67,54,0.89)}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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-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-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-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-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-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-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}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#f44336}.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#f44336}.librevjs-libre-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-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-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:400;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:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-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}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#f62c1e}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#f44336}.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}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-teal.css b/librevideojs/css/librevideojs-material/libre-skin-teal.css new file mode 100644 index 0000000..a9ce109 --- /dev/null +++ b/librevideojs/css/librevideojs-material/libre-skin-teal.css @@ -0,0 +1,606 @@ +/*! +LibreVideoJS Estilos personalizados +Version 1.0 +Escrito por Jesús Eduardo +*/.librevjs-libre-skin { + color:#ccc; + background-color: inherit; +} +@font-face { + font-family:LibreVideoJS; + src: url('../../fonts/libre-material/libre-icons.eot'); + src: url('../../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'), 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#icomoon') format('svg'); + font-weight:400; + font-style:normal +} +.librevjs-libre-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-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-skin .librevjs-slider-handle { + width: 0; + height: 0; +} +.librevjs-libre-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + position: absolute; + top: 0; + left: 0; +} + +/* control bar + * */ +.librevjs-libre-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-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-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-skin.librevjs-controls-disabled .librevjs-control-bar { + display:none +} +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { + display:none +} +@media \0screen { + .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +.librevjs-libre-skin .librevjs-control { + outline:0; + position:relative; + float:left; + text-align:center; + margin:0; + padding:0; + height:3em; + width:4em +} +.librevjs-libre-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-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before { + color: #1de9b6; +} +/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ +.librevjs-libre-skin .librevjs-control:focus { +} +.librevjs-libre-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-skin .librevjs-play-control { + width:5em; + cursor:pointer; + color:rgb(29, 233, 182); +} +.librevjs-libre-skin .librevjs-play-control:before { + content:"\e001" +} +.librevjs-libre-skin .librevjs-play-control:hover:before { + color:#007c5d; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { + content:"\e002" +} +/*END Color y diseño de boton play control*/ +.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button { + cursor:pointer; + float:right +} +.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { + content:"\e006" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content:"\e003" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content:"\e004" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content:"\e005" +} +.librevjs-libre-skin .librevjs-volume-control { + width:5em; + float:right +} +.librevjs-libre-skin .librevjs-volume-bar { + width:5em; + height:.6em; + margin:1.1em auto 0 +} +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { + height:2.9em +} + +/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ +.librevjs-libre-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-skin .librevjs-volume-bar .librevjs-volume-handle { + width:.5em; + height:.5em +} +.librevjs-libre-skin .librevjs-volume-handle:before { + font-size:.9em; + top:-.2em; + left:-.2em; + width:1em; + height:1em +} +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width:6em; + left:-4em +} +.librevjs-libre-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-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-skin .librevjs-progress-holder { + height:100% +} +.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-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-skin .librevjs-play-progress { + background: #1de9b6 url() -50% 0 repeat; +} +.librevjs-libre-skin .librevjs-load-progress { + background:#646464; + background:rgba(255,255,255,.4) +} +.librevjs-libre-skin .librevjs-seek-handle { + width:1.5em; + height:100% +} +.librevjs-libre-skin .librevjs-seek-handle:before { + padding-top:.1em +} +.librevjs-libre-skin .librevjs-time-controls { + font-size:1em; + line-height:3em +} +.librevjs-libre-skin .librevjs-current-time { + float:left +} +.librevjs-libre-skin .librevjs-duration { + float:left +} +.librevjs-libre-skin .librevjs-remaining-time { + display:none; + float:left +} +.librevjs-time-divider { + float:left; + line-height:3em +} +.librevjs-libre-skin .librevjs-fullscreen-control { + width:3.8em; + cursor:pointer; + float:right +} +.librevjs-libre-skin .librevjs-fullscreen-control:before { + content:"\e000" +} +.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content:"\e00b" +} + +/*Centrado del button Play y personalizado*/ +.librevjs-libre-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-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-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-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} +.librevjs-libre-skin:hover .librevjs-big-play-button, +.librevjs-libre-skin .librevjs-big-play-button:focus { + color: #16a085; +} +.librevjs-libre-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-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-skin .librevjs-menu-button { + float:right; + cursor:pointer +} +.librevjs-libre-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-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-skin .librevjs-menu-button:hover .librevjs-menu { + display:block +} +.librevjs-libre-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 DE SELECCION DE SUBTIULOS*/ +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { + color: rgb(1, 56, 47); + background-color: rgb(29, 233, 182); +} +.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #004d40; + background-color: #1de9b6; +} +/*END COLOR SELECCION DE SUBTITULOS*/ +.librevjs-libre-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-skin .librevjs-subtitles-button:before { + content:"\e00c" +} +.librevjs-libre-skin .librevjs-captions-button:before { + content:"\e008" +} +.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-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:400; + 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-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*/ +ul li.librevjs-menu-title.librevjs-res-menu-title{ + color:rgb(26, 187, 156); +} +ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ + color: rgb(29, 233, 182); +} + +/*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; +} diff --git a/librevideojs/css/librevideojs-material/libre-skin-teal.min.css b/librevideojs/css/librevideojs-material/libre-skin-teal.min.css new file mode 100644 index 0000000..2d16d4d --- /dev/null +++ b/librevideojs/css/librevideojs-material/libre-skin-teal.min.css @@ -0,0 +1,5 @@ +/*! +LibreVideoJS Estilos personalizados +Version 1.0 +Escrito por Jesús Eduardo +*/.librevjs-libre-skin{color:#ccc;background-color:inherit}@font-face{font-family:LibreVideoJS;src:url('../../fonts/libre-material/libre-icons.eot');src:url('../../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'),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#icomoon') format('svg');font-weight:400;font-style:normal}.librevjs-libre-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-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-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-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-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)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#1de9b6}.librevjs-libre-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#1de9b6}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#007c5d}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#1de9b6 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-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-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-skin .librevjs-progress-holder{height:100%}.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-skin .librevjs-play-progress{background:#1de9b6 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-skin .librevjs-time-controls{font-size:1em;line-height:3em}.librevjs-libre-skin .librevjs-current-time{float:left}.librevjs-libre-skin .librevjs-duration{float:left}.librevjs-libre-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-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}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-skin:hover .librevjs-big-play-button,.librevjs-libre-skin .librevjs-big-play-button:focus{color:#16a085}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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-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-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-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-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-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-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}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#01382f;background-color:#1de9b6}.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#004d40;background-color:#1de9b6}.librevjs-libre-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-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-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:400;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:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-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}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#1abb9c}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#1de9b6}.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}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-yellow.css b/librevideojs/css/librevideojs-material/libre-skin-yellow.css new file mode 100644 index 0000000..837e6d4 --- /dev/null +++ b/librevideojs/css/librevideojs-material/libre-skin-yellow.css @@ -0,0 +1,604 @@ +/*! +LibreVideoJS Estilos personalizados +Version 1.0 +Escrito por Jesús Eduardo +*/.librevjs-libre-skin { + color:#ccc; + background-color: inherit; +} +@font-face { + font-family:LibreVideoJS; + src: url('../../fonts/libre-material/libre-icons.eot'); + src: url('../../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'), 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#icomoon') format('svg'); + font-weight:400; + font-style:normal +} +.librevjs-libre-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-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-skin .librevjs-slider-handle { + width: 0; + height: 0; +} +.librevjs-libre-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + position: absolute; + top: 0; + left: 0; +} + +/* control bar + * */ +.librevjs-libre-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-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-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-skin.librevjs-controls-disabled .librevjs-control-bar { + display:none +} +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { + display:none +} +@media \0screen { + .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +.librevjs-libre-skin .librevjs-control { + outline:0; + position:relative; + float:left; + text-align:center; + margin:0; + padding:0; + height:3em; + width:4em +} +.librevjs-libre-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-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before { + color: #f1c40f; +} +/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ +.librevjs-libre-skin .librevjs-control:focus { +} +.librevjs-libre-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-skin .librevjs-play-control { + width:5em; + cursor:pointer; + color: rgb(241, 196, 14); +} +.librevjs-libre-skin .librevjs-play-control:before { + content:"\e001" +} +.librevjs-libre-skin .librevjs-play-control:hover:before { + color:#f39c12; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { + content:"\e002" +} +/*END Color y diseño de boton play control*/ +.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button { + cursor:pointer; + float:right +} +.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { + content:"\e006" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content:"\e003" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content:"\e004" +} +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content:"\e005" +} +.librevjs-libre-skin .librevjs-volume-control { + width:5em; + float:right +} +.librevjs-libre-skin .librevjs-volume-bar { + width:5em; + height:.6em; + margin:1.1em auto 0 +} +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { + height:2.9em +} + +/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ +.librevjs-libre-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-skin .librevjs-volume-bar .librevjs-volume-handle { + width:.5em; + height:.5em +} +.librevjs-libre-skin .librevjs-volume-handle:before { + font-size:.9em; + top:-.2em; + left:-.2em; + width:1em; + height:1em +} +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width:6em; + left:-4em +} +.librevjs-libre-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-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-skin .librevjs-progress-holder { + height:100% +} +.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-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-skin .librevjs-play-progress { + background: #f1c40f url() -50% 0 repeat; +} +.librevjs-libre-skin .librevjs-load-progress { + background:#646464; + background:rgba(255,255,255,.4) +} +.librevjs-libre-skin .librevjs-seek-handle { + width:1.5em; + height:100% +} +.librevjs-libre-skin .librevjs-seek-handle:before { + padding-top:.1em +} +.librevjs-libre-skin .librevjs-time-controls { + font-size:1em; + line-height:3em +} +.librevjs-libre-skin .librevjs-current-time { + float:left +} +.librevjs-libre-skin .librevjs-duration { + float:left +} +.librevjs-libre-skin .librevjs-remaining-time { + display:none; + float:left +} +.librevjs-time-divider { + float:left; + line-height:3em +} +.librevjs-libre-skin .librevjs-fullscreen-control { + width:3.8em; + cursor:pointer; + float:right +} +.librevjs-libre-skin .librevjs-fullscreen-control:before { + content:"\e000" +} +.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content:"\e00b" +} + +/*Centrado del button Play y personalizado*/ +.librevjs-libre-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-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-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-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} +.librevjs-libre-skin:hover .librevjs-big-play-button, +.librevjs-libre-skin .librevjs-big-play-button:focus { + color: rgb(244, 156, 18); /*color boton focus amarillo oscuro*/ +} +.librevjs-libre-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-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-skin .librevjs-menu-button { + float:right; + cursor:pointer +} +.librevjs-libre-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-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-skin .librevjs-menu-button:hover .librevjs-menu { + display:block +} +.librevjs-libre-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 DE SELECCION DE SUBTIULOS*/ +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { + color: #ffffff; + background-color: rgb(241, 196, 14); +} +.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #fff; + background-color: #f1c40f; +} +/*END COLOR SELECCION DE SUBTITULOS*/ +.librevjs-libre-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-skin .librevjs-subtitles-button:before { + content:"\e00c" +} +.librevjs-libre-skin .librevjs-captions-button:before { + content:"\e008" +} +.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-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:400; + 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-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*/ +ul li.librevjs-menu-title.librevjs-res-menu-title{ + color:#f1c40f; +} +ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ + color:#f39c12; +} +/*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; +} diff --git a/librevideojs/css/librevideojs-material/libre-skin-yellow.min.css b/librevideojs/css/librevideojs-material/libre-skin-yellow.min.css new file mode 100644 index 0000000..ea0a063 --- /dev/null +++ b/librevideojs/css/librevideojs-material/libre-skin-yellow.min.css @@ -0,0 +1,5 @@ +/*! +LibreVideoJS Estilos personalizados +Version 1.0 +Escrito por Jesús Eduardo +*/.librevjs-libre-skin{color:#ccc;background-color:inherit}@font-face{font-family:LibreVideoJS;src:url('../../fonts/libre-material/libre-icons.eot');src:url('../../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'),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#icomoon') format('svg');font-weight:400;font-style:normal}.librevjs-libre-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-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-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-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-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)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#f1c40f}.librevjs-libre-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#f1c40e}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#f39c12}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#f1c40f url() -50% 0 repeat}.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-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-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-skin .librevjs-progress-holder{height:100%}.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-skin .librevjs-play-progress{background:#f1c40f url() -50% 0 repeat}.librevjs-libre-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-skin .librevjs-time-controls{font-size:1em;line-height:3em}.librevjs-libre-skin .librevjs-current-time{float:left}.librevjs-libre-skin .librevjs-duration{float:left}.librevjs-libre-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-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}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-skin:hover .librevjs-big-play-button,.librevjs-libre-skin .librevjs-big-play-button:focus{color:#f49c12}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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-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-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-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-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-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-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}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#f1c40e}.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#f1c40f}.librevjs-libre-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-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-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:400;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:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-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}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#f1c40f}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#f39c12}.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}
\ No newline at end of file |