diff options
Diffstat (limited to 'librevideojs/css/libre-custom-skin/custom_skin.teal.css')
| -rw-r--r-- | librevideojs/css/libre-custom-skin/custom_skin.teal.css | 591 |
1 files changed, 0 insertions, 591 deletions
diff --git a/librevideojs/css/libre-custom-skin/custom_skin.teal.css b/librevideojs/css/libre-custom-skin/custom_skin.teal.css deleted file mode 100644 index 8cc2f12..0000000 --- a/librevideojs/css/libre-custom-skin/custom_skin.teal.css +++ /dev/null @@ -1,591 +0,0 @@ -/*! -LibreVideoJS. custom Styles -Version 0.1 -*/ -.librevjs-custom-skin { - color:#ccc; - background-color: inherit; -} -@font-face { - font-family:VideoJS; - src: url('../../fonts/default/vjs.eot'); - src: url('../../fonts/default/vjs.eot?#iefix') format('embedded-opentype'), url('../../fonts/default/vjs.woff') format('woff'), url('../../fonts/default/vjs.ttf') format('truetype'), url('../../fonts/default/vjs.svg#icomoon') format('svg'); - font-weight:400; - font-style:normal -} -.librevjs-custom-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-custom-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-custom-skin .librevjs-slider-handle { - width: 0; - height: 0; -} -.librevjs-custom-skin .librevjs-slider-handle:before { - width: 0; - height: 0; -} - -/* control bar - * */ -.librevjs-custom-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-custom-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-custom-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-custom-skin.librevjs-controls-disabled .librevjs-control-bar { - display:none -} -.librevjs-custom-skin.librevjs-using-native-controls .librevjs-control-bar { - display:none -} -@media \0screen { - .librevjs-custom-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -.librevjs-custom-skin .librevjs-control { - outline:0; - position:relative; - float:left; - text-align:center; - margin:0; - padding:0; - height:3em; - width:4em -} -.librevjs-custom-skin .librevjs-control:before { - font-family:VideoJS; - font-size:1.5em; - line-height:2; - position:absolute; - top:0; - left:0; - width:100%; - height:100%; - text-align:center; - text-shadow:1px 1px 1px rgba(0,0,0,.5) -} -.librevjs-custom-skin .librevjs-control:focus:before,.librevjs-custom-skin .librevjs-control:hover:before { - text-shadow:0 0 1em #fff -} -.librevjs-custom-skin .librevjs-control:focus { -} -.librevjs-custom-skin .librevjs-control-text { - border:0; - clip:rect(0 0 0 0); - height:1px; - margin:-1px; - overflow:hidden; - padding:0; - position:absolute; - width:1px -} -.librevjs-custom-skin .librevjs-play-control { - width:5em; - cursor:pointer -} -.librevjs-custom-skin .librevjs-play-control:before { - content:"\e001" -} -.librevjs-custom-skin.librevjs-playing .librevjs-play-control:before { - content:"\e002" -} -.librevjs-custom-skin .librevjs-mute-control,.librevjs-custom-skin .librevjs-volume-menu-button { - cursor:pointer; - float:right -} -.librevjs-custom-skin .librevjs-mute-control:before,.librevjs-custom-skin .librevjs-volume-menu-button:before { - content:"\e006" -} -.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-0:before { - content:"\e003" -} -.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-1:before { - content:"\e004" -} -.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-2:before { - content:"\e005" -} -.librevjs-custom-skin .librevjs-volume-control { - width:5em; - float:right -} -.librevjs-custom-skin .librevjs-volume-bar { - width:5em; - height:.6em; - margin:1.1em auto 0 -} -.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu-content { - height:2.9em -} - -/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-custom-skin .librevjs-volume-level { - position: absolute; - top: 0; - left: 0; - height: 0.5em; - /* assuming volume starts at 1.0 */ - - width: 100%; - background: #1de9b6 url() -50% 0 repeat; -} -/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-custom-skin .librevjs-volume-bar .librevjs-volume-handle { - width:.5em; - height:.5em -} -.librevjs-custom-skin .librevjs-volume-handle:before { - font-size:.9em; - top:-.2em; - left:-.2em; - width:1em; - height:1em -} -.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { - width:6em; - left:-4em -} -.librevjs-custom-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-custom-skin:hover .librevjs-progress-control { - font-size:.9em; - -webkit-transition:all .2s; - -moz-transition:all .2s; - -o-transition:all .2s; - transition:all .2s -} -.librevjs-custom-skin .librevjs-progress-holder { - height:100% -} -.librevjs-custom-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-custom-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-custom-skin .librevjs-play-progress { - background: #1de9b6 url() -50% 0 repeat; -} -.librevjs-custom-skin .librevjs-load-progress { - background:#646464; - background:rgba(255,255,255,.4) -} -.librevjs-custom-skin .librevjs-seek-handle { - width:1.5em; - height:100% -} -.librevjs-custom-skin .librevjs-seek-handle:before { - padding-top:.1em -} -.librevjs-custom-skin .librevjs-time-controls { - font-size:1em; - line-height:3em -} -.librevjs-custom-skin .librevjs-current-time { - float:left -} -.librevjs-custom-skin .librevjs-duration { - float:left -} -.librevjs-custom-skin .librevjs-remaining-time { - display:none; - float:left -} -.librevjs-time-divider { - float:left; - line-height:3em -} -.librevjs-custom-skin .librevjs-fullscreen-control { - width:3.8em; - cursor:pointer; - float:right -} -.librevjs-custom-skin .librevjs-fullscreen-control:before { - content:"\e000" -} -.librevjs-custom-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content:"\e00b" -} - -/*Centrado del button Play y personalizado*/ -.librevjs-custom-skin .librevjs-big-play-button { - /* Center it horizontally */ - left: 50%; - margin-left: -1.4em; - /* Center it vertically */ - top: 50%; - margin-top: -1.3em; - font-size: 2em; - display: block; - z-index: 2; - position: absolute; - width: 2.8em; - height: 2.6em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - /* Need a slightly gray bg so it can be seen on black backgrounds */ - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); - border: 0 solid ; - /* border-radius */ - -webkit-border-radius: 0.4em; - -moz-border-radius: 0.4em; - border-radius: 0.4em; - /* transition */ - -webkit-transition: all 0.4s; - -moz-transition: all 0.4s; - -o-transition: all 0.4s; - transition: all 0.4s; -} -/* Optionally center */ -.librevjs-custom-skin.librevjs-big-play-centered .librevjs-big-play-button { - /* Center it horizontally */ - left: 50%; - margin-left: -1.4em; - /* Center it vertically */ - top: 50%; - margin-top: -1.3em; -} -/* Hide if controls are disabled */ -.librevjs-custom-skin.librevjs-controls-disabled .librevjs-big-play-button { - display: none; -} -/* Hide when video starts playing */ -.librevjs-custom-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-custom-skin.librevjs-using-native-controls .librevjs-big-play-button { - display: none; -} -.librevjs-custom-skin:hover .librevjs-big-play-button, -.librevjs-custom-skin .librevjs-big-play-button:focus { - outline: 0; - cursor: pointer; - /* IE8 needs a non-glow hover state */ - background-color: #1de9b6; /*color del boton play al hacer focus*/ - color: #FFFFFF; -} -.librevjs-custom-skin .librevjs-big-play-button:before { - content: "\e001"; - font-family: VideoJS; - /* In order to center the play icon vertically we need to set the line height - to the same as the button height */ - - line-height: 2.6em; - text-shadow: 0.05em 0.05em 0.1em #000; - 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-custom-skin .librevjs-loading-spinner:before { - content:"\e01e"; - font-family:VideoJS; - 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-custom-skin .librevjs-menu-button { - float:right; - cursor:pointer -} -.librevjs-custom-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-custom-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-custom-skin .librevjs-menu-button:hover .librevjs-menu { - display:block -} -.librevjs-custom-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-custom-skin .librevjs-menu-button ul li.librevjs-selected { - color: rgb(1, 56, 47); - background-color: rgb(29, 233, 182); -} -.librevjs-custom-skin .librevjs-menu-button ul li:focus,.librevjs-custom-skin .librevjs-menu-button ul li:hover,.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:hover { - outline: 0; - color: #004d40; - background-color: #1de9b6; -} -/*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-custom-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-custom-skin .librevjs-subtitles-button:before { - content:"\e00c" -} -.librevjs-custom-skin .librevjs-captions-button:before { - content:"\e008" -} -.librevjs-custom-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-custom-skin .librevjs-captions-button:hover .librevjs-control-content:before { - -webkit-box-shadow:0 0 1em #fff; - -moz-box-shadow:0 0 1em #fff; - box-shadow:0 0 1em #fff -} -.cliplibre-js { - background-color:#000; - position:relative; - padding:0; - font-size:10px; - vertical-align:middle; - font-weight:400; - font-style:normal; - font-family:Arial,sans-serif; - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none -} -.cliplibre-js .librevjs-tech { - position:absolute; - top:0; - left:0; - width:100%; - height:100% -} -.cliplibre-js:-moz-full-screen { - position:absolute -} -body.librevjs-full-window { - padding:0; - margin:0; - height:100%; - overflow-y:auto -} -.cliplibre-js.librevjs-fullscreen { - position:fixed; - overflow:hidden; - z-index:1000; - left:0; - top:0; - bottom:0; - right:0; - width:100%!important; - height:100%!important; - position:absolute; -} -.cliplibre-js:-webkit-full-screen { - width:100%!important; - height:100%!important -} -.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { - cursor:none -} -.librevjs-poster { - background-repeat:no-repeat; - background-position:50% 50%; - background-size:contain; - cursor:pointer; - height:100%; - margin:0; - padding:0; - position:relative; - width:100% -} -.librevjs-poster img { - display:block; - margin:0 auto; - max-height:100%; - padding:0; - width:100% -} -.cliplibre-js.librevjs-using-native-controls .librevjs-poster { - display:none -} -.cliplibre-js .librevjs-text-track-display { - text-align:center; - position:absolute; - bottom:4em; - left:1em; - right:1em -} -.cliplibre-js .librevjs-text-track { - display:none; - font-size:1.5em; - text-align:center; - margin-bottom:.1em; - background-color:#000; - background-color:rgba(0,0,0,.6) -} -.cliplibre-js .librevjs-subtitles { - color:#fff -} -.cliplibre-js .librevjs-captions { - color:rgb(255, 237, 0); - background-color: rgba(2, 7, 11, 0.7); -} -.librevjs-tt-cue { - display:block -} -.librevjs-custom-skin .librevjs-hidden { - display:none -} -.librevjs-lock-showing { - display:block!important; - opacity:1; - visibility:visible -} |