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, 591 insertions, 0 deletions
diff --git a/librevideojs/css/libre-custom-skin/custom_skin.teal.css b/librevideojs/css/libre-custom-skin/custom_skin.teal.css new file mode 100644 index 0000000..8cc2f12 --- /dev/null +++ b/librevideojs/css/libre-custom-skin/custom_skin.teal.css @@ -0,0 +1,591 @@ +/*! +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 +} |