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