diff options
6 files changed, 2434 insertions, 2429 deletions
diff --git a/librevideojs/css/librevideojs-material/libre-skin-blue.css b/librevideojs/css/librevideojs-material/libre-skin-blue.css index 30cc9b0..3fc8406 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-blue.css +++ b/librevideojs/css/librevideojs-material/libre-skin-blue.css @@ -2,640 +2,641 @@ LibreVideoJS Estilos personalizados = blue Version 1.2 Escrito por Jesús Eduardo -*/.librevjs-libre-skin { - color:#ccc; - background-color: inherit; +*/ +.librevjs-libre-skin { +color:#ccc; +background-color: inherit; } @font-face { - font-family:"LibreVideoJS"; - src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); - src: local('?'), - url("../../fonts/libre-material/libre-icons.woff") format("woff"), - url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), - url("../../fonts/libre-material/libre-icons.svg") format("svg"); +font-family:"LibreVideoJS"; +src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); +src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); } .librevjs-libre-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); +/* 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 +-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; +width: 0; +height: 0; } .librevjs-libre-skin .librevjs-slider-handle:before { - text-shadow: 0em 0em 1em #fff; - position: absolute; - top: 0; - left: 0; +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; } -/* control bar - * */ +/* 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); +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 +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 +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 +display:none } .librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { - display:none +display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } +.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 +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) +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; +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 +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); +width:5em; +cursor:pointer; +color:rgb(33, 150, 244); } .librevjs-libre-skin .librevjs-play-control:before { - content:"\e001" +content:"\e001" } .librevjs-libre-skin .librevjs-play-control:hover:before { - color:#2980b9; /*color de play control al pasar el cursor*/ +color:#2980b9; /*color de play control al pasar el cursor*/ } .librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { - content:"\e002" +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 +cursor:pointer; +float:right } .librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { - content:"\e006" +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" +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" +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" +content:"\e005" } .librevjs-libre-skin .librevjs-volume-control { - width:5em; - float:right +width:5em; +float:right } .librevjs-libre-skin .librevjs-volume-bar { - width:5em; - height:.6em; - margin:1.1em auto 0 +width:5em; +height:.6em; +margin:1.1em auto 0 } .librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { - height:2.9em +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 */ +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*/ +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 +width:.5em; +height:.5em } .librevjs-libre-skin .librevjs-volume-handle:before { - font-size:.9em; - top:-.2em; - left:-.2em; - width:1em; - height:1em +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 +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 +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 +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% +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 +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; +background: #2196F3 url() -50% 0 repeat; } .librevjs-libre-skin .librevjs-load-progress { - background:#646464; - background:rgba(255,255,255,.4) +background:#646464; +background:rgba(255,255,255,.4) } .librevjs-libre-skin .librevjs-seek-handle { - width:1.5em; - height:100% +width:1.5em; +height:100% } .librevjs-libre-skin .librevjs-seek-handle:before { - padding-top:.1em +padding-top:.1em } .librevjs-libre-skin .librevjs-time-controls { - font-size:1em; - font-weight: 700;/*mayor visibilidad*/ - line-height:3em; +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em; } .librevjs-libre-skin .librevjs-current-time { - float:left +float:left } .librevjs-libre-skin .librevjs-duration { - float:left +float:left } .librevjs-libre-skin .librevjs-remaining-time { - display:none; - float:left +display:none; +float:left } .librevjs-time-divider { - float:left; - line-height:3em +float:left; +line-height:3em } .librevjs-libre-skin .librevjs-fullscreen-control { - width:3.8em; - cursor:pointer; - float:right +width:3.8em; +cursor:pointer; +float:right } .librevjs-libre-skin .librevjs-fullscreen-control:before { - content:"\e000" +content:"\e000" } .librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content:"\e00b" +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; +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; +display: none; } /* Hide when video starts playing */ .librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { - display: none; +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; +display: none; } .librevjs-libre-skin:hover .librevjs-big-play-button, .librevjs-libre-skin .librevjs-big-play-button:focus { - color: #0289f4; /*color boton 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 */ +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%; +text-align: center /* Needed for IE8 */; +position: absolute; +left: 0; +width: 100%; +height: 100%; } .librevjs-error .librevjs-big-play-button { - display: none; +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 +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 +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) - } +0% { + -moz-transform:rotate(0deg) + } +100% { + -moz-transform:rotate(359deg) + } } @-webkit-keyframes spin { - 0% { - -webkit-transform:rotate(0deg) - } - 100% { - -webkit-transform:rotate(359deg) - } +0% { + -webkit-transform:rotate(0deg) + } +100% { + -webkit-transform:rotate(359deg) + } } @-o-keyframes spin { - 0% { - -o-transform:rotate(0deg) - } - 100% { - -o-transform:rotate(359deg) - } +0% { + -o-transform:rotate(0deg) + } +100% { + -o-transform:rotate(359deg) + } } @keyframes spin { - 0% { - transform:rotate(0deg) - } - 100% { - transform:rotate(359deg) - } +0% { + transform:rotate(0deg) + } +100% { + transform:rotate(359deg) + } } .librevjs-libre-skin .librevjs-menu-button { - float:right; - cursor:pointer +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) +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) +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 +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 +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); +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; +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 +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" +content:"\e00c" } .librevjs-libre-skin .librevjs-captions-button:before { - content:"\e008" +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 +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff } .cliplibre-js { - background-color:#000; - position:relative; - padding:0; - font-size:10px; - vertical-align:middle; - font-weight:500; - font-style:normal; - font-family:Arial,sans-serif; - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none +background-color:#000; +position:relative; +padding:0; +font-size:10px; +vertical-align:middle; +font-weight:500; +font-style:normal; +font-family:Arial,sans-serif; +-webkit-user-select:none; +-moz-user-select:none; +-ms-user-select:none; +user-select:none } .cliplibre-js .librevjs-tech { - position:absolute; - top:0; - left:0; - width:100%; - height:100% +position:absolute; +top:0; +left:0; +width:100%; +height:100% } .cliplibre-js:-moz-full-screen { - position:absolute +position:absolute } body.librevjs-full-window { - padding:0; - margin:0; - height:100%; - overflow-y:auto +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; +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 +width:100%!important; +height:100%!important } .cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { - cursor:none +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% +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% +display:block; +margin:0 auto; +max-height:100%; +padding:0; +width:100% } .cliplibre-js.librevjs-using-native-controls .librevjs-poster { - display:none +display:none } .cliplibre-js .librevjs-text-track-display { - text-align:center; - position:absolute; - bottom:4em; - left:1em; - right:1em +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) +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 +color:#fff } .cliplibre-js .librevjs-captions { - color:rgb(255, 237, 0); - background-color: rgba(2, 7, 11, 0.7); +color:rgb(255, 237, 0); +background-color: rgba(2, 7, 11, 0.7); } .librevjs-tt-cue { - display:block +display:block } .librevjs-libre-skin .librevjs-hidden { - display:none +display:none } .librevjs-lock-showing { - display:block!important; - opacity:1; - visibility:visible +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; +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); +color: rgb(33, 150, 244); } ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ - color: rgb(11, 137, 237); +color: rgb(11, 137, 237); } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { - padding-top: 56.25%; +padding-top: 56.25%; } .cliplibre-js-responsive-container.librevjs-sd { - padding-top: 75%; +padding-top: 75%; } .cliplibre-js-responsive-container { - width: 100%; - position: relative; +width: 100%; +position: relative; } .cliplibre-js-responsive-container .cliplibre-js { - height: 100% !important; - width: 100% !important; - position: absolute; - top: 0; - left: 0; +height: 100% !important; +width: 100% !important; +position: absolute; +top: 0; +left: 0; } @media screen and (max-width: 600px){ - .cliplibre-js .librevjs-text-track{ - font-size: 1.2em; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 2em; - } + .cliplibre-js .librevjs-text-track{ + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 2em; + } } @media screen and (max-width: 400px){ - .cliplibre-js .librevjs-text-track{ - font-size: 0.9em; - } - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 5em; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 1em; - } + .cliplibre-js .librevjs-text-track{ + font-size: 0.9em; + } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 5em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { - top:35%; - } + .librevjs-libre-skin .librevjs-big-play-button { + top:35%; + } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 3em; - } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 3em; + } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 2em; - } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 2em; + } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-grey.css b/librevideojs/css/librevideojs-material/libre-skin-grey.css index f838c9a..082bd49 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-grey.css +++ b/librevideojs/css/librevideojs-material/libre-skin-grey.css @@ -2,639 +2,641 @@ LibreVideoJS Estilos personalizados = Grey Version 1.2 Escrito por Jesús Eduardo -*/.librevjs-libre-skin { - color:#ccc; - background-color: inherit; +*/ +.librevjs-libre-skin { +color:#ccc; +background-color: inherit; } @font-face { - font-family:"LibreVideoJS"; - src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); - src: local('?'), - url("../../fonts/libre-material/libre-icons.woff") format("woff"), - url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), - url("../../fonts/libre-material/libre-icons.svg") format("svg"); +font-family:"LibreVideoJS"; +src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); +src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); } .librevjs-libre-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); +/* 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 +-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; +width: 0; +height: 0; } .librevjs-libre-skin .librevjs-slider-handle:before { - text-shadow: 0em 0em 1em #fff; - position: absolute; - top: 0; - left: 0; +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; } -/* control bar - * */ +/* 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); +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 +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 +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 +display:none } .librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { - display:none +display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } + .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 +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) +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; +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 +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); +width:5em; +cursor:pointer; +color: rgb(158, 158, 158); } .librevjs-libre-skin .librevjs-play-control:before { - content:"\e001" +content:"\e001" } .librevjs-libre-skin .librevjs-play-control:hover:before { - color:#7c7c7c; /*color de play control al pasar el cursor*/ +color:#7c7c7c; /*color de play control al pasar el cursor*/ } .librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { - content:"\e002" +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 +cursor:pointer; +float:right } .librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { - content:"\e006" +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" +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" +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" +content:"\e005" } .librevjs-libre-skin .librevjs-volume-control { - width:5em; - float:right +width:5em; +float:right } .librevjs-libre-skin .librevjs-volume-bar { - width:5em; - height:.6em; - margin:1.1em auto 0 +width:5em; +height:.6em; +margin:1.1em auto 0 } .librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { - height:2.9em +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 */ +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*/ +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 +width:.5em; +height:.5em } .librevjs-libre-skin .librevjs-volume-handle:before { - font-size:.9em; - top:-.2em; - left:-.2em; - width:1em; - height:1em +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 +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 +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 +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% +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 +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; +background: #9e9e9e url() -50% 0 repeat; } .librevjs-libre-skin .librevjs-load-progress { - background:#646464; - background:rgba(255,255,255,.4) +background:#646464; +background:rgba(255,255,255,.4) } .librevjs-libre-skin .librevjs-seek-handle { - width:1.5em; - height:100% +width:1.5em; +height:100% } .librevjs-libre-skin .librevjs-seek-handle:before { - padding-top:.1em +padding-top:.1em } .librevjs-libre-skin .librevjs-time-controls { - font-size:1em; - font-weight: 700;/*mayor visibilidad*/ - line-height:3em; +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em; } .librevjs-libre-skin .librevjs-current-time { - float:left +float:left } .librevjs-libre-skin .librevjs-duration { - float:left +float:left } .librevjs-libre-skin .librevjs-remaining-time { - display:none; - float:left +display:none; +float:left } .librevjs-time-divider { - float:left; - line-height:3em +float:left; +line-height:3em } .librevjs-libre-skin .librevjs-fullscreen-control { - width:3.8em; - cursor:pointer; - float:right +width:3.8em; +cursor:pointer; +float:right } .librevjs-libre-skin .librevjs-fullscreen-control:before { - content:"\e000" +content:"\e000" } .librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content:"\e00b" +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; +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; +display: none; } /* Hide when video starts playing */ .librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { - display: none; +display: none; } /* Hide on mobile devices. Remove when we stop using native controls - by default on mobile */ + by default on mobile +*/ .librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { - display: none; +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*/ +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 */ +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%; +text-align: center /* Needed for IE8 */; +position: absolute; +left: 0; +width: 100%; +height: 100%; } .librevjs-error .librevjs-big-play-button { - display: none; +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 +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 +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) - } +0% { + -moz-transform:rotate(0deg) + } +100% { + -moz-transform:rotate(359deg) + } } @-webkit-keyframes spin { - 0% { - -webkit-transform:rotate(0deg) - } - 100% { - -webkit-transform:rotate(359deg) - } +0% { + -webkit-transform:rotate(0deg) + } +100% { + -webkit-transform:rotate(359deg) + } } @-o-keyframes spin { - 0% { - -o-transform:rotate(0deg) - } - 100% { - -o-transform:rotate(359deg) - } +0% { + -o-transform:rotate(0deg) + } +100% { + -o-transform:rotate(359deg) + } } @keyframes spin { - 0% { - transform:rotate(0deg) - } - 100% { - transform:rotate(359deg) - } +0% { + transform:rotate(0deg) + } +100% { + transform:rotate(359deg) + } } .librevjs-libre-skin .librevjs-menu-button { - float:right; - cursor:pointer +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) +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) +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 +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 +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); +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; +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 +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" +content:"\e00c" } .librevjs-libre-skin .librevjs-captions-button:before { - content:"\e008" +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 +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff } .cliplibre-js { - background-color:#000; - position:relative; - padding:0; - font-size:10px; - vertical-align:middle; - font-weight:500; - font-style:normal; - font-family:Arial,sans-serif; - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none +background-color:#000; +position:relative; +padding:0; +font-size:10px; +vertical-align:middle; +font-weight:500; +font-style:normal; +font-family:Arial,sans-serif; +-webkit-user-select:none; +-moz-user-select:none; +-ms-user-select:none; +user-select:none } .cliplibre-js .librevjs-tech { - position:absolute; - top:0; - left:0; - width:100%; - height:100% +position:absolute; +top:0; +left:0; +width:100%; +height:100% } .cliplibre-js:-moz-full-screen { - position:absolute +position:absolute } body.librevjs-full-window { - padding:0; - margin:0; - height:100%; - overflow-y:auto +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; +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 +width:100%!important; +height:100%!important } .cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { - cursor:none +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% +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% +display:block; +margin:0 auto; +max-height:100%; +padding:0; +width:100% } .cliplibre-js.librevjs-using-native-controls .librevjs-poster { - display:none +display:none } .cliplibre-js .librevjs-text-track-display { - text-align:center; - position:absolute; - bottom:4em; - left:1em; - right:1em +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) +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 +color:#fff } .cliplibre-js .librevjs-captions { - color:rgb(255, 237, 0); - background-color: rgba(2, 7, 11, 0.7); +color:rgb(255, 237, 0); +background-color: rgba(2, 7, 11, 0.7); } .librevjs-tt-cue { - display:block +display:block } .librevjs-libre-skin .librevjs-hidden { - display:none +display:none } .librevjs-lock-showing { - display:block!important; - opacity:1; - visibility:visible +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; +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; +color:#737373; } ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ - color:#9e9e9e; +color:#9e9e9e; } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { - padding-top: 56.25%; +padding-top: 56.25%; } .cliplibre-js-responsive-container.librevjs-sd { - padding-top: 75%; +padding-top: 75%; } .cliplibre-js-responsive-container { - width: 100%; - position: relative; +width: 100%; +position: relative; } .cliplibre-js-responsive-container .cliplibre-js { - height: 100% !important; - width: 100% !important; - position: absolute; - top: 0; - left: 0; +height: 100% !important; +width: 100% !important; +position: absolute; +top: 0; +left: 0; } @media screen and (max-width: 600px){ - .cliplibre-js .librevjs-text-track{ - font-size: 1.2em; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 2em; - } + .cliplibre-js .librevjs-text-track{ + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 2em; + } } @media screen and (max-width: 400px){ - .cliplibre-js .librevjs-text-track{ - font-size: 0.9em; - } - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 5em; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 1em; - } + .cliplibre-js .librevjs-text-track{ + font-size: 0.9em; + } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 5em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { - top:35%; - } + .librevjs-libre-skin .librevjs-big-play-button { + top:35%; + } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 3em; - } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 3em; + } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 2em; - } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 2em; + } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-purple.css b/librevideojs/css/librevideojs-material/libre-skin-purple.css index bc11cc9..aab498b 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-purple.css +++ b/librevideojs/css/librevideojs-material/libre-skin-purple.css @@ -2,639 +2,641 @@ LibreVideoJS Estilos personalizados = Purple Version 1.2 Escrito por Jesús Eduardo -*/.librevjs-libre-skin { - color:#ccc; - background-color: inherit; +*/ +.librevjs-libre-skin { +color:#ccc; +background-color: inherit; } @font-face { - font-family:"LibreVideoJS"; - src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); - src: local('?'), - url("../../fonts/libre-material/libre-icons.woff") format("woff"), - url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), - url("../../fonts/libre-material/libre-icons.svg") format("svg"); +font-family:"LibreVideoJS"; +src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); +src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); } .librevjs-libre-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); +/* 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 +-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; +width: 0; +height: 0; } .librevjs-libre-skin .librevjs-slider-handle:before { - text-shadow: 0em 0em 1em #fff; - position: absolute; - top: 0; - left: 0; +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; } -/* control bar - * */ +/* 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); +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 +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 +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 +display:none } .librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { - display:none +display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } + .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 +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) +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; +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 +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); +width:5em; +cursor:pointer; +color: rgb(156, 39, 176); } .librevjs-libre-skin .librevjs-play-control:before { - content:"\e001" +content:"\e001" } .librevjs-libre-skin .librevjs-play-control:hover:before { - color:#8e44ad; /*color de play control al pasar el cursor*/ +color:#8e44ad; /*color de play control al pasar el cursor*/ } .librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { - content:"\e002" +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 +cursor:pointer; +float:right } .librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { - content:"\e006" +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" +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" +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" +content:"\e005" } .librevjs-libre-skin .librevjs-volume-control { - width:5em; - float:right +width:5em; +float:right } .librevjs-libre-skin .librevjs-volume-bar { - width:5em; - height:.6em; - margin:1.1em auto 0 +width:5em; +height:.6em; +margin:1.1em auto 0 } .librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { - height:2.9em +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 */ +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*/ +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 +width:.5em; +height:.5em } .librevjs-libre-skin .librevjs-volume-handle:before { - font-size:.9em; - top:-.2em; - left:-.2em; - width:1em; - height:1em +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 +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 +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 +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% +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 +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; +background: #9c27b0 url() -50% 0 repeat; } .librevjs-libre-skin .librevjs-load-progress { - background:#646464; - background:rgba(255,255,255,.4) +background:#646464; +background:rgba(255,255,255,.4) } .librevjs-libre-skin .librevjs-seek-handle { - width:1.5em; - height:100% +width:1.5em; +height:100% } .librevjs-libre-skin .librevjs-seek-handle:before { - padding-top:.1em +padding-top:.1em } .librevjs-libre-skin .librevjs-time-controls { - font-size:1em; - font-weight: 700;/*mayor visibilidad*/ - line-height:3em; +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em; } .librevjs-libre-skin .librevjs-current-time { - float:left +float:left } .librevjs-libre-skin .librevjs-duration { - float:left +float:left } .librevjs-libre-skin .librevjs-remaining-time { - display:none; - float:left +display:none; +float:left } .librevjs-time-divider { - float:left; - line-height:3em +float:left; +line-height:3em } .librevjs-libre-skin .librevjs-fullscreen-control { - width:3.8em; - cursor:pointer; - float:right +width:3.8em; +cursor:pointer; +float:right } .librevjs-libre-skin .librevjs-fullscreen-control:before { - content:"\e000" +content:"\e000" } .librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content:"\e00b" +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; +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; +display: none; } /* Hide when video starts playing */ .librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { - display: none; +display: none; } /* Hide on mobile devices. Remove when we stop using native controls - by default on mobile */ + by default on mobile +*/ .librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { - display: none; +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*/ +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 */ +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%; +text-align: center /* Needed for IE8 */; +position: absolute; +left: 0; +width: 100%; +height: 100%; } .librevjs-error .librevjs-big-play-button { - display: none; +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 +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 +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) - } +0% { + -moz-transform:rotate(0deg) + } +100% { + -moz-transform:rotate(359deg) + } } @-webkit-keyframes spin { - 0% { - -webkit-transform:rotate(0deg) - } - 100% { - -webkit-transform:rotate(359deg) - } +0% { + -webkit-transform:rotate(0deg) + } +100% { + -webkit-transform:rotate(359deg) + } } @-o-keyframes spin { - 0% { - -o-transform:rotate(0deg) - } - 100% { - -o-transform:rotate(359deg) - } +0% { + -o-transform:rotate(0deg) + } +100% { + -o-transform:rotate(359deg) + } } @keyframes spin { - 0% { - transform:rotate(0deg) - } - 100% { - transform:rotate(359deg) - } +0% { + transform:rotate(0deg) + } +100% { + transform:rotate(359deg) + } } .librevjs-libre-skin .librevjs-menu-button { - float:right; - cursor:pointer +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) +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) +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 +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 +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); +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; +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 +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" +content:"\e00c" } .librevjs-libre-skin .librevjs-captions-button:before { - content:"\e008" +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 +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; } .cliplibre-js { - background-color:#000; - position:relative; - padding:0; - font-size:10px; - vertical-align:middle; - font-weight:500; - font-style:normal; - font-family:Arial,sans-serif; - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none +background-color:#000; +position:relative; +padding:0; +font-size:10px; +vertical-align:middle; +font-weight:500; +font-style:normal; +font-family:Arial,sans-serif; +-webkit-user-select:none; +-moz-user-select:none; +-ms-user-select:none; +user-select:none } .cliplibre-js .librevjs-tech { - position:absolute; - top:0; - left:0; - width:100%; - height:100% +position:absolute; +top:0; +left:0; +width:100%; +height:100% } .cliplibre-js:-moz-full-screen { - position:absolute +position:absolute; } body.librevjs-full-window { - padding:0; - margin:0; - height:100%; - overflow-y:auto +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; +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 +width:100%!important; +height:100%!important } .cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { - cursor:none +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% +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% +display:block; +margin:0 auto; +max-height:100%; +padding:0; +width:100% } .cliplibre-js.librevjs-using-native-controls .librevjs-poster { - display:none +display:none } .cliplibre-js .librevjs-text-track-display { - text-align:center; - position:absolute; - bottom:4em; - left:1em; - right:1em +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) +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 +color:#fff } .cliplibre-js .librevjs-captions { - color:rgb(255, 237, 0); - background-color: rgba(2, 7, 11, 0.7); +color:rgb(255, 237, 0); +background-color: rgba(2, 7, 11, 0.7); } .librevjs-tt-cue { - display:block +display:block } .librevjs-libre-skin .librevjs-hidden { - display:none +display:none } .librevjs-lock-showing { - display:block!important; - opacity:1; - visibility:visible +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; +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; +color:#9c27b0; } ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ - color:#8e44ad; +color:#8e44ad; } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { - padding-top: 56.25%; +padding-top: 56.25%; } .cliplibre-js-responsive-container.librevjs-sd { - padding-top: 75%; +padding-top: 75%; } .cliplibre-js-responsive-container { - width: 100%; - position: relative; +width: 100%; +position: relative; } .cliplibre-js-responsive-container .cliplibre-js { - height: 100% !important; - width: 100% !important; - position: absolute; - top: 0; - left: 0; +height: 100% !important; +width: 100% !important; +position: absolute; +top: 0; +left: 0; } @media screen and (max-width: 600px){ - .cliplibre-js .librevjs-text-track{ - font-size: 1.2em; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 2em; - } + .cliplibre-js .librevjs-text-track{ + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 2em; + } } @media screen and (max-width: 400px){ - .cliplibre-js .librevjs-text-track{ - font-size: 0.9em; - } - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 5em; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 1em; - } + .cliplibre-js .librevjs-text-track{ + font-size: 0.9em; + } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 5em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { - top:35%; - } + .librevjs-libre-skin .librevjs-big-play-button { + top:35%; + } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 3em; - } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 3em; + } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 2em; - } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 2em; + } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-red.css b/librevideojs/css/librevideojs-material/libre-skin-red.css index 79ee85b..887c332 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-red.css +++ b/librevideojs/css/librevideojs-material/libre-skin-red.css @@ -2,639 +2,639 @@ LibreVideoJS Estilos personalizados = Red Version 1.2 Escrito por Jesús Eduardo -*/.librevjs-libre-skin { - color:#ccc; - background-color: inherit; +*/ +.librevjs-libre-skin { +color:#ccc; +background-color: inherit; } @font-face { - font-family:"LibreVideoJS"; - src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); - src: local('?'), - url("../../fonts/libre-material/libre-icons.woff") format("woff"), - url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), - url("../../fonts/libre-material/libre-icons.svg") format("svg"); +font-family:"LibreVideoJS"; +src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); +src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); } .librevjs-libre-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); +/* 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 +-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; +width: 0; +height: 0; } .librevjs-libre-skin .librevjs-slider-handle:before { - text-shadow: 0em 0em 1em #fff; - position: absolute; - top: 0; - left: 0; +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; } -/* control bar - * */ +/* 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); +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 +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 +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 +display:none } .librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { - display:none +display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } + .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 +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) +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; +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 +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); +width:5em; +cursor:pointer; +color: rgb(244, 67, 54); } .librevjs-libre-skin .librevjs-play-control:before { - content:"\e001" +content:"\e001" } .librevjs-libre-skin .librevjs-play-control:hover:before { - color:#f22e1f; /*color de play control al pasar el cursor*/ +color:#f22e1f; /*color de play control al pasar el cursor*/ } .librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { - content:"\e002" +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 +cursor:pointer; +float:right } .librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { - content:"\e006" +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" +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" +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" +content:"\e005" } .librevjs-libre-skin .librevjs-volume-control { - width:5em; - float:right +width:5em; +float:right } .librevjs-libre-skin .librevjs-volume-bar { - width:5em; - height:.6em; - margin:1.1em auto 0 +width:5em; +height:.6em; +margin:1.1em auto 0 } .librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { - height:2.9em +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 */ +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*/ +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 +width:.5em; +height:.5em } .librevjs-libre-skin .librevjs-volume-handle:before { - font-size:.9em; - top:-.2em; - left:-.2em; - width:1em; - height:1em +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 +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 +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 +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% +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 +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; +background: #f44336 url() -50% 0 repeat; } .librevjs-libre-skin .librevjs-load-progress { - background:#646464; - background:rgba(255,255,255,.4) +background:#646464; +background:rgba(255,255,255,.4) } .librevjs-libre-skin .librevjs-seek-handle { - width:1.5em; - height:100% +width:1.5em; +height:100% } .librevjs-libre-skin .librevjs-seek-handle:before { - padding-top:.1em +padding-top:.1em } .librevjs-libre-skin .librevjs-time-controls { - font-size:1em; - font-weight: 700;/*mayor visibilidad*/ - line-height:3em +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em } .librevjs-libre-skin .librevjs-current-time { - float:left +float:left } .librevjs-libre-skin .librevjs-duration { - float:left +float:left } .librevjs-libre-skin .librevjs-remaining-time { - display:none; - float:left +display:none; +float:left } .librevjs-time-divider { - float:left; - line-height:3em +float:left; +line-height:3em } .librevjs-libre-skin .librevjs-fullscreen-control { - width:3.8em; - cursor:pointer; - float:right +width:3.8em; +cursor:pointer; +float:right } .librevjs-libre-skin .librevjs-fullscreen-control:before { - content:"\e000" +content:"\e000" } .librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content:"\e00b" +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; +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; +display: none; } /* Hide when video starts playing */ .librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { - display: none; +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; +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*/ +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 */ +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%; +text-align: center /* Needed for IE8 */; +position: absolute; +left: 0; +width: 100%; +height: 100%; } .librevjs-error .librevjs-big-play-button { - display: none; +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 +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 +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) - } +0% { + -moz-transform:rotate(0deg) + } +100% { + -moz-transform:rotate(359deg) + } } @-webkit-keyframes spin { - 0% { - -webkit-transform:rotate(0deg) - } - 100% { - -webkit-transform:rotate(359deg) - } +0% { + -webkit-transform:rotate(0deg) + } +100% { + -webkit-transform:rotate(359deg) + } } @-o-keyframes spin { - 0% { - -o-transform:rotate(0deg) - } - 100% { - -o-transform:rotate(359deg) - } +0% { + -o-transform:rotate(0deg) + } +100% { + -o-transform:rotate(359deg) + } } @keyframes spin { - 0% { - transform:rotate(0deg) - } - 100% { - transform:rotate(359deg) - } +0% { + transform:rotate(0deg) + } +100% { + transform:rotate(359deg) + } } .librevjs-libre-skin .librevjs-menu-button { - float:right; - cursor:pointer +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) +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) +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 +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 +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); +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; +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 +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" +content:"\e00c" } .librevjs-libre-skin .librevjs-captions-button:before { - content:"\e008" +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 +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff } .cliplibre-js { - background-color:#000; - position:relative; - padding:0; - font-size:10px; - vertical-align:middle; - font-weight:500; - font-style:normal; - font-family:Arial,sans-serif; - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none +background-color:#000; +position:relative; +padding:0; +font-size:10px; +vertical-align:middle; +font-weight:500; +font-style:normal; +font-family:Arial,sans-serif; +-webkit-user-select:none; +-moz-user-select:none; +-ms-user-select:none; +user-select:none; } .cliplibre-js .librevjs-tech { - position:absolute; - top:0; - left:0; - width:100%; - height:100% +position:absolute; +top:0; +left:0; +width:100%; +height:100%; } .cliplibre-js:-moz-full-screen { - position:absolute +position:absolute; } body.librevjs-full-window { - padding:0; - margin:0; - height:100%; - overflow-y:auto +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; +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 +width:100%!important; +height:100%!important } .cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { - cursor:none +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% +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% +display:block; +margin:0 auto; +max-height:100%; +padding:0; +width:100% } .cliplibre-js.librevjs-using-native-controls .librevjs-poster { - display:none +display:none } .cliplibre-js .librevjs-text-track-display { - text-align:center; - position:absolute; - bottom:4em; - left:1em; - right:1em +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) +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 +color:#fff } .cliplibre-js .librevjs-captions { - color:rgb(255, 237, 0); - background-color: rgba(2, 7, 11, 0.7); +color:rgb(255, 237, 0); +background-color: rgba(2, 7, 11, 0.7); } .librevjs-tt-cue { - display:block +display:block } .librevjs-libre-skin .librevjs-hidden { - display:none +display:none } .librevjs-lock-showing { - display:block!important; - opacity:1; - visibility:visible +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; +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); +color: rgb(246, 44, 30); } ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ - color: rgb(244, 67, 54); +color: rgb(244, 67, 54); } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { - padding-top: 56.25%; +padding-top: 56.25%; } .cliplibre-js-responsive-container.librevjs-sd { - padding-top: 75%; +padding-top: 75%; } .cliplibre-js-responsive-container { - width: 100%; - position: relative; +width: 100%; +position: relative; } .cliplibre-js-responsive-container .cliplibre-js { - height: 100% !important; - width: 100% !important; - position: absolute; - top: 0; - left: 0; +height: 100% !important; +width: 100% !important; +position: absolute; +top: 0; +left: 0; } @media screen and (max-width: 600px){ - .cliplibre-js .librevjs-text-track{ - font-size: 1.2em; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 2em; - } + .cliplibre-js .librevjs-text-track{ + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 2em; + } } @media screen and (max-width: 400px){ - .cliplibre-js .librevjs-text-track{ - font-size: 0.9em; - } - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 5em; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 1em; - } + .cliplibre-js .librevjs-text-track{ + font-size: 0.9em; + } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 5em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { - top:35%; - } + .librevjs-libre-skin .librevjs-big-play-button { + top:35%; + } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 3em; - } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 3em; + } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 2em; - } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 2em; + } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-teal.css b/librevideojs/css/librevideojs-material/libre-skin-teal.css index e876859..3ff8a7c 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-teal.css +++ b/librevideojs/css/librevideojs-material/libre-skin-teal.css @@ -1,641 +1,641 @@ /*! -LibreVideoJS Estilos personalizados +LibreVideoJS Estilos personalizados = Teal Version 1.2 Escrito por Jesús Eduardo -*/.librevjs-libre-skin { - color:#ccc; - background-color: inherit; +*/ +.librevjs-libre-skin { +color:#ccc; +background-color: inherit; } @font-face { - font-family:"LibreVideoJS"; - src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); - src: local('?'), - url("../../fonts/libre-material/libre-icons.woff") format("woff"), - url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), - url("../../fonts/libre-material/libre-icons.svg") format("svg"); +font-family:"LibreVideoJS"; +src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); +src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); } .librevjs-libre-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); +/* 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 +-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; +width: 0; +height: 0; } .librevjs-libre-skin .librevjs-slider-handle:before { - text-shadow: 0em 0em 1em #fff; - position: absolute; - top: 0; - left: 0; +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; } -/* control bar - * */ +/* 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); +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 +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 +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 +display:none } .librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { - display:none +display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } + .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 +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) +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; +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 +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); +width:5em; +cursor:pointer; +color:rgb(29, 233, 182); } .librevjs-libre-skin .librevjs-play-control:before { - content:"\e001" +content:"\e001" } .librevjs-libre-skin .librevjs-play-control:hover:before { - color:#007c5d; /*color de play control al pasar el cursor*/ +color:#007c5d; /*color de play control al pasar el cursor*/ } .librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { - content:"\e002" +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 +cursor:pointer; +float:right } .librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { - content:"\e006" +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" +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" +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" +content:"\e005" } .librevjs-libre-skin .librevjs-volume-control { - width:5em; - float:right +width:5em; +float:right } .librevjs-libre-skin .librevjs-volume-bar { - width:5em; - height:.6em; - margin:1.1em auto 0 +width:5em; +height:.6em; +margin:1.1em auto 0 } .librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { - height:2.9em +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 */ +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ - width: 100%; - background: #1de9b6 url() -50% 0 repeat; +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 +width:.5em; +height:.5em } .librevjs-libre-skin .librevjs-volume-handle:before { - font-size:.9em; - top:-.2em; - left:-.2em; - width:1em; - height:1em +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 +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 +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 +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% +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 +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; +background: #1de9b6 url() -50% 0 repeat; } .librevjs-libre-skin .librevjs-load-progress { - background:#646464; - background:rgba(255,255,255,.4) +background:#646464; +background:rgba(255,255,255,.4) } .librevjs-libre-skin .librevjs-seek-handle { - width:1.5em; - height:100% +width:1.5em; +height:100% } .librevjs-libre-skin .librevjs-seek-handle:before { - padding-top:.1em +padding-top:.1em } .librevjs-libre-skin .librevjs-time-controls { - font-size:1em; - font-weight: 700;/*mayor visibilidad*/ - line-height:3em +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em } .librevjs-libre-skin .librevjs-current-time { - float:left +float:left } .librevjs-libre-skin .librevjs-duration { - float:left +float:left } .librevjs-libre-skin .librevjs-remaining-time { - display:none; - float:left +display:none; +float:left } .librevjs-time-divider { - float:left; - line-height:3em +float:left; +line-height:3em } .librevjs-libre-skin .librevjs-fullscreen-control { - width:3.8em; - cursor:pointer; - float:right +width:3.8em; +cursor:pointer; +float:right } .librevjs-libre-skin .librevjs-fullscreen-control:before { - content:"\e000" +content:"\e000" } .librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content:"\e00b" +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; +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; +display: none; } /* Hide when video starts playing */ .librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { - display: none; +display: none; } /* Hide on mobile devices. Remove when we stop using native controls - by default on mobile */ + by default on mobile */ .librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { - display: none; +display: none; } .librevjs-libre-skin:hover .librevjs-big-play-button, .librevjs-libre-skin .librevjs-big-play-button:focus { - color: #16a085; +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 */ +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%; +text-align: center /* Needed for IE8 */; +position: absolute; +left: 0; +width: 100%; +height: 100%; } .librevjs-error .librevjs-big-play-button { - display: none; +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 +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 +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) - } +0% { + -moz-transform:rotate(0deg) + } +100% { + -moz-transform:rotate(359deg) + } } @-webkit-keyframes spin { - 0% { - -webkit-transform:rotate(0deg) - } - 100% { - -webkit-transform:rotate(359deg) - } +0% { + -webkit-transform:rotate(0deg) + } +100% { + -webkit-transform:rotate(359deg) + } } @-o-keyframes spin { - 0% { - -o-transform:rotate(0deg) - } - 100% { - -o-transform:rotate(359deg) - } +0% { + -o-transform:rotate(0deg) + } +100% { + -o-transform:rotate(359deg) + } } @keyframes spin { - 0% { - transform:rotate(0deg) - } - 100% { - transform:rotate(359deg) - } +0% { + transform:rotate(0deg) + } +100% { + transform:rotate(359deg) + } } .librevjs-libre-skin .librevjs-menu-button { - float:right; - cursor:pointer +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) +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) +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 +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 +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); +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; +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 +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" +content:"\e00c" } .librevjs-libre-skin .librevjs-captions-button:before { - content:"\e008" +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 +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; } .cliplibre-js { - background-color:#000; - position:relative; - padding:0; - font-size:10px; - vertical-align:middle; - font-weight:500; - font-style:normal; - font-family:Arial,sans-serif; - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none +background-color:#000; +position:relative; +padding:0; +font-size:10px; +vertical-align:middle; +font-weight:500; +font-style:normal; +font-family:Arial,sans-serif; +-webkit-user-select:none; +-moz-user-select:none; +-ms-user-select:none; +user-select:none } .cliplibre-js .librevjs-tech { - position:absolute; - top:0; - left:0; - width:100%; - height:100% +position:absolute; +top:0; +left:0; +width:100%; +height:100% } .cliplibre-js:-moz-full-screen { - position:absolute +position:absolute } body.librevjs-full-window { - padding:0; - margin:0; - height:100%; - overflow-y:auto +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; +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 +width:100%!important; +height:100%!important } .cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { - cursor:none +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% +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% +display:block; +margin:0 auto; +max-height:100%; +padding:0; +width:100% } .cliplibre-js.librevjs-using-native-controls .librevjs-poster { - display:none +display:none } .cliplibre-js .librevjs-text-track-display { - text-align:center; - position:absolute; - bottom:4em; - left:1em; - right:1em +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em } .cliplibre-js .librevjs-text-track { - display:none; - font-size:1.8em; - text-align:center; - margin-bottom:.1em; - background-color:#000; - background-color:rgba(0,0,0,.6) +display:none; +font-size:1.8em; +text-align:center; +margin-bottom:.1em; +background-color:#000; +background-color:rgba(0,0,0,.6) } .cliplibre-js .librevjs-subtitles { - color:#fff +color:#fff } .cliplibre-js .librevjs-captions { - color:rgb(255, 237, 0); - background-color: rgba(2, 7, 11, 0.7); +color:rgb(255, 237, 0); +background-color: rgba(2, 7, 11, 0.7); } .librevjs-tt-cue { - display:block +display:block } .librevjs-libre-skin .librevjs-hidden { - display:none +display:none } .librevjs-lock-showing { - display:block!important; - opacity:1; - visibility:visible +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; +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); +color:rgb(26, 187, 156); } ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ - color: rgb(29, 233, 182); +color: rgb(29, 233, 182); } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { - padding-top: 56.25%; +padding-top: 56.25%; } .cliplibre-js-responsive-container.librevjs-sd { - padding-top: 75%; +padding-top: 75%; } .cliplibre-js-responsive-container { - width: 100%; - position: relative; +width: 100%; +position: relative; } .cliplibre-js-responsive-container .cliplibre-js { - height: 100% !important; - width: 100% !important; - position: absolute; - top: 0; - left: 0; +height: 100% !important; +width: 100% !important; +position: absolute; +top: 0; +left: 0; } @media screen and (max-width: 600px){ - .cliplibre-js .librevjs-text-track{ - font-size: 1.2em; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 2em; - } + .cliplibre-js .librevjs-text-track{ + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 2em; + } } @media screen and (max-width: 400px){ - .cliplibre-js .librevjs-text-track{ - font-size: 0.9em; - } - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 5em; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 1em; - } + .cliplibre-js .librevjs-text-track{ + font-size: 0.9em; + } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 5em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { - top:35%; - } + .librevjs-libre-skin .librevjs-big-play-button { + top:35%; + } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 3em; - } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 3em; + } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 2em; - } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 2em; + } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-yellow.css b/librevideojs/css/librevideojs-material/libre-skin-yellow.css index 4b26f05..89ee06a 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-yellow.css +++ b/librevideojs/css/librevideojs-material/libre-skin-yellow.css @@ -1,640 +1,640 @@ /*! -LibreVideoJS Estilos personalizados +LibreVideoJS Estilos personalizados = Yellow Version 1.2 Escrito por Jesús Eduardo -*/.librevjs-libre-skin { - color:#ccc; - background-color: inherit; +*/ +.librevjs-libre-skin { +color:#ccc; +background-color: inherit; } @font-face { - font-family:"LibreVideoJS"; - src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); - src: local('?'), - url("../../fonts/libre-material/libre-icons.woff") format("woff"), - url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), - url("../../fonts/libre-material/libre-icons.svg") format("svg"); +font-family:"LibreVideoJS"; +src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); +src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); } .librevjs-libre-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); +/* 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 +-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; +width: 0; +height: 0; } .librevjs-libre-skin .librevjs-slider-handle:before { - text-shadow: 0em 0em 1em #fff; - position: absolute; - top: 0; - left: 0; +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; } -/* control bar - * */ +/* 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); +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 +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 +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 +display:none } .librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { - display:none +display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } + .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 +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) +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; +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 +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); +width:5em; +cursor:pointer; +color: rgb(241, 196, 14); } .librevjs-libre-skin .librevjs-play-control:before { - content:"\e001" +content:"\e001" } .librevjs-libre-skin .librevjs-play-control:hover:before { - color:#f39c12; /*color de play control al pasar el cursor*/ +color:#f39c12; /*color de play control al pasar el cursor*/ } .librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { - content:"\e002" +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 +cursor:pointer; +float:right } .librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { - content:"\e006" +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" +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" +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" +content:"\e005" } .librevjs-libre-skin .librevjs-volume-control { - width:5em; - float:right +width:5em; +float:right } .librevjs-libre-skin .librevjs-volume-bar { - width:5em; - height:.6em; - margin:1.1em auto 0 +width:5em; +height:.6em; +margin:1.1em auto 0; } .librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { - height:2.9em +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 */ +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*/ +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 +width:.5em; +height:.5em; } .librevjs-libre-skin .librevjs-volume-handle:before { - font-size:.9em; - top:-.2em; - left:-.2em; - width:1em; - height:1em +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 +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 +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 +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% +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 +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; +background: #f1c40f url() -50% 0 repeat; } .librevjs-libre-skin .librevjs-load-progress { - background:#646464; - background:rgba(255,255,255,.4) +background:#646464; +background:rgba(255,255,255,.4); } .librevjs-libre-skin .librevjs-seek-handle { - width:1.5em; - height:100% +width:1.5em; +height:100%; } .librevjs-libre-skin .librevjs-seek-handle:before { - padding-top:.1em +padding-top:.1em } .librevjs-libre-skin .librevjs-time-controls { - font-size:1em; - font-weight: 700;/*mayor visibilidad*/ - line-height:3em +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em; } .librevjs-libre-skin .librevjs-current-time { - float:left +float:left } .librevjs-libre-skin .librevjs-duration { - float:left +float:left } .librevjs-libre-skin .librevjs-remaining-time { - display:none; - float:left +display:none; +float:left; } .librevjs-time-divider { - float:left; - line-height:3em +float:left; +line-height:3em } .librevjs-libre-skin .librevjs-fullscreen-control { - width:3.8em; - cursor:pointer; - float:right +width:3.8em; +cursor:pointer; +float:right; } .librevjs-libre-skin .librevjs-fullscreen-control:before { - content:"\e000" +content:"\e000" } .librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content:"\e00b" +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; +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; +display: none; } /* Hide when video starts playing */ .librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { - display: none; +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; +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*/ +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 */ +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%; +text-align: center /* Needed for IE8 */; +position: absolute; +left: 0; +width: 100%; +height: 100%; } .librevjs-error .librevjs-big-play-button { - display: none; +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 +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 +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) - } +0% { + -moz-transform:rotate(0deg) + } +100% { + -moz-transform:rotate(359deg) + } } @-webkit-keyframes spin { - 0% { - -webkit-transform:rotate(0deg) - } - 100% { - -webkit-transform:rotate(359deg) - } +0% { + -webkit-transform:rotate(0deg) + } +100% { + -webkit-transform:rotate(359deg) + } } @-o-keyframes spin { - 0% { - -o-transform:rotate(0deg) - } - 100% { - -o-transform:rotate(359deg) - } +0% { + -o-transform:rotate(0deg) + } +100% { + -o-transform:rotate(359deg) + } } @keyframes spin { - 0% { - transform:rotate(0deg) - } - 100% { - transform:rotate(359deg) - } +0% { + transform:rotate(0deg) + } +100% { + transform:rotate(359deg) + } } .librevjs-libre-skin .librevjs-menu-button { - float:right; - cursor:pointer +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) +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) +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 +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 +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); +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; +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 +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" +content:"\e00c" } .librevjs-libre-skin .librevjs-captions-button:before { - content:"\e008" +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 +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff } .cliplibre-js { - background-color:#000; - position:relative; - padding:0; - font-size:10px; - vertical-align:middle; - font-weight:500; - font-style:normal; - font-family:Arial,sans-serif; - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none +background-color:#000; +position:relative; +padding:0; +font-size:10px; +vertical-align:middle; +font-weight:500; +font-style:normal; +font-family:Arial,sans-serif; +-webkit-user-select:none; +-moz-user-select:none; +-ms-user-select:none; +user-select:none; } .cliplibre-js .librevjs-tech { - position:absolute; - top:0; - left:0; - width:100%; - height:100% +position:absolute; +top:0; +left:0; +width:100%; +height:100% } .cliplibre-js:-moz-full-screen { - position:absolute +position:absolute } body.librevjs-full-window { - padding:0; - margin:0; - height:100%; - overflow-y:auto +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; +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 +width:100%!important; +height:100%!important } .cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { - cursor:none +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% +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% +display:block; +margin:0 auto; +max-height:100%; +padding:0; +width:100% } .cliplibre-js.librevjs-using-native-controls .librevjs-poster { - display:none +display:none } .cliplibre-js .librevjs-text-track-display { - text-align:center; - position:absolute; - bottom:4em; - left:1em; - right:1em +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) +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 +color:#fff } .cliplibre-js .librevjs-captions { - color:rgb(255, 237, 0); - background-color: rgba(2, 7, 11, 0.7); +color:rgb(255, 237, 0); +background-color: rgba(2, 7, 11, 0.7); } .librevjs-tt-cue { - display:block +display:block } .librevjs-libre-skin .librevjs-hidden { - display:none +display:none } .librevjs-lock-showing { - display:block!important; - opacity:1; - visibility:visible +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; +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; +color:#f1c40f; } ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ - color:#f39c12; +color:#f39c12; } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { - padding-top: 56.25%; +padding-top: 56.25%; } .cliplibre-js-responsive-container.librevjs-sd { - padding-top: 75%; +padding-top: 75%; } .cliplibre-js-responsive-container { - width: 100%; - position: relative; +width: 100%; +position: relative; } .cliplibre-js-responsive-container .cliplibre-js { - height: 100% !important; - width: 100% !important; - position: absolute; - top: 0; - left: 0; +height: 100% !important; +width: 100% !important; +position: absolute; +top: 0; +left: 0; } @media screen and (max-width: 600px){ - .cliplibre-js .librevjs-text-track{ - font-size: 1.2em; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 2em; - } + .cliplibre-js .librevjs-text-track{ + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 2em; + } } @media screen and (max-width: 400px){ - .cliplibre-js .librevjs-text-track{ - font-size: 0.9em; - } - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 5em; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 1em; - } + .cliplibre-js .librevjs-text-track{ + font-size: 0.9em; + } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 5em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { - top:35%; - } + .librevjs-libre-skin .librevjs-big-play-button { + top:35%; + } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 3em; - } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 3em; + } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ - font-size: 2em; - } + .librevjs-libre-skin .librevjs-big-play-button{ + font-size: 2em; + } } |