diff options
Diffstat (limited to 'librevideojs/css/material/libre-skin-blue.css')
| -rw-r--r-- | librevideojs/css/material/libre-skin-blue.css | 1017 |
1 files changed, 575 insertions, 442 deletions
diff --git a/librevideojs/css/material/libre-skin-blue.css b/librevideojs/css/material/libre-skin-blue.css index 6bbbecf..fb5eec9 100644 --- a/librevideojs/css/material/libre-skin-blue.css +++ b/librevideojs/css/material/libre-skin-blue.css @@ -3,655 +3,788 @@ LibreVideoJS Estilos personalizados = blue Version 1.2 Escrito por Jesús Eduardo */ + .librevjs-libre-materialblue-skin { -color:#ccc; -background-color: inherit; + 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-materialblue-skin .librevjs-slider { -/* Replace browser focus highlight with handle highlight */ -outline: 0; -position: relative; -cursor: pointer; -padding: 0; -/* background-color-with-alpha */ -background-color: #000000; -background-color: rgba(0, 0, 0, 0.5); + /* Replace browser focus highlight with handle highlight */ + outline: 0; + position: relative; + cursor: pointer; + padding: 0; + /* background-color-with-alpha */ + background-color: #000000; + background-color: rgba(0, 0, 0, 0.5); } + .librevjs-libre-materialblue-skin .librevjs-slider:focus { --webkit-box-shadow:0 0 2em #fff; --moz-box-shadow:0 0 2em #fff; -box-shadow:0 0 2em #fff + -webkit-box-shadow: 0 0 2em #fff; + -moz-box-shadow: 0 0 2em #fff; + box-shadow: 0 0 2em #fff } + /*Eliminación de botón de barra de progreso*/ + .librevjs-libre-materialblue-skin .librevjs-slider-handle { -width: 0; -height: 0; + width: 0; + height: 0; } + .librevjs-libre-materialblue-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 */ + .librevjs-libre-materialblue-skin .librevjs-control-bar { -/* Start hidden */ -display: none; -position: absolute; -/* Place control bar at the bottom of the player box/video. + /* 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); + bottom: 0; + /* Use left/right to stretch to 100% width of player div */ + left: 0; + right: 0; + /* Height includes any margin you want above or below control items */ + height: 3.0em; + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); } + .librevjs-libre-materialblue-skin.librevjs-has-started .librevjs-control-bar { -display:block; -visibility:visible; -opacity:1; --webkit-transition:visibility .1s,opacity .1s; --moz-transition:visibility .1s,opacity .1s; --o-transition:visibility .1s,opacity .1s; -transition:visibility .1s,opacity .1s + display: block; + visibility: visible; + opacity: 1; + -webkit-transition: visibility .1s, opacity .1s; + -moz-transition: visibility .1s, opacity .1s; + -o-transition: visibility .1s, opacity .1s; + transition: visibility .1s, opacity .1s } + .librevjs-libre-materialblue-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { -display:block; -visibility:hidden; -opacity:0; --webkit-transition:visibility 1s,opacity 1s; --moz-transition:visibility 1s,opacity 1s; --o-transition:visibility 1s,opacity 1s; -transition:visibility 1s,opacity 1s + display: block; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 1s, opacity 1s; + -moz-transition: visibility 1s, opacity 1s; + -o-transition: visibility 1s, opacity 1s; + transition: visibility 1s, opacity 1s } + .librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-control-bar { -display:none + display: none } + .librevjs-libre-materialblue-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none + display: none } + @media \0screen { -.librevjs-libre-materialblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { -content:"" -} + .librevjs-libre-materialblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } } + .librevjs-libre-materialblue-skin .librevjs-control { -outline:0; -position:relative; -float:left; -text-align:center; -margin:0; -padding:0; -height:3em; -width:4em + outline: 0; + position: relative; + float: left; + text-align: center; + margin: 0; + padding: 0; + height: 3em; + width: 4em } + .librevjs-libre-materialblue-skin .librevjs-control:before { -font-family:LibreVideoJS; -font-size:1.5em; -line-height:2; -position:absolute; -top:0; -left:0; -width:100%; -height:100%; -text-align:center; -text-shadow:1px 1px 1px rgba(0,0,0,.5) + font-family: LibreVideoJS; + font-size: 1.5em; + line-height: 2; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) } + + /*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-materialblue-skin .librevjs-control:focus:before,.librevjs-libre-materialblue-skin .librevjs-control:hover:before { -color: #2196F3; + +.librevjs-libre-materialblue-skin .librevjs-control:focus:before, .librevjs-libre-materialblue-skin .librevjs-control:hover:before { + color: #2196F3; } + + /*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-materialblue-skin .librevjs-control:focus { -} + +.librevjs-libre-materialblue-skin .librevjs-control:focus {} + .librevjs-libre-materialblue-skin .librevjs-control-text { -border:0; -clip:rect(0 0 0 0); -height:1px; -margin:-1px; -overflow:hidden; -padding:0; -position:absolute; -width:1px + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px } + /*Color y diseño de boton play control*/ + .librevjs-libre-materialblue-skin .librevjs-play-control { -width:5em; -cursor:pointer; -color:rgb(33, 150, 244); + width: 5em; + cursor: pointer; + color: rgb(33, 150, 244); } + .librevjs-libre-materialblue-skin .librevjs-play-control:before { -content:"\e001" + content: "\e001" } + .librevjs-libre-materialblue-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-materialblue-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" + content: "\e002" } + + /*END Color y diseño de boton play control*/ -.librevjs-libre-materialblue-skin .librevjs-mute-control,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button { -cursor:pointer; -float:right + +.librevjs-libre-materialblue-skin .librevjs-mute-control, .librevjs-libre-materialblue-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right } -.librevjs-libre-materialblue-skin .librevjs-mute-control:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button:before { -content:"\e006" + +.librevjs-libre-materialblue-skin .librevjs-mute-control:before, .librevjs-libre-materialblue-skin .librevjs-volume-menu-button:before { + content: "\e006" } -.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before { -content:"\e003" + +.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" } -.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before { -content:"\e004" + +.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" } -.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before { -content:"\e005" + +.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" } + .librevjs-libre-materialblue-skin .librevjs-volume-control { -width:5em; -float:right + width: 5em; + float: right } + .librevjs-libre-materialblue-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 + width: 5em; + height: .6em; + margin: 1.1em auto 0 } + .librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em + height: 2.9em } + /*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-materialblue-skin .librevjs-volume-level { -position: absolute; -top: 0; -left: 0; -height: 0.5em; -/* assuming volume starts at 1.0 */ -width: 100%; -background: #2196F3 url() -50% 0 repeat; /*color de barra volumen*/ +.librevjs-libre-materialblue-skin .librevjs-volume-level { + position: absolute; + top: 0; + left: 0; + height: 0.5em; + /* assuming volume starts at 1.0 */ + width: 100%; + background: #2196F3 url() -50% 0 repeat; + /*color de barra volumen*/ } + + /*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ + .librevjs-libre-materialblue-skin .librevjs-volume-bar .librevjs-volume-handle { -width:.5em; -height:.5em + width: .5em; + height: .5em } + .librevjs-libre-materialblue-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-materialblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { -width:6em; -left:-4em + width: 6em; + left: -4em } + .librevjs-libre-materialblue-skin .librevjs-progress-control { -position:absolute; -left:0; -right:0; -width:auto; -font-size:.3em; -height:1em; -top:-1em; --webkit-transition:all .4s; --moz-transition:all .4s; --o-transition:all .4s; -transition:all .4s + position: absolute; + left: 0; + right: 0; + width: auto; + font-size: .3em; + height: 1em; + top: -1em; + -webkit-transition: all .4s; + -moz-transition: all .4s; + -o-transition: all .4s; + transition: all .4s } + .librevjs-libre-materialblue-skin:hover .librevjs-progress-control { -font-size:.9em; --webkit-transition:all .2s; --moz-transition:all .2s; --o-transition:all .2s; -transition:all .2s + font-size: .9em; + -webkit-transition: all .2s; + -moz-transition: all .2s; + -o-transition: all .2s; + transition: all .2s } + .librevjs-libre-materialblue-skin .librevjs-progress-holder { -height:100% + height: 100% } -.librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-load-progress { -position:absolute; -display:block; -height:100%; -margin:0; -padding:0; -left:0; -top:0 + +.librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0 } + /* Personalización de barra de progreso a color azul */ + .librevjs-libre-materialblue-skin .librevjs-play-progress { -background: #2196F3 url() -50% 0 repeat; + background: #2196F3 url() -50% 0 repeat; } + .librevjs-libre-materialblue-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) + background: #646464; + background: rgba(255, 255, 255, .4) } + .librevjs-libre-materialblue-skin .librevjs-seek-handle { -width:1.5em; -height:100% + width: 1.5em; + height: 100% } + .librevjs-libre-materialblue-skin .librevjs-seek-handle:before { -padding-top:.1em + padding-top: .1em } + .librevjs-libre-materialblue-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-materialblue-skin .librevjs-current-time { -float:left + float: left } + .librevjs-libre-materialblue-skin .librevjs-duration { -float:left + float: left } + .librevjs-libre-materialblue-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-materialblue-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right + width: 3.8em; + cursor: pointer; + float: right } + .librevjs-libre-materialblue-skin .librevjs-fullscreen-control:before { -content:"\e000" + content: "\e000" } + .librevjs-libre-materialblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { -content:"\e00b" + content: "\e00b" } + /*Centrado del button Play y personalizado*/ + .librevjs-libre-materialblue-skin .librevjs-big-play-button { -left: 50%; -top: 50%; -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; -line-height: normal; + left: 50%; + top: 50%; + 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; + line-height: normal; } + + /* Hide if controls are disabled */ + .librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; + display: none; } + + /* Hide when video starts playing */ + .librevjs-libre-materialblue-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-materialblue-skin.librevjs-using-native-controls .librevjs-big-play-button { -display: none; + display: none; } -.librevjs-libre-materialblue-skin:hover .librevjs-big-play-button, -.librevjs-libre-materialblue-skin .librevjs-big-play-button:focus { -color: #0289f4; /*color boton focus*/ + +.librevjs-libre-materialblue-skin:hover .librevjs-big-play-button, .librevjs-libre-materialblue-skin .librevjs-big-play-button:focus { + color: #0289f4; + /*color boton focus*/ } + .librevjs-libre-materialblue-skin .librevjs-big-play-button:before { -content: "\e007"; -font-family: LibreVideoJS; -/* In order to center the play icon vertically we need to set the line height + 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-materialblue-skin .librevjs-loading-spinner:before { -content:"\e01e"; -font-family:LibreVideoJS; -position:absolute; -top:0; -left:0; -width:1em; -height:1em; -text-align:center; -text-shadow:0 0 .1em #000 + 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-materialblue-skin .librevjs-menu-button { -float:right; -cursor:pointer + float: right; + cursor: pointer } + .librevjs-libre-materialblue-skin .librevjs-menu { -display:none; -position:absolute; -bottom:0; -left:0; -width:0; -height:0; -margin-bottom:3em; -border-left:2em solid transparent; -border-right:2em solid transparent; -border-top:1.55em solid #000; -border-top-color:rgba(7,40,50,.5) + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 0; + margin-bottom: 3em; + border-left: 2em solid transparent; + border-right: 2em solid transparent; + border-top: 1.55em solid #000; + border-top-color: rgba(7, 40, 50, .5) } + .librevjs-libre-materialblue-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { -display:block; -padding:0; -margin:0; -position:absolute; -width:10em; -bottom:1.5em; -max-height:15em; -overflow:auto; -left:-5em; -background-color:#07141e; -background-color:rgba(7,20,30,.7); --webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); --moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); -box-shadow:-.2em -.2em .3em rgba(255,255,255,.2) + display: block; + padding: 0; + margin: 0; + position: absolute; + width: 10em; + bottom: 1.5em; + max-height: 15em; + overflow: auto; + left: -5em; + background-color: #07141e; + background-color: rgba(7, 20, 30, .7); + -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2) } + .librevjs-libre-materialblue-skin .librevjs-menu-button:hover .librevjs-menu { -display:block + display: block } + .librevjs-libre-materialblue-skin .librevjs-menu-button ul li { -list-style:none; -margin:0; -padding:.3em 0; -line-height:1.4em; -font-size:1.2em; -text-align:center; -text-transform:lowercase; -color: #ccc; + list-style: none; + margin: 0; + padding: .3em 0; + line-height: 1.4em; + font-size: 1.2em; + text-align: center; + text-transform: lowercase; + color: #ccc; } + /*COLOR DE SELECCION DE SUBTIULOS*/ + .librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected { -color: #ffffff; -background-color: rgb(33, 150, 244); + color: #ffffff; + background-color: rgb(33, 150, 244); } -.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:hover { -outline: 0; -color: #fff; -background-color: #2196F3; + +.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:focus, .librevjs-libre-materialblue-skin .librevjs-menu-button ul li:hover, .librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #fff; + background-color: #2196F3; } + + /*END COLOR SELECCION DE SUBTITULOS*/ + .librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-menu-title { -text-align:center; -text-transform:uppercase; -font-size:1em; -line-height:2em; -padding:0; -margin:0 0 .3em; -font-weight:700; -cursor:default + text-align: center; + text-transform: uppercase; + font-size: 1em; + line-height: 2em; + padding: 0; + margin: 0 0 .3em; + font-weight: 700; + cursor: default } + .librevjs-libre-materialblue-skin .librevjs-subtitles-button:before { -content:"\e00c" + content: "\e00c" } + .librevjs-libre-materialblue-skin .librevjs-captions-button:before { -content:"\e008" + content: "\e008" } -.librevjs-libre-materialblue-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialblue-skin .librevjs-captions-button:hover .librevjs-control-content:before { --webkit-box-shadow:0 0 1em #fff; --moz-box-shadow:0 0 1em #fff; -box-shadow:0 0 1em #fff + +.librevjs-libre-materialblue-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-materialblue-skin .librevjs-captions-button:hover .librevjs-control-content:before { + -webkit-box-shadow: 0 0 1em #fff; + -moz-box-shadow: 0 0 1em #fff; + box-shadow: 0 0 1em #fff } + .cliplibre-js { -background-color:#000; -position:relative; -padding:0; -font-size:10px; -vertical-align:middle; -font-weight:500; -font-style:normal; -font-family:Arial,sans-serif; --webkit-user-select:none; --moz-user-select:none; --ms-user-select:none; -user-select:none + 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-materialblue-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*/ -.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ -color: rgb(33, 150, 244); -background-color: inherit; + +.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: rgb(33, 150, 244); + background-color: inherit; } -.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ -color: rgb(11, 137, 237); -background-color: inherit; + +.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover { + color: rgb(11, 137, 237); + background-color: inherit; } + /*Responsive*/ + .cliplibre-js-responsive-container.librevjs-hd { -padding-top: 56.25%; + 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; -} -@media screen and (max-width: 600px){ - .cliplibre-js .librevjs-text-track{ - font-size: 1.2em; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 2em; - } -} -@media screen and (max-width: 413px){ - .cliplibre-js { - font-size:8px; - } -} -@media screen and (max-width: 400px){ - .cliplibre-js .librevjs-text-track{ - font-size: 0.9em; - } - .librevjs-libre-materialblue-skin .librevjs-big-play-button{ - font-size: 5em; - top: 50%; - } - .cliplibre-js .librevjs-text-track-display{ - bottom: 1em; - } -} -@media screen and (max-width: 335px){ - .cliplibre-js { - font-size:6px; - } -} -@media screen and (max-width: 200px){ - .librevjs-libre-materialblue-skin .librevjs-big-play-button { - top:50%; - } -} -@media screen and (max-width: 150px){ - .librevjs-libre-materialblue-skin .librevjs-big-play-button{ - font-size: 3em; - } -} -@media screen and (max-width: 90px){ - .librevjs-libre-materialblue-skin .librevjs-big-play-button{ - font-size: 2em; - } + height: 100% !important; + width: 100% !important; + position: absolute; + top: 0; + left: 0; +} + +@media screen and (max-width: 600px) { + .cliplibre-js .librevjs-text-track { + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 2em; + } +} + +@media screen and (max-width: 413px) { + .cliplibre-js { + font-size: 8px; + } +} + +@media screen and (max-width: 400px) { + .cliplibre-js .librevjs-text-track { + font-size: 0.9em; + } + .librevjs-libre-materialblue-skin .librevjs-big-play-button { + font-size: 5em; + top: 50%; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 1em; + } +} + +@media screen and (max-width: 335px) { + .cliplibre-js { + font-size: 6px; + } +} + +@media screen and (max-width: 200px) { + .librevjs-libre-materialblue-skin .librevjs-big-play-button { + top: 50%; + } +} + +@media screen and (max-width: 150px) { + .librevjs-libre-materialblue-skin .librevjs-big-play-button { + font-size: 3em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-materialblue-skin .librevjs-big-play-button { + font-size: 2em; + } } |