diff options
Diffstat (limited to 'css/librevideojs-material/libre-skin-grey.css')
| -rw-r--r-- | css/librevideojs-material/libre-skin-grey.css | 789 |
1 files changed, 789 insertions, 0 deletions
diff --git a/css/librevideojs-material/libre-skin-grey.css b/css/librevideojs-material/libre-skin-grey.css new file mode 100644 index 0000000..73fc9d5 --- /dev/null +++ b/css/librevideojs-material/libre-skin-grey.css @@ -0,0 +1,789 @@ +/*! +LibreVideoJS Estilos personalizados = Grey +Version 1.2 +Escrito por Jesús Eduardo +*/ + +.librevjs-libre-skin { + color: #ccc; + background-color: inherit; +} + +@font-face { + font-family:"LibreVideoJS"; + src: url("../../fonts/libre-material/libre-icons.eot") 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); +} + +.librevjs-libre-skin .librevjs-slider:focus { + -webkit-box-shadow: 0 0 2em #fff; + -moz-box-shadow: 0 0 2em #fff; + box-shadow: 0 0 2em #fff +} + + +/*Eliminación de botón de barra de progreso*/ + +.librevjs-libre-skin .librevjs-slider-handle { + width: 0; + height: 0; +} + +.librevjs-libre-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + position: absolute; + top: 0; + left: 0; +} + + +/* control bar */ + +.librevjs-libre-skin .librevjs-control-bar { + /* Start hidden */ + display: none; + position: absolute; + /* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. + */ + bottom: 0; + /* Use left/right to stretch to 100% width of player div */ + left: 0; + right: 0; + /* Height includes any margin you want above or below control items */ + height: 3.0em; + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); +} + +.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { + display: block; + visibility: visible; + opacity: 1; + -webkit-transition: visibility .1s, opacity .1s; + -moz-transition: visibility .1s, opacity .1s; + -o-transition: visibility .1s, opacity .1s; + transition: visibility .1s, opacity .1s +} + +.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { + display: block; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 1s, opacity 1s; + -moz-transition: visibility 1s, opacity 1s; + -o-transition: visibility 1s, opacity 1s; + transition: visibility 1s, opacity 1s +} + +.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none +} + +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none +} + +@media \0screen { + .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } +} + +.librevjs-libre-skin .librevjs-control { + outline: 0; + position: relative; + float: left; + text-align: center; + margin: 0; + padding: 0; + height: 3em; + width: 4em +} + +.librevjs-libre-skin .librevjs-control:before { + font-family: LibreVideoJS; + font-size: 1.5em; + line-height: 2; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) +} + + +/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-control:focus:before, .librevjs-libre-skin .librevjs-control:hover:before { + color: #9e9e9e; +} + + +/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-control:focus {} + +.librevjs-libre-skin .librevjs-control-text { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px +} + + +/*Color y diseño de boton play control*/ + +.librevjs-libre-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: rgb(158, 158, 158); +} + +.librevjs-libre-skin .librevjs-play-control:before { + content: "\e001" +} + +.librevjs-libre-skin .librevjs-play-control:hover:before { + color: #7c7c7c; + /*color de play control al pasar el cursor*/ +} + +.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { + content: "\e002" +} + + +/*END Color y diseño de boton play control*/ + +.librevjs-libre-skin .librevjs-mute-control, .librevjs-libre-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right +} + +.librevjs-libre-skin .librevjs-mute-control:before, .librevjs-libre-skin .librevjs-volume-menu-button:before { + content: "\e006" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" +} + +.librevjs-libre-skin .librevjs-volume-control { + width: 5em; + float: right +} + +.librevjs-libre-skin .librevjs-volume-bar { + width: 5em; + height: .6em; + margin: 1.1em auto 0 +} + +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { + height: 2.9em +} + + +/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ + +.librevjs-libre-skin .librevjs-volume-level { + position: absolute; + top: 0; + left: 0; + height: 0.5em; + /* assuming volume starts at 1.0 */ + width: 100%; + background: #9e9e9e url() -50% 0 repeat; + /*color de barra volumen*/ +} + + +/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ + +.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { + width: .5em; + height: .5em +} + +.librevjs-libre-skin .librevjs-volume-handle:before { + font-size: .9em; + top: -.2em; + left: -.2em; + width: 1em; + height: 1em +} + +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width: 6em; + left: -4em +} + +.librevjs-libre-skin .librevjs-progress-control { + position: absolute; + left: 0; + right: 0; + width: auto; + font-size: .3em; + height: 1em; + top: -1em; + -webkit-transition: all .4s; + -moz-transition: all .4s; + -o-transition: all .4s; + transition: all .4s +} + +.librevjs-libre-skin:hover .librevjs-progress-control { + font-size: .9em; + -webkit-transition: all .2s; + -moz-transition: all .2s; + -o-transition: all .2s; + transition: all .2s +} + +.librevjs-libre-skin .librevjs-progress-holder { + height: 100% +} + +.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0 +} + + +/* Personalización de barra de progreso a color plata */ + +.librevjs-libre-skin .librevjs-play-progress { + background: #9e9e9e url() -50% 0 repeat; +} + +.librevjs-libre-skin .librevjs-load-progress { + background: #646464; + background: rgba(255, 255, 255, .4) +} + +.librevjs-libre-skin .librevjs-seek-handle { + width: 1.5em; + height: 100% +} + +.librevjs-libre-skin .librevjs-seek-handle:before { + padding-top: .1em +} + +.librevjs-libre-skin .librevjs-time-controls { + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em; +} + +.librevjs-libre-skin .librevjs-current-time { + float: left +} + +.librevjs-libre-skin .librevjs-duration { + float: left +} + +.librevjs-libre-skin .librevjs-remaining-time { + display: none; + float: left +} + +.librevjs-time-divider { + float: left; + line-height: 3em +} + +.librevjs-libre-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right +} + +.librevjs-libre-skin .librevjs-fullscreen-control:before { + content: "\e000" +} + +.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content: "\e00b" +} + + +/*Centrado del button Play y personalizado*/ + +.librevjs-libre-skin .librevjs-big-play-button { + left: 50%; + top: 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: #9e9e9e; + line-height: normal; +} + + +/* Hide if controls are disabled */ + +.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} + + +/* Hide when video starts playing */ + +.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { + display: none; +} + + +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile +*/ + +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-skin:hover .librevjs-big-play-button, .librevjs-libre-skin .librevjs-big-play-button:focus { + color: rgb(115, 115, 115); + /*color boton focus purpura oscuro*/ +} + +.librevjs-libre-skin .librevjs-big-play-button:before { + content: "\e007"; + font-family: LibreVideoJS; + /* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + text-align: center/* Needed for IE8 */ + ; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} + +.librevjs-error .librevjs-big-play-button { + display: none; +} + + +/*END PERSONALIZAR BIG PLAY BUTTON*/ + +.librevjs-loading-spinner { + display: none; + position: absolute; + top: 50%; + left: 50%; + font-size: 4em; + line-height: 1; + width: 1em; + height: 1em; + margin-left: -.5em; + margin-top: -.5em; + opacity: .75; + -webkit-animation: spin 1.5s infinite linear; + -moz-animation: spin 1.5s infinite linear; + -o-animation: spin 1.5s infinite linear; + animation: spin 1.5s infinite linear +} + +.librevjs-libre-skin .librevjs-loading-spinner:before { + content: "\e01e"; + font-family: LibreVideoJS; + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + text-align: center; + text-shadow: 0 0 .1em #000 +} + +@-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg) + } + 100% { + -moz-transform: rotate(359deg) + } +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg) + } + 100% { + -webkit-transform: rotate(359deg) + } +} + +@-o-keyframes spin { + 0% { + -o-transform: rotate(0deg) + } + 100% { + -o-transform: rotate(359deg) + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg) + } + 100% { + transform: rotate(359deg) + } +} + +.librevjs-libre-skin .librevjs-menu-button { + float: right; + cursor: pointer +} + +.librevjs-libre-skin .librevjs-menu { + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 0; + margin-bottom: 3em; + border-left: 2em solid transparent; + border-right: 2em solid transparent; + border-top: 1.55em solid #000; + border-top-color: rgba(7, 40, 50, .5) +} + +.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { + display: block; + padding: 0; + margin: 0; + position: absolute; + width: 10em; + bottom: 1.5em; + max-height: 15em; + overflow: auto; + left: -5em; + background-color: #07141e; + background-color: rgba(7, 20, 30, .7); + -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2) +} + +.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu { + display: block +} + +.librevjs-libre-skin .librevjs-menu-button ul li { + list-style: none; + margin: 0; + padding: .3em 0; + line-height: 1.4em; + font-size: 1.2em; + text-align: center; + text-transform: lowercase +} + + +/*COLOR DE SELECCION DE SUBTIULOS*/ + +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { + color: #ffffff; + background-color: rgb(158, 158, 158); +} + +.librevjs-libre-skin .librevjs-menu-button ul li:focus, .librevjs-libre-skin .librevjs-menu-button ul li:hover, .librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #fff; + background-color: #9e9e9e; +} + + +/*END COLOR SELECCION DE SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { + text-align: center; + text-transform: uppercase; + font-size: 1em; + line-height: 2em; + padding: 0; + margin: 0 0 .3em; + font-weight: 700; + cursor: default +} + +.librevjs-libre-skin .librevjs-subtitles-button:before { + content: "\e00c" +} + +.librevjs-libre-skin .librevjs-captions-button:before { + content: "\e008" +} + +.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before { + -webkit-box-shadow: 0 0 1em #fff; + -moz-box-shadow: 0 0 1em #fff; + box-shadow: 0 0 1em #fff +} + +.cliplibre-js { + background-color: #000; + position: relative; + padding: 0; + font-size: 10px; + vertical-align: middle; + font-weight: 500; + font-style: normal; + font-family: Arial, sans-serif; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none +} + +.cliplibre-js .librevjs-tech { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100% +} + +.cliplibre-js:-moz-full-screen { + position: absolute +} + +body.librevjs-full-window { + padding: 0; + margin: 0; + height: 100%; + overflow-y: auto +} + +.cliplibre-js.librevjs-fullscreen { + position: fixed; + overflow: hidden; + z-index: 1000; + left: 0; + top: 0; + bottom: 0; + right: 0; + width: 100%!important; + height: 100%!important; + position: absolute; +} + +.cliplibre-js:-webkit-full-screen { + width: 100%!important; + height: 100%!important +} + +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { + cursor: none +} + +.librevjs-poster { + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; + cursor: pointer; + height: 100%; + margin: 0; + padding: 0; + position: relative; + width: 100% +} + +.librevjs-poster img { + display: block; + margin: 0 auto; + max-height: 100%; + padding: 0; + width: 100% +} + +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { + display: none +} + +.cliplibre-js .librevjs-text-track-display { + text-align: center; + position: absolute; + bottom: 4em; + left: 1em; + right: 1em +} + +.cliplibre-js .librevjs-text-track { + display: none; + font-size: 1.8em; + text-align: center; + margin-bottom: .1em; + background-color: #000; + background-color: rgba(0, 0, 0, .6) +} + +.cliplibre-js .librevjs-subtitles { + color: #fff +} + +.cliplibre-js .librevjs-captions { + color: rgb(255, 237, 0); + background-color: rgba(2, 7, 11, 0.7); +} + +.librevjs-tt-cue { + display: block +} + +.librevjs-libre-skin .librevjs-hidden { + display: none +} + +.librevjs-lock-showing { + display: block!important; + opacity: 1; + visibility: visible +} + +.no_html5 { + background: black none repeat scroll 0 0; + color: white; + height: 160px; + padding: 130px 10px 20px; + text-align: center; +} + + +/*title de resolucion | subtitles y Caption*/ + +.librevjs-libre-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: #737373; +} + +.librevjs-libre-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover { + color: #9e9e9e; + background-color: inherit; +} + + +/*Responsive*/ + +.cliplibre-js-responsive-container.librevjs-hd { + padding-top: 56.25%; +} + +.cliplibre-js-responsive-container.librevjs-sd { + padding-top: 75%; +} + +.cliplibre-js-responsive-container { + width: 100%; + position: relative; +} + +.cliplibre-js-responsive-container .cliplibre-js { + height: 100% !important; + width: 100% !important; + position: absolute; + top: 0; + left: 0; +} + +@media screen and (max-width: 800px) { + .cliplibre-js .librevjs-text-track { + font-size: 1.5em; + margin-bottom: -0.2em; + } +} + +@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-skin .librevjs-big-play-button { + font-size: 5em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 1em; + } +} + +@media screen and (max-width: 335px) { + .cliplibre-js { + font-size: 6px; + } +} + +@media screen and (max-width: 150px) { + .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; + } +} |