diff options
Diffstat (limited to 'librevideojs/css')
28 files changed, 11176 insertions, 2838 deletions
diff --git a/librevideojs/css/default/cliplibre-js.dev.css b/librevideojs/css/default/cliplibre-js.dev.css deleted file mode 100644 index 70a4a5a..0000000 --- a/librevideojs/css/default/cliplibre-js.dev.css +++ /dev/null @@ -1,576 +0,0 @@ -/*! -Video.js Default Styles (http://videojs.com) -Version 4.3.0 -Create your own skin at http://designer.videojs.com -*/.librevjs-default-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-default-skin .librevjs-slider { - outline:0; - position:relative; - cursor:pointer; - padding:0; - background-color:#333; - background-color:rgba(51,51,51,.9) -} -.librevjs-default-skin .librevjs-slider:focus { - -webkit-box-shadow:0 0 2em #fff; - -moz-box-shadow:0 0 2em #fff; - box-shadow:0 0 2em #fff -} -.librevjs-default-skin .librevjs-slider-handle { - position:absolute; - left:0; - top:0 -} -.librevjs-default-skin .librevjs-slider-handle:before { - content:"\e009"; - font-family:VideoJS; - font-size:1em; - line-height:1; - text-align:center; - text-shadow:0 0 1em #fff; - position:absolute; - top:0; - left:0; - -webkit-transform:rotate(-45deg); - -moz-transform:rotate(-45deg); - -ms-transform:rotate(-45deg); - -o-transform:rotate(-45deg); - transform:rotate(-45deg) -} -.librevjs-default-skin .librevjs-control-bar { - display:none; - position:absolute; - bottom:0; - left:0; - right:0; - height:3em; - background-color:#07141e; - background-color:rgba(7,20,30,.7) -} -.librevjs-default-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-default-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-default-skin.librevjs-controls-disabled .librevjs-control-bar { - display:none -} -.librevjs-default-skin.librevjs-using-native-controls .librevjs-control-bar { - display:none -} -@media \0screen { - .librevjs-default-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -.librevjs-default-skin .librevjs-control { - outline:0; - position:relative; - float:left; - text-align:center; - margin:0; - padding:0; - height:3em; - width:4em -} -.librevjs-default-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-default-skin .librevjs-control:focus:before,.librevjs-default-skin .librevjs-control:hover:before { - text-shadow:0 0 1em #fff -} -.librevjs-default-skin .librevjs-control:focus { -} -.librevjs-default-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-default-skin .librevjs-play-control { - width:5em; - cursor:pointer -} -.librevjs-default-skin .librevjs-play-control:before { - content:"\e001" -} -.librevjs-default-skin.librevjs-playing .librevjs-play-control:before { - content:"\e002" -} -.librevjs-default-skin .librevjs-mute-control,.librevjs-default-skin .librevjs-volume-menu-button { - cursor:pointer; - float:right -} -.librevjs-default-skin .librevjs-mute-control:before,.librevjs-default-skin .librevjs-volume-menu-button:before { - content:"\e006" -} -.librevjs-default-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-default-skin .librevjs-volume-menu-button.librevjs-vol-0:before { - content:"\e003" -} -.librevjs-default-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-default-skin .librevjs-volume-menu-button.librevjs-vol-1:before { - content:"\e004" -} -.librevjs-default-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-default-skin .librevjs-volume-menu-button.librevjs-vol-2:before { - content:"\e005" -} -.librevjs-default-skin .librevjs-volume-control { - width:5em; - float:right -} -.librevjs-default-skin .librevjs-volume-bar { - width:5em; - height:.6em; - margin:1.1em auto 0 -} -.librevjs-default-skin .librevjs-volume-menu-button .librevjs-menu-content { - height:2.9em -} -.librevjs-default-skin .librevjs-volume-level { - position:absolute; - top:0; - left:0; - height:.5em; - background:#66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat -} -.librevjs-default-skin .librevjs-volume-bar .librevjs-volume-handle { - width:.5em; - height:.5em -} -.librevjs-default-skin .librevjs-volume-handle:before { - font-size:.9em; - top:-.2em; - left:-.2em; - width:1em; - height:1em -} -.librevjs-default-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { - width:6em; - left:-4em -} -.librevjs-default-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-default-skin:hover .librevjs-progress-control { - font-size:.9em; - -webkit-transition:all .2s; - -moz-transition:all .2s; - -o-transition:all .2s; - transition:all .2s -} -.librevjs-default-skin .librevjs-progress-holder { - height:100% -} -.librevjs-default-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-default-skin .librevjs-progress-holder .librevjs-load-progress { - position:absolute; - display:block; - height:100%; - margin:0; - padding:0; - left:0; - top:0 -} -.librevjs-default-skin .librevjs-play-progress { - background:#66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat -} -.librevjs-default-skin .librevjs-load-progress { - background:#646464; - background:rgba(255,255,255,.4) -} -.librevjs-default-skin .librevjs-seek-handle { - width:1.5em; - height:100% -} -.librevjs-default-skin .librevjs-seek-handle:before { - padding-top:.1em -} -.librevjs-default-skin .librevjs-time-controls { - font-size:1em; - line-height:3em -} -.librevjs-default-skin .librevjs-current-time { - float:left -} -.librevjs-default-skin .librevjs-duration { - float:left -} -.librevjs-default-skin .librevjs-remaining-time { - display:none; - float:left -} -.librevjs-time-divider { - float:left; - line-height:3em -} -.librevjs-default-skin .librevjs-fullscreen-control { - width:3.8em; - cursor:pointer; - float:right -} -.librevjs-default-skin .librevjs-fullscreen-control:before { - content:"\e000" -} -.librevjs-default-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content:"\e00b" -} - -/*Centrado del button Play*/ -.librevjs-default-skin .librevjs-big-play-button { - left: 50%; /*por defecto left:.5em;*/ - top: 50%; /*por defecto top:.5em;*/ - margin: -1.5em auto auto -2em; /*por defecto esta linea no existe*/ - font-size:3em; - display:block; - z-index:2; - position:absolute; - width:4em; - height:2.6em; - text-align:center; - vertical-align:middle; - cursor:pointer; - opacity:1; - background-color:#07141e; - background-color:rgba(7,20,30,.7); - border:.1em solid #3b4249; - -webkit-border-radius:.8em; - -moz-border-radius:.8em; - border-radius:.8em; - -webkit-box-shadow:0 0 1em rgba(255,255,255,.25); - -moz-box-shadow:0 0 1em rgba(255,255,255,.25); - box-shadow:0 0 1em rgba(255,255,255,.25); - -webkit-transition:all .4s; - -moz-transition:all .4s; - -o-transition:all .4s; - transition:all .4s -} -.librevjs-default-skin.librevjs-big-play-centered .librevjs-big-play-button { - left:50%; - margin-left:-2.1em; - top:50%; - margin-top:-1.4000000000000001em -} -.librevjs-default-skin.librevjs-controls-disabled .librevjs-big-play-button { - display:none -} -.librevjs-default-skin.librevjs-has-started .librevjs-big-play-button { - display:none -} -.librevjs-default-skin.librevjs-using-native-controls .librevjs-big-play-button { - display:none -} -.librevjs-default-skin:hover .librevjs-big-play-button,.librevjs-default-skin .librevjs-big-play-button:focus { - outline:0; - border-color:#fff; - background-color:#505050; - background-color:rgba(50,50,50,.75); - -webkit-box-shadow:0 0 3em #fff; - -moz-box-shadow:0 0 3em #fff; - box-shadow:0 0 3em #fff; - -webkit-transition:all 0s; - -moz-transition:all 0s; - -o-transition:all 0s; - transition:all 0s -} -.librevjs-default-skin .librevjs-big-play-button:before { - content:"\e001"; - font-family:VideoJS; - line-height:2.6em; - text-shadow:.05em .05em .1em #000; - text-align:center; - position:absolute; - left:0; - width:100%; - height:100% -} -.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-default-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-default-skin .librevjs-menu-button { - float:right; - cursor:pointer -} -.librevjs-default-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-default-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-default-skin .librevjs-menu-button:hover .librevjs-menu { - display:block -} -.librevjs-default-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 -} -.librevjs-default-skin .librevjs-menu-button ul li.librevjs-selected { - background-color:#000 -} -.librevjs-default-skin .librevjs-menu-button ul li:focus,.librevjs-default-skin .librevjs-menu-button ul li:hover,.librevjs-default-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-default-skin .librevjs-menu-button ul li.librevjs-selected:hover { - outline:0; - color:#111; - background-color:#fff; - background-color:rgba(255,255,255,.75); - -webkit-box-shadow:0 0 1em #fff; - -moz-box-shadow:0 0 1em #fff; - box-shadow:0 0 1em #fff -} -.librevjs-default-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-default-skin .librevjs-subtitles-button:before { - content:"\e00c" -} -.librevjs-default-skin .librevjs-captions-button:before { - content:"\e008" -} -.librevjs-default-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-default-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-default-skin .librevjs-hidden { - display:none -} -.librevjs-lock-showing { - display:block!important; - opacity:1; - visibility:visible -} -ul li.librevjs-menu-title.librevjs-res-menu-title{ - color: #fff; -} -ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ - color: #fff; -} diff --git a/librevideojs/css/default/cliplibre-js.dev.min.css b/librevideojs/css/default/cliplibre-js.dev.min.css deleted file mode 100644 index d9b077c..0000000 --- a/librevideojs/css/default/cliplibre-js.dev.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -Video.js Default Styles (http://videojs.com) -Version 4.3.0 -Create your own skin at http://designer.videojs.com -*/.librevjs-default-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-default-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#333;background-color:rgba(51,51,51,.9)}.librevjs-default-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-default-skin .librevjs-slider-handle{position:absolute;left:0;top:0}.librevjs-default-skin .librevjs-slider-handle:before{content:"\e009";font-family:VideoJS;font-size:1em;line-height:1;text-align:center;text-shadow:0 0 1em #fff;position:absolute;top:0;left:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.librevjs-default-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3em;background-color:#07141e;background-color:rgba(7,20,30,.7)}.librevjs-default-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-default-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-default-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-default-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-default-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-default-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-default-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-default-skin .librevjs-control:focus:before,.librevjs-default-skin .librevjs-control:hover:before{text-shadow:0 0 1em #fff}.librevjs-default-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-default-skin .librevjs-play-control{width:5em;cursor:pointer}.librevjs-default-skin .librevjs-play-control:before{content:"\e001"}.librevjs-default-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-default-skin .librevjs-mute-control,.librevjs-default-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-default-skin .librevjs-mute-control:before,.librevjs-default-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-default-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-default-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-default-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-default-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-default-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-default-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-default-skin .librevjs-volume-control{width:5em;float:right}.librevjs-default-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-default-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-default-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;background:#66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat}.librevjs-default-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-default-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-default-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-default-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-default-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-default-skin .librevjs-progress-holder{height:100%}.librevjs-default-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-default-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-default-skin .librevjs-play-progress{background:#66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat}.librevjs-default-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-default-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-default-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-default-skin .librevjs-time-controls{font-size:1em;line-height:3em}.librevjs-default-skin .librevjs-current-time{float:left}.librevjs-default-skin .librevjs-duration{float:left}.librevjs-default-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-default-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-default-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-default-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-default-skin .librevjs-big-play-button{left:50%;top:50%;margin:-1.5em auto auto -2em;font-size:3em;display:block;z-index:2;position:absolute;width:4em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#07141e;background-color:rgba(7,20,30,.7);border:.1em solid #3b4249;-webkit-border-radius:.8em;-moz-border-radius:.8em;border-radius:.8em;-webkit-box-shadow:0 0 1em rgba(255,255,255,.25);-moz-box-shadow:0 0 1em rgba(255,255,255,.25);box-shadow:0 0 1em rgba(255,255,255,.25);-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-default-skin.librevjs-big-play-centered .librevjs-big-play-button{left:50%;margin-left:-2.1em;top:50%;margin-top:-1.4000000000000001em}.librevjs-default-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-default-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-default-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-default-skin:hover .librevjs-big-play-button,.librevjs-default-skin .librevjs-big-play-button:focus{outline:0;border-color:#fff;background-color:#505050;background-color:rgba(50,50,50,.75);-webkit-box-shadow:0 0 3em #fff;-moz-box-shadow:0 0 3em #fff;box-shadow:0 0 3em #fff;-webkit-transition:all 0s;-moz-transition:all 0s;-o-transition:all 0s;transition:all 0s}.librevjs-default-skin .librevjs-big-play-button:before{content:"\e001";font-family:VideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.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-default-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-default-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-default-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-default-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-default-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-default-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}.librevjs-default-skin .librevjs-menu-button ul li.librevjs-selected{background-color:#000}.librevjs-default-skin .librevjs-menu-button ul li:focus,.librevjs-default-skin .librevjs-menu-button ul li:hover,.librevjs-default-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-default-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#111;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.librevjs-default-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-default-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-default-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-default-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-default-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:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-default-skin .librevjs-hidden{display:none}.librevjs-lock-showing{display:block!important;opacity:1;visibility:visible}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#fff}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#fff}
\ No newline at end of file diff --git a/librevideojs/css/libre-custom-skin/custom_skin.azul.css b/librevideojs/css/libre-custom-skin/custom_skin.azul.css deleted file mode 100644 index 4ddea4b..0000000 --- a/librevideojs/css/libre-custom-skin/custom_skin.azul.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: #005df3 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: #005df3 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: #005DF3; - 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(255, 255, 255); - background-color: rgb(0, 93, 243); -} -.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: #ffffff; - background-color: #005DF3; -} -/*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 -} diff --git a/librevideojs/css/libre-custom-skin/custom_skin.azul.min.css b/librevideojs/css/libre-custom-skin/custom_skin.azul.min.css deleted file mode 100644 index 0ec0332..0000000 --- a/librevideojs/css/libre-custom-skin/custom_skin.azul.min.css +++ /dev/null @@ -1,4 +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{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;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}.librevjs-custom-skin .librevjs-slider-handle{width:0;height:0}.librevjs-custom-skin .librevjs-slider-handle:before{width:0;height:0}.librevjs-custom-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;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-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}.librevjs-custom-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#005df3 url() -50% 0 repeat}.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}.librevjs-custom-skin .librevjs-play-progress{background:#005df3 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"}.librevjs-custom-skin .librevjs-big-play-button{left:50%;margin-left:-1.4em;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;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-custom-skin.librevjs-big-play-centered .librevjs-big-play-button{left:50%;margin-left:-1.4em;top:50%;margin-top:-1.3em}.librevjs-custom-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-custom-skin.librevjs-has-started .librevjs-big-play-button{display:none}.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;background-color:#005df3;color:#fff}.librevjs-custom-skin .librevjs-big-play-button:before{content:"\e001";font-family:VideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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}.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#005df3}.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:#fff;background-color:#005df3}.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:#ffed00;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}
\ No newline at end of file diff --git a/librevideojs/css/libre-custom-skin/custom_skin.rojo.css b/librevideojs/css/libre-custom-skin/custom_skin.rojo.css deleted file mode 100644 index 546ce3b..0000000 --- a/librevideojs/css/libre-custom-skin/custom_skin.rojo.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: #f44336 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 rojo */ -.librevjs-custom-skin .librevjs-play-progress { - background: #f44336 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: #f44336; /*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(255, 255, 255); - background-color: rgb(244, 67, 54); -} -.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: #ffffff; - background-color: #f44336; -} -/*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 -} diff --git a/librevideojs/css/libre-custom-skin/custom_skin.rojo.min.css b/librevideojs/css/libre-custom-skin/custom_skin.rojo.min.css deleted file mode 100644 index 3909d87..0000000 --- a/librevideojs/css/libre-custom-skin/custom_skin.rojo.min.css +++ /dev/null @@ -1,4 +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{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;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}.librevjs-custom-skin .librevjs-slider-handle{width:0;height:0}.librevjs-custom-skin .librevjs-slider-handle:before{width:0;height:0}.librevjs-custom-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;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-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}.librevjs-custom-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#f44336 url() -50% 0 repeat}.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}.librevjs-custom-skin .librevjs-play-progress{background:#f44336 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"}.librevjs-custom-skin .librevjs-big-play-button{left:50%;margin-left:-1.4em;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;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-custom-skin.librevjs-big-play-centered .librevjs-big-play-button{left:50%;margin-left:-1.4em;top:50%;margin-top:-1.3em}.librevjs-custom-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-custom-skin.librevjs-has-started .librevjs-big-play-button{display:none}.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;background-color:#f44336;color:#fff}.librevjs-custom-skin .librevjs-big-play-button:before{content:"\e001";font-family:VideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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}.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#f44336}.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:#fff;background-color:#f44336}.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:#ffed00;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}
\ No newline at end of file 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 -} diff --git a/librevideojs/css/libre-custom-skin/custom_skin.teal.min.css b/librevideojs/css/libre-custom-skin/custom_skin.teal.min.css deleted file mode 100644 index 860d82e..0000000 --- a/librevideojs/css/libre-custom-skin/custom_skin.teal.min.css +++ /dev/null @@ -1,4 +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{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;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}.librevjs-custom-skin .librevjs-slider-handle{width:0;height:0}.librevjs-custom-skin .librevjs-slider-handle:before{width:0;height:0}.librevjs-custom-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;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-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}.librevjs-custom-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#1de9b6 url() -50% 0 repeat}.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}.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"}.librevjs-custom-skin .librevjs-big-play-button{left:50%;margin-left:-1.4em;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;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-custom-skin.librevjs-big-play-centered .librevjs-big-play-button{left:50%;margin-left:-1.4em;top:50%;margin-top:-1.3em}.librevjs-custom-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-custom-skin.librevjs-has-started .librevjs-big-play-button{display:none}.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;background-color:#1de9b6;color:#fff}.librevjs-custom-skin .librevjs-big-play-button:before{content:"\e001";font-family:VideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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}.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected{color:#01382f;background-color:#1de9b6}.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}.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:#ffed00;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}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-blue.css b/librevideojs/css/librevideojs-material/libre-skin-blue.css index 4a514c1..f5cdf77 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-blue.css +++ b/librevideojs/css/librevideojs-material/libre-skin-blue.css @@ -3,7 +3,7 @@ LibreVideoJS Estilos personalizados = blue Version 1.2 Escrito por Jesús Eduardo */ -.librevjs-libre-skin { +.librevjs-libre-materialblue-skin { color:#ccc; background-color: inherit; } @@ -15,7 +15,7 @@ src: local('?'), url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), url("../../fonts/libre-material/libre-icons.svg") format("svg"); } -.librevjs-libre-skin .librevjs-slider { +.librevjs-libre-materialblue-skin .librevjs-slider { /* Replace browser focus highlight with handle highlight */ outline: 0; position: relative; @@ -25,18 +25,18 @@ padding: 0; background-color: #000000; background-color: rgba(0, 0, 0, 0.5); } -.librevjs-libre-skin .librevjs-slider:focus { +.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 } /*Eliminación de botón de barra de progreso*/ -.librevjs-libre-skin .librevjs-slider-handle { +.librevjs-libre-materialblue-skin .librevjs-slider-handle { width: 0; height: 0; } -.librevjs-libre-skin .librevjs-slider-handle:before { +.librevjs-libre-materialblue-skin .librevjs-slider-handle:before { text-shadow: 0em 0em 1em #fff; position: absolute; top: 0; @@ -44,7 +44,7 @@ left: 0; } /* control bar */ -.librevjs-libre-skin .librevjs-control-bar { +.librevjs-libre-materialblue-skin .librevjs-control-bar { /* Start hidden */ display: none; position: absolute; @@ -61,7 +61,7 @@ height: 3.0em; background-color: #232323; background-color: rgba(35, 35, 35, 0.8); } -.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { +.librevjs-libre-materialblue-skin.librevjs-has-started .librevjs-control-bar { display:block; visibility:visible; opacity:1; @@ -70,7 +70,7 @@ opacity:1; -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 { +.librevjs-libre-materialblue-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { display:block; visibility:hidden; opacity:0; @@ -79,18 +79,18 @@ opacity:0; -o-transition:visibility 1s,opacity 1s; transition:visibility 1s,opacity 1s } -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { +.librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-control-bar { display:none } -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { +.librevjs-libre-materialblue-skin.librevjs-using-native-controls .librevjs-control-bar { display:none } @media \0screen { -.librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { +.librevjs-libre-materialblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { content:"" } } -.librevjs-libre-skin .librevjs-control { +.librevjs-libre-materialblue-skin .librevjs-control { outline:0; position:relative; float:left; @@ -100,7 +100,7 @@ padding:0; height:3em; width:4em } -.librevjs-libre-skin .librevjs-control:before { +.librevjs-libre-materialblue-skin .librevjs-control:before { font-family:LibreVideoJS; font-size:1.5em; line-height:2; @@ -113,13 +113,13 @@ 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 { +.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-skin .librevjs-control:focus { +.librevjs-libre-materialblue-skin .librevjs-control:focus { } -.librevjs-libre-skin .librevjs-control-text { +.librevjs-libre-materialblue-skin .librevjs-control-text { border:0; clip:rect(0 0 0 0); height:1px; @@ -131,52 +131,52 @@ width:1px } /*Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-play-control { +.librevjs-libre-materialblue-skin .librevjs-play-control { width:5em; cursor:pointer; color:rgb(33, 150, 244); } -.librevjs-libre-skin .librevjs-play-control:before { +.librevjs-libre-materialblue-skin .librevjs-play-control:before { content:"\e001" } -.librevjs-libre-skin .librevjs-play-control:hover:before { +.librevjs-libre-materialblue-skin .librevjs-play-control:hover:before { color:#2980b9; /*color de play control al pasar el cursor*/ } -.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { +.librevjs-libre-materialblue-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 { +.librevjs-libre-materialblue-skin .librevjs-mute-control,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button { cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { +.librevjs-libre-materialblue-skin .librevjs-mute-control:before,.librevjs-libre-materialblue-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 { +.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-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +.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-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +.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-skin .librevjs-volume-control { +.librevjs-libre-materialblue-skin .librevjs-volume-control { width:5em; float:right } -.librevjs-libre-skin .librevjs-volume-bar { +.librevjs-libre-materialblue-skin .librevjs-volume-bar { width:5em; height:.6em; margin:1.1em auto 0 } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { +.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu-content { height:2.9em } /*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-level { +.librevjs-libre-materialblue-skin .librevjs-volume-level { position: absolute; top: 0; left: 0; @@ -187,22 +187,22 @@ width: 100%; background: #2196F3 url() -50% 0 repeat; /*color de barra volumen*/ } /*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { +.librevjs-libre-materialblue-skin .librevjs-volume-bar .librevjs-volume-handle { width:.5em; height:.5em } -.librevjs-libre-skin .librevjs-volume-handle:before { +.librevjs-libre-materialblue-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 { +.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { width:6em; left:-4em } -.librevjs-libre-skin .librevjs-progress-control { +.librevjs-libre-materialblue-skin .librevjs-progress-control { position:absolute; left:0; right:0; @@ -215,17 +215,17 @@ top:-1em; -o-transition:all .4s; transition:all .4s } -.librevjs-libre-skin:hover .librevjs-progress-control { +.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 } -.librevjs-libre-skin .librevjs-progress-holder { +.librevjs-libre-materialblue-skin .librevjs-progress-holder { height:100% } -.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { +.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%; @@ -236,32 +236,32 @@ top:0 } /* Personalización de barra de progreso a color azul */ -.librevjs-libre-skin .librevjs-play-progress { +.librevjs-libre-materialblue-skin .librevjs-play-progress { background: #2196F3 url() -50% 0 repeat; } -.librevjs-libre-skin .librevjs-load-progress { +.librevjs-libre-materialblue-skin .librevjs-load-progress { background:#646464; background:rgba(255,255,255,.4) } -.librevjs-libre-skin .librevjs-seek-handle { +.librevjs-libre-materialblue-skin .librevjs-seek-handle { width:1.5em; height:100% } -.librevjs-libre-skin .librevjs-seek-handle:before { +.librevjs-libre-materialblue-skin .librevjs-seek-handle:before { padding-top:.1em } -.librevjs-libre-skin .librevjs-time-controls { +.librevjs-libre-materialblue-skin .librevjs-time-controls { font-size:1em; font-weight: 700;/*mayor visibilidad*/ line-height:3em; } -.librevjs-libre-skin .librevjs-current-time { +.librevjs-libre-materialblue-skin .librevjs-current-time { float:left } -.librevjs-libre-skin .librevjs-duration { +.librevjs-libre-materialblue-skin .librevjs-duration { float:left } -.librevjs-libre-skin .librevjs-remaining-time { +.librevjs-libre-materialblue-skin .librevjs-remaining-time { display:none; float:left } @@ -269,20 +269,20 @@ float:left float:left; line-height:3em } -.librevjs-libre-skin .librevjs-fullscreen-control { +.librevjs-libre-materialblue-skin .librevjs-fullscreen-control { width:3.8em; cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-fullscreen-control:before { +.librevjs-libre-materialblue-skin .librevjs-fullscreen-control:before { content:"\e000" } -.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +.librevjs-libre-materialblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { content:"\e00b" } /*Centrado del button Play y personalizado*/ -.librevjs-libre-skin .librevjs-big-play-button { +.librevjs-libre-materialblue-skin .librevjs-big-play-button { left: 50%; top: 40%; font-size: 10em; @@ -300,23 +300,23 @@ opacity: 1; color: #2196F3; } /* Hide if controls are disabled */ -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { +.librevjs-libre-materialblue-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 { +.librevjs-libre-materialblue-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 { +.librevjs-libre-materialblue-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 { +.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-skin .librevjs-big-play-button:before { +.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 @@ -349,7 +349,7 @@ opacity:.75; -o-animation:spin 1.5s infinite linear; animation:spin 1.5s infinite linear } -.librevjs-libre-skin .librevjs-loading-spinner:before { +.librevjs-libre-materialblue-skin .librevjs-loading-spinner:before { content:"\e01e"; font-family:LibreVideoJS; position:absolute; @@ -392,11 +392,11 @@ text-shadow:0 0 .1em #000 transform:rotate(359deg) } } -.librevjs-libre-skin .librevjs-menu-button { +.librevjs-libre-materialblue-skin .librevjs-menu-button { float:right; cursor:pointer } -.librevjs-libre-skin .librevjs-menu { +.librevjs-libre-materialblue-skin .librevjs-menu { display:none; position:absolute; bottom:0; @@ -409,7 +409,7 @@ 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 { +.librevjs-libre-materialblue-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { display:block; padding:0; margin:0; @@ -425,31 +425,32 @@ background-color:rgba(7,20,30,.7); -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 { +.librevjs-libre-materialblue-skin .librevjs-menu-button:hover .librevjs-menu { display:block } -.librevjs-libre-skin .librevjs-menu-button ul li { +.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 +text-transform:lowercase; +color: #ccc; } /*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { +.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected { color: #ffffff; background-color: rgb(33, 150, 244); } -.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 { +.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-skin .librevjs-menu-button ul li.librevjs-menu-title { +.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-menu-title { text-align:center; text-transform:uppercase; font-size:1em; @@ -459,13 +460,13 @@ margin:0 0 .3em; font-weight:700; cursor:default } -.librevjs-libre-skin .librevjs-subtitles-button:before { +.librevjs-libre-materialblue-skin .librevjs-subtitles-button:before { content:"\e00c" } -.librevjs-libre-skin .librevjs-captions-button:before { +.librevjs-libre-materialblue-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 { +.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 @@ -565,7 +566,7 @@ background-color: rgba(2, 7, 11, 0.7); .librevjs-tt-cue { display:block } -.librevjs-libre-skin .librevjs-hidden { +.librevjs-libre-materialblue-skin .librevjs-hidden { display:none } .librevjs-lock-showing { @@ -581,11 +582,13 @@ padding: 130px 10px 20px; text-align: center; } /*title de resolucion | subtitles y Caption*/ -ul li.librevjs-menu-title.librevjs-res-menu-title{ +.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ color: rgb(33, 150, 244); +background-color: inherit; } -ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ color: rgb(11, 137, 237); +background-color: inherit; } /*Responsive*/ @@ -623,7 +626,7 @@ left: 0; .cliplibre-js .librevjs-text-track{ font-size: 0.9em; } - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialblue-skin .librevjs-big-play-button{ font-size: 5em; top: 45%; } @@ -637,17 +640,17 @@ left: 0; } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { + .librevjs-libre-materialblue-skin .librevjs-big-play-button { top:35%; } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialblue-skin .librevjs-big-play-button{ font-size: 3em; } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialblue-skin .librevjs-big-play-button{ font-size: 2em; } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-blue.min.css b/librevideojs/css/librevideojs-material/libre-skin-blue.min.css deleted file mode 100644 index 9129425..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-blue.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = blue -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{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;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}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;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)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#2196f3}.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}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#2196f4}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#2980b9}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.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}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#2196f3 url() -50% 0 repeat}.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}.librevjs-libre-skin .librevjs-play-progress{background:#2196f3 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;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"}.librevjs-libre-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:#2196f3}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.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:#0289f4}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#2196f4}.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:#2196f3}.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.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:#ffed00;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}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#2196f4}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#0b89ed}.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:.9em}.librevjs-libre-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-skin .librevjs-big-play-button{top:35%}}@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}}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-grey.css b/librevideojs/css/librevideojs-material/libre-skin-grey.css index f4d60bd..cd74eef 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-grey.css +++ b/librevideojs/css/librevideojs-material/libre-skin-grey.css @@ -3,7 +3,7 @@ LibreVideoJS Estilos personalizados = Grey Version 1.2 Escrito por Jesús Eduardo */ -.librevjs-libre-skin { +.librevjs-libre-materialgrey-skin { color:#ccc; background-color: inherit; } @@ -15,7 +15,7 @@ src: local('?'), url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), url("../../fonts/libre-material/libre-icons.svg") format("svg"); } -.librevjs-libre-skin .librevjs-slider { +.librevjs-libre-materialgrey-skin .librevjs-slider { /* Replace browser focus highlight with handle highlight */ outline: 0; position: relative; @@ -25,18 +25,18 @@ padding: 0; background-color: #000000; background-color: rgba(0, 0, 0, 0.5); } -.librevjs-libre-skin .librevjs-slider:focus { +.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-skin .librevjs-slider-handle { +.librevjs-libre-materialgrey-skin .librevjs-slider-handle { width: 0; height: 0; } -.librevjs-libre-skin .librevjs-slider-handle:before { +.librevjs-libre-materialgrey-skin .librevjs-slider-handle:before { text-shadow: 0em 0em 1em #fff; position: absolute; top: 0; @@ -44,7 +44,7 @@ left: 0; } /* control bar */ -.librevjs-libre-skin .librevjs-control-bar { +.librevjs-libre-materialgrey-skin .librevjs-control-bar { /* Start hidden */ display: none; position: absolute; @@ -61,7 +61,7 @@ height: 3.0em; background-color: #232323; background-color: rgba(35, 35, 35, 0.8); } -.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { +.librevjs-libre-materialgrey-skin.librevjs-has-started .librevjs-control-bar { display:block; visibility:visible; opacity:1; @@ -70,7 +70,7 @@ opacity:1; -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 { +.librevjs-libre-materialgrey-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { display:block; visibility:hidden; opacity:0; @@ -79,18 +79,18 @@ opacity:0; -o-transition:visibility 1s,opacity 1s; transition:visibility 1s,opacity 1s } -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { +.librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-control-bar { display:none } -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { +.librevjs-libre-materialgrey-skin.librevjs-using-native-controls .librevjs-control-bar { display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + .librevjs-libre-materialgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { content:"" } } -.librevjs-libre-skin .librevjs-control { +.librevjs-libre-materialgrey-skin .librevjs-control { outline:0; position:relative; float:left; @@ -100,7 +100,7 @@ padding:0; height:3em; width:4em } -.librevjs-libre-skin .librevjs-control:before { +.librevjs-libre-materialgrey-skin .librevjs-control:before { font-family:LibreVideoJS; font-size:1.5em; line-height:2; @@ -113,13 +113,13 @@ 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 { +.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-skin .librevjs-control:focus { +.librevjs-libre-materialgrey-skin .librevjs-control:focus { } -.librevjs-libre-skin .librevjs-control-text { +.librevjs-libre-materialgrey-skin .librevjs-control-text { border:0; clip:rect(0 0 0 0); height:1px; @@ -131,52 +131,52 @@ width:1px } /*Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-play-control { +.librevjs-libre-materialgrey-skin .librevjs-play-control { width:5em; cursor:pointer; color: rgb(158, 158, 158); } -.librevjs-libre-skin .librevjs-play-control:before { +.librevjs-libre-materialgrey-skin .librevjs-play-control:before { content:"\e001" } -.librevjs-libre-skin .librevjs-play-control:hover:before { +.librevjs-libre-materialgrey-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 { +.librevjs-libre-materialgrey-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 { +.librevjs-libre-materialgrey-skin .librevjs-mute-control,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button { cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { +.librevjs-libre-materialgrey-skin .librevjs-mute-control:before,.librevjs-libre-materialgrey-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 { +.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-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +.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-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +.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-skin .librevjs-volume-control { +.librevjs-libre-materialgrey-skin .librevjs-volume-control { width:5em; float:right } -.librevjs-libre-skin .librevjs-volume-bar { +.librevjs-libre-materialgrey-skin .librevjs-volume-bar { width:5em; height:.6em; margin:1.1em auto 0 } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { +.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu-content { height:2.9em } /*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-level { +.librevjs-libre-materialgrey-skin .librevjs-volume-level { position: absolute; top: 0; left: 0; @@ -187,22 +187,22 @@ 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 { +.librevjs-libre-materialgrey-skin .librevjs-volume-bar .librevjs-volume-handle { width:.5em; height:.5em } -.librevjs-libre-skin .librevjs-volume-handle:before { +.librevjs-libre-materialgrey-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 { +.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { width:6em; left:-4em } -.librevjs-libre-skin .librevjs-progress-control { +.librevjs-libre-materialgrey-skin .librevjs-progress-control { position:absolute; left:0; right:0; @@ -215,17 +215,17 @@ top:-1em; -o-transition:all .4s; transition:all .4s } -.librevjs-libre-skin:hover .librevjs-progress-control { +.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-skin .librevjs-progress-holder { +.librevjs-libre-materialgrey-skin .librevjs-progress-holder { height:100% } -.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { +.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%; @@ -236,32 +236,32 @@ top:0 } /* Personalización de barra de progreso a color plata */ -.librevjs-libre-skin .librevjs-play-progress { +.librevjs-libre-materialgrey-skin .librevjs-play-progress { background: #9e9e9e url() -50% 0 repeat; } -.librevjs-libre-skin .librevjs-load-progress { +.librevjs-libre-materialgrey-skin .librevjs-load-progress { background:#646464; background:rgba(255,255,255,.4) } -.librevjs-libre-skin .librevjs-seek-handle { +.librevjs-libre-materialgrey-skin .librevjs-seek-handle { width:1.5em; height:100% } -.librevjs-libre-skin .librevjs-seek-handle:before { +.librevjs-libre-materialgrey-skin .librevjs-seek-handle:before { padding-top:.1em } -.librevjs-libre-skin .librevjs-time-controls { +.librevjs-libre-materialgrey-skin .librevjs-time-controls { font-size:1em; font-weight: 700;/*mayor visibilidad*/ line-height:3em; } -.librevjs-libre-skin .librevjs-current-time { +.librevjs-libre-materialgrey-skin .librevjs-current-time { float:left } -.librevjs-libre-skin .librevjs-duration { +.librevjs-libre-materialgrey-skin .librevjs-duration { float:left } -.librevjs-libre-skin .librevjs-remaining-time { +.librevjs-libre-materialgrey-skin .librevjs-remaining-time { display:none; float:left } @@ -269,20 +269,20 @@ float:left float:left; line-height:3em } -.librevjs-libre-skin .librevjs-fullscreen-control { +.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control { width:3.8em; cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-fullscreen-control:before { +.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control:before { content:"\e000" } -.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +.librevjs-libre-materialgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { content:"\e00b" } /*Centrado del button Play y personalizado*/ -.librevjs-libre-skin .librevjs-big-play-button { +.librevjs-libre-materialgrey-skin .librevjs-big-play-button { left: 50%; top: 40%; font-size: 10em; @@ -300,24 +300,24 @@ opacity: 1; color: #9e9e9e; } /* Hide if controls are disabled */ -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { +.librevjs-libre-materialgrey-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 { +.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-skin.librevjs-using-native-controls .librevjs-big-play-button { +.librevjs-libre-materialgrey-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-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-skin .librevjs-big-play-button:before { +.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 @@ -350,7 +350,7 @@ opacity:.75; -o-animation:spin 1.5s infinite linear; animation:spin 1.5s infinite linear } -.librevjs-libre-skin .librevjs-loading-spinner:before { +.librevjs-libre-materialgrey-skin .librevjs-loading-spinner:before { content:"\e01e"; font-family:LibreVideoJS; position:absolute; @@ -393,11 +393,11 @@ text-shadow:0 0 .1em #000 transform:rotate(359deg) } } -.librevjs-libre-skin .librevjs-menu-button { +.librevjs-libre-materialgrey-skin .librevjs-menu-button { float:right; cursor:pointer } -.librevjs-libre-skin .librevjs-menu { +.librevjs-libre-materialgrey-skin .librevjs-menu { display:none; position:absolute; bottom:0; @@ -410,7 +410,7 @@ 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 { +.librevjs-libre-materialgrey-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { display:block; padding:0; margin:0; @@ -426,31 +426,32 @@ background-color:rgba(7,20,30,.7); -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 { +.librevjs-libre-materialgrey-skin .librevjs-menu-button:hover .librevjs-menu { display:block } -.librevjs-libre-skin .librevjs-menu-button ul li { +.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 +text-transform:lowercase; +color: #ccc; } /*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { +.librevjs-libre-materialgrey-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 { +.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-skin .librevjs-menu-button ul li.librevjs-menu-title { +.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-menu-title { text-align:center; text-transform:uppercase; font-size:1em; @@ -460,13 +461,13 @@ margin:0 0 .3em; font-weight:700; cursor:default } -.librevjs-libre-skin .librevjs-subtitles-button:before { +.librevjs-libre-materialgrey-skin .librevjs-subtitles-button:before { content:"\e00c" } -.librevjs-libre-skin .librevjs-captions-button:before { +.librevjs-libre-materialgrey-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 { +.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 @@ -566,7 +567,7 @@ background-color: rgba(2, 7, 11, 0.7); .librevjs-tt-cue { display:block } -.librevjs-libre-skin .librevjs-hidden { +.librevjs-libre-materialgrey-skin .librevjs-hidden { display:none } .librevjs-lock-showing { @@ -582,11 +583,13 @@ padding: 130px 10px 20px; text-align: center; } /*title de resolucion | subtitles y Caption*/ -ul li.librevjs-menu-title.librevjs-res-menu-title{ +.librevjs-libre-materialgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ color:#737373; +background-color: inherit; } -ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +.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 { @@ -623,7 +626,7 @@ left: 0; .cliplibre-js .librevjs-text-track{ font-size: 0.9em; } - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialgrey-skin .librevjs-big-play-button{ font-size: 5em; top: 45%; } @@ -637,17 +640,17 @@ left: 0; } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { + .librevjs-libre-materialgrey-skin .librevjs-big-play-button { top:35%; } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialgrey-skin .librevjs-big-play-button{ font-size: 3em; } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialgrey-skin .librevjs-big-play-button{ font-size: 2em; } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-grey.min.css b/librevideojs/css/librevideojs-material/libre-skin-grey.min.css deleted file mode 100644 index 1c1632f..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-grey.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -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{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;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}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;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)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#9e9e9e}.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}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#9e9e9e}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#7c7c7c}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.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}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#9e9e9e url() -50% 0 repeat}.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}.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;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"}.librevjs-libre-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}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.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:#737373}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#9e9e9e}.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}.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.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:#ffed00;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}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#737373}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#9e9e9e}.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:.9em}.librevjs-libre-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-skin .librevjs-big-play-button{top:35%}}@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}}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-purple.css b/librevideojs/css/librevideojs-material/libre-skin-purple.css index 3f9f49d..3eeb9d6 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-purple.css +++ b/librevideojs/css/librevideojs-material/libre-skin-purple.css @@ -3,7 +3,7 @@ LibreVideoJS Estilos personalizados = Purple Version 1.2 Escrito por Jesús Eduardo */ -.librevjs-libre-skin { +.librevjs-libre-materialpurple-skin { color:#ccc; background-color: inherit; } @@ -15,7 +15,7 @@ src: local('?'), url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), url("../../fonts/libre-material/libre-icons.svg") format("svg"); } -.librevjs-libre-skin .librevjs-slider { +.librevjs-libre-materialpurple-skin .librevjs-slider { /* Replace browser focus highlight with handle highlight */ outline: 0; position: relative; @@ -25,18 +25,18 @@ padding: 0; background-color: #000000; background-color: rgba(0, 0, 0, 0.5); } -.librevjs-libre-skin .librevjs-slider:focus { +.librevjs-libre-materialpurple-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 { +.librevjs-libre-materialpurple-skin .librevjs-slider-handle { width: 0; height: 0; } -.librevjs-libre-skin .librevjs-slider-handle:before { +.librevjs-libre-materialpurple-skin .librevjs-slider-handle:before { text-shadow: 0em 0em 1em #fff; position: absolute; top: 0; @@ -44,7 +44,7 @@ left: 0; } /* control bar */ -.librevjs-libre-skin .librevjs-control-bar { +.librevjs-libre-materialpurple-skin .librevjs-control-bar { /* Start hidden */ display: none; position: absolute; @@ -61,7 +61,7 @@ height: 3.0em; background-color: #232323; background-color: rgba(35, 35, 35, 0.8); } -.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { +.librevjs-libre-materialpurple-skin.librevjs-has-started .librevjs-control-bar { display:block; visibility:visible; opacity:1; @@ -70,7 +70,7 @@ opacity:1; -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 { +.librevjs-libre-materialpurple-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { display:block; visibility:hidden; opacity:0; @@ -79,18 +79,18 @@ opacity:0; -o-transition:visibility 1s,opacity 1s; transition:visibility 1s,opacity 1s } -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { +.librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-control-bar { display:none } -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { +.librevjs-libre-materialpurple-skin.librevjs-using-native-controls .librevjs-control-bar { display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + .librevjs-libre-materialpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { content:"" } } -.librevjs-libre-skin .librevjs-control { +.librevjs-libre-materialpurple-skin .librevjs-control { outline:0; position:relative; float:left; @@ -100,7 +100,7 @@ padding:0; height:3em; width:4em } -.librevjs-libre-skin .librevjs-control:before { +.librevjs-libre-materialpurple-skin .librevjs-control:before { font-family:LibreVideoJS; font-size:1.5em; line-height:2; @@ -113,13 +113,13 @@ 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 { +.librevjs-libre-materialpurple-skin .librevjs-control:focus:before,.librevjs-libre-materialpurple-skin .librevjs-control:hover:before { color: #9c27b0; } /*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus { +.librevjs-libre-materialpurple-skin .librevjs-control:focus { } -.librevjs-libre-skin .librevjs-control-text { +.librevjs-libre-materialpurple-skin .librevjs-control-text { border:0; clip:rect(0 0 0 0); height:1px; @@ -131,52 +131,52 @@ width:1px } /*Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-play-control { +.librevjs-libre-materialpurple-skin .librevjs-play-control { width:5em; cursor:pointer; color: rgb(156, 39, 176); } -.librevjs-libre-skin .librevjs-play-control:before { +.librevjs-libre-materialpurple-skin .librevjs-play-control:before { content:"\e001" } -.librevjs-libre-skin .librevjs-play-control:hover:before { +.librevjs-libre-materialpurple-skin .librevjs-play-control:hover:before { color:#8e44ad; /*color de play control al pasar el cursor*/ } -.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { +.librevjs-libre-materialpurple-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 { +.librevjs-libre-materialpurple-skin .librevjs-mute-control,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button { cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { +.librevjs-libre-materialpurple-skin .librevjs-mute-control:before,.librevjs-libre-materialpurple-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 { +.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialpurple-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 { +.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialpurple-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 { +.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before { content:"\e005" } -.librevjs-libre-skin .librevjs-volume-control { +.librevjs-libre-materialpurple-skin .librevjs-volume-control { width:5em; float:right } -.librevjs-libre-skin .librevjs-volume-bar { +.librevjs-libre-materialpurple-skin .librevjs-volume-bar { width:5em; height:.6em; margin:1.1em auto 0 } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { +.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu-content { height:2.9em } /*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-level { +.librevjs-libre-materialpurple-skin .librevjs-volume-level { position: absolute; top: 0; left: 0; @@ -187,22 +187,22 @@ width: 100%; background: #9c27b0 url() -50% 0 repeat; /*color de barra volumen*/ } /*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { +.librevjs-libre-materialpurple-skin .librevjs-volume-bar .librevjs-volume-handle { width:.5em; height:.5em } -.librevjs-libre-skin .librevjs-volume-handle:before { +.librevjs-libre-materialpurple-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 { +.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { width:6em; left:-4em } -.librevjs-libre-skin .librevjs-progress-control { +.librevjs-libre-materialpurple-skin .librevjs-progress-control { position:absolute; left:0; right:0; @@ -215,17 +215,17 @@ top:-1em; -o-transition:all .4s; transition:all .4s } -.librevjs-libre-skin:hover .librevjs-progress-control { +.librevjs-libre-materialpurple-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 { +.librevjs-libre-materialpurple-skin .librevjs-progress-holder { height:100% } -.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { +.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-load-progress { position:absolute; display:block; height:100%; @@ -236,32 +236,32 @@ top:0 } /* Personalización de barra de progreso a color purpura */ -.librevjs-libre-skin .librevjs-play-progress { +.librevjs-libre-materialpurple-skin .librevjs-play-progress { background: #9c27b0 url() -50% 0 repeat; } -.librevjs-libre-skin .librevjs-load-progress { +.librevjs-libre-materialpurple-skin .librevjs-load-progress { background:#646464; background:rgba(255,255,255,.4) } -.librevjs-libre-skin .librevjs-seek-handle { +.librevjs-libre-materialpurple-skin .librevjs-seek-handle { width:1.5em; height:100% } -.librevjs-libre-skin .librevjs-seek-handle:before { +.librevjs-libre-materialpurple-skin .librevjs-seek-handle:before { padding-top:.1em } -.librevjs-libre-skin .librevjs-time-controls { +.librevjs-libre-materialpurple-skin .librevjs-time-controls { font-size:1em; font-weight: 700;/*mayor visibilidad*/ line-height:3em; } -.librevjs-libre-skin .librevjs-current-time { +.librevjs-libre-materialpurple-skin .librevjs-current-time { float:left } -.librevjs-libre-skin .librevjs-duration { +.librevjs-libre-materialpurple-skin .librevjs-duration { float:left } -.librevjs-libre-skin .librevjs-remaining-time { +.librevjs-libre-materialpurple-skin .librevjs-remaining-time { display:none; float:left } @@ -269,20 +269,20 @@ float:left float:left; line-height:3em } -.librevjs-libre-skin .librevjs-fullscreen-control { +.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control { width:3.8em; cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-fullscreen-control:before { +.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control:before { content:"\e000" } -.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +.librevjs-libre-materialpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { content:"\e00b" } /*Centrado del button Play y personalizado*/ -.librevjs-libre-skin .librevjs-big-play-button { +.librevjs-libre-materialpurple-skin .librevjs-big-play-button { left: 50%; top: 40%; font-size: 10em; @@ -300,24 +300,24 @@ opacity: 1; color: #9c27b0; } /* Hide if controls are disabled */ -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { +.librevjs-libre-materialpurple-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 { +.librevjs-libre-materialpurple-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 { +.librevjs-libre-materialpurple-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 { +.librevjs-libre-materialpurple-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialpurple-skin .librevjs-big-play-button:focus { color: rgb(142, 68, 173); /*color boton focus purpura oscuro*/ } -.librevjs-libre-skin .librevjs-big-play-button:before { +.librevjs-libre-materialpurple-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 @@ -350,7 +350,7 @@ opacity:.75; -o-animation:spin 1.5s infinite linear; animation:spin 1.5s infinite linear } -.librevjs-libre-skin .librevjs-loading-spinner:before { +.librevjs-libre-materialpurple-skin .librevjs-loading-spinner:before { content:"\e01e"; font-family:LibreVideoJS; position:absolute; @@ -393,11 +393,11 @@ text-shadow:0 0 .1em #000 transform:rotate(359deg) } } -.librevjs-libre-skin .librevjs-menu-button { +.librevjs-libre-materialpurple-skin .librevjs-menu-button { float:right; cursor:pointer; } -.librevjs-libre-skin .librevjs-menu { +.librevjs-libre-materialpurple-skin .librevjs-menu { display:none; position:absolute; bottom:0; @@ -410,7 +410,7 @@ 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 { +.librevjs-libre-materialpurple-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { display:block; padding:0; margin:0; @@ -426,10 +426,10 @@ background-color:rgba(7,20,30,.7); -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 { +.librevjs-libre-materialpurple-skin .librevjs-menu-button:hover .librevjs-menu { display:block; } -.librevjs-libre-skin .librevjs-menu-button ul li { +.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li { list-style:none; margin:0; padding:.3em 0; @@ -437,20 +437,21 @@ line-height:1.4em; font-size:1.2em; text-align:center; text-transform:lowercase; +color: #ccc; } /*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { +.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected { color: #ffffff; background-color: rgb(156, 39, 176); } -.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 { +.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover { outline: 0; color: #fff; background-color: #9c27b0; } /*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { +.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-menu-title { text-align:center; text-transform:uppercase; font-size:1em; @@ -460,13 +461,13 @@ margin:0 0 .3em; font-weight:700; cursor:default; } -.librevjs-libre-skin .librevjs-subtitles-button:before { +.librevjs-libre-materialpurple-skin .librevjs-subtitles-button:before { content:"\e00c" } -.librevjs-libre-skin .librevjs-captions-button:before { +.librevjs-libre-materialpurple-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 { +.librevjs-libre-materialpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialpurple-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; @@ -566,7 +567,7 @@ background-color: rgba(2, 7, 11, 0.7); .librevjs-tt-cue { display:block } -.librevjs-libre-skin .librevjs-hidden { +.librevjs-libre-materialpurple-skin .librevjs-hidden { display:none } .librevjs-lock-showing { @@ -582,11 +583,13 @@ padding: 130px 10px 20px; text-align: center; } /*title de resolucion | subtitles y Caption*/ -ul li.librevjs-menu-title.librevjs-res-menu-title{ +.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ color:#9c27b0; +background-color: inherit; } -ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ color:#8e44ad; +background-color: inherit; } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { @@ -623,7 +626,7 @@ left: 0; .cliplibre-js .librevjs-text-track{ font-size: 0.9em; } - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ font-size: 5em; top: 45%; } @@ -637,17 +640,17 @@ left: 0; } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { + .librevjs-libre-materialpurple-skin .librevjs-big-play-button { top:35%; } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ font-size: 3em; } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ font-size: 2em; } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-purple.min.css b/librevideojs/css/librevideojs-material/libre-skin-purple.min.css deleted file mode 100644 index 96b1b0e..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-purple.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = Purple -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{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;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}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;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)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#9c27b0}.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}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#9c27b0}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#8e44ad}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.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}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#9c27b0 url() -50% 0 repeat}.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}.librevjs-libre-skin .librevjs-play-progress{background:#9c27b0 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;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"}.librevjs-libre-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:#9c27b0}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.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:#8e44ad}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#9c27b0}.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:#9c27b0}.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.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:#ffed00;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}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#9c27b0}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#8e44ad}.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:.9em}.librevjs-libre-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-skin .librevjs-big-play-button{top:35%}}@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}}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-red.css b/librevideojs/css/librevideojs-material/libre-skin-red.css index 5b70036..2a14676 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-red.css +++ b/librevideojs/css/librevideojs-material/libre-skin-red.css @@ -3,7 +3,7 @@ LibreVideoJS Estilos personalizados = Red Version 1.2 Escrito por Jesús Eduardo */ -.librevjs-libre-skin { +.librevjs-libre-materialred-skin { color:#ccc; background-color: inherit; } @@ -15,7 +15,7 @@ src: local('?'), url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), url("../../fonts/libre-material/libre-icons.svg") format("svg"); } -.librevjs-libre-skin .librevjs-slider { +.librevjs-libre-materialred-skin .librevjs-slider { /* Replace browser focus highlight with handle highlight */ outline: 0; position: relative; @@ -25,18 +25,18 @@ padding: 0; background-color: #000000; background-color: rgba(0, 0, 0, 0.5); } -.librevjs-libre-skin .librevjs-slider:focus { +.librevjs-libre-materialred-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 { +.librevjs-libre-materialred-skin .librevjs-slider-handle { width: 0; height: 0; } -.librevjs-libre-skin .librevjs-slider-handle:before { +.librevjs-libre-materialred-skin .librevjs-slider-handle:before { text-shadow: 0em 0em 1em #fff; position: absolute; top: 0; @@ -44,7 +44,7 @@ left: 0; } /* control bar */ -.librevjs-libre-skin .librevjs-control-bar { +.librevjs-libre-materialred-skin .librevjs-control-bar { /* Start hidden */ display: none; position: absolute; @@ -60,7 +60,7 @@ height: 3.0em; background-color: #232323; background-color: rgba(35, 35, 35, 0.8); } -.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { +.librevjs-libre-materialred-skin.librevjs-has-started .librevjs-control-bar { display:block; visibility:visible; opacity:1; @@ -69,7 +69,7 @@ opacity:1; -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 { +.librevjs-libre-materialred-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { display:block; visibility:hidden; opacity:0; @@ -78,18 +78,18 @@ opacity:0; -o-transition:visibility 1s,opacity 1s; transition:visibility 1s,opacity 1s } -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { +.librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-control-bar { display:none } -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { +.librevjs-libre-materialred-skin.librevjs-using-native-controls .librevjs-control-bar { display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + .librevjs-libre-materialred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { content:"" } } -.librevjs-libre-skin .librevjs-control { +.librevjs-libre-materialred-skin .librevjs-control { outline:0; position:relative; float:left; @@ -99,7 +99,7 @@ padding:0; height:3em; width:4em } -.librevjs-libre-skin .librevjs-control:before { +.librevjs-libre-materialred-skin .librevjs-control:before { font-family:LibreVideoJS; font-size:1.5em; line-height:2; @@ -112,13 +112,13 @@ 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 { +.librevjs-libre-materialred-skin .librevjs-control:focus:before,.librevjs-libre-materialred-skin .librevjs-control:hover:before { color: #f44336; } /*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus { +.librevjs-libre-materialred-skin .librevjs-control:focus { } -.librevjs-libre-skin .librevjs-control-text { +.librevjs-libre-materialred-skin .librevjs-control-text { border:0; clip:rect(0 0 0 0); height:1px; @@ -130,52 +130,52 @@ width:1px } /*Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-play-control { +.librevjs-libre-materialred-skin .librevjs-play-control { width:5em; cursor:pointer; color: rgb(244, 67, 54); } -.librevjs-libre-skin .librevjs-play-control:before { +.librevjs-libre-materialred-skin .librevjs-play-control:before { content:"\e001" } -.librevjs-libre-skin .librevjs-play-control:hover:before { +.librevjs-libre-materialred-skin .librevjs-play-control:hover:before { color:#f22e1f; /*color de play control al pasar el cursor*/ } -.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { +.librevjs-libre-materialred-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 { +.librevjs-libre-materialred-skin .librevjs-mute-control,.librevjs-libre-materialred-skin .librevjs-volume-menu-button { cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { +.librevjs-libre-materialred-skin .librevjs-mute-control:before,.librevjs-libre-materialred-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 { +.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialred-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 { +.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialred-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 { +.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-2:before { content:"\e005" } -.librevjs-libre-skin .librevjs-volume-control { +.librevjs-libre-materialred-skin .librevjs-volume-control { width:5em; float:right } -.librevjs-libre-skin .librevjs-volume-bar { +.librevjs-libre-materialred-skin .librevjs-volume-bar { width:5em; height:.6em; margin:1.1em auto 0 } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { +.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu-content { height:2.9em } /*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-level { +.librevjs-libre-materialred-skin .librevjs-volume-level { position: absolute; top: 0; left: 0; @@ -186,22 +186,22 @@ width: 100%; background: #f44336 url() -50% 0 repeat; /*color de barra volumen*/ } /*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { +.librevjs-libre-materialred-skin .librevjs-volume-bar .librevjs-volume-handle { width:.5em; height:.5em } -.librevjs-libre-skin .librevjs-volume-handle:before { +.librevjs-libre-materialred-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 { +.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { width:6em; left:-4em } -.librevjs-libre-skin .librevjs-progress-control { +.librevjs-libre-materialred-skin .librevjs-progress-control { position:absolute; left:0; right:0; @@ -214,17 +214,17 @@ top:-1em; -o-transition:all .4s; transition:all .4s } -.librevjs-libre-skin:hover .librevjs-progress-control { +.librevjs-libre-materialred-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 { +.librevjs-libre-materialred-skin .librevjs-progress-holder { height:100% } -.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { +.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-load-progress { position:absolute; display:block; height:100%; @@ -235,32 +235,32 @@ top:0 } /* Personalización de barra de progreso a color rojo */ -.librevjs-libre-skin .librevjs-play-progress { +.librevjs-libre-materialred-skin .librevjs-play-progress { background: #f44336 url() -50% 0 repeat; } -.librevjs-libre-skin .librevjs-load-progress { +.librevjs-libre-materialred-skin .librevjs-load-progress { background:#646464; background:rgba(255,255,255,.4) } -.librevjs-libre-skin .librevjs-seek-handle { +.librevjs-libre-materialred-skin .librevjs-seek-handle { width:1.5em; height:100% } -.librevjs-libre-skin .librevjs-seek-handle:before { +.librevjs-libre-materialred-skin .librevjs-seek-handle:before { padding-top:.1em } -.librevjs-libre-skin .librevjs-time-controls { +.librevjs-libre-materialred-skin .librevjs-time-controls { font-size:1em; font-weight: 700;/*mayor visibilidad*/ line-height:3em } -.librevjs-libre-skin .librevjs-current-time { +.librevjs-libre-materialred-skin .librevjs-current-time { float:left } -.librevjs-libre-skin .librevjs-duration { +.librevjs-libre-materialred-skin .librevjs-duration { float:left } -.librevjs-libre-skin .librevjs-remaining-time { +.librevjs-libre-materialred-skin .librevjs-remaining-time { display:none; float:left } @@ -268,20 +268,20 @@ float:left float:left; line-height:3em } -.librevjs-libre-skin .librevjs-fullscreen-control { +.librevjs-libre-materialred-skin .librevjs-fullscreen-control { width:3.8em; cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-fullscreen-control:before { +.librevjs-libre-materialred-skin .librevjs-fullscreen-control:before { content:"\e000" } -.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +.librevjs-libre-materialred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { content:"\e00b" } /*Centrado del button Play y personalizado*/ -.librevjs-libre-skin .librevjs-big-play-button { +.librevjs-libre-materialred-skin .librevjs-big-play-button { left: 50%; top: 40%; font-size: 10em; @@ -299,23 +299,23 @@ opacity: 1; color: #f44336; } /* Hide if controls are disabled */ -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { +.librevjs-libre-materialred-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 { +.librevjs-libre-materialred-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 { +.librevjs-libre-materialred-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 { +.librevjs-libre-materialred-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialred-skin .librevjs-big-play-button:focus { color: rgba(244, 67, 54, 0.89); /*color boton focus*/ } -.librevjs-libre-skin .librevjs-big-play-button:before { +.librevjs-libre-materialred-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 @@ -348,7 +348,7 @@ opacity:.75; -o-animation:spin 1.5s infinite linear; animation:spin 1.5s infinite linear; } -.librevjs-libre-skin .librevjs-loading-spinner:before { +.librevjs-libre-materialred-skin .librevjs-loading-spinner:before { content:"\e01e"; font-family:LibreVideoJS; position:absolute; @@ -391,11 +391,11 @@ text-shadow:0 0 .1em #000; transform:rotate(359deg) } } -.librevjs-libre-skin .librevjs-menu-button { +.librevjs-libre-materialred-skin .librevjs-menu-button { float:right; cursor:pointer } -.librevjs-libre-skin .librevjs-menu { +.librevjs-libre-materialred-skin .librevjs-menu { display:none; position:absolute; bottom:0; @@ -408,7 +408,7 @@ 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 { +.librevjs-libre-materialred-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { display:block; padding:0; margin:0; @@ -424,31 +424,32 @@ background-color:rgba(7,20,30,.7); -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 { +.librevjs-libre-materialred-skin .librevjs-menu-button:hover .librevjs-menu { display:block } -.librevjs-libre-skin .librevjs-menu-button ul li { +.librevjs-libre-materialred-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 +text-transform:lowercase; +color:#ccc; } /*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { +.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected { color: #ffffff; background-color: rgb(244, 67, 54); } -.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 { +.librevjs-libre-materialred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:hover { outline: 0; color: #fff; background-color: #f44336; } /*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { +.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-menu-title { text-align:center; text-transform:uppercase; font-size:1em; @@ -458,13 +459,13 @@ margin:0 0 .3em; font-weight:700; cursor:default } -.librevjs-libre-skin .librevjs-subtitles-button:before { +.librevjs-libre-materialred-skin .librevjs-subtitles-button:before { content:"\e00c" } -.librevjs-libre-skin .librevjs-captions-button:before { +.librevjs-libre-materialred-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 { +.librevjs-libre-materialred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialred-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 @@ -564,7 +565,7 @@ background-color: rgba(2, 7, 11, 0.7); .librevjs-tt-cue { display:block } -.librevjs-libre-skin .librevjs-hidden { +.librevjs-libre-materialred-skin .librevjs-hidden { display:none } .librevjs-lock-showing { @@ -580,11 +581,13 @@ padding: 130px 10px 20px; text-align: center; } /*title de resolucion | subtitles y Caption*/ -ul li.librevjs-menu-title.librevjs-res-menu-title{ +.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ color: rgb(246, 44, 30); +background-color: inherit; } -ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ color: rgb(244, 67, 54); +background-color: inherit; } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { @@ -621,7 +624,7 @@ left: 0; .cliplibre-js .librevjs-text-track{ font-size: 0.9em; } - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialred-skin .librevjs-big-play-button{ font-size: 5em; top: 45%; } @@ -635,17 +638,17 @@ left: 0; } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { + .librevjs-libre-materialred-skin .librevjs-big-play-button { top:35%; } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialred-skin .librevjs-big-play-button{ font-size: 3em; } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialred-skin .librevjs-big-play-button{ font-size: 2em; } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-red.min.css b/librevideojs/css/librevideojs-material/libre-skin-red.min.css deleted file mode 100644 index 21c4d27..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-red.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = Red -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{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;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}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;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)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#f44336}.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}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#f44336}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#f22e1f}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.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}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#f44336 url() -50% 0 repeat}.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}.librevjs-libre-skin .librevjs-play-progress{background:#f44336 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;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"}.librevjs-libre-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:#f44336}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.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:rgba(244,67,54,0.89)}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#f44336}.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:#f44336}.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.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:#ffed00;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}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#f62c1e}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#f44336}.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:.9em}.librevjs-libre-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-skin .librevjs-big-play-button{top:35%}}@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}}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-teal.css b/librevideojs/css/librevideojs-material/libre-skin-teal.css index a3c4292..d36a6ac 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-teal.css +++ b/librevideojs/css/librevideojs-material/libre-skin-teal.css @@ -3,7 +3,7 @@ LibreVideoJS Estilos personalizados = Teal Version 1.2 Escrito por Jesús Eduardo */ -.librevjs-libre-skin { +.librevjs-libre-materialteal-skin { color:#ccc; background-color: inherit; } @@ -15,7 +15,7 @@ src: local('?'), url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), url("../../fonts/libre-material/libre-icons.svg") format("svg"); } -.librevjs-libre-skin .librevjs-slider { +.librevjs-libre-materialteal-skin .librevjs-slider { /* Replace browser focus highlight with handle highlight */ outline: 0; position: relative; @@ -25,18 +25,18 @@ padding: 0; background-color: #000000; background-color: rgba(0, 0, 0, 0.5); } -.librevjs-libre-skin .librevjs-slider:focus { +.librevjs-libre-materialteal-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 { +.librevjs-libre-materialteal-skin .librevjs-slider-handle { width: 0; height: 0; } -.librevjs-libre-skin .librevjs-slider-handle:before { +.librevjs-libre-materialteal-skin .librevjs-slider-handle:before { text-shadow: 0em 0em 1em #fff; position: absolute; top: 0; @@ -44,7 +44,7 @@ left: 0; } /* control bar */ -.librevjs-libre-skin .librevjs-control-bar { +.librevjs-libre-materialteal-skin .librevjs-control-bar { /* Start hidden */ display: none; position: absolute; @@ -60,7 +60,7 @@ height: 3.0em; background-color: #232323; background-color: rgba(35, 35, 35, 0.8); } -.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { +.librevjs-libre-materialteal-skin.librevjs-has-started .librevjs-control-bar { display:block; visibility:visible; opacity:1; @@ -69,7 +69,7 @@ opacity:1; -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 { +.librevjs-libre-materialteal-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { display:block; visibility:hidden; opacity:0; @@ -78,18 +78,18 @@ opacity:0; -o-transition:visibility 1s,opacity 1s; transition:visibility 1s,opacity 1s } -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { +.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-control-bar { display:none } -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { +.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-control-bar { display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + .librevjs-libre-materialteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { content:"" } } -.librevjs-libre-skin .librevjs-control { +.librevjs-libre-materialteal-skin .librevjs-control { outline:0; position:relative; float:left; @@ -99,7 +99,7 @@ padding:0; height:3em; width:4em } -.librevjs-libre-skin .librevjs-control:before { +.librevjs-libre-materialteal-skin .librevjs-control:before { font-family:LibreVideoJS; font-size:1.5em; line-height:2; @@ -112,13 +112,13 @@ 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 { +.librevjs-libre-materialteal-skin .librevjs-control:focus:before,.librevjs-libre-materialteal-skin .librevjs-control:hover:before { color: #1de9b6; } /*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus { +.librevjs-libre-materialteal-skin .librevjs-control:focus { } -.librevjs-libre-skin .librevjs-control-text { +.librevjs-libre-materialteal-skin .librevjs-control-text { border:0; clip:rect(0 0 0 0); height:1px; @@ -130,52 +130,52 @@ width:1px } /*Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-play-control { +.librevjs-libre-materialteal-skin .librevjs-play-control { width:5em; cursor:pointer; color:rgb(29, 233, 182); } -.librevjs-libre-skin .librevjs-play-control:before { +.librevjs-libre-materialteal-skin .librevjs-play-control:before { content:"\e001" } -.librevjs-libre-skin .librevjs-play-control:hover:before { +.librevjs-libre-materialteal-skin .librevjs-play-control:hover:before { color:#007c5d; /*color de play control al pasar el cursor*/ } -.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { +.librevjs-libre-materialteal-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 { +.librevjs-libre-materialteal-skin .librevjs-mute-control,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button { cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { +.librevjs-libre-materialteal-skin .librevjs-mute-control:before,.librevjs-libre-materialteal-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 { +.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialteal-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 { +.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialteal-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 { +.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before { content:"\e005" } -.librevjs-libre-skin .librevjs-volume-control { +.librevjs-libre-materialteal-skin .librevjs-volume-control { width:5em; float:right } -.librevjs-libre-skin .librevjs-volume-bar { +.librevjs-libre-materialteal-skin .librevjs-volume-bar { width:5em; height:.6em; margin:1.1em auto 0 } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { +.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu-content { height:2.9em } /*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-level { +.librevjs-libre-materialteal-skin .librevjs-volume-level { position: absolute; top: 0; left: 0; @@ -186,22 +186,22 @@ width: 100%; background: #1de9b6 url() -50% 0 repeat; } /*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { +.librevjs-libre-materialteal-skin .librevjs-volume-bar .librevjs-volume-handle { width:.5em; height:.5em } -.librevjs-libre-skin .librevjs-volume-handle:before { +.librevjs-libre-materialteal-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 { +.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { width:6em; left:-4em; } -.librevjs-libre-skin .librevjs-progress-control { +.librevjs-libre-materialteal-skin .librevjs-progress-control { position:absolute; left:0; right:0; @@ -214,17 +214,17 @@ top:-1em; -o-transition:all .4s; transition:all .4s; } -.librevjs-libre-skin:hover .librevjs-progress-control { +.librevjs-libre-materialteal-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 { +.librevjs-libre-materialteal-skin .librevjs-progress-holder { height:100%; } -.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { +.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-load-progress { position:absolute; display:block; height:100%; @@ -235,32 +235,32 @@ top:0 } /* Personalización de barra de progreso a color azul */ -.librevjs-libre-skin .librevjs-play-progress { +.librevjs-libre-materialteal-skin .librevjs-play-progress { background: #1de9b6 url() -50% 0 repeat; } -.librevjs-libre-skin .librevjs-load-progress { +.librevjs-libre-materialteal-skin .librevjs-load-progress { background:#646464; background:rgba(255,255,255,.4) } -.librevjs-libre-skin .librevjs-seek-handle { +.librevjs-libre-materialteal-skin .librevjs-seek-handle { width:1.5em; height:100% } -.librevjs-libre-skin .librevjs-seek-handle:before { +.librevjs-libre-materialteal-skin .librevjs-seek-handle:before { padding-top:.1em } -.librevjs-libre-skin .librevjs-time-controls { +.librevjs-libre-materialteal-skin .librevjs-time-controls { font-size:1em; font-weight: 700;/*mayor visibilidad*/ line-height:3em } -.librevjs-libre-skin .librevjs-current-time { +.librevjs-libre-materialteal-skin .librevjs-current-time { float:left } -.librevjs-libre-skin .librevjs-duration { +.librevjs-libre-materialteal-skin .librevjs-duration { float:left } -.librevjs-libre-skin .librevjs-remaining-time { +.librevjs-libre-materialteal-skin .librevjs-remaining-time { display:none; float:left } @@ -268,20 +268,20 @@ float:left float:left; line-height:3em } -.librevjs-libre-skin .librevjs-fullscreen-control { +.librevjs-libre-materialteal-skin .librevjs-fullscreen-control { width:3.8em; cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-fullscreen-control:before { +.librevjs-libre-materialteal-skin .librevjs-fullscreen-control:before { content:"\e000" } -.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +.librevjs-libre-materialteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { content:"\e00b" } /*Centrado del button Play y personalizado*/ -.librevjs-libre-skin .librevjs-big-play-button { +.librevjs-libre-materialteal-skin .librevjs-big-play-button { left: 50%; top: 40%; font-size: 10em; @@ -299,23 +299,23 @@ opacity: 1; color: #1abc9c; } /* Hide if controls are disabled */ -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { +.librevjs-libre-materialteal-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 { +.librevjs-libre-materialteal-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 { +.librevjs-libre-materialteal-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 { +.librevjs-libre-materialteal-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialteal-skin .librevjs-big-play-button:focus { color: #16a085; } -.librevjs-libre-skin .librevjs-big-play-button:before { +.librevjs-libre-materialteal-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 @@ -348,7 +348,7 @@ opacity:.75; -o-animation:spin 1.5s infinite linear; animation:spin 1.5s infinite linear } -.librevjs-libre-skin .librevjs-loading-spinner:before { +.librevjs-libre-materialteal-skin .librevjs-loading-spinner:before { content:"\e01e"; font-family:LibreVideoJS; position:absolute; @@ -391,11 +391,11 @@ text-shadow:0 0 .1em #000 transform:rotate(359deg) } } -.librevjs-libre-skin .librevjs-menu-button { +.librevjs-libre-materialteal-skin .librevjs-menu-button { float:right; cursor:pointer; } -.librevjs-libre-skin .librevjs-menu { +.librevjs-libre-materialteal-skin .librevjs-menu { display:none; position:absolute; bottom:0; @@ -408,7 +408,7 @@ 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 { +.librevjs-libre-materialteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { display:block; padding:0; margin:0; @@ -424,10 +424,10 @@ background-color:rgba(7,20,30,.7); -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 { +.librevjs-libre-materialteal-skin .librevjs-menu-button:hover .librevjs-menu { display:block; } -.librevjs-libre-skin .librevjs-menu-button ul li { +.librevjs-libre-materialteal-skin .librevjs-menu-button ul li { list-style:none; margin:0; padding:.3em 0; @@ -435,20 +435,21 @@ line-height:1.4em; font-size:1.2em; text-align:center; text-transform:lowercase; +color:#ccc; } /*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { +.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected { color: rgb(1, 56, 47); background-color: rgb(29, 233, 182); } -.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 { +.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:hover { outline: 0; color: #004d40; background-color: #1de9b6; } /*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { +.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-menu-title { text-align:center; text-transform:uppercase; font-size:1em; @@ -458,13 +459,13 @@ margin:0 0 .3em; font-weight:700; cursor:default; } -.librevjs-libre-skin .librevjs-subtitles-button:before { +.librevjs-libre-materialteal-skin .librevjs-subtitles-button:before { content:"\e00c" } -.librevjs-libre-skin .librevjs-captions-button:before { +.librevjs-libre-materialteal-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 { +.librevjs-libre-materialteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialteal-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; @@ -564,7 +565,7 @@ background-color: rgba(2, 7, 11, 0.7); .librevjs-tt-cue { display:block } -.librevjs-libre-skin .librevjs-hidden { +.librevjs-libre-materialteal-skin .librevjs-hidden { display:none } .librevjs-lock-showing { @@ -581,11 +582,13 @@ text-align: center; } /*title de resolucion | subtitles y Caption*/ -ul li.librevjs-menu-title.librevjs-res-menu-title{ +.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ color:rgb(26, 187, 156); +background-color: inherit; } -ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ color: rgb(29, 233, 182); +background-color: inherit; } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { @@ -622,7 +625,7 @@ left: 0; .cliplibre-js .librevjs-text-track{ font-size: 0.9em; } - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialteal-skin .librevjs-big-play-button{ font-size: 5em; top: 45%; } @@ -636,17 +639,17 @@ left: 0; } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { + .librevjs-libre-materialteal-skin .librevjs-big-play-button { top:35%; } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialteal-skin .librevjs-big-play-button{ font-size: 3em; } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialteal-skin .librevjs-big-play-button{ font-size: 2em; } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-teal.min.css b/librevideojs/css/librevideojs-material/libre-skin-teal.min.css deleted file mode 100644 index 81a7d42..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-teal.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = Teal -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{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;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}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;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)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#1de9b6}.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}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#1de9b6}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#007c5d}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.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}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#1de9b6 url() -50% 0 repeat}.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}.librevjs-libre-skin .librevjs-play-progress{background:#1de9b6 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;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"}.librevjs-libre-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:#1abc9c}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.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:#16a085}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#01382f;background-color:#1de9b6}.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:#004d40;background-color:#1de9b6}.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:#ffed00;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}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#1abb9c}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#1de9b6}.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:.9em}.librevjs-libre-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-skin .librevjs-big-play-button{top:35%}}@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}}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-yellow.css b/librevideojs/css/librevideojs-material/libre-skin-yellow.css index 80c3591..22b2b08 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-yellow.css +++ b/librevideojs/css/librevideojs-material/libre-skin-yellow.css @@ -3,7 +3,7 @@ LibreVideoJS Estilos personalizados = Yellow Version 1.2 Escrito por Jesús Eduardo */ -.librevjs-libre-skin { +.librevjs-libre-materialyellow-skin { color:#ccc; background-color: inherit; } @@ -15,7 +15,7 @@ src: local('?'), url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), url("../../fonts/libre-material/libre-icons.svg") format("svg"); } -.librevjs-libre-skin .librevjs-slider { +.librevjs-libre-materialyellow-skin .librevjs-slider { /* Replace browser focus highlight with handle highlight */ outline: 0; position: relative; @@ -25,18 +25,18 @@ padding: 0; background-color: #000000; background-color: rgba(0, 0, 0, 0.5); } -.librevjs-libre-skin .librevjs-slider:focus { +.librevjs-libre-materialyellow-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 { +.librevjs-libre-materialyellow-skin .librevjs-slider-handle { width: 0; height: 0; } -.librevjs-libre-skin .librevjs-slider-handle:before { +.librevjs-libre-materialyellow-skin .librevjs-slider-handle:before { text-shadow: 0em 0em 1em #fff; position: absolute; top: 0; @@ -44,7 +44,7 @@ left: 0; } /* control bar */ -.librevjs-libre-skin .librevjs-control-bar { +.librevjs-libre-materialyellow-skin .librevjs-control-bar { /* Start hidden */ display: none; position: absolute; @@ -60,7 +60,7 @@ height: 3.0em; background-color: #232323; background-color: rgba(35, 35, 35, 0.8); } -.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { +.librevjs-libre-materialyellow-skin.librevjs-has-started .librevjs-control-bar { display:block; visibility:visible; opacity:1; @@ -69,7 +69,7 @@ opacity:1; -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 { +.librevjs-libre-materialyellow-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { display:block; visibility:hidden; opacity:0; @@ -78,18 +78,18 @@ opacity:0; -o-transition:visibility 1s,opacity 1s; transition:visibility 1s,opacity 1s } -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { +.librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-control-bar { display:none } -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { +.librevjs-libre-materialyellow-skin.librevjs-using-native-controls .librevjs-control-bar { display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + .librevjs-libre-materialyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { content:"" } } -.librevjs-libre-skin .librevjs-control { +.librevjs-libre-materialyellow-skin .librevjs-control { outline:0; position:relative; float:left; @@ -99,7 +99,7 @@ padding:0; height:3em; width:4em } -.librevjs-libre-skin .librevjs-control:before { +.librevjs-libre-materialyellow-skin .librevjs-control:before { font-family:LibreVideoJS; font-size:1.5em; line-height:2; @@ -112,13 +112,13 @@ 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 { +.librevjs-libre-materialyellow-skin .librevjs-control:focus:before,.librevjs-libre-materialyellow-skin .librevjs-control:hover:before { color: #f1c40f; } /*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus { +.librevjs-libre-materialyellow-skin .librevjs-control:focus { } -.librevjs-libre-skin .librevjs-control-text { +.librevjs-libre-materialyellow-skin .librevjs-control-text { border:0; clip:rect(0 0 0 0); height:1px; @@ -130,52 +130,52 @@ width:1px } /*Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-play-control { +.librevjs-libre-materialyellow-skin .librevjs-play-control { width:5em; cursor:pointer; color: rgb(241, 196, 14); } -.librevjs-libre-skin .librevjs-play-control:before { +.librevjs-libre-materialyellow-skin .librevjs-play-control:before { content:"\e001" } -.librevjs-libre-skin .librevjs-play-control:hover:before { +.librevjs-libre-materialyellow-skin .librevjs-play-control:hover:before { color:#f39c12; /*color de play control al pasar el cursor*/ } -.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { +.librevjs-libre-materialyellow-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 { +.librevjs-libre-materialyellow-skin .librevjs-mute-control,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button { cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { +.librevjs-libre-materialyellow-skin .librevjs-mute-control:before,.librevjs-libre-materialyellow-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 { +.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialyellow-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 { +.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialyellow-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 { +.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before { content:"\e005" } -.librevjs-libre-skin .librevjs-volume-control { +.librevjs-libre-materialyellow-skin .librevjs-volume-control { width:5em; float:right } -.librevjs-libre-skin .librevjs-volume-bar { +.librevjs-libre-materialyellow-skin .librevjs-volume-bar { width:5em; height:.6em; margin:1.1em auto 0; } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { +.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu-content { height:2.9em; } /*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-level { +.librevjs-libre-materialyellow-skin .librevjs-volume-level { position: absolute; top: 0; left: 0; @@ -186,22 +186,22 @@ width: 100%; background: #f1c40f url() -50% 0 repeat; /*color de barra volumen*/ } /*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { +.librevjs-libre-materialyellow-skin .librevjs-volume-bar .librevjs-volume-handle { width:.5em; height:.5em; } -.librevjs-libre-skin .librevjs-volume-handle:before { +.librevjs-libre-materialyellow-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 { +.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { width:6em; left:-4em } -.librevjs-libre-skin .librevjs-progress-control { +.librevjs-libre-materialyellow-skin .librevjs-progress-control { position:absolute; left:0; right:0; @@ -214,17 +214,17 @@ top:-1em; -o-transition:all .4s; transition:all .4s; } -.librevjs-libre-skin:hover .librevjs-progress-control { +.librevjs-libre-materialyellow-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 { +.librevjs-libre-materialyellow-skin .librevjs-progress-holder { height:100% } -.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { +.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-load-progress { position:absolute; display:block; height:100%; @@ -235,32 +235,32 @@ top:0; } /* Personalización de barra de progreso a color amarillo */ -.librevjs-libre-skin .librevjs-play-progress { +.librevjs-libre-materialyellow-skin .librevjs-play-progress { background: #f1c40f url() -50% 0 repeat; } -.librevjs-libre-skin .librevjs-load-progress { +.librevjs-libre-materialyellow-skin .librevjs-load-progress { background:#646464; background:rgba(255,255,255,.4); } -.librevjs-libre-skin .librevjs-seek-handle { +.librevjs-libre-materialyellow-skin .librevjs-seek-handle { width:1.5em; height:100%; } -.librevjs-libre-skin .librevjs-seek-handle:before { +.librevjs-libre-materialyellow-skin .librevjs-seek-handle:before { padding-top:.1em } -.librevjs-libre-skin .librevjs-time-controls { +.librevjs-libre-materialyellow-skin .librevjs-time-controls { font-size:1em; font-weight: 700;/*mayor visibilidad*/ line-height:3em; } -.librevjs-libre-skin .librevjs-current-time { +.librevjs-libre-materialyellow-skin .librevjs-current-time { float:left } -.librevjs-libre-skin .librevjs-duration { +.librevjs-libre-materialyellow-skin .librevjs-duration { float:left } -.librevjs-libre-skin .librevjs-remaining-time { +.librevjs-libre-materialyellow-skin .librevjs-remaining-time { display:none; float:left; } @@ -268,20 +268,20 @@ float:left; float:left; line-height:3em } -.librevjs-libre-skin .librevjs-fullscreen-control { +.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control { width:3.8em; cursor:pointer; float:right; } -.librevjs-libre-skin .librevjs-fullscreen-control:before { +.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control:before { content:"\e000" } -.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +.librevjs-libre-materialyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { content:"\e00b" } /*Centrado del button Play y personalizado*/ -.librevjs-libre-skin .librevjs-big-play-button { +.librevjs-libre-materialyellow-skin .librevjs-big-play-button { left: 50%; top: 40%; font-size: 10em; @@ -299,23 +299,23 @@ opacity: 1; color: #f1c40f; } /* Hide if controls are disabled */ -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { +.librevjs-libre-materialyellow-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 { +.librevjs-libre-materialyellow-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 { +.librevjs-libre-materialyellow-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 { +.librevjs-libre-materialyellow-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialyellow-skin .librevjs-big-play-button:focus { color: rgb(244, 156, 18); /*color boton focus amarillo oscuro*/ } -.librevjs-libre-skin .librevjs-big-play-button:before { +.librevjs-libre-materialyellow-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 @@ -348,7 +348,7 @@ opacity:.75; -o-animation:spin 1.5s infinite linear; animation:spin 1.5s infinite linear; } -.librevjs-libre-skin .librevjs-loading-spinner:before { +.librevjs-libre-materialyellow-skin .librevjs-loading-spinner:before { content:"\e01e"; font-family:LibreVideoJS; position:absolute; @@ -391,11 +391,11 @@ text-shadow:0 0 .1em #000; transform:rotate(359deg) } } -.librevjs-libre-skin .librevjs-menu-button { +.librevjs-libre-materialyellow-skin .librevjs-menu-button { float:right; cursor:pointer; } -.librevjs-libre-skin .librevjs-menu { +.librevjs-libre-materialyellow-skin .librevjs-menu { display:none; position:absolute; bottom:0; @@ -408,7 +408,7 @@ 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 { +.librevjs-libre-materialyellow-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { display:block; padding:0; margin:0; @@ -424,10 +424,10 @@ background-color:rgba(7,20,30,.7); -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 { +.librevjs-libre-materialyellow-skin .librevjs-menu-button:hover .librevjs-menu { display:block; } -.librevjs-libre-skin .librevjs-menu-button ul li { +.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li { list-style:none; margin:0; padding:.3em 0; @@ -435,20 +435,21 @@ line-height:1.4em; font-size:1.2em; text-align:center; text-transform:lowercase; +color:#ccc; } /*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { +.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected { color: #ffffff; background-color: rgb(241, 196, 14); } -.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 { +.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover { outline: 0; color: #fff; background-color: #f1c40f; } /*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { +.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-menu-title { text-align:center; text-transform:uppercase; font-size:1em; @@ -458,13 +459,13 @@ margin:0 0 .3em; font-weight:700; cursor:default; } -.librevjs-libre-skin .librevjs-subtitles-button:before { +.librevjs-libre-materialyellow-skin .librevjs-subtitles-button:before { content:"\e00c" } -.librevjs-libre-skin .librevjs-captions-button:before { +.librevjs-libre-materialyellow-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 { +.librevjs-libre-materialyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialyellow-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 @@ -564,7 +565,7 @@ background-color: rgba(2, 7, 11, 0.7); .librevjs-tt-cue { display:block } -.librevjs-libre-skin .librevjs-hidden { +.librevjs-libre-materialyellow-skin .librevjs-hidden { display:none } .librevjs-lock-showing { @@ -580,11 +581,13 @@ padding: 130px 10px 20px; text-align: center; } /*title de resolucion | subtitles y Caption*/ -ul li.librevjs-menu-title.librevjs-res-menu-title{ +.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ color:#f1c40f; +background-color: inherit; } -ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ color:#f39c12; +background-color: inherit; } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { @@ -621,7 +624,7 @@ left: 0; .cliplibre-js .librevjs-text-track{ font-size: 0.9em; } - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ font-size: 5em; top: 45%; } @@ -635,17 +638,17 @@ left: 0; } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { + .librevjs-libre-materialyellow-skin .librevjs-big-play-button { top:35%; } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ font-size: 3em; } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ font-size: 2em; } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-yellow.min.css b/librevideojs/css/librevideojs-material/libre-skin-yellow.min.css deleted file mode 100644 index 878d886..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-yellow.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = Yellow -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{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;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}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;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)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#f1c40f}.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}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#f1c40e}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#f39c12}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.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}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#f1c40f url() -50% 0 repeat}.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}.librevjs-libre-skin .librevjs-play-progress{background:#f1c40f 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;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"}.librevjs-libre-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:#f1c40f}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.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:#f49c12}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.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}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#f1c40e}.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:#f1c40f}.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.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:#ffed00;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}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#f1c40f}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#f39c12}.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:.9em}.librevjs-libre-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-skin .librevjs-big-play-button{top:35%}}@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}}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/master.css b/librevideojs/css/librevideojs-material/master.css new file mode 100644 index 0000000..8aaa213 --- /dev/null +++ b/librevideojs/css/librevideojs-material/master.css @@ -0,0 +1,3069 @@ +/*! +LibreVideoJS Estilos personalizados +Version 1.4 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +/* Universal fonts */ +@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"); +} +/* Skins +=========================================================================================================================*/ +/* Skin-Blue ------------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-materialblue-skin { +color:#ccc; +background-color: inherit; +} + +/* Base UI Component Classes +------------------------------------------------------------------------------*/ +/* Slider - used for Volume bar and Seek bar */ +.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); +} +.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; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-materialblue-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-materialblue-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-materialblue-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); +} +/* Show the control bar only once the video has started playing */ +.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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.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 +} +.librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-materialblue-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-materialblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-materialblue-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.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) +} +/* Replacement for focus outline */ +.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 { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.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 +} + +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialblue-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(33, 150, 244); +} +.librevjs-libre-materialblue-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-materialblue-skin .librevjs-play-control:hover:before { +color:#2980b9; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-materialblue-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.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.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-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 +} +.librevjs-libre-materialblue-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del 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; +} +.librevjs-libre-materialblue-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-materialblue-skin .librevjs-volume-handle:before { +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; +} + +/* Progress +-------------------------------------------------------------------------------- +*/ +.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; +} +.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; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-materialblue-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.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-play-progress { +background: #2196F3 url() -50% 0 repeat; +} +.librevjs-libre-materialblue-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-materialblue-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-materialblue-skin .librevjs-seek-handle:before { +padding-top:.1em +} + +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialblue-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-materialblue-skin .librevjs-current-time { +float:left +} +.librevjs-libre-materialblue-skin .librevjs-duration { +float:left +} +.librevjs-libre-materialblue-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialblue-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-materialblue-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-materialblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-materialblue-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: #2196F3; +} +/* Hide if controls are disabled */ +.librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-materialblue-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-materialblue-skin.librevjs-using-native-controls .librevjs-big-play-button { +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 .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%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialblue-skin .librevjs-menu-button { +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); +} +/* Button Pop-up Menu */ +.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; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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; +} +.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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected { +color: rgb(11, 21, 42); +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: rgb(11, 21, 42); +background-color: #2196F3; +} +/*End Select color menu subtitles/caption */ +.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; +} +/* Subtitles Button */ +.librevjs-libre-materialblue-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-materialblue-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.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; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-materialblue-skin .librevjs-hidden { +display:none +} + +/*Title Resolution | subtitles and 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:hover{ +color: rgb(11, 137, 237); +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-materialblue-skin .librevjs-big-play-button{ + font-size: 5em; + top: 45%; + } +} +@media screen and (max-width: 200px){ + .librevjs-libre-materialblue-skin .librevjs-big-play-button { + top:35%; + } +} +@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; + } +} + +/* Skin-Grey -------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-materialgrey-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.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 +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.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); +} +/* Show the control bar only once the video has started playing */ +.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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.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:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-materialgrey-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.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) +} +/* Replacement for focus outline */ +.librevjs-libre-materialgrey-skin .librevjs-control:focus:before,.librevjs-libre-materialgrey-skin .librevjs-control:hover:before { +color: #9e9e9e; +} +.librevjs-libre-materialgrey-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.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 +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.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" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.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 +} + +/*Personalización del 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; +} +.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; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.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; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-materialgrey-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.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 +} +.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 +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.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 +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-materialgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.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%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.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); +} +/* Button Pop-up Menu */ +.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; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +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 Select color menu subtitles/caption */ +.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; +} +/* Subtitles Button */ +.librevjs-libre-materialgrey-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-materialgrey-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.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; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-materialgrey-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and 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; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-materialgrey-skin .librevjs-big-play-button{ + font-size: 5em; + top: 45%; + } +} +@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; + } +} + +/* Skin-Purple -----------------------------------------------------------------------------------------------------*/ +.librevjs-libre-materialpurple-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-materialpurple-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-materialpurple-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-materialpurple-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-materialpurple-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-materialpurple-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-materialpurple-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-materialpurple-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-materialpurple-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-materialpurple-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-materialpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-materialpurple-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-materialpurple-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) +} +/* Replacement for focus outline */ +.librevjs-libre-materialpurple-skin .librevjs-control:focus:before,.librevjs-libre-materialpurple-skin .librevjs-control:hover:before { +color: #9c27b0; +} +.librevjs-libre-materialpurple-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-materialpurple-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialpurple-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(156, 39, 176); +} +.librevjs-libre-materialpurple-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-materialpurple-skin .librevjs-play-control:hover:before { +color:#8e44ad; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-materialpurple-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-materialpurple-skin .librevjs-mute-control,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-materialpurple-skin .librevjs-mute-control:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-materialpurple-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-materialpurple-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-materialpurple-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #9c27b0 url() -50% 0 repeat; +} +.librevjs-libre-materialpurple-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-materialpurple-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialpurple-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-materialpurple-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-materialpurple-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-materialpurple-skin .librevjs-play-progress { +background: #9c27b0 url() -50% 0 repeat; +} +.librevjs-libre-materialpurple-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-materialpurple-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-materialpurple-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialpurple-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-materialpurple-skin .librevjs-current-time { +float:left +} +.librevjs-libre-materialpurple-skin .librevjs-duration { +float:left +} +.librevjs-libre-materialpurple-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-materialpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-materialpurple-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: #9c27b0; +} +/* Hide if controls are disabled */ +.librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-materialpurple-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-materialpurple-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-materialpurple-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialpurple-skin .librevjs-big-play-button:focus { +color: rgb(142, 68, 173); /*color boton focus purpura oscuro*/ +} +.librevjs-libre-materialpurple-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%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialpurple-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-materialpurple-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-materialpurple-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-materialpurple-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-materialpurple-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(156, 39, 176); +} +.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #9c27b0; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-materialpurple-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; +} +/* Subtitles Button */ +.librevjs-libre-materialpurple-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-materialpurple-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-materialpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialpurple-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; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-materialpurple-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #9c27b0; +background-color: inherit; +} +.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #8e44ad; +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ + font-size: 5em; + top: 45%; + } +} +@media screen and (max-width: 200px){ + .librevjs-libre-materialpurple-skin .librevjs-big-play-button { + top:35%; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ + font-size: 3em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ + font-size: 2em; + } +} + +/* Skin-Red --------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-materialred-skin { +color:#ccc; +background-color: inherit; +} + +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-materialred-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-materialred-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-materialred-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-materialred-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-materialred-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-materialred-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-materialred-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-materialred-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-materialred-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-materialred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-materialred-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-materialred-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) +} +/* Replacement for focus outline */ +.librevjs-libre-materialred-skin .librevjs-control:focus:before,.librevjs-libre-materialred-skin .librevjs-control:hover:before { +color: #f44336; +} +.librevjs-libre-materialred-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-materialred-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialred-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(244, 67, 54); +} +.librevjs-libre-materialred-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-materialred-skin .librevjs-play-control:hover:before { +color:#f22e1f; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-materialred-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-materialred-skin .librevjs-mute-control,.librevjs-libre-materialred-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-materialred-skin .librevjs-mute-control:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-materialred-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-materialred-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-materialred-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #f44336 url() -50% 0 repeat; +} +.librevjs-libre-materialred-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-materialred-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialred-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-materialred-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-materialred-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-materialred-skin .librevjs-play-progress { +background: #f44336 url() -50% 0 repeat; +} +.librevjs-libre-materialred-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-materialred-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-materialred-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialred-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-materialred-skin .librevjs-current-time { +float:left +} +.librevjs-libre-materialred-skin .librevjs-duration { +float:left +} +.librevjs-libre-materialred-skin .librevjs-remaining-time { +display:none; +float:left +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialred-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-materialred-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-materialred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-materialred-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: #f44336; +} +/* Hide if controls are disabled */ +.librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-materialred-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-materialred-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-materialred-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialred-skin .librevjs-big-play-button:focus { +color: rgba(244, 67, 54, 0.89); /*color boton focus*/ +} +.librevjs-libre-materialred-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%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialred-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-materialred-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-materialred-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; +/* Same bottom as librevjs-menu border-top */ +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-materialred-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-materialred-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(244, 67, 54); +} +.librevjs-libre-materialred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #f44336; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-materialred-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; +} +/* Subtitles Button */ +.librevjs-libre-materialred-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-materialred-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-materialred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialred-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; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-materialred-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: rgb(246, 44, 30); +background-color: inherit; +} +.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(244, 67, 54); +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-materialred-skin .librevjs-big-play-button{ + font-size: 5em; + top: 45%; + } +} +@media screen and (max-width: 200px){ + .librevjs-libre-materialred-skin .librevjs-big-play-button { + top:35%; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-materialred-skin .librevjs-big-play-button{ + font-size: 3em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-materialred-skin .librevjs-big-play-button{ + font-size: 2em; + } +} + +/* Skin-Teal -------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-materialteal-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-materialteal-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-materialteal-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-materialteal-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-materialteal-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-materialteal-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-materialteal-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-materialteal-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-materialteal-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-materialteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-materialteal-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-materialteal-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) +} +/* Replacement for focus outline */ +.librevjs-libre-materialteal-skin .librevjs-control:focus:before,.librevjs-libre-materialteal-skin .librevjs-control:hover:before { +color: #1de9b6; +} +.librevjs-libre-materialteal-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-materialteal-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialteal-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(29, 233, 182); +} +.librevjs-libre-materialteal-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-materialteal-skin .librevjs-play-control:hover:before { +color:#007c5d; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-materialteal-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-materialteal-skin .librevjs-mute-control,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-materialteal-skin .librevjs-mute-control:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-materialteal-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-materialteal-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-materialteal-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; +} +.librevjs-libre-materialteal-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-materialteal-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialteal-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-materialteal-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-materialteal-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-materialteal-skin .librevjs-play-progress { +background: #1de9b6 url() -50% 0 repeat; +} +.librevjs-libre-materialteal-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-materialteal-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-materialteal-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialteal-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-materialteal-skin .librevjs-current-time { +float:left +} +.librevjs-libre-materialteal-skin .librevjs-duration { +float:left +} +.librevjs-libre-materialteal-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialteal-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-materialteal-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-materialteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-materialteal-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: #1abc9c; +} +/* Hide if controls are disabled */ +.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-materialteal-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-materialteal-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-materialteal-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialteal-skin .librevjs-big-play-button:focus { +color: #16a085; +} +.librevjs-libre-materialteal-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%; +} + +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialteal-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-materialteal-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-materialteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-materialteal-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-materialteal-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected { +color: rgb(1, 56, 47); +background-color: rgb(29, 233, 182); +} +.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #004d40; +background-color: #1de9b6; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-materialteal-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; +} +/* Subtitles Button */ +.librevjs-libre-materialteal-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-materialteal-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-materialteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialteal-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; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-materialteal-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color:rgb(26, 187, 156); +background-color: inherit; +} +.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(29, 233, 182); +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-materialteal-skin .librevjs-big-play-button{ + font-size: 5em; + top: 45%; + } +} +@media screen and (max-width: 200px){ + .librevjs-libre-materialteal-skin .librevjs-big-play-button { + top:35%; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-materialteal-skin .librevjs-big-play-button{ + font-size: 3em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-materialteal-skin .librevjs-big-play-button{ + font-size: 2em; + } +} + +/* Skin-Yellow -----------------------------------------------------------------------------------------------------*/ +.librevjs-libre-materialyellow-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-materialyellow-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-materialyellow-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-materialyellow-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-materialyellow-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-materialyellow-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-materialyellow-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-materialyellow-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-materialyellow-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-materialyellow-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-materialyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-materialyellow-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-materialyellow-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) +} +/* Replacement for focus outline */ +.librevjs-libre-materialyellow-skin .librevjs-control:focus:before,.librevjs-libre-materialyellow-skin .librevjs-control:hover:before { +color: #f1c40f; +} +.librevjs-libre-materialyellow-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-materialyellow-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialyellow-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(241, 196, 14); +} +.librevjs-libre-materialyellow-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-materialyellow-skin .librevjs-play-control:hover:before { +color:#f39c12; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-materialyellow-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-materialyellow-skin .librevjs-mute-control,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-materialyellow-skin .librevjs-mute-control:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-materialyellow-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-materialyellow-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-materialyellow-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #f1c40f url() -50% 0 repeat; +} +.librevjs-libre-materialyellow-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-materialyellow-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialyellow-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-materialyellow-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-materialyellow-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-materialyellow-skin .librevjs-play-progress { +background: #f1c40f url() -50% 0 repeat; +} +.librevjs-libre-materialyellow-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-materialyellow-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-materialyellow-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialyellow-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-materialyellow-skin .librevjs-current-time { +float:left +} +.librevjs-libre-materialyellow-skin .librevjs-duration { +float:left +} +.librevjs-libre-materialyellow-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-materialyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-materialyellow-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: #f1c40f; +} +/* Hide if controls are disabled */ +.librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-materialyellow-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-materialyellow-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-materialyellow-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialyellow-skin .librevjs-big-play-button:focus { +color: rgb(244, 156, 18); /*color boton focus amarillo oscuro*/ +} +.librevjs-libre-materialyellow-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%; +} + +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialyellow-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-materialyellow-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-materialyellow-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-materialyellow-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-materialyellow-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(241, 196, 14); +} +.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #f1c40f; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-materialyellow-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; +} +/* Subtitles Button */ +.librevjs-libre-materialyellow-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-materialyellow-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-materialyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialyellow-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; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-materialyellow-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #f1c40f; +background-color: inherit; +} +.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #f39c12; +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ + font-size: 5em; + top: 45%; + } +} +@media screen and (max-width: 200px){ + .librevjs-libre-materialyellow-skin .librevjs-big-play-button { + top:35%; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ + font-size: 3em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ + font-size: 2em; + } +} + +/* Global Styles +==============================================================================*/ +/* Global Time-Display */ +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Global Big-Play-Button-(play-button-at-start) */ +.librevjs-error .librevjs-big-play-button { +display: none; +} +/* Global Loading Spinner */ +.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-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) + } +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.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 +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +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 +} +/* Poster Styles */ +.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% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +/* Transparent black background, or fallback to all black (oldIE) */ +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 +} +/* Global Hide disabled or unsupported controls */ +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} +/* Global 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; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } +} +@media screen and (max-width: 335px){ + .cliplibre-js { + font-size:6px; + } +} diff --git a/librevideojs/css/mix-material/master.css b/librevideojs/css/mix-material/master.css new file mode 100644 index 0000000..0bb9214 --- /dev/null +++ b/librevideojs/css/mix-material/master.css @@ -0,0 +1,3165 @@ +/*! +LibreVideoJS Estilos personalizados +Version 1.4 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +/* Universal fonts */ +@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"); +} +/* Skins +=========================================================================================================================*/ +/* Skin-Blue ------------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-mixblue-skin { +color:#ccc; +background-color: inherit; +} + +/* Base UI Component Classes +------------------------------------------------------------------------------*/ +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixblue-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-mixblue-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-mixblue-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixblue-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixblue-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixblue-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixblue-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-mixblue-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixblue-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixblue-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixblue-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) +} +/* Replacement for focus outline */ +.librevjs-libre-mixblue-skin .librevjs-control:focus:before,.librevjs-libre-mixblue-skin .librevjs-control:hover:before { +color: #2196F3; +} +.librevjs-libre-mixblue-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixblue-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} + +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(33, 150, 244); +} +.librevjs-libre-mixblue-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixblue-skin .librevjs-play-control:hover:before { +color:#2980b9; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixblue-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixblue-skin .librevjs-mute-control,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixblue-skin .librevjs-mute-control:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixblue-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixblue-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixblue-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; +} +.librevjs-libre-mixblue-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixblue-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} + +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-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-mixblue-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixblue-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixblue-skin .librevjs-play-progress { +background: #2196F3 url() -50% 0 repeat; +} +.librevjs-libre-mixblue-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixblue-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixblue-skin .librevjs-seek-handle:before { +padding-top:.1em +} + +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixblue-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixblue-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixblue-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixblue-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixblue-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.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; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixblue-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixblue-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-mixblue-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixblue-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixblue-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: #2196F3; /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixblue-skin .librevjs-big-play-button:before { +content: "\e001"; +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 */ + 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%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixblue-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixblue-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-mixblue-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixblue-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected { +color: rgb(11, 21, 42); +background-color: rgb(33, 150, 244); +} +.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: rgb(11, 21, 42); +background-color: #2196F3; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixblue-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; +} +/* Subtitles Button */ +.librevjs-libre-mixblue-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixblue-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixblue-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixblue-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; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixblue-skin .librevjs-hidden { +display:none +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color:rgb(33, 150, 244); +background-color: inherit; +} +.librevjs-libre-mixblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(11, 137, 237); +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-mixblue-skin .librevjs-big-play-button{ + font-size: 2em; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixblue-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixblue-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} + +/* Skin-Grey -------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-mixgrey-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixgrey-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-mixgrey-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-mixgrey-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixgrey-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixgrey-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixgrey-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixgrey-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-mixgrey-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixgrey-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixgrey-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixgrey-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) +} +/* Replacement for focus outline */ +.librevjs-libre-mixgrey-skin .librevjs-control:focus:before,.librevjs-libre-mixgrey-skin .librevjs-control:hover:before { +color: #9e9e9e; +} +.librevjs-libre-mixgrey-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixgrey-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(158, 158, 158); +} +.librevjs-libre-mixgrey-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixgrey-skin .librevjs-play-control:hover:before { +color:#7c7c7c; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixgrey-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixgrey-skin .librevjs-mute-control,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixgrey-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixgrey-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixgrey-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; +} +.librevjs-libre-mixgrey-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixgrey-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-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-mixgrey-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixgrey-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixgrey-skin .librevjs-play-progress { +background: #9e9e9e url() -50% 0 repeat; +} +.librevjs-libre-mixgrey-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixgrey-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixgrey-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixgrey-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixgrey-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixgrey-skin .librevjs-remaining-time { +display:none; +float:left +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixgrey-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.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; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixgrey-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixgrey-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-mixgrey-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixgrey-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixgrey-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: rgb(115, 115, 115); /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixgrey-skin .librevjs-big-play-button:before { +content: "\e001"; +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 */ + 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%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixgrey-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixgrey-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-mixgrey-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixgrey-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(158, 158, 158); +} +.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #9e9e9e; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixgrey-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; +} +/* Subtitles Button */ +.librevjs-libre-mixgrey-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixgrey-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixgrey-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixgrey-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; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixgrey-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #737373; +background-color: inherit; +} +.librevjs-libre-mixgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #9e9e9e; +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-mixgrey-skin .librevjs-big-play-button{ + font-size: 2em; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixgrey-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixgrey-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} + +/* Skin-Purple -----------------------------------------------------------------------------------------------------*/ +.librevjs-libre-mixpurple-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixpurple-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-mixpurple-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-mixpurple-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixpurple-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixpurple-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixpurple-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixpurple-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-mixpurple-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixpurple-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixpurple-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixpurple-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) +} +/* Replacement for focus outline */ +.librevjs-libre-mixpurple-skin .librevjs-control:focus:before,.librevjs-libre-mixpurple-skin .librevjs-control:hover:before { +color: #9c27b0; +} +.librevjs-libre-mixpurple-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixpurple-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(156, 39, 176); +} +.librevjs-libre-mixpurple-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixpurple-skin .librevjs-play-control:hover:before { +color:#8e44ad; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixpurple-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixpurple-skin .librevjs-mute-control,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixpurple-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixpurple-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixpurple-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #9c27b0 url() -50% 0 repeat; +} +.librevjs-libre-mixpurple-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixpurple-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-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-mixpurple-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixpurple-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixpurple-skin .librevjs-play-progress { +background: #9c27b0 url() -50% 0 repeat; +} +.librevjs-libre-mixpurple-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixpurple-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixpurple-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixpurple-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixpurple-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixpurple-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixpurple-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.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; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixpurple-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixpurple-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-mixpurple-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixpurple-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixpurple-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: rgb(142, 68, 173); /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixpurple-skin .librevjs-big-play-button:before { +content: "\e001"; +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 */ + 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%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixpurple-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixpurple-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-mixpurple-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixpurple-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(156, 39, 176); +} +.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #9c27b0; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixpurple-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; +} +/* Subtitles Button */ +.librevjs-libre-mixpurple-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixpurple-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixpurple-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; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixpurple-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #9c27b0; +background-color: inherit; +} +.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #8e44ad; +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-mixpurple-skin .librevjs-big-play-button{ + font-size: 2em; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixpurple-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixpurple-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} + +/* Skin-Red --------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-mixred-skin { +color:#ccc; +background-color: inherit; +} + +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixred-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-mixred-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-mixred-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixred-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixred-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixred-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixred-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-mixred-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixred-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixred-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixred-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) +} +/* Replacement for focus outline */ +.librevjs-libre-mixred-skin .librevjs-control:focus:before,.librevjs-libre-mixred-skin .librevjs-control:hover:before { +color: #f44336; +} +.librevjs-libre-mixred-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixred-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(244, 67, 54); +} +.librevjs-libre-mixred-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixred-skin .librevjs-play-control:hover:before { +color:#f22e1f; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixred-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixred-skin .librevjs-mute-control,.librevjs-libre-mixred-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixred-skin .librevjs-mute-control:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixred-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixred-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixred-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #f44336 url() -50% 0 repeat; +} +.librevjs-libre-mixred-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixred-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-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-mixred-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixred-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixred-skin .librevjs-play-progress { +background: #f44336 url() -50% 0 repeat; +} +.librevjs-libre-mixred-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixred-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixred-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixred-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixred-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixred-skin .librevjs-remaining-time { +display:none; +float:left +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixred-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixred-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.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; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixred-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixred-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-mixred-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixred-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixred-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: #f12b24; /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixred-skin .librevjs-big-play-button:before { +content: "\e001"; +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 */ + 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%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixred-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixred-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; +/* Same bottom as librevjs-menu border-top */ +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-mixred-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixred-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(244, 67, 54); +} +.librevjs-libre-mixred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #f44336; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixred-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; +} +/* Subtitles Button */ +.librevjs-libre-mixred-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixred-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixred-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; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixred-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: rgb(246, 44, 30); +background-color: inherit; +} +.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(244, 67, 54); +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-mixred-skin .librevjs-big-play-button{ + font-size: 2em; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixred-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixred-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} + +/* Skin-Teal -------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-mixteal-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixteal-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-mixteal-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-mixteal-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixteal-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixteal-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixteal-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixteal-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-mixteal-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixteal-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixteal-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) +} +/* Replacement for focus outline */ +.librevjs-libre-mixteal-skin .librevjs-control:focus:before,.librevjs-libre-mixteal-skin .librevjs-control:hover:before { +color: #1de9b6; +} +.librevjs-libre-mixteal-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixteal-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(29, 233, 182); +} +.librevjs-libre-mixteal-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixteal-skin .librevjs-play-control:hover:before { +color:#007c5d; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixteal-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixteal-skin .librevjs-mute-control,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixteal-skin .librevjs-mute-control:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixteal-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixteal-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixteal-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; +} +.librevjs-libre-mixteal-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixteal-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-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-mixteal-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixteal-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixteal-skin .librevjs-play-progress { +background: #1de9b6 url() -50% 0 repeat; +} +.librevjs-libre-mixteal-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixteal-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixteal-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixteal-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixteal-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixteal-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixteal-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixteal-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.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; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixteal-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixteal-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-mixteal-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixteal-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixteal-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-libre-mixteal-skin .librevjs-big-play-button:before { +content: "\e001"; +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 */ + 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%; +} + +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixteal-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-mixteal-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixteal-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected { +color: rgb(1, 56, 47); +background-color: rgb(29, 233, 182); +} +.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #004d40; +background-color: #1de9b6; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixteal-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; +} +/* Subtitles Button */ +.librevjs-libre-mixteal-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixteal-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixteal-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; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixteal-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color:rgb(26, 187, 156); +background-color: inherit; +} +.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(29, 233, 182); +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-mixteal-skin .librevjs-big-play-button{ + font-size: 2em; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixteal-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixteal-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} + +/* Skin-Yellow -----------------------------------------------------------------------------------------------------*/ +.librevjs-libre-mixyellow-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixyellow-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-mixyellow-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-mixyellow-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixyellow-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixyellow-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixyellow-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixyellow-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-mixyellow-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixyellow-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixyellow-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixyellow-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) +} +/* Replacement for focus outline */ +.librevjs-libre-mixyellow-skin .librevjs-control:focus:before,.librevjs-libre-mixyellow-skin .librevjs-control:hover:before { +color: #f1c40f; +} +.librevjs-libre-mixyellow-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixyellow-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(241, 196, 14); +} +.librevjs-libre-mixyellow-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixyellow-skin .librevjs-play-control:hover:before { +color:#f39c12; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixyellow-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixyellow-skin .librevjs-mute-control,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixyellow-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixyellow-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixyellow-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #f1c40f url() -50% 0 repeat; +} +.librevjs-libre-mixyellow-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixyellow-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-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-mixyellow-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixyellow-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixyellow-skin .librevjs-play-progress { +background: #f1c40f url() -50% 0 repeat; +} +.librevjs-libre-mixyellow-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixyellow-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixyellow-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixyellow-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixyellow-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixyellow-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixyellow-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.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; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixyellow-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixyellow-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-mixyellow-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixyellow-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixyellow-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: rgb(244, 156, 18); /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixyellow-skin .librevjs-big-play-button:before { +content: "\e001"; +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 */ + 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%; +} + +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixyellow-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixyellow-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-mixyellow-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixyellow-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(241, 196, 14); +} +.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #f1c40f; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixyellow-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; +} +/* Subtitles Button */ +.librevjs-libre-mixyellow-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixyellow-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixyellow-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; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixyellow-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #f1c40f; +background-color: inherit; +} +.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #f39c12; +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-mixyellow-skin .librevjs-big-play-button{ + font-size: 2em; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixyellow-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixyellow-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} + +/* Global Styles +==============================================================================================*/ +/* Global Time-Display */ +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Global Big-Play-Button-(play-button-at-start) */ +.librevjs-error .librevjs-big-play-button { +display: none; +} +/* Global Loading Spinner */ +.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-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) + } +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.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 +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +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 +} +/* Poster Styles */ +.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% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +/* Transparent black background, or fallback to all black (oldIE) */ +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 +} +/* Global Hide disabled or unsupported controls */ +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} +/* Global 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: 1em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } +} +@media screen and (max-width: 335px){ + .cliplibre-js { + font-size:6px; + } +} diff --git a/librevideojs/css/mix-material/mix-blue.css b/librevideojs/css/mix-material/mix-blue.css new file mode 100644 index 0000000..4e63f6e --- /dev/null +++ b/librevideojs/css/mix-material/mix-blue.css @@ -0,0 +1,747 @@ +/*! +LibreVideoJS Estilos personalizados = Blue +Version 1.4 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +.librevjs-libre-mixblue-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"); +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixblue-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-mixblue-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-mixblue-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixblue-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixblue-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixblue-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixblue-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-mixblue-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixblue-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixblue-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixblue-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) +} +/* Replacement for focus outline */ +.librevjs-libre-mixblue-skin .librevjs-control:focus:before,.librevjs-libre-mixblue-skin .librevjs-control:hover:before { +color: #2196F3; +} +.librevjs-libre-mixblue-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixblue-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(33, 150, 244); +} +.librevjs-libre-mixblue-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixblue-skin .librevjs-play-control:hover:before { +color:#2980b9; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixblue-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixblue-skin .librevjs-mute-control,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixblue-skin .librevjs-mute-control:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixblue-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixblue-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixblue-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; +} +.librevjs-libre-mixblue-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixblue-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-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-mixblue-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixblue-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixblue-skin .librevjs-play-progress { +background: #2196F3 url() -50% 0 repeat; +} +.librevjs-libre-mixblue-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixblue-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixblue-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixblue-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixblue-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixblue-skin .librevjs-remaining-time { +display:none; +float:left +} +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixblue-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixblue-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.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; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixblue-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixblue-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-mixblue-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixblue-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixblue-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: #2196F3; /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixblue-skin .librevjs-big-play-button:before { +content: "\e001"; +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 */ + 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; +} +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ +.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-mixblue-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) + } +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixblue-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixblue-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-mixblue-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixblue-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected { +color: rgb(11, 21, 42); +background-color: rgb(33, 150, 244); +} +.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: rgb(11, 21, 42); +background-color: #2196F3; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixblue-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; +} +/* Subtitles Button */ +.librevjs-libre-mixblue-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixblue-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixblue-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixblue-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; +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.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 +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +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 +} +/* Poster Styles */ +.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% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +/* Transparent black background, or fallback to all black (oldIE) */ +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 +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixblue-skin .librevjs-hidden { +display:none +} +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color:rgb(33, 150, 244); +background-color: inherit; +} +.librevjs-libre-mixblue-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%; +} +.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: 1em; + } + .librevjs-libre-mixblue-skin .librevjs-big-play-button{ + font-size: 2em; + } + .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-mixblue-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixblue-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} diff --git a/librevideojs/css/mix-material/mix-grey.css b/librevideojs/css/mix-material/mix-grey.css new file mode 100644 index 0000000..0809a7f --- /dev/null +++ b/librevideojs/css/mix-material/mix-grey.css @@ -0,0 +1,747 @@ +/*! +LibreVideoJS Estilos personalizados = Grey +Version 1.4 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +.librevjs-libre-mixgrey-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"); +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixgrey-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-mixgrey-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-mixgrey-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixgrey-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixgrey-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixgrey-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixgrey-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-mixgrey-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixgrey-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixgrey-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixgrey-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) +} +/* Replacement for focus outline */ +.librevjs-libre-mixgrey-skin .librevjs-control:focus:before,.librevjs-libre-mixgrey-skin .librevjs-control:hover:before { +color: #9e9e9e; +} +.librevjs-libre-mixgrey-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixgrey-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(158, 158, 158); +} +.librevjs-libre-mixgrey-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixgrey-skin .librevjs-play-control:hover:before { +color:#7c7c7c; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixgrey-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixgrey-skin .librevjs-mute-control,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixgrey-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixgrey-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixgrey-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; +} +.librevjs-libre-mixgrey-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixgrey-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-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-mixgrey-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixgrey-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixgrey-skin .librevjs-play-progress { +background: #9e9e9e url() -50% 0 repeat; +} +.librevjs-libre-mixgrey-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixgrey-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixgrey-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixgrey-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixgrey-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixgrey-skin .librevjs-remaining-time { +display:none; +float:left +} +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixgrey-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.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; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixgrey-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixgrey-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-mixgrey-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixgrey-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixgrey-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: rgb(115, 115, 115); /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixgrey-skin .librevjs-big-play-button:before { +content: "\e001"; +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 */ + 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; +} +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ +.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-mixgrey-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) + } +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixgrey-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixgrey-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-mixgrey-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixgrey-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(158, 158, 158); +} +.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #9e9e9e; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixgrey-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; +} +/* Subtitles Button */ +.librevjs-libre-mixgrey-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixgrey-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixgrey-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixgrey-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; +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.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 +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +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 +} +/* Poster Styles */ +.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% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +background-color:#000; +/* Transparent black background, or fallback to all black (oldIE) */ +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 +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixgrey-skin .librevjs-hidden { +display:none +} +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #737373; +background-color: inherit; +} +.librevjs-libre-mixgrey-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: 1em; + } + .librevjs-libre-mixgrey-skin .librevjs-big-play-button{ + font-size: 2em; + } + .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-mixgrey-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixgrey-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} diff --git a/librevideojs/css/mix-material/mix-purple.css b/librevideojs/css/mix-material/mix-purple.css new file mode 100644 index 0000000..e2c1b52 --- /dev/null +++ b/librevideojs/css/mix-material/mix-purple.css @@ -0,0 +1,747 @@ +/*! +LibreVideoJS Estilos personalizados = Purple +Version 1.4 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +.librevjs-libre-mixpurple-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"); +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixpurple-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-mixpurple-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-mixpurple-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixpurple-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixpurple-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixpurple-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixpurple-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-mixpurple-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixpurple-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixpurple-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixpurple-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) +} +/* Replacement for focus outline */ +.librevjs-libre-mixpurple-skin .librevjs-control:focus:before,.librevjs-libre-mixpurple-skin .librevjs-control:hover:before { +color: #9c27b0; +} +.librevjs-libre-mixpurple-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixpurple-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(156, 39, 176); +} +.librevjs-libre-mixpurple-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixpurple-skin .librevjs-play-control:hover:before { +color:#8e44ad; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixpurple-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixpurple-skin .librevjs-mute-control,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixpurple-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixpurple-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixpurple-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #9c27b0 url() -50% 0 repeat; +} +.librevjs-libre-mixpurple-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixpurple-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-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-mixpurple-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixpurple-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixpurple-skin .librevjs-play-progress { +background: #9c27b0 url() -50% 0 repeat; +} +.librevjs-libre-mixpurple-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixpurple-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixpurple-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixpurple-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixpurple-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixpurple-skin .librevjs-remaining-time { +display:none; +float:left +} +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixpurple-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.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; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixpurple-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixpurple-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-mixpurple-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixpurple-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixpurple-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: rgb(142, 68, 173); /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixpurple-skin .librevjs-big-play-button:before { +content: "\e001"; +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 */ + 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; +} +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ +.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-mixpurple-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) + } +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixpurple-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixpurple-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-mixpurple-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixpurple-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(156, 39, 176); +} +.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #9c27b0; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixpurple-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; +} +/* Subtitles Button */ +.librevjs-libre-mixpurple-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixpurple-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixpurple-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; +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.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 +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +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 +} +/* Poster Styles */ +.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% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +/* Transparent black background, or fallback to all black (oldIE) */ +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 +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixpurple-skin .librevjs-hidden { +display:none +} +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #9c27b0; +background-color: inherit; +} +.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #8e44ad; +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: 1em; + } + .librevjs-libre-mixpurple-skin .librevjs-big-play-button{ + font-size: 2em; + } + .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-mixpurple-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixpurple-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} diff --git a/librevideojs/css/mix-material/mix-red.css b/librevideojs/css/mix-material/mix-red.css new file mode 100644 index 0000000..e729b8c --- /dev/null +++ b/librevideojs/css/mix-material/mix-red.css @@ -0,0 +1,747 @@ +/*! +LibreVideoJS Estilos personalizados = Red +Version 1.4 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +.librevjs-libre-mixred-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"); +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixred-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-mixred-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-mixred-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixred-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixred-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixred-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixred-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-mixred-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixred-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixred-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixred-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) +} +/* Replacement for focus outline */ +.librevjs-libre-mixred-skin .librevjs-control:focus:before,.librevjs-libre-mixred-skin .librevjs-control:hover:before { +color: #f44336; +} +.librevjs-libre-mixred-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixred-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(244, 67, 54); +} +.librevjs-libre-mixred-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixred-skin .librevjs-play-control:hover:before { +color:#f22e1f; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixred-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixred-skin .librevjs-mute-control,.librevjs-libre-mixred-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixred-skin .librevjs-mute-control:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixred-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixred-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixred-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #f44336 url() -50% 0 repeat; +} +.librevjs-libre-mixred-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixred-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-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-mixred-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixred-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixred-skin .librevjs-play-progress { +background: #f44336 url() -50% 0 repeat; +} +.librevjs-libre-mixred-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixred-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixred-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixred-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixred-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixred-skin .librevjs-remaining-time { +display:none; +float:left +} +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixred-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixred-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.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; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixred-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixred-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-mixred-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixred-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixred-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: #f12b24; /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixred-skin .librevjs-big-play-button:before { +content: "\e001"; +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 */ + 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; +} +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ +.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-mixred-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) + } +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixred-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixred-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; +/* Same bottom as librevjs-menu border-top */ +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-mixred-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixred-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(244, 67, 54); +} +.librevjs-libre-mixred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #f44336; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixred-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; +} +/* Subtitles Button */ +.librevjs-libre-mixred-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixred-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixred-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; +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.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 +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +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 +} +/* Poster Styles */ +.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% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +/* Transparent black background, or fallback to all black (oldIE) */ +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 +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixred-skin .librevjs-hidden { +display:none +} +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: rgb(246, 44, 30); +background-color: inherit; +} +.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(244, 67, 54); +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: 1em; + } + .librevjs-libre-mixred-skin .librevjs-big-play-button{ + font-size: 2em; + } + .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-mixred-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixred-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} diff --git a/librevideojs/css/mix-material/mix-teal.css b/librevideojs/css/mix-material/mix-teal.css new file mode 100644 index 0000000..49afd7b --- /dev/null +++ b/librevideojs/css/mix-material/mix-teal.css @@ -0,0 +1,747 @@ +/*! +LibreVideoJS Estilos personalizados = Teal +Version 1.2 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +.librevjs-libre-mixteal-skin { +color:#ccc !important; +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"); +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixteal-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-mixteal-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-mixteal-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixteal-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixteal-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixteal-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixteal-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-mixteal-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixteal-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixteal-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) +} +/* Replacement for focus outline */ +.librevjs-libre-mixteal-skin .librevjs-control:focus:before,.librevjs-libre-mixteal-skin .librevjs-control:hover:before { +color: #1de9b6; +} +.librevjs-libre-mixteal-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixteal-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(29, 233, 182); +} +.librevjs-libre-mixteal-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixteal-skin .librevjs-play-control:hover:before { +color:#007c5d; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixteal-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixteal-skin .librevjs-mute-control,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixteal-skin .librevjs-mute-control:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixteal-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixteal-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixteal-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; +} +.librevjs-libre-mixteal-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixteal-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-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-mixteal-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixteal-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixteal-skin .librevjs-play-progress { +background: #1de9b6 url() -50% 0 repeat; +} +.librevjs-libre-mixteal-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixteal-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixteal-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixteal-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixteal-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixteal-skin .librevjs-remaining-time { +display:none; +float:left +} +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixteal-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixteal-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.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; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixteal-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixteal-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-mixteal-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixteal-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixteal-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-libre-mixteal-skin .librevjs-big-play-button:before { +content: "\e001"; +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 */ + 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; +} +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ +.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-mixteal-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) + } +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixteal-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-mixteal-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixteal-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected { +color: rgb(1, 56, 47); +background-color: rgb(29, 233, 182); +} +.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #004d40; +background-color: #1de9b6; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixteal-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; +} +/* Subtitles Button */ +.librevjs-libre-mixteal-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixteal-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixteal-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; +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.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 +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +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 +} +/* Poster Styles */ +.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% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +/* Transparent black background, or fallback to all black (oldIE) */ +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 +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixteal-skin .librevjs-hidden { +display:none +} +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color:rgb(26, 187, 156); +background-color: inherit; +} +.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(29, 233, 182); +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: 1em; + } + .librevjs-libre-mixteal-skin .librevjs-big-play-button{ + font-size: 2em; + } + .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-mixteal-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixteal-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} diff --git a/librevideojs/css/mix-material/mix-yellow.css b/librevideojs/css/mix-material/mix-yellow.css new file mode 100644 index 0000000..92ec021 --- /dev/null +++ b/librevideojs/css/mix-material/mix-yellow.css @@ -0,0 +1,747 @@ +/*! +LibreVideoJS Estilos personalizados = Yellow +Version 1.4 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +.librevjs-libre-mixyellow-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"); +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixyellow-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-mixyellow-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-mixyellow-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixyellow-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixyellow-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); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixyellow-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 +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixyellow-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-mixyellow-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixyellow-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixyellow-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixyellow-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) +} +/* Replacement for focus outline */ +.librevjs-libre-mixyellow-skin .librevjs-control:focus:before,.librevjs-libre-mixyellow-skin .librevjs-control:hover:before { +color: #f1c40f; +} +.librevjs-libre-mixyellow-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixyellow-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(241, 196, 14); +} +.librevjs-libre-mixyellow-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixyellow-skin .librevjs-play-control:hover:before { +color:#f39c12; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixyellow-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixyellow-skin .librevjs-mute-control,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixyellow-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixyellow-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixyellow-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #f1c40f url() -50% 0 repeat; +} +.librevjs-libre-mixyellow-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixyellow-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-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-mixyellow-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixyellow-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixyellow-skin .librevjs-play-progress { +background: #f1c40f url() -50% 0 repeat; +} +.librevjs-libre-mixyellow-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixyellow-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixyellow-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixyellow-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixyellow-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixyellow-skin .librevjs-remaining-time { +display:none; +float:left +} +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixyellow-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.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; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixyellow-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixyellow-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-mixyellow-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixyellow-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixyellow-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: rgb(244, 156, 18); /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixyellow-skin .librevjs-big-play-button:before { +content: "\e001"; +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 */ + 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; +} +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ +.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-mixyellow-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) + } +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixyellow-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); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixyellow-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +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-mixyellow-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixyellow-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; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(241, 196, 14); +} +.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #f1c40f; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixyellow-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; +} +/* Subtitles Button */ +.librevjs-libre-mixyellow-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixyellow-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixyellow-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; +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.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 +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +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 +} +/* Poster Styles */ +.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% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +/* Transparent black background, or fallback to all black (oldIE) */ +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 +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixyellow-skin .librevjs-hidden { +display:none +} +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #f1c40f; +background-color: inherit; +} +.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #f39c12; +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: 1em; + } + .librevjs-libre-mixyellow-skin .librevjs-big-play-button{ + font-size: 2em; + } + .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-mixyellow-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixyellow-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} |