diff options
Diffstat (limited to 'css')
21 files changed, 15550 insertions, 0 deletions
diff --git a/css/default/cliplibre-js-progreestips.dev.css b/css/default/cliplibre-js-progreestips.dev.css new file mode 100644 index 0000000..83691c5 --- /dev/null +++ b/css/default/cliplibre-js-progreestips.dev.css @@ -0,0 +1,730 @@ +/*! +Video.js Default Styles (http://videojs.com) +Version 4.3.1 +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") format("embedded-opentype"); + src: local('?'), + url("../../fonts/default/vjs.woff") format("woff"), + url("../../fonts/default/vjs.ttf") format("truetype"), + url("../../fonts/default/vjs.svg") 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; +} + + +/*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; +} +.librevjs-progress-tip { + visibility: hidden; + display: block; + opacity: 0.8; + padding: 5px; + font-size: 10px; + position: absolute; + z-index: 100000; +} + +.librevjs-progress-tip-arrow { + background: url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) no-repeat top left; + bottom: 0; + left: 50%; + margin-left: -4px; + background-position: bottom left; + position: absolute; + width: 9px; + height: 5px; +} + +.librevjs-progress-tip-inner { + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + padding: 5px 8px 4px 8px; + background-color: black; + color: white; + max-width: 200px; + text-align: center; +} + diff --git a/css/default/cliplibre-js.dev.css b/css/default/cliplibre-js.dev.css new file mode 100644 index 0000000..d14d4a6 --- /dev/null +++ b/css/default/cliplibre-js.dev.css @@ -0,0 +1,698 @@ +/*! +Video.js Default Styles (http://videojs.com) +Version 4.3.1 +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") format("embedded-opentype"); + src: local('?'), + url("../../fonts/default/vjs.woff") format("woff"), + url("../../fonts/default/vjs.ttf") format("truetype"), + url("../../fonts/default/vjs.svg") 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; +} + + +/*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; +} diff --git a/css/libre-custom-skin/custom_skin.azul.css b/css/libre-custom-skin/custom_skin.azul.css new file mode 100644 index 0000000..8e94cc4 --- /dev/null +++ b/css/libre-custom-skin/custom_skin.azul.css @@ -0,0 +1,725 @@ +/*! +LibreVideoJS. custom Styles +Version 0.2 +*/ + +.librevjs-custom-skin { + color: #ccc; + background-color: inherit; +} + +@font-face { + font-family:"VideoJS"; + src: url("../../fonts/default/vjs.eot") format("embedded-opentype"); + src: local('?'), + url("../../fonts/default/vjs.woff") format("woff"), + url("../../fonts/default/vjs.ttf") format("truetype"), + url("../../fonts/default/vjs.svg") 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 +} + + +/*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; +} diff --git a/css/libre-custom-skin/custom_skin.rojo.css b/css/libre-custom-skin/custom_skin.rojo.css new file mode 100644 index 0000000..32ee409 --- /dev/null +++ b/css/libre-custom-skin/custom_skin.rojo.css @@ -0,0 +1,726 @@ +/*! +LibreVideoJS. custom Styles +Version 0.2 +*/ + +.librevjs-custom-skin { + color: #ccc; + background-color: inherit; +} + +@font-face { + font-family:"VideoJS"; + src: url("../../fonts/default/vjs.eot") format("embedded-opentype"); + src: local('?'), + url("../../fonts/default/vjs.woff") format("woff"), + url("../../fonts/default/vjs.ttf") format("truetype"), + url("../../fonts/default/vjs.svg") 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 +} + + +/*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; +} diff --git a/css/libre-custom-skin/custom_skin.teal.css b/css/libre-custom-skin/custom_skin.teal.css new file mode 100644 index 0000000..73ae76e --- /dev/null +++ b/css/libre-custom-skin/custom_skin.teal.css @@ -0,0 +1,726 @@ +/*! +LibreVideoJS. custom Styles +Version 0.2 +*/ + +.librevjs-custom-skin { + color: #ccc; + background-color: inherit; +} + +@font-face { + font-family:"VideoJS"; + src: url("../../fonts/default/vjs.eot") format("embedded-opentype"); + src: local('?'), + url("../../fonts/default/vjs.woff") format("woff"), + url("../../fonts/default/vjs.ttf") format("truetype"), + url("../../fonts/default/vjs.svg") 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 +} + + +/*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; +} diff --git a/css/librevideojs-material/libre-skin-blue.css b/css/librevideojs-material/libre-skin-blue.css new file mode 100644 index 0000000..35e6322 --- /dev/null +++ b/css/librevideojs-material/libre-skin-blue.css @@ -0,0 +1,788 @@ +/*! +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 { + /* Replace browser focus highlight with handle highlight */ + outline: 0; + position: relative; + cursor: pointer; + padding: 0; + /* background-color-with-alpha */ + background-color: #000000; + background-color: rgba(0, 0, 0, 0.5); +} + +.librevjs-libre-skin .librevjs-slider:focus { + -webkit-box-shadow: 0 0 2em #fff; + -moz-box-shadow: 0 0 2em #fff; + box-shadow: 0 0 2em #fff +} + + +/*Eliminación de botón de barra de progreso*/ + +.librevjs-libre-skin .librevjs-slider-handle { + width: 0; + height: 0; +} + +.librevjs-libre-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + position: absolute; + top: 0; + left: 0; +} + + +/* control bar */ + +.librevjs-libre-skin .librevjs-control-bar { + /* Start hidden */ + display: none; + position: absolute; + /* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. + */ + bottom: 0; + /* Use left/right to stretch to 100% width of player div */ + left: 0; + right: 0; + /* Height includes any margin you want above or below control items */ + height: 3.0em; + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); +} + +.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { + display: block; + visibility: visible; + opacity: 1; + -webkit-transition: visibility .1s, opacity .1s; + -moz-transition: visibility .1s, opacity .1s; + -o-transition: visibility .1s, opacity .1s; + transition: visibility .1s, opacity .1s +} + +.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { + display: block; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 1s, opacity 1s; + -moz-transition: visibility 1s, opacity 1s; + -o-transition: visibility 1s, opacity 1s; + transition: visibility 1s, opacity 1s +} + +.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none +} + +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none +} + +@media \0screen { + .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } +} + +.librevjs-libre-skin .librevjs-control { + outline: 0; + position: relative; + float: left; + text-align: center; + margin: 0; + padding: 0; + height: 3em; + width: 4em +} + +.librevjs-libre-skin .librevjs-control:before { + font-family: LibreVideoJS; + font-size: 1.5em; + line-height: 2; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) +} + + +/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-control:focus:before, .librevjs-libre-skin .librevjs-control:hover:before { + color: #2196F3; +} + + +/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-control:focus {} + +.librevjs-libre-skin .librevjs-control-text { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px +} + + +/*Color y diseño de boton play control*/ + +.librevjs-libre-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: rgb(33, 150, 244); +} + +.librevjs-libre-skin .librevjs-play-control:before { + content: "\e001" +} + +.librevjs-libre-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 { + content: "\e002" +} + + +/*END Color y diseño de boton play control*/ + +.librevjs-libre-skin .librevjs-mute-control, .librevjs-libre-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right +} + +.librevjs-libre-skin .librevjs-mute-control:before, .librevjs-libre-skin .librevjs-volume-menu-button:before { + content: "\e006" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" +} + +.librevjs-libre-skin .librevjs-volume-control { + width: 5em; + float: right +} + +.librevjs-libre-skin .librevjs-volume-bar { + width: 5em; + height: .6em; + margin: 1.1em auto 0 +} + +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { + height: 2.9em +} + + +/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ + +.librevjs-libre-skin .librevjs-volume-level { + position: absolute; + top: 0; + left: 0; + height: 0.5em; + /* assuming volume starts at 1.0 */ + width: 100%; + background: #2196F3 url() -50% 0 repeat; + /*color de barra volumen*/ +} + + +/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ + +.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { + width: .5em; + height: .5em +} + +.librevjs-libre-skin .librevjs-volume-handle:before { + font-size: .9em; + top: -.2em; + left: -.2em; + width: 1em; + height: 1em +} + +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width: 6em; + left: -4em +} + +.librevjs-libre-skin .librevjs-progress-control { + position: absolute; + left: 0; + right: 0; + width: auto; + font-size: .3em; + height: 1em; + top: -1em; + -webkit-transition: all .4s; + -moz-transition: all .4s; + -o-transition: all .4s; + transition: all .4s +} + +.librevjs-libre-skin:hover .librevjs-progress-control { + font-size: .9em; + -webkit-transition: all .2s; + -moz-transition: all .2s; + -o-transition: all .2s; + transition: all .2s +} + +.librevjs-libre-skin .librevjs-progress-holder { + height: 100% +} + +.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0 +} + + +/* Personalización de barra de progreso a color azul */ + +.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; + /*mayor visibilidad*/ + line-height: 3em; +} + +.librevjs-libre-skin .librevjs-current-time { + float: left +} + +.librevjs-libre-skin .librevjs-duration { + float: left +} + +.librevjs-libre-skin .librevjs-remaining-time { + display: none; + float: left +} + +.librevjs-time-divider { + float: left; + line-height: 3em +} + +.librevjs-libre-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right +} + +.librevjs-libre-skin .librevjs-fullscreen-control:before { + content: "\e000" +} + +.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content: "\e00b" +} + + +/*Centrado del button Play y personalizado*/ + +.librevjs-libre-skin .librevjs-big-play-button { + left: 50%; + top: 50%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #2196F3; + line-height: normal; +} + + +/* Hide if controls are disabled */ + +.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} + + +/* Hide when video starts playing */ + +.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { + display: none; +} + + +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ + +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-skin:hover .librevjs-big-play-button, .librevjs-libre-skin .librevjs-big-play-button:focus { + color: #0289f4; + /*color boton focus*/ +} + +.librevjs-libre-skin .librevjs-big-play-button:before { + content: "\e007"; + font-family: LibreVideoJS; + /* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + text-align: center/* Needed for IE8 */ + ; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} + +.librevjs-error .librevjs-big-play-button { + display: none; +} + + +/*END PERSONALIZAR BIG PLAY BUTTON*/ + +.librevjs-loading-spinner { + display: none; + position: absolute; + top: 50%; + left: 50%; + font-size: 4em; + line-height: 1; + width: 1em; + height: 1em; + margin-left: -.5em; + margin-top: -.5em; + opacity: .75; + -webkit-animation: spin 1.5s infinite linear; + -moz-animation: spin 1.5s infinite linear; + -o-animation: spin 1.5s infinite linear; + animation: spin 1.5s infinite linear +} + +.librevjs-libre-skin .librevjs-loading-spinner:before { + content: "\e01e"; + font-family: LibreVideoJS; + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + text-align: center; + text-shadow: 0 0 .1em #000 +} + +@-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg) + } + 100% { + -moz-transform: rotate(359deg) + } +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg) + } + 100% { + -webkit-transform: rotate(359deg) + } +} + +@-o-keyframes spin { + 0% { + -o-transform: rotate(0deg) + } + 100% { + -o-transform: rotate(359deg) + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg) + } + 100% { + transform: rotate(359deg) + } +} + +.librevjs-libre-skin .librevjs-menu-button { + float: right; + cursor: pointer +} + +.librevjs-libre-skin .librevjs-menu { + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 0; + margin-bottom: 3em; + border-left: 2em solid transparent; + border-right: 2em solid transparent; + border-top: 1.55em solid #000; + border-top-color: rgba(7, 40, 50, .5) +} + +.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { + display: block; + padding: 0; + margin: 0; + position: absolute; + width: 10em; + bottom: 1.5em; + max-height: 15em; + overflow: auto; + left: -5em; + background-color: #07141e; + background-color: rgba(7, 20, 30, .7); + -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2) +} + +.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu { + display: block +} + +.librevjs-libre-skin .librevjs-menu-button ul li { + list-style: none; + margin: 0; + padding: .3em 0; + line-height: 1.4em; + font-size: 1.2em; + text-align: center; + text-transform: lowercase +} + + +/*COLOR DE SELECCION DE SUBTIULOS*/ + +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { + color: rgb(11, 21, 42); + 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 { + outline: 0; + color: rgb(11, 21, 42); + background-color: #2196F3; +} + + +/*END COLOR SELECCION DE SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { + text-align: center; + text-transform: uppercase; + font-size: 1em; + line-height: 2em; + padding: 0; + margin: 0 0 .3em; + font-weight: 700; + cursor: default +} + +.librevjs-libre-skin .librevjs-subtitles-button:before { + content: "\e00c" +} + +.librevjs-libre-skin .librevjs-captions-button:before { + content: "\e008" +} + +.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before { + -webkit-box-shadow: 0 0 1em #fff; + -moz-box-shadow: 0 0 1em #fff; + box-shadow: 0 0 1em #fff +} + +.cliplibre-js { + background-color: #000; + position: relative; + padding: 0; + font-size: 10px; + vertical-align: middle; + font-weight: 500; + font-style: normal; + font-family: Arial, sans-serif; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none +} + +.cliplibre-js .librevjs-tech { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100% +} + +.cliplibre-js:-moz-full-screen { + position: absolute +} + +body.librevjs-full-window { + padding: 0; + margin: 0; + height: 100%; + overflow-y: auto +} + +.cliplibre-js.librevjs-fullscreen { + position: fixed; + overflow: hidden; + z-index: 1000; + left: 0; + top: 0; + bottom: 0; + right: 0; + width: 100%!important; + height: 100%!important; + position: absolute; +} + +.cliplibre-js:-webkit-full-screen { + width: 100%!important; + height: 100%!important +} + +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { + cursor: none +} + +.librevjs-poster { + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; + cursor: pointer; + height: 100%; + margin: 0; + padding: 0; + position: relative; + width: 100% +} + +.librevjs-poster img { + display: block; + margin: 0 auto; + max-height: 100%; + padding: 0; + width: 100% +} + +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { + display: none +} + +.cliplibre-js .librevjs-text-track-display { + text-align: center; + position: absolute; + bottom: 4em; + left: 1em; + right: 1em +} + +.cliplibre-js .librevjs-text-track { + display: none; + font-size: 1.8em; + text-align: center; + margin-bottom: .1em; + background-color: #000; + background-color: rgba(0, 0, 0, .6) +} + +.cliplibre-js .librevjs-subtitles { + color: #fff +} + +.cliplibre-js .librevjs-captions { + color: rgb(255, 237, 0); + background-color: rgba(2, 7, 11, 0.7); +} + +.librevjs-tt-cue { + display: block +} + +.librevjs-libre-skin .librevjs-hidden { + display: none +} + +.librevjs-lock-showing { + display: block!important; + opacity: 1; + visibility: visible +} + +.no_html5 { + background: black none repeat scroll 0 0; + color: white; + height: 160px; + padding: 130px 10px 20px; + text-align: center; +} + + +/*title de resolucion | subtitles y Caption*/ + +.librevjs-libre-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: rgb(33, 150, 244); +} + +.librevjs-libre-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: 0.9em; + } + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 5em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 1em; + } +} + +@media screen and (max-width: 335px) { + .cliplibre-js { + font-size: 6px; + } +} + +@media screen and (max-width: 150px) { + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 3em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 2em; + } +} diff --git a/css/librevideojs-material/libre-skin-grey.css b/css/librevideojs-material/libre-skin-grey.css new file mode 100644 index 0000000..73fc9d5 --- /dev/null +++ b/css/librevideojs-material/libre-skin-grey.css @@ -0,0 +1,789 @@ +/*! +LibreVideoJS Estilos personalizados = Grey +Version 1.2 +Escrito por Jesús Eduardo +*/ + +.librevjs-libre-skin { + color: #ccc; + background-color: inherit; +} + +@font-face { + font-family:"LibreVideoJS"; + src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); + src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); +} + +.librevjs-libre-skin .librevjs-slider { + /* Replace browser focus highlight with handle highlight */ + outline: 0; + position: relative; + cursor: pointer; + padding: 0; + /* background-color-with-alpha */ + background-color: #000000; + background-color: rgba(0, 0, 0, 0.5); +} + +.librevjs-libre-skin .librevjs-slider:focus { + -webkit-box-shadow: 0 0 2em #fff; + -moz-box-shadow: 0 0 2em #fff; + box-shadow: 0 0 2em #fff +} + + +/*Eliminación de botón de barra de progreso*/ + +.librevjs-libre-skin .librevjs-slider-handle { + width: 0; + height: 0; +} + +.librevjs-libre-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + position: absolute; + top: 0; + left: 0; +} + + +/* control bar */ + +.librevjs-libre-skin .librevjs-control-bar { + /* Start hidden */ + display: none; + position: absolute; + /* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. + */ + bottom: 0; + /* Use left/right to stretch to 100% width of player div */ + left: 0; + right: 0; + /* Height includes any margin you want above or below control items */ + height: 3.0em; + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); +} + +.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { + display: block; + visibility: visible; + opacity: 1; + -webkit-transition: visibility .1s, opacity .1s; + -moz-transition: visibility .1s, opacity .1s; + -o-transition: visibility .1s, opacity .1s; + transition: visibility .1s, opacity .1s +} + +.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { + display: block; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 1s, opacity 1s; + -moz-transition: visibility 1s, opacity 1s; + -o-transition: visibility 1s, opacity 1s; + transition: visibility 1s, opacity 1s +} + +.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none +} + +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none +} + +@media \0screen { + .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } +} + +.librevjs-libre-skin .librevjs-control { + outline: 0; + position: relative; + float: left; + text-align: center; + margin: 0; + padding: 0; + height: 3em; + width: 4em +} + +.librevjs-libre-skin .librevjs-control:before { + font-family: LibreVideoJS; + font-size: 1.5em; + line-height: 2; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) +} + + +/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-control:focus:before, .librevjs-libre-skin .librevjs-control:hover:before { + color: #9e9e9e; +} + + +/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-control:focus {} + +.librevjs-libre-skin .librevjs-control-text { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px +} + + +/*Color y diseño de boton play control*/ + +.librevjs-libre-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: rgb(158, 158, 158); +} + +.librevjs-libre-skin .librevjs-play-control:before { + content: "\e001" +} + +.librevjs-libre-skin .librevjs-play-control:hover:before { + color: #7c7c7c; + /*color de play control al pasar el cursor*/ +} + +.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { + content: "\e002" +} + + +/*END Color y diseño de boton play control*/ + +.librevjs-libre-skin .librevjs-mute-control, .librevjs-libre-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right +} + +.librevjs-libre-skin .librevjs-mute-control:before, .librevjs-libre-skin .librevjs-volume-menu-button:before { + content: "\e006" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" +} + +.librevjs-libre-skin .librevjs-volume-control { + width: 5em; + float: right +} + +.librevjs-libre-skin .librevjs-volume-bar { + width: 5em; + height: .6em; + margin: 1.1em auto 0 +} + +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { + height: 2.9em +} + + +/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ + +.librevjs-libre-skin .librevjs-volume-level { + position: absolute; + top: 0; + left: 0; + height: 0.5em; + /* assuming volume starts at 1.0 */ + width: 100%; + background: #9e9e9e url() -50% 0 repeat; + /*color de barra volumen*/ +} + + +/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ + +.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { + width: .5em; + height: .5em +} + +.librevjs-libre-skin .librevjs-volume-handle:before { + font-size: .9em; + top: -.2em; + left: -.2em; + width: 1em; + height: 1em +} + +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width: 6em; + left: -4em +} + +.librevjs-libre-skin .librevjs-progress-control { + position: absolute; + left: 0; + right: 0; + width: auto; + font-size: .3em; + height: 1em; + top: -1em; + -webkit-transition: all .4s; + -moz-transition: all .4s; + -o-transition: all .4s; + transition: all .4s +} + +.librevjs-libre-skin:hover .librevjs-progress-control { + font-size: .9em; + -webkit-transition: all .2s; + -moz-transition: all .2s; + -o-transition: all .2s; + transition: all .2s +} + +.librevjs-libre-skin .librevjs-progress-holder { + height: 100% +} + +.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0 +} + + +/* Personalización de barra de progreso a color plata */ + +.librevjs-libre-skin .librevjs-play-progress { + background: #9e9e9e url() -50% 0 repeat; +} + +.librevjs-libre-skin .librevjs-load-progress { + background: #646464; + background: rgba(255, 255, 255, .4) +} + +.librevjs-libre-skin .librevjs-seek-handle { + width: 1.5em; + height: 100% +} + +.librevjs-libre-skin .librevjs-seek-handle:before { + padding-top: .1em +} + +.librevjs-libre-skin .librevjs-time-controls { + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em; +} + +.librevjs-libre-skin .librevjs-current-time { + float: left +} + +.librevjs-libre-skin .librevjs-duration { + float: left +} + +.librevjs-libre-skin .librevjs-remaining-time { + display: none; + float: left +} + +.librevjs-time-divider { + float: left; + line-height: 3em +} + +.librevjs-libre-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right +} + +.librevjs-libre-skin .librevjs-fullscreen-control:before { + content: "\e000" +} + +.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content: "\e00b" +} + + +/*Centrado del button Play y personalizado*/ + +.librevjs-libre-skin .librevjs-big-play-button { + left: 50%; + top: 50%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #9e9e9e; + line-height: normal; +} + + +/* Hide if controls are disabled */ + +.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} + + +/* Hide when video starts playing */ + +.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { + display: none; +} + + +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile +*/ + +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-skin:hover .librevjs-big-play-button, .librevjs-libre-skin .librevjs-big-play-button:focus { + color: rgb(115, 115, 115); + /*color boton focus purpura oscuro*/ +} + +.librevjs-libre-skin .librevjs-big-play-button:before { + content: "\e007"; + font-family: LibreVideoJS; + /* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + text-align: center/* Needed for IE8 */ + ; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} + +.librevjs-error .librevjs-big-play-button { + display: none; +} + + +/*END PERSONALIZAR BIG PLAY BUTTON*/ + +.librevjs-loading-spinner { + display: none; + position: absolute; + top: 50%; + left: 50%; + font-size: 4em; + line-height: 1; + width: 1em; + height: 1em; + margin-left: -.5em; + margin-top: -.5em; + opacity: .75; + -webkit-animation: spin 1.5s infinite linear; + -moz-animation: spin 1.5s infinite linear; + -o-animation: spin 1.5s infinite linear; + animation: spin 1.5s infinite linear +} + +.librevjs-libre-skin .librevjs-loading-spinner:before { + content: "\e01e"; + font-family: LibreVideoJS; + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + text-align: center; + text-shadow: 0 0 .1em #000 +} + +@-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg) + } + 100% { + -moz-transform: rotate(359deg) + } +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg) + } + 100% { + -webkit-transform: rotate(359deg) + } +} + +@-o-keyframes spin { + 0% { + -o-transform: rotate(0deg) + } + 100% { + -o-transform: rotate(359deg) + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg) + } + 100% { + transform: rotate(359deg) + } +} + +.librevjs-libre-skin .librevjs-menu-button { + float: right; + cursor: pointer +} + +.librevjs-libre-skin .librevjs-menu { + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 0; + margin-bottom: 3em; + border-left: 2em solid transparent; + border-right: 2em solid transparent; + border-top: 1.55em solid #000; + border-top-color: rgba(7, 40, 50, .5) +} + +.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { + display: block; + padding: 0; + margin: 0; + position: absolute; + width: 10em; + bottom: 1.5em; + max-height: 15em; + overflow: auto; + left: -5em; + background-color: #07141e; + background-color: rgba(7, 20, 30, .7); + -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2) +} + +.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu { + display: block +} + +.librevjs-libre-skin .librevjs-menu-button ul li { + list-style: none; + margin: 0; + padding: .3em 0; + line-height: 1.4em; + font-size: 1.2em; + text-align: center; + text-transform: lowercase +} + + +/*COLOR DE SELECCION DE SUBTIULOS*/ + +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { + color: #ffffff; + background-color: rgb(158, 158, 158); +} + +.librevjs-libre-skin .librevjs-menu-button ul li:focus, .librevjs-libre-skin .librevjs-menu-button ul li:hover, .librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #fff; + background-color: #9e9e9e; +} + + +/*END COLOR SELECCION DE SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { + text-align: center; + text-transform: uppercase; + font-size: 1em; + line-height: 2em; + padding: 0; + margin: 0 0 .3em; + font-weight: 700; + cursor: default +} + +.librevjs-libre-skin .librevjs-subtitles-button:before { + content: "\e00c" +} + +.librevjs-libre-skin .librevjs-captions-button:before { + content: "\e008" +} + +.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before { + -webkit-box-shadow: 0 0 1em #fff; + -moz-box-shadow: 0 0 1em #fff; + box-shadow: 0 0 1em #fff +} + +.cliplibre-js { + background-color: #000; + position: relative; + padding: 0; + font-size: 10px; + vertical-align: middle; + font-weight: 500; + font-style: normal; + font-family: Arial, sans-serif; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none +} + +.cliplibre-js .librevjs-tech { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100% +} + +.cliplibre-js:-moz-full-screen { + position: absolute +} + +body.librevjs-full-window { + padding: 0; + margin: 0; + height: 100%; + overflow-y: auto +} + +.cliplibre-js.librevjs-fullscreen { + position: fixed; + overflow: hidden; + z-index: 1000; + left: 0; + top: 0; + bottom: 0; + right: 0; + width: 100%!important; + height: 100%!important; + position: absolute; +} + +.cliplibre-js:-webkit-full-screen { + width: 100%!important; + height: 100%!important +} + +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { + cursor: none +} + +.librevjs-poster { + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; + cursor: pointer; + height: 100%; + margin: 0; + padding: 0; + position: relative; + width: 100% +} + +.librevjs-poster img { + display: block; + margin: 0 auto; + max-height: 100%; + padding: 0; + width: 100% +} + +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { + display: none +} + +.cliplibre-js .librevjs-text-track-display { + text-align: center; + position: absolute; + bottom: 4em; + left: 1em; + right: 1em +} + +.cliplibre-js .librevjs-text-track { + display: none; + font-size: 1.8em; + text-align: center; + margin-bottom: .1em; + background-color: #000; + background-color: rgba(0, 0, 0, .6) +} + +.cliplibre-js .librevjs-subtitles { + color: #fff +} + +.cliplibre-js .librevjs-captions { + color: rgb(255, 237, 0); + background-color: rgba(2, 7, 11, 0.7); +} + +.librevjs-tt-cue { + display: block +} + +.librevjs-libre-skin .librevjs-hidden { + display: none +} + +.librevjs-lock-showing { + display: block!important; + opacity: 1; + visibility: visible +} + +.no_html5 { + background: black none repeat scroll 0 0; + color: white; + height: 160px; + padding: 130px 10px 20px; + text-align: center; +} + + +/*title de resolucion | subtitles y Caption*/ + +.librevjs-libre-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: #737373; +} + +.librevjs-libre-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover { + color: #9e9e9e; + background-color: inherit; +} + + +/*Responsive*/ + +.cliplibre-js-responsive-container.librevjs-hd { + padding-top: 56.25%; +} + +.cliplibre-js-responsive-container.librevjs-sd { + padding-top: 75%; +} + +.cliplibre-js-responsive-container { + width: 100%; + position: relative; +} + +.cliplibre-js-responsive-container .cliplibre-js { + height: 100% !important; + width: 100% !important; + position: absolute; + top: 0; + left: 0; +} + +@media screen and (max-width: 800px) { + .cliplibre-js .librevjs-text-track { + font-size: 1.5em; + margin-bottom: -0.2em; + } +} + +@media screen and (max-width: 600px) { + .cliplibre-js .librevjs-text-track { + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 2em; + } +} + +@media screen and (max-width: 413px) { + .cliplibre-js { + font-size: 8px; + } +} + +@media screen and (max-width: 400px) { + .cliplibre-js .librevjs-text-track { + font-size: 0.9em; + } + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 5em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 1em; + } +} + +@media screen and (max-width: 335px) { + .cliplibre-js { + font-size: 6px; + } +} + +@media screen and (max-width: 150px) { + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 3em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 2em; + } +} diff --git a/css/librevideojs-material/libre-skin-purple.css b/css/librevideojs-material/libre-skin-purple.css new file mode 100644 index 0000000..9b6b6af --- /dev/null +++ b/css/librevideojs-material/libre-skin-purple.css @@ -0,0 +1,789 @@ +/*! +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 { + /* Replace browser focus highlight with handle highlight */ + outline: 0; + position: relative; + cursor: pointer; + padding: 0; + /* background-color-with-alpha */ + background-color: #000000; + background-color: rgba(0, 0, 0, 0.5); +} + +.librevjs-libre-skin .librevjs-slider:focus { + -webkit-box-shadow: 0 0 2em #fff; + -moz-box-shadow: 0 0 2em #fff; + box-shadow: 0 0 2em #fff +} + + +/*Eliminación de botón de barra de progreso*/ + +.librevjs-libre-skin .librevjs-slider-handle { + width: 0; + height: 0; +} + +.librevjs-libre-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + position: absolute; + top: 0; + left: 0; +} + + +/* control bar */ + +.librevjs-libre-skin .librevjs-control-bar { + /* Start hidden */ + display: none; + position: absolute; + /* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. + */ + bottom: 0; + /* Use left/right to stretch to 100% width of player div */ + left: 0; + right: 0; + /* Height includes any margin you want above or below control items */ + height: 3.0em; + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); +} + +.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { + display: block; + visibility: visible; + opacity: 1; + -webkit-transition: visibility .1s, opacity .1s; + -moz-transition: visibility .1s, opacity .1s; + -o-transition: visibility .1s, opacity .1s; + transition: visibility .1s, opacity .1s +} + +.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { + display: block; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 1s, opacity 1s; + -moz-transition: visibility 1s, opacity 1s; + -o-transition: visibility 1s, opacity 1s; + transition: visibility 1s, opacity 1s +} + +.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none +} + +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none +} + +@media \0screen { + .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } +} + +.librevjs-libre-skin .librevjs-control { + outline: 0; + position: relative; + float: left; + text-align: center; + margin: 0; + padding: 0; + height: 3em; + width: 4em +} + +.librevjs-libre-skin .librevjs-control:before { + font-family: LibreVideoJS; + font-size: 1.5em; + line-height: 2; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) +} + + +/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-control:focus:before, .librevjs-libre-skin .librevjs-control:hover:before { + color: #9c27b0; +} + + +/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-control:focus {} + +.librevjs-libre-skin .librevjs-control-text { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px +} + + +/*Color y diseño de boton play control*/ + +.librevjs-libre-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: rgb(156, 39, 176); +} + +.librevjs-libre-skin .librevjs-play-control:before { + content: "\e001" +} + +.librevjs-libre-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 { + content: "\e002" +} + + +/*END Color y diseño de boton play control*/ + +.librevjs-libre-skin .librevjs-mute-control, .librevjs-libre-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right +} + +.librevjs-libre-skin .librevjs-mute-control:before, .librevjs-libre-skin .librevjs-volume-menu-button:before { + content: "\e006" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" +} + +.librevjs-libre-skin .librevjs-volume-control { + width: 5em; + float: right +} + +.librevjs-libre-skin .librevjs-volume-bar { + width: 5em; + height: .6em; + margin: 1.1em auto 0 +} + +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { + height: 2.9em +} + + +/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ + +.librevjs-libre-skin .librevjs-volume-level { + position: absolute; + top: 0; + left: 0; + height: 0.5em; + /* assuming volume starts at 1.0 */ + width: 100%; + background: #9c27b0 url() -50% 0 repeat; + /*color de barra volumen*/ +} + + +/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ + +.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { + width: .5em; + height: .5em +} + +.librevjs-libre-skin .librevjs-volume-handle:before { + font-size: .9em; + top: -.2em; + left: -.2em; + width: 1em; + height: 1em +} + +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width: 6em; + left: -4em +} + +.librevjs-libre-skin .librevjs-progress-control { + position: absolute; + left: 0; + right: 0; + width: auto; + font-size: .3em; + height: 1em; + top: -1em; + -webkit-transition: all .4s; + -moz-transition: all .4s; + -o-transition: all .4s; + transition: all .4s +} + +.librevjs-libre-skin:hover .librevjs-progress-control { + font-size: .9em; + -webkit-transition: all .2s; + -moz-transition: all .2s; + -o-transition: all .2s; + transition: all .2s +} + +.librevjs-libre-skin .librevjs-progress-holder { + height: 100% +} + +.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0 +} + + +/* Personalización de barra de progreso a color purpura */ + +.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; + /*mayor visibilidad*/ + line-height: 3em; +} + +.librevjs-libre-skin .librevjs-current-time { + float: left +} + +.librevjs-libre-skin .librevjs-duration { + float: left +} + +.librevjs-libre-skin .librevjs-remaining-time { + display: none; + float: left +} + +.librevjs-time-divider { + float: left; + line-height: 3em +} + +.librevjs-libre-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right +} + +.librevjs-libre-skin .librevjs-fullscreen-control:before { + content: "\e000" +} + +.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content: "\e00b" +} + + +/*Centrado del button Play y personalizado*/ + +.librevjs-libre-skin .librevjs-big-play-button { + left: 50%; + top: 50%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #9c27b0; + line-height: normal; +} + + +/* Hide if controls are disabled */ + +.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} + + +/* Hide when video starts playing */ + +.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { + display: none; +} + + +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile +*/ + +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-skin:hover .librevjs-big-play-button, .librevjs-libre-skin .librevjs-big-play-button:focus { + color: rgb(142, 68, 173); + /*color boton focus purpura oscuro*/ +} + +.librevjs-libre-skin .librevjs-big-play-button:before { + content: "\e007"; + font-family: LibreVideoJS; + /* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + text-align: center/* Needed for IE8 */ + ; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} + +.librevjs-error .librevjs-big-play-button { + display: none; +} + + +/*END PERSONALIZAR BIG PLAY BUTTON*/ + +.librevjs-loading-spinner { + display: none; + position: absolute; + top: 50%; + left: 50%; + font-size: 4em; + line-height: 1; + width: 1em; + height: 1em; + margin-left: -.5em; + margin-top: -.5em; + opacity: .75; + -webkit-animation: spin 1.5s infinite linear; + -moz-animation: spin 1.5s infinite linear; + -o-animation: spin 1.5s infinite linear; + animation: spin 1.5s infinite linear +} + +.librevjs-libre-skin .librevjs-loading-spinner:before { + content: "\e01e"; + font-family: LibreVideoJS; + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + text-align: center; + text-shadow: 0 0 .1em #000 +} + +@-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg) + } + 100% { + -moz-transform: rotate(359deg) + } +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg) + } + 100% { + -webkit-transform: rotate(359deg) + } +} + +@-o-keyframes spin { + 0% { + -o-transform: rotate(0deg) + } + 100% { + -o-transform: rotate(359deg) + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg) + } + 100% { + transform: rotate(359deg) + } +} + +.librevjs-libre-skin .librevjs-menu-button { + float: right; + cursor: pointer; +} + +.librevjs-libre-skin .librevjs-menu { + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 0; + margin-bottom: 3em; + border-left: 2em solid transparent; + border-right: 2em solid transparent; + border-top: 1.55em solid #000; + border-top-color: rgba(7, 40, 50, .5); +} + +.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { + display: block; + padding: 0; + margin: 0; + position: absolute; + width: 10em; + bottom: 1.5em; + max-height: 15em; + overflow: auto; + left: -5em; + background-color: #07141e; + background-color: rgba(7, 20, 30, .7); + -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); +} + +.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu { + display: block; +} + +.librevjs-libre-skin .librevjs-menu-button ul li { + list-style: none; + margin: 0; + padding: .3em 0; + line-height: 1.4em; + font-size: 1.2em; + text-align: center; + text-transform: lowercase; +} + + +/*COLOR DE SELECCION DE SUBTIULOS*/ + +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { + color: #fff; + 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 { + outline: 0; + color: #fff; + background-color: #9c27b0; +} + + +/*END COLOR SELECCION DE SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { + text-align: center; + text-transform: uppercase; + font-size: 1em; + line-height: 2em; + padding: 0; + margin: 0 0 .3em; + font-weight: 700; + cursor: default; +} + +.librevjs-libre-skin .librevjs-subtitles-button:before { + content: "\e00c" +} + +.librevjs-libre-skin .librevjs-captions-button:before { + content: "\e008" +} + +.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before { + -webkit-box-shadow: 0 0 1em #fff; + -moz-box-shadow: 0 0 1em #fff; + box-shadow: 0 0 1em #fff; +} + +.cliplibre-js { + background-color: #000; + position: relative; + padding: 0; + font-size: 10px; + vertical-align: middle; + font-weight: 500; + font-style: normal; + font-family: Arial, sans-serif; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none +} + +.cliplibre-js .librevjs-tech { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100% +} + +.cliplibre-js:-moz-full-screen { + position: absolute; +} + +body.librevjs-full-window { + padding: 0; + margin: 0; + height: 100%; + overflow-y: auto +} + +.cliplibre-js.librevjs-fullscreen { + position: fixed; + overflow: hidden; + z-index: 1000; + left: 0; + top: 0; + bottom: 0; + right: 0; + width: 100%!important; + height: 100%!important; + position: absolute; +} + +.cliplibre-js:-webkit-full-screen { + width: 100%!important; + height: 100%!important +} + +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { + cursor: none +} + +.librevjs-poster { + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; + cursor: pointer; + height: 100%; + margin: 0; + padding: 0; + position: relative; + width: 100% +} + +.librevjs-poster img { + display: block; + margin: 0 auto; + max-height: 100%; + padding: 0; + width: 100% +} + +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { + display: none +} + +.cliplibre-js .librevjs-text-track-display { + text-align: center; + position: absolute; + bottom: 4em; + left: 1em; + right: 1em +} + +.cliplibre-js .librevjs-text-track { + display: none; + font-size: 1.8em; + text-align: center; + margin-bottom: .1em; + background-color: #000; + background-color: rgba(0, 0, 0, .6) +} + +.cliplibre-js .librevjs-subtitles { + color: #fff +} + +.cliplibre-js .librevjs-captions { + color: rgb(255, 237, 0); + background-color: rgba(2, 7, 11, 0.7); +} + +.librevjs-tt-cue { + display: block +} + +.librevjs-libre-skin .librevjs-hidden { + display: none +} + +.librevjs-lock-showing { + display: block!important; + opacity: 1; + visibility: visible +} + +.no_html5 { + background: black none repeat scroll 0 0; + color: white; + height: 160px; + padding: 130px 10px 20px; + text-align: center; +} + + +/*title de resolucion | subtitles y Caption*/ + +.librevjs-libre-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: #9c27b0; +} + +.librevjs-libre-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: 0.9em; + } + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 5em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 1em; + } +} + +@media screen and (max-width: 335px) { + .cliplibre-js { + font-size: 6px; + } +} + +@media screen and (max-width: 150px) { + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 3em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 2em; + } +} diff --git a/css/librevideojs-material/libre-skin-red.css b/css/librevideojs-material/libre-skin-red.css new file mode 100644 index 0000000..00b0e7b --- /dev/null +++ b/css/librevideojs-material/libre-skin-red.css @@ -0,0 +1,788 @@ +/*! +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 { + /* Replace browser focus highlight with handle highlight */ + outline: 0; + position: relative; + cursor: pointer; + padding: 0; + /* background-color-with-alpha */ + background-color: #000000; + background-color: rgba(0, 0, 0, 0.5); +} + +.librevjs-libre-skin .librevjs-slider:focus { + -webkit-box-shadow: 0 0 2em #fff; + -moz-box-shadow: 0 0 2em #fff; + box-shadow: 0 0 2em #fff +} + + +/*Eliminación de botón de barra de progreso*/ + +.librevjs-libre-skin .librevjs-slider-handle { + width: 0; + height: 0; +} + +.librevjs-libre-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + position: absolute; + top: 0; + left: 0; +} + + +/* control bar */ + +.librevjs-libre-skin .librevjs-control-bar { + /* Start hidden */ + display: none; + position: absolute; + /* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. + */ + bottom: 0; + /* Use left/right to stretch to 100% width of player div */ + left: 0; + right: 0; + /* Height includes any margin you want above or below control items */ + height: 3.0em; + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); +} + +.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { + display: block; + visibility: visible; + opacity: 1; + -webkit-transition: visibility .1s, opacity .1s; + -moz-transition: visibility .1s, opacity .1s; + -o-transition: visibility .1s, opacity .1s; + transition: visibility .1s, opacity .1s +} + +.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { + display: block; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 1s, opacity 1s; + -moz-transition: visibility 1s, opacity 1s; + -o-transition: visibility 1s, opacity 1s; + transition: visibility 1s, opacity 1s +} + +.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none +} + +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none +} + +@media \0screen { + .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } +} + +.librevjs-libre-skin .librevjs-control { + outline: 0; + position: relative; + float: left; + text-align: center; + margin: 0; + padding: 0; + height: 3em; + width: 4em +} + +.librevjs-libre-skin .librevjs-control:before { + font-family: LibreVideoJS; + font-size: 1.5em; + line-height: 2; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) +} + + +/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-control:focus:before, .librevjs-libre-skin .librevjs-control:hover:before { + color: #f44336; +} + + +/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-control:focus {} + +.librevjs-libre-skin .librevjs-control-text { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px +} + + +/*Color y diseño de boton play control*/ + +.librevjs-libre-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: rgb(244, 67, 54); +} + +.librevjs-libre-skin .librevjs-play-control:before { + content: "\e001" +} + +.librevjs-libre-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 { + content: "\e002" +} + + +/*END Color y diseño de boton play control*/ + +.librevjs-libre-skin .librevjs-mute-control, .librevjs-libre-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right +} + +.librevjs-libre-skin .librevjs-mute-control:before, .librevjs-libre-skin .librevjs-volume-menu-button:before { + content: "\e006" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" +} + +.librevjs-libre-skin .librevjs-volume-control { + width: 5em; + float: right +} + +.librevjs-libre-skin .librevjs-volume-bar { + width: 5em; + height: .6em; + margin: 1.1em auto 0 +} + +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { + height: 2.9em +} + + +/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ + +.librevjs-libre-skin .librevjs-volume-level { + position: absolute; + top: 0; + left: 0; + height: 0.5em; + /* assuming volume starts at 1.0 */ + width: 100%; + background: #f44336 url() -50% 0 repeat; + /*color de barra volumen*/ +} + + +/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ + +.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { + width: .5em; + height: .5em +} + +.librevjs-libre-skin .librevjs-volume-handle:before { + font-size: .9em; + top: -.2em; + left: -.2em; + width: 1em; + height: 1em +} + +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width: 6em; + left: -4em +} + +.librevjs-libre-skin .librevjs-progress-control { + position: absolute; + left: 0; + right: 0; + width: auto; + font-size: .3em; + height: 1em; + top: -1em; + -webkit-transition: all .4s; + -moz-transition: all .4s; + -o-transition: all .4s; + transition: all .4s +} + +.librevjs-libre-skin:hover .librevjs-progress-control { + font-size: .9em; + -webkit-transition: all .2s; + -moz-transition: all .2s; + -o-transition: all .2s; + transition: all .2s +} + +.librevjs-libre-skin .librevjs-progress-holder { + height: 100% +} + +.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0 +} + + +/* Personalización de barra de progreso a color rojo */ + +.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; + /*mayor visibilidad*/ + line-height: 3em +} + +.librevjs-libre-skin .librevjs-current-time { + float: left +} + +.librevjs-libre-skin .librevjs-duration { + float: left +} + +.librevjs-libre-skin .librevjs-remaining-time { + display: none; + float: left +} + +.librevjs-time-divider { + float: left; + line-height: 3em +} + +.librevjs-libre-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right +} + +.librevjs-libre-skin .librevjs-fullscreen-control:before { + content: "\e000" +} + +.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content: "\e00b" +} + + +/*Centrado del button Play y personalizado*/ + +.librevjs-libre-skin .librevjs-big-play-button { + left: 50%; + top: 50%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #f44336; + line-height: normal; +} + + +/* Hide if controls are disabled */ + +.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} + + +/* Hide when video starts playing */ + +.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { + display: none; +} + + +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ + +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-skin:hover .librevjs-big-play-button, .librevjs-libre-skin .librevjs-big-play-button:focus { + color: rgba(244, 67, 54, 0.89); + /*color boton focus*/ +} + +.librevjs-libre-skin .librevjs-big-play-button:before { + content: "\e007"; + font-family: LibreVideoJS; + /* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + text-align: center/* Needed for IE8 */ + ; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} + +.librevjs-error .librevjs-big-play-button { + display: none; +} + + +/*END PERSONALIZAR BIG PLAY BUTTON*/ + +.librevjs-loading-spinner { + display: none; + position: absolute; + top: 50%; + left: 50%; + font-size: 4em; + line-height: 1; + width: 1em; + height: 1em; + margin-left: -.5em; + margin-top: -.5em; + opacity: .75; + -webkit-animation: spin 1.5s infinite linear; + -moz-animation: spin 1.5s infinite linear; + -o-animation: spin 1.5s infinite linear; + animation: spin 1.5s infinite linear; +} + +.librevjs-libre-skin .librevjs-loading-spinner:before { + content: "\e01e"; + font-family: LibreVideoJS; + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + text-align: center; + text-shadow: 0 0 .1em #000; +} + +@-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg) + } + 100% { + -moz-transform: rotate(359deg) + } +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg) + } + 100% { + -webkit-transform: rotate(359deg) + } +} + +@-o-keyframes spin { + 0% { + -o-transform: rotate(0deg) + } + 100% { + -o-transform: rotate(359deg) + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg) + } + 100% { + transform: rotate(359deg) + } +} + +.librevjs-libre-skin .librevjs-menu-button { + float: right; + cursor: pointer +} + +.librevjs-libre-skin .librevjs-menu { + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 0; + margin-bottom: 3em; + border-left: 2em solid transparent; + border-right: 2em solid transparent; + border-top: 1.55em solid #000; + border-top-color: rgba(7, 40, 50, .5) +} + +.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { + display: block; + padding: 0; + margin: 0; + position: absolute; + width: 10em; + bottom: 1.5em; + max-height: 15em; + overflow: auto; + left: -5em; + background-color: #07141e; + background-color: rgba(7, 20, 30, .7); + -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2) +} + +.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu { + display: block +} + +.librevjs-libre-skin .librevjs-menu-button ul li { + list-style: none; + margin: 0; + padding: .3em 0; + line-height: 1.4em; + font-size: 1.2em; + text-align: center; + text-transform: lowercase +} + + +/*COLOR DE SELECCION DE SUBTIULOS*/ + +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { + color: #fff; + 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 { + outline: 0; + color: #fff; + background-color: #f44336; +} + + +/*END COLOR SELECCION DE SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { + text-align: center; + text-transform: uppercase; + font-size: 1em; + line-height: 2em; + padding: 0; + margin: 0 0 .3em; + font-weight: 700; + cursor: default +} + +.librevjs-libre-skin .librevjs-subtitles-button:before { + content: "\e00c" +} + +.librevjs-libre-skin .librevjs-captions-button:before { + content: "\e008" +} + +.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before { + -webkit-box-shadow: 0 0 1em #fff; + -moz-box-shadow: 0 0 1em #fff; + box-shadow: 0 0 1em #fff +} + +.cliplibre-js { + background-color: #000; + position: relative; + padding: 0; + font-size: 10px; + vertical-align: middle; + font-weight: 500; + font-style: normal; + font-family: Arial, sans-serif; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.cliplibre-js .librevjs-tech { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.cliplibre-js:-moz-full-screen { + position: absolute; +} + +body.librevjs-full-window { + padding: 0; + margin: 0; + height: 100%; + overflow-y: auto +} + +.cliplibre-js.librevjs-fullscreen { + position: fixed; + overflow: hidden; + z-index: 1000; + left: 0; + top: 0; + bottom: 0; + right: 0; + width: 100%!important; + height: 100%!important; + position: absolute; +} + +.cliplibre-js:-webkit-full-screen { + width: 100%!important; + height: 100%!important +} + +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { + cursor: none +} + +.librevjs-poster { + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; + cursor: pointer; + height: 100%; + margin: 0; + padding: 0; + position: relative; + width: 100% +} + +.librevjs-poster img { + display: block; + margin: 0 auto; + max-height: 100%; + padding: 0; + width: 100% +} + +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { + display: none +} + +.cliplibre-js .librevjs-text-track-display { + text-align: center; + position: absolute; + bottom: 4em; + left: 1em; + right: 1em +} + +.cliplibre-js .librevjs-text-track { + display: none; + font-size: 1.8em; + text-align: center; + margin-bottom: .1em; + background-color: #000; + background-color: rgba(0, 0, 0, .6) +} + +.cliplibre-js .librevjs-subtitles { + color: #fff +} + +.cliplibre-js .librevjs-captions { + color: rgb(255, 237, 0); + background-color: rgba(2, 7, 11, 0.7); +} + +.librevjs-tt-cue { + display: block +} + +.librevjs-libre-skin .librevjs-hidden { + display: none +} + +.librevjs-lock-showing { + display: block!important; + opacity: 1; + visibility: visible +} + +.no_html5 { + background: black none repeat scroll 0 0; + color: white; + height: 160px; + padding: 130px 10px 20px; + text-align: center; +} + + +/*title de resolucion | subtitles y Caption*/ + +.librevjs-libre-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: rgb(246, 44, 30); +} + +.librevjs-libre-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-skin .librevjs-big-play-button { + font-size: 5em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 1em; + } +} + +@media screen and (max-width: 335px) { + .cliplibre-js { + font-size: 6px; + } +} + +@media screen and (max-width: 150px) { + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 3em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 2em; + } +} diff --git a/css/librevideojs-material/libre-skin-teal.css b/css/librevideojs-material/libre-skin-teal.css new file mode 100644 index 0000000..a6a77bf --- /dev/null +++ b/css/librevideojs-material/libre-skin-teal.css @@ -0,0 +1,786 @@ +/*! +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 { + /* Replace browser focus highlight with handle highlight */ + outline: 0; + position: relative; + cursor: pointer; + padding: 0; + /* background-color-with-alpha */ + background-color: #000000; + background-color: rgba(0, 0, 0, 0.5); +} + +.librevjs-libre-skin .librevjs-slider:focus { + -webkit-box-shadow: 0 0 2em #fff; + -moz-box-shadow: 0 0 2em #fff; + box-shadow: 0 0 2em #fff; +} + + +/*Eliminación de botón de barra de progreso*/ + +.librevjs-libre-skin .librevjs-slider-handle { + width: 0; + height: 0; +} + +.librevjs-libre-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + position: absolute; + top: 0; + left: 0; +} + + +/* control bar */ + +.librevjs-libre-skin .librevjs-control-bar { + /* Start hidden */ + display: none; + position: absolute; + /* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. + */ + bottom: 0; + /* Use left/right to stretch to 100% width of player div */ + left: 0; + right: 0; + /* Height includes any margin you want above or below control items */ + height: 3.0em; + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); +} + +.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { + display: block; + visibility: visible; + opacity: 1; + -webkit-transition: visibility .1s, opacity .1s; + -moz-transition: visibility .1s, opacity .1s; + -o-transition: visibility .1s, opacity .1s; + transition: visibility .1s, opacity .1s +} + +.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { + display: block; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 1s, opacity 1s; + -moz-transition: visibility 1s, opacity 1s; + -o-transition: visibility 1s, opacity 1s; + transition: visibility 1s, opacity 1s +} + +.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none +} + +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none +} + +@media \0screen { + .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } +} + +.librevjs-libre-skin .librevjs-control { + outline: 0; + position: relative; + float: left; + text-align: center; + margin: 0; + padding: 0; + height: 3em; + width: 4em +} + +.librevjs-libre-skin .librevjs-control:before { + font-family: LibreVideoJS; + font-size: 1.5em; + line-height: 2; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) +} + + +/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-control:focus:before, .librevjs-libre-skin .librevjs-control:hover:before { + color: #1de9b6; +} + + +/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-control:focus {} + +.librevjs-libre-skin .librevjs-control-text { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px +} + + +/*Color y diseño de boton play control*/ + +.librevjs-libre-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: rgb(29, 233, 182); +} + +.librevjs-libre-skin .librevjs-play-control:before { + content: "\e001" +} + +.librevjs-libre-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 { + content: "\e002" +} + + +/*END Color y diseño de boton play control*/ + +.librevjs-libre-skin .librevjs-mute-control, .librevjs-libre-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right +} + +.librevjs-libre-skin .librevjs-mute-control:before, .librevjs-libre-skin .librevjs-volume-menu-button:before { + content: "\e006" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" +} + +.librevjs-libre-skin .librevjs-volume-control { + width: 5em; + float: right +} + +.librevjs-libre-skin .librevjs-volume-bar { + width: 5em; + height: .6em; + margin: 1.1em auto 0 +} + +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { + height: 2.9em +} + + +/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ + +.librevjs-libre-skin .librevjs-volume-level { + position: absolute; + top: 0; + left: 0; + height: 0.5em; + /* assuming volume starts at 1.0 */ + width: 100%; + background: #1de9b6 url() -50% 0 repeat; +} + + +/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ + +.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { + width: .5em; + height: .5em +} + +.librevjs-libre-skin .librevjs-volume-handle:before { + font-size: .9em; + top: -.2em; + left: -.2em; + width: 1em; + height: 1em; +} + +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width: 6em; + left: -4em; +} + +.librevjs-libre-skin .librevjs-progress-control { + position: absolute; + left: 0; + right: 0; + width: auto; + font-size: .3em; + height: 1em; + top: -1em; + -webkit-transition: all .4s; + -moz-transition: all .4s; + -o-transition: all .4s; + transition: all .4s; +} + +.librevjs-libre-skin:hover .librevjs-progress-control { + font-size: .9em; + -webkit-transition: all .2s; + -moz-transition: all .2s; + -o-transition: all .2s; + transition: all .2s; +} + +.librevjs-libre-skin .librevjs-progress-holder { + height: 100%; +} + +.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0 +} + + +/* Personalización de barra de progreso a color azul */ + +.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; + /*mayor visibilidad*/ + line-height: 3em +} + +.librevjs-libre-skin .librevjs-current-time { + float: left +} + +.librevjs-libre-skin .librevjs-duration { + float: left +} + +.librevjs-libre-skin .librevjs-remaining-time { + display: none; + float: left +} + +.librevjs-time-divider { + float: left; + line-height: 3em +} + +.librevjs-libre-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right +} + +.librevjs-libre-skin .librevjs-fullscreen-control:before { + content: "\e000" +} + +.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content: "\e00b" +} + + +/*Centrado del button Play y personalizado*/ + +.librevjs-libre-skin .librevjs-big-play-button { + left: 50%; + top: 50%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #1abc9c; + line-height: normal; +} + + +/* Hide if controls are disabled */ + +.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} + + +/* Hide when video starts playing */ + +.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { + display: none; +} + + +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ + +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-skin:hover .librevjs-big-play-button, .librevjs-libre-skin .librevjs-big-play-button:focus { + color: #16a085; +} + +.librevjs-libre-skin .librevjs-big-play-button:before { + content: "\e007"; + font-family: LibreVideoJS; + /* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + text-align: center/* Needed for IE8 */ + ; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} + +.librevjs-error .librevjs-big-play-button { + display: none; +} + + +/*END PERSONALIZAR BIG PLAY BUTTON*/ + +.librevjs-loading-spinner { + display: none; + position: absolute; + top: 50%; + left: 50%; + font-size: 4em; + line-height: 1; + width: 1em; + height: 1em; + margin-left: -.5em; + margin-top: -.5em; + opacity: .75; + -webkit-animation: spin 1.5s infinite linear; + -moz-animation: spin 1.5s infinite linear; + -o-animation: spin 1.5s infinite linear; + animation: spin 1.5s infinite linear +} + +.librevjs-libre-skin .librevjs-loading-spinner:before { + content: "\e01e"; + font-family: LibreVideoJS; + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + text-align: center; + text-shadow: 0 0 .1em #000 +} + +@-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg) + } + 100% { + -moz-transform: rotate(359deg) + } +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg) + } + 100% { + -webkit-transform: rotate(359deg) + } +} + +@-o-keyframes spin { + 0% { + -o-transform: rotate(0deg) + } + 100% { + -o-transform: rotate(359deg) + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg) + } + 100% { + transform: rotate(359deg) + } +} + +.librevjs-libre-skin .librevjs-menu-button { + float: right; + cursor: pointer; +} + +.librevjs-libre-skin .librevjs-menu { + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 0; + margin-bottom: 3em; + border-left: 2em solid transparent; + border-right: 2em solid transparent; + border-top: 1.55em solid #000; + border-top-color: rgba(7, 40, 50, .5); +} + +.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { + display: block; + padding: 0; + margin: 0; + position: absolute; + width: 10em; + bottom: 1.5em; + max-height: 15em; + overflow: auto; + left: -5em; + background-color: #07141e; + background-color: rgba(7, 20, 30, .7); + -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); +} + +.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu { + display: block; +} + +.librevjs-libre-skin .librevjs-menu-button ul li { + list-style: none; + margin: 0; + padding: .3em 0; + line-height: 1.4em; + font-size: 1.2em; + text-align: center; + text-transform: lowercase; +} + + +/*COLOR DE SELECCION DE SUBTIULOS*/ + +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { + color: 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 { + outline: 0; + color: #004d40; + background-color: #1de9b6; +} + + +/*END COLOR SELECCION DE SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { + text-align: center; + text-transform: uppercase; + font-size: 1em; + line-height: 2em; + padding: 0; + margin: 0 0 .3em; + font-weight: 700; + cursor: default; +} + +.librevjs-libre-skin .librevjs-subtitles-button:before { + content: "\e00c" +} + +.librevjs-libre-skin .librevjs-captions-button:before { + content: "\e008" +} + +.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before { + -webkit-box-shadow: 0 0 1em #fff; + -moz-box-shadow: 0 0 1em #fff; + box-shadow: 0 0 1em #fff; +} + +.cliplibre-js { + background-color: #000; + position: relative; + padding: 0; + font-size: 10px; + vertical-align: middle; + font-weight: 500; + font-style: normal; + font-family: Arial, sans-serif; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none +} + +.cliplibre-js .librevjs-tech { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100% +} + +.cliplibre-js:-moz-full-screen { + position: absolute +} + +body.librevjs-full-window { + padding: 0; + margin: 0; + height: 100%; + overflow-y: auto; +} + +.cliplibre-js.librevjs-fullscreen { + position: fixed; + overflow: hidden; + z-index: 1000; + left: 0; + top: 0; + bottom: 0; + right: 0; + width: 100%!important; + height: 100%!important; + position: absolute; +} + +.cliplibre-js:-webkit-full-screen { + width: 100%!important; + height: 100%!important +} + +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { + cursor: none +} + +.librevjs-poster { + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; + cursor: pointer; + height: 100%; + margin: 0; + padding: 0; + position: relative; + width: 100% +} + +.librevjs-poster img { + display: block; + margin: 0 auto; + max-height: 100%; + padding: 0; + width: 100% +} + +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { + display: none +} + +.cliplibre-js .librevjs-text-track-display { + text-align: center; + position: absolute; + bottom: 4em; + left: 1em; + right: 1em +} + +.cliplibre-js .librevjs-text-track { + display: none; + font-size: 1.8em; + text-align: center; + margin-bottom: .1em; + background-color: #000; + background-color: rgba(0, 0, 0, .6) +} + +.cliplibre-js .librevjs-subtitles { + color: #fff +} + +.cliplibre-js .librevjs-captions { + color: rgb(255, 237, 0); + background-color: rgba(2, 7, 11, 0.7); +} + +.librevjs-tt-cue { + display: block +} + +.librevjs-libre-skin .librevjs-hidden { + display: none +} + +.librevjs-lock-showing { + display: block!important; + opacity: 1; + visibility: visible +} + +.no_html5 { + background: black none repeat scroll 0 0; + color: white; + height: 160px; + padding: 130px 10px 20px; + text-align: center; +} + + +/*title de resolucion | subtitles y Caption*/ + +.librevjs-libre-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: rgb(26, 187, 156); +} + +.librevjs-libre-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-skin .librevjs-big-play-button { + font-size: 5em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 1em; + } +} + +@media screen and (max-width: 335px) { + .cliplibre-js { + font-size: 6px; + } +} + +@media screen and (max-width: 150px) { + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 3em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 2em; + } +} diff --git a/css/librevideojs-material/libre-skin-yellow.css b/css/librevideojs-material/libre-skin-yellow.css new file mode 100644 index 0000000..6c93b95 --- /dev/null +++ b/css/librevideojs-material/libre-skin-yellow.css @@ -0,0 +1,788 @@ +/*! +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 { + /* Replace browser focus highlight with handle highlight */ + outline: 0; + position: relative; + cursor: pointer; + padding: 0; + /* background-color-with-alpha */ + background-color: #000000; + background-color: rgba(0, 0, 0, 0.5); +} + +.librevjs-libre-skin .librevjs-slider:focus { + -webkit-box-shadow: 0 0 2em #fff; + -moz-box-shadow: 0 0 2em #fff; + box-shadow: 0 0 2em #fff; +} + + +/*Eliminación de botón de barra de progreso*/ + +.librevjs-libre-skin .librevjs-slider-handle { + width: 0; + height: 0; +} + +.librevjs-libre-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + position: absolute; + top: 0; + left: 0; +} + + +/* control bar */ + +.librevjs-libre-skin .librevjs-control-bar { + /* Start hidden */ + display: none; + position: absolute; + /* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. + */ + bottom: 0; + /* Use left/right to stretch to 100% width of player div */ + left: 0; + right: 0; + /* Height includes any margin you want above or below control items */ + height: 3.0em; + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); +} + +.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { + display: block; + visibility: visible; + opacity: 1; + -webkit-transition: visibility .1s, opacity .1s; + -moz-transition: visibility .1s, opacity .1s; + -o-transition: visibility .1s, opacity .1s; + transition: visibility .1s, opacity .1s +} + +.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { + display: block; + visibility: hidden; + opacity: 0; + -webkit-transition: visibility 1s, opacity 1s; + -moz-transition: visibility 1s, opacity 1s; + -o-transition: visibility 1s, opacity 1s; + transition: visibility 1s, opacity 1s +} + +.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none +} + +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none +} + +@media \0screen { + .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } +} + +.librevjs-libre-skin .librevjs-control { + outline: 0; + position: relative; + float: left; + text-align: center; + margin: 0; + padding: 0; + height: 3em; + width: 4em +} + +.librevjs-libre-skin .librevjs-control:before { + font-family: LibreVideoJS; + font-size: 1.5em; + line-height: 2; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) +} + + +/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-control:focus:before, .librevjs-libre-skin .librevjs-control:hover:before { + color: #f1c40f; +} + + +/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-control:focus {} + +.librevjs-libre-skin .librevjs-control-text { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px +} + + +/*Color y diseño de boton play control*/ + +.librevjs-libre-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: rgb(241, 196, 14); +} + +.librevjs-libre-skin .librevjs-play-control:before { + content: "\e001" +} + +.librevjs-libre-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 { + content: "\e002" +} + + +/*END Color y diseño de boton play control*/ + +.librevjs-libre-skin .librevjs-mute-control, .librevjs-libre-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right +} + +.librevjs-libre-skin .librevjs-mute-control:before, .librevjs-libre-skin .librevjs-volume-menu-button:before { + content: "\e006" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" +} + +.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" +} + +.librevjs-libre-skin .librevjs-volume-control { + width: 5em; + float: right +} + +.librevjs-libre-skin .librevjs-volume-bar { + width: 5em; + height: .6em; + margin: 1.1em auto 0; +} + +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { + height: 2.9em; +} + + +/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ + +.librevjs-libre-skin .librevjs-volume-level { + position: absolute; + top: 0; + left: 0; + height: 0.5em; + /* assuming volume starts at 1.0 */ + width: 100%; + background: #f1c40f url() -50% 0 repeat; + /*color de barra volumen*/ +} + + +/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ + +.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { + width: .5em; + height: .5em; +} + +.librevjs-libre-skin .librevjs-volume-handle:before { + font-size: .9em; + top: -.2em; + left: -.2em; + width: 1em; + height: 1em +} + +.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width: 6em; + left: -4em +} + +.librevjs-libre-skin .librevjs-progress-control { + position: absolute; + left: 0; + right: 0; + width: auto; + font-size: .3em; + height: 1em; + top: -1em; + -webkit-transition: all .4s; + -moz-transition: all .4s; + -o-transition: all .4s; + transition: all .4s; +} + +.librevjs-libre-skin:hover .librevjs-progress-control { + font-size: .9em; + -webkit-transition: all .2s; + -moz-transition: all .2s; + -o-transition: all .2s; + transition: all .2s +} + +.librevjs-libre-skin .librevjs-progress-holder { + height: 100% +} + +.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0; +} + + +/* Personalización de barra de progreso a color amarillo */ + +.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; + /*mayor visibilidad*/ + line-height: 3em; +} + +.librevjs-libre-skin .librevjs-current-time { + float: left +} + +.librevjs-libre-skin .librevjs-duration { + float: left +} + +.librevjs-libre-skin .librevjs-remaining-time { + display: none; + float: left; +} + +.librevjs-time-divider { + float: left; + line-height: 3em +} + +.librevjs-libre-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right; +} + +.librevjs-libre-skin .librevjs-fullscreen-control:before { + content: "\e000" +} + +.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content: "\e00b" +} + + +/*Centrado del button Play y personalizado*/ + +.librevjs-libre-skin .librevjs-big-play-button { + left: 50%; + top: 50%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #f1c40f; + line-height: normal; +} + + +/* Hide if controls are disabled */ + +.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} + + +/* Hide when video starts playing */ + +.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { + display: none; +} + + +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ + +.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-skin:hover .librevjs-big-play-button, .librevjs-libre-skin .librevjs-big-play-button:focus { + color: rgb(244, 156, 18); + /*color boton focus amarillo oscuro*/ +} + +.librevjs-libre-skin .librevjs-big-play-button:before { + content: "\e007"; + font-family: LibreVideoJS; + /* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + text-align: center/* Needed for IE8 */ + ; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} + +.librevjs-error .librevjs-big-play-button { + display: none; +} + + +/*END PERSONALIZAR BIG PLAY BUTTON*/ + +.librevjs-loading-spinner { + display: none; + position: absolute; + top: 50%; + left: 50%; + font-size: 4em; + line-height: 1; + width: 1em; + height: 1em; + margin-left: -.5em; + margin-top: -.5em; + opacity: .75; + -webkit-animation: spin 1.5s infinite linear; + -moz-animation: spin 1.5s infinite linear; + -o-animation: spin 1.5s infinite linear; + animation: spin 1.5s infinite linear; +} + +.librevjs-libre-skin .librevjs-loading-spinner:before { + content: "\e01e"; + font-family: LibreVideoJS; + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + text-align: center; + text-shadow: 0 0 .1em #000; +} + +@-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg) + } + 100% { + -moz-transform: rotate(359deg) + } +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg) + } + 100% { + -webkit-transform: rotate(359deg) + } +} + +@-o-keyframes spin { + 0% { + -o-transform: rotate(0deg) + } + 100% { + -o-transform: rotate(359deg) + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg) + } + 100% { + transform: rotate(359deg) + } +} + +.librevjs-libre-skin .librevjs-menu-button { + float: right; + cursor: pointer; +} + +.librevjs-libre-skin .librevjs-menu { + display: none; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 0; + margin-bottom: 3em; + border-left: 2em solid transparent; + border-right: 2em solid transparent; + border-top: 1.55em solid #000; + border-top-color: rgba(7, 40, 50, .5); +} + +.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { + display: block; + padding: 0; + margin: 0; + position: absolute; + width: 10em; + bottom: 1.5em; + max-height: 15em; + overflow: auto; + left: -5em; + background-color: #07141e; + background-color: rgba(7, 20, 30, .7); + -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); + box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); +} + +.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu { + display: block; +} + +.librevjs-libre-skin .librevjs-menu-button ul li { + list-style: none; + margin: 0; + padding: .3em 0; + line-height: 1.4em; + font-size: 1.2em; + text-align: center; + text-transform: lowercase; +} + + +/*COLOR DE SELECCION DE SUBTIULOS*/ + +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { + color: #fff; + 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 { + outline: 0; + color: #fff; + background-color: #f1c40f; +} + + +/*END COLOR SELECCION DE SUBTITULOS*/ + +.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { + text-align: center; + text-transform: uppercase; + font-size: 1em; + line-height: 2em; + padding: 0; + margin: 0 0 .3em; + font-weight: 700; + cursor: default; +} + +.librevjs-libre-skin .librevjs-subtitles-button:before { + content: "\e00c" +} + +.librevjs-libre-skin .librevjs-captions-button:before { + content: "\e008" +} + +.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before { + -webkit-box-shadow: 0 0 1em #fff; + -moz-box-shadow: 0 0 1em #fff; + box-shadow: 0 0 1em #fff +} + +.cliplibre-js { + background-color: #000; + position: relative; + padding: 0; + font-size: 10px; + vertical-align: middle; + font-weight: 500; + font-style: normal; + font-family: Arial, sans-serif; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.cliplibre-js .librevjs-tech { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100% +} + +.cliplibre-js:-moz-full-screen { + position: absolute +} + +body.librevjs-full-window { + padding: 0; + margin: 0; + height: 100%; + overflow-y: auto; +} + +.cliplibre-js.librevjs-fullscreen { + position: fixed; + overflow: hidden; + z-index: 1000; + left: 0; + top: 0; + bottom: 0; + right: 0; + width: 100%!important; + height: 100%!important; + position: absolute; +} + +.cliplibre-js:-webkit-full-screen { + width: 100%!important; + height: 100%!important +} + +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { + cursor: none +} + +.librevjs-poster { + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; + cursor: pointer; + height: 100%; + margin: 0; + padding: 0; + position: relative; + width: 100% +} + +.librevjs-poster img { + display: block; + margin: 0 auto; + max-height: 100%; + padding: 0; + width: 100% +} + +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { + display: none +} + +.cliplibre-js .librevjs-text-track-display { + text-align: center; + position: absolute; + bottom: 4em; + left: 1em; + right: 1em; +} + +.cliplibre-js .librevjs-text-track { + display: none; + font-size: 1.8em; + text-align: center; + margin-bottom: .1em; + background-color: #000; + background-color: rgba(0, 0, 0, .6) +} + +.cliplibre-js .librevjs-subtitles { + color: #fff +} + +.cliplibre-js .librevjs-captions { + color: rgb(255, 237, 0); + background-color: rgba(2, 7, 11, 0.7); +} + +.librevjs-tt-cue { + display: block +} + +.librevjs-libre-skin .librevjs-hidden { + display: none +} + +.librevjs-lock-showing { + display: block!important; + opacity: 1; + visibility: visible; +} + +.no_html5 { + background: black none repeat scroll 0 0; + color: white; + height: 160px; + padding: 130px 10px 20px; + text-align: center; +} + + +/*title de resolucion | subtitles y Caption*/ + +.librevjs-libre-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: #f1c40f; +} + +.librevjs-libre-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: 0.9em; + } + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 5em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 1em; + } +} + +@media screen and (max-width: 335px) { + .cliplibre-js { + font-size: 6px; + } +} + +@media screen and (max-width: 150px) { + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 3em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-skin .librevjs-big-play-button { + font-size: 2em; + } +} diff --git a/css/mediagoblin/librevideo-js.css b/css/mediagoblin/librevideo-js.css new file mode 100644 index 0000000..36f5f46 --- /dev/null +++ b/css/mediagoblin/librevideo-js.css @@ -0,0 +1,997 @@ +/*! +LibreVideoJS Estilos personalizados = Teal +Version 1.2 +Written by Jesus Eduardo for Mediagoblin +*/ + +/* 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 librevjs-libre-mix-skin"> +*/ + + +/* 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-mix-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-mix-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-mix-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-mix-skin .librevjs-slider-handle { + width: 0; + height: 0; +} + +.librevjs-libre-mix-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-mix-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-mix-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-mix-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-mix-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none +} + +.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none +} + +@media \0screen { + .librevjs-libre-mix-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } +} + + +/* General styles for individual controls. */ + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-control:focus:before, .librevjs-libre-mix-skin .librevjs-control:hover:before { + color: #1de9b6; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: rgb(29, 233, 182); +} + +.librevjs-libre-mix-skin .librevjs-play-control:before { + content: "\e001" +} + +.librevjs-libre-mix-skin .librevjs-play-control:hover:before { + color: #007c5d; + /*color de play control al pasar el cursor*/ +} + +.librevjs-libre-mix-skin.librevjs-playing .librevjs-play-control:before { + content: "\e002" +} + + +/* Volume/Mute +-------------------------------------------------------------------------------- */ + +.librevjs-libre-mix-skin .librevjs-mute-control, .librevjs-libre-mix-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right +} + +.librevjs-libre-mix-skin .librevjs-mute-control:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button:before { + content: "\e006" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" +} + +.librevjs-libre-mix-skin .librevjs-volume-control { + width: 5em; + float: right +} + +.librevjs-libre-mix-skin .librevjs-volume-bar { + width: 5em; + height: .6em; + margin: 1.1em auto 0 +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu-content { + height: 2.9em +} + + +/*Personalización del nivel de volumen*/ + +.librevjs-libre-mix-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-mix-skin .librevjs-volume-bar .librevjs-volume-handle { + width: .5em; + height: .5em +} + +.librevjs-libre-mix-skin .librevjs-volume-handle:before { + font-size: .9em; + top: -.2em; + left: -.2em; + width: 1em; + height: 1em; +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width: 6em; + left: -4em; +} + + +/* Progress +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-progress-holder { + height: 100%; +} + + +/* Progress Bars */ + +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0 +} + +.librevjs-libre-mix-skin .librevjs-play-progress { + background: #1de9b6 url() -50% 0 repeat; +} + +.librevjs-libre-mix-skin .librevjs-load-progress { + background: #646464; + background: rgba(255, 255, 255, .4) +} + +.librevjs-libre-mix-skin .librevjs-seek-handle { + width: 1.5em; + height: 100% +} + +.librevjs-libre-mix-skin .librevjs-seek-handle:before { + padding-top: .1em +} + + +/* Time Display +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-skin .librevjs-time-controls { + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em +} + +.librevjs-libre-mix-skin .librevjs-current-time { + float: left +} + +.librevjs-libre-mix-skin .librevjs-duration { + float: left +} + +.librevjs-libre-mix-skin .librevjs-remaining-time { + display: none; + float: left +} + +.librevjs-time-divider { + float: left; + line-height: 3em +} + + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right +} + +.librevjs-libre-mix-skin .librevjs-fullscreen-control:before { + content: "\e000" +} + + +/* Switch to the exit icon when the player is in fullscreen */ + +.librevjs-libre-mix-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-mix-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-mix-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} + + +/* Hide when video starts playing */ + +.librevjs-libre-mix-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-mix-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-mix-skin:hover .librevjs-big-play-button, .librevjs-libre-mix-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-mix-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-mix-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-mix-skin .librevjs-menu-button { + float: right; + cursor: pointer; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-menu-button:hover .librevjs-menu { + display: block; +} + +.librevjs-libre-mix-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; +} + + +/* Select color menu subtitles/captions */ + +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected { + color: rgb(1, 56, 47); + background-color: rgb(29, 233, 182); +} + +.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus, .librevjs-libre-mix-skin .librevjs-menu-button ul li:hover, .librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #004d40; + background-color: #1de9b6; +} + + +/*End Select color menu subtitles/caption */ + +.librevjs-libre-mix-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-mix-skin .librevjs-subtitles-button:before { + content: "\e00c" +} + + +/* Captions Button */ + +.librevjs-libre-mix-skin .librevjs-captions-button:before { + content: "\e008" +} + + +/* Replacement for focus outline */ + +.librevjs-libre-mix-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-mix-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-mix-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-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: rgb(26, 187, 156); + background-color: inherit; +} + +.librevjs-libre-mix-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; +} + +/* Resolution + *************************************************/ +/* Position the button */ + +.librevjs-res-button { + font-weight: bold; + float: right; + line-height: 3em; +} + + +/* Don't show hover effects on title */ + +ul li.librevjs-menu-title.librevjs-res-menu-title:hover { + cursor: default; + background-color: transparent; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} + + +/* Needed to keep text visible in LibreVideoJS */ + +.librevjs-res-button .librevjs-control-text { + width: auto; + height: auto; + clip: auto; +} + +/*ProgressTip + **********************************************/ +.librevjs-progress-tip { + visibility: hidden; + display: block; + opacity: 0.8; + padding: 5px; + font-size: 10px; + position: absolute; + z-index: 100000; +} + +.librevjs-progress-tip-arrow { + background: url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) no-repeat top left; + bottom: 0; + left: 50%; + margin-left: -4px; + background-position: bottom left; + position: absolute; + width: 9px; + height: 5px; +} + +.librevjs-progress-tip-inner { + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + padding: 5px 8px 4px 8px; + background-color: black; + color: white; + max-width: 200px; + text-align: center; +} + +@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-mix-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-mix-skin .librevjs-big-play-button { + font-size: 1.8em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 1.4em; + } +} diff --git a/css/mix-material/mix-blue.css b/css/mix-material/mix-blue.css new file mode 100644 index 0000000..a24ca0f --- /dev/null +++ b/css/mix-material/mix-blue.css @@ -0,0 +1,934 @@ +/*! +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-mix-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-mix-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-mix-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-mix-skin .librevjs-slider-handle { + width: 0; + height: 0; +} + +.librevjs-libre-mix-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-mix-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-mix-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-mix-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-mix-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none +} + +.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none +} + +@media \0screen { + .librevjs-libre-mix-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } +} + + +/* General styles for individual controls. */ + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-control:focus:before, .librevjs-libre-mix-skin .librevjs-control:hover:before { + color: #2196F3; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: rgb(33, 150, 244); +} + +.librevjs-libre-mix-skin .librevjs-play-control:before { + content: "\e001" +} + +.librevjs-libre-mix-skin .librevjs-play-control:hover:before { + color: #2980b9; + /*color de play control al pasar el cursor*/ +} + +.librevjs-libre-mix-skin.librevjs-playing .librevjs-play-control:before { + content: "\e002" +} + + +/* Volume/Mute +-------------------------------------------------------------------------------- */ + +.librevjs-libre-mix-skin .librevjs-mute-control, .librevjs-libre-mix-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right +} + +.librevjs-libre-mix-skin .librevjs-mute-control:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button:before { + content: "\e006" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" +} + +.librevjs-libre-mix-skin .librevjs-volume-control { + width: 5em; + float: right +} + +.librevjs-libre-mix-skin .librevjs-volume-bar { + width: 5em; + height: .6em; + margin: 1.1em auto 0 +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu-content { + height: 2.9em +} + + +/*Personalización del nivel de volumen*/ + +.librevjs-libre-mix-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-mix-skin .librevjs-volume-bar .librevjs-volume-handle { + width: .5em; + height: .5em +} + +.librevjs-libre-mix-skin .librevjs-volume-handle:before { + font-size: .9em; + top: -.2em; + left: -.2em; + width: 1em; + height: 1em; +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width: 6em; + left: -4em; +} + + +/* Progress +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-progress-holder { + height: 100%; +} + + +/* Progress Bars */ + +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0 +} + +.librevjs-libre-mix-skin .librevjs-play-progress { + background: #2196F3 url() -50% 0 repeat; +} + +.librevjs-libre-mix-skin .librevjs-load-progress { + background: #646464; + background: rgba(255, 255, 255, .4) +} + +.librevjs-libre-mix-skin .librevjs-seek-handle { + width: 1.5em; + height: 100% +} + +.librevjs-libre-mix-skin .librevjs-seek-handle:before { + padding-top: .1em +} + + +/* Time Display +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-skin .librevjs-time-controls { + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em +} + +.librevjs-libre-mix-skin .librevjs-current-time { + float: left +} + +.librevjs-libre-mix-skin .librevjs-duration { + float: left +} + +.librevjs-libre-mix-skin .librevjs-remaining-time { + display: none; + float: left +} + +.librevjs-time-divider { + float: left; + line-height: 3em +} + + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right +} + +.librevjs-libre-mix-skin .librevjs-fullscreen-control:before { + content: "\e000" +} + + +/* Switch to the exit icon when the player is in fullscreen */ + +.librevjs-libre-mix-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-mix-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-mix-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} + + +/* Hide when video starts playing */ + +.librevjs-libre-mix-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-mix-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-mix-skin:hover .librevjs-big-play-button, .librevjs-libre-mix-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-mix-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-mix-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-mix-skin .librevjs-menu-button { + float: right; + cursor: pointer; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-menu-button:hover .librevjs-menu { + display: block; +} + +.librevjs-libre-mix-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; +} + + +/* Select color menu subtitles/captions */ + +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected { + color: rgb(11, 21, 42); + background-color: rgb(33, 150, 244); +} + +.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus, .librevjs-libre-mix-skin .librevjs-menu-button ul li:hover, .librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-mix-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-mix-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-mix-skin .librevjs-subtitles-button:before { + content: "\e00c" +} + + +/* Captions Button */ + +.librevjs-libre-mix-skin .librevjs-captions-button:before { + content: "\e008" +} + + +/* Replacement for focus outline */ + +.librevjs-libre-mix-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-mix-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-mix-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-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: rgb(33, 150, 244); + background-color: inherit; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-big-play-button { + font-size: 1.8em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 1.4em; + } +} diff --git a/css/mix-material/mix-grey.css b/css/mix-material/mix-grey.css new file mode 100644 index 0000000..7091a3c --- /dev/null +++ b/css/mix-material/mix-grey.css @@ -0,0 +1,934 @@ +/*! +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-mix-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-mix-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-mix-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-mix-skin .librevjs-slider-handle { + width: 0; + height: 0; +} + +.librevjs-libre-mix-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-mix-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-mix-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-mix-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-mix-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none +} + +.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none +} + +@media \0screen { + .librevjs-libre-mix-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } +} + + +/* General styles for individual controls. */ + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-control:focus:before, .librevjs-libre-mix-skin .librevjs-control:hover:before { + color: #9e9e9e; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: rgb(158, 158, 158); +} + +.librevjs-libre-mix-skin .librevjs-play-control:before { + content: "\e001" +} + +.librevjs-libre-mix-skin .librevjs-play-control:hover:before { + color: #7c7c7c; + /*color de play control al pasar el cursor*/ +} + +.librevjs-libre-mix-skin.librevjs-playing .librevjs-play-control:before { + content: "\e002" +} + + +/* Volume/Mute +-------------------------------------------------------------------------------- */ + +.librevjs-libre-mix-skin .librevjs-mute-control, .librevjs-libre-mix-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right +} + +.librevjs-libre-mix-skin .librevjs-mute-control:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button:before { + content: "\e006" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" +} + +.librevjs-libre-mix-skin .librevjs-volume-control { + width: 5em; + float: right +} + +.librevjs-libre-mix-skin .librevjs-volume-bar { + width: 5em; + height: .6em; + margin: 1.1em auto 0 +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu-content { + height: 2.9em +} + + +/*Personalización del nivel de volumen*/ + +.librevjs-libre-mix-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-mix-skin .librevjs-volume-bar .librevjs-volume-handle { + width: .5em; + height: .5em +} + +.librevjs-libre-mix-skin .librevjs-volume-handle:before { + font-size: .9em; + top: -.2em; + left: -.2em; + width: 1em; + height: 1em; +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width: 6em; + left: -4em; +} + + +/* Progress +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-progress-holder { + height: 100%; +} + + +/* Progress Bars */ + +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0 +} + +.librevjs-libre-mix-skin .librevjs-play-progress { + background: #9e9e9e url() -50% 0 repeat; +} + +.librevjs-libre-mix-skin .librevjs-load-progress { + background: #646464; + background: rgba(255, 255, 255, .4) +} + +.librevjs-libre-mix-skin .librevjs-seek-handle { + width: 1.5em; + height: 100% +} + +.librevjs-libre-mix-skin .librevjs-seek-handle:before { + padding-top: .1em +} + + +/* Time Display +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-skin .librevjs-time-controls { + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em +} + +.librevjs-libre-mix-skin .librevjs-current-time { + float: left +} + +.librevjs-libre-mix-skin .librevjs-duration { + float: left +} + +.librevjs-libre-mix-skin .librevjs-remaining-time { + display: none; + float: left +} + +.librevjs-time-divider { + float: left; + line-height: 3em +} + + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right +} + +.librevjs-libre-mix-skin .librevjs-fullscreen-control:before { + content: "\e000" +} + + +/* Switch to the exit icon when the player is in fullscreen */ + +.librevjs-libre-mix-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-mix-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-mix-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} + + +/* Hide when video starts playing */ + +.librevjs-libre-mix-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-mix-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-mix-skin:hover .librevjs-big-play-button, .librevjs-libre-mix-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-mix-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-mix-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-mix-skin .librevjs-menu-button { + float: right; + cursor: pointer; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-menu-button:hover .librevjs-menu { + display: block; +} + +.librevjs-libre-mix-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; +} + + +/* Select color menu subtitles/captions */ + +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected { + color: #fff; + background-color: rgb(158, 158, 158); +} + +.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus, .librevjs-libre-mix-skin .librevjs-menu-button ul li:hover, .librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #fff; + background-color: #9e9e9e; +} + + +/*End Select color menu subtitles/caption */ + +.librevjs-libre-mix-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-mix-skin .librevjs-subtitles-button:before { + content: "\e00c" +} + + +/* Captions Button */ + +.librevjs-libre-mix-skin .librevjs-captions-button:before { + content: "\e008" +} + + +/* Replacement for focus outline */ + +.librevjs-libre-mix-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-mix-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-mix-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-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: #737373; + background-color: inherit; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-big-play-button { + font-size: 1.8em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 1.4em; + } +} diff --git a/css/mix-material/mix-purple.css b/css/mix-material/mix-purple.css new file mode 100644 index 0000000..475a0c2 --- /dev/null +++ b/css/mix-material/mix-purple.css @@ -0,0 +1,934 @@ +/*! +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-mix-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-mix-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-mix-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-mix-skin .librevjs-slider-handle { + width: 0; + height: 0; +} + +.librevjs-libre-mix-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-mix-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-mix-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-mix-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-mix-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none +} + +.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none +} + +@media \0screen { + .librevjs-libre-mix-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } +} + + +/* General styles for individual controls. */ + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-control:focus:before, .librevjs-libre-mix-skin .librevjs-control:hover:before { + color: #9c27b0; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: rgb(156, 39, 176); +} + +.librevjs-libre-mix-skin .librevjs-play-control:before { + content: "\e001" +} + +.librevjs-libre-mix-skin .librevjs-play-control:hover:before { + color: #8e44ad; + /*color de play control al pasar el cursor*/ +} + +.librevjs-libre-mix-skin.librevjs-playing .librevjs-play-control:before { + content: "\e002" +} + + +/* Volume/Mute +-------------------------------------------------------------------------------- */ + +.librevjs-libre-mix-skin .librevjs-mute-control, .librevjs-libre-mix-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right +} + +.librevjs-libre-mix-skin .librevjs-mute-control:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button:before { + content: "\e006" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" +} + +.librevjs-libre-mix-skin .librevjs-volume-control { + width: 5em; + float: right +} + +.librevjs-libre-mix-skin .librevjs-volume-bar { + width: 5em; + height: .6em; + margin: 1.1em auto 0 +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu-content { + height: 2.9em +} + + +/*Personalización del nivel de volumen*/ + +.librevjs-libre-mix-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-mix-skin .librevjs-volume-bar .librevjs-volume-handle { + width: .5em; + height: .5em +} + +.librevjs-libre-mix-skin .librevjs-volume-handle:before { + font-size: .9em; + top: -.2em; + left: -.2em; + width: 1em; + height: 1em; +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width: 6em; + left: -4em; +} + + +/* Progress +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-progress-holder { + height: 100%; +} + + +/* Progress Bars */ + +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0 +} + +.librevjs-libre-mix-skin .librevjs-play-progress { + background: #9c27b0 url() -50% 0 repeat; +} + +.librevjs-libre-mix-skin .librevjs-load-progress { + background: #646464; + background: rgba(255, 255, 255, .4) +} + +.librevjs-libre-mix-skin .librevjs-seek-handle { + width: 1.5em; + height: 100% +} + +.librevjs-libre-mix-skin .librevjs-seek-handle:before { + padding-top: .1em +} + + +/* Time Display +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-skin .librevjs-time-controls { + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em +} + +.librevjs-libre-mix-skin .librevjs-current-time { + float: left +} + +.librevjs-libre-mix-skin .librevjs-duration { + float: left +} + +.librevjs-libre-mix-skin .librevjs-remaining-time { + display: none; + float: left +} + +.librevjs-time-divider { + float: left; + line-height: 3em +} + + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right +} + +.librevjs-libre-mix-skin .librevjs-fullscreen-control:before { + content: "\e000" +} + + +/* Switch to the exit icon when the player is in fullscreen */ + +.librevjs-libre-mix-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-mix-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-mix-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} + + +/* Hide when video starts playing */ + +.librevjs-libre-mix-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-mix-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-mix-skin:hover .librevjs-big-play-button, .librevjs-libre-mix-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-mix-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-mix-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-mix-skin .librevjs-menu-button { + float: right; + cursor: pointer; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-menu-button:hover .librevjs-menu { + display: block; +} + +.librevjs-libre-mix-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; +} + + +/* Select color menu subtitles/captions */ + +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected { + color: #fff; + background-color: rgb(156, 39, 176); +} + +.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus, .librevjs-libre-mix-skin .librevjs-menu-button ul li:hover, .librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #fff; + background-color: #9c27b0; +} + + +/*End Select color menu subtitles/caption */ + +.librevjs-libre-mix-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-mix-skin .librevjs-subtitles-button:before { + content: "\e00c" +} + + +/* Captions Button */ + +.librevjs-libre-mix-skin .librevjs-captions-button:before { + content: "\e008" +} + + +/* Replacement for focus outline */ + +.librevjs-libre-mix-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-mix-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-mix-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-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: #9c27b0; + background-color: inherit; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-big-play-button { + font-size: 1.8em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 1.4em; + } +} diff --git a/css/mix-material/mix-red.css b/css/mix-material/mix-red.css new file mode 100644 index 0000000..a37b273 --- /dev/null +++ b/css/mix-material/mix-red.css @@ -0,0 +1,934 @@ +/*! +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-mix-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-mix-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-mix-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-mix-skin .librevjs-slider-handle { + width: 0; + height: 0; +} + +.librevjs-libre-mix-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-mix-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-mix-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-mix-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-mix-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none +} + +.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none +} + +@media \0screen { + .librevjs-libre-mix-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } +} + + +/* General styles for individual controls. */ + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-control:focus:before, .librevjs-libre-mix-skin .librevjs-control:hover:before { + color: #f44336; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: rgb(244, 67, 54); +} + +.librevjs-libre-mix-skin .librevjs-play-control:before { + content: "\e001" +} + +.librevjs-libre-mix-skin .librevjs-play-control:hover:before { + color: #f22e1f; + /*color de play control al pasar el cursor*/ +} + +.librevjs-libre-mix-skin.librevjs-playing .librevjs-play-control:before { + content: "\e002" +} + + +/* Volume/Mute +-------------------------------------------------------------------------------- */ + +.librevjs-libre-mix-skin .librevjs-mute-control, .librevjs-libre-mix-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right +} + +.librevjs-libre-mix-skin .librevjs-mute-control:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button:before { + content: "\e006" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" +} + +.librevjs-libre-mix-skin .librevjs-volume-control { + width: 5em; + float: right +} + +.librevjs-libre-mix-skin .librevjs-volume-bar { + width: 5em; + height: .6em; + margin: 1.1em auto 0 +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu-content { + height: 2.9em +} + + +/*Personalización del nivel de volumen*/ + +.librevjs-libre-mix-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-mix-skin .librevjs-volume-bar .librevjs-volume-handle { + width: .5em; + height: .5em +} + +.librevjs-libre-mix-skin .librevjs-volume-handle:before { + font-size: .9em; + top: -.2em; + left: -.2em; + width: 1em; + height: 1em; +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width: 6em; + left: -4em; +} + + +/* Progress +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-progress-holder { + height: 100%; +} + + +/* Progress Bars */ + +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0 +} + +.librevjs-libre-mix-skin .librevjs-play-progress { + background: #f44336 url() -50% 0 repeat; +} + +.librevjs-libre-mix-skin .librevjs-load-progress { + background: #646464; + background: rgba(255, 255, 255, .4) +} + +.librevjs-libre-mix-skin .librevjs-seek-handle { + width: 1.5em; + height: 100% +} + +.librevjs-libre-mix-skin .librevjs-seek-handle:before { + padding-top: .1em +} + + +/* Time Display +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-skin .librevjs-time-controls { + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em +} + +.librevjs-libre-mix-skin .librevjs-current-time { + float: left +} + +.librevjs-libre-mix-skin .librevjs-duration { + float: left +} + +.librevjs-libre-mix-skin .librevjs-remaining-time { + display: none; + float: left +} + +.librevjs-time-divider { + float: left; + line-height: 3em +} + + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right +} + +.librevjs-libre-mix-skin .librevjs-fullscreen-control:before { + content: "\e000" +} + + +/* Switch to the exit icon when the player is in fullscreen */ + +.librevjs-libre-mix-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-mix-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-mix-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} + + +/* Hide when video starts playing */ + +.librevjs-libre-mix-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-mix-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-mix-skin:hover .librevjs-big-play-button, .librevjs-libre-mix-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-mix-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-mix-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-mix-skin .librevjs-menu-button { + float: right; + cursor: pointer; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-menu-button:hover .librevjs-menu { + display: block; +} + +.librevjs-libre-mix-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; +} + + +/* Select color menu subtitles/captions */ + +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected { + color: #fff; + background-color: rgb(244, 67, 54); +} + +.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus, .librevjs-libre-mix-skin .librevjs-menu-button ul li:hover, .librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #fff; + background-color: #f44336; +} + + +/*End Select color menu subtitles/caption */ + +.librevjs-libre-mix-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-mix-skin .librevjs-subtitles-button:before { + content: "\e00c" +} + + +/* Captions Button */ + +.librevjs-libre-mix-skin .librevjs-captions-button:before { + content: "\e008" +} + + +/* Replacement for focus outline */ + +.librevjs-libre-mix-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-mix-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-mix-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-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: rgb(246, 44, 30); + background-color: inherit; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-big-play-button { + font-size: 1.8em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 1.4em; + } +} diff --git a/css/mix-material/mix-teal.css b/css/mix-material/mix-teal.css new file mode 100644 index 0000000..2a57a79 --- /dev/null +++ b/css/mix-material/mix-teal.css @@ -0,0 +1,934 @@ +/*! +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-mix-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-mix-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-mix-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-mix-skin .librevjs-slider-handle { + width: 0; + height: 0; +} + +.librevjs-libre-mix-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-mix-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-mix-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-mix-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-mix-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none +} + +.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none +} + +@media \0screen { + .librevjs-libre-mix-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } +} + + +/* General styles for individual controls. */ + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-control:focus:before, .librevjs-libre-mix-skin .librevjs-control:hover:before { + color: #1de9b6; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: rgb(29, 233, 182); +} + +.librevjs-libre-mix-skin .librevjs-play-control:before { + content: "\e001" +} + +.librevjs-libre-mix-skin .librevjs-play-control:hover:before { + color: #007c5d; + /*color de play control al pasar el cursor*/ +} + +.librevjs-libre-mix-skin.librevjs-playing .librevjs-play-control:before { + content: "\e002" +} + + +/* Volume/Mute +-------------------------------------------------------------------------------- */ + +.librevjs-libre-mix-skin .librevjs-mute-control, .librevjs-libre-mix-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right +} + +.librevjs-libre-mix-skin .librevjs-mute-control:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button:before { + content: "\e006" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" +} + +.librevjs-libre-mix-skin .librevjs-volume-control { + width: 5em; + float: right +} + +.librevjs-libre-mix-skin .librevjs-volume-bar { + width: 5em; + height: .6em; + margin: 1.1em auto 0 +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu-content { + height: 2.9em +} + + +/*Personalización del nivel de volumen*/ + +.librevjs-libre-mix-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-mix-skin .librevjs-volume-bar .librevjs-volume-handle { + width: .5em; + height: .5em +} + +.librevjs-libre-mix-skin .librevjs-volume-handle:before { + font-size: .9em; + top: -.2em; + left: -.2em; + width: 1em; + height: 1em; +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width: 6em; + left: -4em; +} + + +/* Progress +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-progress-holder { + height: 100%; +} + + +/* Progress Bars */ + +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0 +} + +.librevjs-libre-mix-skin .librevjs-play-progress { + background: #1de9b6 url() -50% 0 repeat; +} + +.librevjs-libre-mix-skin .librevjs-load-progress { + background: #646464; + background: rgba(255, 255, 255, .4) +} + +.librevjs-libre-mix-skin .librevjs-seek-handle { + width: 1.5em; + height: 100% +} + +.librevjs-libre-mix-skin .librevjs-seek-handle:before { + padding-top: .1em +} + + +/* Time Display +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-skin .librevjs-time-controls { + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em +} + +.librevjs-libre-mix-skin .librevjs-current-time { + float: left +} + +.librevjs-libre-mix-skin .librevjs-duration { + float: left +} + +.librevjs-libre-mix-skin .librevjs-remaining-time { + display: none; + float: left +} + +.librevjs-time-divider { + float: left; + line-height: 3em +} + + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right +} + +.librevjs-libre-mix-skin .librevjs-fullscreen-control:before { + content: "\e000" +} + + +/* Switch to the exit icon when the player is in fullscreen */ + +.librevjs-libre-mix-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-mix-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-mix-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} + + +/* Hide when video starts playing */ + +.librevjs-libre-mix-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-mix-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-mix-skin:hover .librevjs-big-play-button, .librevjs-libre-mix-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-mix-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-mix-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-mix-skin .librevjs-menu-button { + float: right; + cursor: pointer; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-menu-button:hover .librevjs-menu { + display: block; +} + +.librevjs-libre-mix-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; +} + + +/* Select color menu subtitles/captions */ + +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected { + color: rgb(1, 56, 47); + background-color: rgb(29, 233, 182); +} + +.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus, .librevjs-libre-mix-skin .librevjs-menu-button ul li:hover, .librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #004d40; + background-color: #1de9b6; +} + + +/*End Select color menu subtitles/caption */ + +.librevjs-libre-mix-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-mix-skin .librevjs-subtitles-button:before { + content: "\e00c" +} + + +/* Captions Button */ + +.librevjs-libre-mix-skin .librevjs-captions-button:before { + content: "\e008" +} + + +/* Replacement for focus outline */ + +.librevjs-libre-mix-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-mix-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-mix-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-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: rgb(26, 187, 156); + background-color: inherit; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-big-play-button { + font-size: 1.8em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 1.4em; + } +} diff --git a/css/mix-material/mix-yellow.css b/css/mix-material/mix-yellow.css new file mode 100644 index 0000000..a9efaea --- /dev/null +++ b/css/mix-material/mix-yellow.css @@ -0,0 +1,934 @@ +/*! +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-mix-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-mix-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-mix-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-mix-skin .librevjs-slider-handle { + width: 0; + height: 0; +} + +.librevjs-libre-mix-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-mix-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-mix-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-mix-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-mix-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none +} + +.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none +} + +@media \0screen { + .librevjs-libre-mix-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: "" + } +} + + +/* General styles for individual controls. */ + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-control:focus:before, .librevjs-libre-mix-skin .librevjs-control:hover:before { + color: #f1c40f; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: rgb(241, 196, 14); +} + +.librevjs-libre-mix-skin .librevjs-play-control:before { + content: "\e001" +} + +.librevjs-libre-mix-skin .librevjs-play-control:hover:before { + color: #f39c12; + /*color de play control al pasar el cursor*/ +} + +.librevjs-libre-mix-skin.librevjs-playing .librevjs-play-control:before { + content: "\e002" +} + + +/* Volume/Mute +-------------------------------------------------------------------------------- */ + +.librevjs-libre-mix-skin .librevjs-mute-control, .librevjs-libre-mix-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right +} + +.librevjs-libre-mix-skin .librevjs-mute-control:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button:before { + content: "\e006" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004" +} + +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005" +} + +.librevjs-libre-mix-skin .librevjs-volume-control { + width: 5em; + float: right +} + +.librevjs-libre-mix-skin .librevjs-volume-bar { + width: 5em; + height: .6em; + margin: 1.1em auto 0 +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu-content { + height: 2.9em +} + + +/*Personalización del nivel de volumen*/ + +.librevjs-libre-mix-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-mix-skin .librevjs-volume-bar .librevjs-volume-handle { + width: .5em; + height: .5em +} + +.librevjs-libre-mix-skin .librevjs-volume-handle:before { + font-size: .9em; + top: -.2em; + left: -.2em; + width: 1em; + height: 1em; +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + width: 6em; + left: -4em; +} + + +/* Progress +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-progress-holder { + height: 100%; +} + + +/* Progress Bars */ + +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + left: 0; + top: 0 +} + +.librevjs-libre-mix-skin .librevjs-play-progress { + background: #f1c40f url() -50% 0 repeat; +} + +.librevjs-libre-mix-skin .librevjs-load-progress { + background: #646464; + background: rgba(255, 255, 255, .4) +} + +.librevjs-libre-mix-skin .librevjs-seek-handle { + width: 1.5em; + height: 100% +} + +.librevjs-libre-mix-skin .librevjs-seek-handle:before { + padding-top: .1em +} + + +/* Time Display +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-skin .librevjs-time-controls { + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em +} + +.librevjs-libre-mix-skin .librevjs-current-time { + float: left +} + +.librevjs-libre-mix-skin .librevjs-duration { + float: left +} + +.librevjs-libre-mix-skin .librevjs-remaining-time { + display: none; + float: left +} + +.librevjs-time-divider { + float: left; + line-height: 3em +} + + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ + +.librevjs-libre-mix-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right +} + +.librevjs-libre-mix-skin .librevjs-fullscreen-control:before { + content: "\e000" +} + + +/* Switch to the exit icon when the player is in fullscreen */ + +.librevjs-libre-mix-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-mix-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-mix-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} + + +/* Hide when video starts playing */ + +.librevjs-libre-mix-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-mix-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-mix-skin:hover .librevjs-big-play-button, .librevjs-libre-mix-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-mix-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-mix-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-mix-skin .librevjs-menu-button { + float: right; + cursor: pointer; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-menu-button:hover .librevjs-menu { + display: block; +} + +.librevjs-libre-mix-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; +} + + +/* Select color menu subtitles/captions */ + +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected { + color: #fff; + background-color: rgb(241, 196, 14); +} + +.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus, .librevjs-libre-mix-skin .librevjs-menu-button ul li:hover, .librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #fff; + background-color: #f1c40f; +} + + +/*End Select color menu subtitles/caption */ + +.librevjs-libre-mix-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-mix-skin .librevjs-subtitles-button:before { + content: "\e00c" +} + + +/* Captions Button */ + +.librevjs-libre-mix-skin .librevjs-captions-button:before { + content: "\e008" +} + + +/* Replacement for focus outline */ + +.librevjs-libre-mix-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-mix-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-mix-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-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: #f1c40f; + background-color: inherit; +} + +.librevjs-libre-mix-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-mix-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-mix-skin .librevjs-big-play-button { + font-size: 1.8em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 1.4em; + } +} diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..e086df0 --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,527 @@ +/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ + + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + + +/* Document + ========================================================================== */ + +html { + font-family: sans-serif; + /* 1 */ + line-height: 1.15; + /* 2 */ + -ms-text-size-adjust: 100%; + /* 3 */ + -webkit-text-size-adjust: 100%; + /* 3 */ +} + + +/* Sections + ========================================================================== */ + + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + + +/** + * Add the correct display in IE 9-. + */ + +article, aside, footer, header, nav, section { + display: block; +} + + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + + +/* Grouping content + ========================================================================== */ + + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, figure, main { + /* 1 */ + display: block; +} + + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ +} + + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + + +/* Text-level semantics + ========================================================================== */ + + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ +} + + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, a:hover { + outline-width: 0; +} + + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ +} + + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, strong { + font-weight: inherit; +} + + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, strong { + font-weight: bolder; +} + + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, kbd, samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + + +/* Embedded content + ========================================================================== */ + + +/** + * Add the correct display in IE 9-. + */ + +audio, video { + display: inline-block; +} + + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +video { + width: 100%; + height: auto; +} + +/* Forms + ========================================================================== */ + + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, input, optgroup, select, textarea { + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ +} + + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, input { + /* 1 */ + overflow: visible; +} + + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, select { + /* 1 */ + text-transform: none; +} + + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, html [type="button"], +/* 1 */ + +[type="reset"], [type="submit"] { + -webkit-appearance: button; + /* 2 */ +} + + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ +} + + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ +} + + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], [type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ +} + + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { + height: auto; +} + + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + + +/* Interactive + ========================================================================== */ + + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, +/* 1 */ + +menu { + display: block; +} + + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + + +/* Scripting + ========================================================================== */ + + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + + +/* Hidden + ========================================================================== */ + + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/css/proggrestips/proggrestips.css b/css/proggrestips/proggrestips.css new file mode 100644 index 0000000..e08bbe2 --- /dev/null +++ b/css/proggrestips/proggrestips.css @@ -0,0 +1,53 @@ +/*! + * proggrestips.css + * + * Copyleft 2017 Jesus Eduardo <heckyel@cybersy> + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program; if not, write to the Free Software + * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, + * MA 02110-1301, USA. + * + */ + +.librevjs-progress-tip { + visibility: hidden; + display: block; + opacity: 0.8; + padding: 5px; + font-size: 10px; + position: absolute; + z-index: 100000; +} + +.librevjs-progress-tip-arrow { + background: url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) no-repeat top left; + bottom: 0; + left: 50%; + margin-left: -4px; + background-position: bottom left; + position: absolute; + width: 9px; + height: 5px; +} + +.librevjs-progress-tip-inner { + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + padding: 5px 8px 4px 8px; + background-color: black; + color: white; + max-width: 200px; + text-align: center; +} diff --git a/css/selector/video-quality-selector.css b/css/selector/video-quality-selector.css new file mode 100644 index 0000000..b3a0f12 --- /dev/null +++ b/css/selector/video-quality-selector.css @@ -0,0 +1,36 @@ +@charset "utf-8"; + +/* +You are free to style the button however you wish. I plan to use +an icon from my site's own icon font to make it more visible. These +are just basic styles to make it look ok with plain text. +*/ + + +/* Position the button */ + +.librevjs-res-button { + font-weight: bold; + float: right; + line-height: 3em; +} + + +/* Don't show hover effects on title */ + +ul li.librevjs-menu-title.librevjs-res-menu-title:hover { + cursor: default; + background-color: transparent; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} + + +/* Needed to keep text visible in LibreVideoJS */ + +.librevjs-res-button .librevjs-control-text { + width: auto; + height: auto; + clip: auto; +} |