diff options
49 files changed, 11281 insertions, 3392 deletions
diff --git a/languages/librevideojs-html5-player-es_ES.po b/languages/librevideojs-html5-player-es_ES.po index 4add14c..dab18ba 100644 --- a/languages/librevideojs-html5-player-es_ES.po +++ b/languages/librevideojs-html5-player-es_ES.po @@ -36,6 +36,6 @@ msgstr "" "Para obtener documentación detallada, por favor visite la página de plugin <a target=" "\"_blank\" href=\"%s\">here</a>." -#: librevideojs-html5-player.php:128 +#: librevideojs-html5-player.php:132 msgid "you need to specify the src of the video file" msgstr "es necesario especificar el src del archivo de vídeo" diff --git a/languages/librevideojs-html5-player-ja.po b/languages/librevideojs-html5-player-ja.po index e594353..6c789f0 100644 --- a/languages/librevideojs-html5-player-ja.po +++ b/languages/librevideojs-html5-player-ja.po @@ -36,6 +36,6 @@ msgid "" msgstr "" "詳細なドキュメントについては、プラグインのホームページをご覧ください。<a target=\"_blank\" href=\"%s\">ここに</a>." -#: librevideojs-html5-player.php:128 +#: librevideojs-html5-player.php:132 msgid "you need to specify the src of the video file" msgstr "あなたはビデオファイルのsrcを指定する必要があります" diff --git a/languages/librevideojs-html5-player-pt_PT.po b/languages/librevideojs-html5-player-pt_PT.po index 2e5fb4a..51f1658 100644 --- a/languages/librevideojs-html5-player-pt_PT.po +++ b/languages/librevideojs-html5-player-pt_PT.po @@ -37,6 +37,6 @@ msgstr "" "Para documentação detalhada, visite a homepage do plugin <a " "target=\"_blank\" href=\"%s\">aqui</a>." -#: librevideojs-html5-player.php:128 +#: librevideojs-html5-player.php:132 msgid "you need to specify the src of the video file" msgstr "Você precisa especificar o src do arquivo de vídeo" diff --git a/languages/librevideojs-html5-player.pot b/languages/librevideojs-html5-player.pot index 82b1919..889475c 100644 --- a/languages/librevideojs-html5-player.pot +++ b/languages/librevideojs-html5-player.pot @@ -32,6 +32,6 @@ msgid "" "\"_blank\" href=\"%s\">here</a>." msgstr "" -#: librevideojs-html5-player.php:128 +#: librevideojs-html5-player.php:132 msgid "you need to specify the src of the video file" msgstr "" diff --git a/librevideojs-html5-player.php b/librevideojs-html5-player.php index b3a9f82..4ba5ba6 100644 --- a/librevideojs-html5-player.php +++ b/librevideojs-html5-player.php @@ -1,7 +1,7 @@ <?php /* Plugin Name: LibreVideoJS HTML5 Player -Version: 1.0.3 +Version: 1.1.0 Plugin URI: https://wordpress.org/plugins/librevideojs-html5-player Author: <a href="https://conocimientoslibres.tuxfamily.org">Jesús Eduardo</a>, <a href="http://www.freakspot.net/">Jorge Maldonado</a> Description: Reproductor de vídeo Libre en Responsive Desing HTML5 para WordPress, construido sobre el ampliamente utilizado <a href="https://notabug.org/Heckyel/LibreVideoJS">LibreVideoJS</a> de la biblioteca del reproductor de vídeo HTML5. Le permite incrustar vídeo en tu post o página con HTML5 para los navegadores principales. Es compatible con <a href="https://www.gnu.org/software/librejs/free-your-javascript.html">LibreJS</a> de acuerdo con la filosofía <a href="https://www.gnu.org">GNU</a>. @@ -20,7 +20,7 @@ if (!class_exists('LIBREVIDEOJS_HTML5_PLAYER')) { class LIBREVIDEOJS_HTML5_PLAYER { - var $plugin_version = '1.0.3'; + var $plugin_version = '1.1.0'; function __construct() { define('LIBREVIDEOJS_HTML5_PLAYER_VERSION', $this->plugin_version); @@ -84,19 +84,23 @@ if (!class_exists('LIBREVIDEOJS_HTML5_PLAYER')) { } function librevideojs_html5_player_enqueue_scripts() { - if (!is_admin()) { + global $post; + if (!is_admin() && strpos($post->post_content, '[librevideojs_video') !== false){ $plugin_url = plugins_url('', __FILE__); - wp_enqueue_script('jquery'); - wp_register_script('librevideojs', $plugin_url . '/librevideojs/js/cliplibrejs.dev.js', true); + wp_register_script('librevideojs', $plugin_url . '/librevideojs/js/cliplibrejs.dev.js', array(), LIBREVIDEOJS_HTML5_PLAYER_VERSION); wp_enqueue_script('librevideojs'); - wp_register_style('librevideojs', $plugin_url . '/librevideojs/css/librevideojs-material/libre-skin-teal.min.css'); - wp_enqueue_style('librevideojs'); + wp_register_style('librevideojs-mix-master-style', $plugin_url . '/librevideojs/css/mix-material/master.css', array(), $ver='1.4'); + wp_enqueue_style('librevideojs-mix-master-style'); + wp_register_style('librevideojs-material-style', $plugin_url . '/librevideojs/css/librevideojs-material/master.css', array(), $ver='1.4'); + wp_enqueue_style('librevideojs-material-style'); wp_register_style('librevideojs-style', $plugin_url . '/librevideojs-html5-player.css'); wp_enqueue_style('librevideojs-style'); - wp_register_script('librevideojs-selector', $plugin_url . '/librevideojs/selector/video-quality-selector.min.js', true); + wp_register_script('librevideojs-selector', $plugin_url . '/librevideojs/selector/video-quality-selector.js', array(), LIBREVIDEOJS_HTML5_PLAYER_VERSION); wp_enqueue_script('librevideojs-selector'); - wp_register_style('librevideojs-selector', $plugin_url . '/librevideojs/selector/video-quality-selector.min.css'); + wp_register_style('librevideojs-selector', $plugin_url . '/librevideojs/selector/video-quality-selector.css', array(), $ver = '1.4'); wp_enqueue_style('librevideojs-selector'); + } else{ + return false; } } @@ -120,8 +124,8 @@ function librevideojs_html5_video_embed_handler($atts, $content=null) { 'loop' => '', 'muted' => '', 'poster' => '', + 'skin' => '', 'class' => '', - ), $atts)); if(empty($url)){ @@ -145,6 +149,7 @@ function librevideojs_html5_video_embed_handler($atts, $content=null) { else{ $controls = " controls"; } + //preload if($preload == "metadata") { $preload = ' preload="metadata"'; @@ -155,6 +160,7 @@ function librevideojs_html5_video_embed_handler($atts, $content=null) { else{ $preload = ' preload="auto"'; } + //autoplay if($autoplay == "true"){ $autoplay = " autoplay"; @@ -162,6 +168,7 @@ function librevideojs_html5_video_embed_handler($atts, $content=null) { else{ $autoplay = ""; } + //loop if($loop == "true"){ $loop = " loop"; @@ -169,6 +176,7 @@ function librevideojs_html5_video_embed_handler($atts, $content=null) { else{ $loop = ""; } + //muted if($muted == "true"){ $muted = " muted"; @@ -176,15 +184,16 @@ function librevideojs_html5_video_embed_handler($atts, $content=null) { else{ $muted = ""; } - // Tracks + + //Tracks if(!is_null( $content )){ $track = do_shortcode($content); } else{ - $track = ""; + $track = ""; } - // Calidades + //Qualities if(!is_null( $content = '' )){ $calidades = do_shortcode($content); } @@ -192,6 +201,14 @@ function librevideojs_html5_video_embed_handler($atts, $content=null) { $calidades = ""; } + //skin theme + if (!empty($skin)) { + $_skin = "$skin"; + } + else{ + $_skin= "materialteal"; + } + //poster if(!empty($poster)) { $poster = " poster='$poster'"; @@ -212,9 +229,11 @@ EOT; } $output = <<<EOT <!-- Begin LibreVideoJS --> - <video id="$player" class="cliplibre-js-responsive-container librevjs-hd cliplibre-js librevjs-libre-skin" {$controls}{$preload}{$autoplay}{$loop}{$muted}{$poster} data-setup='{}'> + <div class="LibreVideoJS"> + <video id="$player" class="cliplibre-js-responsive-container librevjs-hd cliplibre-js librevjs-libre-{$_skin}-skin" {$controls}{$preload}{$autoplay}{$loop}{$muted}{$poster} data-setup='{}'> {$src}\n\t\t{$calidades}{$track}<p class="no_html5">Sorry, this video will not work because your web browser does not support HTML5 video.<br>We recommend that you install a <a href='https://libreplanet.org/wiki/Libre_Browsers_Libre_Formats' target='_blank'> browser that respects the freedom and support free formats</a>!</p> </video> + <div> <script type="text/javascript"> // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later cliplibrejs('$player',{plugins:{resolutionSelector:{force_types:['video/webm','video/ogg','video/mp4'],default_res:"$resolution"}},nativeControlsForTouch: false}); @@ -227,7 +246,7 @@ EOT; return $output; } -/*Trayendo los subtitulos mediante [track]*/ +/*Adding subtitles using... [track]*/ function track_shortcode($atts, $content=null){ extract(shortcode_atts(array( 'kind' => '', @@ -266,8 +285,7 @@ function track_shortcode($atts, $content=null){ } add_shortcode('track', 'track_shortcode'); - -/*Trayendo las calidades*/ +/*Adding qualities*/ function calidades_shortcode($atts, $content=null){ extract(shortcode_atts(array( 'lvjs_calidad' => '', @@ -286,7 +304,6 @@ function calidades_shortcode($atts, $content=null){ return $calidades; } - add_shortcode('calidades', 'calidades_shortcode'); ?> diff --git a/librevideojs/css/default/cliplibre-js.dev.css b/librevideojs/css/default/cliplibre-js.dev.css deleted file mode 100644 index 70a4a5a..0000000 --- a/librevideojs/css/default/cliplibre-js.dev.css +++ /dev/null @@ -1,576 +0,0 @@ -/*! -Video.js Default Styles (http://videojs.com) -Version 4.3.0 -Create your own skin at http://designer.videojs.com -*/.librevjs-default-skin { - color:#ccc; - background-color: inherit; -} -@font-face { - font-family:VideoJS; - src: url('../../fonts/default/vjs.eot'); - src: url('../../fonts/default/vjs.eot?#iefix') format('embedded-opentype'), url('../../fonts/default/vjs.woff') format('woff'), url('../../fonts/default/vjs.ttf') format('truetype'), url('../../fonts/default/vjs.svg#icomoon') format('svg'); - fontº-weight:400; - font-style:normal -} -.librevjs-default-skin .librevjs-slider { - outline:0; - position:relative; - cursor:pointer; - padding:0; - background-color:#333; - background-color:rgba(51,51,51,.9) -} -.librevjs-default-skin .librevjs-slider:focus { - -webkit-box-shadow:0 0 2em #fff; - -moz-box-shadow:0 0 2em #fff; - box-shadow:0 0 2em #fff -} -.librevjs-default-skin .librevjs-slider-handle { - position:absolute; - left:0; - top:0 -} -.librevjs-default-skin .librevjs-slider-handle:before { - content:"\e009"; - font-family:VideoJS; - font-size:1em; - line-height:1; - text-align:center; - text-shadow:0 0 1em #fff; - position:absolute; - top:0; - left:0; - -webkit-transform:rotate(-45deg); - -moz-transform:rotate(-45deg); - -ms-transform:rotate(-45deg); - -o-transform:rotate(-45deg); - transform:rotate(-45deg) -} -.librevjs-default-skin .librevjs-control-bar { - display:none; - position:absolute; - bottom:0; - left:0; - right:0; - height:3em; - background-color:#07141e; - background-color:rgba(7,20,30,.7) -} -.librevjs-default-skin.librevjs-has-started .librevjs-control-bar { - display:block; - visibility:visible; - opacity:1; - -webkit-transition:visibility .1s,opacity .1s; - -moz-transition:visibility .1s,opacity .1s; - -o-transition:visibility .1s,opacity .1s; - transition:visibility .1s,opacity .1s -} -.librevjs-default-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { - display:block; - visibility:hidden; - opacity:0; - -webkit-transition:visibility 1s,opacity 1s; - -moz-transition:visibility 1s,opacity 1s; - -o-transition:visibility 1s,opacity 1s; - transition:visibility 1s,opacity 1s -} -.librevjs-default-skin.librevjs-controls-disabled .librevjs-control-bar { - display:none -} -.librevjs-default-skin.librevjs-using-native-controls .librevjs-control-bar { - display:none -} -@media \0screen { - .librevjs-default-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -.librevjs-default-skin .librevjs-control { - outline:0; - position:relative; - float:left; - text-align:center; - margin:0; - padding:0; - height:3em; - width:4em -} -.librevjs-default-skin .librevjs-control:before { - font-family:VideoJS; - font-size:1.5em; - line-height:2; - position:absolute; - top:0; - left:0; - width:100%; - height:100%; - text-align:center; - text-shadow:1px 1px 1px rgba(0,0,0,.5) -} -.librevjs-default-skin .librevjs-control:focus:before,.librevjs-default-skin .librevjs-control:hover:before { - text-shadow:0 0 1em #fff -} -.librevjs-default-skin .librevjs-control:focus { -} -.librevjs-default-skin .librevjs-control-text { - border:0; - clip:rect(0 0 0 0); - height:1px; - margin:-1px; - overflow:hidden; - padding:0; - position:absolute; - width:1px -} -.librevjs-default-skin .librevjs-play-control { - width:5em; - cursor:pointer -} -.librevjs-default-skin .librevjs-play-control:before { - content:"\e001" -} -.librevjs-default-skin.librevjs-playing .librevjs-play-control:before { - content:"\e002" -} -.librevjs-default-skin .librevjs-mute-control,.librevjs-default-skin .librevjs-volume-menu-button { - cursor:pointer; - float:right -} -.librevjs-default-skin .librevjs-mute-control:before,.librevjs-default-skin .librevjs-volume-menu-button:before { - content:"\e006" -} -.librevjs-default-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-default-skin .librevjs-volume-menu-button.librevjs-vol-0:before { - content:"\e003" -} -.librevjs-default-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-default-skin .librevjs-volume-menu-button.librevjs-vol-1:before { - content:"\e004" -} -.librevjs-default-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-default-skin .librevjs-volume-menu-button.librevjs-vol-2:before { - content:"\e005" -} -.librevjs-default-skin .librevjs-volume-control { - width:5em; - float:right -} -.librevjs-default-skin .librevjs-volume-bar { - width:5em; - height:.6em; - margin:1.1em auto 0 -} -.librevjs-default-skin .librevjs-volume-menu-button .librevjs-menu-content { - height:2.9em -} -.librevjs-default-skin .librevjs-volume-level { - position:absolute; - top:0; - left:0; - height:.5em; - background:#66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat -} -.librevjs-default-skin .librevjs-volume-bar .librevjs-volume-handle { - width:.5em; - height:.5em -} -.librevjs-default-skin .librevjs-volume-handle:before { - font-size:.9em; - top:-.2em; - left:-.2em; - width:1em; - height:1em -} -.librevjs-default-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { - width:6em; - left:-4em -} -.librevjs-default-skin .librevjs-progress-control { - position:absolute; - left:0; - right:0; - width:auto; - font-size:.3em; - height:1em; - top:-1em; - -webkit-transition:all .4s; - -moz-transition:all .4s; - -o-transition:all .4s; - transition:all .4s -} -.librevjs-default-skin:hover .librevjs-progress-control { - font-size:.9em; - -webkit-transition:all .2s; - -moz-transition:all .2s; - -o-transition:all .2s; - transition:all .2s -} -.librevjs-default-skin .librevjs-progress-holder { - height:100% -} -.librevjs-default-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-default-skin .librevjs-progress-holder .librevjs-load-progress { - position:absolute; - display:block; - height:100%; - margin:0; - padding:0; - left:0; - top:0 -} -.librevjs-default-skin .librevjs-play-progress { - background:#66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat -} -.librevjs-default-skin .librevjs-load-progress { - background:#646464; - background:rgba(255,255,255,.4) -} -.librevjs-default-skin .librevjs-seek-handle { - width:1.5em; - height:100% -} -.librevjs-default-skin .librevjs-seek-handle:before { - padding-top:.1em -} -.librevjs-default-skin .librevjs-time-controls { - font-size:1em; - line-height:3em -} -.librevjs-default-skin .librevjs-current-time { - float:left -} -.librevjs-default-skin .librevjs-duration { - float:left -} -.librevjs-default-skin .librevjs-remaining-time { - display:none; - float:left -} -.librevjs-time-divider { - float:left; - line-height:3em -} -.librevjs-default-skin .librevjs-fullscreen-control { - width:3.8em; - cursor:pointer; - float:right -} -.librevjs-default-skin .librevjs-fullscreen-control:before { - content:"\e000" -} -.librevjs-default-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content:"\e00b" -} - -/*Centrado del button Play*/ -.librevjs-default-skin .librevjs-big-play-button { - left: 50%; /*por defecto left:.5em;*/ - top: 50%; /*por defecto top:.5em;*/ - margin: -1.5em auto auto -2em; /*por defecto esta linea no existe*/ - font-size:3em; - display:block; - z-index:2; - position:absolute; - width:4em; - height:2.6em; - text-align:center; - vertical-align:middle; - cursor:pointer; - opacity:1; - background-color:#07141e; - background-color:rgba(7,20,30,.7); - border:.1em solid #3b4249; - -webkit-border-radius:.8em; - -moz-border-radius:.8em; - border-radius:.8em; - -webkit-box-shadow:0 0 1em rgba(255,255,255,.25); - -moz-box-shadow:0 0 1em rgba(255,255,255,.25); - box-shadow:0 0 1em rgba(255,255,255,.25); - -webkit-transition:all .4s; - -moz-transition:all .4s; - -o-transition:all .4s; - transition:all .4s -} -.librevjs-default-skin.librevjs-big-play-centered .librevjs-big-play-button { - left:50%; - margin-left:-2.1em; - top:50%; - margin-top:-1.4000000000000001em -} -.librevjs-default-skin.librevjs-controls-disabled .librevjs-big-play-button { - display:none -} -.librevjs-default-skin.librevjs-has-started .librevjs-big-play-button { - display:none -} -.librevjs-default-skin.librevjs-using-native-controls .librevjs-big-play-button { - display:none -} -.librevjs-default-skin:hover .librevjs-big-play-button,.librevjs-default-skin .librevjs-big-play-button:focus { - outline:0; - border-color:#fff; - background-color:#505050; - background-color:rgba(50,50,50,.75); - -webkit-box-shadow:0 0 3em #fff; - -moz-box-shadow:0 0 3em #fff; - box-shadow:0 0 3em #fff; - -webkit-transition:all 0s; - -moz-transition:all 0s; - -o-transition:all 0s; - transition:all 0s -} -.librevjs-default-skin .librevjs-big-play-button:before { - content:"\e001"; - font-family:VideoJS; - line-height:2.6em; - text-shadow:.05em .05em .1em #000; - text-align:center; - position:absolute; - left:0; - width:100%; - height:100% -} -.librevjs-loading-spinner { - display:none; - position:absolute; - top:50%; - left:50%; - font-size:4em; - line-height:1; - width:1em; - height:1em; - margin-left:-.5em; - margin-top:-.5em; - opacity:.75; - -webkit-animation:spin 1.5s infinite linear; - -moz-animation:spin 1.5s infinite linear; - -o-animation:spin 1.5s infinite linear; - animation:spin 1.5s infinite linear -} -.librevjs-default-skin .librevjs-loading-spinner:before { - content:"\e01e"; - font-family:VideoJS; - position:absolute; - top:0; - left:0; - width:1em; - height:1em; - text-align:center; - text-shadow:0 0 .1em #000 -} -@-moz-keyframes spin { - 0% { - -moz-transform:rotate(0deg) - } - 100% { - -moz-transform:rotate(359deg) - } -} -@-webkit-keyframes spin { - 0% { - -webkit-transform:rotate(0deg) - } - 100% { - -webkit-transform:rotate(359deg) - } -} -@-o-keyframes spin { - 0% { - -o-transform:rotate(0deg) - } - 100% { - -o-transform:rotate(359deg) - } -} -@keyframes spin { - 0% { - transform:rotate(0deg) - } - 100% { - transform:rotate(359deg) - } -} -.librevjs-default-skin .librevjs-menu-button { - float:right; - cursor:pointer -} -.librevjs-default-skin .librevjs-menu { - display:none; - position:absolute; - bottom:0; - left:0; - width:0; - height:0; - margin-bottom:3em; - border-left:2em solid transparent; - border-right:2em solid transparent; - border-top:1.55em solid #000; - border-top-color:rgba(7,40,50,.5) -} -.librevjs-default-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { - display:block; - padding:0; - margin:0; - position:absolute; - width:10em; - bottom:1.5em; - max-height:15em; - overflow:auto; - left:-5em; - background-color:#07141e; - background-color:rgba(7,20,30,.7); - -webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); - -moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); - box-shadow:-.2em -.2em .3em rgba(255,255,255,.2) -} -.librevjs-default-skin .librevjs-menu-button:hover .librevjs-menu { - display:block -} -.librevjs-default-skin .librevjs-menu-button ul li { - list-style:none; - margin:0; - padding:.3em 0; - line-height:1.4em; - font-size:1.2em; - text-align:center; - text-transform:lowercase -} -.librevjs-default-skin .librevjs-menu-button ul li.librevjs-selected { - background-color:#000 -} -.librevjs-default-skin .librevjs-menu-button ul li:focus,.librevjs-default-skin .librevjs-menu-button ul li:hover,.librevjs-default-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-default-skin .librevjs-menu-button ul li.librevjs-selected:hover { - outline:0; - color:#111; - background-color:#fff; - background-color:rgba(255,255,255,.75); - -webkit-box-shadow:0 0 1em #fff; - -moz-box-shadow:0 0 1em #fff; - box-shadow:0 0 1em #fff -} -.librevjs-default-skin .librevjs-menu-button ul li.librevjs-menu-title { - text-align:center; - text-transform:uppercase; - font-size:1em; - line-height:2em; - padding:0; - margin:0 0 .3em; - font-weight:700; - cursor:default -} -.librevjs-default-skin .librevjs-subtitles-button:before { - content:"\e00c" -} -.librevjs-default-skin .librevjs-captions-button:before { - content:"\e008" -} -.librevjs-default-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-default-skin .librevjs-captions-button:hover .librevjs-control-content:before { - -webkit-box-shadow:0 0 1em #fff; - -moz-box-shadow:0 0 1em #fff; - box-shadow:0 0 1em #fff -} -.cliplibre-js { - background-color:#000; - position:relative; - padding:0; - font-size:10px; - vertical-align:middle; - font-weight:400; - font-style:normal; - font-family:Arial,sans-serif; - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none -} -.cliplibre-js .librevjs-tech { - position:absolute; - top:0; - left:0; - width:100%; - height:100% -} -.cliplibre-js:-moz-full-screen { - position:absolute -} -body.librevjs-full-window { - padding:0; - margin:0; - height:100%; - overflow-y:auto -} -.cliplibre-js.librevjs-fullscreen { - position:fixed; - overflow:hidden; - z-index:1000; - left:0; - top:0; - bottom:0; - right:0; - width:100%!important; - height:100%!important; - position:absolute; -} -.cliplibre-js:-webkit-full-screen { - width:100%!important; - height:100%!important -} -.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { - cursor:none -} -.librevjs-poster { - background-repeat:no-repeat; - background-position:50% 50%; - background-size:contain; - cursor:pointer; - height:100%; - margin:0; - padding:0; - position:relative; - width:100% -} -.librevjs-poster img { - display:block; - margin:0 auto; - max-height:100%; - padding:0; - width:100% -} -.cliplibre-js.librevjs-using-native-controls .librevjs-poster { - display:none -} -.cliplibre-js .librevjs-text-track-display { - text-align:center; - position:absolute; - bottom:4em; - left:1em; - right:1em -} -.cliplibre-js .librevjs-text-track { - display:none; - font-size:1.5em; - text-align:center; - margin-bottom:.1em; - background-color:#000; - background-color:rgba(0,0,0,.6) -} -.cliplibre-js .librevjs-subtitles { - color:#fff -} -.cliplibre-js .librevjs-captions { - color:rgb(255, 237, 0); - background-color: rgba(2, 7, 11, 0.7); -} -.librevjs-tt-cue { - display:block -} -.librevjs-default-skin .librevjs-hidden { - display:none -} -.librevjs-lock-showing { - display:block!important; - opacity:1; - visibility:visible -} -ul li.librevjs-menu-title.librevjs-res-menu-title{ - color: #fff; -} -ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ - color: #fff; -} diff --git a/librevideojs/css/default/cliplibre-js.dev.min.css b/librevideojs/css/default/cliplibre-js.dev.min.css deleted file mode 100644 index d9b077c..0000000 --- a/librevideojs/css/default/cliplibre-js.dev.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -Video.js Default Styles (http://videojs.com) -Version 4.3.0 -Create your own skin at http://designer.videojs.com -*/.librevjs-default-skin{color:#ccc;background-color:inherit}@font-face{font-family:VideoJS;src:url('../../fonts/default/vjs.eot');src:url('../../fonts/default/vjs.eot?#iefix') format('embedded-opentype'),url('../../fonts/default/vjs.woff') format('woff'),url('../../fonts/default/vjs.ttf') format('truetype'),url('../../fonts/default/vjs.svg#icomoon') format('svg');fontº-weight:400;font-style:normal}.librevjs-default-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#333;background-color:rgba(51,51,51,.9)}.librevjs-default-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-default-skin .librevjs-slider-handle{position:absolute;left:0;top:0}.librevjs-default-skin .librevjs-slider-handle:before{content:"\e009";font-family:VideoJS;font-size:1em;line-height:1;text-align:center;text-shadow:0 0 1em #fff;position:absolute;top:0;left:0;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.librevjs-default-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3em;background-color:#07141e;background-color:rgba(7,20,30,.7)}.librevjs-default-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-default-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-default-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-default-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-default-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-default-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-default-skin .librevjs-control:before{font-family:VideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-default-skin .librevjs-control:focus:before,.librevjs-default-skin .librevjs-control:hover:before{text-shadow:0 0 1em #fff}.librevjs-default-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-default-skin .librevjs-play-control{width:5em;cursor:pointer}.librevjs-default-skin .librevjs-play-control:before{content:"\e001"}.librevjs-default-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-default-skin .librevjs-mute-control,.librevjs-default-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-default-skin .librevjs-mute-control:before,.librevjs-default-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-default-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-default-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-default-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-default-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-default-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-default-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-default-skin .librevjs-volume-control{width:5em;float:right}.librevjs-default-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-default-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-default-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;background:#66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat}.librevjs-default-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-default-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-default-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-default-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-default-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-default-skin .librevjs-progress-holder{height:100%}.librevjs-default-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-default-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-default-skin .librevjs-play-progress{background:#66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat}.librevjs-default-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-default-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-default-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-default-skin .librevjs-time-controls{font-size:1em;line-height:3em}.librevjs-default-skin .librevjs-current-time{float:left}.librevjs-default-skin .librevjs-duration{float:left}.librevjs-default-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-default-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-default-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-default-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-default-skin .librevjs-big-play-button{left:50%;top:50%;margin:-1.5em auto auto -2em;font-size:3em;display:block;z-index:2;position:absolute;width:4em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#07141e;background-color:rgba(7,20,30,.7);border:.1em solid #3b4249;-webkit-border-radius:.8em;-moz-border-radius:.8em;border-radius:.8em;-webkit-box-shadow:0 0 1em rgba(255,255,255,.25);-moz-box-shadow:0 0 1em rgba(255,255,255,.25);box-shadow:0 0 1em rgba(255,255,255,.25);-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-default-skin.librevjs-big-play-centered .librevjs-big-play-button{left:50%;margin-left:-2.1em;top:50%;margin-top:-1.4000000000000001em}.librevjs-default-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-default-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-default-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-default-skin:hover .librevjs-big-play-button,.librevjs-default-skin .librevjs-big-play-button:focus{outline:0;border-color:#fff;background-color:#505050;background-color:rgba(50,50,50,.75);-webkit-box-shadow:0 0 3em #fff;-moz-box-shadow:0 0 3em #fff;box-shadow:0 0 3em #fff;-webkit-transition:all 0s;-moz-transition:all 0s;-o-transition:all 0s;transition:all 0s}.librevjs-default-skin .librevjs-big-play-button:before{content:"\e001";font-family:VideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;font-size:4em;line-height:1;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;opacity:.75;-webkit-animation:spin 1.5s infinite linear;-moz-animation:spin 1.5s infinite linear;-o-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear}.librevjs-default-skin .librevjs-loading-spinner:before{content:"\e01e";font-family:VideoJS;position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.librevjs-default-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-default-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-default-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-default-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-default-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.librevjs-default-skin .librevjs-menu-button ul li.librevjs-selected{background-color:#000}.librevjs-default-skin .librevjs-menu-button ul li:focus,.librevjs-default-skin .librevjs-menu-button ul li:hover,.librevjs-default-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-default-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#111;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.librevjs-default-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-default-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-default-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-default-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-default-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.cliplibre-js{background-color:#000;position:relative;padding:0;font-size:10px;vertical-align:middle;font-weight:400;font-style:normal;font-family:Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cliplibre-js .librevjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.cliplibre-js:-moz-full-screen{position:absolute}body.librevjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.cliplibre-js.librevjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important;position:absolute}.cliplibre-js:-webkit-full-screen{width:100%!important;height:100%!important}.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive{cursor:none}.librevjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;cursor:pointer;height:100%;margin:0;padding:0;position:relative;width:100%}.librevjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.cliplibre-js.librevjs-using-native-controls .librevjs-poster{display:none}.cliplibre-js .librevjs-text-track-display{text-align:center;position:absolute;bottom:4em;left:1em;right:1em}.cliplibre-js .librevjs-text-track{display:none;font-size:1.5em;text-align:center;margin-bottom:.1em;background-color:#000;background-color:rgba(0,0,0,.6)}.cliplibre-js .librevjs-subtitles{color:#fff}.cliplibre-js .librevjs-captions{color:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-default-skin .librevjs-hidden{display:none}.librevjs-lock-showing{display:block!important;opacity:1;visibility:visible}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#fff}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#fff}
\ No newline at end of file diff --git a/librevideojs/css/libre-custom-skin/custom_skin.azul.css b/librevideojs/css/libre-custom-skin/custom_skin.azul.css deleted file mode 100644 index 4ddea4b..0000000 --- a/librevideojs/css/libre-custom-skin/custom_skin.azul.css +++ /dev/null @@ -1,591 +0,0 @@ -/*! -LibreVideoJS. custom Styles -Version 0.1 -*/ -.librevjs-custom-skin { - color:#ccc; - background-color: inherit; -} -@font-face { - font-family:VideoJS; - src: url('../../fonts/default/vjs.eot'); - src: url('../../fonts/default/vjs.eot?#iefix') format('embedded-opentype'), url('../../fonts/default/vjs.woff') format('woff'), url('../../fonts/default/vjs.ttf') format('truetype'), url('../../fonts/default/vjs.svg#icomoon') format('svg'); - font-weight:400; - font-style:normal -} -.librevjs-custom-skin .librevjs-slider { - /* Replace browser focus highlight with handle highlight */ - outline: 0; - position: relative; - cursor: pointer; - padding: 0; - /* background-color-with-alpha */ - background-color: #000000; - background-color: rgba(0, 0, 0, 0.5); -} -.librevjs-custom-skin .librevjs-slider:focus { - -webkit-box-shadow:0 0 2em #fff; - -moz-box-shadow:0 0 2em #fff; - box-shadow:0 0 2em #fff -} - -/*Eliminación de botón de barra de progreso*/ -.librevjs-custom-skin .librevjs-slider-handle { - width: 0; - height: 0; -} -.librevjs-custom-skin .librevjs-slider-handle:before { - width: 0; - height: 0; -} - -/* control bar - * */ -.librevjs-custom-skin .librevjs-control-bar { -/* Start hidden */ - display: none; - position: absolute; - /* Place control bar at the bottom of the player box/video. - If you want more margin below the control bar, add more height. */ - bottom: 0; - /* Use left/right to stretch to 100% width of player div */ - left: 0; - right: 0; - /* Height includes any margin you want above or below control items */ - height: 3.0em; - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); -} -.librevjs-custom-skin.librevjs-has-started .librevjs-control-bar { - display:block; - visibility:visible; - opacity:1; - -webkit-transition:visibility .1s,opacity .1s; - -moz-transition:visibility .1s,opacity .1s; - -o-transition:visibility .1s,opacity .1s; - transition:visibility .1s,opacity .1s -} -.librevjs-custom-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { - display:block; - visibility:hidden; - opacity:0; - -webkit-transition:visibility 1s,opacity 1s; - -moz-transition:visibility 1s,opacity 1s; - -o-transition:visibility 1s,opacity 1s; - transition:visibility 1s,opacity 1s -} -.librevjs-custom-skin.librevjs-controls-disabled .librevjs-control-bar { - display:none -} -.librevjs-custom-skin.librevjs-using-native-controls .librevjs-control-bar { - display:none -} -@media \0screen { - .librevjs-custom-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -.librevjs-custom-skin .librevjs-control { - outline:0; - position:relative; - float:left; - text-align:center; - margin:0; - padding:0; - height:3em; - width:4em -} -.librevjs-custom-skin .librevjs-control:before { - font-family:VideoJS; - font-size:1.5em; - line-height:2; - position:absolute; - top:0; - left:0; - width:100%; - height:100%; - text-align:center; - text-shadow:1px 1px 1px rgba(0,0,0,.5) -} -.librevjs-custom-skin .librevjs-control:focus:before,.librevjs-custom-skin .librevjs-control:hover:before { - text-shadow:0 0 1em #fff -} -.librevjs-custom-skin .librevjs-control:focus { -} -.librevjs-custom-skin .librevjs-control-text { - border:0; - clip:rect(0 0 0 0); - height:1px; - margin:-1px; - overflow:hidden; - padding:0; - position:absolute; - width:1px -} -.librevjs-custom-skin .librevjs-play-control { - width:5em; - cursor:pointer -} -.librevjs-custom-skin .librevjs-play-control:before { - content:"\e001" -} -.librevjs-custom-skin.librevjs-playing .librevjs-play-control:before { - content:"\e002" -} -.librevjs-custom-skin .librevjs-mute-control,.librevjs-custom-skin .librevjs-volume-menu-button { - cursor:pointer; - float:right -} -.librevjs-custom-skin .librevjs-mute-control:before,.librevjs-custom-skin .librevjs-volume-menu-button:before { - content:"\e006" -} -.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-0:before { - content:"\e003" -} -.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-1:before { - content:"\e004" -} -.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-2:before { - content:"\e005" -} -.librevjs-custom-skin .librevjs-volume-control { - width:5em; - float:right -} -.librevjs-custom-skin .librevjs-volume-bar { - width:5em; - height:.6em; - margin:1.1em auto 0 -} -.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu-content { - height:2.9em -} - -/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-custom-skin .librevjs-volume-level { - position: absolute; - top: 0; - left: 0; - height: 0.5em; - /* assuming volume starts at 1.0 */ - - width: 100%; - background: #005df3 url() -50% 0 repeat; -} -/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-custom-skin .librevjs-volume-bar .librevjs-volume-handle { - width:.5em; - height:.5em -} -.librevjs-custom-skin .librevjs-volume-handle:before { - font-size:.9em; - top:-.2em; - left:-.2em; - width:1em; - height:1em -} -.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { - width:6em; - left:-4em -} -.librevjs-custom-skin .librevjs-progress-control { - position:absolute; - left:0; - right:0; - width:auto; - font-size:.3em; - height:1em; - top:-1em; - -webkit-transition:all .4s; - -moz-transition:all .4s; - -o-transition:all .4s; - transition:all .4s -} -.librevjs-custom-skin:hover .librevjs-progress-control { - font-size:.9em; - -webkit-transition:all .2s; - -moz-transition:all .2s; - -o-transition:all .2s; - transition:all .2s -} -.librevjs-custom-skin .librevjs-progress-holder { - height:100% -} -.librevjs-custom-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-custom-skin .librevjs-progress-holder .librevjs-load-progress { - position:absolute; - display:block; - height:100%; - margin:0; - padding:0; - left:0; - top:0 -} - -/* Personalización de barra de progreso a color azul */ -.librevjs-custom-skin .librevjs-play-progress { - background: #005df3 url() -50% 0 repeat; -} -.librevjs-custom-skin .librevjs-load-progress { - background:#646464; - background:rgba(255,255,255,.4) -} -.librevjs-custom-skin .librevjs-seek-handle { - width:1.5em; - height:100% -} -.librevjs-custom-skin .librevjs-seek-handle:before { - padding-top:.1em -} -.librevjs-custom-skin .librevjs-time-controls { - font-size:1em; - line-height:3em -} -.librevjs-custom-skin .librevjs-current-time { - float:left -} -.librevjs-custom-skin .librevjs-duration { - float:left -} -.librevjs-custom-skin .librevjs-remaining-time { - display:none; - float:left -} -.librevjs-time-divider { - float:left; - line-height:3em -} -.librevjs-custom-skin .librevjs-fullscreen-control { - width:3.8em; - cursor:pointer; - float:right -} -.librevjs-custom-skin .librevjs-fullscreen-control:before { - content:"\e000" -} -.librevjs-custom-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content:"\e00b" -} - -/*Centrado del button Play y personalizado*/ -.librevjs-custom-skin .librevjs-big-play-button { - /* Center it horizontally */ - left: 50%; - margin-left: -1.4em; - /* Center it vertically */ - top: 50%; - margin-top: -1.3em; - font-size: 2em; - display: block; - z-index: 2; - position: absolute; - width: 2.8em; - height: 2.6em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - /* Need a slightly gray bg so it can be seen on black backgrounds */ - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); - border: 0 solid ; - /* border-radius */ - -webkit-border-radius: 0.4em; - -moz-border-radius: 0.4em; - border-radius: 0.4em; - /* transition */ - -webkit-transition: all 0.4s; - -moz-transition: all 0.4s; - -o-transition: all 0.4s; - transition: all 0.4s; -} -/* Optionally center */ -.librevjs-custom-skin.librevjs-big-play-centered .librevjs-big-play-button { - /* Center it horizontally */ - left: 50%; - margin-left: -1.4em; - /* Center it vertically */ - top: 50%; - margin-top: -1.3em; -} -/* Hide if controls are disabled */ -.librevjs-custom-skin.librevjs-controls-disabled .librevjs-big-play-button { - display: none; -} -/* Hide when video starts playing */ -.librevjs-custom-skin.librevjs-has-started .librevjs-big-play-button { - display: none; -} -/* Hide on mobile devices. Remove when we stop using native controls - by default on mobile */ -.librevjs-custom-skin.librevjs-using-native-controls .librevjs-big-play-button { - display: none; -} -.librevjs-custom-skin:hover .librevjs-big-play-button, -.librevjs-custom-skin .librevjs-big-play-button:focus { - outline: 0; - cursor: pointer; - /* IE8 needs a non-glow hover state */ - background-color: #005DF3; - color: #FFFFFF; -} -.librevjs-custom-skin .librevjs-big-play-button:before { - content: "\e001"; - font-family: VideoJS; - /* In order to center the play icon vertically we need to set the line height - to the same as the button height */ - - line-height: 2.6em; - text-shadow: 0.05em 0.05em 0.1em #000; - text-align: center /* Needed for IE8 */; - position: absolute; - left: 0; - width: 100%; - height: 100%; -} -.librevjs-error .librevjs-big-play-button { - display: none; -} -/*END PERSONALIZAR BIG PLAY BUTTON*/ -.librevjs-loading-spinner { - display:none; - position:absolute; - top:50%; - left:50%; - font-size:4em; - line-height:1; - width:1em; - height:1em; - margin-left:-.5em; - margin-top:-.5em; - opacity:.75; - -webkit-animation:spin 1.5s infinite linear; - -moz-animation:spin 1.5s infinite linear; - -o-animation:spin 1.5s infinite linear; - animation:spin 1.5s infinite linear -} -.librevjs-custom-skin .librevjs-loading-spinner:before { - content:"\e01e"; - font-family:VideoJS; - position:absolute; - top:0; - left:0; - width:1em; - height:1em; - text-align:center; - text-shadow:0 0 .1em #000 -} -@-moz-keyframes spin { - 0% { - -moz-transform:rotate(0deg) - } - 100% { - -moz-transform:rotate(359deg) - } -} -@-webkit-keyframes spin { - 0% { - -webkit-transform:rotate(0deg) - } - 100% { - -webkit-transform:rotate(359deg) - } -} -@-o-keyframes spin { - 0% { - -o-transform:rotate(0deg) - } - 100% { - -o-transform:rotate(359deg) - } -} -@keyframes spin { - 0% { - transform:rotate(0deg) - } - 100% { - transform:rotate(359deg) - } -} -.librevjs-custom-skin .librevjs-menu-button { - float:right; - cursor:pointer -} -.librevjs-custom-skin .librevjs-menu { - display:none; - position:absolute; - bottom:0; - left:0; - width:0; - height:0; - margin-bottom:3em; - border-left:2em solid transparent; - border-right:2em solid transparent; - border-top:1.55em solid #000; - border-top-color:rgba(7,40,50,.5) -} -.librevjs-custom-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { - display:block; - padding:0; - margin:0; - position:absolute; - width:10em; - bottom:1.5em; - max-height:15em; - overflow:auto; - left:-5em; - background-color:#07141e; - background-color:rgba(7,20,30,.7); - -webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); - -moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); - box-shadow:-.2em -.2em .3em rgba(255,255,255,.2) -} -.librevjs-custom-skin .librevjs-menu-button:hover .librevjs-menu { - display:block -} -.librevjs-custom-skin .librevjs-menu-button ul li { - list-style:none; - margin:0; - padding:.3em 0; - line-height:1.4em; - font-size:1.2em; - text-align:center; - text-transform:lowercase -} - -/*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected { - color: rgb(255, 255, 255); - background-color: rgb(0, 93, 243); -} -.librevjs-custom-skin .librevjs-menu-button ul li:focus,.librevjs-custom-skin .librevjs-menu-button ul li:hover,.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:hover { - outline: 0; - color: #ffffff; - background-color: #005DF3; -} -/*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-menu-title { - text-align:center; - text-transform:uppercase; - font-size:1em; - line-height:2em; - padding:0; - margin:0 0 .3em; - font-weight:700; - cursor:default -} -.librevjs-custom-skin .librevjs-subtitles-button:before { - content:"\e00c" -} -.librevjs-custom-skin .librevjs-captions-button:before { - content:"\e008" -} -.librevjs-custom-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-custom-skin .librevjs-captions-button:hover .librevjs-control-content:before { - -webkit-box-shadow:0 0 1em #fff; - -moz-box-shadow:0 0 1em #fff; - box-shadow:0 0 1em #fff -} -.cliplibre-js { - background-color:#000; - position:relative; - padding:0; - font-size:10px; - vertical-align:middle; - font-weight:400; - font-style:normal; - font-family:Arial,sans-serif; - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none -} -.cliplibre-js .librevjs-tech { - position:absolute; - top:0; - left:0; - width:100%; - height:100% -} -.cliplibre-js:-moz-full-screen { - position:absolute -} -body.librevjs-full-window { - padding:0; - margin:0; - height:100%; - overflow-y:auto -} -.cliplibre-js.librevjs-fullscreen { - position:fixed; - overflow:hidden; - z-index:1000; - left:0; - top:0; - bottom:0; - right:0; - width:100%!important; - height:100%!important; - position:absolute; -} -.cliplibre-js:-webkit-full-screen { - width:100%!important; - height:100%!important -} -.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { - cursor:none -} -.librevjs-poster { - background-repeat:no-repeat; - background-position:50% 50%; - background-size:contain; - cursor:pointer; - height:100%; - margin:0; - padding:0; - position:relative; - width:100% -} -.librevjs-poster img { - display:block; - margin:0 auto; - max-height:100%; - padding:0; - width:100% -} -.cliplibre-js.librevjs-using-native-controls .librevjs-poster { - display:none -} -.cliplibre-js .librevjs-text-track-display { - text-align:center; - position:absolute; - bottom:4em; - left:1em; - right:1em -} -.cliplibre-js .librevjs-text-track { - display:none; - font-size:1.5em; - text-align:center; - margin-bottom:.1em; - background-color:#000; - background-color:rgba(0,0,0,.6) -} -.cliplibre-js .librevjs-subtitles { - color:#fff -} -.cliplibre-js .librevjs-captions { - color:rgb(255, 237, 0); - background-color: rgba(2, 7, 11, 0.7); -} -.librevjs-tt-cue { - display:block -} -.librevjs-custom-skin .librevjs-hidden { - display:none -} -.librevjs-lock-showing { - display:block!important; - opacity:1; - visibility:visible -} diff --git a/librevideojs/css/libre-custom-skin/custom_skin.azul.min.css b/librevideojs/css/libre-custom-skin/custom_skin.azul.min.css deleted file mode 100644 index 0ec0332..0000000 --- a/librevideojs/css/libre-custom-skin/custom_skin.azul.min.css +++ /dev/null @@ -1,4 +0,0 @@ -/*! -LibreVideoJS. custom Styles -Version 0.1 -*/.librevjs-custom-skin{color:#ccc;background-color:inherit}@font-face{font-family:VideoJS;src:url('../../fonts/default/vjs.eot');src:url('../../fonts/default/vjs.eot?#iefix') format('embedded-opentype'),url('../../fonts/default/vjs.woff') format('woff'),url('../../fonts/default/vjs.ttf') format('truetype'),url('../../fonts/default/vjs.svg#icomoon') format('svg');font-weight:400;font-style:normal}.librevjs-custom-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-custom-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-custom-skin .librevjs-slider-handle{width:0;height:0}.librevjs-custom-skin .librevjs-slider-handle:before{width:0;height:0}.librevjs-custom-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-custom-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-custom-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-custom-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-custom-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-custom-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-custom-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-custom-skin .librevjs-control:before{font-family:VideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-custom-skin .librevjs-control:focus:before,.librevjs-custom-skin .librevjs-control:hover:before{text-shadow:0 0 1em #fff}.librevjs-custom-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-custom-skin .librevjs-play-control{width:5em;cursor:pointer}.librevjs-custom-skin .librevjs-play-control:before{content:"\e001"}.librevjs-custom-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-custom-skin .librevjs-mute-control,.librevjs-custom-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-custom-skin .librevjs-mute-control:before,.librevjs-custom-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-custom-skin .librevjs-volume-control{width:5em;float:right}.librevjs-custom-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-custom-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#005df3 url() -50% 0 repeat}.librevjs-custom-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-custom-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-custom-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-custom-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-custom-skin .librevjs-progress-holder{height:100%}.librevjs-custom-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-custom-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-custom-skin .librevjs-play-progress{background:#005df3 url() -50% 0 repeat}.librevjs-custom-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-custom-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-custom-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-custom-skin .librevjs-time-controls{font-size:1em;line-height:3em}.librevjs-custom-skin .librevjs-current-time{float:left}.librevjs-custom-skin .librevjs-duration{float:left}.librevjs-custom-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-custom-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-custom-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-custom-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-custom-skin .librevjs-big-play-button{left:50%;margin-left:-1.4em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:2.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-custom-skin.librevjs-big-play-centered .librevjs-big-play-button{left:50%;margin-left:-1.4em;top:50%;margin-top:-1.3em}.librevjs-custom-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-custom-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-custom-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-custom-skin:hover .librevjs-big-play-button,.librevjs-custom-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#005df3;color:#fff}.librevjs-custom-skin .librevjs-big-play-button:before{content:"\e001";font-family:VideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.librevjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;font-size:4em;line-height:1;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;opacity:.75;-webkit-animation:spin 1.5s infinite linear;-moz-animation:spin 1.5s infinite linear;-o-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear}.librevjs-custom-skin .librevjs-loading-spinner:before{content:"\e01e";font-family:VideoJS;position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.librevjs-custom-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-custom-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-custom-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-custom-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-custom-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#005df3}.librevjs-custom-skin .librevjs-menu-button ul li:focus,.librevjs-custom-skin .librevjs-menu-button ul li:hover,.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#005df3}.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-custom-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-custom-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-custom-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-custom-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.cliplibre-js{background-color:#000;position:relative;padding:0;font-size:10px;vertical-align:middle;font-weight:400;font-style:normal;font-family:Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cliplibre-js .librevjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.cliplibre-js:-moz-full-screen{position:absolute}body.librevjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.cliplibre-js.librevjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important;position:absolute}.cliplibre-js:-webkit-full-screen{width:100%!important;height:100%!important}.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive{cursor:none}.librevjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;cursor:pointer;height:100%;margin:0;padding:0;position:relative;width:100%}.librevjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.cliplibre-js.librevjs-using-native-controls .librevjs-poster{display:none}.cliplibre-js .librevjs-text-track-display{text-align:center;position:absolute;bottom:4em;left:1em;right:1em}.cliplibre-js .librevjs-text-track{display:none;font-size:1.5em;text-align:center;margin-bottom:.1em;background-color:#000;background-color:rgba(0,0,0,.6)}.cliplibre-js .librevjs-subtitles{color:#fff}.cliplibre-js .librevjs-captions{color:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-custom-skin .librevjs-hidden{display:none}.librevjs-lock-showing{display:block!important;opacity:1;visibility:visible}
\ No newline at end of file diff --git a/librevideojs/css/libre-custom-skin/custom_skin.rojo.css b/librevideojs/css/libre-custom-skin/custom_skin.rojo.css deleted file mode 100644 index 546ce3b..0000000 --- a/librevideojs/css/libre-custom-skin/custom_skin.rojo.css +++ /dev/null @@ -1,591 +0,0 @@ -/*! -LibreVideoJS. custom Styles -Version 0.1 -*/ -.librevjs-custom-skin { - color:#ccc; - background-color: inherit; -} -@font-face { - font-family:VideoJS; - src: url('../../fonts/default/vjs.eot'); - src: url('../../fonts/default/vjs.eot?#iefix') format('embedded-opentype'), url('../../fonts/default/vjs.woff') format('woff'), url('../../fonts/default/vjs.ttf') format('truetype'), url('../../fonts/default/vjs.svg#icomoon') format('svg'); - font-weight:400; - font-style:normal -} -.librevjs-custom-skin .librevjs-slider { - /* Replace browser focus highlight with handle highlight */ - outline: 0; - position: relative; - cursor: pointer; - padding: 0; - /* background-color-with-alpha */ - background-color: #000000; - background-color: rgba(0, 0, 0, 0.5); -} -.librevjs-custom-skin .librevjs-slider:focus { - -webkit-box-shadow:0 0 2em #fff; - -moz-box-shadow:0 0 2em #fff; - box-shadow:0 0 2em #fff -} - -/*Eliminación de botón de barra de progreso*/ -.librevjs-custom-skin .librevjs-slider-handle { - width: 0; - height: 0; -} -.librevjs-custom-skin .librevjs-slider-handle:before { - width: 0; - height: 0; -} - -/* control bar - * */ -.librevjs-custom-skin .librevjs-control-bar { -/* Start hidden */ - display: none; - position: absolute; - /* Place control bar at the bottom of the player box/video. - If you want more margin below the control bar, add more height. */ - bottom: 0; - /* Use left/right to stretch to 100% width of player div */ - left: 0; - right: 0; - /* Height includes any margin you want above or below control items */ - height: 3.0em; - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); -} -.librevjs-custom-skin.librevjs-has-started .librevjs-control-bar { - display:block; - visibility:visible; - opacity:1; - -webkit-transition:visibility .1s,opacity .1s; - -moz-transition:visibility .1s,opacity .1s; - -o-transition:visibility .1s,opacity .1s; - transition:visibility .1s,opacity .1s -} -.librevjs-custom-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { - display:block; - visibility:hidden; - opacity:0; - -webkit-transition:visibility 1s,opacity 1s; - -moz-transition:visibility 1s,opacity 1s; - -o-transition:visibility 1s,opacity 1s; - transition:visibility 1s,opacity 1s -} -.librevjs-custom-skin.librevjs-controls-disabled .librevjs-control-bar { - display:none -} -.librevjs-custom-skin.librevjs-using-native-controls .librevjs-control-bar { - display:none -} -@media \0screen { - .librevjs-custom-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -.librevjs-custom-skin .librevjs-control { - outline:0; - position:relative; - float:left; - text-align:center; - margin:0; - padding:0; - height:3em; - width:4em -} -.librevjs-custom-skin .librevjs-control:before { - font-family:VideoJS; - font-size:1.5em; - line-height:2; - position:absolute; - top:0; - left:0; - width:100%; - height:100%; - text-align:center; - text-shadow:1px 1px 1px rgba(0,0,0,.5) -} -.librevjs-custom-skin .librevjs-control:focus:before,.librevjs-custom-skin .librevjs-control:hover:before { - text-shadow:0 0 1em #fff -} -.librevjs-custom-skin .librevjs-control:focus { -} -.librevjs-custom-skin .librevjs-control-text { - border:0; - clip:rect(0 0 0 0); - height:1px; - margin:-1px; - overflow:hidden; - padding:0; - position:absolute; - width:1px -} -.librevjs-custom-skin .librevjs-play-control { - width:5em; - cursor:pointer -} -.librevjs-custom-skin .librevjs-play-control:before { - content:"\e001" -} -.librevjs-custom-skin.librevjs-playing .librevjs-play-control:before { - content:"\e002" -} -.librevjs-custom-skin .librevjs-mute-control,.librevjs-custom-skin .librevjs-volume-menu-button { - cursor:pointer; - float:right -} -.librevjs-custom-skin .librevjs-mute-control:before,.librevjs-custom-skin .librevjs-volume-menu-button:before { - content:"\e006" -} -.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-0:before { - content:"\e003" -} -.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-1:before { - content:"\e004" -} -.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-2:before { - content:"\e005" -} -.librevjs-custom-skin .librevjs-volume-control { - width:5em; - float:right -} -.librevjs-custom-skin .librevjs-volume-bar { - width:5em; - height:.6em; - margin:1.1em auto 0 -} -.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu-content { - height:2.9em -} - -/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-custom-skin .librevjs-volume-level { - position: absolute; - top: 0; - left: 0; - height: 0.5em; - /* assuming volume starts at 1.0 */ - - width: 100%; - background: #f44336 url() -50% 0 repeat; -} -/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-custom-skin .librevjs-volume-bar .librevjs-volume-handle { - width:.5em; - height:.5em -} -.librevjs-custom-skin .librevjs-volume-handle:before { - font-size:.9em; - top:-.2em; - left:-.2em; - width:1em; - height:1em -} -.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { - width:6em; - left:-4em -} -.librevjs-custom-skin .librevjs-progress-control { - position:absolute; - left:0; - right:0; - width:auto; - font-size:.3em; - height:1em; - top:-1em; - -webkit-transition:all .4s; - -moz-transition:all .4s; - -o-transition:all .4s; - transition:all .4s -} -.librevjs-custom-skin:hover .librevjs-progress-control { - font-size:.9em; - -webkit-transition:all .2s; - -moz-transition:all .2s; - -o-transition:all .2s; - transition:all .2s -} -.librevjs-custom-skin .librevjs-progress-holder { - height:100% -} -.librevjs-custom-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-custom-skin .librevjs-progress-holder .librevjs-load-progress { - position:absolute; - display:block; - height:100%; - margin:0; - padding:0; - left:0; - top:0 -} - -/* Personalización de barra de progreso a color rojo */ -.librevjs-custom-skin .librevjs-play-progress { - background: #f44336 url() -50% 0 repeat; -} -.librevjs-custom-skin .librevjs-load-progress { - background:#646464; - background:rgba(255,255,255,.4) -} -.librevjs-custom-skin .librevjs-seek-handle { - width:1.5em; - height:100% -} -.librevjs-custom-skin .librevjs-seek-handle:before { - padding-top:.1em -} -.librevjs-custom-skin .librevjs-time-controls { - font-size:1em; - line-height:3em -} -.librevjs-custom-skin .librevjs-current-time { - float:left -} -.librevjs-custom-skin .librevjs-duration { - float:left -} -.librevjs-custom-skin .librevjs-remaining-time { - display:none; - float:left -} -.librevjs-time-divider { - float:left; - line-height:3em -} -.librevjs-custom-skin .librevjs-fullscreen-control { - width:3.8em; - cursor:pointer; - float:right -} -.librevjs-custom-skin .librevjs-fullscreen-control:before { - content:"\e000" -} -.librevjs-custom-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content:"\e00b" -} - -/*Centrado del button Play y personalizado*/ -.librevjs-custom-skin .librevjs-big-play-button { - /* Center it horizontally */ - left: 50%; - margin-left: -1.4em; - /* Center it vertically */ - top: 50%; - margin-top: -1.3em; - font-size: 2em; - display: block; - z-index: 2; - position: absolute; - width: 2.8em; - height: 2.6em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - /* Need a slightly gray bg so it can be seen on black backgrounds */ - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); - border: 0 solid ; - /* border-radius */ - -webkit-border-radius: 0.4em; - -moz-border-radius: 0.4em; - border-radius: 0.4em; - /* transition */ - -webkit-transition: all 0.4s; - -moz-transition: all 0.4s; - -o-transition: all 0.4s; - transition: all 0.4s; -} -/* Optionally center */ -.librevjs-custom-skin.librevjs-big-play-centered .librevjs-big-play-button { - /* Center it horizontally */ - left: 50%; - margin-left: -1.4em; - /* Center it vertically */ - top: 50%; - margin-top: -1.3em; -} -/* Hide if controls are disabled */ -.librevjs-custom-skin.librevjs-controls-disabled .librevjs-big-play-button { - display: none; -} -/* Hide when video starts playing */ -.librevjs-custom-skin.librevjs-has-started .librevjs-big-play-button { - display: none; -} -/* Hide on mobile devices. Remove when we stop using native controls - by default on mobile */ -.librevjs-custom-skin.librevjs-using-native-controls .librevjs-big-play-button { - display: none; -} -.librevjs-custom-skin:hover .librevjs-big-play-button, -.librevjs-custom-skin .librevjs-big-play-button:focus { - outline: 0; - cursor: pointer; - /* IE8 needs a non-glow hover state */ - background-color: #f44336; /*color del boton play al hacer focus*/ - color: #FFFFFF; -} -.librevjs-custom-skin .librevjs-big-play-button:before { - content: "\e001"; - font-family: VideoJS; - /* In order to center the play icon vertically we need to set the line height - to the same as the button height */ - - line-height: 2.6em; - text-shadow: 0.05em 0.05em 0.1em #000; - text-align: center /* Needed for IE8 */; - position: absolute; - left: 0; - width: 100%; - height: 100%; -} -.librevjs-error .librevjs-big-play-button { - display: none; -} -/*END PERSONALIZAR BIG PLAY BUTTON*/ -.librevjs-loading-spinner { - display:none; - position:absolute; - top:50%; - left:50%; - font-size:4em; - line-height:1; - width:1em; - height:1em; - margin-left:-.5em; - margin-top:-.5em; - opacity:.75; - -webkit-animation:spin 1.5s infinite linear; - -moz-animation:spin 1.5s infinite linear; - -o-animation:spin 1.5s infinite linear; - animation:spin 1.5s infinite linear -} -.librevjs-custom-skin .librevjs-loading-spinner:before { - content:"\e01e"; - font-family:VideoJS; - position:absolute; - top:0; - left:0; - width:1em; - height:1em; - text-align:center; - text-shadow:0 0 .1em #000 -} -@-moz-keyframes spin { - 0% { - -moz-transform:rotate(0deg) - } - 100% { - -moz-transform:rotate(359deg) - } -} -@-webkit-keyframes spin { - 0% { - -webkit-transform:rotate(0deg) - } - 100% { - -webkit-transform:rotate(359deg) - } -} -@-o-keyframes spin { - 0% { - -o-transform:rotate(0deg) - } - 100% { - -o-transform:rotate(359deg) - } -} -@keyframes spin { - 0% { - transform:rotate(0deg) - } - 100% { - transform:rotate(359deg) - } -} -.librevjs-custom-skin .librevjs-menu-button { - float:right; - cursor:pointer -} -.librevjs-custom-skin .librevjs-menu { - display:none; - position:absolute; - bottom:0; - left:0; - width:0; - height:0; - margin-bottom:3em; - border-left:2em solid transparent; - border-right:2em solid transparent; - border-top:1.55em solid #000; - border-top-color:rgba(7,40,50,.5) -} -.librevjs-custom-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { - display:block; - padding:0; - margin:0; - position:absolute; - width:10em; - bottom:1.5em; - max-height:15em; - overflow:auto; - left:-5em; - background-color:#07141e; - background-color:rgba(7,20,30,.7); - -webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); - -moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); - box-shadow:-.2em -.2em .3em rgba(255,255,255,.2) -} -.librevjs-custom-skin .librevjs-menu-button:hover .librevjs-menu { - display:block -} -.librevjs-custom-skin .librevjs-menu-button ul li { - list-style:none; - margin:0; - padding:.3em 0; - line-height:1.4em; - font-size:1.2em; - text-align:center; - text-transform:lowercase -} - -/*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected { - color: rgb(255, 255, 255); - background-color: rgb(244, 67, 54); -} -.librevjs-custom-skin .librevjs-menu-button ul li:focus,.librevjs-custom-skin .librevjs-menu-button ul li:hover,.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:hover { - outline: 0; - color: #ffffff; - background-color: #f44336; -} -/*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-menu-title { - text-align:center; - text-transform:uppercase; - font-size:1em; - line-height:2em; - padding:0; - margin:0 0 .3em; - font-weight:700; - cursor:default -} -.librevjs-custom-skin .librevjs-subtitles-button:before { - content:"\e00c" -} -.librevjs-custom-skin .librevjs-captions-button:before { - content:"\e008" -} -.librevjs-custom-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-custom-skin .librevjs-captions-button:hover .librevjs-control-content:before { - -webkit-box-shadow:0 0 1em #fff; - -moz-box-shadow:0 0 1em #fff; - box-shadow:0 0 1em #fff -} -.cliplibre-js { - background-color:#000; - position:relative; - padding:0; - font-size:10px; - vertical-align:middle; - font-weight:400; - font-style:normal; - font-family:Arial,sans-serif; - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none -} -.cliplibre-js .librevjs-tech { - position:absolute; - top:0; - left:0; - width:100%; - height:100% -} -.cliplibre-js:-moz-full-screen { - position:absolute -} -body.librevjs-full-window { - padding:0; - margin:0; - height:100%; - overflow-y:auto -} -.cliplibre-js.librevjs-fullscreen { - position:fixed; - overflow:hidden; - z-index:1000; - left:0; - top:0; - bottom:0; - right:0; - width:100%!important; - height:100%!important; - position:absolute; -} -.cliplibre-js:-webkit-full-screen { - width:100%!important; - height:100%!important -} -.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { - cursor:none -} -.librevjs-poster { - background-repeat:no-repeat; - background-position:50% 50%; - background-size:contain; - cursor:pointer; - height:100%; - margin:0; - padding:0; - position:relative; - width:100% -} -.librevjs-poster img { - display:block; - margin:0 auto; - max-height:100%; - padding:0; - width:100% -} -.cliplibre-js.librevjs-using-native-controls .librevjs-poster { - display:none -} -.cliplibre-js .librevjs-text-track-display { - text-align:center; - position:absolute; - bottom:4em; - left:1em; - right:1em -} -.cliplibre-js .librevjs-text-track { - display:none; - font-size:1.5em; - text-align:center; - margin-bottom:.1em; - background-color:#000; - background-color:rgba(0,0,0,.6) -} -.cliplibre-js .librevjs-subtitles { - color:#fff -} -.cliplibre-js .librevjs-captions { - color:rgb(255, 237, 0); - background-color: rgba(2, 7, 11, 0.7); -} -.librevjs-tt-cue { - display:block -} -.librevjs-custom-skin .librevjs-hidden { - display:none -} -.librevjs-lock-showing { - display:block!important; - opacity:1; - visibility:visible -} diff --git a/librevideojs/css/libre-custom-skin/custom_skin.rojo.min.css b/librevideojs/css/libre-custom-skin/custom_skin.rojo.min.css deleted file mode 100644 index 3909d87..0000000 --- a/librevideojs/css/libre-custom-skin/custom_skin.rojo.min.css +++ /dev/null @@ -1,4 +0,0 @@ -/*! -LibreVideoJS. custom Styles -Version 0.1 -*/.librevjs-custom-skin{color:#ccc;background-color:inherit}@font-face{font-family:VideoJS;src:url('../../fonts/default/vjs.eot');src:url('../../fonts/default/vjs.eot?#iefix') format('embedded-opentype'),url('../../fonts/default/vjs.woff') format('woff'),url('../../fonts/default/vjs.ttf') format('truetype'),url('../../fonts/default/vjs.svg#icomoon') format('svg');font-weight:400;font-style:normal}.librevjs-custom-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-custom-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-custom-skin .librevjs-slider-handle{width:0;height:0}.librevjs-custom-skin .librevjs-slider-handle:before{width:0;height:0}.librevjs-custom-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-custom-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-custom-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-custom-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-custom-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-custom-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-custom-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-custom-skin .librevjs-control:before{font-family:VideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-custom-skin .librevjs-control:focus:before,.librevjs-custom-skin .librevjs-control:hover:before{text-shadow:0 0 1em #fff}.librevjs-custom-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-custom-skin .librevjs-play-control{width:5em;cursor:pointer}.librevjs-custom-skin .librevjs-play-control:before{content:"\e001"}.librevjs-custom-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-custom-skin .librevjs-mute-control,.librevjs-custom-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-custom-skin .librevjs-mute-control:before,.librevjs-custom-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-custom-skin .librevjs-volume-control{width:5em;float:right}.librevjs-custom-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-custom-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#f44336 url() -50% 0 repeat}.librevjs-custom-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-custom-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-custom-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-custom-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-custom-skin .librevjs-progress-holder{height:100%}.librevjs-custom-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-custom-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-custom-skin .librevjs-play-progress{background:#f44336 url() -50% 0 repeat}.librevjs-custom-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-custom-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-custom-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-custom-skin .librevjs-time-controls{font-size:1em;line-height:3em}.librevjs-custom-skin .librevjs-current-time{float:left}.librevjs-custom-skin .librevjs-duration{float:left}.librevjs-custom-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-custom-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-custom-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-custom-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-custom-skin .librevjs-big-play-button{left:50%;margin-left:-1.4em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:2.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-custom-skin.librevjs-big-play-centered .librevjs-big-play-button{left:50%;margin-left:-1.4em;top:50%;margin-top:-1.3em}.librevjs-custom-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-custom-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-custom-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-custom-skin:hover .librevjs-big-play-button,.librevjs-custom-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#f44336;color:#fff}.librevjs-custom-skin .librevjs-big-play-button:before{content:"\e001";font-family:VideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.librevjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;font-size:4em;line-height:1;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;opacity:.75;-webkit-animation:spin 1.5s infinite linear;-moz-animation:spin 1.5s infinite linear;-o-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear}.librevjs-custom-skin .librevjs-loading-spinner:before{content:"\e01e";font-family:VideoJS;position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.librevjs-custom-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-custom-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-custom-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-custom-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-custom-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#f44336}.librevjs-custom-skin .librevjs-menu-button ul li:focus,.librevjs-custom-skin .librevjs-menu-button ul li:hover,.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#f44336}.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-custom-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-custom-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-custom-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-custom-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.cliplibre-js{background-color:#000;position:relative;padding:0;font-size:10px;vertical-align:middle;font-weight:400;font-style:normal;font-family:Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cliplibre-js .librevjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.cliplibre-js:-moz-full-screen{position:absolute}body.librevjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.cliplibre-js.librevjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important;position:absolute}.cliplibre-js:-webkit-full-screen{width:100%!important;height:100%!important}.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive{cursor:none}.librevjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;cursor:pointer;height:100%;margin:0;padding:0;position:relative;width:100%}.librevjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.cliplibre-js.librevjs-using-native-controls .librevjs-poster{display:none}.cliplibre-js .librevjs-text-track-display{text-align:center;position:absolute;bottom:4em;left:1em;right:1em}.cliplibre-js .librevjs-text-track{display:none;font-size:1.5em;text-align:center;margin-bottom:.1em;background-color:#000;background-color:rgba(0,0,0,.6)}.cliplibre-js .librevjs-subtitles{color:#fff}.cliplibre-js .librevjs-captions{color:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-custom-skin .librevjs-hidden{display:none}.librevjs-lock-showing{display:block!important;opacity:1;visibility:visible}
\ No newline at end of file diff --git a/librevideojs/css/libre-custom-skin/custom_skin.teal.css b/librevideojs/css/libre-custom-skin/custom_skin.teal.css deleted file mode 100644 index 8cc2f12..0000000 --- a/librevideojs/css/libre-custom-skin/custom_skin.teal.css +++ /dev/null @@ -1,591 +0,0 @@ -/*! -LibreVideoJS. custom Styles -Version 0.1 -*/ -.librevjs-custom-skin { - color:#ccc; - background-color: inherit; -} -@font-face { - font-family:VideoJS; - src: url('../../fonts/default/vjs.eot'); - src: url('../../fonts/default/vjs.eot?#iefix') format('embedded-opentype'), url('../../fonts/default/vjs.woff') format('woff'), url('../../fonts/default/vjs.ttf') format('truetype'), url('../../fonts/default/vjs.svg#icomoon') format('svg'); - font-weight:400; - font-style:normal -} -.librevjs-custom-skin .librevjs-slider { - /* Replace browser focus highlight with handle highlight */ - outline: 0; - position: relative; - cursor: pointer; - padding: 0; - /* background-color-with-alpha */ - background-color: #000000; - background-color: rgba(0, 0, 0, 0.5); -} -.librevjs-custom-skin .librevjs-slider:focus { - -webkit-box-shadow:0 0 2em #fff; - -moz-box-shadow:0 0 2em #fff; - box-shadow:0 0 2em #fff -} - -/*Eliminación de botón de barra de progreso*/ -.librevjs-custom-skin .librevjs-slider-handle { - width: 0; - height: 0; -} -.librevjs-custom-skin .librevjs-slider-handle:before { - width: 0; - height: 0; -} - -/* control bar - * */ -.librevjs-custom-skin .librevjs-control-bar { -/* Start hidden */ - display: none; - position: absolute; - /* Place control bar at the bottom of the player box/video. - If you want more margin below the control bar, add more height. */ - bottom: 0; - /* Use left/right to stretch to 100% width of player div */ - left: 0; - right: 0; - /* Height includes any margin you want above or below control items */ - height: 3.0em; - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); -} -.librevjs-custom-skin.librevjs-has-started .librevjs-control-bar { - display:block; - visibility:visible; - opacity:1; - -webkit-transition:visibility .1s,opacity .1s; - -moz-transition:visibility .1s,opacity .1s; - -o-transition:visibility .1s,opacity .1s; - transition:visibility .1s,opacity .1s -} -.librevjs-custom-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { - display:block; - visibility:hidden; - opacity:0; - -webkit-transition:visibility 1s,opacity 1s; - -moz-transition:visibility 1s,opacity 1s; - -o-transition:visibility 1s,opacity 1s; - transition:visibility 1s,opacity 1s -} -.librevjs-custom-skin.librevjs-controls-disabled .librevjs-control-bar { - display:none -} -.librevjs-custom-skin.librevjs-using-native-controls .librevjs-control-bar { - display:none -} -@media \0screen { - .librevjs-custom-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } -} -.librevjs-custom-skin .librevjs-control { - outline:0; - position:relative; - float:left; - text-align:center; - margin:0; - padding:0; - height:3em; - width:4em -} -.librevjs-custom-skin .librevjs-control:before { - font-family:VideoJS; - font-size:1.5em; - line-height:2; - position:absolute; - top:0; - left:0; - width:100%; - height:100%; - text-align:center; - text-shadow:1px 1px 1px rgba(0,0,0,.5) -} -.librevjs-custom-skin .librevjs-control:focus:before,.librevjs-custom-skin .librevjs-control:hover:before { - text-shadow:0 0 1em #fff -} -.librevjs-custom-skin .librevjs-control:focus { -} -.librevjs-custom-skin .librevjs-control-text { - border:0; - clip:rect(0 0 0 0); - height:1px; - margin:-1px; - overflow:hidden; - padding:0; - position:absolute; - width:1px -} -.librevjs-custom-skin .librevjs-play-control { - width:5em; - cursor:pointer -} -.librevjs-custom-skin .librevjs-play-control:before { - content:"\e001" -} -.librevjs-custom-skin.librevjs-playing .librevjs-play-control:before { - content:"\e002" -} -.librevjs-custom-skin .librevjs-mute-control,.librevjs-custom-skin .librevjs-volume-menu-button { - cursor:pointer; - float:right -} -.librevjs-custom-skin .librevjs-mute-control:before,.librevjs-custom-skin .librevjs-volume-menu-button:before { - content:"\e006" -} -.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-0:before { - content:"\e003" -} -.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-1:before { - content:"\e004" -} -.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-2:before { - content:"\e005" -} -.librevjs-custom-skin .librevjs-volume-control { - width:5em; - float:right -} -.librevjs-custom-skin .librevjs-volume-bar { - width:5em; - height:.6em; - margin:1.1em auto 0 -} -.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu-content { - height:2.9em -} - -/*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-custom-skin .librevjs-volume-level { - position: absolute; - top: 0; - left: 0; - height: 0.5em; - /* assuming volume starts at 1.0 */ - - width: 100%; - background: #1de9b6 url() -50% 0 repeat; -} -/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-custom-skin .librevjs-volume-bar .librevjs-volume-handle { - width:.5em; - height:.5em -} -.librevjs-custom-skin .librevjs-volume-handle:before { - font-size:.9em; - top:-.2em; - left:-.2em; - width:1em; - height:1em -} -.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { - width:6em; - left:-4em -} -.librevjs-custom-skin .librevjs-progress-control { - position:absolute; - left:0; - right:0; - width:auto; - font-size:.3em; - height:1em; - top:-1em; - -webkit-transition:all .4s; - -moz-transition:all .4s; - -o-transition:all .4s; - transition:all .4s -} -.librevjs-custom-skin:hover .librevjs-progress-control { - font-size:.9em; - -webkit-transition:all .2s; - -moz-transition:all .2s; - -o-transition:all .2s; - transition:all .2s -} -.librevjs-custom-skin .librevjs-progress-holder { - height:100% -} -.librevjs-custom-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-custom-skin .librevjs-progress-holder .librevjs-load-progress { - position:absolute; - display:block; - height:100%; - margin:0; - padding:0; - left:0; - top:0 -} - -/* Personalización de barra de progreso a color azul */ -.librevjs-custom-skin .librevjs-play-progress { - background: #1de9b6 url() -50% 0 repeat; -} -.librevjs-custom-skin .librevjs-load-progress { - background:#646464; - background:rgba(255,255,255,.4) -} -.librevjs-custom-skin .librevjs-seek-handle { - width:1.5em; - height:100% -} -.librevjs-custom-skin .librevjs-seek-handle:before { - padding-top:.1em -} -.librevjs-custom-skin .librevjs-time-controls { - font-size:1em; - line-height:3em -} -.librevjs-custom-skin .librevjs-current-time { - float:left -} -.librevjs-custom-skin .librevjs-duration { - float:left -} -.librevjs-custom-skin .librevjs-remaining-time { - display:none; - float:left -} -.librevjs-time-divider { - float:left; - line-height:3em -} -.librevjs-custom-skin .librevjs-fullscreen-control { - width:3.8em; - cursor:pointer; - float:right -} -.librevjs-custom-skin .librevjs-fullscreen-control:before { - content:"\e000" -} -.librevjs-custom-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content:"\e00b" -} - -/*Centrado del button Play y personalizado*/ -.librevjs-custom-skin .librevjs-big-play-button { - /* Center it horizontally */ - left: 50%; - margin-left: -1.4em; - /* Center it vertically */ - top: 50%; - margin-top: -1.3em; - font-size: 2em; - display: block; - z-index: 2; - position: absolute; - width: 2.8em; - height: 2.6em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - /* Need a slightly gray bg so it can be seen on black backgrounds */ - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); - border: 0 solid ; - /* border-radius */ - -webkit-border-radius: 0.4em; - -moz-border-radius: 0.4em; - border-radius: 0.4em; - /* transition */ - -webkit-transition: all 0.4s; - -moz-transition: all 0.4s; - -o-transition: all 0.4s; - transition: all 0.4s; -} -/* Optionally center */ -.librevjs-custom-skin.librevjs-big-play-centered .librevjs-big-play-button { - /* Center it horizontally */ - left: 50%; - margin-left: -1.4em; - /* Center it vertically */ - top: 50%; - margin-top: -1.3em; -} -/* Hide if controls are disabled */ -.librevjs-custom-skin.librevjs-controls-disabled .librevjs-big-play-button { - display: none; -} -/* Hide when video starts playing */ -.librevjs-custom-skin.librevjs-has-started .librevjs-big-play-button { - display: none; -} -/* Hide on mobile devices. Remove when we stop using native controls - by default on mobile */ -.librevjs-custom-skin.librevjs-using-native-controls .librevjs-big-play-button { - display: none; -} -.librevjs-custom-skin:hover .librevjs-big-play-button, -.librevjs-custom-skin .librevjs-big-play-button:focus { - outline: 0; - cursor: pointer; - /* IE8 needs a non-glow hover state */ - background-color: #1de9b6; /*color del boton play al hacer focus*/ - color: #FFFFFF; -} -.librevjs-custom-skin .librevjs-big-play-button:before { - content: "\e001"; - font-family: VideoJS; - /* In order to center the play icon vertically we need to set the line height - to the same as the button height */ - - line-height: 2.6em; - text-shadow: 0.05em 0.05em 0.1em #000; - text-align: center /* Needed for IE8 */; - position: absolute; - left: 0; - width: 100%; - height: 100%; -} -.librevjs-error .librevjs-big-play-button { - display: none; -} -/*END PERSONALIZAR BIG PLAY BUTTON*/ -.librevjs-loading-spinner { - display:none; - position:absolute; - top:50%; - left:50%; - font-size:4em; - line-height:1; - width:1em; - height:1em; - margin-left:-.5em; - margin-top:-.5em; - opacity:.75; - -webkit-animation:spin 1.5s infinite linear; - -moz-animation:spin 1.5s infinite linear; - -o-animation:spin 1.5s infinite linear; - animation:spin 1.5s infinite linear -} -.librevjs-custom-skin .librevjs-loading-spinner:before { - content:"\e01e"; - font-family:VideoJS; - position:absolute; - top:0; - left:0; - width:1em; - height:1em; - text-align:center; - text-shadow:0 0 .1em #000 -} -@-moz-keyframes spin { - 0% { - -moz-transform:rotate(0deg) - } - 100% { - -moz-transform:rotate(359deg) - } -} -@-webkit-keyframes spin { - 0% { - -webkit-transform:rotate(0deg) - } - 100% { - -webkit-transform:rotate(359deg) - } -} -@-o-keyframes spin { - 0% { - -o-transform:rotate(0deg) - } - 100% { - -o-transform:rotate(359deg) - } -} -@keyframes spin { - 0% { - transform:rotate(0deg) - } - 100% { - transform:rotate(359deg) - } -} -.librevjs-custom-skin .librevjs-menu-button { - float:right; - cursor:pointer -} -.librevjs-custom-skin .librevjs-menu { - display:none; - position:absolute; - bottom:0; - left:0; - width:0; - height:0; - margin-bottom:3em; - border-left:2em solid transparent; - border-right:2em solid transparent; - border-top:1.55em solid #000; - border-top-color:rgba(7,40,50,.5) -} -.librevjs-custom-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { - display:block; - padding:0; - margin:0; - position:absolute; - width:10em; - bottom:1.5em; - max-height:15em; - overflow:auto; - left:-5em; - background-color:#07141e; - background-color:rgba(7,20,30,.7); - -webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); - -moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); - box-shadow:-.2em -.2em .3em rgba(255,255,255,.2) -} -.librevjs-custom-skin .librevjs-menu-button:hover .librevjs-menu { - display:block -} -.librevjs-custom-skin .librevjs-menu-button ul li { - list-style:none; - margin:0; - padding:.3em 0; - line-height:1.4em; - font-size:1.2em; - text-align:center; - text-transform:lowercase -} - -/*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected { - color: rgb(1, 56, 47); - background-color: rgb(29, 233, 182); -} -.librevjs-custom-skin .librevjs-menu-button ul li:focus,.librevjs-custom-skin .librevjs-menu-button ul li:hover,.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:hover { - outline: 0; - color: #004d40; - background-color: #1de9b6; -} -/*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-menu-title { - text-align:center; - text-transform:uppercase; - font-size:1em; - line-height:2em; - padding:0; - margin:0 0 .3em; - font-weight:700; - cursor:default -} -.librevjs-custom-skin .librevjs-subtitles-button:before { - content:"\e00c" -} -.librevjs-custom-skin .librevjs-captions-button:before { - content:"\e008" -} -.librevjs-custom-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-custom-skin .librevjs-captions-button:hover .librevjs-control-content:before { - -webkit-box-shadow:0 0 1em #fff; - -moz-box-shadow:0 0 1em #fff; - box-shadow:0 0 1em #fff -} -.cliplibre-js { - background-color:#000; - position:relative; - padding:0; - font-size:10px; - vertical-align:middle; - font-weight:400; - font-style:normal; - font-family:Arial,sans-serif; - -webkit-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none -} -.cliplibre-js .librevjs-tech { - position:absolute; - top:0; - left:0; - width:100%; - height:100% -} -.cliplibre-js:-moz-full-screen { - position:absolute -} -body.librevjs-full-window { - padding:0; - margin:0; - height:100%; - overflow-y:auto -} -.cliplibre-js.librevjs-fullscreen { - position:fixed; - overflow:hidden; - z-index:1000; - left:0; - top:0; - bottom:0; - right:0; - width:100%!important; - height:100%!important; - position:absolute; -} -.cliplibre-js:-webkit-full-screen { - width:100%!important; - height:100%!important -} -.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { - cursor:none -} -.librevjs-poster { - background-repeat:no-repeat; - background-position:50% 50%; - background-size:contain; - cursor:pointer; - height:100%; - margin:0; - padding:0; - position:relative; - width:100% -} -.librevjs-poster img { - display:block; - margin:0 auto; - max-height:100%; - padding:0; - width:100% -} -.cliplibre-js.librevjs-using-native-controls .librevjs-poster { - display:none -} -.cliplibre-js .librevjs-text-track-display { - text-align:center; - position:absolute; - bottom:4em; - left:1em; - right:1em -} -.cliplibre-js .librevjs-text-track { - display:none; - font-size:1.5em; - text-align:center; - margin-bottom:.1em; - background-color:#000; - background-color:rgba(0,0,0,.6) -} -.cliplibre-js .librevjs-subtitles { - color:#fff -} -.cliplibre-js .librevjs-captions { - color:rgb(255, 237, 0); - background-color: rgba(2, 7, 11, 0.7); -} -.librevjs-tt-cue { - display:block -} -.librevjs-custom-skin .librevjs-hidden { - display:none -} -.librevjs-lock-showing { - display:block!important; - opacity:1; - visibility:visible -} diff --git a/librevideojs/css/libre-custom-skin/custom_skin.teal.min.css b/librevideojs/css/libre-custom-skin/custom_skin.teal.min.css deleted file mode 100644 index 860d82e..0000000 --- a/librevideojs/css/libre-custom-skin/custom_skin.teal.min.css +++ /dev/null @@ -1,4 +0,0 @@ -/*! -LibreVideoJS. custom Styles -Version 0.1 -*/.librevjs-custom-skin{color:#ccc;background-color:inherit}@font-face{font-family:VideoJS;src:url('../../fonts/default/vjs.eot');src:url('../../fonts/default/vjs.eot?#iefix') format('embedded-opentype'),url('../../fonts/default/vjs.woff') format('woff'),url('../../fonts/default/vjs.ttf') format('truetype'),url('../../fonts/default/vjs.svg#icomoon') format('svg');font-weight:400;font-style:normal}.librevjs-custom-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-custom-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-custom-skin .librevjs-slider-handle{width:0;height:0}.librevjs-custom-skin .librevjs-slider-handle:before{width:0;height:0}.librevjs-custom-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-custom-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-custom-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-custom-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-custom-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-custom-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-custom-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-custom-skin .librevjs-control:before{font-family:VideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-custom-skin .librevjs-control:focus:before,.librevjs-custom-skin .librevjs-control:hover:before{text-shadow:0 0 1em #fff}.librevjs-custom-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-custom-skin .librevjs-play-control{width:5em;cursor:pointer}.librevjs-custom-skin .librevjs-play-control:before{content:"\e001"}.librevjs-custom-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-custom-skin .librevjs-mute-control,.librevjs-custom-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-custom-skin .librevjs-mute-control:before,.librevjs-custom-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-custom-skin .librevjs-volume-control{width:5em;float:right}.librevjs-custom-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-custom-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#1de9b6 url() -50% 0 repeat}.librevjs-custom-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-custom-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-custom-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-custom-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-custom-skin .librevjs-progress-holder{height:100%}.librevjs-custom-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-custom-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-custom-skin .librevjs-play-progress{background:#1de9b6 url() -50% 0 repeat}.librevjs-custom-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-custom-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-custom-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-custom-skin .librevjs-time-controls{font-size:1em;line-height:3em}.librevjs-custom-skin .librevjs-current-time{float:left}.librevjs-custom-skin .librevjs-duration{float:left}.librevjs-custom-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-custom-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-custom-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-custom-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-custom-skin .librevjs-big-play-button{left:50%;margin-left:-1.4em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:2.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-custom-skin.librevjs-big-play-centered .librevjs-big-play-button{left:50%;margin-left:-1.4em;top:50%;margin-top:-1.3em}.librevjs-custom-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-custom-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-custom-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-custom-skin:hover .librevjs-big-play-button,.librevjs-custom-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#1de9b6;color:#fff}.librevjs-custom-skin .librevjs-big-play-button:before{content:"\e001";font-family:VideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.librevjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;font-size:4em;line-height:1;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;opacity:.75;-webkit-animation:spin 1.5s infinite linear;-moz-animation:spin 1.5s infinite linear;-o-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear}.librevjs-custom-skin .librevjs-loading-spinner:before{content:"\e01e";font-family:VideoJS;position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.librevjs-custom-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-custom-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-custom-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-custom-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-custom-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected{color:#01382f;background-color:#1de9b6}.librevjs-custom-skin .librevjs-menu-button ul li:focus,.librevjs-custom-skin .librevjs-menu-button ul li:hover,.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#004d40;background-color:#1de9b6}.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-custom-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-custom-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-custom-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-custom-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.cliplibre-js{background-color:#000;position:relative;padding:0;font-size:10px;vertical-align:middle;font-weight:400;font-style:normal;font-family:Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cliplibre-js .librevjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.cliplibre-js:-moz-full-screen{position:absolute}body.librevjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.cliplibre-js.librevjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important;position:absolute}.cliplibre-js:-webkit-full-screen{width:100%!important;height:100%!important}.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive{cursor:none}.librevjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;cursor:pointer;height:100%;margin:0;padding:0;position:relative;width:100%}.librevjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.cliplibre-js.librevjs-using-native-controls .librevjs-poster{display:none}.cliplibre-js .librevjs-text-track-display{text-align:center;position:absolute;bottom:4em;left:1em;right:1em}.cliplibre-js .librevjs-text-track{display:none;font-size:1.5em;text-align:center;margin-bottom:.1em;background-color:#000;background-color:rgba(0,0,0,.6)}.cliplibre-js .librevjs-subtitles{color:#fff}.cliplibre-js .librevjs-captions{color:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-custom-skin .librevjs-hidden{display:none}.librevjs-lock-showing{display:block!important;opacity:1;visibility:visible}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-blue.css b/librevideojs/css/librevideojs-material/libre-skin-blue.css index 4a514c1..f5cdf77 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-blue.css +++ b/librevideojs/css/librevideojs-material/libre-skin-blue.css @@ -3,7 +3,7 @@ LibreVideoJS Estilos personalizados = blue Version 1.2 Escrito por Jesús Eduardo */ -.librevjs-libre-skin { +.librevjs-libre-materialblue-skin { color:#ccc; background-color: inherit; } @@ -15,7 +15,7 @@ src: local('?'), url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), url("../../fonts/libre-material/libre-icons.svg") format("svg"); } -.librevjs-libre-skin .librevjs-slider { +.librevjs-libre-materialblue-skin .librevjs-slider { /* Replace browser focus highlight with handle highlight */ outline: 0; position: relative; @@ -25,18 +25,18 @@ padding: 0; background-color: #000000; background-color: rgba(0, 0, 0, 0.5); } -.librevjs-libre-skin .librevjs-slider:focus { +.librevjs-libre-materialblue-skin .librevjs-slider:focus { -webkit-box-shadow:0 0 2em #fff; -moz-box-shadow:0 0 2em #fff; box-shadow:0 0 2em #fff } /*Eliminación de botón de barra de progreso*/ -.librevjs-libre-skin .librevjs-slider-handle { +.librevjs-libre-materialblue-skin .librevjs-slider-handle { width: 0; height: 0; } -.librevjs-libre-skin .librevjs-slider-handle:before { +.librevjs-libre-materialblue-skin .librevjs-slider-handle:before { text-shadow: 0em 0em 1em #fff; position: absolute; top: 0; @@ -44,7 +44,7 @@ left: 0; } /* control bar */ -.librevjs-libre-skin .librevjs-control-bar { +.librevjs-libre-materialblue-skin .librevjs-control-bar { /* Start hidden */ display: none; position: absolute; @@ -61,7 +61,7 @@ height: 3.0em; background-color: #232323; background-color: rgba(35, 35, 35, 0.8); } -.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { +.librevjs-libre-materialblue-skin.librevjs-has-started .librevjs-control-bar { display:block; visibility:visible; opacity:1; @@ -70,7 +70,7 @@ opacity:1; -o-transition:visibility .1s,opacity .1s; transition:visibility .1s,opacity .1s } -.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +.librevjs-libre-materialblue-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { display:block; visibility:hidden; opacity:0; @@ -79,18 +79,18 @@ opacity:0; -o-transition:visibility 1s,opacity 1s; transition:visibility 1s,opacity 1s } -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { +.librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-control-bar { display:none } -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { +.librevjs-libre-materialblue-skin.librevjs-using-native-controls .librevjs-control-bar { display:none } @media \0screen { -.librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { +.librevjs-libre-materialblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { content:"" } } -.librevjs-libre-skin .librevjs-control { +.librevjs-libre-materialblue-skin .librevjs-control { outline:0; position:relative; float:left; @@ -100,7 +100,7 @@ padding:0; height:3em; width:4em } -.librevjs-libre-skin .librevjs-control:before { +.librevjs-libre-materialblue-skin .librevjs-control:before { font-family:LibreVideoJS; font-size:1.5em; line-height:2; @@ -113,13 +113,13 @@ text-align:center; text-shadow:1px 1px 1px rgba(0,0,0,.5) } /*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before { +.librevjs-libre-materialblue-skin .librevjs-control:focus:before,.librevjs-libre-materialblue-skin .librevjs-control:hover:before { color: #2196F3; } /*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus { +.librevjs-libre-materialblue-skin .librevjs-control:focus { } -.librevjs-libre-skin .librevjs-control-text { +.librevjs-libre-materialblue-skin .librevjs-control-text { border:0; clip:rect(0 0 0 0); height:1px; @@ -131,52 +131,52 @@ width:1px } /*Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-play-control { +.librevjs-libre-materialblue-skin .librevjs-play-control { width:5em; cursor:pointer; color:rgb(33, 150, 244); } -.librevjs-libre-skin .librevjs-play-control:before { +.librevjs-libre-materialblue-skin .librevjs-play-control:before { content:"\e001" } -.librevjs-libre-skin .librevjs-play-control:hover:before { +.librevjs-libre-materialblue-skin .librevjs-play-control:hover:before { color:#2980b9; /*color de play control al pasar el cursor*/ } -.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { +.librevjs-libre-materialblue-skin.librevjs-playing .librevjs-play-control:before { content:"\e002" } /*END Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button { +.librevjs-libre-materialblue-skin .librevjs-mute-control,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button { cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { +.librevjs-libre-materialblue-skin .librevjs-mute-control:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button:before { content:"\e006" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before { content:"\e003" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before { content:"\e004" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before { content:"\e005" } -.librevjs-libre-skin .librevjs-volume-control { +.librevjs-libre-materialblue-skin .librevjs-volume-control { width:5em; float:right } -.librevjs-libre-skin .librevjs-volume-bar { +.librevjs-libre-materialblue-skin .librevjs-volume-bar { width:5em; height:.6em; margin:1.1em auto 0 } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { +.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu-content { height:2.9em } /*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-level { +.librevjs-libre-materialblue-skin .librevjs-volume-level { position: absolute; top: 0; left: 0; @@ -187,22 +187,22 @@ width: 100%; background: #2196F3 url() -50% 0 repeat; /*color de barra volumen*/ } /*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { +.librevjs-libre-materialblue-skin .librevjs-volume-bar .librevjs-volume-handle { width:.5em; height:.5em } -.librevjs-libre-skin .librevjs-volume-handle:before { +.librevjs-libre-materialblue-skin .librevjs-volume-handle:before { font-size:.9em; top:-.2em; left:-.2em; width:1em; height:1em } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { width:6em; left:-4em } -.librevjs-libre-skin .librevjs-progress-control { +.librevjs-libre-materialblue-skin .librevjs-progress-control { position:absolute; left:0; right:0; @@ -215,17 +215,17 @@ top:-1em; -o-transition:all .4s; transition:all .4s } -.librevjs-libre-skin:hover .librevjs-progress-control { +.librevjs-libre-materialblue-skin:hover .librevjs-progress-control { font-size:.9em; -webkit-transition:all .2s; -moz-transition:all .2s; -o-transition:all .2s; transition:all .2s } -.librevjs-libre-skin .librevjs-progress-holder { +.librevjs-libre-materialblue-skin .librevjs-progress-holder { height:100% } -.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { +.librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-load-progress { position:absolute; display:block; height:100%; @@ -236,32 +236,32 @@ top:0 } /* Personalización de barra de progreso a color azul */ -.librevjs-libre-skin .librevjs-play-progress { +.librevjs-libre-materialblue-skin .librevjs-play-progress { background: #2196F3 url() -50% 0 repeat; } -.librevjs-libre-skin .librevjs-load-progress { +.librevjs-libre-materialblue-skin .librevjs-load-progress { background:#646464; background:rgba(255,255,255,.4) } -.librevjs-libre-skin .librevjs-seek-handle { +.librevjs-libre-materialblue-skin .librevjs-seek-handle { width:1.5em; height:100% } -.librevjs-libre-skin .librevjs-seek-handle:before { +.librevjs-libre-materialblue-skin .librevjs-seek-handle:before { padding-top:.1em } -.librevjs-libre-skin .librevjs-time-controls { +.librevjs-libre-materialblue-skin .librevjs-time-controls { font-size:1em; font-weight: 700;/*mayor visibilidad*/ line-height:3em; } -.librevjs-libre-skin .librevjs-current-time { +.librevjs-libre-materialblue-skin .librevjs-current-time { float:left } -.librevjs-libre-skin .librevjs-duration { +.librevjs-libre-materialblue-skin .librevjs-duration { float:left } -.librevjs-libre-skin .librevjs-remaining-time { +.librevjs-libre-materialblue-skin .librevjs-remaining-time { display:none; float:left } @@ -269,20 +269,20 @@ float:left float:left; line-height:3em } -.librevjs-libre-skin .librevjs-fullscreen-control { +.librevjs-libre-materialblue-skin .librevjs-fullscreen-control { width:3.8em; cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-fullscreen-control:before { +.librevjs-libre-materialblue-skin .librevjs-fullscreen-control:before { content:"\e000" } -.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +.librevjs-libre-materialblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { content:"\e00b" } /*Centrado del button Play y personalizado*/ -.librevjs-libre-skin .librevjs-big-play-button { +.librevjs-libre-materialblue-skin .librevjs-big-play-button { left: 50%; top: 40%; font-size: 10em; @@ -300,23 +300,23 @@ opacity: 1; color: #2196F3; } /* Hide if controls are disabled */ -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { +.librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-big-play-button { display: none; } /* Hide when video starts playing */ -.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { +.librevjs-libre-materialblue-skin.librevjs-has-started .librevjs-big-play-button { display: none; } /* Hide on mobile devices. Remove when we stop using native controls by default on mobile */ -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { +.librevjs-libre-materialblue-skin.librevjs-using-native-controls .librevjs-big-play-button { display: none; } -.librevjs-libre-skin:hover .librevjs-big-play-button, -.librevjs-libre-skin .librevjs-big-play-button:focus { +.librevjs-libre-materialblue-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialblue-skin .librevjs-big-play-button:focus { color: #0289f4; /*color boton focus*/ } -.librevjs-libre-skin .librevjs-big-play-button:before { +.librevjs-libre-materialblue-skin .librevjs-big-play-button:before { content: "\e007"; font-family: LibreVideoJS; /* In order to center the play icon vertically we need to set the line height @@ -349,7 +349,7 @@ opacity:.75; -o-animation:spin 1.5s infinite linear; animation:spin 1.5s infinite linear } -.librevjs-libre-skin .librevjs-loading-spinner:before { +.librevjs-libre-materialblue-skin .librevjs-loading-spinner:before { content:"\e01e"; font-family:LibreVideoJS; position:absolute; @@ -392,11 +392,11 @@ text-shadow:0 0 .1em #000 transform:rotate(359deg) } } -.librevjs-libre-skin .librevjs-menu-button { +.librevjs-libre-materialblue-skin .librevjs-menu-button { float:right; cursor:pointer } -.librevjs-libre-skin .librevjs-menu { +.librevjs-libre-materialblue-skin .librevjs-menu { display:none; position:absolute; bottom:0; @@ -409,7 +409,7 @@ border-right:2em solid transparent; border-top:1.55em solid #000; border-top-color:rgba(7,40,50,.5) } -.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +.librevjs-libre-materialblue-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { display:block; padding:0; margin:0; @@ -425,31 +425,32 @@ background-color:rgba(7,20,30,.7); -moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); box-shadow:-.2em -.2em .3em rgba(255,255,255,.2) } -.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu { +.librevjs-libre-materialblue-skin .librevjs-menu-button:hover .librevjs-menu { display:block } -.librevjs-libre-skin .librevjs-menu-button ul li { +.librevjs-libre-materialblue-skin .librevjs-menu-button ul li { list-style:none; margin:0; padding:.3em 0; line-height:1.4em; font-size:1.2em; text-align:center; -text-transform:lowercase +text-transform:lowercase; +color: #ccc; } /*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { +.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected { color: #ffffff; background-color: rgb(33, 150, 244); } -.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover { +.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:hover { outline: 0; color: #fff; background-color: #2196F3; } /*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { +.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-menu-title { text-align:center; text-transform:uppercase; font-size:1em; @@ -459,13 +460,13 @@ margin:0 0 .3em; font-weight:700; cursor:default } -.librevjs-libre-skin .librevjs-subtitles-button:before { +.librevjs-libre-materialblue-skin .librevjs-subtitles-button:before { content:"\e00c" } -.librevjs-libre-skin .librevjs-captions-button:before { +.librevjs-libre-materialblue-skin .librevjs-captions-button:before { content:"\e008" } -.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before { +.librevjs-libre-materialblue-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialblue-skin .librevjs-captions-button:hover .librevjs-control-content:before { -webkit-box-shadow:0 0 1em #fff; -moz-box-shadow:0 0 1em #fff; box-shadow:0 0 1em #fff @@ -565,7 +566,7 @@ background-color: rgba(2, 7, 11, 0.7); .librevjs-tt-cue { display:block } -.librevjs-libre-skin .librevjs-hidden { +.librevjs-libre-materialblue-skin .librevjs-hidden { display:none } .librevjs-lock-showing { @@ -581,11 +582,13 @@ padding: 130px 10px 20px; text-align: center; } /*title de resolucion | subtitles y Caption*/ -ul li.librevjs-menu-title.librevjs-res-menu-title{ +.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ color: rgb(33, 150, 244); +background-color: inherit; } -ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ color: rgb(11, 137, 237); +background-color: inherit; } /*Responsive*/ @@ -623,7 +626,7 @@ left: 0; .cliplibre-js .librevjs-text-track{ font-size: 0.9em; } - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialblue-skin .librevjs-big-play-button{ font-size: 5em; top: 45%; } @@ -637,17 +640,17 @@ left: 0; } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { + .librevjs-libre-materialblue-skin .librevjs-big-play-button { top:35%; } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialblue-skin .librevjs-big-play-button{ font-size: 3em; } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialblue-skin .librevjs-big-play-button{ font-size: 2em; } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-blue.min.css b/librevideojs/css/librevideojs-material/libre-skin-blue.min.css deleted file mode 100644 index 9129425..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-blue.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = blue -Version 1.2 -Escrito por Jesús Eduardo -*/.librevjs-libre-skin{color:#ccc;background-color:inherit}@font-face{font-family:"LibreVideoJS";src:url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");src:local('?'),url("../../fonts/libre-material/libre-icons.woff") format("woff"),url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),url("../../fonts/libre-material/libre-icons.svg") format("svg")}.librevjs-libre-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-skin .librevjs-control:before{font-family:LibreVideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#2196f3}.librevjs-libre-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#2196f4}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#2980b9}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#2196f3 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-libre-skin .librevjs-progress-holder{height:100%}.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-skin .librevjs-play-progress{background:#2196f3 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-skin .librevjs-current-time{float:left}.librevjs-libre-skin .librevjs-duration{float:left}.librevjs-libre-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-skin .librevjs-big-play-button{left:50%;top:40%;font-size:10em;display:block;z-index:2;position:absolute;width:1em;height:1em;margin-left:-0.5em;margin-top:-0.5em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;color:#2196f3}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-skin:hover .librevjs-big-play-button,.librevjs-libre-skin .librevjs-big-play-button:focus{color:#0289f4}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.librevjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;font-size:4em;line-height:1;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;opacity:.75;-webkit-animation:spin 1.5s infinite linear;-moz-animation:spin 1.5s infinite linear;-o-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear}.librevjs-libre-skin .librevjs-loading-spinner:before{content:"\e01e";font-family:LibreVideoJS;position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.librevjs-libre-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#2196f4}.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#2196f3}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-libre-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.cliplibre-js{background-color:#000;position:relative;padding:0;font-size:10px;vertical-align:middle;font-weight:500;font-style:normal;font-family:Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cliplibre-js .librevjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.cliplibre-js:-moz-full-screen{position:absolute}body.librevjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.cliplibre-js.librevjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important;position:absolute}.cliplibre-js:-webkit-full-screen{width:100%!important;height:100%!important}.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive{cursor:none}.librevjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;cursor:pointer;height:100%;margin:0;padding:0;position:relative;width:100%}.librevjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.cliplibre-js.librevjs-using-native-controls .librevjs-poster{display:none}.cliplibre-js .librevjs-text-track-display{text-align:center;position:absolute;bottom:4em;left:1em;right:1em}.cliplibre-js .librevjs-text-track{display:none;font-size:1.5em;text-align:center;margin-bottom:.1em;background-color:#000;background-color:rgba(0,0,0,.6)}.cliplibre-js .librevjs-subtitles{color:#fff}.cliplibre-js .librevjs-captions{color:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-skin .librevjs-hidden{display:none}.librevjs-lock-showing{display:block!important;opacity:1;visibility:visible}.no_html5{background:black none repeat scroll 0 0;color:white;height:160px;padding:130px 10px 20px;text-align:center}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#2196f4}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#0b89ed}.cliplibre-js-responsive-container.librevjs-hd{padding-top:56.25%}.cliplibre-js-responsive-container.librevjs-sd{padding-top:75%}.cliplibre-js-responsive-container{width:100%;position:relative}.cliplibre-js-responsive-container .cliplibre-js{height:100%!important;width:100%!important;position:absolute;top:0;left:0}@media screen and (max-width:600px){.cliplibre-js .librevjs-text-track{font-size:1.2em}.cliplibre-js .librevjs-text-track-display{bottom:2em}}@media screen and (max-width:413px){.cliplibre-js{font-size:8px}}@media screen and (max-width:400px){.cliplibre-js .librevjs-text-track{font-size:.9em}.librevjs-libre-skin .librevjs-big-play-button{font-size:5em;top:45%}.cliplibre-js .librevjs-text-track-display{bottom:1em}}@media screen and (max-width:335px){.cliplibre-js{font-size:6px}}@media screen and (max-width:200px){.librevjs-libre-skin .librevjs-big-play-button{top:35%}}@media screen and (max-width:150px){.librevjs-libre-skin .librevjs-big-play-button{font-size:3em}}@media screen and (max-width:90px){.librevjs-libre-skin .librevjs-big-play-button{font-size:2em}}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-grey.css b/librevideojs/css/librevideojs-material/libre-skin-grey.css index f4d60bd..cd74eef 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-grey.css +++ b/librevideojs/css/librevideojs-material/libre-skin-grey.css @@ -3,7 +3,7 @@ LibreVideoJS Estilos personalizados = Grey Version 1.2 Escrito por Jesús Eduardo */ -.librevjs-libre-skin { +.librevjs-libre-materialgrey-skin { color:#ccc; background-color: inherit; } @@ -15,7 +15,7 @@ src: local('?'), url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), url("../../fonts/libre-material/libre-icons.svg") format("svg"); } -.librevjs-libre-skin .librevjs-slider { +.librevjs-libre-materialgrey-skin .librevjs-slider { /* Replace browser focus highlight with handle highlight */ outline: 0; position: relative; @@ -25,18 +25,18 @@ padding: 0; background-color: #000000; background-color: rgba(0, 0, 0, 0.5); } -.librevjs-libre-skin .librevjs-slider:focus { +.librevjs-libre-materialgrey-skin .librevjs-slider:focus { -webkit-box-shadow:0 0 2em #fff; -moz-box-shadow:0 0 2em #fff; box-shadow:0 0 2em #fff } /*Eliminación de botón de barra de progreso*/ -.librevjs-libre-skin .librevjs-slider-handle { +.librevjs-libre-materialgrey-skin .librevjs-slider-handle { width: 0; height: 0; } -.librevjs-libre-skin .librevjs-slider-handle:before { +.librevjs-libre-materialgrey-skin .librevjs-slider-handle:before { text-shadow: 0em 0em 1em #fff; position: absolute; top: 0; @@ -44,7 +44,7 @@ left: 0; } /* control bar */ -.librevjs-libre-skin .librevjs-control-bar { +.librevjs-libre-materialgrey-skin .librevjs-control-bar { /* Start hidden */ display: none; position: absolute; @@ -61,7 +61,7 @@ height: 3.0em; background-color: #232323; background-color: rgba(35, 35, 35, 0.8); } -.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { +.librevjs-libre-materialgrey-skin.librevjs-has-started .librevjs-control-bar { display:block; visibility:visible; opacity:1; @@ -70,7 +70,7 @@ opacity:1; -o-transition:visibility .1s,opacity .1s; transition:visibility .1s,opacity .1s } -.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +.librevjs-libre-materialgrey-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { display:block; visibility:hidden; opacity:0; @@ -79,18 +79,18 @@ opacity:0; -o-transition:visibility 1s,opacity 1s; transition:visibility 1s,opacity 1s } -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { +.librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-control-bar { display:none } -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { +.librevjs-libre-materialgrey-skin.librevjs-using-native-controls .librevjs-control-bar { display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + .librevjs-libre-materialgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { content:"" } } -.librevjs-libre-skin .librevjs-control { +.librevjs-libre-materialgrey-skin .librevjs-control { outline:0; position:relative; float:left; @@ -100,7 +100,7 @@ padding:0; height:3em; width:4em } -.librevjs-libre-skin .librevjs-control:before { +.librevjs-libre-materialgrey-skin .librevjs-control:before { font-family:LibreVideoJS; font-size:1.5em; line-height:2; @@ -113,13 +113,13 @@ text-align:center; text-shadow:1px 1px 1px rgba(0,0,0,.5) } /*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before { +.librevjs-libre-materialgrey-skin .librevjs-control:focus:before,.librevjs-libre-materialgrey-skin .librevjs-control:hover:before { color: #9e9e9e; } /*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus { +.librevjs-libre-materialgrey-skin .librevjs-control:focus { } -.librevjs-libre-skin .librevjs-control-text { +.librevjs-libre-materialgrey-skin .librevjs-control-text { border:0; clip:rect(0 0 0 0); height:1px; @@ -131,52 +131,52 @@ width:1px } /*Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-play-control { +.librevjs-libre-materialgrey-skin .librevjs-play-control { width:5em; cursor:pointer; color: rgb(158, 158, 158); } -.librevjs-libre-skin .librevjs-play-control:before { +.librevjs-libre-materialgrey-skin .librevjs-play-control:before { content:"\e001" } -.librevjs-libre-skin .librevjs-play-control:hover:before { +.librevjs-libre-materialgrey-skin .librevjs-play-control:hover:before { color:#7c7c7c; /*color de play control al pasar el cursor*/ } -.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { +.librevjs-libre-materialgrey-skin.librevjs-playing .librevjs-play-control:before { content:"\e002" } /*END Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button { +.librevjs-libre-materialgrey-skin .librevjs-mute-control,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button { cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { +.librevjs-libre-materialgrey-skin .librevjs-mute-control:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button:before { content:"\e006" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-0:before { content:"\e003" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-1:before { content:"\e004" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-2:before { content:"\e005" } -.librevjs-libre-skin .librevjs-volume-control { +.librevjs-libre-materialgrey-skin .librevjs-volume-control { width:5em; float:right } -.librevjs-libre-skin .librevjs-volume-bar { +.librevjs-libre-materialgrey-skin .librevjs-volume-bar { width:5em; height:.6em; margin:1.1em auto 0 } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { +.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu-content { height:2.9em } /*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-level { +.librevjs-libre-materialgrey-skin .librevjs-volume-level { position: absolute; top: 0; left: 0; @@ -187,22 +187,22 @@ width: 100%; background: #9e9e9e url() -50% 0 repeat; /*color de barra volumen*/ } /*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { +.librevjs-libre-materialgrey-skin .librevjs-volume-bar .librevjs-volume-handle { width:.5em; height:.5em } -.librevjs-libre-skin .librevjs-volume-handle:before { +.librevjs-libre-materialgrey-skin .librevjs-volume-handle:before { font-size:.9em; top:-.2em; left:-.2em; width:1em; height:1em } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { width:6em; left:-4em } -.librevjs-libre-skin .librevjs-progress-control { +.librevjs-libre-materialgrey-skin .librevjs-progress-control { position:absolute; left:0; right:0; @@ -215,17 +215,17 @@ top:-1em; -o-transition:all .4s; transition:all .4s } -.librevjs-libre-skin:hover .librevjs-progress-control { +.librevjs-libre-materialgrey-skin:hover .librevjs-progress-control { font-size:.9em; -webkit-transition:all .2s; -moz-transition:all .2s; -o-transition:all .2s; transition:all .2s } -.librevjs-libre-skin .librevjs-progress-holder { +.librevjs-libre-materialgrey-skin .librevjs-progress-holder { height:100% } -.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { +.librevjs-libre-materialgrey-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialgrey-skin .librevjs-progress-holder .librevjs-load-progress { position:absolute; display:block; height:100%; @@ -236,32 +236,32 @@ top:0 } /* Personalización de barra de progreso a color plata */ -.librevjs-libre-skin .librevjs-play-progress { +.librevjs-libre-materialgrey-skin .librevjs-play-progress { background: #9e9e9e url() -50% 0 repeat; } -.librevjs-libre-skin .librevjs-load-progress { +.librevjs-libre-materialgrey-skin .librevjs-load-progress { background:#646464; background:rgba(255,255,255,.4) } -.librevjs-libre-skin .librevjs-seek-handle { +.librevjs-libre-materialgrey-skin .librevjs-seek-handle { width:1.5em; height:100% } -.librevjs-libre-skin .librevjs-seek-handle:before { +.librevjs-libre-materialgrey-skin .librevjs-seek-handle:before { padding-top:.1em } -.librevjs-libre-skin .librevjs-time-controls { +.librevjs-libre-materialgrey-skin .librevjs-time-controls { font-size:1em; font-weight: 700;/*mayor visibilidad*/ line-height:3em; } -.librevjs-libre-skin .librevjs-current-time { +.librevjs-libre-materialgrey-skin .librevjs-current-time { float:left } -.librevjs-libre-skin .librevjs-duration { +.librevjs-libre-materialgrey-skin .librevjs-duration { float:left } -.librevjs-libre-skin .librevjs-remaining-time { +.librevjs-libre-materialgrey-skin .librevjs-remaining-time { display:none; float:left } @@ -269,20 +269,20 @@ float:left float:left; line-height:3em } -.librevjs-libre-skin .librevjs-fullscreen-control { +.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control { width:3.8em; cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-fullscreen-control:before { +.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control:before { content:"\e000" } -.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +.librevjs-libre-materialgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { content:"\e00b" } /*Centrado del button Play y personalizado*/ -.librevjs-libre-skin .librevjs-big-play-button { +.librevjs-libre-materialgrey-skin .librevjs-big-play-button { left: 50%; top: 40%; font-size: 10em; @@ -300,24 +300,24 @@ opacity: 1; color: #9e9e9e; } /* Hide if controls are disabled */ -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { +.librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-big-play-button { display: none; } /* Hide when video starts playing */ -.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { +.librevjs-libre-materialgrey-skin.librevjs-has-started .librevjs-big-play-button { display: none; } /* Hide on mobile devices. Remove when we stop using native controls by default on mobile */ -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { +.librevjs-libre-materialgrey-skin.librevjs-using-native-controls .librevjs-big-play-button { display: none; } -.librevjs-libre-skin:hover .librevjs-big-play-button, -.librevjs-libre-skin .librevjs-big-play-button:focus { -color: rgb(115, 115, 115); /*color boton focus purpura oscuro*/ +.librevjs-libre-materialgrey-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialgrey-skin .librevjs-big-play-button:focus { +color: rgb(115, 115, 115); /*color boton focus grey oscuro*/ } -.librevjs-libre-skin .librevjs-big-play-button:before { +.librevjs-libre-materialgrey-skin .librevjs-big-play-button:before { content: "\e007"; font-family: LibreVideoJS; /* In order to center the play icon vertically we need to set the line height @@ -350,7 +350,7 @@ opacity:.75; -o-animation:spin 1.5s infinite linear; animation:spin 1.5s infinite linear } -.librevjs-libre-skin .librevjs-loading-spinner:before { +.librevjs-libre-materialgrey-skin .librevjs-loading-spinner:before { content:"\e01e"; font-family:LibreVideoJS; position:absolute; @@ -393,11 +393,11 @@ text-shadow:0 0 .1em #000 transform:rotate(359deg) } } -.librevjs-libre-skin .librevjs-menu-button { +.librevjs-libre-materialgrey-skin .librevjs-menu-button { float:right; cursor:pointer } -.librevjs-libre-skin .librevjs-menu { +.librevjs-libre-materialgrey-skin .librevjs-menu { display:none; position:absolute; bottom:0; @@ -410,7 +410,7 @@ border-right:2em solid transparent; border-top:1.55em solid #000; border-top-color:rgba(7,40,50,.5) } -.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +.librevjs-libre-materialgrey-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { display:block; padding:0; margin:0; @@ -426,31 +426,32 @@ background-color:rgba(7,20,30,.7); -moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); box-shadow:-.2em -.2em .3em rgba(255,255,255,.2) } -.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu { +.librevjs-libre-materialgrey-skin .librevjs-menu-button:hover .librevjs-menu { display:block } -.librevjs-libre-skin .librevjs-menu-button ul li { +.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li { list-style:none; margin:0; padding:.3em 0; line-height:1.4em; font-size:1.2em; text-align:center; -text-transform:lowercase +text-transform:lowercase; +color: #ccc; } /*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { +.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected { color: #ffffff; background-color: rgb(158, 158, 158); } -.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover { +.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected:hover { outline: 0; color: #fff; background-color: #9e9e9e; } /*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { +.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-menu-title { text-align:center; text-transform:uppercase; font-size:1em; @@ -460,13 +461,13 @@ margin:0 0 .3em; font-weight:700; cursor:default } -.librevjs-libre-skin .librevjs-subtitles-button:before { +.librevjs-libre-materialgrey-skin .librevjs-subtitles-button:before { content:"\e00c" } -.librevjs-libre-skin .librevjs-captions-button:before { +.librevjs-libre-materialgrey-skin .librevjs-captions-button:before { content:"\e008" } -.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before { +.librevjs-libre-materialgrey-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialgrey-skin .librevjs-captions-button:hover .librevjs-control-content:before { -webkit-box-shadow:0 0 1em #fff; -moz-box-shadow:0 0 1em #fff; box-shadow:0 0 1em #fff @@ -566,7 +567,7 @@ background-color: rgba(2, 7, 11, 0.7); .librevjs-tt-cue { display:block } -.librevjs-libre-skin .librevjs-hidden { +.librevjs-libre-materialgrey-skin .librevjs-hidden { display:none } .librevjs-lock-showing { @@ -582,11 +583,13 @@ padding: 130px 10px 20px; text-align: center; } /*title de resolucion | subtitles y Caption*/ -ul li.librevjs-menu-title.librevjs-res-menu-title{ +.librevjs-libre-materialgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ color:#737373; +background-color: inherit; } -ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +.librevjs-libre-materialgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ color:#9e9e9e; +background-color: inherit; } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { @@ -623,7 +626,7 @@ left: 0; .cliplibre-js .librevjs-text-track{ font-size: 0.9em; } - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialgrey-skin .librevjs-big-play-button{ font-size: 5em; top: 45%; } @@ -637,17 +640,17 @@ left: 0; } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { + .librevjs-libre-materialgrey-skin .librevjs-big-play-button { top:35%; } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialgrey-skin .librevjs-big-play-button{ font-size: 3em; } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialgrey-skin .librevjs-big-play-button{ font-size: 2em; } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-grey.min.css b/librevideojs/css/librevideojs-material/libre-skin-grey.min.css deleted file mode 100644 index 1c1632f..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-grey.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = Grey -Version 1.2 -Escrito por Jesús Eduardo -*/.librevjs-libre-skin{color:#ccc;background-color:inherit}@font-face{font-family:"LibreVideoJS";src:url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");src:local('?'),url("../../fonts/libre-material/libre-icons.woff") format("woff"),url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),url("../../fonts/libre-material/libre-icons.svg") format("svg")}.librevjs-libre-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-skin .librevjs-control:before{font-family:LibreVideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#9e9e9e}.librevjs-libre-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#9e9e9e}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#7c7c7c}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#9e9e9e url() -50% 0 repeat}.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-libre-skin .librevjs-progress-holder{height:100%}.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-skin .librevjs-play-progress{background:#9e9e9e url() -50% 0 repeat}.librevjs-libre-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-skin .librevjs-current-time{float:left}.librevjs-libre-skin .librevjs-duration{float:left}.librevjs-libre-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-skin .librevjs-big-play-button{left:50%;top:40%;font-size:10em;display:block;z-index:2;position:absolute;width:1em;height:1em;margin-left:-0.5em;margin-top:-0.5em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;color:#9e9e9e}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-skin:hover .librevjs-big-play-button,.librevjs-libre-skin .librevjs-big-play-button:focus{color:#737373}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.librevjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;font-size:4em;line-height:1;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;opacity:.75;-webkit-animation:spin 1.5s infinite linear;-moz-animation:spin 1.5s infinite linear;-o-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear}.librevjs-libre-skin .librevjs-loading-spinner:before{content:"\e01e";font-family:LibreVideoJS;position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.librevjs-libre-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#9e9e9e}.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#9e9e9e}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-libre-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.cliplibre-js{background-color:#000;position:relative;padding:0;font-size:10px;vertical-align:middle;font-weight:500;font-style:normal;font-family:Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cliplibre-js .librevjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.cliplibre-js:-moz-full-screen{position:absolute}body.librevjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.cliplibre-js.librevjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important;position:absolute}.cliplibre-js:-webkit-full-screen{width:100%!important;height:100%!important}.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive{cursor:none}.librevjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;cursor:pointer;height:100%;margin:0;padding:0;position:relative;width:100%}.librevjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.cliplibre-js.librevjs-using-native-controls .librevjs-poster{display:none}.cliplibre-js .librevjs-text-track-display{text-align:center;position:absolute;bottom:4em;left:1em;right:1em}.cliplibre-js .librevjs-text-track{display:none;font-size:1.5em;text-align:center;margin-bottom:.1em;background-color:#000;background-color:rgba(0,0,0,.6)}.cliplibre-js .librevjs-subtitles{color:#fff}.cliplibre-js .librevjs-captions{color:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-skin .librevjs-hidden{display:none}.librevjs-lock-showing{display:block!important;opacity:1;visibility:visible}.no_html5{background:black none repeat scroll 0 0;color:white;height:160px;padding:130px 10px 20px;text-align:center}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#737373}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#9e9e9e}.cliplibre-js-responsive-container.librevjs-hd{padding-top:56.25%}.cliplibre-js-responsive-container.librevjs-sd{padding-top:75%}.cliplibre-js-responsive-container{width:100%;position:relative}.cliplibre-js-responsive-container .cliplibre-js{height:100%!important;width:100%!important;position:absolute;top:0;left:0}@media screen and (max-width:600px){.cliplibre-js .librevjs-text-track{font-size:1.2em}.cliplibre-js .librevjs-text-track-display{bottom:2em}}@media screen and (max-width:413px){.cliplibre-js{font-size:8px}}@media screen and (max-width:400px){.cliplibre-js .librevjs-text-track{font-size:.9em}.librevjs-libre-skin .librevjs-big-play-button{font-size:5em;top:45%}.cliplibre-js .librevjs-text-track-display{bottom:1em}}@media screen and (max-width:335px){.cliplibre-js{font-size:6px}}@media screen and (max-width:200px){.librevjs-libre-skin .librevjs-big-play-button{top:35%}}@media screen and (max-width:150px){.librevjs-libre-skin .librevjs-big-play-button{font-size:3em}}@media screen and (max-width:90px){.librevjs-libre-skin .librevjs-big-play-button{font-size:2em}}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-purple.css b/librevideojs/css/librevideojs-material/libre-skin-purple.css index 3f9f49d..3eeb9d6 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-purple.css +++ b/librevideojs/css/librevideojs-material/libre-skin-purple.css @@ -3,7 +3,7 @@ LibreVideoJS Estilos personalizados = Purple Version 1.2 Escrito por Jesús Eduardo */ -.librevjs-libre-skin { +.librevjs-libre-materialpurple-skin { color:#ccc; background-color: inherit; } @@ -15,7 +15,7 @@ src: local('?'), url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), url("../../fonts/libre-material/libre-icons.svg") format("svg"); } -.librevjs-libre-skin .librevjs-slider { +.librevjs-libre-materialpurple-skin .librevjs-slider { /* Replace browser focus highlight with handle highlight */ outline: 0; position: relative; @@ -25,18 +25,18 @@ padding: 0; background-color: #000000; background-color: rgba(0, 0, 0, 0.5); } -.librevjs-libre-skin .librevjs-slider:focus { +.librevjs-libre-materialpurple-skin .librevjs-slider:focus { -webkit-box-shadow:0 0 2em #fff; -moz-box-shadow:0 0 2em #fff; box-shadow:0 0 2em #fff } /*Eliminación de botón de barra de progreso*/ -.librevjs-libre-skin .librevjs-slider-handle { +.librevjs-libre-materialpurple-skin .librevjs-slider-handle { width: 0; height: 0; } -.librevjs-libre-skin .librevjs-slider-handle:before { +.librevjs-libre-materialpurple-skin .librevjs-slider-handle:before { text-shadow: 0em 0em 1em #fff; position: absolute; top: 0; @@ -44,7 +44,7 @@ left: 0; } /* control bar */ -.librevjs-libre-skin .librevjs-control-bar { +.librevjs-libre-materialpurple-skin .librevjs-control-bar { /* Start hidden */ display: none; position: absolute; @@ -61,7 +61,7 @@ height: 3.0em; background-color: #232323; background-color: rgba(35, 35, 35, 0.8); } -.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { +.librevjs-libre-materialpurple-skin.librevjs-has-started .librevjs-control-bar { display:block; visibility:visible; opacity:1; @@ -70,7 +70,7 @@ opacity:1; -o-transition:visibility .1s,opacity .1s; transition:visibility .1s,opacity .1s } -.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +.librevjs-libre-materialpurple-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { display:block; visibility:hidden; opacity:0; @@ -79,18 +79,18 @@ opacity:0; -o-transition:visibility 1s,opacity 1s; transition:visibility 1s,opacity 1s } -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { +.librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-control-bar { display:none } -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { +.librevjs-libre-materialpurple-skin.librevjs-using-native-controls .librevjs-control-bar { display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + .librevjs-libre-materialpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { content:"" } } -.librevjs-libre-skin .librevjs-control { +.librevjs-libre-materialpurple-skin .librevjs-control { outline:0; position:relative; float:left; @@ -100,7 +100,7 @@ padding:0; height:3em; width:4em } -.librevjs-libre-skin .librevjs-control:before { +.librevjs-libre-materialpurple-skin .librevjs-control:before { font-family:LibreVideoJS; font-size:1.5em; line-height:2; @@ -113,13 +113,13 @@ text-align:center; text-shadow:1px 1px 1px rgba(0,0,0,.5) } /*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before { +.librevjs-libre-materialpurple-skin .librevjs-control:focus:before,.librevjs-libre-materialpurple-skin .librevjs-control:hover:before { color: #9c27b0; } /*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus { +.librevjs-libre-materialpurple-skin .librevjs-control:focus { } -.librevjs-libre-skin .librevjs-control-text { +.librevjs-libre-materialpurple-skin .librevjs-control-text { border:0; clip:rect(0 0 0 0); height:1px; @@ -131,52 +131,52 @@ width:1px } /*Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-play-control { +.librevjs-libre-materialpurple-skin .librevjs-play-control { width:5em; cursor:pointer; color: rgb(156, 39, 176); } -.librevjs-libre-skin .librevjs-play-control:before { +.librevjs-libre-materialpurple-skin .librevjs-play-control:before { content:"\e001" } -.librevjs-libre-skin .librevjs-play-control:hover:before { +.librevjs-libre-materialpurple-skin .librevjs-play-control:hover:before { color:#8e44ad; /*color de play control al pasar el cursor*/ } -.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { +.librevjs-libre-materialpurple-skin.librevjs-playing .librevjs-play-control:before { content:"\e002" } /*END Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button { +.librevjs-libre-materialpurple-skin .librevjs-mute-control,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button { cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { +.librevjs-libre-materialpurple-skin .librevjs-mute-control:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button:before { content:"\e006" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before { content:"\e003" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before { content:"\e004" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before { content:"\e005" } -.librevjs-libre-skin .librevjs-volume-control { +.librevjs-libre-materialpurple-skin .librevjs-volume-control { width:5em; float:right } -.librevjs-libre-skin .librevjs-volume-bar { +.librevjs-libre-materialpurple-skin .librevjs-volume-bar { width:5em; height:.6em; margin:1.1em auto 0 } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { +.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu-content { height:2.9em } /*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-level { +.librevjs-libre-materialpurple-skin .librevjs-volume-level { position: absolute; top: 0; left: 0; @@ -187,22 +187,22 @@ width: 100%; background: #9c27b0 url() -50% 0 repeat; /*color de barra volumen*/ } /*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { +.librevjs-libre-materialpurple-skin .librevjs-volume-bar .librevjs-volume-handle { width:.5em; height:.5em } -.librevjs-libre-skin .librevjs-volume-handle:before { +.librevjs-libre-materialpurple-skin .librevjs-volume-handle:before { font-size:.9em; top:-.2em; left:-.2em; width:1em; height:1em } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { width:6em; left:-4em } -.librevjs-libre-skin .librevjs-progress-control { +.librevjs-libre-materialpurple-skin .librevjs-progress-control { position:absolute; left:0; right:0; @@ -215,17 +215,17 @@ top:-1em; -o-transition:all .4s; transition:all .4s } -.librevjs-libre-skin:hover .librevjs-progress-control { +.librevjs-libre-materialpurple-skin:hover .librevjs-progress-control { font-size:.9em; -webkit-transition:all .2s; -moz-transition:all .2s; -o-transition:all .2s; transition:all .2s } -.librevjs-libre-skin .librevjs-progress-holder { +.librevjs-libre-materialpurple-skin .librevjs-progress-holder { height:100% } -.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { +.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-load-progress { position:absolute; display:block; height:100%; @@ -236,32 +236,32 @@ top:0 } /* Personalización de barra de progreso a color purpura */ -.librevjs-libre-skin .librevjs-play-progress { +.librevjs-libre-materialpurple-skin .librevjs-play-progress { background: #9c27b0 url() -50% 0 repeat; } -.librevjs-libre-skin .librevjs-load-progress { +.librevjs-libre-materialpurple-skin .librevjs-load-progress { background:#646464; background:rgba(255,255,255,.4) } -.librevjs-libre-skin .librevjs-seek-handle { +.librevjs-libre-materialpurple-skin .librevjs-seek-handle { width:1.5em; height:100% } -.librevjs-libre-skin .librevjs-seek-handle:before { +.librevjs-libre-materialpurple-skin .librevjs-seek-handle:before { padding-top:.1em } -.librevjs-libre-skin .librevjs-time-controls { +.librevjs-libre-materialpurple-skin .librevjs-time-controls { font-size:1em; font-weight: 700;/*mayor visibilidad*/ line-height:3em; } -.librevjs-libre-skin .librevjs-current-time { +.librevjs-libre-materialpurple-skin .librevjs-current-time { float:left } -.librevjs-libre-skin .librevjs-duration { +.librevjs-libre-materialpurple-skin .librevjs-duration { float:left } -.librevjs-libre-skin .librevjs-remaining-time { +.librevjs-libre-materialpurple-skin .librevjs-remaining-time { display:none; float:left } @@ -269,20 +269,20 @@ float:left float:left; line-height:3em } -.librevjs-libre-skin .librevjs-fullscreen-control { +.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control { width:3.8em; cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-fullscreen-control:before { +.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control:before { content:"\e000" } -.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +.librevjs-libre-materialpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { content:"\e00b" } /*Centrado del button Play y personalizado*/ -.librevjs-libre-skin .librevjs-big-play-button { +.librevjs-libre-materialpurple-skin .librevjs-big-play-button { left: 50%; top: 40%; font-size: 10em; @@ -300,24 +300,24 @@ opacity: 1; color: #9c27b0; } /* Hide if controls are disabled */ -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { +.librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-big-play-button { display: none; } /* Hide when video starts playing */ -.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { +.librevjs-libre-materialpurple-skin.librevjs-has-started .librevjs-big-play-button { display: none; } /* Hide on mobile devices. Remove when we stop using native controls by default on mobile */ -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { +.librevjs-libre-materialpurple-skin.librevjs-using-native-controls .librevjs-big-play-button { display: none; } -.librevjs-libre-skin:hover .librevjs-big-play-button, -.librevjs-libre-skin .librevjs-big-play-button:focus { +.librevjs-libre-materialpurple-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialpurple-skin .librevjs-big-play-button:focus { color: rgb(142, 68, 173); /*color boton focus purpura oscuro*/ } -.librevjs-libre-skin .librevjs-big-play-button:before { +.librevjs-libre-materialpurple-skin .librevjs-big-play-button:before { content: "\e007"; font-family: LibreVideoJS; /* In order to center the play icon vertically we need to set the line height @@ -350,7 +350,7 @@ opacity:.75; -o-animation:spin 1.5s infinite linear; animation:spin 1.5s infinite linear } -.librevjs-libre-skin .librevjs-loading-spinner:before { +.librevjs-libre-materialpurple-skin .librevjs-loading-spinner:before { content:"\e01e"; font-family:LibreVideoJS; position:absolute; @@ -393,11 +393,11 @@ text-shadow:0 0 .1em #000 transform:rotate(359deg) } } -.librevjs-libre-skin .librevjs-menu-button { +.librevjs-libre-materialpurple-skin .librevjs-menu-button { float:right; cursor:pointer; } -.librevjs-libre-skin .librevjs-menu { +.librevjs-libre-materialpurple-skin .librevjs-menu { display:none; position:absolute; bottom:0; @@ -410,7 +410,7 @@ border-right:2em solid transparent; border-top:1.55em solid #000; border-top-color:rgba(7,40,50,.5); } -.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +.librevjs-libre-materialpurple-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { display:block; padding:0; margin:0; @@ -426,10 +426,10 @@ background-color:rgba(7,20,30,.7); -moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); } -.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu { +.librevjs-libre-materialpurple-skin .librevjs-menu-button:hover .librevjs-menu { display:block; } -.librevjs-libre-skin .librevjs-menu-button ul li { +.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li { list-style:none; margin:0; padding:.3em 0; @@ -437,20 +437,21 @@ line-height:1.4em; font-size:1.2em; text-align:center; text-transform:lowercase; +color: #ccc; } /*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { +.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected { color: #ffffff; background-color: rgb(156, 39, 176); } -.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover { +.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover { outline: 0; color: #fff; background-color: #9c27b0; } /*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { +.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-menu-title { text-align:center; text-transform:uppercase; font-size:1em; @@ -460,13 +461,13 @@ margin:0 0 .3em; font-weight:700; cursor:default; } -.librevjs-libre-skin .librevjs-subtitles-button:before { +.librevjs-libre-materialpurple-skin .librevjs-subtitles-button:before { content:"\e00c" } -.librevjs-libre-skin .librevjs-captions-button:before { +.librevjs-libre-materialpurple-skin .librevjs-captions-button:before { content:"\e008" } -.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before { +.librevjs-libre-materialpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialpurple-skin .librevjs-captions-button:hover .librevjs-control-content:before { -webkit-box-shadow:0 0 1em #fff; -moz-box-shadow:0 0 1em #fff; box-shadow:0 0 1em #fff; @@ -566,7 +567,7 @@ background-color: rgba(2, 7, 11, 0.7); .librevjs-tt-cue { display:block } -.librevjs-libre-skin .librevjs-hidden { +.librevjs-libre-materialpurple-skin .librevjs-hidden { display:none } .librevjs-lock-showing { @@ -582,11 +583,13 @@ padding: 130px 10px 20px; text-align: center; } /*title de resolucion | subtitles y Caption*/ -ul li.librevjs-menu-title.librevjs-res-menu-title{ +.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ color:#9c27b0; +background-color: inherit; } -ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ color:#8e44ad; +background-color: inherit; } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { @@ -623,7 +626,7 @@ left: 0; .cliplibre-js .librevjs-text-track{ font-size: 0.9em; } - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ font-size: 5em; top: 45%; } @@ -637,17 +640,17 @@ left: 0; } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { + .librevjs-libre-materialpurple-skin .librevjs-big-play-button { top:35%; } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ font-size: 3em; } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ font-size: 2em; } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-purple.min.css b/librevideojs/css/librevideojs-material/libre-skin-purple.min.css deleted file mode 100644 index 96b1b0e..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-purple.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = Purple -Version 1.2 -Escrito por Jesús Eduardo -*/.librevjs-libre-skin{color:#ccc;background-color:inherit}@font-face{font-family:"LibreVideoJS";src:url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");src:local('?'),url("../../fonts/libre-material/libre-icons.woff") format("woff"),url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),url("../../fonts/libre-material/libre-icons.svg") format("svg")}.librevjs-libre-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-skin .librevjs-control:before{font-family:LibreVideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#9c27b0}.librevjs-libre-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#9c27b0}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#8e44ad}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#9c27b0 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-libre-skin .librevjs-progress-holder{height:100%}.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-skin .librevjs-play-progress{background:#9c27b0 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-skin .librevjs-current-time{float:left}.librevjs-libre-skin .librevjs-duration{float:left}.librevjs-libre-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-skin .librevjs-big-play-button{left:50%;top:40%;font-size:10em;display:block;z-index:2;position:absolute;width:1em;height:1em;margin-left:-0.5em;margin-top:-0.5em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;color:#9c27b0}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-skin:hover .librevjs-big-play-button,.librevjs-libre-skin .librevjs-big-play-button:focus{color:#8e44ad}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.librevjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;font-size:4em;line-height:1;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;opacity:.75;-webkit-animation:spin 1.5s infinite linear;-moz-animation:spin 1.5s infinite linear;-o-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear}.librevjs-libre-skin .librevjs-loading-spinner:before{content:"\e01e";font-family:LibreVideoJS;position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.librevjs-libre-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#9c27b0}.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#9c27b0}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-libre-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.cliplibre-js{background-color:#000;position:relative;padding:0;font-size:10px;vertical-align:middle;font-weight:500;font-style:normal;font-family:Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cliplibre-js .librevjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.cliplibre-js:-moz-full-screen{position:absolute}body.librevjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.cliplibre-js.librevjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important;position:absolute}.cliplibre-js:-webkit-full-screen{width:100%!important;height:100%!important}.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive{cursor:none}.librevjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;cursor:pointer;height:100%;margin:0;padding:0;position:relative;width:100%}.librevjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.cliplibre-js.librevjs-using-native-controls .librevjs-poster{display:none}.cliplibre-js .librevjs-text-track-display{text-align:center;position:absolute;bottom:4em;left:1em;right:1em}.cliplibre-js .librevjs-text-track{display:none;font-size:1.5em;text-align:center;margin-bottom:.1em;background-color:#000;background-color:rgba(0,0,0,.6)}.cliplibre-js .librevjs-subtitles{color:#fff}.cliplibre-js .librevjs-captions{color:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-skin .librevjs-hidden{display:none}.librevjs-lock-showing{display:block!important;opacity:1;visibility:visible}.no_html5{background:black none repeat scroll 0 0;color:white;height:160px;padding:130px 10px 20px;text-align:center}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#9c27b0}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#8e44ad}.cliplibre-js-responsive-container.librevjs-hd{padding-top:56.25%}.cliplibre-js-responsive-container.librevjs-sd{padding-top:75%}.cliplibre-js-responsive-container{width:100%;position:relative}.cliplibre-js-responsive-container .cliplibre-js{height:100%!important;width:100%!important;position:absolute;top:0;left:0}@media screen and (max-width:600px){.cliplibre-js .librevjs-text-track{font-size:1.2em}.cliplibre-js .librevjs-text-track-display{bottom:2em}}@media screen and (max-width:413px){.cliplibre-js{font-size:8px}}@media screen and (max-width:400px){.cliplibre-js .librevjs-text-track{font-size:.9em}.librevjs-libre-skin .librevjs-big-play-button{font-size:5em;top:45%}.cliplibre-js .librevjs-text-track-display{bottom:1em}}@media screen and (max-width:335px){.cliplibre-js{font-size:6px}}@media screen and (max-width:200px){.librevjs-libre-skin .librevjs-big-play-button{top:35%}}@media screen and (max-width:150px){.librevjs-libre-skin .librevjs-big-play-button{font-size:3em}}@media screen and (max-width:90px){.librevjs-libre-skin .librevjs-big-play-button{font-size:2em}}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-red.css b/librevideojs/css/librevideojs-material/libre-skin-red.css index 5b70036..2a14676 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-red.css +++ b/librevideojs/css/librevideojs-material/libre-skin-red.css @@ -3,7 +3,7 @@ LibreVideoJS Estilos personalizados = Red Version 1.2 Escrito por Jesús Eduardo */ -.librevjs-libre-skin { +.librevjs-libre-materialred-skin { color:#ccc; background-color: inherit; } @@ -15,7 +15,7 @@ src: local('?'), url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), url("../../fonts/libre-material/libre-icons.svg") format("svg"); } -.librevjs-libre-skin .librevjs-slider { +.librevjs-libre-materialred-skin .librevjs-slider { /* Replace browser focus highlight with handle highlight */ outline: 0; position: relative; @@ -25,18 +25,18 @@ padding: 0; background-color: #000000; background-color: rgba(0, 0, 0, 0.5); } -.librevjs-libre-skin .librevjs-slider:focus { +.librevjs-libre-materialred-skin .librevjs-slider:focus { -webkit-box-shadow:0 0 2em #fff; -moz-box-shadow:0 0 2em #fff; box-shadow:0 0 2em #fff } /*Eliminación de botón de barra de progreso*/ -.librevjs-libre-skin .librevjs-slider-handle { +.librevjs-libre-materialred-skin .librevjs-slider-handle { width: 0; height: 0; } -.librevjs-libre-skin .librevjs-slider-handle:before { +.librevjs-libre-materialred-skin .librevjs-slider-handle:before { text-shadow: 0em 0em 1em #fff; position: absolute; top: 0; @@ -44,7 +44,7 @@ left: 0; } /* control bar */ -.librevjs-libre-skin .librevjs-control-bar { +.librevjs-libre-materialred-skin .librevjs-control-bar { /* Start hidden */ display: none; position: absolute; @@ -60,7 +60,7 @@ height: 3.0em; background-color: #232323; background-color: rgba(35, 35, 35, 0.8); } -.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { +.librevjs-libre-materialred-skin.librevjs-has-started .librevjs-control-bar { display:block; visibility:visible; opacity:1; @@ -69,7 +69,7 @@ opacity:1; -o-transition:visibility .1s,opacity .1s; transition:visibility .1s,opacity .1s } -.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +.librevjs-libre-materialred-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { display:block; visibility:hidden; opacity:0; @@ -78,18 +78,18 @@ opacity:0; -o-transition:visibility 1s,opacity 1s; transition:visibility 1s,opacity 1s } -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { +.librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-control-bar { display:none } -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { +.librevjs-libre-materialred-skin.librevjs-using-native-controls .librevjs-control-bar { display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + .librevjs-libre-materialred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { content:"" } } -.librevjs-libre-skin .librevjs-control { +.librevjs-libre-materialred-skin .librevjs-control { outline:0; position:relative; float:left; @@ -99,7 +99,7 @@ padding:0; height:3em; width:4em } -.librevjs-libre-skin .librevjs-control:before { +.librevjs-libre-materialred-skin .librevjs-control:before { font-family:LibreVideoJS; font-size:1.5em; line-height:2; @@ -112,13 +112,13 @@ text-align:center; text-shadow:1px 1px 1px rgba(0,0,0,.5) } /*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before { +.librevjs-libre-materialred-skin .librevjs-control:focus:before,.librevjs-libre-materialred-skin .librevjs-control:hover:before { color: #f44336; } /*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus { +.librevjs-libre-materialred-skin .librevjs-control:focus { } -.librevjs-libre-skin .librevjs-control-text { +.librevjs-libre-materialred-skin .librevjs-control-text { border:0; clip:rect(0 0 0 0); height:1px; @@ -130,52 +130,52 @@ width:1px } /*Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-play-control { +.librevjs-libre-materialred-skin .librevjs-play-control { width:5em; cursor:pointer; color: rgb(244, 67, 54); } -.librevjs-libre-skin .librevjs-play-control:before { +.librevjs-libre-materialred-skin .librevjs-play-control:before { content:"\e001" } -.librevjs-libre-skin .librevjs-play-control:hover:before { +.librevjs-libre-materialred-skin .librevjs-play-control:hover:before { color:#f22e1f; /*color de play control al pasar el cursor*/ } -.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { +.librevjs-libre-materialred-skin.librevjs-playing .librevjs-play-control:before { content:"\e002" } /*END Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button { +.librevjs-libre-materialred-skin .librevjs-mute-control,.librevjs-libre-materialred-skin .librevjs-volume-menu-button { cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { +.librevjs-libre-materialred-skin .librevjs-mute-control:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button:before { content:"\e006" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-0:before { content:"\e003" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-1:before { content:"\e004" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-2:before { content:"\e005" } -.librevjs-libre-skin .librevjs-volume-control { +.librevjs-libre-materialred-skin .librevjs-volume-control { width:5em; float:right } -.librevjs-libre-skin .librevjs-volume-bar { +.librevjs-libre-materialred-skin .librevjs-volume-bar { width:5em; height:.6em; margin:1.1em auto 0 } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { +.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu-content { height:2.9em } /*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-level { +.librevjs-libre-materialred-skin .librevjs-volume-level { position: absolute; top: 0; left: 0; @@ -186,22 +186,22 @@ width: 100%; background: #f44336 url() -50% 0 repeat; /*color de barra volumen*/ } /*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { +.librevjs-libre-materialred-skin .librevjs-volume-bar .librevjs-volume-handle { width:.5em; height:.5em } -.librevjs-libre-skin .librevjs-volume-handle:before { +.librevjs-libre-materialred-skin .librevjs-volume-handle:before { font-size:.9em; top:-.2em; left:-.2em; width:1em; height:1em } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { width:6em; left:-4em } -.librevjs-libre-skin .librevjs-progress-control { +.librevjs-libre-materialred-skin .librevjs-progress-control { position:absolute; left:0; right:0; @@ -214,17 +214,17 @@ top:-1em; -o-transition:all .4s; transition:all .4s } -.librevjs-libre-skin:hover .librevjs-progress-control { +.librevjs-libre-materialred-skin:hover .librevjs-progress-control { font-size:.9em; -webkit-transition:all .2s; -moz-transition:all .2s; -o-transition:all .2s; transition:all .2s } -.librevjs-libre-skin .librevjs-progress-holder { +.librevjs-libre-materialred-skin .librevjs-progress-holder { height:100% } -.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { +.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-load-progress { position:absolute; display:block; height:100%; @@ -235,32 +235,32 @@ top:0 } /* Personalización de barra de progreso a color rojo */ -.librevjs-libre-skin .librevjs-play-progress { +.librevjs-libre-materialred-skin .librevjs-play-progress { background: #f44336 url() -50% 0 repeat; } -.librevjs-libre-skin .librevjs-load-progress { +.librevjs-libre-materialred-skin .librevjs-load-progress { background:#646464; background:rgba(255,255,255,.4) } -.librevjs-libre-skin .librevjs-seek-handle { +.librevjs-libre-materialred-skin .librevjs-seek-handle { width:1.5em; height:100% } -.librevjs-libre-skin .librevjs-seek-handle:before { +.librevjs-libre-materialred-skin .librevjs-seek-handle:before { padding-top:.1em } -.librevjs-libre-skin .librevjs-time-controls { +.librevjs-libre-materialred-skin .librevjs-time-controls { font-size:1em; font-weight: 700;/*mayor visibilidad*/ line-height:3em } -.librevjs-libre-skin .librevjs-current-time { +.librevjs-libre-materialred-skin .librevjs-current-time { float:left } -.librevjs-libre-skin .librevjs-duration { +.librevjs-libre-materialred-skin .librevjs-duration { float:left } -.librevjs-libre-skin .librevjs-remaining-time { +.librevjs-libre-materialred-skin .librevjs-remaining-time { display:none; float:left } @@ -268,20 +268,20 @@ float:left float:left; line-height:3em } -.librevjs-libre-skin .librevjs-fullscreen-control { +.librevjs-libre-materialred-skin .librevjs-fullscreen-control { width:3.8em; cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-fullscreen-control:before { +.librevjs-libre-materialred-skin .librevjs-fullscreen-control:before { content:"\e000" } -.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +.librevjs-libre-materialred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { content:"\e00b" } /*Centrado del button Play y personalizado*/ -.librevjs-libre-skin .librevjs-big-play-button { +.librevjs-libre-materialred-skin .librevjs-big-play-button { left: 50%; top: 40%; font-size: 10em; @@ -299,23 +299,23 @@ opacity: 1; color: #f44336; } /* Hide if controls are disabled */ -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { +.librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-big-play-button { display: none; } /* Hide when video starts playing */ -.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { +.librevjs-libre-materialred-skin.librevjs-has-started .librevjs-big-play-button { display: none; } /* Hide on mobile devices. Remove when we stop using native controls by default on mobile */ -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { +.librevjs-libre-materialred-skin.librevjs-using-native-controls .librevjs-big-play-button { display: none; } -.librevjs-libre-skin:hover .librevjs-big-play-button, -.librevjs-libre-skin .librevjs-big-play-button:focus { +.librevjs-libre-materialred-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialred-skin .librevjs-big-play-button:focus { color: rgba(244, 67, 54, 0.89); /*color boton focus*/ } -.librevjs-libre-skin .librevjs-big-play-button:before { +.librevjs-libre-materialred-skin .librevjs-big-play-button:before { content: "\e007"; font-family: LibreVideoJS; /* In order to center the play icon vertically we need to set the line height @@ -348,7 +348,7 @@ opacity:.75; -o-animation:spin 1.5s infinite linear; animation:spin 1.5s infinite linear; } -.librevjs-libre-skin .librevjs-loading-spinner:before { +.librevjs-libre-materialred-skin .librevjs-loading-spinner:before { content:"\e01e"; font-family:LibreVideoJS; position:absolute; @@ -391,11 +391,11 @@ text-shadow:0 0 .1em #000; transform:rotate(359deg) } } -.librevjs-libre-skin .librevjs-menu-button { +.librevjs-libre-materialred-skin .librevjs-menu-button { float:right; cursor:pointer } -.librevjs-libre-skin .librevjs-menu { +.librevjs-libre-materialred-skin .librevjs-menu { display:none; position:absolute; bottom:0; @@ -408,7 +408,7 @@ border-right:2em solid transparent; border-top:1.55em solid #000; border-top-color:rgba(7,40,50,.5) } -.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +.librevjs-libre-materialred-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { display:block; padding:0; margin:0; @@ -424,31 +424,32 @@ background-color:rgba(7,20,30,.7); -moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); box-shadow:-.2em -.2em .3em rgba(255,255,255,.2) } -.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu { +.librevjs-libre-materialred-skin .librevjs-menu-button:hover .librevjs-menu { display:block } -.librevjs-libre-skin .librevjs-menu-button ul li { +.librevjs-libre-materialred-skin .librevjs-menu-button ul li { list-style:none; margin:0; padding:.3em 0; line-height:1.4em; font-size:1.2em; text-align:center; -text-transform:lowercase +text-transform:lowercase; +color:#ccc; } /*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { +.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected { color: #ffffff; background-color: rgb(244, 67, 54); } -.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover { +.librevjs-libre-materialred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:hover { outline: 0; color: #fff; background-color: #f44336; } /*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { +.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-menu-title { text-align:center; text-transform:uppercase; font-size:1em; @@ -458,13 +459,13 @@ margin:0 0 .3em; font-weight:700; cursor:default } -.librevjs-libre-skin .librevjs-subtitles-button:before { +.librevjs-libre-materialred-skin .librevjs-subtitles-button:before { content:"\e00c" } -.librevjs-libre-skin .librevjs-captions-button:before { +.librevjs-libre-materialred-skin .librevjs-captions-button:before { content:"\e008" } -.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before { +.librevjs-libre-materialred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialred-skin .librevjs-captions-button:hover .librevjs-control-content:before { -webkit-box-shadow:0 0 1em #fff; -moz-box-shadow:0 0 1em #fff; box-shadow:0 0 1em #fff @@ -564,7 +565,7 @@ background-color: rgba(2, 7, 11, 0.7); .librevjs-tt-cue { display:block } -.librevjs-libre-skin .librevjs-hidden { +.librevjs-libre-materialred-skin .librevjs-hidden { display:none } .librevjs-lock-showing { @@ -580,11 +581,13 @@ padding: 130px 10px 20px; text-align: center; } /*title de resolucion | subtitles y Caption*/ -ul li.librevjs-menu-title.librevjs-res-menu-title{ +.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ color: rgb(246, 44, 30); +background-color: inherit; } -ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ color: rgb(244, 67, 54); +background-color: inherit; } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { @@ -621,7 +624,7 @@ left: 0; .cliplibre-js .librevjs-text-track{ font-size: 0.9em; } - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialred-skin .librevjs-big-play-button{ font-size: 5em; top: 45%; } @@ -635,17 +638,17 @@ left: 0; } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { + .librevjs-libre-materialred-skin .librevjs-big-play-button { top:35%; } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialred-skin .librevjs-big-play-button{ font-size: 3em; } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialred-skin .librevjs-big-play-button{ font-size: 2em; } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-red.min.css b/librevideojs/css/librevideojs-material/libre-skin-red.min.css deleted file mode 100644 index 21c4d27..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-red.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = Red -Version 1.2 -Escrito por Jesús Eduardo -*/.librevjs-libre-skin{color:#ccc;background-color:inherit}@font-face{font-family:"LibreVideoJS";src:url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");src:local('?'),url("../../fonts/libre-material/libre-icons.woff") format("woff"),url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),url("../../fonts/libre-material/libre-icons.svg") format("svg")}.librevjs-libre-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-skin .librevjs-control:before{font-family:LibreVideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#f44336}.librevjs-libre-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#f44336}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#f22e1f}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#f44336 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-libre-skin .librevjs-progress-holder{height:100%}.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-skin .librevjs-play-progress{background:#f44336 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-skin .librevjs-current-time{float:left}.librevjs-libre-skin .librevjs-duration{float:left}.librevjs-libre-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-skin .librevjs-big-play-button{left:50%;top:40%;font-size:10em;display:block;z-index:2;position:absolute;width:1em;height:1em;margin-left:-0.5em;margin-top:-0.5em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;color:#f44336}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-skin:hover .librevjs-big-play-button,.librevjs-libre-skin .librevjs-big-play-button:focus{color:rgba(244,67,54,0.89)}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.librevjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;font-size:4em;line-height:1;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;opacity:.75;-webkit-animation:spin 1.5s infinite linear;-moz-animation:spin 1.5s infinite linear;-o-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear}.librevjs-libre-skin .librevjs-loading-spinner:before{content:"\e01e";font-family:LibreVideoJS;position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.librevjs-libre-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#f44336}.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#f44336}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-libre-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.cliplibre-js{background-color:#000;position:relative;padding:0;font-size:10px;vertical-align:middle;font-weight:500;font-style:normal;font-family:Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cliplibre-js .librevjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.cliplibre-js:-moz-full-screen{position:absolute}body.librevjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.cliplibre-js.librevjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important;position:absolute}.cliplibre-js:-webkit-full-screen{width:100%!important;height:100%!important}.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive{cursor:none}.librevjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;cursor:pointer;height:100%;margin:0;padding:0;position:relative;width:100%}.librevjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.cliplibre-js.librevjs-using-native-controls .librevjs-poster{display:none}.cliplibre-js .librevjs-text-track-display{text-align:center;position:absolute;bottom:4em;left:1em;right:1em}.cliplibre-js .librevjs-text-track{display:none;font-size:1.5em;text-align:center;margin-bottom:.1em;background-color:#000;background-color:rgba(0,0,0,.6)}.cliplibre-js .librevjs-subtitles{color:#fff}.cliplibre-js .librevjs-captions{color:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-skin .librevjs-hidden{display:none}.librevjs-lock-showing{display:block!important;opacity:1;visibility:visible}.no_html5{background:black none repeat scroll 0 0;color:white;height:160px;padding:130px 10px 20px;text-align:center}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#f62c1e}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#f44336}.cliplibre-js-responsive-container.librevjs-hd{padding-top:56.25%}.cliplibre-js-responsive-container.librevjs-sd{padding-top:75%}.cliplibre-js-responsive-container{width:100%;position:relative}.cliplibre-js-responsive-container .cliplibre-js{height:100%!important;width:100%!important;position:absolute;top:0;left:0}@media screen and (max-width:600px){.cliplibre-js .librevjs-text-track{font-size:1.2em}.cliplibre-js .librevjs-text-track-display{bottom:2em}}@media screen and (max-width:413px){.cliplibre-js{font-size:8px}}@media screen and (max-width:400px){.cliplibre-js .librevjs-text-track{font-size:.9em}.librevjs-libre-skin .librevjs-big-play-button{font-size:5em;top:45%}.cliplibre-js .librevjs-text-track-display{bottom:1em}}@media screen and (max-width:335px){.cliplibre-js{font-size:6px}}@media screen and (max-width:200px){.librevjs-libre-skin .librevjs-big-play-button{top:35%}}@media screen and (max-width:150px){.librevjs-libre-skin .librevjs-big-play-button{font-size:3em}}@media screen and (max-width:90px){.librevjs-libre-skin .librevjs-big-play-button{font-size:2em}}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-teal.css b/librevideojs/css/librevideojs-material/libre-skin-teal.css index a3c4292..d36a6ac 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-teal.css +++ b/librevideojs/css/librevideojs-material/libre-skin-teal.css @@ -3,7 +3,7 @@ LibreVideoJS Estilos personalizados = Teal Version 1.2 Escrito por Jesús Eduardo */ -.librevjs-libre-skin { +.librevjs-libre-materialteal-skin { color:#ccc; background-color: inherit; } @@ -15,7 +15,7 @@ src: local('?'), url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), url("../../fonts/libre-material/libre-icons.svg") format("svg"); } -.librevjs-libre-skin .librevjs-slider { +.librevjs-libre-materialteal-skin .librevjs-slider { /* Replace browser focus highlight with handle highlight */ outline: 0; position: relative; @@ -25,18 +25,18 @@ padding: 0; background-color: #000000; background-color: rgba(0, 0, 0, 0.5); } -.librevjs-libre-skin .librevjs-slider:focus { +.librevjs-libre-materialteal-skin .librevjs-slider:focus { -webkit-box-shadow:0 0 2em #fff; -moz-box-shadow:0 0 2em #fff; box-shadow:0 0 2em #fff; } /*Eliminación de botón de barra de progreso*/ -.librevjs-libre-skin .librevjs-slider-handle { +.librevjs-libre-materialteal-skin .librevjs-slider-handle { width: 0; height: 0; } -.librevjs-libre-skin .librevjs-slider-handle:before { +.librevjs-libre-materialteal-skin .librevjs-slider-handle:before { text-shadow: 0em 0em 1em #fff; position: absolute; top: 0; @@ -44,7 +44,7 @@ left: 0; } /* control bar */ -.librevjs-libre-skin .librevjs-control-bar { +.librevjs-libre-materialteal-skin .librevjs-control-bar { /* Start hidden */ display: none; position: absolute; @@ -60,7 +60,7 @@ height: 3.0em; background-color: #232323; background-color: rgba(35, 35, 35, 0.8); } -.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { +.librevjs-libre-materialteal-skin.librevjs-has-started .librevjs-control-bar { display:block; visibility:visible; opacity:1; @@ -69,7 +69,7 @@ opacity:1; -o-transition:visibility .1s,opacity .1s; transition:visibility .1s,opacity .1s } -.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +.librevjs-libre-materialteal-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { display:block; visibility:hidden; opacity:0; @@ -78,18 +78,18 @@ opacity:0; -o-transition:visibility 1s,opacity 1s; transition:visibility 1s,opacity 1s } -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { +.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-control-bar { display:none } -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { +.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-control-bar { display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + .librevjs-libre-materialteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { content:"" } } -.librevjs-libre-skin .librevjs-control { +.librevjs-libre-materialteal-skin .librevjs-control { outline:0; position:relative; float:left; @@ -99,7 +99,7 @@ padding:0; height:3em; width:4em } -.librevjs-libre-skin .librevjs-control:before { +.librevjs-libre-materialteal-skin .librevjs-control:before { font-family:LibreVideoJS; font-size:1.5em; line-height:2; @@ -112,13 +112,13 @@ text-align:center; text-shadow:1px 1px 1px rgba(0,0,0,.5) } /*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before { +.librevjs-libre-materialteal-skin .librevjs-control:focus:before,.librevjs-libre-materialteal-skin .librevjs-control:hover:before { color: #1de9b6; } /*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus { +.librevjs-libre-materialteal-skin .librevjs-control:focus { } -.librevjs-libre-skin .librevjs-control-text { +.librevjs-libre-materialteal-skin .librevjs-control-text { border:0; clip:rect(0 0 0 0); height:1px; @@ -130,52 +130,52 @@ width:1px } /*Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-play-control { +.librevjs-libre-materialteal-skin .librevjs-play-control { width:5em; cursor:pointer; color:rgb(29, 233, 182); } -.librevjs-libre-skin .librevjs-play-control:before { +.librevjs-libre-materialteal-skin .librevjs-play-control:before { content:"\e001" } -.librevjs-libre-skin .librevjs-play-control:hover:before { +.librevjs-libre-materialteal-skin .librevjs-play-control:hover:before { color:#007c5d; /*color de play control al pasar el cursor*/ } -.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { +.librevjs-libre-materialteal-skin.librevjs-playing .librevjs-play-control:before { content:"\e002" } /*END Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button { +.librevjs-libre-materialteal-skin .librevjs-mute-control,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button { cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { +.librevjs-libre-materialteal-skin .librevjs-mute-control:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button:before { content:"\e006" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before { content:"\e003" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before { content:"\e004" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before { content:"\e005" } -.librevjs-libre-skin .librevjs-volume-control { +.librevjs-libre-materialteal-skin .librevjs-volume-control { width:5em; float:right } -.librevjs-libre-skin .librevjs-volume-bar { +.librevjs-libre-materialteal-skin .librevjs-volume-bar { width:5em; height:.6em; margin:1.1em auto 0 } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { +.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu-content { height:2.9em } /*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-level { +.librevjs-libre-materialteal-skin .librevjs-volume-level { position: absolute; top: 0; left: 0; @@ -186,22 +186,22 @@ width: 100%; background: #1de9b6 url() -50% 0 repeat; } /*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { +.librevjs-libre-materialteal-skin .librevjs-volume-bar .librevjs-volume-handle { width:.5em; height:.5em } -.librevjs-libre-skin .librevjs-volume-handle:before { +.librevjs-libre-materialteal-skin .librevjs-volume-handle:before { font-size:.9em; top:-.2em; left:-.2em; width:1em; height:1em; } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { width:6em; left:-4em; } -.librevjs-libre-skin .librevjs-progress-control { +.librevjs-libre-materialteal-skin .librevjs-progress-control { position:absolute; left:0; right:0; @@ -214,17 +214,17 @@ top:-1em; -o-transition:all .4s; transition:all .4s; } -.librevjs-libre-skin:hover .librevjs-progress-control { +.librevjs-libre-materialteal-skin:hover .librevjs-progress-control { font-size:.9em; -webkit-transition:all .2s; -moz-transition:all .2s; -o-transition:all .2s; transition:all .2s; } -.librevjs-libre-skin .librevjs-progress-holder { +.librevjs-libre-materialteal-skin .librevjs-progress-holder { height:100%; } -.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { +.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-load-progress { position:absolute; display:block; height:100%; @@ -235,32 +235,32 @@ top:0 } /* Personalización de barra de progreso a color azul */ -.librevjs-libre-skin .librevjs-play-progress { +.librevjs-libre-materialteal-skin .librevjs-play-progress { background: #1de9b6 url() -50% 0 repeat; } -.librevjs-libre-skin .librevjs-load-progress { +.librevjs-libre-materialteal-skin .librevjs-load-progress { background:#646464; background:rgba(255,255,255,.4) } -.librevjs-libre-skin .librevjs-seek-handle { +.librevjs-libre-materialteal-skin .librevjs-seek-handle { width:1.5em; height:100% } -.librevjs-libre-skin .librevjs-seek-handle:before { +.librevjs-libre-materialteal-skin .librevjs-seek-handle:before { padding-top:.1em } -.librevjs-libre-skin .librevjs-time-controls { +.librevjs-libre-materialteal-skin .librevjs-time-controls { font-size:1em; font-weight: 700;/*mayor visibilidad*/ line-height:3em } -.librevjs-libre-skin .librevjs-current-time { +.librevjs-libre-materialteal-skin .librevjs-current-time { float:left } -.librevjs-libre-skin .librevjs-duration { +.librevjs-libre-materialteal-skin .librevjs-duration { float:left } -.librevjs-libre-skin .librevjs-remaining-time { +.librevjs-libre-materialteal-skin .librevjs-remaining-time { display:none; float:left } @@ -268,20 +268,20 @@ float:left float:left; line-height:3em } -.librevjs-libre-skin .librevjs-fullscreen-control { +.librevjs-libre-materialteal-skin .librevjs-fullscreen-control { width:3.8em; cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-fullscreen-control:before { +.librevjs-libre-materialteal-skin .librevjs-fullscreen-control:before { content:"\e000" } -.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +.librevjs-libre-materialteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { content:"\e00b" } /*Centrado del button Play y personalizado*/ -.librevjs-libre-skin .librevjs-big-play-button { +.librevjs-libre-materialteal-skin .librevjs-big-play-button { left: 50%; top: 40%; font-size: 10em; @@ -299,23 +299,23 @@ opacity: 1; color: #1abc9c; } /* Hide if controls are disabled */ -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { +.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-big-play-button { display: none; } /* Hide when video starts playing */ -.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { +.librevjs-libre-materialteal-skin.librevjs-has-started .librevjs-big-play-button { display: none; } /* Hide on mobile devices. Remove when we stop using native controls by default on mobile */ -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { +.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-big-play-button { display: none; } -.librevjs-libre-skin:hover .librevjs-big-play-button, -.librevjs-libre-skin .librevjs-big-play-button:focus { +.librevjs-libre-materialteal-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialteal-skin .librevjs-big-play-button:focus { color: #16a085; } -.librevjs-libre-skin .librevjs-big-play-button:before { +.librevjs-libre-materialteal-skin .librevjs-big-play-button:before { content: "\e007"; font-family: LibreVideoJS; /* In order to center the play icon vertically we need to set the line height @@ -348,7 +348,7 @@ opacity:.75; -o-animation:spin 1.5s infinite linear; animation:spin 1.5s infinite linear } -.librevjs-libre-skin .librevjs-loading-spinner:before { +.librevjs-libre-materialteal-skin .librevjs-loading-spinner:before { content:"\e01e"; font-family:LibreVideoJS; position:absolute; @@ -391,11 +391,11 @@ text-shadow:0 0 .1em #000 transform:rotate(359deg) } } -.librevjs-libre-skin .librevjs-menu-button { +.librevjs-libre-materialteal-skin .librevjs-menu-button { float:right; cursor:pointer; } -.librevjs-libre-skin .librevjs-menu { +.librevjs-libre-materialteal-skin .librevjs-menu { display:none; position:absolute; bottom:0; @@ -408,7 +408,7 @@ border-right:2em solid transparent; border-top:1.55em solid #000; border-top-color:rgba(7,40,50,.5); } -.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +.librevjs-libre-materialteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { display:block; padding:0; margin:0; @@ -424,10 +424,10 @@ background-color:rgba(7,20,30,.7); -moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); } -.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu { +.librevjs-libre-materialteal-skin .librevjs-menu-button:hover .librevjs-menu { display:block; } -.librevjs-libre-skin .librevjs-menu-button ul li { +.librevjs-libre-materialteal-skin .librevjs-menu-button ul li { list-style:none; margin:0; padding:.3em 0; @@ -435,20 +435,21 @@ line-height:1.4em; font-size:1.2em; text-align:center; text-transform:lowercase; +color:#ccc; } /*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { +.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected { color: rgb(1, 56, 47); background-color: rgb(29, 233, 182); } -.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover { +.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:hover { outline: 0; color: #004d40; background-color: #1de9b6; } /*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { +.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-menu-title { text-align:center; text-transform:uppercase; font-size:1em; @@ -458,13 +459,13 @@ margin:0 0 .3em; font-weight:700; cursor:default; } -.librevjs-libre-skin .librevjs-subtitles-button:before { +.librevjs-libre-materialteal-skin .librevjs-subtitles-button:before { content:"\e00c" } -.librevjs-libre-skin .librevjs-captions-button:before { +.librevjs-libre-materialteal-skin .librevjs-captions-button:before { content:"\e008" } -.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before { +.librevjs-libre-materialteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialteal-skin .librevjs-captions-button:hover .librevjs-control-content:before { -webkit-box-shadow:0 0 1em #fff; -moz-box-shadow:0 0 1em #fff; box-shadow:0 0 1em #fff; @@ -564,7 +565,7 @@ background-color: rgba(2, 7, 11, 0.7); .librevjs-tt-cue { display:block } -.librevjs-libre-skin .librevjs-hidden { +.librevjs-libre-materialteal-skin .librevjs-hidden { display:none } .librevjs-lock-showing { @@ -581,11 +582,13 @@ text-align: center; } /*title de resolucion | subtitles y Caption*/ -ul li.librevjs-menu-title.librevjs-res-menu-title{ +.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ color:rgb(26, 187, 156); +background-color: inherit; } -ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ color: rgb(29, 233, 182); +background-color: inherit; } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { @@ -622,7 +625,7 @@ left: 0; .cliplibre-js .librevjs-text-track{ font-size: 0.9em; } - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialteal-skin .librevjs-big-play-button{ font-size: 5em; top: 45%; } @@ -636,17 +639,17 @@ left: 0; } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { + .librevjs-libre-materialteal-skin .librevjs-big-play-button { top:35%; } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialteal-skin .librevjs-big-play-button{ font-size: 3em; } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialteal-skin .librevjs-big-play-button{ font-size: 2em; } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-teal.min.css b/librevideojs/css/librevideojs-material/libre-skin-teal.min.css deleted file mode 100644 index 81a7d42..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-teal.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = Teal -Version 1.2 -Escrito por Jesús Eduardo -*/.librevjs-libre-skin{color:#ccc;background-color:inherit}@font-face{font-family:"LibreVideoJS";src:url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");src:local('?'),url("../../fonts/libre-material/libre-icons.woff") format("woff"),url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),url("../../fonts/libre-material/libre-icons.svg") format("svg")}.librevjs-libre-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-skin .librevjs-control:before{font-family:LibreVideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#1de9b6}.librevjs-libre-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#1de9b6}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#007c5d}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#1de9b6 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-libre-skin .librevjs-progress-holder{height:100%}.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-skin .librevjs-play-progress{background:#1de9b6 url() -50% 0 repeat}.librevjs-libre-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-skin .librevjs-current-time{float:left}.librevjs-libre-skin .librevjs-duration{float:left}.librevjs-libre-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-skin .librevjs-big-play-button{left:50%;top:40%;font-size:10em;display:block;z-index:2;position:absolute;width:1em;height:1em;margin-left:-0.5em;margin-top:-0.5em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;color:#1abc9c}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-skin:hover .librevjs-big-play-button,.librevjs-libre-skin .librevjs-big-play-button:focus{color:#16a085}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.librevjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;font-size:4em;line-height:1;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;opacity:.75;-webkit-animation:spin 1.5s infinite linear;-moz-animation:spin 1.5s infinite linear;-o-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear}.librevjs-libre-skin .librevjs-loading-spinner:before{content:"\e01e";font-family:LibreVideoJS;position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.librevjs-libre-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#01382f;background-color:#1de9b6}.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#004d40;background-color:#1de9b6}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-libre-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.cliplibre-js{background-color:#000;position:relative;padding:0;font-size:10px;vertical-align:middle;font-weight:500;font-style:normal;font-family:Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cliplibre-js .librevjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.cliplibre-js:-moz-full-screen{position:absolute}body.librevjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.cliplibre-js.librevjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important;position:absolute}.cliplibre-js:-webkit-full-screen{width:100%!important;height:100%!important}.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive{cursor:none}.librevjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;cursor:pointer;height:100%;margin:0;padding:0;position:relative;width:100%}.librevjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.cliplibre-js.librevjs-using-native-controls .librevjs-poster{display:none}.cliplibre-js .librevjs-text-track-display{text-align:center;position:absolute;bottom:4em;left:1em;right:1em}.cliplibre-js .librevjs-text-track{display:none;font-size:1.8em;text-align:center;margin-bottom:.1em;background-color:#000;background-color:rgba(0,0,0,.6)}.cliplibre-js .librevjs-subtitles{color:#fff}.cliplibre-js .librevjs-captions{color:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-skin .librevjs-hidden{display:none}.librevjs-lock-showing{display:block!important;opacity:1;visibility:visible}.no_html5{background:black none repeat scroll 0 0;color:white;height:160px;padding:130px 10px 20px;text-align:center}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#1abb9c}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#1de9b6}.cliplibre-js-responsive-container.librevjs-hd{padding-top:56.25%}.cliplibre-js-responsive-container.librevjs-sd{padding-top:75%}.cliplibre-js-responsive-container{width:100%;position:relative}.cliplibre-js-responsive-container .cliplibre-js{height:100%!important;width:100%!important;position:absolute;top:0;left:0}@media screen and (max-width:600px){.cliplibre-js .librevjs-text-track{font-size:1.2em}.cliplibre-js .librevjs-text-track-display{bottom:2em}}@media screen and (max-width:413px){.cliplibre-js{font-size:8px}}@media screen and (max-width:400px){.cliplibre-js .librevjs-text-track{font-size:.9em}.librevjs-libre-skin .librevjs-big-play-button{font-size:5em;top:45%}.cliplibre-js .librevjs-text-track-display{bottom:1em}}@media screen and (max-width:335px){.cliplibre-js{font-size:6px}}@media screen and (max-width:200px){.librevjs-libre-skin .librevjs-big-play-button{top:35%}}@media screen and (max-width:150px){.librevjs-libre-skin .librevjs-big-play-button{font-size:3em}}@media screen and (max-width:90px){.librevjs-libre-skin .librevjs-big-play-button{font-size:2em}}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/libre-skin-yellow.css b/librevideojs/css/librevideojs-material/libre-skin-yellow.css index 80c3591..22b2b08 100644 --- a/librevideojs/css/librevideojs-material/libre-skin-yellow.css +++ b/librevideojs/css/librevideojs-material/libre-skin-yellow.css @@ -3,7 +3,7 @@ LibreVideoJS Estilos personalizados = Yellow Version 1.2 Escrito por Jesús Eduardo */ -.librevjs-libre-skin { +.librevjs-libre-materialyellow-skin { color:#ccc; background-color: inherit; } @@ -15,7 +15,7 @@ src: local('?'), url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), url("../../fonts/libre-material/libre-icons.svg") format("svg"); } -.librevjs-libre-skin .librevjs-slider { +.librevjs-libre-materialyellow-skin .librevjs-slider { /* Replace browser focus highlight with handle highlight */ outline: 0; position: relative; @@ -25,18 +25,18 @@ padding: 0; background-color: #000000; background-color: rgba(0, 0, 0, 0.5); } -.librevjs-libre-skin .librevjs-slider:focus { +.librevjs-libre-materialyellow-skin .librevjs-slider:focus { -webkit-box-shadow:0 0 2em #fff; -moz-box-shadow:0 0 2em #fff; box-shadow:0 0 2em #fff; } /*Eliminación de botón de barra de progreso*/ -.librevjs-libre-skin .librevjs-slider-handle { +.librevjs-libre-materialyellow-skin .librevjs-slider-handle { width: 0; height: 0; } -.librevjs-libre-skin .librevjs-slider-handle:before { +.librevjs-libre-materialyellow-skin .librevjs-slider-handle:before { text-shadow: 0em 0em 1em #fff; position: absolute; top: 0; @@ -44,7 +44,7 @@ left: 0; } /* control bar */ -.librevjs-libre-skin .librevjs-control-bar { +.librevjs-libre-materialyellow-skin .librevjs-control-bar { /* Start hidden */ display: none; position: absolute; @@ -60,7 +60,7 @@ height: 3.0em; background-color: #232323; background-color: rgba(35, 35, 35, 0.8); } -.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar { +.librevjs-libre-materialyellow-skin.librevjs-has-started .librevjs-control-bar { display:block; visibility:visible; opacity:1; @@ -69,7 +69,7 @@ opacity:1; -o-transition:visibility .1s,opacity .1s; transition:visibility .1s,opacity .1s } -.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +.librevjs-libre-materialyellow-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { display:block; visibility:hidden; opacity:0; @@ -78,18 +78,18 @@ opacity:0; -o-transition:visibility 1s,opacity 1s; transition:visibility 1s,opacity 1s } -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar { +.librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-control-bar { display:none } -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar { +.librevjs-libre-materialyellow-skin.librevjs-using-native-controls .librevjs-control-bar { display:none } @media \0screen { - .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + .librevjs-libre-materialyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { content:"" } } -.librevjs-libre-skin .librevjs-control { +.librevjs-libre-materialyellow-skin .librevjs-control { outline:0; position:relative; float:left; @@ -99,7 +99,7 @@ padding:0; height:3em; width:4em } -.librevjs-libre-skin .librevjs-control:before { +.librevjs-libre-materialyellow-skin .librevjs-control:before { font-family:LibreVideoJS; font-size:1.5em; line-height:2; @@ -112,13 +112,13 @@ text-align:center; text-shadow:1px 1px 1px rgba(0,0,0,.5) } /*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before { +.librevjs-libre-materialyellow-skin .librevjs-control:focus:before,.librevjs-libre-materialyellow-skin .librevjs-control:hover:before { color: #f1c40f; } /*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/ -.librevjs-libre-skin .librevjs-control:focus { +.librevjs-libre-materialyellow-skin .librevjs-control:focus { } -.librevjs-libre-skin .librevjs-control-text { +.librevjs-libre-materialyellow-skin .librevjs-control-text { border:0; clip:rect(0 0 0 0); height:1px; @@ -130,52 +130,52 @@ width:1px } /*Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-play-control { +.librevjs-libre-materialyellow-skin .librevjs-play-control { width:5em; cursor:pointer; color: rgb(241, 196, 14); } -.librevjs-libre-skin .librevjs-play-control:before { +.librevjs-libre-materialyellow-skin .librevjs-play-control:before { content:"\e001" } -.librevjs-libre-skin .librevjs-play-control:hover:before { +.librevjs-libre-materialyellow-skin .librevjs-play-control:hover:before { color:#f39c12; /*color de play control al pasar el cursor*/ } -.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before { +.librevjs-libre-materialyellow-skin.librevjs-playing .librevjs-play-control:before { content:"\e002" } /*END Color y diseño de boton play control*/ -.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button { +.librevjs-libre-materialyellow-skin .librevjs-mute-control,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button { cursor:pointer; float:right } -.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before { +.librevjs-libre-materialyellow-skin .librevjs-mute-control:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button:before { content:"\e006" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before { content:"\e003" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before { content:"\e004" } -.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before { content:"\e005" } -.librevjs-libre-skin .librevjs-volume-control { +.librevjs-libre-materialyellow-skin .librevjs-volume-control { width:5em; float:right } -.librevjs-libre-skin .librevjs-volume-bar { +.librevjs-libre-materialyellow-skin .librevjs-volume-bar { width:5em; height:.6em; margin:1.1em auto 0; } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content { +.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu-content { height:2.9em; } /*PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-level { +.librevjs-libre-materialyellow-skin .librevjs-volume-level { position: absolute; top: 0; left: 0; @@ -186,22 +186,22 @@ width: 100%; background: #f1c40f url() -50% 0 repeat; /*color de barra volumen*/ } /*END PERSONALIZACION DE NIVEL DE VOLUMEN*/ -.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle { +.librevjs-libre-materialyellow-skin .librevjs-volume-bar .librevjs-volume-handle { width:.5em; height:.5em; } -.librevjs-libre-skin .librevjs-volume-handle:before { +.librevjs-libre-materialyellow-skin .librevjs-volume-handle:before { font-size:.9em; top:-.2em; left:-.2em; width:1em; height:1em } -.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { width:6em; left:-4em } -.librevjs-libre-skin .librevjs-progress-control { +.librevjs-libre-materialyellow-skin .librevjs-progress-control { position:absolute; left:0; right:0; @@ -214,17 +214,17 @@ top:-1em; -o-transition:all .4s; transition:all .4s; } -.librevjs-libre-skin:hover .librevjs-progress-control { +.librevjs-libre-materialyellow-skin:hover .librevjs-progress-control { font-size:.9em; -webkit-transition:all .2s; -moz-transition:all .2s; -o-transition:all .2s; transition:all .2s } -.librevjs-libre-skin .librevjs-progress-holder { +.librevjs-libre-materialyellow-skin .librevjs-progress-holder { height:100% } -.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress { +.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-load-progress { position:absolute; display:block; height:100%; @@ -235,32 +235,32 @@ top:0; } /* Personalización de barra de progreso a color amarillo */ -.librevjs-libre-skin .librevjs-play-progress { +.librevjs-libre-materialyellow-skin .librevjs-play-progress { background: #f1c40f url() -50% 0 repeat; } -.librevjs-libre-skin .librevjs-load-progress { +.librevjs-libre-materialyellow-skin .librevjs-load-progress { background:#646464; background:rgba(255,255,255,.4); } -.librevjs-libre-skin .librevjs-seek-handle { +.librevjs-libre-materialyellow-skin .librevjs-seek-handle { width:1.5em; height:100%; } -.librevjs-libre-skin .librevjs-seek-handle:before { +.librevjs-libre-materialyellow-skin .librevjs-seek-handle:before { padding-top:.1em } -.librevjs-libre-skin .librevjs-time-controls { +.librevjs-libre-materialyellow-skin .librevjs-time-controls { font-size:1em; font-weight: 700;/*mayor visibilidad*/ line-height:3em; } -.librevjs-libre-skin .librevjs-current-time { +.librevjs-libre-materialyellow-skin .librevjs-current-time { float:left } -.librevjs-libre-skin .librevjs-duration { +.librevjs-libre-materialyellow-skin .librevjs-duration { float:left } -.librevjs-libre-skin .librevjs-remaining-time { +.librevjs-libre-materialyellow-skin .librevjs-remaining-time { display:none; float:left; } @@ -268,20 +268,20 @@ float:left; float:left; line-height:3em } -.librevjs-libre-skin .librevjs-fullscreen-control { +.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control { width:3.8em; cursor:pointer; float:right; } -.librevjs-libre-skin .librevjs-fullscreen-control:before { +.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control:before { content:"\e000" } -.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +.librevjs-libre-materialyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { content:"\e00b" } /*Centrado del button Play y personalizado*/ -.librevjs-libre-skin .librevjs-big-play-button { +.librevjs-libre-materialyellow-skin .librevjs-big-play-button { left: 50%; top: 40%; font-size: 10em; @@ -299,23 +299,23 @@ opacity: 1; color: #f1c40f; } /* Hide if controls are disabled */ -.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button { +.librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-big-play-button { display: none; } /* Hide when video starts playing */ -.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button { +.librevjs-libre-materialyellow-skin.librevjs-has-started .librevjs-big-play-button { display: none; } /* Hide on mobile devices. Remove when we stop using native controls by default on mobile */ -.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button { +.librevjs-libre-materialyellow-skin.librevjs-using-native-controls .librevjs-big-play-button { display: none; } -.librevjs-libre-skin:hover .librevjs-big-play-button, -.librevjs-libre-skin .librevjs-big-play-button:focus { +.librevjs-libre-materialyellow-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialyellow-skin .librevjs-big-play-button:focus { color: rgb(244, 156, 18); /*color boton focus amarillo oscuro*/ } -.librevjs-libre-skin .librevjs-big-play-button:before { +.librevjs-libre-materialyellow-skin .librevjs-big-play-button:before { content: "\e007"; font-family: LibreVideoJS; /* In order to center the play icon vertically we need to set the line height @@ -348,7 +348,7 @@ opacity:.75; -o-animation:spin 1.5s infinite linear; animation:spin 1.5s infinite linear; } -.librevjs-libre-skin .librevjs-loading-spinner:before { +.librevjs-libre-materialyellow-skin .librevjs-loading-spinner:before { content:"\e01e"; font-family:LibreVideoJS; position:absolute; @@ -391,11 +391,11 @@ text-shadow:0 0 .1em #000; transform:rotate(359deg) } } -.librevjs-libre-skin .librevjs-menu-button { +.librevjs-libre-materialyellow-skin .librevjs-menu-button { float:right; cursor:pointer; } -.librevjs-libre-skin .librevjs-menu { +.librevjs-libre-materialyellow-skin .librevjs-menu { display:none; position:absolute; bottom:0; @@ -408,7 +408,7 @@ border-right:2em solid transparent; border-top:1.55em solid #000; border-top-color:rgba(7,40,50,.5); } -.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +.librevjs-libre-materialyellow-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { display:block; padding:0; margin:0; @@ -424,10 +424,10 @@ background-color:rgba(7,20,30,.7); -moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); } -.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu { +.librevjs-libre-materialyellow-skin .librevjs-menu-button:hover .librevjs-menu { display:block; } -.librevjs-libre-skin .librevjs-menu-button ul li { +.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li { list-style:none; margin:0; padding:.3em 0; @@ -435,20 +435,21 @@ line-height:1.4em; font-size:1.2em; text-align:center; text-transform:lowercase; +color:#ccc; } /*COLOR DE SELECCION DE SUBTIULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected { +.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected { color: #ffffff; background-color: rgb(241, 196, 14); } -.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover { +.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover { outline: 0; color: #fff; background-color: #f1c40f; } /*END COLOR SELECCION DE SUBTITULOS*/ -.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title { +.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-menu-title { text-align:center; text-transform:uppercase; font-size:1em; @@ -458,13 +459,13 @@ margin:0 0 .3em; font-weight:700; cursor:default; } -.librevjs-libre-skin .librevjs-subtitles-button:before { +.librevjs-libre-materialyellow-skin .librevjs-subtitles-button:before { content:"\e00c" } -.librevjs-libre-skin .librevjs-captions-button:before { +.librevjs-libre-materialyellow-skin .librevjs-captions-button:before { content:"\e008" } -.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before { +.librevjs-libre-materialyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialyellow-skin .librevjs-captions-button:hover .librevjs-control-content:before { -webkit-box-shadow:0 0 1em #fff; -moz-box-shadow:0 0 1em #fff; box-shadow:0 0 1em #fff @@ -564,7 +565,7 @@ background-color: rgba(2, 7, 11, 0.7); .librevjs-tt-cue { display:block } -.librevjs-libre-skin .librevjs-hidden { +.librevjs-libre-materialyellow-skin .librevjs-hidden { display:none } .librevjs-lock-showing { @@ -580,11 +581,13 @@ padding: 130px 10px 20px; text-align: center; } /*title de resolucion | subtitles y Caption*/ -ul li.librevjs-menu-title.librevjs-res-menu-title{ +.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ color:#f1c40f; +background-color: inherit; } -ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ color:#f39c12; +background-color: inherit; } /*Responsive*/ .cliplibre-js-responsive-container.librevjs-hd { @@ -621,7 +624,7 @@ left: 0; .cliplibre-js .librevjs-text-track{ font-size: 0.9em; } - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ font-size: 5em; top: 45%; } @@ -635,17 +638,17 @@ left: 0; } } @media screen and (max-width: 200px){ - .librevjs-libre-skin .librevjs-big-play-button { + .librevjs-libre-materialyellow-skin .librevjs-big-play-button { top:35%; } } @media screen and (max-width: 150px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ font-size: 3em; } } @media screen and (max-width: 90px){ - .librevjs-libre-skin .librevjs-big-play-button{ + .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ font-size: 2em; } } diff --git a/librevideojs/css/librevideojs-material/libre-skin-yellow.min.css b/librevideojs/css/librevideojs-material/libre-skin-yellow.min.css deleted file mode 100644 index 878d886..0000000 --- a/librevideojs/css/librevideojs-material/libre-skin-yellow.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados = Yellow -Version 1.2 -Escrito por Jesús Eduardo -*/.librevjs-libre-skin{color:#ccc;background-color:inherit}@font-face{font-family:"LibreVideoJS";src:url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");src:local('?'),url("../../fonts/libre-material/libre-icons.woff") format("woff"),url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),url("../../fonts/libre-material/libre-icons.svg") format("svg")}.librevjs-libre-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-skin .librevjs-control:before{font-family:LibreVideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-libre-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before{color:#f1c40f}.librevjs-libre-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-skin .librevjs-play-control{width:5em;cursor:pointer;color:#f1c40e}.librevjs-libre-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-skin .librevjs-play-control:hover:before{color:#f39c12}.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#f1c40f url() -50% 0 repeat}.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-libre-skin .librevjs-progress-holder{height:100%}.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-skin .librevjs-play-progress{background:#f1c40f url() -50% 0 repeat}.librevjs-libre-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-skin .librevjs-current-time{float:left}.librevjs-libre-skin .librevjs-duration{float:left}.librevjs-libre-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em}.librevjs-libre-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-skin .librevjs-big-play-button{left:50%;top:40%;font-size:10em;display:block;z-index:2;position:absolute;width:1em;height:1em;margin-left:-0.5em;margin-top:-0.5em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;color:#f1c40f}.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-skin:hover .librevjs-big-play-button,.librevjs-libre-skin .librevjs-big-play-button:focus{color:#f49c12}.librevjs-libre-skin .librevjs-big-play-button:before{content:"\e007";font-family:LibreVideoJS;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.librevjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;font-size:4em;line-height:1;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;opacity:.75;-webkit-animation:spin 1.5s infinite linear;-moz-animation:spin 1.5s infinite linear;-o-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear}.librevjs-libre-skin .librevjs-loading-spinner:before{content:"\e01e";font-family:LibreVideoJS;position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.librevjs-libre-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#f1c40e}.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#f1c40f}.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-libre-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.cliplibre-js{background-color:#000;position:relative;padding:0;font-size:10px;vertical-align:middle;font-weight:500;font-style:normal;font-family:Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cliplibre-js .librevjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.cliplibre-js:-moz-full-screen{position:absolute}body.librevjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.cliplibre-js.librevjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important;position:absolute}.cliplibre-js:-webkit-full-screen{width:100%!important;height:100%!important}.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive{cursor:none}.librevjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;cursor:pointer;height:100%;margin:0;padding:0;position:relative;width:100%}.librevjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.cliplibre-js.librevjs-using-native-controls .librevjs-poster{display:none}.cliplibre-js .librevjs-text-track-display{text-align:center;position:absolute;bottom:4em;left:1em;right:1em}.cliplibre-js .librevjs-text-track{display:none;font-size:1.5em;text-align:center;margin-bottom:.1em;background-color:#000;background-color:rgba(0,0,0,.6)}.cliplibre-js .librevjs-subtitles{color:#fff}.cliplibre-js .librevjs-captions{color:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-libre-skin .librevjs-hidden{display:none}.librevjs-lock-showing{display:block!important;opacity:1;visibility:visible}.no_html5{background:black none repeat scroll 0 0;color:white;height:160px;padding:130px 10px 20px;text-align:center}ul li.librevjs-menu-title.librevjs-res-menu-title{color:#f1c40f}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#f39c12}.cliplibre-js-responsive-container.librevjs-hd{padding-top:56.25%}.cliplibre-js-responsive-container.librevjs-sd{padding-top:75%}.cliplibre-js-responsive-container{width:100%;position:relative}.cliplibre-js-responsive-container .cliplibre-js{height:100%!important;width:100%!important;position:absolute;top:0;left:0}@media screen and (max-width:600px){.cliplibre-js .librevjs-text-track{font-size:1.2em}.cliplibre-js .librevjs-text-track-display{bottom:2em}}@media screen and (max-width:413px){.cliplibre-js{font-size:8px}}@media screen and (max-width:400px){.cliplibre-js .librevjs-text-track{font-size:.9em}.librevjs-libre-skin .librevjs-big-play-button{font-size:5em;top:45%}.cliplibre-js .librevjs-text-track-display{bottom:1em}}@media screen and (max-width:335px){.cliplibre-js{font-size:6px}}@media screen and (max-width:200px){.librevjs-libre-skin .librevjs-big-play-button{top:35%}}@media screen and (max-width:150px){.librevjs-libre-skin .librevjs-big-play-button{font-size:3em}}@media screen and (max-width:90px){.librevjs-libre-skin .librevjs-big-play-button{font-size:2em}}
\ No newline at end of file diff --git a/librevideojs/css/librevideojs-material/master.css b/librevideojs/css/librevideojs-material/master.css new file mode 100644 index 0000000..8aaa213 --- /dev/null +++ b/librevideojs/css/librevideojs-material/master.css @@ -0,0 +1,3069 @@ +/*! +LibreVideoJS Estilos personalizados +Version 1.4 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +/* Universal fonts */ +@font-face { +font-family:"LibreVideoJS"; +src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); +src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); +} +/* Skins +=========================================================================================================================*/ +/* Skin-Blue ------------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-materialblue-skin { +color:#ccc; +background-color: inherit; +} + +/* Base UI Component Classes +------------------------------------------------------------------------------*/ +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-materialblue-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-materialblue-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-materialblue-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-materialblue-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-materialblue-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-materialblue-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-materialblue-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-materialblue-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-materialblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-materialblue-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-materialblue-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-materialblue-skin .librevjs-control:focus:before,.librevjs-libre-materialblue-skin .librevjs-control:hover:before { +color: #2196F3; +} +.librevjs-libre-materialblue-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-materialblue-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} + +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialblue-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(33, 150, 244); +} +.librevjs-libre-materialblue-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-materialblue-skin .librevjs-play-control:hover:before { +color:#2980b9; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-materialblue-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-materialblue-skin .librevjs-mute-control,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-materialblue-skin .librevjs-mute-control:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-materialblue-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-materialblue-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-materialblue-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-materialblue-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #2196F3 url() -50% 0 repeat; +} +.librevjs-libre-materialblue-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-materialblue-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} + +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialblue-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-materialblue-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-materialblue-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialblue-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-materialblue-skin .librevjs-play-progress { +background: #2196F3 url() -50% 0 repeat; +} +.librevjs-libre-materialblue-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-materialblue-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-materialblue-skin .librevjs-seek-handle:before { +padding-top:.1em +} + +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialblue-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-materialblue-skin .librevjs-current-time { +float:left +} +.librevjs-libre-materialblue-skin .librevjs-duration { +float:left +} +.librevjs-libre-materialblue-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialblue-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-materialblue-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-materialblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-materialblue-skin .librevjs-big-play-button { + left: 50%; + top: 40%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #2196F3; +} +/* Hide if controls are disabled */ +.librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-materialblue-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-materialblue-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-materialblue-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialblue-skin .librevjs-big-play-button:focus { +color: #0289f4; /*color boton focus*/ +} +.librevjs-libre-materialblue-skin .librevjs-big-play-button:before { +content: "\e007"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ +text-align: center /* Needed for IE8 */; +position: absolute; +left: 0; +width: 100%; +height: 100%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialblue-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-materialblue-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-materialblue-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-materialblue-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-materialblue-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color:#ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected { +color: rgb(11, 21, 42); +background-color: rgb(33, 150, 244); +} +.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: rgb(11, 21, 42); +background-color: #2196F3; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-materialblue-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-materialblue-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-materialblue-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-materialblue-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialblue-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-materialblue-skin .librevjs-hidden { +display:none +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color:rgb(33, 150, 244); +background-color: inherit; +} +.librevjs-libre-materialblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(11, 137, 237); +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-materialblue-skin .librevjs-big-play-button{ + font-size: 5em; + top: 45%; + } +} +@media screen and (max-width: 200px){ + .librevjs-libre-materialblue-skin .librevjs-big-play-button { + top:35%; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-materialblue-skin .librevjs-big-play-button{ + font-size: 3em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-materialblue-skin .librevjs-big-play-button{ + font-size: 2em; + } +} + +/* Skin-Grey -------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-materialgrey-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-materialgrey-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-materialgrey-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-materialgrey-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-materialgrey-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-materialgrey-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-materialgrey-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-materialgrey-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-materialgrey-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-materialgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-materialgrey-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-materialgrey-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-materialgrey-skin .librevjs-control:focus:before,.librevjs-libre-materialgrey-skin .librevjs-control:hover:before { +color: #9e9e9e; +} +.librevjs-libre-materialgrey-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-materialgrey-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialgrey-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(158, 158, 158); +} +.librevjs-libre-materialgrey-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-materialgrey-skin .librevjs-play-control:hover:before { +color:#7c7c7c; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-materialgrey-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-materialgrey-skin .librevjs-mute-control,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-materialgrey-skin .librevjs-mute-control:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-materialgrey-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-materialgrey-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-materialgrey-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-materialgrey-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #9e9e9e url() -50% 0 repeat; +} +.librevjs-libre-materialgrey-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-materialgrey-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialgrey-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-materialgrey-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-materialgrey-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-materialgrey-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialgrey-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-materialgrey-skin .librevjs-play-progress { +background: #9e9e9e url() -50% 0 repeat; +} +.librevjs-libre-materialgrey-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-materialgrey-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-materialgrey-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialgrey-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-materialgrey-skin .librevjs-current-time { +float:left +} +.librevjs-libre-materialgrey-skin .librevjs-duration { +float:left +} +.librevjs-libre-materialgrey-skin .librevjs-remaining-time { +display:none; +float:left +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-materialgrey-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-materialgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-materialgrey-skin .librevjs-big-play-button { + left: 50%; + top: 40%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #9e9e9e; +} +/* Hide if controls are disabled */ +.librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-materialgrey-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-materialgrey-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-materialgrey-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialgrey-skin .librevjs-big-play-button:focus { +color: rgb(115, 115, 115); /*color boton focus grey oscuro*/ +} +.librevjs-libre-materialgrey-skin .librevjs-big-play-button:before { +content: "\e007"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ +text-align: center /* Needed for IE8 */; +position: absolute; +left: 0; +width: 100%; +height: 100%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialgrey-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-materialgrey-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-materialgrey-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-materialgrey-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color:#ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(158, 158, 158); +} +.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #9e9e9e; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-materialgrey-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-materialgrey-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-materialgrey-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-materialgrey-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialgrey-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-materialgrey-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-materialgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #737373; +background-color: inherit; +} +.librevjs-libre-materialgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #9e9e9e; +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-materialgrey-skin .librevjs-big-play-button{ + font-size: 5em; + top: 45%; + } +} +@media screen and (max-width: 200px){ + .librevjs-libre-materialgrey-skin .librevjs-big-play-button { + top:35%; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-materialgrey-skin .librevjs-big-play-button{ + font-size: 3em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-materialgrey-skin .librevjs-big-play-button{ + font-size: 2em; + } +} + +/* Skin-Purple -----------------------------------------------------------------------------------------------------*/ +.librevjs-libre-materialpurple-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-materialpurple-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-materialpurple-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-materialpurple-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-materialpurple-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-materialpurple-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-materialpurple-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-materialpurple-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-materialpurple-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-materialpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-materialpurple-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-materialpurple-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-materialpurple-skin .librevjs-control:focus:before,.librevjs-libre-materialpurple-skin .librevjs-control:hover:before { +color: #9c27b0; +} +.librevjs-libre-materialpurple-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-materialpurple-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialpurple-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(156, 39, 176); +} +.librevjs-libre-materialpurple-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-materialpurple-skin .librevjs-play-control:hover:before { +color:#8e44ad; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-materialpurple-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-materialpurple-skin .librevjs-mute-control,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-materialpurple-skin .librevjs-mute-control:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-materialpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-materialpurple-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-materialpurple-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-materialpurple-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #9c27b0 url() -50% 0 repeat; +} +.librevjs-libre-materialpurple-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-materialpurple-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialpurple-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-materialpurple-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-materialpurple-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialpurple-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-materialpurple-skin .librevjs-play-progress { +background: #9c27b0 url() -50% 0 repeat; +} +.librevjs-libre-materialpurple-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-materialpurple-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-materialpurple-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialpurple-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-materialpurple-skin .librevjs-current-time { +float:left +} +.librevjs-libre-materialpurple-skin .librevjs-duration { +float:left +} +.librevjs-libre-materialpurple-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-materialpurple-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-materialpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-materialpurple-skin .librevjs-big-play-button { + left: 50%; + top: 40%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #9c27b0; +} +/* Hide if controls are disabled */ +.librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-materialpurple-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-materialpurple-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-materialpurple-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialpurple-skin .librevjs-big-play-button:focus { +color: rgb(142, 68, 173); /*color boton focus purpura oscuro*/ +} +.librevjs-libre-materialpurple-skin .librevjs-big-play-button:before { +content: "\e007"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ +text-align: center /* Needed for IE8 */; +position: absolute; +left: 0; +width: 100%; +height: 100%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialpurple-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-materialpurple-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-materialpurple-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-materialpurple-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color:#ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(156, 39, 176); +} +.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #9c27b0; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-materialpurple-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-materialpurple-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-materialpurple-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-materialpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialpurple-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-materialpurple-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #9c27b0; +background-color: inherit; +} +.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #8e44ad; +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ + font-size: 5em; + top: 45%; + } +} +@media screen and (max-width: 200px){ + .librevjs-libre-materialpurple-skin .librevjs-big-play-button { + top:35%; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ + font-size: 3em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ + font-size: 2em; + } +} + +/* Skin-Red --------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-materialred-skin { +color:#ccc; +background-color: inherit; +} + +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-materialred-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-materialred-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-materialred-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-materialred-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-materialred-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-materialred-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-materialred-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-materialred-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-materialred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-materialred-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-materialred-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-materialred-skin .librevjs-control:focus:before,.librevjs-libre-materialred-skin .librevjs-control:hover:before { +color: #f44336; +} +.librevjs-libre-materialred-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-materialred-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialred-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(244, 67, 54); +} +.librevjs-libre-materialred-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-materialred-skin .librevjs-play-control:hover:before { +color:#f22e1f; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-materialred-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-materialred-skin .librevjs-mute-control,.librevjs-libre-materialred-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-materialred-skin .librevjs-mute-control:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-materialred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialred-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-materialred-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-materialred-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-materialred-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #f44336 url() -50% 0 repeat; +} +.librevjs-libre-materialred-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-materialred-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialred-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-materialred-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-materialred-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialred-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-materialred-skin .librevjs-play-progress { +background: #f44336 url() -50% 0 repeat; +} +.librevjs-libre-materialred-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-materialred-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-materialred-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialred-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-materialred-skin .librevjs-current-time { +float:left +} +.librevjs-libre-materialred-skin .librevjs-duration { +float:left +} +.librevjs-libre-materialred-skin .librevjs-remaining-time { +display:none; +float:left +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialred-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-materialred-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-materialred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-materialred-skin .librevjs-big-play-button { + left: 50%; + top: 40%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #f44336; +} +/* Hide if controls are disabled */ +.librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-materialred-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-materialred-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-materialred-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialred-skin .librevjs-big-play-button:focus { +color: rgba(244, 67, 54, 0.89); /*color boton focus*/ +} +.librevjs-libre-materialred-skin .librevjs-big-play-button:before { +content: "\e007"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ +text-align: center /* Needed for IE8 */; +position: absolute; +left: 0; +width: 100%; +height: 100%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialred-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-materialred-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-materialred-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +max-height:15em; +/* Same bottom as librevjs-menu border-top */ +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-materialred-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-materialred-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color:#ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(244, 67, 54); +} +.librevjs-libre-materialred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #f44336; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-materialred-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-materialred-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-materialred-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-materialred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialred-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-materialred-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: rgb(246, 44, 30); +background-color: inherit; +} +.librevjs-libre-materialred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(244, 67, 54); +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-materialred-skin .librevjs-big-play-button{ + font-size: 5em; + top: 45%; + } +} +@media screen and (max-width: 200px){ + .librevjs-libre-materialred-skin .librevjs-big-play-button { + top:35%; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-materialred-skin .librevjs-big-play-button{ + font-size: 3em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-materialred-skin .librevjs-big-play-button{ + font-size: 2em; + } +} + +/* Skin-Teal -------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-materialteal-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-materialteal-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-materialteal-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-materialteal-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-materialteal-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-materialteal-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-materialteal-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-materialteal-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-materialteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-materialteal-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-materialteal-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-materialteal-skin .librevjs-control:focus:before,.librevjs-libre-materialteal-skin .librevjs-control:hover:before { +color: #1de9b6; +} +.librevjs-libre-materialteal-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-materialteal-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialteal-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(29, 233, 182); +} +.librevjs-libre-materialteal-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-materialteal-skin .librevjs-play-control:hover:before { +color:#007c5d; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-materialteal-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-materialteal-skin .librevjs-mute-control,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-materialteal-skin .librevjs-mute-control:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-materialteal-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-materialteal-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-materialteal-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #1de9b6 url() -50% 0 repeat; +} +.librevjs-libre-materialteal-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-materialteal-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialteal-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-materialteal-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-materialteal-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-materialteal-skin .librevjs-play-progress { +background: #1de9b6 url() -50% 0 repeat; +} +.librevjs-libre-materialteal-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-materialteal-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-materialteal-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialteal-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-materialteal-skin .librevjs-current-time { +float:left +} +.librevjs-libre-materialteal-skin .librevjs-duration { +float:left +} +.librevjs-libre-materialteal-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialteal-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-materialteal-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-materialteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-materialteal-skin .librevjs-big-play-button { +left: 50%; +top: 40%; +font-size: 10em; +display: block; +z-index: 2; +position: absolute; +width: 1em; +height: 1em; +margin-left: -0.5em; +margin-top: -0.5em; +text-align: center; +vertical-align: middle; +cursor: pointer; +opacity: 1; +color: #1abc9c; +} +/* Hide if controls are disabled */ +.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-materialteal-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-materialteal-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialteal-skin .librevjs-big-play-button:focus { +color: #16a085; +} +.librevjs-libre-materialteal-skin .librevjs-big-play-button:before { +content: "\e007"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ +text-align: center /* Needed for IE8 */; +position: absolute; +left: 0; +width: 100%; +height: 100%; +} + +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialteal-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-materialteal-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-materialteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-materialteal-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-materialteal-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color:#ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected { +color: rgb(1, 56, 47); +background-color: rgb(29, 233, 182); +} +.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #004d40; +background-color: #1de9b6; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-materialteal-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-materialteal-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-materialteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialteal-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-materialteal-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color:rgb(26, 187, 156); +background-color: inherit; +} +.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(29, 233, 182); +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-materialteal-skin .librevjs-big-play-button{ + font-size: 5em; + top: 45%; + } +} +@media screen and (max-width: 200px){ + .librevjs-libre-materialteal-skin .librevjs-big-play-button { + top:35%; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-materialteal-skin .librevjs-big-play-button{ + font-size: 3em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-materialteal-skin .librevjs-big-play-button{ + font-size: 2em; + } +} + +/* Skin-Yellow -----------------------------------------------------------------------------------------------------*/ +.librevjs-libre-materialyellow-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-materialyellow-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-materialyellow-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-materialyellow-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-materialyellow-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-materialyellow-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-materialyellow-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-materialyellow-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-materialyellow-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-materialyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-materialyellow-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-materialyellow-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-materialyellow-skin .librevjs-control:focus:before,.librevjs-libre-materialyellow-skin .librevjs-control:hover:before { +color: #f1c40f; +} +.librevjs-libre-materialyellow-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-materialyellow-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialyellow-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(241, 196, 14); +} +.librevjs-libre-materialyellow-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-materialyellow-skin .librevjs-play-control:hover:before { +color:#f39c12; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-materialyellow-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-materialyellow-skin .librevjs-mute-control,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-materialyellow-skin .librevjs-mute-control:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-materialyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-materialyellow-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-materialyellow-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-materialyellow-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #f1c40f url() -50% 0 repeat; +} +.librevjs-libre-materialyellow-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-materialyellow-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialyellow-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-materialyellow-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-materialyellow-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialyellow-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-materialyellow-skin .librevjs-play-progress { +background: #f1c40f url() -50% 0 repeat; +} +.librevjs-libre-materialyellow-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-materialyellow-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-materialyellow-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialyellow-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-materialyellow-skin .librevjs-current-time { +float:left +} +.librevjs-libre-materialyellow-skin .librevjs-duration { +float:left +} +.librevjs-libre-materialyellow-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-materialyellow-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-materialyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-materialyellow-skin .librevjs-big-play-button { + left: 50%; + top: 40%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #f1c40f; +} +/* Hide if controls are disabled */ +.librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-materialyellow-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-materialyellow-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-materialyellow-skin:hover .librevjs-big-play-button, +.librevjs-libre-materialyellow-skin .librevjs-big-play-button:focus { +color: rgb(244, 156, 18); /*color boton focus amarillo oscuro*/ +} +.librevjs-libre-materialyellow-skin .librevjs-big-play-button:before { +content: "\e007"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ +text-align: center /* Needed for IE8 */; +position: absolute; +left: 0; +width: 100%; +height: 100%; +} + +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-materialyellow-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-materialyellow-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-materialyellow-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-materialyellow-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color:#ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(241, 196, 14); +} +.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #f1c40f; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-materialyellow-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-materialyellow-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-materialyellow-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-materialyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialyellow-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-materialyellow-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #f1c40f; +background-color: inherit; +} +.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #f39c12; +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ + font-size: 5em; + top: 45%; + } +} +@media screen and (max-width: 200px){ + .librevjs-libre-materialyellow-skin .librevjs-big-play-button { + top:35%; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ + font-size: 3em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ + font-size: 2em; + } +} + +/* Global Styles +==============================================================================*/ +/* Global Time-Display */ +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Global Big-Play-Button-(play-button-at-start) */ +.librevjs-error .librevjs-big-play-button { +display: none; +} +/* Global Loading Spinner */ +.librevjs-loading-spinner { +display:none; +position:absolute; +top:50%; +left:50%; +font-size:4em; +line-height:1; +width:1em; +height:1em; +margin-left:-.5em; +margin-top:-.5em; +opacity:.75; +-webkit-animation:spin 1.5s infinite linear; +-moz-animation:spin 1.5s infinite linear; +-o-animation:spin 1.5s infinite linear; +animation:spin 1.5s infinite linear +} +.librevjs-loading-spinner:before { +content:"\e01e"; +font-family:LibreVideoJS; +position:absolute; +top:0; +left:0; +width:1em; +height:1em; +text-align:center; +text-shadow:0 0 .1em #000 +} +@-moz-keyframes spin { +0% { + -moz-transform:rotate(0deg) + } +100% { + -moz-transform:rotate(359deg) + } +} +@-webkit-keyframes spin { +0% { + -webkit-transform:rotate(0deg) + } +100% { + -webkit-transform:rotate(359deg) + } +} +@-o-keyframes spin { +0% { + -o-transform:rotate(0deg) + } +100% { + -o-transform:rotate(359deg) + } +} +@keyframes spin { +0% { + transform:rotate(0deg) + } +100% { + transform:rotate(359deg) + } +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.cliplibre-js { +background-color:#000; +position:relative; +padding:0; +font-size:10px; +vertical-align:middle; +font-weight:500; +font-style:normal; +font-family:Arial,sans-serif; +-webkit-user-select:none; +-moz-user-select:none; +-ms-user-select:none; +user-select:none +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +body.librevjs-full-window { +padding:0; +margin:0; +height:100%; +overflow-y:auto; +} +.cliplibre-js.librevjs-fullscreen { +position:fixed; +overflow:hidden; +z-index:1000; +left:0; +top:0; +bottom:0; +right:0; +width:100%!important; +height:100%!important; +position:absolute; +} +.cliplibre-js:-webkit-full-screen { +width:100%!important; +height:100%!important +} +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { +cursor:none +} +/* Poster Styles */ +.librevjs-poster { +background-repeat:no-repeat; +background-position:50% 50%; +background-size:contain; +cursor:pointer; +height:100%; +margin:0; +padding:0; +position:relative; +width:100% +} +.librevjs-poster img { +display:block; +margin:0 auto; +max-height:100%; +padding:0; +width:100% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +/* Transparent black background, or fallback to all black (oldIE) */ +background-color:#000; +background-color:rgba(0,0,0,.6) +} +.cliplibre-js .librevjs-subtitles { +color:#fff +} +.cliplibre-js .librevjs-captions { +color:rgb(255, 237, 0); +background-color: rgba(2, 7, 11, 0.7); +} +.librevjs-tt-cue { +display:block +} +/* Global Hide disabled or unsupported controls */ +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} +/* Global Responsive +------------------------------------------------------------------------------*/ +.cliplibre-js-responsive-container.librevjs-hd { +padding-top: 56.25%; +} +.cliplibre-js-responsive-container.librevjs-sd { +padding-top: 75%; +} +.cliplibre-js-responsive-container { +width: 100%; +position: relative; +} +.cliplibre-js-responsive-container .cliplibre-js { +height: 100% !important; +width: 100% !important; +position: absolute; +top: 0; +left: 0; +} +@media screen and (max-width: 600px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 2em; + } +} +@media screen and (max-width: 413px){ + .cliplibre-js { + font-size:8px; + } +} +@media screen and (max-width: 400px){ + .cliplibre-js .librevjs-text-track{ + font-size: 0.9em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } +} +@media screen and (max-width: 335px){ + .cliplibre-js { + font-size:6px; + } +} diff --git a/librevideojs/css/mix-material/master.css b/librevideojs/css/mix-material/master.css new file mode 100644 index 0000000..0bb9214 --- /dev/null +++ b/librevideojs/css/mix-material/master.css @@ -0,0 +1,3165 @@ +/*! +LibreVideoJS Estilos personalizados +Version 1.4 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +/* Universal fonts */ +@font-face { +font-family:"LibreVideoJS"; +src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); +src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); +} +/* Skins +=========================================================================================================================*/ +/* Skin-Blue ------------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-mixblue-skin { +color:#ccc; +background-color: inherit; +} + +/* Base UI Component Classes +------------------------------------------------------------------------------*/ +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixblue-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-mixblue-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-mixblue-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixblue-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixblue-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixblue-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixblue-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-mixblue-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixblue-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixblue-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixblue-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-mixblue-skin .librevjs-control:focus:before,.librevjs-libre-mixblue-skin .librevjs-control:hover:before { +color: #2196F3; +} +.librevjs-libre-mixblue-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixblue-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} + +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(33, 150, 244); +} +.librevjs-libre-mixblue-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixblue-skin .librevjs-play-control:hover:before { +color:#2980b9; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixblue-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixblue-skin .librevjs-mute-control,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixblue-skin .librevjs-mute-control:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixblue-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixblue-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixblue-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #2196F3 url() -50% 0 repeat; +} +.librevjs-libre-mixblue-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixblue-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} + +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-mixblue-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixblue-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixblue-skin .librevjs-play-progress { +background: #2196F3 url() -50% 0 repeat; +} +.librevjs-libre-mixblue-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixblue-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixblue-skin .librevjs-seek-handle:before { +padding-top:.1em +} + +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixblue-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixblue-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixblue-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixblue-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixblue-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.8em; + height: 2.6em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + /* Need a slightly gray bg so it can be seen on black backgrounds */ + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); + border: 0 solid ; + /* border-radius */ + -webkit-border-radius: 0.4em; + -moz-border-radius: 0.4em; + border-radius: 0.4em; + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixblue-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixblue-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mixblue-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixblue-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixblue-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: #2196F3; /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixblue-skin .librevjs-big-play-button:before { +content: "\e001"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 2.6em; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixblue-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixblue-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-mixblue-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixblue-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color: #ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected { +color: rgb(11, 21, 42); +background-color: rgb(33, 150, 244); +} +.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: rgb(11, 21, 42); +background-color: #2196F3; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-mixblue-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixblue-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixblue-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixblue-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixblue-skin .librevjs-hidden { +display:none +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color:rgb(33, 150, 244); +background-color: inherit; +} +.librevjs-libre-mixblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(11, 137, 237); +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-mixblue-skin .librevjs-big-play-button{ + font-size: 2em; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixblue-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixblue-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} + +/* Skin-Grey -------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-mixgrey-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixgrey-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-mixgrey-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-mixgrey-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixgrey-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixgrey-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixgrey-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixgrey-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-mixgrey-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixgrey-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixgrey-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixgrey-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-mixgrey-skin .librevjs-control:focus:before,.librevjs-libre-mixgrey-skin .librevjs-control:hover:before { +color: #9e9e9e; +} +.librevjs-libre-mixgrey-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixgrey-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(158, 158, 158); +} +.librevjs-libre-mixgrey-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixgrey-skin .librevjs-play-control:hover:before { +color:#7c7c7c; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixgrey-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixgrey-skin .librevjs-mute-control,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixgrey-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixgrey-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixgrey-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #9e9e9e url() -50% 0 repeat; +} +.librevjs-libre-mixgrey-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixgrey-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-mixgrey-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixgrey-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixgrey-skin .librevjs-play-progress { +background: #9e9e9e url() -50% 0 repeat; +} +.librevjs-libre-mixgrey-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixgrey-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixgrey-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixgrey-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixgrey-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixgrey-skin .librevjs-remaining-time { +display:none; +float:left +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixgrey-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.8em; + height: 2.6em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + /* Need a slightly gray bg so it can be seen on black backgrounds */ + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); + border: 0 solid ; + /* border-radius */ + -webkit-border-radius: 0.4em; + -moz-border-radius: 0.4em; + border-radius: 0.4em; + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixgrey-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixgrey-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mixgrey-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixgrey-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixgrey-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: rgb(115, 115, 115); /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixgrey-skin .librevjs-big-play-button:before { +content: "\e001"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 2.6em; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixgrey-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixgrey-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-mixgrey-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color: #ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(158, 158, 158); +} +.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #9e9e9e; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-mixgrey-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixgrey-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixgrey-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixgrey-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixgrey-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #737373; +background-color: inherit; +} +.librevjs-libre-mixgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #9e9e9e; +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-mixgrey-skin .librevjs-big-play-button{ + font-size: 2em; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixgrey-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixgrey-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} + +/* Skin-Purple -----------------------------------------------------------------------------------------------------*/ +.librevjs-libre-mixpurple-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixpurple-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-mixpurple-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-mixpurple-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixpurple-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixpurple-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixpurple-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixpurple-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-mixpurple-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixpurple-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixpurple-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixpurple-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-mixpurple-skin .librevjs-control:focus:before,.librevjs-libre-mixpurple-skin .librevjs-control:hover:before { +color: #9c27b0; +} +.librevjs-libre-mixpurple-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixpurple-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(156, 39, 176); +} +.librevjs-libre-mixpurple-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixpurple-skin .librevjs-play-control:hover:before { +color:#8e44ad; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixpurple-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixpurple-skin .librevjs-mute-control,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixpurple-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixpurple-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixpurple-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #9c27b0 url() -50% 0 repeat; +} +.librevjs-libre-mixpurple-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixpurple-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-mixpurple-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixpurple-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixpurple-skin .librevjs-play-progress { +background: #9c27b0 url() -50% 0 repeat; +} +.librevjs-libre-mixpurple-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixpurple-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixpurple-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixpurple-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixpurple-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixpurple-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixpurple-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.8em; + height: 2.6em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + /* Need a slightly gray bg so it can be seen on black backgrounds */ + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); + border: 0 solid ; + /* border-radius */ + -webkit-border-radius: 0.4em; + -moz-border-radius: 0.4em; + border-radius: 0.4em; + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixpurple-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixpurple-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mixpurple-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixpurple-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixpurple-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: rgb(142, 68, 173); /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixpurple-skin .librevjs-big-play-button:before { +content: "\e001"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 2.6em; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixpurple-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixpurple-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-mixpurple-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color: #ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(156, 39, 176); +} +.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #9c27b0; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-mixpurple-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixpurple-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixpurple-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixpurple-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #9c27b0; +background-color: inherit; +} +.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #8e44ad; +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-mixpurple-skin .librevjs-big-play-button{ + font-size: 2em; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixpurple-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixpurple-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} + +/* Skin-Red --------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-mixred-skin { +color:#ccc; +background-color: inherit; +} + +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixred-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-mixred-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-mixred-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixred-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixred-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixred-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixred-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-mixred-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixred-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixred-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixred-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-mixred-skin .librevjs-control:focus:before,.librevjs-libre-mixred-skin .librevjs-control:hover:before { +color: #f44336; +} +.librevjs-libre-mixred-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixred-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(244, 67, 54); +} +.librevjs-libre-mixred-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixred-skin .librevjs-play-control:hover:before { +color:#f22e1f; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixred-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixred-skin .librevjs-mute-control,.librevjs-libre-mixred-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixred-skin .librevjs-mute-control:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixred-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixred-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixred-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #f44336 url() -50% 0 repeat; +} +.librevjs-libre-mixred-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixred-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-mixred-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixred-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixred-skin .librevjs-play-progress { +background: #f44336 url() -50% 0 repeat; +} +.librevjs-libre-mixred-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixred-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixred-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixred-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixred-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixred-skin .librevjs-remaining-time { +display:none; +float:left +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixred-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixred-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.8em; + height: 2.6em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + /* Need a slightly gray bg so it can be seen on black backgrounds */ + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); + border: 0 solid ; + /* border-radius */ + -webkit-border-radius: 0.4em; + -moz-border-radius: 0.4em; + border-radius: 0.4em; + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixred-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixred-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mixred-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixred-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixred-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: #f12b24; /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixred-skin .librevjs-big-play-button:before { +content: "\e001"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 2.6em; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixred-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixred-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +max-height:15em; +/* Same bottom as librevjs-menu border-top */ +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-mixred-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixred-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color: #ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(244, 67, 54); +} +.librevjs-libre-mixred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #f44336; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-mixred-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixred-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixred-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixred-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: rgb(246, 44, 30); +background-color: inherit; +} +.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(244, 67, 54); +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-mixred-skin .librevjs-big-play-button{ + font-size: 2em; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixred-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixred-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} + +/* Skin-Teal -------------------------------------------------------------------------------------------------------*/ +.librevjs-libre-mixteal-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixteal-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-mixteal-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-mixteal-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixteal-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixteal-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixteal-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixteal-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-mixteal-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixteal-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixteal-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-mixteal-skin .librevjs-control:focus:before,.librevjs-libre-mixteal-skin .librevjs-control:hover:before { +color: #1de9b6; +} +.librevjs-libre-mixteal-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixteal-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(29, 233, 182); +} +.librevjs-libre-mixteal-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixteal-skin .librevjs-play-control:hover:before { +color:#007c5d; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixteal-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixteal-skin .librevjs-mute-control,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixteal-skin .librevjs-mute-control:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixteal-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixteal-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixteal-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #1de9b6 url() -50% 0 repeat; +} +.librevjs-libre-mixteal-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixteal-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-mixteal-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixteal-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixteal-skin .librevjs-play-progress { +background: #1de9b6 url() -50% 0 repeat; +} +.librevjs-libre-mixteal-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixteal-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixteal-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixteal-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixteal-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixteal-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixteal-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixteal-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.8em; + height: 2.6em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + /* Need a slightly gray bg so it can be seen on black backgrounds */ + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); + border: 0 solid ; + /* border-radius */ + -webkit-border-radius: 0.4em; + -moz-border-radius: 0.4em; + border-radius: 0.4em; + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixteal-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixteal-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixteal-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixteal-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: #1de9b6; /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixteal-skin .librevjs-big-play-button:before { +content: "\e001"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 2.6em; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} + +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixteal-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-mixteal-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixteal-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color: #ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected { +color: rgb(1, 56, 47); +background-color: rgb(29, 233, 182); +} +.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #004d40; +background-color: #1de9b6; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-mixteal-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixteal-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixteal-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixteal-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color:rgb(26, 187, 156); +background-color: inherit; +} +.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(29, 233, 182); +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-mixteal-skin .librevjs-big-play-button{ + font-size: 2em; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixteal-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixteal-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} + +/* Skin-Yellow -----------------------------------------------------------------------------------------------------*/ +.librevjs-libre-mixyellow-skin { +color:#ccc; +background-color: inherit; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixyellow-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-mixyellow-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-mixyellow-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixyellow-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixyellow-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixyellow-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixyellow-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-mixyellow-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixyellow-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixyellow-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixyellow-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-mixyellow-skin .librevjs-control:focus:before,.librevjs-libre-mixyellow-skin .librevjs-control:hover:before { +color: #f1c40f; +} +.librevjs-libre-mixyellow-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixyellow-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(241, 196, 14); +} +.librevjs-libre-mixyellow-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixyellow-skin .librevjs-play-control:hover:before { +color:#f39c12; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixyellow-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixyellow-skin .librevjs-mute-control,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixyellow-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixyellow-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixyellow-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #f1c40f url() -50% 0 repeat; +} +.librevjs-libre-mixyellow-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixyellow-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-mixyellow-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixyellow-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixyellow-skin .librevjs-play-progress { +background: #f1c40f url() -50% 0 repeat; +} +.librevjs-libre-mixyellow-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixyellow-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixyellow-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixyellow-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixyellow-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixyellow-skin .librevjs-remaining-time { +display:none; +float:left +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixyellow-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.8em; + height: 2.6em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + /* Need a slightly gray bg so it can be seen on black backgrounds */ + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); + border: 0 solid ; + /* border-radius */ + -webkit-border-radius: 0.4em; + -moz-border-radius: 0.4em; + border-radius: 0.4em; + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixyellow-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixyellow-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mixyellow-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixyellow-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixyellow-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: rgb(244, 156, 18); /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixyellow-skin .librevjs-big-play-button:before { +content: "\e001"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 2.6em; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} + +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixyellow-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixyellow-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-mixyellow-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color: #ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(241, 196, 14); +} +.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #f1c40f; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-mixyellow-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixyellow-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixyellow-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixyellow-skin .librevjs-hidden { +display:none +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #f1c40f; +background-color: inherit; +} +.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #f39c12; +background-color: inherit; +} + +@media screen and (max-width: 400px){ + .librevjs-libre-mixyellow-skin .librevjs-big-play-button{ + font-size: 2em; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixyellow-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixyellow-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} + +/* Global Styles +==============================================================================================*/ +/* Global Time-Display */ +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Global Big-Play-Button-(play-button-at-start) */ +.librevjs-error .librevjs-big-play-button { +display: none; +} +/* Global Loading Spinner */ +.librevjs-loading-spinner { +display:none; +position:absolute; +top:50%; +left:50%; +font-size:4em; +line-height:1; +width:1em; +height:1em; +margin-left:-.5em; +margin-top:-.5em; +opacity:.75; +-webkit-animation:spin 1.5s infinite linear; +-moz-animation:spin 1.5s infinite linear; +-o-animation:spin 1.5s infinite linear; +animation:spin 1.5s infinite linear +} +.librevjs-loading-spinner:before { +content:"\e01e"; +font-family:LibreVideoJS; +position:absolute; +top:0; +left:0; +width:1em; +height:1em; +text-align:center; +text-shadow:0 0 .1em #000 +} +@-moz-keyframes spin { +0% { + -moz-transform:rotate(0deg) + } +100% { + -moz-transform:rotate(359deg) + } +} +@-webkit-keyframes spin { +0% { + -webkit-transform:rotate(0deg) + } +100% { + -webkit-transform:rotate(359deg) + } +} +@-o-keyframes spin { +0% { + -o-transform:rotate(0deg) + } +100% { + -o-transform:rotate(359deg) + } +} +@keyframes spin { +0% { + transform:rotate(0deg) + } +100% { + transform:rotate(359deg) + } +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.cliplibre-js { +background-color:#000; +position:relative; +padding:0; +font-size:10px; +vertical-align:middle; +font-weight:500; +font-style:normal; +font-family:Arial,sans-serif; +-webkit-user-select:none; +-moz-user-select:none; +-ms-user-select:none; +user-select:none +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +body.librevjs-full-window { +padding:0; +margin:0; +height:100%; +overflow-y:auto; +} +.cliplibre-js.librevjs-fullscreen { +position:fixed; +overflow:hidden; +z-index:1000; +left:0; +top:0; +bottom:0; +right:0; +width:100%!important; +height:100%!important; +position:absolute; +} +.cliplibre-js:-webkit-full-screen { +width:100%!important; +height:100%!important +} +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { +cursor:none +} +/* Poster Styles */ +.librevjs-poster { +background-repeat:no-repeat; +background-position:50% 50%; +background-size:contain; +cursor:pointer; +height:100%; +margin:0; +padding:0; +position:relative; +width:100% +} +.librevjs-poster img { +display:block; +margin:0 auto; +max-height:100%; +padding:0; +width:100% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +/* Transparent black background, or fallback to all black (oldIE) */ +background-color:#000; +background-color:rgba(0,0,0,.6) +} +.cliplibre-js .librevjs-subtitles { +color:#fff +} +.cliplibre-js .librevjs-captions { +color:rgb(255, 237, 0); +background-color: rgba(2, 7, 11, 0.7); +} +.librevjs-tt-cue { +display:block +} +/* Global Hide disabled or unsupported controls */ +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} +/* Global Responsive +------------------------------------------------------------------------------*/ +.cliplibre-js-responsive-container.librevjs-hd { +padding-top: 56.25%; +} +.cliplibre-js-responsive-container.librevjs-sd { +padding-top: 75%; +} +.cliplibre-js-responsive-container { +width: 100%; +position: relative; +} +.cliplibre-js-responsive-container .cliplibre-js { +height: 100% !important; +width: 100% !important; +position: absolute; +top: 0; +left: 0; +} +@media screen and (max-width: 800px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.5em; + margin-bottom: -0.2em; + } +} +@media screen and (max-width: 600px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 2em; + } +} +@media screen and (max-width: 413px){ + .cliplibre-js { + font-size:8px; + } +} +@media screen and (max-width: 400px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } +} +@media screen and (max-width: 335px){ + .cliplibre-js { + font-size:6px; + } +} diff --git a/librevideojs/css/mix-material/mix-blue.css b/librevideojs/css/mix-material/mix-blue.css new file mode 100644 index 0000000..4e63f6e --- /dev/null +++ b/librevideojs/css/mix-material/mix-blue.css @@ -0,0 +1,747 @@ +/*! +LibreVideoJS Estilos personalizados = Blue +Version 1.4 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +.librevjs-libre-mixblue-skin { +color:#ccc; +background-color: inherit; +} +@font-face { +font-family:"LibreVideoJS"; +src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); +src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixblue-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-mixblue-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-mixblue-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixblue-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixblue-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixblue-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixblue-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-mixblue-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixblue-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixblue-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixblue-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-mixblue-skin .librevjs-control:focus:before,.librevjs-libre-mixblue-skin .librevjs-control:hover:before { +color: #2196F3; +} +.librevjs-libre-mixblue-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixblue-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(33, 150, 244); +} +.librevjs-libre-mixblue-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixblue-skin .librevjs-play-control:hover:before { +color:#2980b9; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixblue-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixblue-skin .librevjs-mute-control,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixblue-skin .librevjs-mute-control:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixblue-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixblue-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixblue-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #2196F3 url() -50% 0 repeat; +} +.librevjs-libre-mixblue-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixblue-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-mixblue-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixblue-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixblue-skin .librevjs-play-progress { +background: #2196F3 url() -50% 0 repeat; +} +.librevjs-libre-mixblue-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixblue-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixblue-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixblue-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixblue-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixblue-skin .librevjs-remaining-time { +display:none; +float:left +} +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixblue-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixblue-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.8em; + height: 2.6em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + /* Need a slightly gray bg so it can be seen on black backgrounds */ + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); + border: 0 solid ; + /* border-radius */ + -webkit-border-radius: 0.4em; + -moz-border-radius: 0.4em; + border-radius: 0.4em; + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixblue-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixblue-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mixblue-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixblue-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixblue-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: #2196F3; /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixblue-skin .librevjs-big-play-button:before { +content: "\e001"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 2.6em; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} +.librevjs-error .librevjs-big-play-button { +display: none; +} +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ +.librevjs-loading-spinner { +display:none; +position:absolute; +top:50%; +left:50%; +font-size:4em; +line-height:1; +width:1em; +height:1em; +margin-left:-.5em; +margin-top:-.5em; +opacity:.75; +-webkit-animation:spin 1.5s infinite linear; +-moz-animation:spin 1.5s infinite linear; +-o-animation:spin 1.5s infinite linear; +animation:spin 1.5s infinite linear +} +.librevjs-libre-mixblue-skin .librevjs-loading-spinner:before { +content:"\e01e"; +font-family:LibreVideoJS; +position:absolute; +top:0; +left:0; +width:1em; +height:1em; +text-align:center; +text-shadow:0 0 .1em #000 +} +@-moz-keyframes spin { +0% { + -moz-transform:rotate(0deg) + } +100% { + -moz-transform:rotate(359deg) + } +} +@-webkit-keyframes spin { +0% { + -webkit-transform:rotate(0deg) + } +100% { + -webkit-transform:rotate(359deg) + } +} +@-o-keyframes spin { +0% { + -o-transform:rotate(0deg) + } +100% { + -o-transform:rotate(359deg) + } +} +@keyframes spin { +0% { + transform:rotate(0deg) + } +100% { + transform:rotate(359deg) + } +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixblue-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixblue-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixblue-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-mixblue-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixblue-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color: #ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected { +color: rgb(11, 21, 42); +background-color: rgb(33, 150, 244); +} +.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: rgb(11, 21, 42); +background-color: #2196F3; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-mixblue-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixblue-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixblue-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixblue-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.cliplibre-js { +background-color:#000; +position:relative; +padding:0; +font-size:10px; +vertical-align:middle; +font-weight:500; +font-style:normal; +font-family:Arial,sans-serif; +-webkit-user-select:none; +-moz-user-select:none; +-ms-user-select:none; +user-select:none +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +body.librevjs-full-window { +padding:0; +margin:0; +height:100%; +overflow-y:auto; +} +.cliplibre-js.librevjs-fullscreen { +position:fixed; +overflow:hidden; +z-index:1000; +left:0; +top:0; +bottom:0; +right:0; +width:100%!important; +height:100%!important; +position:absolute; +} +.cliplibre-js:-webkit-full-screen { +width:100%!important; +height:100%!important +} +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { +cursor:none +} +/* Poster Styles */ +.librevjs-poster { +background-repeat:no-repeat; +background-position:50% 50%; +background-size:contain; +cursor:pointer; +height:100%; +margin:0; +padding:0; +position:relative; +width:100% +} +.librevjs-poster img { +display:block; +margin:0 auto; +max-height:100%; +padding:0; +width:100% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +/* Transparent black background, or fallback to all black (oldIE) */ +background-color:#000; +background-color:rgba(0,0,0,.6) +} +.cliplibre-js .librevjs-subtitles { +color:#fff +} +.cliplibre-js .librevjs-captions { +color:rgb(255, 237, 0); +background-color: rgba(2, 7, 11, 0.7); +} +.librevjs-tt-cue { +display:block +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixblue-skin .librevjs-hidden { +display:none +} +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color:rgb(33, 150, 244); +background-color: inherit; +} +.librevjs-libre-mixblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(11, 137, 237); +background-color: inherit; +} +/*Responsive*/ +.cliplibre-js-responsive-container.librevjs-hd { +padding-top: 56.25%; +} +.cliplibre-js-responsive-container.librevjs-sd { +padding-top: 75%; +} +.cliplibre-js-responsive-container { +width: 100%; +position: relative; +} +.cliplibre-js-responsive-container .cliplibre-js { +height: 100% !important; +width: 100% !important; +position: absolute; +top: 0; +left: 0; +} +@media screen and (max-width: 800px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.5em; + margin-bottom: -0.2em; + } +} +@media screen and (max-width: 600px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 2em; + } +} +@media screen and (max-width: 413px){ + .cliplibre-js { + font-size:8px; + } +} +@media screen and (max-width: 400px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1em; + } + .librevjs-libre-mixblue-skin .librevjs-big-play-button{ + font-size: 2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } +} +@media screen and (max-width: 335px){ + .cliplibre-js { + font-size:6px; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixblue-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixblue-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} diff --git a/librevideojs/css/mix-material/mix-grey.css b/librevideojs/css/mix-material/mix-grey.css new file mode 100644 index 0000000..0809a7f --- /dev/null +++ b/librevideojs/css/mix-material/mix-grey.css @@ -0,0 +1,747 @@ +/*! +LibreVideoJS Estilos personalizados = Grey +Version 1.4 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +.librevjs-libre-mixgrey-skin { +color:#ccc; +background-color: inherit; +} +@font-face { +font-family:"LibreVideoJS"; +src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); +src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixgrey-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-mixgrey-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-mixgrey-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixgrey-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixgrey-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixgrey-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixgrey-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-mixgrey-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixgrey-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixgrey-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixgrey-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-mixgrey-skin .librevjs-control:focus:before,.librevjs-libre-mixgrey-skin .librevjs-control:hover:before { +color: #9e9e9e; +} +.librevjs-libre-mixgrey-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixgrey-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(158, 158, 158); +} +.librevjs-libre-mixgrey-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixgrey-skin .librevjs-play-control:hover:before { +color:#7c7c7c; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixgrey-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixgrey-skin .librevjs-mute-control,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixgrey-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixgrey-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixgrey-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #9e9e9e url() -50% 0 repeat; +} +.librevjs-libre-mixgrey-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixgrey-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-mixgrey-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixgrey-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixgrey-skin .librevjs-play-progress { +background: #9e9e9e url() -50% 0 repeat; +} +.librevjs-libre-mixgrey-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixgrey-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixgrey-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixgrey-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixgrey-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixgrey-skin .librevjs-remaining-time { +display:none; +float:left +} +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixgrey-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.8em; + height: 2.6em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + /* Need a slightly gray bg so it can be seen on black backgrounds */ + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); + border: 0 solid ; + /* border-radius */ + -webkit-border-radius: 0.4em; + -moz-border-radius: 0.4em; + border-radius: 0.4em; + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixgrey-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixgrey-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mixgrey-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixgrey-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixgrey-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: rgb(115, 115, 115); /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixgrey-skin .librevjs-big-play-button:before { +content: "\e001"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 2.6em; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} +.librevjs-error .librevjs-big-play-button { +display: none; +} +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ +.librevjs-loading-spinner { +display:none; +position:absolute; +top:50%; +left:50%; +font-size:4em; +line-height:1; +width:1em; +height:1em; +margin-left:-.5em; +margin-top:-.5em; +opacity:.75; +-webkit-animation:spin 1.5s infinite linear; +-moz-animation:spin 1.5s infinite linear; +-o-animation:spin 1.5s infinite linear; +animation:spin 1.5s infinite linear +} +.librevjs-libre-mixgrey-skin .librevjs-loading-spinner:before { +content:"\e01e"; +font-family:LibreVideoJS; +position:absolute; +top:0; +left:0; +width:1em; +height:1em; +text-align:center; +text-shadow:0 0 .1em #000 +} +@-moz-keyframes spin { +0% { + -moz-transform:rotate(0deg) + } +100% { + -moz-transform:rotate(359deg) + } +} +@-webkit-keyframes spin { +0% { + -webkit-transform:rotate(0deg) + } +100% { + -webkit-transform:rotate(359deg) + } +} +@-o-keyframes spin { +0% { + -o-transform:rotate(0deg) + } +100% { + -o-transform:rotate(359deg) + } +} +@keyframes spin { +0% { + transform:rotate(0deg) + } +100% { + transform:rotate(359deg) + } +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixgrey-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixgrey-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixgrey-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-mixgrey-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color: #ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(158, 158, 158); +} +.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #9e9e9e; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-mixgrey-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixgrey-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixgrey-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixgrey-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.cliplibre-js { +background-color:#000; +position:relative; +padding:0; +font-size:10px; +vertical-align:middle; +font-weight:500; +font-style:normal; +font-family:Arial,sans-serif; +-webkit-user-select:none; +-moz-user-select:none; +-ms-user-select:none; +user-select:none +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +body.librevjs-full-window { +padding:0; +margin:0; +height:100%; +overflow-y:auto; +} +.cliplibre-js.librevjs-fullscreen { +position:fixed; +overflow:hidden; +z-index:1000; +left:0; +top:0; +bottom:0; +right:0; +width:100%!important; +height:100%!important; +position:absolute; +} +.cliplibre-js:-webkit-full-screen { +width:100%!important; +height:100%!important +} +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { +cursor:none +} +/* Poster Styles */ +.librevjs-poster { +background-repeat:no-repeat; +background-position:50% 50%; +background-size:contain; +cursor:pointer; +height:100%; +margin:0; +padding:0; +position:relative; +width:100% +} +.librevjs-poster img { +display:block; +margin:0 auto; +max-height:100%; +padding:0; +width:100% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +background-color:#000; +/* Transparent black background, or fallback to all black (oldIE) */ +background-color:rgba(0,0,0,.6) +} +.cliplibre-js .librevjs-subtitles { +color:#fff +} +.cliplibre-js .librevjs-captions { +color:rgb(255, 237, 0); +background-color: rgba(2, 7, 11, 0.7); +} +.librevjs-tt-cue { +display:block +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixgrey-skin .librevjs-hidden { +display:none +} +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #737373; +background-color: inherit; +} +.librevjs-libre-mixgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #9e9e9e; +background-color: inherit; +} +/*Responsive*/ +.cliplibre-js-responsive-container.librevjs-hd { +padding-top: 56.25%; +} +.cliplibre-js-responsive-container.librevjs-sd { +padding-top: 75%; +} +.cliplibre-js-responsive-container { +width: 100%; +position: relative; +} +.cliplibre-js-responsive-container .cliplibre-js { +height: 100% !important; +width: 100% !important; +position: absolute; +top: 0; +left: 0; +} +@media screen and (max-width: 800px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.5em; + margin-bottom: -0.2em; + } +} +@media screen and (max-width: 600px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 2em; + } +} +@media screen and (max-width: 413px){ + .cliplibre-js { + font-size:8px; + } +} +@media screen and (max-width: 400px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1em; + } + .librevjs-libre-mixgrey-skin .librevjs-big-play-button{ + font-size: 2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } +} +@media screen and (max-width: 335px){ + .cliplibre-js { + font-size:6px; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixgrey-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixgrey-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} diff --git a/librevideojs/css/mix-material/mix-purple.css b/librevideojs/css/mix-material/mix-purple.css new file mode 100644 index 0000000..e2c1b52 --- /dev/null +++ b/librevideojs/css/mix-material/mix-purple.css @@ -0,0 +1,747 @@ +/*! +LibreVideoJS Estilos personalizados = Purple +Version 1.4 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +.librevjs-libre-mixpurple-skin { +color:#ccc; +background-color: inherit; +} +@font-face { +font-family:"LibreVideoJS"; +src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); +src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixpurple-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-mixpurple-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-mixpurple-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixpurple-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixpurple-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixpurple-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixpurple-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-mixpurple-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixpurple-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixpurple-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixpurple-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-mixpurple-skin .librevjs-control:focus:before,.librevjs-libre-mixpurple-skin .librevjs-control:hover:before { +color: #9c27b0; +} +.librevjs-libre-mixpurple-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixpurple-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(156, 39, 176); +} +.librevjs-libre-mixpurple-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixpurple-skin .librevjs-play-control:hover:before { +color:#8e44ad; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixpurple-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixpurple-skin .librevjs-mute-control,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixpurple-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixpurple-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixpurple-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #9c27b0 url() -50% 0 repeat; +} +.librevjs-libre-mixpurple-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixpurple-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-mixpurple-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixpurple-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixpurple-skin .librevjs-play-progress { +background: #9c27b0 url() -50% 0 repeat; +} +.librevjs-libre-mixpurple-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixpurple-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixpurple-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixpurple-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixpurple-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixpurple-skin .librevjs-remaining-time { +display:none; +float:left +} +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixpurple-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.8em; + height: 2.6em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + /* Need a slightly gray bg so it can be seen on black backgrounds */ + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); + border: 0 solid ; + /* border-radius */ + -webkit-border-radius: 0.4em; + -moz-border-radius: 0.4em; + border-radius: 0.4em; + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixpurple-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixpurple-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mixpurple-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixpurple-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixpurple-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: rgb(142, 68, 173); /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixpurple-skin .librevjs-big-play-button:before { +content: "\e001"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 2.6em; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} +.librevjs-error .librevjs-big-play-button { +display: none; +} +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ +.librevjs-loading-spinner { +display:none; +position:absolute; +top:50%; +left:50%; +font-size:4em; +line-height:1; +width:1em; +height:1em; +margin-left:-.5em; +margin-top:-.5em; +opacity:.75; +-webkit-animation:spin 1.5s infinite linear; +-moz-animation:spin 1.5s infinite linear; +-o-animation:spin 1.5s infinite linear; +animation:spin 1.5s infinite linear +} +.librevjs-libre-mixpurple-skin .librevjs-loading-spinner:before { +content:"\e01e"; +font-family:LibreVideoJS; +position:absolute; +top:0; +left:0; +width:1em; +height:1em; +text-align:center; +text-shadow:0 0 .1em #000 +} +@-moz-keyframes spin { +0% { + -moz-transform:rotate(0deg) + } +100% { + -moz-transform:rotate(359deg) + } +} +@-webkit-keyframes spin { +0% { + -webkit-transform:rotate(0deg) + } +100% { + -webkit-transform:rotate(359deg) + } +} +@-o-keyframes spin { +0% { + -o-transform:rotate(0deg) + } +100% { + -o-transform:rotate(359deg) + } +} +@keyframes spin { +0% { + transform:rotate(0deg) + } +100% { + transform:rotate(359deg) + } +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixpurple-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixpurple-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixpurple-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-mixpurple-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color: #ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(156, 39, 176); +} +.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #9c27b0; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-mixpurple-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixpurple-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixpurple-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.cliplibre-js { +background-color:#000; +position:relative; +padding:0; +font-size:10px; +vertical-align:middle; +font-weight:500; +font-style:normal; +font-family:Arial,sans-serif; +-webkit-user-select:none; +-moz-user-select:none; +-ms-user-select:none; +user-select:none +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +body.librevjs-full-window { +padding:0; +margin:0; +height:100%; +overflow-y:auto; +} +.cliplibre-js.librevjs-fullscreen { +position:fixed; +overflow:hidden; +z-index:1000; +left:0; +top:0; +bottom:0; +right:0; +width:100%!important; +height:100%!important; +position:absolute; +} +.cliplibre-js:-webkit-full-screen { +width:100%!important; +height:100%!important +} +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { +cursor:none +} +/* Poster Styles */ +.librevjs-poster { +background-repeat:no-repeat; +background-position:50% 50%; +background-size:contain; +cursor:pointer; +height:100%; +margin:0; +padding:0; +position:relative; +width:100% +} +.librevjs-poster img { +display:block; +margin:0 auto; +max-height:100%; +padding:0; +width:100% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +/* Transparent black background, or fallback to all black (oldIE) */ +background-color:#000; +background-color:rgba(0,0,0,.6) +} +.cliplibre-js .librevjs-subtitles { +color:#fff +} +.cliplibre-js .librevjs-captions { +color:rgb(255, 237, 0); +background-color: rgba(2, 7, 11, 0.7); +} +.librevjs-tt-cue { +display:block +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixpurple-skin .librevjs-hidden { +display:none +} +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #9c27b0; +background-color: inherit; +} +.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #8e44ad; +background-color: inherit; +} +/*Responsive*/ +.cliplibre-js-responsive-container.librevjs-hd { +padding-top: 56.25%; +} +.cliplibre-js-responsive-container.librevjs-sd { +padding-top: 75%; +} +.cliplibre-js-responsive-container { +width: 100%; +position: relative; +} +.cliplibre-js-responsive-container .cliplibre-js { +height: 100% !important; +width: 100% !important; +position: absolute; +top: 0; +left: 0; +} +@media screen and (max-width: 800px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.5em; + margin-bottom: -0.2em; + } +} +@media screen and (max-width: 600px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 2em; + } +} +@media screen and (max-width: 413px){ + .cliplibre-js { + font-size:8px; + } +} +@media screen and (max-width: 400px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1em; + } + .librevjs-libre-mixpurple-skin .librevjs-big-play-button{ + font-size: 2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } +} +@media screen and (max-width: 335px){ + .cliplibre-js { + font-size:6px; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixpurple-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixpurple-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} diff --git a/librevideojs/css/mix-material/mix-red.css b/librevideojs/css/mix-material/mix-red.css new file mode 100644 index 0000000..e729b8c --- /dev/null +++ b/librevideojs/css/mix-material/mix-red.css @@ -0,0 +1,747 @@ +/*! +LibreVideoJS Estilos personalizados = Red +Version 1.4 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +.librevjs-libre-mixred-skin { +color:#ccc; +background-color: inherit; +} +@font-face { +font-family:"LibreVideoJS"; +src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); +src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixred-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-mixred-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-mixred-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixred-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixred-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixred-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixred-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-mixred-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixred-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixred-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixred-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-mixred-skin .librevjs-control:focus:before,.librevjs-libre-mixred-skin .librevjs-control:hover:before { +color: #f44336; +} +.librevjs-libre-mixred-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixred-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(244, 67, 54); +} +.librevjs-libre-mixred-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixred-skin .librevjs-play-control:hover:before { +color:#f22e1f; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixred-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixred-skin .librevjs-mute-control,.librevjs-libre-mixred-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixred-skin .librevjs-mute-control:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixred-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixred-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixred-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #f44336 url() -50% 0 repeat; +} +.librevjs-libre-mixred-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixred-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-mixred-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixred-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixred-skin .librevjs-play-progress { +background: #f44336 url() -50% 0 repeat; +} +.librevjs-libre-mixred-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixred-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixred-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixred-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixred-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixred-skin .librevjs-remaining-time { +display:none; +float:left +} +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixred-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixred-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.8em; + height: 2.6em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + /* Need a slightly gray bg so it can be seen on black backgrounds */ + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); + border: 0 solid ; + /* border-radius */ + -webkit-border-radius: 0.4em; + -moz-border-radius: 0.4em; + border-radius: 0.4em; + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixred-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixred-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mixred-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixred-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixred-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: #f12b24; /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixred-skin .librevjs-big-play-button:before { +content: "\e001"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 2.6em; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} +.librevjs-error .librevjs-big-play-button { +display: none; +} +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ +.librevjs-loading-spinner { +display:none; +position:absolute; +top:50%; +left:50%; +font-size:4em; +line-height:1; +width:1em; +height:1em; +margin-left:-.5em; +margin-top:-.5em; +opacity:.75; +-webkit-animation:spin 1.5s infinite linear; +-moz-animation:spin 1.5s infinite linear; +-o-animation:spin 1.5s infinite linear; +animation:spin 1.5s infinite linear +} +.librevjs-libre-mixred-skin .librevjs-loading-spinner:before { +content:"\e01e"; +font-family:LibreVideoJS; +position:absolute; +top:0; +left:0; +width:1em; +height:1em; +text-align:center; +text-shadow:0 0 .1em #000 +} +@-moz-keyframes spin { +0% { + -moz-transform:rotate(0deg) + } +100% { + -moz-transform:rotate(359deg) + } +} +@-webkit-keyframes spin { +0% { + -webkit-transform:rotate(0deg) + } +100% { + -webkit-transform:rotate(359deg) + } +} +@-o-keyframes spin { +0% { + -o-transform:rotate(0deg) + } +100% { + -o-transform:rotate(359deg) + } +} +@keyframes spin { +0% { + transform:rotate(0deg) + } +100% { + transform:rotate(359deg) + } +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixred-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixred-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixred-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +max-height:15em; +/* Same bottom as librevjs-menu border-top */ +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-mixred-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixred-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color: #ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(244, 67, 54); +} +.librevjs-libre-mixred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #f44336; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-mixred-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixred-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixred-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.cliplibre-js { +background-color:#000; +position:relative; +padding:0; +font-size:10px; +vertical-align:middle; +font-weight:500; +font-style:normal; +font-family:Arial,sans-serif; +-webkit-user-select:none; +-moz-user-select:none; +-ms-user-select:none; +user-select:none +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +body.librevjs-full-window { +padding:0; +margin:0; +height:100%; +overflow-y:auto; +} +.cliplibre-js.librevjs-fullscreen { +position:fixed; +overflow:hidden; +z-index:1000; +left:0; +top:0; +bottom:0; +right:0; +width:100%!important; +height:100%!important; +position:absolute; +} +.cliplibre-js:-webkit-full-screen { +width:100%!important; +height:100%!important +} +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { +cursor:none +} +/* Poster Styles */ +.librevjs-poster { +background-repeat:no-repeat; +background-position:50% 50%; +background-size:contain; +cursor:pointer; +height:100%; +margin:0; +padding:0; +position:relative; +width:100% +} +.librevjs-poster img { +display:block; +margin:0 auto; +max-height:100%; +padding:0; +width:100% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +/* Transparent black background, or fallback to all black (oldIE) */ +background-color:#000; +background-color:rgba(0,0,0,.6) +} +.cliplibre-js .librevjs-subtitles { +color:#fff +} +.cliplibre-js .librevjs-captions { +color:rgb(255, 237, 0); +background-color: rgba(2, 7, 11, 0.7); +} +.librevjs-tt-cue { +display:block +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixred-skin .librevjs-hidden { +display:none +} +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: rgb(246, 44, 30); +background-color: inherit; +} +.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(244, 67, 54); +background-color: inherit; +} +/*Responsive*/ +.cliplibre-js-responsive-container.librevjs-hd { +padding-top: 56.25%; +} +.cliplibre-js-responsive-container.librevjs-sd { +padding-top: 75%; +} +.cliplibre-js-responsive-container { +width: 100%; +position: relative; +} +.cliplibre-js-responsive-container .cliplibre-js { +height: 100% !important; +width: 100% !important; +position: absolute; +top: 0; +left: 0; +} +@media screen and (max-width: 800px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.5em; + margin-bottom: -0.2em; + } +} +@media screen and (max-width: 600px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 2em; + } +} +@media screen and (max-width: 413px){ + .cliplibre-js { + font-size:8px; + } +} +@media screen and (max-width: 400px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1em; + } + .librevjs-libre-mixred-skin .librevjs-big-play-button{ + font-size: 2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } +} +@media screen and (max-width: 335px){ + .cliplibre-js { + font-size:6px; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixred-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixred-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} diff --git a/librevideojs/css/mix-material/mix-teal.css b/librevideojs/css/mix-material/mix-teal.css new file mode 100644 index 0000000..49afd7b --- /dev/null +++ b/librevideojs/css/mix-material/mix-teal.css @@ -0,0 +1,747 @@ +/*! +LibreVideoJS Estilos personalizados = Teal +Version 1.2 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +.librevjs-libre-mixteal-skin { +color:#ccc !important; +background-color: inherit; +} +@font-face { +font-family:"LibreVideoJS"; +src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); +src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixteal-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-mixteal-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-mixteal-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixteal-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixteal-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixteal-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixteal-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-mixteal-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixteal-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixteal-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-mixteal-skin .librevjs-control:focus:before,.librevjs-libre-mixteal-skin .librevjs-control:hover:before { +color: #1de9b6; +} +.librevjs-libre-mixteal-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixteal-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(29, 233, 182); +} +.librevjs-libre-mixteal-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixteal-skin .librevjs-play-control:hover:before { +color:#007c5d; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixteal-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixteal-skin .librevjs-mute-control,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixteal-skin .librevjs-mute-control:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixteal-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixteal-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixteal-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #1de9b6 url() -50% 0 repeat; +} +.librevjs-libre-mixteal-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixteal-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-mixteal-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixteal-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixteal-skin .librevjs-play-progress { +background: #1de9b6 url() -50% 0 repeat; +} +.librevjs-libre-mixteal-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixteal-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixteal-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixteal-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixteal-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixteal-skin .librevjs-remaining-time { +display:none; +float:left +} +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixteal-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixteal-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.8em; + height: 2.6em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + /* Need a slightly gray bg so it can be seen on black backgrounds */ + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); + border: 0 solid ; + /* border-radius */ + -webkit-border-radius: 0.4em; + -moz-border-radius: 0.4em; + border-radius: 0.4em; + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixteal-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixteal-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixteal-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixteal-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: #1de9b6; /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixteal-skin .librevjs-big-play-button:before { +content: "\e001"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 2.6em; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} +.librevjs-error .librevjs-big-play-button { +display: none; +} +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ +.librevjs-loading-spinner { +display:none; +position:absolute; +top:50%; +left:50%; +font-size:4em; +line-height:1; +width:1em; +height:1em; +margin-left:-.5em; +margin-top:-.5em; +opacity:.75; +-webkit-animation:spin 1.5s infinite linear; +-moz-animation:spin 1.5s infinite linear; +-o-animation:spin 1.5s infinite linear; +animation:spin 1.5s infinite linear +} +.librevjs-libre-mixteal-skin .librevjs-loading-spinner:before { +content:"\e01e"; +font-family:LibreVideoJS; +position:absolute; +top:0; +left:0; +width:1em; +height:1em; +text-align:center; +text-shadow:0 0 .1em #000 +} +@-moz-keyframes spin { +0% { + -moz-transform:rotate(0deg) + } +100% { + -moz-transform:rotate(359deg) + } +} +@-webkit-keyframes spin { +0% { + -webkit-transform:rotate(0deg) + } +100% { + -webkit-transform:rotate(359deg) + } +} +@-o-keyframes spin { +0% { + -o-transform:rotate(0deg) + } +100% { + -o-transform:rotate(359deg) + } +} +@keyframes spin { +0% { + transform:rotate(0deg) + } +100% { + transform:rotate(359deg) + } +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixteal-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixteal-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-mixteal-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixteal-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color: #ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected { +color: rgb(1, 56, 47); +background-color: rgb(29, 233, 182); +} +.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #004d40; +background-color: #1de9b6; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-mixteal-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixteal-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixteal-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.cliplibre-js { +background-color:#000; +position:relative; +padding:0; +font-size:10px; +vertical-align:middle; +font-weight:500; +font-style:normal; +font-family:Arial,sans-serif; +-webkit-user-select:none; +-moz-user-select:none; +-ms-user-select:none; +user-select:none +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +body.librevjs-full-window { +padding:0; +margin:0; +height:100%; +overflow-y:auto; +} +.cliplibre-js.librevjs-fullscreen { +position:fixed; +overflow:hidden; +z-index:1000; +left:0; +top:0; +bottom:0; +right:0; +width:100%!important; +height:100%!important; +position:absolute; +} +.cliplibre-js:-webkit-full-screen { +width:100%!important; +height:100%!important +} +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { +cursor:none +} +/* Poster Styles */ +.librevjs-poster { +background-repeat:no-repeat; +background-position:50% 50%; +background-size:contain; +cursor:pointer; +height:100%; +margin:0; +padding:0; +position:relative; +width:100% +} +.librevjs-poster img { +display:block; +margin:0 auto; +max-height:100%; +padding:0; +width:100% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +/* Transparent black background, or fallback to all black (oldIE) */ +background-color:#000; +background-color:rgba(0,0,0,.6) +} +.cliplibre-js .librevjs-subtitles { +color:#fff +} +.cliplibre-js .librevjs-captions { +color:rgb(255, 237, 0); +background-color: rgba(2, 7, 11, 0.7); +} +.librevjs-tt-cue { +display:block +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixteal-skin .librevjs-hidden { +display:none +} +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color:rgb(26, 187, 156); +background-color: inherit; +} +.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: rgb(29, 233, 182); +background-color: inherit; +} +/*Responsive*/ +.cliplibre-js-responsive-container.librevjs-hd { +padding-top: 56.25%; +} +.cliplibre-js-responsive-container.librevjs-sd { +padding-top: 75%; +} +.cliplibre-js-responsive-container { +width: 100%; +position: relative; +} +.cliplibre-js-responsive-container .cliplibre-js { +height: 100% !important; +width: 100% !important; +position: absolute; +top: 0; +left: 0; +} +@media screen and (max-width: 800px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.5em; + margin-bottom: -0.2em; + } +} +@media screen and (max-width: 600px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 2em; + } +} +@media screen and (max-width: 413px){ + .cliplibre-js { + font-size:8px; + } +} +@media screen and (max-width: 400px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1em; + } + .librevjs-libre-mixteal-skin .librevjs-big-play-button{ + font-size: 2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } +} +@media screen and (max-width: 335px){ + .cliplibre-js { + font-size:6px; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixteal-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixteal-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} diff --git a/librevideojs/css/mix-material/mix-yellow.css b/librevideojs/css/mix-material/mix-yellow.css new file mode 100644 index 0000000..92ec021 --- /dev/null +++ b/librevideojs/css/mix-material/mix-yellow.css @@ -0,0 +1,747 @@ +/*! +LibreVideoJS Estilos personalizados = Yellow +Version 1.4 +Escrito por Jesús Eduardo +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurances of 'librevjs-default-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="librevideo-js my-skin-name"> +*/ +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. +*/ +.librevjs-libre-mixyellow-skin { +color:#ccc; +background-color: inherit; +} +@font-face { +font-family:"LibreVideoJS"; +src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); +src: local('?'), + url("../../fonts/libre-material/libre-icons.woff") format("woff"), + url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), + url("../../fonts/libre-material/libre-icons.svg") format("svg"); +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mixyellow-skin .librevjs-slider { +/* Replace browser focus highlight with handle highlight */ +outline: 0; +position: relative; +cursor: pointer; +padding: 0; +/* background-color-with-alpha */ +background-color: #000000; +background-color: rgba(0, 0, 0, 0.5); +} +.librevjs-libre-mixyellow-skin .librevjs-slider:focus { +-webkit-box-shadow:0 0 2em #fff; +-moz-box-shadow:0 0 2em #fff; +box-shadow:0 0 2em #fff; +} + +/*Eliminación de botón de barra de progreso*/ +.librevjs-libre-mixyellow-skin .librevjs-slider-handle { +width: 0; +height: 0; +} +.librevjs-libre-mixyellow-skin .librevjs-slider-handle:before { +text-shadow: 0em 0em 1em #fff; +position: absolute; +top: 0; +left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mixyellow-skin .librevjs-control-bar { +/* Start hidden */ +display: none; +position: absolute; +/* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ +bottom: 0; +/* Use left/right to stretch to 100% width of player div */ +left: 0; +right: 0; +/* Height includes any margin you want above or below control items */ +height: 3.0em; +/* background-color-with-alpha */ +background-color: #232323; +background-color: rgba(35, 35, 35, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mixyellow-skin.librevjs-has-started .librevjs-control-bar { +display:block; +visibility:visible; +opacity:1; +-webkit-transition:visibility .1s,opacity .1s; +-moz-transition:visibility .1s,opacity .1s; +-o-transition:visibility .1s,opacity .1s; +transition:visibility .1s,opacity .1s +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mixyellow-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { +display:block; +visibility:hidden; +opacity:0; +-webkit-transition:visibility 1s,opacity 1s; +-moz-transition:visibility 1s,opacity 1s; +-o-transition:visibility 1s,opacity 1s; +transition:visibility 1s,opacity 1s +} +.librevjs-libre-mixyellow-skin.librevjs-controls-disabled .librevjs-control-bar { +display:none +} +.librevjs-libre-mixyellow-skin.librevjs-using-native-controls .librevjs-control-bar { +display:none +} +@media \0screen { + .librevjs-libre-mixyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content:"" + } +} +/* General styles for individual controls. */ +.librevjs-libre-mixyellow-skin .librevjs-control { +outline:0; +position:relative; +float:left; +text-align:center; +margin:0; +padding:0; +height:3em; +width:4em +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mixyellow-skin .librevjs-control:before { +font-family:LibreVideoJS; +font-size:1.5em; +line-height:2; +position:absolute; +top:0; +left:0; +width:100%; +height:100%; +text-align:center; +text-shadow:1px 1px 1px rgba(0,0,0,.5) +} +/* Replacement for focus outline */ +.librevjs-libre-mixyellow-skin .librevjs-control:focus:before,.librevjs-libre-mixyellow-skin .librevjs-control:hover:before { +color: #f1c40f; +} +.librevjs-libre-mixyellow-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mixyellow-skin .librevjs-control-text { +border:0; +clip:rect(0 0 0 0); +height:1px; +margin:-1px; +overflow:hidden; +padding:0; +position:absolute; +width:1px +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-play-control { +width:5em; +cursor:pointer; +color:rgb(241, 196, 14); +} +.librevjs-libre-mixyellow-skin .librevjs-play-control:before { +content:"\e001" +} +.librevjs-libre-mixyellow-skin .librevjs-play-control:hover:before { +color:#f39c12; /*color de play control al pasar el cursor*/ +} +.librevjs-libre-mixyellow-skin.librevjs-playing .librevjs-play-control:before { +content:"\e002" +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mixyellow-skin .librevjs-mute-control,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button { +cursor:pointer; +float:right +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button:before { +content:"\e006" +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before { +content:"\e003" +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before { +content:"\e004" +} +.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before { +content:"\e005" +} +.librevjs-libre-mixyellow-skin .librevjs-volume-control { +width:5em; +float:right +} +.librevjs-libre-mixyellow-skin .librevjs-volume-bar { +width:5em; +height:.6em; +margin:1.1em auto 0 +} +.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu-content { +height:2.9em +} + +/*Personalización del nivel de volumen*/ +.librevjs-libre-mixyellow-skin .librevjs-volume-level { +position: absolute; +top: 0; +left: 0; +height: 0.5em; +/* assuming volume starts at 1.0 */ + +width: 100%; +background: #f1c40f url() -50% 0 repeat; +} +.librevjs-libre-mixyellow-skin .librevjs-volume-bar .librevjs-volume-handle { +width:.5em; +height:.5em +} +.librevjs-libre-mixyellow-skin .librevjs-volume-handle:before { +font-size:.9em; +top:-.2em; +left:-.2em; +width:1em; +height:1em; +} +.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { +width:6em; +left:-4em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-progress-control { +position:absolute; +left:0; +right:0; +width:auto; +font-size:.3em; +height:1em; +top:-1em; +-webkit-transition:all .4s; +-moz-transition:all .4s; +-o-transition:all .4s; +transition:all .4s; +} +.librevjs-libre-mixyellow-skin:hover .librevjs-progress-control { +font-size:.9em; +-webkit-transition:all .2s; +-moz-transition:all .2s; +-o-transition:all .2s; +transition:all .2s; +} +/* Box containing play and load progress. Also acts as seek scrubber. */ +.librevjs-libre-mixyellow-skin .librevjs-progress-holder { +height:100%; +} +/* Progress Bars */ +.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-load-progress { +position:absolute; +display:block; +height:100%; +margin:0; +padding:0; +left:0; +top:0 +} +.librevjs-libre-mixyellow-skin .librevjs-play-progress { +background: #f1c40f url() -50% 0 repeat; +} +.librevjs-libre-mixyellow-skin .librevjs-load-progress { +background:#646464; +background:rgba(255,255,255,.4) +} +.librevjs-libre-mixyellow-skin .librevjs-seek-handle { +width:1.5em; +height:100% +} +.librevjs-libre-mixyellow-skin .librevjs-seek-handle:before { +padding-top:.1em +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-time-controls { +font-size:1em; +font-weight: 700;/*mayor visibilidad*/ +line-height:3em +} +.librevjs-libre-mixyellow-skin .librevjs-current-time { +float:left +} +.librevjs-libre-mixyellow-skin .librevjs-duration { +float:left +} +.librevjs-libre-mixyellow-skin .librevjs-remaining-time { +display:none; +float:left +} +.librevjs-time-divider { +float:left; +line-height:3em +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control { +width:3.8em; +cursor:pointer; +float:right +} +.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control:before { +content:"\e000" +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mixyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { +content:"\e00b" +} + +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer by LibreVideoJS FreeArts. +*/ +.librevjs-libre-mixyellow-skin .librevjs-big-play-button { + /* Center it horizontally */ + left: 50%; + margin-left: -1.85em; + /* Center it vertically */ + top: 50%; + margin-top: -1.3em; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.8em; + height: 2.6em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + /* Need a slightly gray bg so it can be seen on black backgrounds */ + /* background-color-with-alpha */ + background-color: #232323; + background-color: rgba(35, 35, 35, 0.8); + border: 0 solid ; + /* border-radius */ + -webkit-border-radius: 0.4em; + -moz-border-radius: 0.4em; + border-radius: 0.4em; + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* Hide if controls are disabled */ +.librevjs-libre-mixyellow-skin.librevjs-controls-disabled .librevjs-big-play-button { +display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mixyellow-skin.librevjs-has-started .librevjs-big-play-button { +display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mixyellow-skin.librevjs-using-native-controls .librevjs-big-play-button { +display: none; +} +.librevjs-libre-mixyellow-skin:hover .librevjs-big-play-button, +.librevjs-libre-mixyellow-skin .librevjs-big-play-button:focus { +outline: 0; +cursor: pointer; +/* IE8 needs a non-glow hover state */ +background-color: rgb(244, 156, 18); /*color del boton play al hacer focus*/ +color: #FFFFFF; +} +.librevjs-libre-mixyellow-skin .librevjs-big-play-button:before { +content: "\e001"; +font-family: LibreVideoJS; +/* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 2.6em; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} +.librevjs-error .librevjs-big-play-button { +display: none; +} +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ +.librevjs-loading-spinner { +display:none; +position:absolute; +top:50%; +left:50%; +font-size:4em; +line-height:1; +width:1em; +height:1em; +margin-left:-.5em; +margin-top:-.5em; +opacity:.75; +-webkit-animation:spin 1.5s infinite linear; +-moz-animation:spin 1.5s infinite linear; +-o-animation:spin 1.5s infinite linear; +animation:spin 1.5s infinite linear +} +.librevjs-libre-mixyellow-skin .librevjs-loading-spinner:before { +content:"\e01e"; +font-family:LibreVideoJS; +position:absolute; +top:0; +left:0; +width:1em; +height:1em; +text-align:center; +text-shadow:0 0 .1em #000 +} +@-moz-keyframes spin { +0% { + -moz-transform:rotate(0deg) + } +100% { + -moz-transform:rotate(359deg) + } +} +@-webkit-keyframes spin { +0% { + -webkit-transform:rotate(0deg) + } +100% { + -webkit-transform:rotate(359deg) + } +} +@-o-keyframes spin { +0% { + -o-transform:rotate(0deg) + } +100% { + -o-transform:rotate(359deg) + } +} +@keyframes spin { +0% { + transform:rotate(0deg) + } +100% { + transform:rotate(359deg) + } +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mixyellow-skin .librevjs-menu-button { +float:right; +cursor:pointer; +} +.librevjs-libre-mixyellow-skin .librevjs-menu { +display:none; +position:absolute; +bottom:0; +left:0; +width:0; +height:0; +margin-bottom:3em; +border-left:2em solid transparent; +border-right:2em solid transparent; +border-top:1.55em solid #000; +border-top-color:rgba(7,40,50,.5); +} +/* Button Pop-up Menu */ +.librevjs-libre-mixyellow-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { +display:block; +padding:0; +margin:0; +position:absolute; +width:10em; +bottom:1.5em; +/* Same bottom as librevjs-menu border-top */ +max-height:15em; +overflow:auto; +left:-5em; +/* Width of menu - width of button / 2 */ +/* background-color-with-alpha */ +background-color:#07141e; +background-color:rgba(7,20,30,.7); +-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +box-shadow:-.2em -.2em .3em rgba(255,255,255,.2); +} +.librevjs-libre-mixyellow-skin .librevjs-menu-button:hover .librevjs-menu { +display:block; +} +.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li { +list-style:none; +margin:0; +padding:.3em 0; +line-height:1.4em; +font-size:1.2em; +text-align:center; +text-transform:lowercase; +color: #ccc; +} + +/* Select color menu subtitles/captions */ +.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected { +color: #fff; +background-color: rgb(241, 196, 14); +} +.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover { +outline: 0; +color: #fff; +background-color: #f1c40f; +} +/*End Select color menu subtitles/caption */ +.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-menu-title { +text-align:center; +text-transform:uppercase; +font-size:1em; +line-height:2em; +padding:0; +margin:0 0 .3em; +font-weight:700; +cursor:default; +} +/* Subtitles Button */ +.librevjs-libre-mixyellow-skin .librevjs-subtitles-button:before { +content:"\e00c" +} +/* Captions Button */ +.librevjs-libre-mixyellow-skin .librevjs-captions-button:before { +content:"\e008" +} +/* Replacement for focus outline */ +.librevjs-libre-mixyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixyellow-skin .librevjs-captions-button:hover .librevjs-control-content:before { +-webkit-box-shadow:0 0 1em #fff; +-moz-box-shadow:0 0 1em #fff; +box-shadow:0 0 1em #fff; +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (HTML5) and controls, +and sets the width and height of the video. +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.cliplibre-js { +background-color:#000; +position:relative; +padding:0; +font-size:10px; +vertical-align:middle; +font-weight:500; +font-style:normal; +font-family:Arial,sans-serif; +-webkit-user-select:none; +-moz-user-select:none; +-ms-user-select:none; +user-select:none +} +/* Playback technology elements expand to the width/height of the containing div <video> */ +.cliplibre-js .librevjs-tech { +position:absolute; +top:0; +left:0; +width:100%; +height:100% +} +.cliplibre-js:-moz-full-screen { +position:absolute +} +/* Fullscreen Styles */ +body.librevjs-full-window { +padding:0; +margin:0; +height:100%; +overflow-y:auto; +} +.cliplibre-js.librevjs-fullscreen { +position:fixed; +overflow:hidden; +z-index:1000; +left:0; +top:0; +bottom:0; +right:0; +width:100%!important; +height:100%!important; +position:absolute; +} +.cliplibre-js:-webkit-full-screen { +width:100%!important; +height:100%!important +} +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { +cursor:none +} +/* Poster Styles */ +.librevjs-poster { +background-repeat:no-repeat; +background-position:50% 50%; +background-size:contain; +cursor:pointer; +height:100%; +margin:0; +padding:0; +position:relative; +width:100% +} +.librevjs-poster img { +display:block; +margin:0 auto; +max-height:100%; +padding:0; +width:100% +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { +display:none +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { +text-align:center; +position:absolute; +bottom:4em; +left:1em; +right:1em +} +/* Individual tracks */ +.cliplibre-js .librevjs-text-track { +display:none; +font-size:1.7em; +text-align:center; +margin-bottom:.1em; +/* Transparent black background, or fallback to all black (oldIE) */ +background-color:#000; +background-color:rgba(0,0,0,.6) +} +.cliplibre-js .librevjs-subtitles { +color:#fff +} +.cliplibre-js .librevjs-captions { +color:rgb(255, 237, 0); +background-color: rgba(2, 7, 11, 0.7); +} +.librevjs-tt-cue { +display:block +} +/* Hide disabled or unsupported controls */ +.librevjs-libre-mixyellow-skin .librevjs-hidden { +display:none +} +.librevjs-lock-showing { +display:block!important; +opacity:1; +visibility:visible +} +/* Opctional Styles No support HTML5*/ +.no_html5 { +background: black none repeat scroll 0 0; +color: white; +height: 160px; +padding: 130px 10px 20px; +text-align: center; +} + +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{ +color: #f1c40f; +background-color: inherit; +} +.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ +color: #f39c12; +background-color: inherit; +} +/*Responsive*/ +.cliplibre-js-responsive-container.librevjs-hd { +padding-top: 56.25%; +} +.cliplibre-js-responsive-container.librevjs-sd { +padding-top: 75%; +} +.cliplibre-js-responsive-container { +width: 100%; +position: relative; +} +.cliplibre-js-responsive-container .cliplibre-js { +height: 100% !important; +width: 100% !important; +position: absolute; +top: 0; +left: 0; +} +@media screen and (max-width: 800px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.5em; + margin-bottom: -0.2em; + } +} +@media screen and (max-width: 600px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 2em; + } +} +@media screen and (max-width: 413px){ + .cliplibre-js { + font-size:8px; + } +} +@media screen and (max-width: 400px){ + .cliplibre-js .librevjs-text-track{ + font-size: 1em; + } + .librevjs-libre-mixyellow-skin .librevjs-big-play-button{ + font-size: 2em; + } + .cliplibre-js .librevjs-text-track-display{ + bottom: 1em; + } +} +@media screen and (max-width: 335px){ + .cliplibre-js { + font-size:6px; + } +} +@media screen and (max-width: 150px){ + .librevjs-libre-mixyellow-skin .librevjs-big-play-button{ + font-size: 1.8em; + } +} +@media screen and (max-width: 90px){ + .librevjs-libre-mixyellow-skin .librevjs-big-play-button{ + font-size: 1.4em; + } +} diff --git a/librevideojs/fonts/default/vjs.eot b/librevideojs/fonts/default/vjs.eot Binary files differdeleted file mode 100644 index a075c19..0000000 --- a/librevideojs/fonts/default/vjs.eot +++ /dev/null diff --git a/librevideojs/fonts/default/vjs.svg b/librevideojs/fonts/default/vjs.svg deleted file mode 100644 index 75a15cd..0000000 --- a/librevideojs/fonts/default/vjs.svg +++ /dev/null @@ -1,31 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -<svg xmlns="http://www.w3.org/2000/svg"> -<metadata> -This is a custom SVG font generated by IcoMoon. -<iconset grid="16"/> -</metadata> -<defs> -<font id="VideoJS" horiz-adv-x="512"> -<font-face units-per-em="512" ascent="480" descent="-32"/> -<missing-glyph horiz-adv-x="512"/> -<glyph class="hidden" unicode="" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0"/> -<glyph unicode="" d="M 64,416L 224,416L 224,32L 64,32zM 288,416L 448,416L 448,32L 288,32z"/> -<glyph unicode="" d="M 200.666,440.666 C 213.5,453.5 224,449.15 224,431 L 224,17 C 224-1.15 213.5-5.499 200.666,7.335 L 80,128 L 0,128 L 0,320 L 80,320 L 200.666,440.666 Z"/> -<glyph unicode="" d="M 274.51,109.49c-6.143,0-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0,33.941 c 40.55,40.55, 40.55,106.529,0,147.078c-9.373,9.373-9.373,24.569,0,33.941c 9.373,9.372, 24.568,9.372, 33.941,0 c 59.265-59.265, 59.265-155.696,0-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.5,453.5 224,449.15 224,431 L 224,17 C 224-1.15 213.5-5.499 200.666,7.335 L 80,128 L 0,128 L 0,320 L 80,320 L 200.666,440.666 Z"/> -<glyph unicode="" d="M 359.765,64.235c-6.143,0-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0,33.941 c 65.503,65.503, 65.503,172.085,0,237.588c-9.372,9.373-9.372,24.569,0,33.941c 9.372,9.371, 24.569,9.372, 33.941,0 C 417.532,335.938, 440,281.696, 440,224c0-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0,33.941 c 40.55,40.55, 40.55,106.529,0,147.078c-9.373,9.373-9.373,24.569,0,33.941c 9.373,9.372, 24.568,9.372, 33.941,0 c 59.265-59.265, 59.265-155.696,0-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.5,453.5 224,449.15 224,431 L 224,17 C 224-1.15 213.5-5.499 200.666,7.335 L 80,128 L 0,128 L 0,320 L 80,320 L 200.666,440.666 Z"/> -<glyph unicode="" d="M 445.020,18.98c-6.143,0-12.284,2.343-16.971,7.029c-9.372,9.373-9.372,24.568,0,33.941 C 471.868,103.771, 496.001,162.030, 496.001,224c0,61.969-24.133,120.229-67.952,164.049c-9.372,9.373-9.372,24.569,0,33.941 c 9.372,9.372, 24.569,9.372, 33.941,0c 52.885-52.886, 82.011-123.2, 82.011-197.99c0-74.791-29.126-145.104-82.011-197.99 C 457.304,21.323, 451.162,18.98, 445.020,18.98zM 359.765,64.235c-6.143,0-12.284,2.343-16.971,7.029c-9.372,9.372-9.372,24.568,0,33.941 c 65.503,65.503, 65.503,172.085,0,237.588c-9.372,9.373-9.372,24.569,0,33.941c 9.372,9.371, 24.569,9.372, 33.941,0 C 417.532,335.938, 440,281.696, 440,224c0-57.695-22.468-111.938-63.265-152.735C 372.049,66.578, 365.907,64.235, 359.765,64.235zM 274.51,109.49c-6.143,0-12.284,2.343-16.971,7.029c-9.373,9.373-9.373,24.568,0,33.941 c 40.55,40.55, 40.55,106.529,0,147.078c-9.373,9.373-9.373,24.569,0,33.941c 9.373,9.372, 24.568,9.372, 33.941,0 c 59.265-59.265, 59.265-155.696,0-214.961C 286.794,111.833, 280.652,109.49, 274.51,109.49zM 200.666,440.666 C 213.5,453.5 224,449.15 224,431 L 224,17 C 224-1.15 213.5-5.499 200.666,7.335 L 80,128 L 0,128 L 0,320 L 80,320 L 200.666,440.666 Z" horiz-adv-x="544"/> -<glyph unicode="" d="M 256,480L 96,224L 256-32L 416,224 z"/> -<glyph unicode="" d="M 0,480 L 687.158,480 L 687.158-35.207 L 0-35.207 L 0,480 z M 622.731,224.638 C 621.878,314.664 618.46,353.922 597.131,381.656 C 593.291,387.629 586.038,391.042 580.065,395.304 C 559.158,410.669 460.593,416.211 346.247,416.211 C 231.896,416.211 128.642,410.669 108.162,395.304 C 101.762,391.042 94.504,387.629 90.242,381.656 C 69.331,353.922 66.349,314.664 65.069,224.638 C 66.349,134.607 69.331,95.353 90.242,67.62 C 94.504,61.22 101.762,58.233 108.162,53.967 C 128.642,38.18 231.896,33.060 346.247,32.207 C 460.593,33.060 559.158,38.18 580.065,53.967 C 586.038,58.233 593.291,61.22 597.131,67.62 C 618.46,95.353 621.878,134.607 622.731,224.638 z M 331.179,247.952 C 325.389,318.401 287.924,359.905 220.901,359.905 C 159.672,359.905 111.54,304.689 111.54,215.965 C 111.54,126.859 155.405,71.267 227.907,71.267 C 285.79,71.267 326.306,113.916 332.701,184.742 L 263.55,184.742 C 260.81,158.468 249.843,138.285 226.69,138.285 C 190.136,138.285 183.435,174.462 183.435,212.92 C 183.435,265.854 198.665,292.886 223.951,292.886 C 246.492,292.886 260.81,276.511 262.939,247.952 L 331.179,247.952 z M 570.013,247.952 C 564.228,318.401 526.758,359.905 459.74,359.905 C 398.507,359.905 350.379,304.689 350.379,215.965 C 350.379,126.859 394.244,71.267 466.746,71.267 C 524.625,71.267 565.14,113.916 571.536,184.742 L 502.384,184.742 C 499.649,158.468 488.682,138.285 465.529,138.285 C 428.971,138.285 422.27,174.462 422.27,212.92 C 422.27,265.854 437.504,292.886 462.785,292.886 C 485.327,292.886 499.649,276.511 501.778,247.952 L 570.013,247.952 z " horiz-adv-x="687.158"/> -<glyph unicode="" d="M 64,416L 448,416L 448,32L 64,32z"/> -<glyph unicode="" d="M 192,416A64,64 12780 1 1 320,416A64,64 12780 1 1 192,416zM 327.765,359.765A64,64 12780 1 1 455.765,359.765A64,64 12780 1 1 327.765,359.765zM 416,224A32,32 12780 1 1 480,224A32,32 12780 1 1 416,224zM 359.765,88.235A32,32 12780 1 1 423.765,88.23500000000001A32,32 12780 1 1 359.765,88.23500000000001zM 224.001,32A32,32 12780 1 1 288.001,32A32,32 12780 1 1 224.001,32zM 88.236,88.235A32,32 12780 1 1 152.236,88.23500000000001A32,32 12780 1 1 88.236,88.23500000000001zM 72.236,359.765A48,48 12780 1 1 168.236,359.765A48,48 12780 1 1 72.236,359.765zM 28,224A36,36 12780 1 1 100,224A36,36 12780 1 1 28,224z"/> -<glyph unicode="" d="M 224,192 L 224-16 L 144,64 L 48-32 L 0,16 L 96,112 L 16,192 ZM 512,432 L 416,336 L 496,256 L 288,256 L 288,464 L 368,384 L 464,480 Z"/> -<glyph unicode="" d="M 256,448 C 397.385,448 512,354.875 512,240 C 512,125.124 397.385,32 256,32 C 242.422,32 229.095,32.867 216.088,34.522 C 161.099-20.467 95.463-30.328 32-31.776 L 32-18.318 C 66.268-1.529 96,29.052 96,64 C 96,68.877 95.621,73.665 94.918,78.348 C 37.020,116.48 0,174.725 0,240 C 0,354.875 114.615,448 256,448 Z"/> -<glyph unicode="" d="M 256,480C 114.615,480,0,365.385,0,224s 114.615-256, 256-256s 256,114.615, 256,256S 397.385,480, 256,480z M 256,352 c 70.692,0, 128-57.308, 128-128s-57.308-128-128-128s-128,57.308-128,128S 185.308,352, 256,352z M 408.735,71.265 C 367.938,30.468, 313.695,8, 256,8c-57.696,0-111.938,22.468-152.735,63.265C 62.468,112.062, 40,166.304, 40,224 c0,57.695, 22.468,111.938, 63.265,152.735l 33.941-33.941c0,0,0,0,0,0c-65.503-65.503-65.503-172.085,0-237.588 C 168.937,73.475, 211.125,56, 256,56c 44.874,0, 87.062,17.475, 118.794,49.206c 65.503,65.503, 65.503,172.084,0,237.588l 33.941,33.941 C 449.532,335.938, 472,281.695, 472,224C 472,166.304, 449.532,112.062, 408.735,71.265z"/> -<glyph unicode="" d="M 512,224c-0.639,33.431-7.892,66.758-21.288,97.231c-13.352,30.5-32.731,58.129-56.521,80.96 c-23.776,22.848-51.972,40.91-82.492,52.826C 321.197,466.979, 288.401,472.693, 256,472c-32.405-0.641-64.666-7.687-94.167-20.678 c-29.524-12.948-56.271-31.735-78.367-54.788c-22.112-23.041-39.58-50.354-51.093-79.899C 20.816,287.104, 15.309,255.375, 16,224 c 0.643-31.38, 7.482-62.574, 20.067-91.103c 12.544-28.55, 30.738-54.414, 53.055-75.774c 22.305-21.377, 48.736-38.252, 77.307-49.36 C 194.988-3.389, 225.652-8.688, 256-8c 30.354,0.645, 60.481,7.277, 88.038,19.457c 27.575,12.141, 52.558,29.74, 73.183,51.322 c 20.641,21.57, 36.922,47.118, 47.627,74.715c 6.517,16.729, 10.94,34.2, 13.271,51.899c 0.623-0.036, 1.249-0.060, 1.881-0.060 c 17.673,0, 32,14.326, 32,32c0,0.898-0.047,1.786-0.119,2.666L 512,223.999 z M 461.153,139.026c-11.736-26.601-28.742-50.7-49.589-70.59 c-20.835-19.905-45.5-35.593-72.122-45.895C 312.828,12.202, 284.297,7.315, 256,8c-28.302,0.649-56.298,6.868-81.91,18.237 c-25.625,11.333-48.842,27.745-67.997,47.856c-19.169,20.099-34.264,43.882-44.161,69.529C 51.997,169.264, 47.318,196.729, 48,224 c 0.651,27.276, 6.664,54.206, 17.627,78.845c 10.929,24.65, 26.749,46.985, 46.123,65.405c 19.365,18.434, 42.265,32.935, 66.937,42.428 C 203.356,420.208, 229.755,424.681, 256,424c 26.25-0.653, 52.114-6.459, 75.781-17.017c 23.676-10.525, 45.128-25.751, 62.812-44.391 c 17.698-18.629, 31.605-40.647, 40.695-64.344C 444.412,274.552, 448.679,249.219, 448,224l 0.119,0 c-0.072-0.88-0.119-1.768-0.119-2.666 c0-16.506, 12.496-30.087, 28.543-31.812C 473.431,172.111, 468.278,155.113, 461.153,139.026z"/> -<glyph unicode="" d="M 256,480 C 116.626,480 3.271,368.619 0.076,230.013 C 3.036,350.945 94.992,448 208,448 C 322.875,448 416,347.712 416,224 C 416,197.49 437.49,176 464,176 C 490.51,176 512,197.49 512,224 C 512,365.385 397.385,480 256,480 ZM 256-32 C 395.374-32 508.729,79.381 511.924,217.987 C 508.964,97.055 417.008,0 304,0 C 189.125,0 96,100.288 96,224 C 96,250.51 74.51,272 48,272 C 21.49,272 0,250.51 0,224 C 0,82.615 114.615-32 256-32 Z"/> -<glyph unicode="" d="M 432,128c-22.58,0-42.96-9.369-57.506-24.415L 158.992,211.336C 159.649,215.462, 160,219.689, 160,224 s-0.351,8.538-1.008,12.663l 215.502,107.751C 389.040,329.369, 409.42,320, 432,320c 44.183,0, 80,35.817, 80,80S 476.183,480, 432,480 s-80-35.817-80-80c0-4.311, 0.352-8.538, 1.008-12.663L 137.506,279.585C 122.96,294.63, 102.58,304, 80,304c-44.183,0-80-35.818-80-80 c0-44.184, 35.817-80, 80-80c 22.58,0, 42.96,9.369, 57.506,24.414l 215.502-107.751C 352.352,56.538, 352,52.311, 352,48 c0-44.184, 35.817-80, 80-80s 80,35.816, 80,80C 512,92.182, 476.183,128, 432,128z"/> -<glyph unicode="" d="M 96,416L 416,224L 96,32 z"/> -<glyph unicode="" d="M 512,480 L 512,272 L 432,352 L 336,256 L 288,304 L 384,400 L 304,480 ZM 224,144 L 128,48 L 208-32 L 0-32 L 0,176 L 80,96 L 176,192 Z"/> -<glyph unicode=" " horiz-adv-x="256"/> -</font></defs></svg>
\ No newline at end of file diff --git a/librevideojs/fonts/default/vjs.ttf b/librevideojs/fonts/default/vjs.ttf Binary files differdeleted file mode 100644 index eb24637..0000000 --- a/librevideojs/fonts/default/vjs.ttf +++ /dev/null diff --git a/librevideojs/fonts/default/vjs.woff b/librevideojs/fonts/default/vjs.woff Binary files differdeleted file mode 100644 index c3f0f1d..0000000 --- a/librevideojs/fonts/default/vjs.woff +++ /dev/null diff --git a/librevideojs/fonts/libre-material/libre-icons.svg b/librevideojs/fonts/libre-material/libre-icons.svg index c89d404..daf61c0 100644 --- a/librevideojs/fonts/libre-material/libre-icons.svg +++ b/librevideojs/fonts/libre-material/libre-icons.svg @@ -35,4 +35,5 @@ By Jesús Eduardo, Jorge Maldonado Ventura, Gabriel Alexander. <glyph glyph-name="uniE610" unicode="" horiz-adv-x="896" d="M781 611q26 -43 40 -92.5t14 -102.5q0 -79 -30 -149t-82.5 -122t-122.5 -82.5t-149 -30.5t-149 30.5t-122 82.5t-82.5 122t-30.5 149t30.5 149t82.5 122t122 82.5t149 30.5v128l320 -173l-320 -179v128q-60 0 -112.5 -22.5t-91.5 -61.5t-61.5 -91.5t-22.5 -112.5 t22.5 -112.5t61.5 -91.5t91.5 -61.5t112.5 -22.5t112.5 22.5t91.5 61.5t61.5 91.5t22.5 112.5q0 41 -11 78.5t-30 68.5l83 48v0z"/> <glyph glyph-name="uniE615" unicode="" d="M675 448l247 -246q36 -36 36 -85.5t-36 -78.5q-36 -36 -85.5 -36t-78.5 36l-246 247l-246 -247q-36 -36 -85.5 -36t-78.5 36q-36 36 -36 85.5t36 78.5l247 246l-247 246q-36 36 -36 85.5t36 78.5q36 36 85.5 36t78.5 -36l246 -247l246 247q36 36 85.5 36t78.5 -36 q36 -36 36 -85.5t-36 -78.5l-247 -246v0z"/> </font> -</defs></svg> +</defs> +</svg> diff --git a/librevideojs/js/cliplibrejs-playlists.js b/librevideojs/js/cliplibrejs-playlists.js deleted file mode 100644 index bbee6c5..0000000 --- a/librevideojs/js/cliplibrejs-playlists.js +++ /dev/null @@ -1,160 +0,0 @@ -/*! - * - * @source: cliplibrejs-playlist.js - * - * @licstart The following is the entire license notice for the - * JavaScript code in this page. - * - * Copyleft 2016 Heckyel - Cybersy - * - * The JavaScript code in this page is free software: you can - * redistribute it and/or modify it under the terms of the GNU - * General Public License (GNU GPL) as published by the Free Software - * Foundation, either version 3 of the License, or (at your option) - * any later version. The code is distributed WITHOUT ANY WARRANTY; - * without even the implied warranty of MERCHANTABILITY or FITNESS - * FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. - * - * As additional permission under GNU GPL version 3 section 7, you - * may distribute non-source (e.g., minimized or compacted) forms of - * that code without the copy of the GNU GPL normally required by - * section 4, provided you include this license notice and a URL - * through which recipients can access the Corresponding Source. - * - * @licend The above is the entire license notice - * for the JavaScript code in this page. - * - */ -function playList(options,arg){ - var player = this; - player.pl = player.pl || {}; - var index = parseInt(options,10); - - player.pl._guessVideoType = function(video){ - var videoTypes = { - 'webm' : 'video/webm', - 'ogv' : 'video/ogg', - 'mp4' : 'video/mp4', - }; - var extension = video.split('.').pop(); - - return videoTypes[extension] || ''; - }; - - player.pl.init = function(videos, options) { - options = options || {}; - player.pl.videos = []; - player.pl.current = 0; - player.on('ended', player.pl._videoEnd); - - if (options.getVideoSource) { - player.pl.getVideoSource = options.getVideoSource; - } - - player.pl._addVideos(videos); - }; - - player.pl._updatePoster = function(posterURL) { - player.poster(posterURL); - player.removeChild(player.posterImage); - player.posterImage = player.addChild("posterImage"); - }; - - player.pl._addVideos = function(videos){ - for (var i = 0, length = videos.length; i < length; i++){ - var aux = []; - for (var j = 0, len = videos[i].src.length; j < len; j++){ - aux.push({ - type : player.pl._guessVideoType(videos[i].src[j]), - src : videos[i].src[j] - }); - } - videos[i].src = aux; - player.pl.videos.push(videos[i]); - } - }; - - player.pl._nextPrev = function(func){ - var comparison, addendum; - - if (func === 'next'){ - comparison = player.pl.videos.length -1; - addendum = 1; - } - else { - comparison = 0; - addendum = -1; - } - - if (player.pl.current !== comparison){ - var newIndex = player.pl.current + addendum; - player.pl._setVideo(newIndex); - player.trigger(func, [player.pl.videos[newIndex]]); - } - }; - - player.pl._setVideo = function(index){ - if (index < player.pl.videos.length){ - player.pl.current = index; - player.pl.currentVideo = player.pl.videos[index]; - - if (!player.paused()){ - player.pl._resumeVideo(); - } - - if (player.pl.getVideoSource) { - player.pl.getVideoSource(player.pl.videos[index], function(src, poster) { - player.pl._setVideoSource(src, poster); - }); - } else { - player.pl._setVideoSource(player.pl.videos[index].src, player.pl.videos[index].poster); - } - } - }; - - player.pl._setVideoSource = function(src, poster) { - player.src(src); - player.pl._updatePoster(poster); - }; - - player.pl._resumeVideo = function(){ - player.one('loadstart',function(){ - player.play(); - }); - }; - - player.pl._videoEnd = function(){ - if (player.pl.current === player.pl.videos.length -1){ - player.trigger('lastVideoEnded'); - } - else { - player.pl._resumeVideo(); - player.next(); - } - }; - - if (options instanceof Array){ - player.pl.init(options, arg); - player.pl._setVideo(0); - return player; - } - else if (index === index){ // NaN - player.pl._setVideo(index); - return player; - } - else if (typeof options === 'string' && typeof player.pl[options] !== 'undefined'){ - player.pl[options].apply(player); - return player; - } -} - -cliplibrejs.Player.prototype.next = function(){ - this.pl._nextPrev('next'); - return this; -}; -cliplibrejs.Player.prototype.prev = function(){ - this.pl._nextPrev('prev'); - return this; -}; - -cliplibrejs.plugin('playList', playList); diff --git a/librevideojs/js/cliplibrejs-playlists.min.js b/librevideojs/js/cliplibrejs-playlists.min.js deleted file mode 100644 index 37f8e75..0000000 --- a/librevideojs/js/cliplibrejs-playlists.min.js +++ /dev/null @@ -1,28 +0,0 @@ -/*! - * - * @source: cliplibrejs-playlist.js - * - * @licstart The following is the entire license notice for the - * JavaScript code in this page. - * - * Copyleft 2016 Heckyel - Cybersy - * - * The JavaScript code in this page is free software: you can - * redistribute it and/or modify it under the terms of the GNU - * General Public License (GNU GPL) as published by the Free Software - * Foundation, either version 3 of the License, or (at your option) - * any later version. The code is distributed WITHOUT ANY WARRANTY; - * without even the implied warranty of MERCHANTABILITY or FITNESS - * FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. - * - * As additional permission under GNU GPL version 3 section 7, you - * may distribute non-source (e.g., minimized or compacted) forms of - * that code without the copy of the GNU GPL normally required by - * section 4, provided you include this license notice and a URL - * through which recipients can access the Corresponding Source. - * - * @licend The above is the entire license notice - * for the JavaScript code in this page. - * - */ -function playList(c,a){var d=this;d.pl=d.pl||{};var b=parseInt(c,10);d.pl._guessVideoType=function(e){var f={webm:"video/webm",ogv:"video/ogg",mp4:"video/mp4",};var g=e.split(".").pop();return f[g]||""};d.pl.init=function(f,e){e=e||{};d.pl.videos=[];d.pl.current=0;d.on("ended",d.pl._videoEnd);if(e.getVideoSource){d.pl.getVideoSource=e.getVideoSource}d.pl._addVideos(f)};d.pl._updatePoster=function(e){d.poster(e);d.removeChild(d.posterImage);d.posterImage=d.addChild("posterImage")};d.pl._addVideos=function(k){for(var h=0,l=k.length;h<l;h++){var f=[];for(var g=0,e=k[h].src.length;g<e;g++){f.push({type:d.pl._guessVideoType(k[h].src[g]),src:k[h].src[g]})}k[h].src=f;d.pl.videos.push(k[h])}};d.pl._nextPrev=function(g){var h,f;if(g==="next"){h=d.pl.videos.length-1;f=1}else{h=0;f=-1}if(d.pl.current!==h){var e=d.pl.current+f;d.pl._setVideo(e);d.trigger(g,[d.pl.videos[e]])}};d.pl._setVideo=function(e){if(e<d.pl.videos.length){d.pl.current=e;d.pl.currentVideo=d.pl.videos[e];if(!d.paused()){d.pl._resumeVideo()}if(d.pl.getVideoSource){d.pl.getVideoSource(d.pl.videos[e],function(f,g){d.pl._setVideoSource(f,g)})}else{d.pl._setVideoSource(d.pl.videos[e].src,d.pl.videos[e].poster)}}};d.pl._setVideoSource=function(e,f){d.src(e);d.pl._updatePoster(f)};d.pl._resumeVideo=function(){d.one("loadstart",function(){d.play()})};d.pl._videoEnd=function(){if(d.pl.current===d.pl.videos.length-1){d.trigger("lastVideoEnded")}else{d.pl._resumeVideo();d.next()}};if(c instanceof Array){d.pl.init(c,a);d.pl._setVideo(0);return d}else{if(b===b){d.pl._setVideo(b);return d}else{if(typeof c==="string"&&typeof d.pl[c]!=="undefined"){d.pl[c].apply(d);return d}}}}cliplibrejs.Player.prototype.next=function(){this.pl._nextPrev("next");return this};cliplibrejs.Player.prototype.prev=function(){this.pl._nextPrev("prev");return this};cliplibrejs.plugin("playList",playList);
\ No newline at end of file diff --git a/librevideojs/js/cliplibrejs.dev.js b/librevideojs/js/cliplibrejs.dev.js index 152b858..d779226 100644 --- a/librevideojs/js/cliplibrejs.dev.js +++ b/librevideojs/js/cliplibrejs.dev.js @@ -1,11 +1,12 @@ /*! - * @source: here! * @base: https://github.com/videojs/video.js * + * @Source: cliplibrejs.dev.js + * * @licstart The following is the entire license notice for the * JavaScript code in this page. * - * Copyleft 2016 Jesús E. Medina, Jorge Maldonado Ventura + * Copyleft 2016 Jesús Eduardo * * The JavaScript code in this page is free software: you can * redistribute it and/or modify it under the terms of the GNU @@ -5122,213 +5123,7 @@ var createGetter = function(attr){ } })(); -/* Flash Support Testing -------------------------------------------------------- */ - -librevjs.Flash.isSupported = function(){ - return librevjs.Flash.version()[0] >= 10; - // return swfobject.hasFlashPlayerVersion('10'); -}; - -librevjs.Flash.canPlaySource = function(srcObj){ - if (srcObj.type in librevjs.Flash.formats || srcObj.type in librevjs.Flash.streamingFormats) { return 'maybe'; } -}; - -librevjs.Flash.formats = { - 'video/flv': 'FLV', - 'video/x-flv': 'FLV', - 'video/mp4': 'MP4', - 'video/m4v': 'MP4' -}; - -librevjs.Flash.streamingFormats = { - 'rtmp/mp4': 'MP4', - 'rtmp/flv': 'FLV' -}; - -librevjs.Flash['onReady'] = function(currSwf){ - var el = librevjs.el(currSwf); - - // Get player from box - // On firefox reloads, el might already have a player - var player = el['player'] || el.parentNode['player'], - tech = player.tech; - - // Reference player on tech element - el['player'] = player; - - // Update reference to playback technology element - tech.el_ = el; - - librevjs.Flash.checkReady(tech); -}; - -// The SWF isn't alwasy ready when it says it is. Sometimes the API functions still need to be added to the object. -// If it's not ready, we set a timeout to check again shortly. -librevjs.Flash.checkReady = function(tech){ - - // Check if API property exists - if (tech.el().librevjs_getProperty) { - - // If so, tell tech it's ready - tech.triggerReady(); - - // Otherwise wait longer. - } else { - - setTimeout(function(){ - librevjs.Flash.checkReady(tech); - }, 50); - - } -}; - -// Trigger events from the swf on the player -librevjs.Flash['onEvent'] = function(swfID, eventName){ - var player = librevjs.el(swfID)['player']; - player.trigger(eventName); -}; - -// Log errors from the swf -librevjs.Flash['onError'] = function(swfID, err){ - var player = librevjs.el(swfID)['player']; - player.trigger('error'); - librevjs.log('Flash Error', err, swfID); -}; - -// Flash Version Check -librevjs.Flash.version = function(){ - var version = '0,0,0'; - - // IE - try { - version = new window.ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version').replace(/\D+/g, ',').match(/^,?(.+),?$/)[1]; - - // other browsers - } catch(e) { - try { - if (navigator.mimeTypes['application/x-shockwave-flash'].enabledPlugin){ - version = (navigator.plugins['Shockwave Flash 2.0'] || navigator.plugins['Shockwave Flash']).description.replace(/\D+/g, ',').match(/^,?(.+),?$/)[1]; - } - } catch(err) {} - } - return version.split(','); -}; - -// Flash embedding method. Only used in non-iframe mode -librevjs.Flash.embed = function(swf, placeHolder, flashVars, params, attributes){ - var code = librevjs.Flash.getEmbedCode(swf, flashVars, params, attributes), - - // Get element by embedding code and retrieving created element - obj = librevjs.createEl('div', { innerHTML: code }).childNodes[0], - - par = placeHolder.parentNode - ; - - placeHolder.parentNode.replaceChild(obj, placeHolder); - - // IE6 seems to have an issue where it won't initialize the swf object after injecting it. - // This is a dumb fix - var newObj = par.childNodes[0]; - setTimeout(function(){ - newObj.style.display = 'block'; - }, 1000); - - return obj; - -}; - -librevjs.Flash.getEmbedCode = function(swf, flashVars, params, attributes){ - - var objTag = '<object type="application/x-shockwave-flash"', - flashVarsString = '', - paramsString = '', - attrsString = ''; - - // Convert flash vars to string - if (flashVars) { - librevjs.obj.each(flashVars, function(key, val){ - flashVarsString += (key + '=' + val + '&'); - }); - } - - // Add swf, flashVars, and other default params - params = librevjs.obj.merge({ - 'movie': swf, - 'flashvars': flashVarsString, - 'allowScriptAccess': 'always', // Required to talk to swf - 'allowNetworking': 'all' // All should be default, but having security issues. - }, params); - - // Create param tags string - librevjs.obj.each(params, function(key, val){ - paramsString += '<param name="'+key+'" value="'+val+'" />'; - }); - - attributes = librevjs.obj.merge({ - // Add swf to attributes (need both for IE and Others to work) - 'data': swf, - - // Default to 100% width/height - 'width': '100%', - 'height': '100%' - - }, attributes); - - // Create Attributes string - librevjs.obj.each(attributes, function(key, val){ - attrsString += (key + '="' + val + '" '); - }); - - return objTag + attrsString + '>' + paramsString + '</object>'; -}; - -librevjs.Flash.streamFromParts = function(connection, stream) { - return connection + '&' + stream; -}; - -librevjs.Flash.streamToParts = function(src) { - var parts = { - connection: '', - stream: '' - }; - - if (! src) { - return parts; - } - - // Look for the normal URL separator we expect, '&'. - // If found, we split the URL into two pieces around the - // first '&'. - var connEnd = src.indexOf('&'); - var streamBegin; - if (connEnd !== -1) { - streamBegin = connEnd + 1; - } - else { - // If there's not a '&', we use the last '/' as the delimiter. - connEnd = streamBegin = src.lastIndexOf('/') + 1; - if (connEnd === 0) { - // really, there's not a '/'? - connEnd = streamBegin = src.length; - } - } - parts.connection = src.substring(0, connEnd); - parts.stream = src.substring(streamBegin, src.length); - - return parts; -}; - -librevjs.Flash.isStreamingType = function(srcType) { - return srcType in librevjs.Flash.streamingFormats; -}; - -// RTMP has four variations, any string starting -// with one of these protocols should be valid -librevjs.Flash.RTMP_RE = /^rtmp[set]?:\/\//i; - -librevjs.Flash.isStreamingSrc = function(src) { - return librevjs.Flash.RTMP_RE.test(src); -}; +/* MediaLoader REQUIRED*/ /** * @constructor */ diff --git a/librevideojs/js/cliplibrejs.dev.min.js b/librevideojs/js/cliplibrejs.dev.min.js deleted file mode 100644 index 37416f3..0000000 --- a/librevideojs/js/cliplibrejs.dev.min.js +++ /dev/null @@ -1,28 +0,0 @@ -/*! - * @source: here! - * @base: https://github.com/videojs/video.js - * - * @licstart The following is the entire license notice for the - * JavaScript code in this page. - * - * Copyleft 2016 Jesús E. Medina, Jorge Maldonado Ventura - * - * The JavaScript code in this page is free software: you can - * redistribute it and/or modify it under the terms of the GNU - * General Public License (GNU GPL) as published by the Free Software - * Foundation, either version 3 of the License, or (at your option) - * any later version. The code is distributed WITHOUT ANY WARRANTY; - * without even the implied warranty of MERCHANTABILITY or FITNESS - * FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. - * - * As additional permission under GNU GPL version 3 section 7, you - * may distribute non-source (e.g., minimized or compacted) forms of - * that code without the copy of the GNU GPL normally required by - * section 4, provided you include this license notice and a URL - * through which recipients can access the Corresponding Source. - * - * @licend The above is the entire license notice - * for the JavaScript code in this page. - * - */ -document.createElement("video");document.createElement("audio");document.createElement("track");var librevjs=function(d,b,c){var a;if(typeof d==="string"){if(d.indexOf("#")===0){d=d.slice(1)}if(librevjs.players[d]){if(b){librevjs.log.warn('Player "'+d+'" is already initialised. Options will not be applied.')}if(c){librevjs.players[d].ready(c)}return librevjs.players[d]}else{a=librevjs.el(d)}}else{a=d}if(!a||!a.nodeName){throw new TypeError("The element or ID supplied is not valid. (cliplibrejs)")}return a.player||new librevjs.Player(a,b,c)};var cliplibrejs=window.cliplibrejs=librevjs;librevjs.CDN_VERSION="1.2.0";librevjs.ACCESS_PROTOCOL=("https:"==document.location.protocol?"https://":"http://");librevjs.options={techOrder:["html5","flash"],html5:{},flash:{},width:300,height:150,defaultVolume:0,children:{mediaLoader:{},posterImage:{},textTrackDisplay:{},loadingSpinner:{},bigPlayButton:{},controlBar:{}},notSupportedMessage:"No compatible source was found for this video."};librevjs.players={};librevjs.CoreObject=librevjs.CoreObject=function(){};librevjs.CoreObject.extend=function(c){var d,a;c=c||{};d=c.init||c.init||this.prototype.init||this.prototype.init||function(){};a=function(){d.apply(this,arguments)};a.prototype=librevjs.obj.create(this.prototype);a.prototype.constructor=a;a.extend=librevjs.CoreObject.extend;a.create=librevjs.CoreObject.create;for(var b in c){if(c.hasOwnProperty(b)){a.prototype[b]=c[b]}}return a};librevjs.CoreObject.create=function(){var a=librevjs.obj.create(this.prototype);this.apply(a,arguments);return a};librevjs.on=function(c,b,a){var d=librevjs.getData(c);if(!d.handlers){d.handlers={}}if(!d.handlers[b]){d.handlers[b]=[]}if(!a.guid){a.guid=librevjs.guid++}d.handlers[b].push(a);if(!d.dispatcher){d.disabled=false;d.dispatcher=function(g){if(d.disabled){return}g=librevjs.fixEvent(g);var f=d.handlers[g.type];if(f){var h=f.slice(0);for(var e=0,j=h.length;e<j;e++){if(g.isImmediatePropagationStopped()){break}else{h[e].call(c,g)}}}}}if(d.handlers[b].length==1){if(document.addEventListener){c.addEventListener(b,d.dispatcher,false)}else{if(document.attachEvent){c.attachEvent("on"+b,d.dispatcher)}}}};librevjs.off=function(e,d,c){if(!librevjs.hasData(e)){return}var f=librevjs.getData(e);if(!f.handlers){return}var g=function(j){f.handlers[j]=[];librevjs.cleanUpEvents(e,j)};if(!d){for(var b in f.handlers){g(b)}return}var a=f.handlers[d];if(!a){return}if(!c){g(d);return}if(c.guid){for(var h=0;h<a.length;h++){if(a[h].guid===c.guid){a.splice(h--,1)}}}librevjs.cleanUpEvents(e,d)};librevjs.cleanUpEvents=function(b,a){var c=librevjs.getData(b);if(c.handlers[a].length===0){delete c.handlers[a];if(b.removeEventListener){b.removeEventListener(a,c.dispatcher,false)}else{if(b.detachEvent){b.detachEvent("on"+a,c.dispatcher)}}}if(librevjs.isEmpty(c.handlers)){delete c.handlers;delete c.dispatcher;delete c.disabled}if(librevjs.isEmpty(c)){librevjs.removeData(b)}};librevjs.fixEvent=function(e){function g(){return true}function d(){return false}if(!e||!e.isPropagationStopped){var b=e||window.event;e={};for(var c in b){if(c!=="layerX"&&c!=="layerY"){e[c]=b[c]}}if(!e.target){e.target=e.srcElement||document}e.relatedTarget=e.fromElement===e.target?e.toElement:e.fromElement;e.preventDefault=function(){if(b.preventDefault){b.preventDefault()}e.returnValue=false;e.isDefaultPrevented=g};e.isDefaultPrevented=d;e.stopPropagation=function(){if(b.stopPropagation){b.stopPropagation()}e.cancelBubble=true;e.isPropagationStopped=g};e.isPropagationStopped=d;e.stopImmediatePropagation=function(){if(b.stopImmediatePropagation){b.stopImmediatePropagation()}e.isImmediatePropagationStopped=g;e.stopPropagation()};e.isImmediatePropagationStopped=d;if(e.clientX!=null){var f=document.documentElement,a=document.body;e.pageX=e.clientX+(f&&f.scrollLeft||a&&a.scrollLeft||0)-(f&&f.clientLeft||a&&a.clientLeft||0);e.pageY=e.clientY+(f&&f.scrollTop||a&&a.scrollTop||0)-(f&&f.clientTop||a&&a.clientTop||0)}e.which=e.charCode||e.keyCode;if(e.button!=null){e.button=(e.button&1?0:(e.button&4?1:(e.button&2?2:0)))}}return e};librevjs.trigger=function(d,c){var a=(librevjs.hasData(d))?librevjs.getData(d):{};var b=d.parentNode||d.ownerDocument;if(typeof c==="string"){c={type:c,target:d}}c=librevjs.fixEvent(c);if(a.dispatcher){a.dispatcher.call(d,c)}if(b&&!c.isPropagationStopped()&&c.bubbles!==false){librevjs.trigger(b,c)}else{if(!b&&!c.isDefaultPrevented()){var e=librevjs.getData(c.target);if(c.target[c.type]){e.disabled=true;if(typeof c.target[c.type]==="function"){c.target[c.type]()}e.disabled=false}}}return !c.isDefaultPrevented()};librevjs.one=function(d,b,a){var c=function(){librevjs.off(d,b,c);a.apply(this,arguments)};c.guid=a.guid=a.guid||librevjs.guid++;librevjs.on(d,b,c)};var hasOwnProp=Object.prototype.hasOwnProperty;librevjs.createEl=function(b,a){var c,d;c=document.createElement(b||"div");for(d in a){if(hasOwnProp.call(a,d)){if(d.indexOf("aria-")!==-1||d=="role"){c.setAttribute(d,a[d])}else{c[d]=a[d]}}}return c};librevjs.capitalize=function(a){return a.charAt(0).toUpperCase()+a.slice(1)};librevjs.obj={};librevjs.obj.create=Object.create||function(b){function a(){}a.prototype=b;return new a()};librevjs.obj.each=function(d,c,b){for(var a in d){if(hasOwnProp.call(d,a)){c.call(b||this,a,d[a])}}};librevjs.obj.merge=function(c,b){if(!b){return c}for(var a in b){if(hasOwnProp.call(b,a)){c[a]=b[a]}}return c};librevjs.obj.deepMerge=function(e,d){var a,c,b;e=librevjs.obj.copy(e);for(a in d){if(hasOwnProp.call(d,a)){c=e[a];b=d[a];if(librevjs.obj.isPlain(c)&&librevjs.obj.isPlain(b)){e[a]=librevjs.obj.deepMerge(c,b)}else{e[a]=d[a]}}}return e};librevjs.obj.copy=function(a){return librevjs.obj.merge({},a)};librevjs.obj.isPlain=function(a){return !!a&&typeof a==="object"&&a.toString()==="[object Object]"&&a.constructor===Object};librevjs.bind=function(c,d,b){if(!d.guid){d.guid=librevjs.guid++}var a=function(){return d.apply(c,arguments)};a.guid=(b)?b+"_"+d.guid:d.guid;return a};librevjs.cache={};librevjs.guid=1;librevjs.expando="vdata"+(new Date()).getTime();librevjs.getData=function(a){var b=a[librevjs.expando];if(!b){b=a[librevjs.expando]=librevjs.guid++;librevjs.cache[b]={}}return librevjs.cache[b]};librevjs.hasData=function(a){var b=a[librevjs.expando];return !(!b||librevjs.isEmpty(librevjs.cache[b]))};librevjs.removeData=function(a){var c=a[librevjs.expando];if(!c){return}delete librevjs.cache[c];try{delete a[librevjs.expando]}catch(b){if(a.removeAttribute){a.removeAttribute(librevjs.expando)}else{a[librevjs.expando]=null}}};librevjs.isEmpty=function(a){for(var b in a){if(a[b]!==null){return false}}return true};librevjs.addClass=function(a,b){if((" "+a.className+" ").indexOf(" "+b+" ")==-1){a.className=a.className===""?b:a.className+" "+b}};librevjs.removeClass=function(c,a){var d,b;if(c.className.indexOf(a)==-1){return}d=c.className.split(" ");for(b=d.length-1;b>=0;b--){if(d[b]===a){d.splice(b,1)}}c.className=d.join(" ")};librevjs.TEST_VID=librevjs.createEl("video");librevjs.USER_AGENT=navigator.userAgent;librevjs.IS_IPHONE=(/iPhone/i).test(librevjs.USER_AGENT);librevjs.IS_IPAD=(/iPad/i).test(librevjs.USER_AGENT);librevjs.IS_IPOD=(/iPod/i).test(librevjs.USER_AGENT);librevjs.IS_IOS=librevjs.IS_IPHONE||librevjs.IS_IPAD||librevjs.IS_IPOD;librevjs.IOS_VERSION=(function(){var a=librevjs.USER_AGENT.match(/OS (\d+)_/i);if(a&&a[1]){return a[1]}})();librevjs.IS_ANDROID=(/Android/i).test(librevjs.USER_AGENT);librevjs.ANDROID_VERSION=(function(){var b=librevjs.USER_AGENT.match(/Android (\d+)(?:\.(\d+))?(?:\.(\d+))*/i),a,c;if(!b){return null}a=b[1]&&parseFloat(b[1]);c=b[2]&&parseFloat(b[2]);if(a&&c){return parseFloat(b[1]+"."+b[2])}else{if(a){return a}else{return null}}})();librevjs.IS_OLD_ANDROID=librevjs.IS_ANDROID&&(/webkit/i).test(librevjs.USER_AGENT)&&librevjs.ANDROID_VERSION<2.3;librevjs.IS_FIREFOX=(/Firefox/i).test(librevjs.USER_AGENT);librevjs.IS_CHROME=(/Chrome/i).test(librevjs.USER_AGENT);librevjs.TOUCH_ENABLED=("ontouchstart" in window);librevjs.getAttributeValues=function(a){var g,b,d,f,c;g={};b=",autoplay,controls,loop,muted,default,";if(a&&a.attributes&&a.attributes.length>0){d=a.attributes;for(var e=d.length-1;e>=0;e--){f=d[e].name;c=d[e].value;if(typeof a[f]==="boolean"||b.indexOf(","+f+",")!==-1){c=(c!==null)?true:false}g[f]=c}}return g};librevjs.getComputedDimension=function(a,b){var c="";if(document.defaultView&&document.defaultView.getComputedStyle){c=document.defaultView.getComputedStyle(a,"").getPropertyValue(b)}else{if(a.currentStyle){c=a["client"+b.substr(0,1).toUpperCase()+b.substr(1)]+"px"}}return c};librevjs.insertFirst=function(b,a){if(a.firstChild){a.insertBefore(b,a.firstChild)}else{a.appendChild(b)}};librevjs.support={};librevjs.el=function(a){if(a.indexOf("#")===0){a=a.slice(1)}return document.getElementById(a)};librevjs.formatTime=function(g,b){b=b||g;var e=Math.floor(g%60),a=Math.floor(g/60%60),d=Math.floor(g/3600),f=Math.floor(b/60%60),c=Math.floor(b/3600);if(isNaN(g)||g===Infinity){d=a=e="-"}d=(d>0||c>0)?d+":":"";a=(((d||f>=10)&&a<10)?"0"+a:a)+":";e=(e<10)?"0"+e:e;return d+a+e};librevjs.blockTextSelection=function(){document.body.focus();document.onselectstart=function(){return false}};librevjs.unblockTextSelection=function(){document.onselectstart=function(){return true}};librevjs.trim=function(a){return(a+"").replace(/^\s+|\s+$/g,"")};librevjs.round=function(a,b){if(!b){b=0}return Math.round(a*Math.pow(10,b))/Math.pow(10,b)};librevjs.createTimeRange=function(b,a){return{length:1,start:function(){return b},end:function(){return a}}};librevjs.get=function(a,g,d){var b,c;if(typeof XMLHttpRequest==="undefined"){window.XMLHttpRequest=function(){try{return new window.ActiveXObject("Msxml2.XMLHTTP.6.0")}catch(k){}try{return new window.ActiveXObject("Msxml2.XMLHTTP.3.0")}catch(j){}try{return new window.ActiveXObject("Msxml2.XMLHTTP")}catch(h){}throw new Error("This browser does not support XMLHttpRequest.")}}c=new XMLHttpRequest();try{c.open("GET",a)}catch(f){d(f)}b=(a.indexOf("file:")===0||(window.location.href.indexOf("file:")===0&&a.indexOf("http")===-1));c.onreadystatechange=function(){if(c.readyState===4){if(c.status===200||b&&c.status===0){g(c.responseText)}else{if(d){d()}}}};try{c.send()}catch(f){if(d){d(f)}}};librevjs.setLocalStorage=function(b,c){try{var a=window.localStorage||false;if(!a){return}a[b]=c}catch(d){if(d.code==22||d.code==1014){librevjs.log("LocalStorage Full (LibreVideoJS)",d)}else{if(d.code==18){librevjs.log("LocalStorage not allowed (LibreVideoJS)",d)}else{librevjs.log("LocalStorage Error (LibreVideoJS)",d)}}}};librevjs.getAbsoluteURL=function(a){if(!a.match(/^https?:\/\//)){a=librevjs.createEl("div",{innerHTML:'<a href="'+a+'">x</a>'}).firstChild.href}return a};librevjs.log=function(){librevjs.log.history=librevjs.log.history||[];librevjs.log.history.push(arguments);if(window.console){window.console.log(Array.prototype.slice.call(arguments))}};librevjs.findPosition=function(c){var g,b,h,j,e,d,f,a,k;if(c.getBoundingClientRect&&c.parentNode){g=c.getBoundingClientRect()}if(!g){return{left:0,top:0}}b=document.documentElement;h=document.body;j=b.clientLeft||h.clientLeft||0;e=window.pageXOffset||h.scrollLeft;d=g.left+e-j;f=b.clientTop||h.clientTop||0;a=window.pageYOffset||h.scrollTop;k=g.top+a-f;return{left:d,top:k}};librevjs.Component=librevjs.CoreObject.extend({init:function(b,a,c){this.player_=b;this.options_=librevjs.obj.copy(this.options_);a=this.options(a);this.id_=a.id||((a.el&&a.el["id"])?a.el["id"]:b.id()+"_component_"+librevjs.guid++);this.name_=a.name||null;this.el_=a.el||this.createEl();this.children_=[];this.childIndex_={};this.childNameIndex_={};this.initChildren();this.ready(c)}});librevjs.Component.prototype.dispose=function(){this.trigger("dispose");if(this.children_){for(var a=this.children_.length-1;a>=0;a--){if(this.children_[a].dispose){this.children_[a].dispose()}}}this.children_=null;this.childIndex_=null;this.childNameIndex_=null;this.off();if(this.el_.parentNode){this.el_.parentNode.removeChild(this.el_)}librevjs.removeData(this.el_);this.el_=null};librevjs.Component.prototype.player_;librevjs.Component.prototype.player=function(){return this.player_};librevjs.Component.prototype.options_;librevjs.Component.prototype.options=function(a){if(a===undefined){return this.options_}return this.options_=librevjs.obj.deepMerge(this.options_,a)};librevjs.Component.prototype.el_;librevjs.Component.prototype.createEl=function(b,a){return librevjs.createEl(b,a)};librevjs.Component.prototype.el=function(){return this.el_};librevjs.Component.prototype.contentEl_;librevjs.Component.prototype.contentEl=function(){return this.contentEl_||this.el_};librevjs.Component.prototype.id_;librevjs.Component.prototype.id=function(){return this.id_};librevjs.Component.prototype.name_;librevjs.Component.prototype.name=function(){return this.name_};librevjs.Component.prototype.children_;librevjs.Component.prototype.children=function(){return this.children_};librevjs.Component.prototype.childIndex_;librevjs.Component.prototype.getChildById=function(a){return this.childIndex_[a]};librevjs.Component.prototype.childNameIndex_;librevjs.Component.prototype.getChild=function(a){return this.childNameIndex_[a]};librevjs.Component.prototype.addChild=function(f,d){var c,e,a,b;if(typeof f==="string"){a=f;d=d||{};e=d.componentClass||librevjs.capitalize(a);d.name=a;c=new window.cliplibrejs[e](this.player_||this,d)}else{c=f}this.children_.push(c);if(typeof c.id==="function"){this.childIndex_[c.id()]=c}a=a||(c.name&&c.name());if(a){this.childNameIndex_[a]=c}if(typeof c.el==="function"&&c.el()){this.contentEl().appendChild(c.el())}return c};librevjs.Component.prototype.removeChild=function(b){if(typeof b==="string"){b=this.getChild(b)}if(!b||!this.children_){return}var a=false;for(var c=this.children_.length-1;c>=0;c--){if(this.children_[c]===b){a=true;this.children_.splice(c,1);break}}if(!a){return}this.childIndex_[b.id]=null;this.childNameIndex_[b.name]=null;var d=b.el();if(d&&d.parentNode===this.contentEl()){this.contentEl().removeChild(b.el())}};librevjs.Component.prototype.initChildren=function(){var b=this.options_;if(b&&b.children){var a=this;librevjs.obj.each(b.children,function(d,e){if(e===false){return}var c=function(){a[d]=a.addChild(d,e)};if(e.loadEvent){}else{c()}})}};librevjs.Component.prototype.buildCSSClass=function(){return""};librevjs.Component.prototype.on=function(b,a){librevjs.on(this.el_,b,librevjs.bind(this,a));return this};librevjs.Component.prototype.off=function(b,a){librevjs.off(this.el_,b,a);return this};librevjs.Component.prototype.one=function(b,a){librevjs.one(this.el_,b,librevjs.bind(this,a));return this};librevjs.Component.prototype.trigger=function(a,b){librevjs.trigger(this.el_,a,b);return this};librevjs.Component.prototype.isReady_;librevjs.Component.prototype.isReadyOnInitFinish_=true;librevjs.Component.prototype.readyQueue_;librevjs.Component.prototype.ready=function(a){if(a){if(this.isReady_){a.call(this)}else{if(this.readyQueue_===undefined){this.readyQueue_=[]}this.readyQueue_.push(a)}}return this};librevjs.Component.prototype.triggerReady=function(){this.isReady_=true;var c=this.readyQueue_;if(c&&c.length>0){for(var b=0,a=c.length;b<a;b++){c[b].call(this)}this.readyQueue_=[];this.trigger("ready")}};librevjs.Component.prototype.addClass=function(a){librevjs.addClass(this.el_,a);return this};librevjs.Component.prototype.removeClass=function(a){librevjs.removeClass(this.el_,a);return this};librevjs.Component.prototype.show=function(){this.el_.style.display="block";return this};librevjs.Component.prototype.hide=function(){this.el_.style.display="none";return this};librevjs.Component.prototype.lockShowing=function(){this.addClass("librevjs-lock-showing");return this};librevjs.Component.prototype.unlockShowing=function(){this.removeClass("librevjs-lock-showing");return this};librevjs.Component.prototype.disable=function(){this.hide();this.show=function(){}};librevjs.Component.prototype.width=function(a,b){return this.dimension("width",a,b)};librevjs.Component.prototype.height=function(a,b){return this.dimension("height",a,b)};librevjs.Component.prototype.dimensions=function(b,a){return this.width(b,true).height(a)};librevjs.Component.prototype.dimension=function(e,a,d){if(a!==undefined){if((""+a).indexOf("%")!==-1||(""+a).indexOf("px")!==-1){this.el_.style[e]=a}else{if(a==="auto"){this.el_.style[e]=""}else{this.el_.style[e]=a+"px"}}if(!d){this.trigger("resize")}return this}if(!this.el_){return 0}var c=this.el_.style[e];var b=c.indexOf("px");if(b!==-1){return parseInt(c.slice(0,b),10)}else{return parseInt(this.el_["offset"+librevjs.capitalize(e)],10)}};librevjs.Component.prototype.emitTapEvents=function(){var a,b,d,c;a=0;this.on("touchstart",function(e){a=new Date().getTime();d=true});c=function(){d=false};this.on("touchmove",c);this.on("touchleave",c);this.on("touchcancel",c);this.on("touchend",function(){if(d===true){b=new Date().getTime()-a;if(b<250){this.trigger("tap")}}})};librevjs.Button=librevjs.Component.extend({init:function(c,b){librevjs.Component.call(this,c,b);var d=false;this.on("touchstart",function(e){e.preventDefault();d=true});this.on("touchmove",function(){d=false});var a=this;this.on("touchend",function(e){if(d){a.onClick(e)}e.preventDefault()});this.on("click",this.onClick);this.on("focus",this.onFocus);this.on("blur",this.onBlur)}});librevjs.Button.prototype.createEl=function(b,a){a=librevjs.obj.merge({className:this.buildCSSClass(),innerHTML:'<div class="librevjs-control-content"><span class="librevjs-control-text">'+(this.buttonText||"Need Text")+"</span></div>",role:"button","aria-live":"polite",tabIndex:0},a);return librevjs.Component.prototype.createEl.call(this,b,a)};librevjs.Button.prototype.buildCSSClass=function(){return"librevjs-control "+librevjs.Component.prototype.buildCSSClass.call(this)};librevjs.Button.prototype.onClick=function(){};librevjs.Button.prototype.onFocus=function(){librevjs.on(document,"keyup",librevjs.bind(this,this.onKeyPress))};librevjs.Button.prototype.onKeyPress=function(a){if(a.which==32||a.which==13){a.preventDefault();this.onClick()}};librevjs.Button.prototype.onBlur=function(){librevjs.off(document,"keyup",librevjs.bind(this,this.onKeyPress))};librevjs.Slider=librevjs.Component.extend({init:function(b,a){librevjs.Component.call(this,b,a);this.bar=this.getChild(this.options_.barName);this.handle=this.getChild(this.options_.handleName);b.on(this.playerEvent,librevjs.bind(this,this.update));this.on("mousedown",this.onMouseDown);this.on("touchstart",this.onMouseDown);this.on("focus",this.onFocus);this.on("blur",this.onBlur);this.on("click",this.onClick);this.player_.on("controlsvisible",librevjs.bind(this,this.update));b.ready(librevjs.bind(this,this.update));this.boundEvents={}}});librevjs.Slider.prototype.createEl=function(b,a){a=a||{};a.className=a.className+" librevjs-slider";a=librevjs.obj.merge({role:"slider","aria-valuenow":0,"aria-valuemin":0,"aria-valuemax":100,tabIndex:0},a);return librevjs.Component.prototype.createEl.call(this,b,a)};librevjs.Slider.prototype.onMouseDown=function(a){a.preventDefault();librevjs.blockTextSelection();this.boundEvents.move=librevjs.bind(this,this.onMouseMove);this.boundEvents.end=librevjs.bind(this,this.onMouseUp);librevjs.on(document,"mousemove",this.boundEvents.move);librevjs.on(document,"mouseup",this.boundEvents.end);librevjs.on(document,"touchmove",this.boundEvents.move);librevjs.on(document,"touchend",this.boundEvents.end);this.onMouseMove(a)};librevjs.Slider.prototype.onMouseUp=function(){librevjs.unblockTextSelection();librevjs.off(document,"mousemove",this.boundEvents.move,false);librevjs.off(document,"mouseup",this.boundEvents.end,false);librevjs.off(document,"touchmove",this.boundEvents.move,false);librevjs.off(document,"touchend",this.boundEvents.end,false);this.update()};librevjs.Slider.prototype.update=function(){if(!this.el_){return}var b,a=this.getPercent(),f=this.handle,g=this.bar;if(isNaN(a)){a=0}b=a;if(f){var d=this.el_,e=d.offsetWidth,j=f.el().offsetWidth,k=(j)?j/e:0,c=1-k,h=a*c;b=h+(k/2);f.el().style.left=librevjs.round(h*100,2)+"%"}g.el().style.width=librevjs.round(b*100,2)+"%"};librevjs.Slider.prototype.calculateDistance=function(b){var d,g,m,l,a,j,h,f,e;d=this.el_;g=librevjs.findPosition(d);a=j=d.offsetWidth;h=this.handle;if(this.options_.vertical){l=g.top;if(b.changedTouches){e=b.changedTouches[0].pageY}else{e=b.pageY}if(h){var k=h.el().offsetHeight;l=l+(k/2);j=j-k}return Math.max(0,Math.min(1,((l-e)+j)/j))}else{m=g.left;if(b.changedTouches){f=b.changedTouches[0].pageX}else{f=b.pageX}if(h){var c=h.el().offsetWidth;m=m+(c/2);a=a-c}return Math.max(0,Math.min(1,(f-m)/a))}};librevjs.Slider.prototype.onFocus=function(){librevjs.on(document,"keyup",librevjs.bind(this,this.onKeyPress))};librevjs.Slider.prototype.onKeyPress=function(a){if(a.which==37){a.preventDefault();this.stepBack()}else{if(a.which==39){a.preventDefault();this.stepForward()}}};librevjs.Slider.prototype.onBlur=function(){librevjs.off(document,"keyup",librevjs.bind(this,this.onKeyPress))};librevjs.Slider.prototype.onClick=function(a){a.stopImmediatePropagation();a.preventDefault()};librevjs.SliderHandle=librevjs.Component.extend();librevjs.SliderHandle.prototype.defaultValue=0;librevjs.SliderHandle.prototype.createEl=function(b,a){a=a||{};a.className=a.className+" librevjs-slider-handle";a=librevjs.obj.merge({innerHTML:'<span class="librevjs-control-text">'+this.defaultValue+"</span>"},a);return librevjs.Component.prototype.createEl.call(this,"div",a)};librevjs.Menu=librevjs.Component.extend();librevjs.Menu.prototype.addItem=function(a){this.addChild(a);a.on("click",librevjs.bind(this,function(){this.unlockShowing()}))};librevjs.Menu.prototype.createEl=function(){var b=this.options().contentElType||"ul";this.contentEl_=librevjs.createEl(b,{className:"librevjs-menu-content"});var a=librevjs.Component.prototype.createEl.call(this,"div",{append:this.contentEl_,className:"librevjs-menu"});a.appendChild(this.contentEl_);librevjs.on(a,"click",function(c){c.preventDefault();c.stopImmediatePropagation()});return a};librevjs.MenuItem=librevjs.Button.extend({init:function(b,a){librevjs.Button.call(this,b,a);this.selected(a.selected)}});librevjs.MenuItem.prototype.createEl=function(b,a){return librevjs.Button.prototype.createEl.call(this,"li",librevjs.obj.merge({className:"librevjs-menu-item",innerHTML:this.options_.label},a))};librevjs.MenuItem.prototype.onClick=function(){this.selected(true)};librevjs.MenuItem.prototype.selected=function(a){if(a){this.addClass("librevjs-selected");this.el_.setAttribute("aria-selected",true)}else{this.removeClass("librevjs-selected");this.el_.setAttribute("aria-selected",false)}};librevjs.MenuButton=librevjs.Button.extend({init:function(b,a){librevjs.Button.call(this,b,a);this.menu=this.createMenu();this.addChild(this.menu);if(this.items&&this.items.length===0){this.hide()}this.on("keyup",this.onKeyPress);this.el_.setAttribute("aria-haspopup",true);this.el_.setAttribute("role","button")}});librevjs.MenuButton.prototype.buttonPressed_=false;librevjs.MenuButton.prototype.createMenu=function(){var b=new librevjs.Menu(this.player_);if(this.options().title){b.el().appendChild(librevjs.createEl("li",{className:"librevjs-menu-title",innerHTML:librevjs.capitalize(this.kind_),tabindex:-1}))}this.items=this["createItems"]();if(this.items){for(var a=0;a<this.items.length;a++){b.addItem(this.items[a])}}return b};librevjs.MenuButton.prototype.createItems=function(){};librevjs.MenuButton.prototype.buildCSSClass=function(){return this.className+" librevjs-menu-button "+librevjs.Button.prototype.buildCSSClass.call(this)};librevjs.MenuButton.prototype.onFocus=function(){};librevjs.MenuButton.prototype.onBlur=function(){};librevjs.MenuButton.prototype.onClick=function(){this.one("mouseout",librevjs.bind(this,function(){this.menu.unlockShowing();this.el_.blur()}));if(this.buttonPressed_){this.unpressButton()}else{this.pressButton()}};librevjs.MenuButton.prototype.onKeyPress=function(a){a.preventDefault();if(a.which==32||a.which==13){if(this.buttonPressed_){this.unpressButton()}else{this.pressButton()}}else{if(a.which==27){if(this.buttonPressed_){this.unpressButton()}}}};librevjs.MenuButton.prototype.pressButton=function(){this.buttonPressed_=true;this.menu.lockShowing();this.el_.setAttribute("aria-pressed",true);if(this.items&&this.items.length>0){this.items[0].el().focus()}};librevjs.MenuButton.prototype.unpressButton=function(){this.buttonPressed_=false;this.menu.unlockShowing();this.el_.setAttribute("aria-pressed",false)};librevjs.Player=librevjs.Component.extend({init:function(a,b,c){this.tag=a;b=librevjs.obj.merge(this.getTagSettings(a),b);this.cache_={};this.poster_=b.poster;this.controls_=b.controls;a.controls=false;librevjs.Component.call(this,this,b,c);if(this.controls()){this.addClass("librevjs-controls-enabled")}else{this.addClass("librevjs-controls-disabled")}this.one("play",function(g){var d={type:"firstplay",target:this.el_};var f=librevjs.trigger(this.el_,d);if(!f){g.preventDefault();g.stopPropagation();g.stopImmediatePropagation()}});this.on("ended",this.onEnded);this.on("play",this.onPlay);this.on("firstplay",this.onFirstPlay);this.on("pause",this.onPause);this.on("progress",this.onProgress);this.on("durationchange",this.onDurationChange);this.on("error",this.onError);this.on("fullscreenchange",this.onFullscreenChange);librevjs.players[this.id_]=this;if(b.plugins){librevjs.obj.each(b.plugins,function(d,e){this[d](e)},this)}this.listenForUserActivity()}});librevjs.Player.prototype.options_=librevjs.options;librevjs.Player.prototype.dispose=function(){this.trigger("dispose");this.off("dispose");librevjs.players[this.id_]=null;if(this.tag&&this.tag.player){this.tag.player=null}if(this.el_&&this.el_.player){this.el_.player=null}this.stopTrackingProgress();this.stopTrackingCurrentTime();if(this.tech){this.tech.dispose()}librevjs.Component.prototype.dispose.call(this)};librevjs.Player.prototype.getTagSettings=function(a){var d={sources:[],tracks:[]};librevjs.obj.merge(d,librevjs.getAttributeValues(a));if(a.hasChildNodes()){var f,g,b,e,c;f=a.childNodes;for(e=0,c=f.length;e<c;e++){g=f[e];b=g.nodeName.toLowerCase();if(b==="source"){d.sources.push(librevjs.getAttributeValues(g))}else{if(b==="track"){d.tracks.push(librevjs.getAttributeValues(g))}}}}return d};librevjs.Player.prototype.createEl=function(){var e=this.el_=librevjs.Component.prototype.createEl.call(this,"div");var a=this.tag;a.removeAttribute("width");a.removeAttribute("height");if(a.hasChildNodes()){var b,g,d,f,h,c;b=a.childNodes;g=b.length;c=[];while(g--){f=b[g];h=f.nodeName.toLowerCase();if(h==="track"){c.push(f)}}for(d=0;d<c.length;d++){a.removeChild(c[d])}}a.id=a.id||"librevjs_video_"+librevjs.guid++;e.id=a.id;e.className=a.className;a.id+="_html5_api";a.className="librevjs-tech";a.player=e.player=this;this.addClass("librevjs-paused");this.width(this.options_['width="100%"'],true);this.height(this.options_['height="auto"'],true);if(a.parentNode){a.parentNode.insertBefore(e,a)}librevjs.insertFirst(a,e);return e};librevjs.Player.prototype.loadTech=function(d,b){if(this.tech){this.unloadTech()}else{if(d!=="Html5"&&this.tag){librevjs.Html5.disposeMediaElement(this.tag);this.tag=null}}this.techName=d;this.isReady_=false;var a=function(){this.player_.triggerReady();if(!this.features.progressEvents){this.player_.manualProgressOn()}if(!this.features.timeupdateEvents){this.player_.manualTimeUpdatesOn()}};var c=librevjs.obj.merge({source:b,parentEl:this.el_},this.options_[d.toLowerCase()]);if(b){if(b.src==this.cache_.src&&this.cache_.currentTime>0){c.startTime=this.cache_.currentTime}this.cache_.src=b.src}this.tech=new window.cliplibrejs[d](this,c);this.tech.ready(a)};librevjs.Player.prototype.unloadTech=function(){this.isReady_=false;this.tech.dispose();if(this.manualProgress){this.manualProgressOff()}if(this.manualTimeUpdates){this.manualTimeUpdatesOff()}this.tech=false};librevjs.Player.prototype.manualProgressOn=function(){this.manualProgress=true;this.trackProgress();this.tech.one("progress",function(){this.features.progressEvents=true;this.player_.manualProgressOff()})};librevjs.Player.prototype.manualProgressOff=function(){this.manualProgress=false;this.stopTrackingProgress()};librevjs.Player.prototype.trackProgress=function(){this.progressInterval=setInterval(librevjs.bind(this,function(){if(this.cache_.bufferEnd<this.buffered().end(0)){this.trigger("progress")}else{if(this.bufferedPercent()==1){this.stopTrackingProgress();this.trigger("progress")}}}),500)};librevjs.Player.prototype.stopTrackingProgress=function(){clearInterval(this.progressInterval)};librevjs.Player.prototype.manualTimeUpdatesOn=function(){this.manualTimeUpdates=true;this.on("play",this.trackCurrentTime);this.on("pause",this.stopTrackingCurrentTime);this.tech.one("timeupdate",function(){this.features.timeupdateEvents=true;this.player_.manualTimeUpdatesOff()})};librevjs.Player.prototype.manualTimeUpdatesOff=function(){this.manualTimeUpdates=false;this.stopTrackingCurrentTime();this.off("play",this.trackCurrentTime);this.off("pause",this.stopTrackingCurrentTime)};librevjs.Player.prototype.trackCurrentTime=function(){if(this.currentTimeInterval){this.stopTrackingCurrentTime()}this.currentTimeInterval=setInterval(librevjs.bind(this,function(){this.trigger("timeupdate")}),250)};librevjs.Player.prototype.stopTrackingCurrentTime=function(){clearInterval(this.currentTimeInterval)};librevjs.Player.prototype.onEnded=function(){if(this.options_.loop){this.currentTime(0);this.play()}};librevjs.Player.prototype.onPlay=function(){librevjs.removeClass(this.el_,"librevjs-paused");librevjs.addClass(this.el_,"librevjs-playing")};librevjs.Player.prototype.onFirstPlay=function(){if(this.options_.starttime){this.currentTime(this.options_.starttime)}this.addClass("librevjs-has-started")};librevjs.Player.prototype.onPause=function(){librevjs.removeClass(this.el_,"librevjs-playing");librevjs.addClass(this.el_,"librevjs-paused")};librevjs.Player.prototype.onProgress=function(){if(this.bufferedPercent()==1){this.trigger("loadedalldata")}};librevjs.Player.prototype.onDurationChange=function(){this.duration(this.techGet("duration"))};librevjs.Player.prototype.onError=function(a){librevjs.log("Video Error",a)};librevjs.Player.prototype.onFullscreenChange=function(){if(this.isFullScreen){this.addClass("librevjs-fullscreen")}else{this.removeClass("librevjs-fullscreen")}};librevjs.Player.prototype.cache_;librevjs.Player.prototype.getCache=function(){return this.cache_};librevjs.Player.prototype.techCall=function(c,a){if(this.tech&&!this.tech.isReady_){this.tech.ready(function(){this[c](a)})}else{try{this.tech[c](a)}catch(b){librevjs.log(b);throw b}}};librevjs.Player.prototype.techGet=function(b){if(this.tech&&this.tech.isReady_){try{return this.tech[b]()}catch(a){if(this.tech[b]===undefined){librevjs.log("LibreVideo.js: "+b+" method not defined for "+this.techName+" playback technology.",a)}else{if(a.name=="TypeError"){librevjs.log("LibreVideo.js: "+b+" unavailable on "+this.techName+" playback technology element.",a);this.tech.isReady_=false}else{librevjs.log(a)}}throw a}}return};librevjs.Player.prototype.play=function(){this.techCall("play");return this};librevjs.Player.prototype.pause=function(){this.techCall("pause");return this};librevjs.Player.prototype.paused=function(){return(this.techGet("paused")===false)?false:true};librevjs.Player.prototype.currentTime=function(a){if(a!==undefined){this.cache_.lastSetCurrentTime=a;this.techCall("setCurrentTime",a);if(this.manualTimeUpdates){this.trigger("timeupdate")}return this}return this.cache_.currentTime=(this.techGet("currentTime")||0)};librevjs.Player.prototype.duration=function(a){if(a!==undefined){this.cache_.duration=parseFloat(a);return this}if(this.cache_.duration===undefined){this.onDurationChange()}return this.cache_.duration};librevjs.Player.prototype.remainingTime=function(){return this.duration()-this.currentTime()};librevjs.Player.prototype.buffered=function(){var c=this.techGet("buffered"),d=0,a=c.length-1,b=this.cache_.bufferEnd=this.cache_.bufferEnd||0;if(c&&a>=0&&c.end(a)!==b){b=c.end(a);this.cache_.bufferEnd=b}return librevjs.createTimeRange(d,b)};librevjs.Player.prototype.bufferedPercent=function(){return(this.duration())?this.buffered().end(0)/this.duration():0};librevjs.Player.prototype.volume=function(a){var b;if(a!==undefined){b=Math.max(0,Math.min(1,parseFloat(a)));this.cache_.volume=b;this.techCall("setVolume",b);librevjs.setLocalStorage("volume",b);return this}b=parseFloat(this.techGet("volume"));return(isNaN(b))?1:b};librevjs.Player.prototype.muted=function(a){if(a!==undefined){this.techCall("setMuted",a);return this}return this.techGet("muted")||false};librevjs.Player.prototype.supportsFullScreen=function(){return this.techGet("supportsFullScreen")||false};librevjs.Player.prototype.requestFullScreen=function(){var a=librevjs.support.requestFullScreen;this.isFullScreen=true;if(a){librevjs.on(document,a.eventName,librevjs.bind(this,function(b){this.isFullScreen=document[a.isFullScreen];if(this.isFullScreen===false){librevjs.off(document,a.eventName,arguments.callee)}this.trigger("fullscreenchange")}));this.el_[a.requestFn]()}else{if(this.tech.supportsFullScreen()){this.techCall("enterFullScreen")}else{this.enterFullWindow();this.trigger("fullscreenchange")}}return this};librevjs.Player.prototype.cancelFullScreen=function(){var a=librevjs.support.requestFullScreen;this.isFullScreen=false;if(a){document[a.cancelFn]()}else{if(this.tech.supportsFullScreen()){this.techCall("exitFullScreen")}else{this.exitFullWindow();this.trigger("fullscreenchange")}}return this};librevjs.Player.prototype.enterFullWindow=function(){this.isFullWindow=true;this.docOrigOverflow=document.documentElement.style.overflow;librevjs.on(document,"keydown",librevjs.bind(this,this.fullWindowOnEscKey));document.documentElement.style.overflow="hidden";librevjs.addClass(document.body,"librevjs-full-window");this.trigger("enterFullWindow")};librevjs.Player.prototype.fullWindowOnEscKey=function(a){if(a.keyCode===27){if(this.isFullScreen===true){this.cancelFullScreen()}else{this.exitFullWindow()}}};librevjs.Player.prototype.exitFullWindow=function(){this.isFullWindow=false;librevjs.off(document,"keydown",this.fullWindowOnEscKey);document.documentElement.style.overflow=this.docOrigOverflow;librevjs.removeClass(document.body,"librevjs-full-window");this.trigger("exitFullWindow")};librevjs.Player.prototype.selectSource=function(g){for(var h=0,f=this.options_.techOrder;h<f.length;h++){var l=librevjs.capitalize(f[h]),e=window.cliplibrejs[l];if(e.isSupported()){for(var d=0,c=g;d<c.length;d++){var k=c[d];if(e.canPlaySource(k)){return{source:k,tech:l}}}}}return false};librevjs.Player.prototype.src=function(b){if(b instanceof Array){var a=this.selectSource(b),c;if(a){b=a.source;c=a.tech;if(c==this.techName){this.src(b)}else{this.loadTech(c,b)}}else{this.el_.appendChild(librevjs.createEl("p",{innerHTML:this.options()["notSupportedMessage"]}))}}else{if(b instanceof Object){if(window.cliplibrejs[this.techName]["canPlaySource"](b)){this.src(b.src)}else{this.src([b])}}else{this.cache_.src=b;if(!this.isReady_){this.ready(function(){this.src(b)})}else{this.techCall("src",b);if(this.options_.preload=="auto"){this.load()}if(this.options_.autoplay){this.play()}}}}return this};librevjs.Player.prototype.load=function(){this.techCall("load");return this};librevjs.Player.prototype.currentSrc=function(){return this.techGet("currentSrc")||this.cache_.src||""};librevjs.Player.prototype.preload=function(a){if(a!==undefined){this.techCall("setPreload",a);this.options_.preload=a;return this}return this.techGet("preload")};librevjs.Player.prototype.autoplay=function(a){if(a!==undefined){this.techCall("setAutoplay",a);this.options_.autoplay=a;return this}return this.techGet("autoplay",a)};librevjs.Player.prototype.loop=function(a){if(a!==undefined){this.techCall("setLoop",a);this.options_.loop=a;return this}return this.techGet("loop")};librevjs.Player.prototype.poster_;librevjs.Player.prototype.poster=function(a){if(a!==undefined){this.poster_=a}return this.poster_};librevjs.Player.prototype.controls_;librevjs.Player.prototype.controls=function(a){if(a!==undefined){a=!!a;if(this.controls_!==a){this.controls_=a;if(a){this.removeClass("librevjs-controls-disabled");this.addClass("librevjs-controls-enabled");this.trigger("controlsenabled")}else{this.removeClass("librevjs-controls-enabled");this.addClass("librevjs-controls-disabled");this.trigger("controlsdisabled")}}return this}return this.controls_};librevjs.Player.prototype.usingNativeControls_;librevjs.Player.prototype.usingNativeControls=function(a){if(a!==undefined){a=!!a;if(this.usingNativeControls_!==a){this.usingNativeControls_=a;if(a){this.addClass("librevjs-using-native-controls");this.trigger("usingnativecontrols")}else{this.removeClass("librevjs-using-native-controls");this.trigger("usingcustomcontrols")}}return this}return this.usingNativeControls_};librevjs.Player.prototype.error=function(){return this.techGet("error")};librevjs.Player.prototype.ended=function(){return this.techGet("ended")};librevjs.Player.prototype.seeking=function(){return this.techGet("seeking")};librevjs.Player.prototype.userActivity_=true;librevjs.Player.prototype.reportUserActivity=function(a){this.userActivity_=true};librevjs.Player.prototype.userActive_=true;librevjs.Player.prototype.userActive=function(a){if(a!==undefined){a=!!a;if(a!==this.userActive_){this.userActive_=a;if(a){this.userActivity_=true;this.removeClass("librevjs-user-inactive");this.addClass("librevjs-user-active");this.trigger("useractive")}else{this.userActivity_=false;this.tech.one("mousemove",function(b){b.stopPropagation();b.preventDefault()});this.removeClass("librevjs-user-active");this.addClass("librevjs-user-inactive");this.trigger("userinactive")}}return this}return this.userActive_};librevjs.Player.prototype.listenForUserActivity=function(){var c,e,f,b,a,d;c=this.reportUserActivity;e=function(){c();clearInterval(f);f=setInterval(librevjs.bind(this,c),250)};b=function(g){c();clearInterval(f)};this.on("mousedown",e);this.on("mousemove",c);this.on("mouseup",b);this.on("keydown",c);this.on("keyup",c);this.on("touchstart",e);this.on("touchmove",c);this.on("touchend",b);this.on("touchcancel",b);a=setInterval(librevjs.bind(this,function(){if(this.userActivity_){this.userActivity_=false;this.userActive(true);clearTimeout(d);d=setTimeout(librevjs.bind(this,function(){if(!this.userActivity_){this.userActive(false)}}),2000)}}),250);this.on("dispose",function(){clearInterval(a);clearTimeout(d)})};(function(){var a,b,c;c=document.createElement("div");b={};if(c.cancelFullscreen!==undefined){b.requestFn="requestFullscreen";b.cancelFn="exitFullscreen";b.eventName="fullscreenchange";b.isFullScreen="fullScreen"}else{if(document.mozCancelFullScreen){a="moz";b.isFullScreen=a+"FullScreen"}else{a="webkit";b.isFullScreen=a+"IsFullScreen"}if(c[a+"RequestFullScreen"]){b.requestFn=a+"RequestFullScreen";b.cancelFn=a+"CancelFullScreen"}b.eventName=a+"fullscreenchange"}if(document[b.cancelFn]){librevjs.support.requestFullScreen=b}})();librevjs.ControlBar=librevjs.Component.extend();librevjs.ControlBar.prototype.options_={loadEvent:"play",children:{playToggle:{},currentTimeDisplay:{},timeDivider:{},durationDisplay:{},remainingTimeDisplay:{},progressControl:{},fullscreenToggle:{},volumeControl:{},muteToggle:{}}};librevjs.ControlBar.prototype.createEl=function(){return librevjs.createEl("div",{className:"librevjs-control-bar"})};librevjs.PlayToggle=librevjs.Button.extend({init:function(b,a){librevjs.Button.call(this,b,a);b.on("play",librevjs.bind(this,this.onPlay));b.on("pause",librevjs.bind(this,this.onPause))}});librevjs.PlayToggle.prototype.buttonText="Play";librevjs.PlayToggle.prototype.buildCSSClass=function(){return"librevjs-play-control "+librevjs.Button.prototype.buildCSSClass.call(this)};librevjs.PlayToggle.prototype.onClick=function(){if(this.player_.paused()){this.player_.play()}else{this.player_.pause()}};librevjs.PlayToggle.prototype.onPlay=function(){librevjs.removeClass(this.el_,"librevjs-paused");librevjs.addClass(this.el_,"librevjs-playing");this.el_.children[0].children[0].innerHTML="Pause"};librevjs.PlayToggle.prototype.onPause=function(){librevjs.removeClass(this.el_,"librevjs-playing");librevjs.addClass(this.el_,"librevjs-paused");this.el_.children[0].children[0].innerHTML="Play"};librevjs.CurrentTimeDisplay=librevjs.Component.extend({init:function(b,a){librevjs.Component.call(this,b,a);b.on("timeupdate",librevjs.bind(this,this.updateContent))}});librevjs.CurrentTimeDisplay.prototype.createEl=function(){var a=librevjs.Component.prototype.createEl.call(this,"div",{className:"librevjs-current-time librevjs-time-controls librevjs-control"});this.content=librevjs.createEl("div",{className:"librevjs-current-time-display",innerHTML:'<span class="librevjs-control-text">Current Time </span>0:00',"aria-live":"off"});a.appendChild(librevjs.createEl("div").appendChild(this.content));return a};librevjs.CurrentTimeDisplay.prototype.updateContent=function(){var a=(this.player_.scrubbing)?this.player_.getCache().currentTime:this.player_.currentTime();this.content.innerHTML='<span class="librevjs-control-text">Current Time </span>'+librevjs.formatTime(a,this.player_.duration())};librevjs.DurationDisplay=librevjs.Component.extend({init:function(b,a){librevjs.Component.call(this,b,a);b.on("timeupdate",librevjs.bind(this,this.updateContent))}});librevjs.DurationDisplay.prototype.createEl=function(){var a=librevjs.Component.prototype.createEl.call(this,"div",{className:"librevjs-duration librevjs-time-controls librevjs-control"});this.content=librevjs.createEl("div",{className:"librevjs-duration-display",innerHTML:'<span class="librevjs-control-text">Duration Time </span>0:00',"aria-live":"off"});a.appendChild(librevjs.createEl("div").appendChild(this.content));return a};librevjs.DurationDisplay.prototype.updateContent=function(){var a=this.player_.duration();if(a){this.content.innerHTML='<span class="librevjs-control-text">Duration Time </span>'+librevjs.formatTime(a)}};librevjs.TimeDivider=librevjs.Component.extend({init:function(b,a){librevjs.Component.call(this,b,a)}});librevjs.TimeDivider.prototype.createEl=function(){return librevjs.Component.prototype.createEl.call(this,"div",{className:"librevjs-time-divider",innerHTML:"<div><span>/</span></div>"})};librevjs.RemainingTimeDisplay=librevjs.Component.extend({init:function(b,a){librevjs.Component.call(this,b,a);b.on("timeupdate",librevjs.bind(this,this.updateContent))}});librevjs.RemainingTimeDisplay.prototype.createEl=function(){var a=librevjs.Component.prototype.createEl.call(this,"div",{className:"librevjs-remaining-time librevjs-time-controls librevjs-control"});this.content=librevjs.createEl("div",{className:"librevjs-remaining-time-display",innerHTML:'<span class="librevjs-control-text">Remaining Time </span>-0:00',"aria-live":"off"});a.appendChild(librevjs.createEl("div").appendChild(this.content));return a};librevjs.RemainingTimeDisplay.prototype.updateContent=function(){if(this.player_.duration()){this.content.innerHTML='<span class="librevjs-control-text">Remaining Time </span>-'+librevjs.formatTime(this.player_.remainingTime())}};librevjs.FullscreenToggle=librevjs.Button.extend({init:function(b,a){librevjs.Button.call(this,b,a)}});librevjs.FullscreenToggle.prototype.buttonText="Fullscreen";librevjs.FullscreenToggle.prototype.buildCSSClass=function(){return"librevjs-fullscreen-control "+librevjs.Button.prototype.buildCSSClass.call(this)};librevjs.FullscreenToggle.prototype.onClick=function(){if(!this.player_.isFullScreen){this.player_.requestFullScreen();this.el_.children[0].children[0].innerHTML="Non-Fullscreen"}else{this.player_.cancelFullScreen();this.el_.children[0].children[0].innerHTML="Fullscreen"}};librevjs.ProgressControl=librevjs.Component.extend({init:function(b,a){librevjs.Component.call(this,b,a)}});librevjs.ProgressControl.prototype.options_={children:{seekBar:{}}};librevjs.ProgressControl.prototype.createEl=function(){return librevjs.Component.prototype.createEl.call(this,"div",{className:"librevjs-progress-control librevjs-control"})};librevjs.SeekBar=librevjs.Slider.extend({init:function(b,a){librevjs.Slider.call(this,b,a);b.on("timeupdate",librevjs.bind(this,this.updateARIAAttributes));b.ready(librevjs.bind(this,this.updateARIAAttributes))}});librevjs.SeekBar.prototype.options_={children:{loadProgressBar:{},playProgressBar:{},seekHandle:{}},barName:"playProgressBar",handleName:"seekHandle"};librevjs.SeekBar.prototype.playerEvent="timeupdate";librevjs.SeekBar.prototype.createEl=function(){return librevjs.Slider.prototype.createEl.call(this,"div",{className:"librevjs-progress-holder","aria-label":"video progress bar"})};librevjs.SeekBar.prototype.updateARIAAttributes=function(){var a=(this.player_.scrubbing)?this.player_.getCache().currentTime:this.player_.currentTime();this.el_.setAttribute("aria-valuenow",librevjs.round(this.getPercent()*100,2));this.el_.setAttribute("aria-valuetext",librevjs.formatTime(a,this.player_.duration()))};librevjs.SeekBar.prototype.getPercent=function(){var b;if(this.player_.techName==="Flash"&&this.player_.seeking()){var a=this.player_.getCache();if(a.lastSetCurrentTime){b=a.lastSetCurrentTime}else{b=this.player_.currentTime()}}else{b=this.player_.currentTime()}return b/this.player_.duration()};librevjs.SeekBar.prototype.onMouseDown=function(a){librevjs.Slider.prototype.onMouseDown.call(this,a);this.player_.scrubbing=true;this.videoWasPlaying=!this.player_.paused();this.player_.pause()};librevjs.SeekBar.prototype.onMouseMove=function(b){var a=this.calculateDistance(b)*this.player_.duration();if(a==this.player_.duration()){a=a-0.1}this.player_.currentTime(a)};librevjs.SeekBar.prototype.onMouseUp=function(a){librevjs.Slider.prototype.onMouseUp.call(this,a);this.player_.scrubbing=false;if(this.videoWasPlaying){this.player_.play()}};librevjs.SeekBar.prototype.stepForward=function(){this.player_.currentTime(this.player_.currentTime()+5)};librevjs.SeekBar.prototype.stepBack=function(){this.player_.currentTime(this.player_.currentTime()-5)};librevjs.LoadProgressBar=librevjs.Component.extend({init:function(b,a){librevjs.Component.call(this,b,a);b.on("progress",librevjs.bind(this,this.update))}});librevjs.LoadProgressBar.prototype.createEl=function(){return librevjs.Component.prototype.createEl.call(this,"div",{className:"librevjs-load-progress",innerHTML:'<span class="librevjs-control-text">Loaded: 0%</span>'})};librevjs.LoadProgressBar.prototype.update=function(){if(this.el_.style){this.el_.style.width=librevjs.round(this.player_.bufferedPercent()*100,2)+"%"}};librevjs.PlayProgressBar=librevjs.Component.extend({init:function(b,a){librevjs.Component.call(this,b,a)}});librevjs.PlayProgressBar.prototype.createEl=function(){return librevjs.Component.prototype.createEl.call(this,"div",{className:"librevjs-play-progress",innerHTML:'<span class="librevjs-control-text">Progress: 0%</span>'})};librevjs.SeekHandle=librevjs.SliderHandle.extend();librevjs.SeekHandle.prototype.defaultValue="00:00";librevjs.SeekHandle.prototype.createEl=function(){return librevjs.SliderHandle.prototype.createEl.call(this,"div",{className:"librevjs-seek-handle"})};librevjs.VolumeControl=librevjs.Component.extend({init:function(b,a){librevjs.Component.call(this,b,a);if(b.tech&&b.tech.features&&b.tech.features.volumeControl===false){this.addClass("librevjs-hidden")}b.on("loadstart",librevjs.bind(this,function(){if(b.tech.features&&b.tech.features.volumeControl===false){this.addClass("librevjs-hidden")}else{this.removeClass("librevjs-hidden")}}))}});librevjs.VolumeControl.prototype.options_={children:{volumeBar:{}}};librevjs.VolumeControl.prototype.createEl=function(){return librevjs.Component.prototype.createEl.call(this,"div",{className:"librevjs-volume-control librevjs-control"})};librevjs.VolumeBar=librevjs.Slider.extend({init:function(b,a){librevjs.Slider.call(this,b,a);b.on("volumechange",librevjs.bind(this,this.updateARIAAttributes));b.ready(librevjs.bind(this,this.updateARIAAttributes));setTimeout(librevjs.bind(this,this.update),0)}});librevjs.VolumeBar.prototype.updateARIAAttributes=function(){this.el_.setAttribute("aria-valuenow",librevjs.round(this.player_.volume()*100,2));this.el_.setAttribute("aria-valuetext",librevjs.round(this.player_.volume()*100,2)+"%")};librevjs.VolumeBar.prototype.options_={children:{volumeLevel:{},volumeHandle:{}},barName:"volumeLevel",handleName:"volumeHandle"};librevjs.VolumeBar.prototype.playerEvent="volumechange";librevjs.VolumeBar.prototype.createEl=function(){return librevjs.Slider.prototype.createEl.call(this,"div",{className:"librevjs-volume-bar","aria-label":"volume level"})};librevjs.VolumeBar.prototype.onMouseMove=function(a){this.player_.volume(this.calculateDistance(a))};librevjs.VolumeBar.prototype.getPercent=function(){if(this.player_.muted()){return 0}else{return this.player_.volume()}};librevjs.VolumeBar.prototype.stepForward=function(){this.player_.volume(this.player_.volume()+0.1)};librevjs.VolumeBar.prototype.stepBack=function(){this.player_.volume(this.player_.volume()-0.1)};librevjs.VolumeLevel=librevjs.Component.extend({init:function(b,a){librevjs.Component.call(this,b,a)}});librevjs.VolumeLevel.prototype.createEl=function(){return librevjs.Component.prototype.createEl.call(this,"div",{className:"librevjs-volume-level",innerHTML:'<span class="librevjs-control-text"></span>'})};librevjs.VolumeHandle=librevjs.SliderHandle.extend();librevjs.VolumeHandle.prototype.defaultValue="00:00";librevjs.VolumeHandle.prototype.createEl=function(){return librevjs.SliderHandle.prototype.createEl.call(this,"div",{className:"librevjs-volume-handle"})};librevjs.MuteToggle=librevjs.Button.extend({init:function(b,a){librevjs.Button.call(this,b,a);b.on("volumechange",librevjs.bind(this,this.update));if(b.tech&&b.tech.features&&b.tech.features.volumeControl===false){this.addClass("librevjs-hidden")}b.on("loadstart",librevjs.bind(this,function(){if(b.tech.features&&b.tech.features.volumeControl===false){this.addClass("librevjs-hidden")}else{this.removeClass("librevjs-hidden")}}))}});librevjs.MuteToggle.prototype.createEl=function(){return librevjs.Button.prototype.createEl.call(this,"div",{className:"librevjs-mute-control librevjs-control",innerHTML:'<div><span class="librevjs-control-text">Mute</span></div>'})};librevjs.MuteToggle.prototype.onClick=function(){this.player_.muted(this.player_.muted()?false:true)};librevjs.MuteToggle.prototype.update=function(){var b=this.player_.volume(),c=3;if(b===0||this.player_.muted()){c=0}else{if(b<0.33){c=1}else{if(b<0.67){c=2}}}if(this.player_.muted()){if(this.el_.children[0].children[0].innerHTML!="Unmute"){this.el_.children[0].children[0].innerHTML="Unmute"}}else{if(this.el_.children[0].children[0].innerHTML!="Mute"){this.el_.children[0].children[0].innerHTML="Mute"}}for(var a=0;a<4;a++){librevjs.removeClass(this.el_,"librevjs-vol-"+a)}librevjs.addClass(this.el_,"librevjs-vol-"+c)};librevjs.VolumeMenuButton=librevjs.MenuButton.extend({init:function(b,a){librevjs.MenuButton.call(this,b,a);b.on("volumechange",librevjs.bind(this,this.update));if(b.tech&&b.tech.features&&b.tech.features.volumeControl===false){this.addClass("librevjs-hidden")}b.on("loadstart",librevjs.bind(this,function(){if(b.tech.features&&b.tech.features.volumeControl===false){this.addClass("librevjs-hidden")}else{this.removeClass("librevjs-hidden")}}));this.addClass("librevjs-menu-button")}});librevjs.VolumeMenuButton.prototype.createMenu=function(){var b=new librevjs.Menu(this.player_,{contentElType:"div"});var a=new librevjs.VolumeBar(this.player_,librevjs.obj.merge({vertical:true},this.options_.volumeBar));b.addChild(a);return b};librevjs.VolumeMenuButton.prototype.onClick=function(){librevjs.MuteToggle.prototype.onClick.call(this);librevjs.MenuButton.prototype.onClick.call(this)};librevjs.VolumeMenuButton.prototype.createEl=function(){return librevjs.Button.prototype.createEl.call(this,"div",{className:"librevjs-volume-menu-button librevjs-menu-button librevjs-control",innerHTML:'<div><span class="librevjs-control-text">Mute</span></div>'})};librevjs.VolumeMenuButton.prototype.update=librevjs.MuteToggle.prototype.update;librevjs.PosterImage=librevjs.Button.extend({init:function(b,a){librevjs.Button.call(this,b,a);if(!b.poster()||!b.controls()){this.hide()}b.on("play",librevjs.bind(this,this.hide))}});librevjs.PosterImage.prototype.createEl=function(){var a=librevjs.createEl("div",{className:"librevjs-poster",tabIndex:-1}),b=this.player_.poster();if(b){if("backgroundSize" in a.style){a.style.backgroundImage='url("'+b+'")'}else{a.appendChild(librevjs.createEl("img",{src:b}))}}return a};librevjs.PosterImage.prototype.onClick=function(){if(this.player().controls()){this.player_.play()}};librevjs.LoadingSpinner=librevjs.Component.extend({init:function(b,a){librevjs.Component.call(this,b,a);b.on("canplay",librevjs.bind(this,this.hide));b.on("canplaythrough",librevjs.bind(this,this.hide));b.on("playing",librevjs.bind(this,this.hide));b.on("seeked",librevjs.bind(this,this.hide));b.on("seeking",librevjs.bind(this,this.show));b.on("seeked",librevjs.bind(this,this.hide));b.on("error",librevjs.bind(this,this.show));b.on("waiting",librevjs.bind(this,this.show))}});librevjs.LoadingSpinner.prototype.createEl=function(){return librevjs.Component.prototype.createEl.call(this,"div",{className:"librevjs-loading-spinner"})};librevjs.BigPlayButton=librevjs.Button.extend();librevjs.BigPlayButton.prototype.createEl=function(){return librevjs.Button.prototype.createEl.call(this,"div",{className:"librevjs-big-play-button",innerHTML:"<span></span>","aria-label":"play video"})};librevjs.BigPlayButton.prototype.onClick=function(){this.player_.play()};librevjs.MediaTechController=librevjs.Component.extend({init:function(b,a,c){librevjs.Component.call(this,b,a,c);this.initControlsListeners()}});librevjs.MediaTechController.prototype.initControlsListeners=function(){var c,b,a,d;b=this;c=this.player();var a=function(){if(c.controls()&&!c.usingNativeControls()){b.addControlsListeners()}};d=librevjs.bind(b,b.removeControlsListeners);this.ready(a);c.on("controlsenabled",a);c.on("controlsdisabled",d)};librevjs.MediaTechController.prototype.addControlsListeners=function(){var a,b;this.on("mousedown",this.onClick);this.on("touchstart",function(c){c.preventDefault();c.stopPropagation();b=this.player_.userActive()});a=function(c){c.stopPropagation();if(b){this.player_.reportUserActivity()}};this.on("touchmove",a);this.on("touchleave",a);this.on("touchcancel",a);this.on("touchend",a);this.emitTapEvents();this.on("tap",this.onTap)};librevjs.MediaTechController.prototype.removeControlsListeners=function(){this.off("tap");this.off("touchstart");this.off("touchmove");this.off("touchleave");this.off("touchcancel");this.off("touchend");this.off("click");this.off("mousedown")};librevjs.MediaTechController.prototype.onClick=function(a){if(a.button!==0){return}if(this.player().controls()){if(this.player().paused()){this.player().play()}else{this.player().pause()}}};librevjs.MediaTechController.prototype.onTap=function(){this.player().userActive(!this.player().userActive())};librevjs.MediaTechController.prototype.features={volumeControl:true,fullscreenResize:false,progressEvents:false,timeupdateEvents:false};librevjs.media={};librevjs.media.ApiMethods="play,pause,paused,currentTime,setCurrentTime,duration,buffered,volume,setVolume,muted,setMuted,width,height,supportsFullScreen,enterFullScreen,src,load,currentSrc,preload,setPreload,autoplay,setAutoplay,loop,setLoop,error,networkState,readyState,seeking,initialTime,startOffsetTime,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight,textTracks,defaultPlaybackRate,playbackRate,mediaGroup,controller,controls,defaultMuted".split(",");function createMethod(a){return function(){throw new Error('The "'+a+"\" method is not available on the playback technology's API")}}for(var i=librevjs.media.ApiMethods.length-1;i>=0;i--){var methodName=librevjs.media.ApiMethods[i];librevjs.MediaTechController.prototype[librevjs.media.ApiMethods[i]]=createMethod(methodName)}librevjs.Html5=librevjs.MediaTechController.extend({init:function(b,a,c){this.features.volumeControl=librevjs.Html5.canControlVolume();this.features.movingMediaElementInDOM=!librevjs.IS_IOS;this.features.fullscreenResize=true;librevjs.MediaTechController.call(this,b,a,c);var d=a.source;if(d&&this.el_.currentSrc===d.src&&this.el_.networkState>0){b.trigger("loadstart")}else{if(d){this.el_.src=d.src}}if(librevjs.TOUCH_ENABLED&&b.options()["nativeControlsForTouch"]===true){this.useNativeControls()}b.ready(function(){if(this.tag&&this.options_.autoplay&&this.paused()){delete this.tag.poster;this.play()}});this.setupTriggers();this.triggerReady()}});librevjs.Html5.prototype.dispose=function(){librevjs.MediaTechController.prototype.dispose.call(this)};librevjs.Html5.prototype.createEl=function(){var d=this.player_,e=d.tag,f,g;if(!e||this.features.movingMediaElementInDOM===false){if(e){g=e.cloneNode(false);librevjs.Html5.disposeMediaElement(e);e=g;d.tag=null}else{e=librevjs.createEl("video",{id:d.id()+"_html5_api",className:"librevjs-tech"})}e.player=d;librevjs.insertFirst(e,d.el())}var b=["autoplay","preload","loop","muted"];for(var c=b.length-1;c>=0;c--){var a=b[c];if(d.options_[a]!==null){e[a]=d.options_[a]}}return e};librevjs.Html5.prototype.setupTriggers=function(){for(var a=librevjs.Html5.Events.length-1;a>=0;a--){librevjs.on(this.el_,librevjs.Html5.Events[a],librevjs.bind(this.player_,this.eventHandler))}};librevjs.Html5.prototype.eventHandler=function(a){this.trigger(a);a.stopPropagation()};librevjs.Html5.prototype.useNativeControls=function(){var a,b,e,d,c;a=this;b=this.player();a.setControls(b.controls());e=function(){a.setControls(true)};d=function(){a.setControls(false)};b.on("controlsenabled",e);b.on("controlsdisabled",d);c=function(){b.off("controlsenabled",e);b.off("controlsdisabled",d)};a.on("dispose",c);b.on("usingcustomcontrols",c);b.usingNativeControls(true)};librevjs.Html5.prototype.play=function(){this.el_.play()};librevjs.Html5.prototype.pause=function(){this.el_.pause()};librevjs.Html5.prototype.paused=function(){return this.el_.paused};librevjs.Html5.prototype.currentTime=function(){return this.el_.currentTime};librevjs.Html5.prototype.setCurrentTime=function(b){try{this.el_.currentTime=b}catch(a){librevjs.log(a,"Video is not ready. (LibreVideo.js)")}};librevjs.Html5.prototype.duration=function(){return this.el_.duration||0};librevjs.Html5.prototype.buffered=function(){return this.el_.buffered};librevjs.Html5.prototype.volume=function(){return this.el_.volume};librevjs.Html5.prototype.setVolume=function(a){this.el_.volume=a};librevjs.Html5.prototype.muted=function(){return this.el_.muted};librevjs.Html5.prototype.setMuted=function(a){this.el_.muted=a};librevjs.Html5.prototype.width=function(){return this.el_.offsetWidth};librevjs.Html5.prototype.height=function(){return this.el_.offsetHeight};librevjs.Html5.prototype.supportsFullScreen=function(){if(typeof this.el_.webkitEnterFullScreen=="function"){if(/Android/.test(librevjs.USER_AGENT)||!/Chrome|Mac OS X 10.5/.test(librevjs.USER_AGENT)){return true}}return false};librevjs.Html5.prototype.enterFullScreen=function(){var a=this.el_;if(a.paused&&a.networkState<=a.HAVE_METADATA){this.el_.play();setTimeout(function(){a.pause();a.webkitEnterFullScreen()},0)}else{a.webkitEnterFullScreen()}};librevjs.Html5.prototype.exitFullScreen=function(){this.el_.webkitExitFullScreen()};librevjs.Html5.prototype.src=function(a){this.el_.src=a};librevjs.Html5.prototype.load=function(){this.el_.load()};librevjs.Html5.prototype.currentSrc=function(){return this.el_.currentSrc};librevjs.Html5.prototype.preload=function(){return this.el_.preload};librevjs.Html5.prototype.setPreload=function(a){this.el_.preload=a};librevjs.Html5.prototype.autoplay=function(){return this.el_.autoplay};librevjs.Html5.prototype.setAutoplay=function(a){this.el_.autoplay=a};librevjs.Html5.prototype.controls=function(){return this.el_.controls};librevjs.Html5.prototype.setControls=function(a){this.el_.controls=!!a};librevjs.Html5.prototype.loop=function(){return this.el_.loop};librevjs.Html5.prototype.setLoop=function(a){this.el_.loop=a};librevjs.Html5.prototype.error=function(){return this.el_.error};librevjs.Html5.prototype.seeking=function(){return this.el_.seeking};librevjs.Html5.prototype.ended=function(){return this.el_.ended};librevjs.Html5.prototype.defaultMuted=function(){return this.el_.defaultMuted};librevjs.Html5.isSupported=function(){return !!librevjs.TEST_VID.canPlayType};librevjs.Html5.canPlaySource=function(a){try{return !!librevjs.TEST_VID.canPlayType(a.type)}catch(b){return""}};librevjs.Html5.canControlVolume=function(){var a=librevjs.TEST_VID.volume;librevjs.TEST_VID.volume=(a/2)+0.1;return a!==librevjs.TEST_VID.volume};librevjs.Html5.Events="loadstart,suspend,abort,error,emptied,stalled,loadedmetadata,loadeddata,canplay,canplaythrough,playing,waiting,seeking,seeked,ended,durationchange,timeupdate,progress,play,pause,ratechange,volumechange".split(",");librevjs.Html5.disposeMediaElement=function(a){if(!a){return}a.player=null;if(a.parentNode){a.parentNode.removeChild(a)}while(a.hasChildNodes()){a.removeChild(a.firstChild)}a.removeAttribute("src");if(typeof a.load==="function"){a.load()}};if(librevjs.IS_OLD_ANDROID){document.createElement("video").constructor.prototype.canPlayType=function(a){return(a&&a.toLowerCase().indexOf("video/mp4")!=-1)?"maybe":""}}librevjs.Flash=librevjs.MediaTechController.extend({init:function(m,n,k){librevjs.MediaTechController.call(this,m,n,k);var a=n.source,h=n.parentEl,l=this.el_=librevjs.createEl("div",{id:m.id()+"_temp_flash"}),b=m.id()+"_flash_api",c=m.options_,j=librevjs.obj.merge({readyFunction:"cliplibrejs.Flash.onReady",eventProxyFunction:"cliplibrejs.Flash.onEvent",errorEventProxyFunction:"cliplibrejs.Flash.onError",autoplay:c.autoplay,preload:c.preload,loop:c.loop,muted:c.muted},n.flashVars),d=librevjs.obj.merge({wmode:"opaque",bgcolor:"#000000"},n.params),f=librevjs.obj.merge({id:b,name:b,"class":"librevjs-tech"},n.attributes);if(a){if(a.type&&librevjs.Flash.isStreamingType(a.type)){var e=librevjs.Flash.streamToParts(a.src);j.rtmpConnection=encodeURIComponent(e.connection);j.rtmpStream=encodeURIComponent(e.stream)}else{j.src=encodeURIComponent(librevjs.getAbsoluteURL(a.src))}}librevjs.insertFirst(l,h);if(n.startTime){this.ready(function(){this.load();this.play();this.currentTime(n.startTime)})}if(n.iFrameMode===true&&!librevjs.IS_FIREFOX){var g=librevjs.createEl("iframe",{id:b+"_iframe",name:b+"_iframe",className:"librevjs-tech",scrolling:"no",marginWidth:0,marginHeight:0,frameBorder:0});j.readyFunction="ready";j.eventProxyFunction="events";j.errorEventProxyFunction="errors";librevjs.on(g,"load",librevjs.bind(this,function(){var p,o=g.contentWindow;p=g.contentDocument?g.contentDocument:g.contentWindow.document;p.write(librevjs.Flash.getEmbedCode(n.swf,j,d,f));o.player=this.player_;o.ready=librevjs.bind(this.player_,function(r){var t=p.getElementById(r),s=this,q=s.tech;q.el_=t;librevjs.Flash.checkReady(q)});o.events=librevjs.bind(this.player_,function(r,q){var s=this;if(s&&s.techName==="flash"){s.trigger(q)}});o.errors=librevjs.bind(this.player_,function(r,q){librevjs.log("Flash Error",q)})}));l.parentNode.replaceChild(g,l)}else{librevjs.Flash.embed(n.swf,l,j,d,f)}}});librevjs.Flash.prototype.dispose=function(){librevjs.MediaTechController.prototype.dispose.call(this)};librevjs.Flash.prototype.play=function(){this.el_.librevjs_play()};librevjs.Flash.prototype.pause=function(){this.el_.librevjs_pause()};librevjs.Flash.prototype.src=function(b){if(librevjs.Flash.isStreamingSrc(b)){b=librevjs.Flash.streamToParts(b);this.setRtmpConnection(b.connection);this.setRtmpStream(b.stream)}else{b=librevjs.getAbsoluteURL(b);this.el_.librevjs_src(b)}if(this.player_.autoplay()){var a=this;setTimeout(function(){a.play()},0)}};librevjs.Flash.prototype.currentSrc=function(){var c=this.el_.librevjs_getProperty("currentSrc");if(c==null){var a=this.rtmpConnection(),b=this.rtmpStream();if(a&&b){c=librevjs.Flash.streamFromParts(a,b)}}return c};librevjs.Flash.prototype.load=function(){this.el_.librevjs_load()};librevjs.Flash.prototype.poster=function(){this.el_.librevjs_getProperty("poster")};librevjs.Flash.prototype.buffered=function(){return librevjs.createTimeRange(0,this.el_.librevjs_getProperty("buffered"))};librevjs.Flash.prototype.supportsFullScreen=function(){return false};librevjs.Flash.prototype.enterFullScreen=function(){return false};var api=librevjs.Flash.prototype,readWrite="rtmpConnection,rtmpStream,preload,currentTime,defaultPlaybackRate,playbackRate,autoplay,loop,mediaGroup,controller,controls,volume,muted,defaultMuted".split(","),readOnly="error,currentSrc,networkState,readyState,seeking,initialTime,duration,startOffsetTime,paused,played,seekable,ended,videoTracks,audioTracks,videoWidth,videoHeight,textTracks".split(",");var createSetter=function(a){var b=a.charAt(0).toUpperCase()+a.slice(1);api["set"+b]=function(c){return this.el_.librevjs_setProperty(a,c)}};var createGetter=function(a){api[a]=function(){return this.el_.librevjs_getProperty(a)}};(function(){var a;for(a=0;a<readWrite.length;a++){createGetter(readWrite[a]);createSetter(readWrite[a])}for(a=0;a<readOnly.length;a++){createGetter(readOnly[a])}})();librevjs.Flash.isSupported=function(){return librevjs.Flash.version()[0]>=10};librevjs.Flash.canPlaySource=function(a){if(a.type in librevjs.Flash.formats||a.type in librevjs.Flash.streamingFormats){return"maybe"}};librevjs.Flash.formats={"video/flv":"FLV","video/x-flv":"FLV","video/mp4":"MP4","video/m4v":"MP4"};librevjs.Flash.streamingFormats={"rtmp/mp4":"MP4","rtmp/flv":"FLV"};librevjs.Flash.onReady=function(b){var d=librevjs.el(b);var c=d.player||d.parentNode.player,a=c.tech;d.player=c;a.el_=d;librevjs.Flash.checkReady(a)};librevjs.Flash.checkReady=function(a){if(a.el().librevjs_getProperty){a.triggerReady()}else{setTimeout(function(){librevjs.Flash.checkReady(a)},50)}};librevjs.Flash.onEvent=function(b,a){var c=librevjs.el(b)["player"];c.trigger(a)};librevjs.Flash.onError=function(a,c){var b=librevjs.el(a)["player"];b.trigger("error");librevjs.log("Flash Error",c,a)};librevjs.Flash.version=function(){var a="0,0,0";try{a=new window.ActiveXObject("ShockwaveFlash.ShockwaveFlash").GetVariable("$version").replace(/\D+/g,",").match(/^,?(.+),?$/)[1]}catch(c){try{if(navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin){a=(navigator.plugins["Shockwave Flash 2.0"]||navigator.plugins["Shockwave Flash"]).description.replace(/\D+/g,",").match(/^,?(.+),?$/)[1]}}catch(b){}}return a.split(",")};librevjs.Flash.embed=function(b,j,g,c,e){var a=librevjs.Flash.getEmbedCode(b,g,c,e),f=librevjs.createEl("div",{innerHTML:a}).childNodes[0],h=j.parentNode;j.parentNode.replaceChild(f,j);var d=h.childNodes[0];setTimeout(function(){d.style.display="block"},1000);return f};librevjs.Flash.getEmbedCode=function(e,h,g,b){var c='<object type="application/x-shockwave-flash"',a="",f="",d="";if(h){librevjs.obj.each(h,function(j,k){a+=(j+"="+k+"&")})}g=librevjs.obj.merge({movie:e,flashvars:a,allowScriptAccess:"always",allowNetworking:"all"},g);librevjs.obj.each(g,function(j,k){f+='<param name="'+j+'" value="'+k+'" />'});b=librevjs.obj.merge({data:e,width:"100%",height:"100%"},b);librevjs.obj.each(b,function(j,k){d+=(j+'="'+k+'" ')});return c+d+">"+f+"</object>"};librevjs.Flash.streamFromParts=function(a,b){return a+"&"+b};librevjs.Flash.streamToParts=function(d){var c={connection:"",stream:""};if(!d){return c}var b=d.indexOf("&");var a;if(b!==-1){a=b+1}else{b=a=d.lastIndexOf("/")+1;if(b===0){b=a=d.length}}c.connection=d.substring(0,b);c.stream=d.substring(a,d.length);return c};librevjs.Flash.isStreamingType=function(a){return a in librevjs.Flash.streamingFormats};librevjs.Flash.RTMP_RE=/^rtmp[set]?:\/\//i;librevjs.Flash.isStreamingSrc=function(a){return librevjs.Flash.RTMP_RE.test(a)};librevjs.MediaLoader=librevjs.Component.extend({init:function(e,c,f){librevjs.Component.call(this,e,c,f);if(!e.options_.sources||e.options_.sources.length===0){for(var d=0,b=e.options_.techOrder;d<b.length;d++){var g=librevjs.capitalize(b[d]),a=window.cliplibrejs[g];if(a&&a.isSupported()){e.loadTech(g);break}}}else{e.src(e.options_.sources)}}});librevjs.Player.prototype.textTracks_;librevjs.Player.prototype.textTracks=function(){this.textTracks_=this.textTracks_||[];return this.textTracks_};librevjs.Player.prototype.addTextTrack=function(f,e,g,d){var c=this.textTracks_=this.textTracks_||[];d=d||{};d.kind=f;d.label=e;d.language=g;var b=librevjs.capitalize(f||"subtitles");var a=new window.cliplibrejs[b+"Track"](this,d);c.push(a);return a};librevjs.Player.prototype.addTextTracks=function(b){var c;for(var a=0;a<b.length;a++){c=b[a];this.addTextTrack(c.kind,c.label,c.language,c)}return this};librevjs.Player.prototype.showTextTrack=function(h,f){var c=this.textTracks_,d=0,b=c.length,a,g,e;for(;d<b;d++){a=c[d];if(a.id()===h){a.show();g=a}else{if(f&&a.kind()==f&&a.mode()>0){a.disable()}}}e=(g)?g.kind():((f)?f:false);if(e){this.trigger(e+"trackchange")}return this};librevjs.TextTrack=librevjs.Component.extend({init:function(b,a){librevjs.Component.call(this,b,a);this.id_=a.id||("librevjs_"+a.kind+"_"+a.language+"_"+librevjs.guid++);this.src_=a.src;this.dflt_=a["default"]||a.dflt;this.title_=a.title;this.language_=a.srclang;this.label_=a.label;this.cues_=[];this.activeCues_=[];this.readyState_=0;this.mode_=0;this.player_.on("fullscreenchange",librevjs.bind(this,this.adjustFontSize))}});librevjs.TextTrack.prototype.kind_;librevjs.TextTrack.prototype.kind=function(){return this.kind_};librevjs.TextTrack.prototype.src_;librevjs.TextTrack.prototype.src=function(){return this.src_};librevjs.TextTrack.prototype.dflt_;librevjs.TextTrack.prototype.dflt=function(){return this.dflt_};librevjs.TextTrack.prototype.title_;librevjs.TextTrack.prototype.title=function(){return this.title_};librevjs.TextTrack.prototype.language_;librevjs.TextTrack.prototype.language=function(){return this.language_};librevjs.TextTrack.prototype.label_;librevjs.TextTrack.prototype.label=function(){return this.label_};librevjs.TextTrack.prototype.cues_;librevjs.TextTrack.prototype.cues=function(){return this.cues_};librevjs.TextTrack.prototype.activeCues_;librevjs.TextTrack.prototype.activeCues=function(){return this.activeCues_};librevjs.TextTrack.prototype.readyState_;librevjs.TextTrack.prototype.readyState=function(){return this.readyState_};librevjs.TextTrack.prototype.mode_;librevjs.TextTrack.prototype.mode=function(){return this.mode_};librevjs.TextTrack.prototype.adjustFontSize=function(){if(this.player_.isFullScreen){this.el_.style.fontSize=screen.width/this.player_.width()*2.5*100+"%"}else{this.el_.style.fontSize=""}};librevjs.TextTrack.prototype.createEl=function(){return librevjs.Component.prototype.createEl.call(this,"div",{className:"librevjs-"+this.kind_+" librevjs-text-track"})};librevjs.TextTrack.prototype.show=function(){this.activate();this.mode_=2;librevjs.Component.prototype.show.call(this)};librevjs.TextTrack.prototype.hide=function(){this.activate();this.mode_=1;librevjs.Component.prototype.hide.call(this)};librevjs.TextTrack.prototype.disable=function(){if(this.mode_==2){this.hide()}this.deactivate();this.mode_=0};librevjs.TextTrack.prototype.activate=function(){if(this.readyState_===0){this.load()}if(this.mode_===0){this.player_.on("timeupdate",librevjs.bind(this,this.update,this.id_));this.player_.on("ended",librevjs.bind(this,this.reset,this.id_));if(this.kind_==="captions"||this.kind_==="subtitles"){this.player_.getChild("textTrackDisplay").addChild(this)}}};librevjs.TextTrack.prototype.deactivate=function(){this.player_.off("timeupdate",librevjs.bind(this,this.update,this.id_));this.player_.off("ended",librevjs.bind(this,this.reset,this.id_));this.reset();this.player_.getChild("textTrackDisplay").removeChild(this)};librevjs.TextTrack.prototype.load=function(){if(this.readyState_===0){this.readyState_=1;librevjs.get(this.src_,librevjs.bind(this,this.parseCues),librevjs.bind(this,this.onError))}};librevjs.TextTrack.prototype.onError=function(a){this.error=a;this.readyState_=3;this.trigger("error")};librevjs.TextTrack.prototype.parseCues=function(b){var f,c,g,h=b.split("\n"),k="",a;for(var e=1,d=h.length;e<d;e++){k=librevjs.trim(h[e]);if(k){if(k.indexOf("-->")==-1){a=k;k=librevjs.trim(h[++e])}else{a=this.cues_.length}f={id:a,index:this.cues_.length};c=k.split(" --> ");f.startTime=this.parseCueTime(c[0]);f.endTime=this.parseCueTime(c[1]);g=[];while(h[++e]&&(k=librevjs.trim(h[e]))){g.push(k)}f.text=g.join("<br/>");this.cues_.push(f)}}this.readyState_=2;this.trigger("loaded")};librevjs.TextTrack.prototype.parseCueTime=function(b){var g=b.split(":"),f=0,c,e,a,h,d;if(g.length==3){c=g[0];e=g[1];a=g[2]}else{c=0;e=g[0];a=g[1]}a=a.split(/\s+/);h=a.splice(0,1)[0];h=h.split(/\.|,/);d=parseFloat(h[1]);h=h[0];f+=parseFloat(c)*3600;f+=parseFloat(e)*60;f+=parseFloat(h);if(d){f+=d/1000}return f};librevjs.TextTrack.prototype.update=function(){if(this.cues_.length>0){var b=this.player_.currentTime();if(this.prevChange===undefined||b<this.prevChange||this.nextChange<=b){var f=this.cues_,k=this.player_.duration(),j=0,g=false,a=[],h,e,d,c;if(b>=this.nextChange||this.nextChange===undefined){c=(this.firstActiveIndex!==undefined)?this.firstActiveIndex:0}else{g=true;c=(this.lastActiveIndex!==undefined)?this.lastActiveIndex:f.length-1}while(true){d=f[c];if(d.endTime<=b){j=Math.max(j,d.endTime);if(d.active){d.active=false}}else{if(b<d.startTime){k=Math.min(k,d.startTime);if(d.active){d.active=false}if(!g){break}}else{if(g){a.splice(0,0,d);if(e===undefined){e=c}h=c}else{a.push(d);if(h===undefined){h=c}e=c}k=Math.min(k,d.endTime);j=Math.max(j,d.startTime);d.active=true}}if(g){if(c===0){break}else{c--}}else{if(c===f.length-1){break}else{c++}}}this.activeCues_=a;this.nextChange=k;this.prevChange=j;this.firstActiveIndex=h;this.lastActiveIndex=e;this.updateDisplay();this.trigger("cuechange")}}};librevjs.TextTrack.prototype.updateDisplay=function(){var b=this.activeCues_,d="",c=0,a=b.length;for(;c<a;c++){d+='<span class="librevjs-tt-cue">'+b[c].text+"</span>"}this.el_.innerHTML=d};librevjs.TextTrack.prototype.reset=function(){this.nextChange=0;this.prevChange=this.player_.duration();this.firstActiveIndex=0;this.lastActiveIndex=0};librevjs.CaptionsTrack=librevjs.TextTrack.extend();librevjs.CaptionsTrack.prototype.kind_="captions";librevjs.SubtitlesTrack=librevjs.TextTrack.extend();librevjs.SubtitlesTrack.prototype.kind_="subtitles";librevjs.ChaptersTrack=librevjs.TextTrack.extend();librevjs.ChaptersTrack.prototype.kind_="chapters";librevjs.TextTrackDisplay=librevjs.Component.extend({init:function(b,a,c){librevjs.Component.call(this,b,a,c);if(b.options_.tracks&&b.options_.tracks.length>0){this.player_.addTextTracks(b.options_.tracks)}}});librevjs.TextTrackDisplay.prototype.createEl=function(){return librevjs.Component.prototype.createEl.call(this,"div",{className:"librevjs-text-track-display"})};librevjs.TextTrackMenuItem=librevjs.MenuItem.extend({init:function(c,b){var a=this.track=b.track;b.label=a.label();b.selected=a.dflt();librevjs.MenuItem.call(this,c,b);this.player_.on(a.kind()+"trackchange",librevjs.bind(this,this.update));if(a.dflt()){this.player_.showTextTrack(this.track.id_,this.track.kind())}}});librevjs.TextTrackMenuItem.prototype.onClick=function(){librevjs.MenuItem.prototype.onClick.call(this);this.player_.showTextTrack(this.track.id_,this.track.kind())};librevjs.TextTrackMenuItem.prototype.update=function(){this.selected(this.track.mode()==2)};librevjs.OffTextTrackMenuItem=librevjs.TextTrackMenuItem.extend({init:function(b,a){a.track={kind:function(){return a.kind},player:b,label:function(){return a.kind+" off"},dflt:function(){return false},mode:function(){return false}};librevjs.TextTrackMenuItem.call(this,b,a);this.selected(true)}});librevjs.OffTextTrackMenuItem.prototype.onClick=function(){librevjs.TextTrackMenuItem.prototype.onClick.call(this);this.player_.showTextTrack(this.track.id_,this.track.kind())};librevjs.OffTextTrackMenuItem.prototype.update=function(){var c=this.player_.textTracks(),d=0,b=c.length,a,e=true;for(;d<b;d++){a=c[d];if(a.kind()==this.track.kind()&&a.mode()==2){e=false}}this.selected(e)};librevjs.TextTrackButton=librevjs.MenuButton.extend({init:function(b,a){librevjs.MenuButton.call(this,b,a);if(this.items.length<=1){this.hide()}}});librevjs.TextTrackButton.prototype.createItems=function(){var b=[],a;b.push(new librevjs.OffTextTrackMenuItem(this.player_,{kind:this.kind_}));for(var c=0;c<this.player_.textTracks().length;c++){a=this.player_.textTracks()[c];if(a.kind()===this.kind_){b.push(new librevjs.TextTrackMenuItem(this.player_,{track:a}))}}return b};librevjs.CaptionsButton=librevjs.TextTrackButton.extend({init:function(b,a,c){librevjs.TextTrackButton.call(this,b,a,c);this.el_.setAttribute("aria-label","Captions Menu")}});librevjs.CaptionsButton.prototype.kind_="captions";librevjs.CaptionsButton.prototype.buttonText="Captions";librevjs.CaptionsButton.prototype.className="librevjs-captions-button";librevjs.SubtitlesButton=librevjs.TextTrackButton.extend({init:function(b,a,c){librevjs.TextTrackButton.call(this,b,a,c);this.el_.setAttribute("aria-label","Subtitles Menu")}});librevjs.SubtitlesButton.prototype.kind_="subtitles";librevjs.SubtitlesButton.prototype.buttonText="Subtitles";librevjs.SubtitlesButton.prototype.className="librevjs-subtitles-button";librevjs.ChaptersButton=librevjs.TextTrackButton.extend({init:function(b,a,c){librevjs.TextTrackButton.call(this,b,a,c);this.el_.setAttribute("aria-label","Chapters Menu")}});librevjs.ChaptersButton.prototype.kind_="chapters";librevjs.ChaptersButton.prototype.buttonText="Chapters";librevjs.ChaptersButton.prototype.className="librevjs-chapters-button";librevjs.ChaptersButton.prototype.createItems=function(){var b=[],a;for(var c=0;c<this.player_.textTracks().length;c++){a=this.player_.textTracks()[c];if(a.kind()===this.kind_){b.push(new librevjs.TextTrackMenuItem(this.player_,{track:a}))}}return b};librevjs.ChaptersButton.prototype.createMenu=function(){var h=this.player_.textTracks(),e=0,c=h.length,b,l,k=this.items=[];for(;e<c;e++){b=h[e];if(b.kind()==this.kind_&&b.dflt()){if(b.readyState()<2){this.chaptersTrack=b;b.on("loaded",librevjs.bind(this,this.createMenu));return}else{l=b;break}}}var a=this.menu=new librevjs.Menu(this.player_);a.el_.appendChild(librevjs.createEl("li",{className:"librevjs-menu-title",innerHTML:librevjs.capitalize(this.kind_),tabindex:-1}));if(l){var f=l.cues_,d,g;e=0;c=f.length;for(;e<c;e++){d=f[e];g=new librevjs.ChaptersTrackMenuItem(this.player_,{track:l,cue:d});k.push(g);a.addChild(g)}}if(this.items.length>0){this.show()}return a};librevjs.ChaptersTrackMenuItem=librevjs.MenuItem.extend({init:function(d,c){var b=this.track=c.track,a=this.cue=c.cue,e=d.currentTime();c.label=a.text;c.selected=(a.startTime<=e&&e<a.endTime);librevjs.MenuItem.call(this,d,c);b.on("cuechange",librevjs.bind(this,this.update))}});librevjs.ChaptersTrackMenuItem.prototype.onClick=function(){librevjs.MenuItem.prototype.onClick.call(this);this.player_.currentTime(this.cue.startTime);this.update(this.cue.startTime)};librevjs.ChaptersTrackMenuItem.prototype.update=function(){var a=this.cue,b=this.player_.currentTime();this.selected(a.startTime<=b&&b<a.endTime)};librevjs.obj.merge(librevjs.ControlBar.prototype.options_.children,{subtitlesButton:{},captionsButton:{},chaptersButton:{}});librevjs.JSON;if(typeof window.JSON!=="undefined"&&window.JSON.parse==="function"){librevjs.JSON=window.JSON}else{librevjs.JSON={};var cx=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;librevjs.JSON.parse=function(text,reviver){var j;function walk(holder,key){var k,v,value=holder[key];if(value&&typeof value==="object"){for(k in value){if(Object.prototype.hasOwnProperty.call(value,k)){v=walk(value,k);if(v!==undefined){value[k]=v}else{delete value[k]}}}}return reviver.call(holder,key,value)}text=String(text);cx.lastIndex=0;if(cx.test(text)){text=text.replace(cx,function(a){return"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)})}if(/^[\],:{}\s]*$/.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]").replace(/(?:^|:|,)(?:\s*\[)+/g,""))){j=eval("("+text+")");return typeof reviver==="function"?walk({"":j},""):j}throw new SyntaxError("JSON.parse(): invalid or malformed JSON data")}}librevjs.autoSetup=function(){var d,a,f,c=document.getElementsByTagName("video");if(c&&c.length>0){for(var e=0,b=c.length;e<b;e++){a=c[e];if(a&&a.getAttribute){if(a.player===undefined){d=a.getAttribute("data-setup");if(d!==null){d=librevjs.JSON.parse(d||"{}");f=cliplibrejs(a,d)}}}else{librevjs.autoSetupTimeout(1);break}}}else{if(!librevjs.windowLoaded){librevjs.autoSetupTimeout(1)}}};librevjs.autoSetupTimeout=function(a){setTimeout(librevjs.autoSetup,a)};if(document.readyState==="complete"){librevjs.windowLoaded=true}else{librevjs.one(window,"load",function(){librevjs.windowLoaded=true})}librevjs.autoSetupTimeout(1);librevjs.plugin=function(a,b){librevjs.Player.prototype[a]=b};
\ No newline at end of file diff --git a/librevideojs/js/mce-button.js b/librevideojs/js/mce-button.js index f823366..9f9a507 100644 --- a/librevideojs/js/mce-button.js +++ b/librevideojs/js/mce-button.js @@ -1,7 +1,6 @@ /*! * @source: here * - * * @licstart The following is the entire license notice for the * JavaScript code in this page. * @@ -44,6 +43,9 @@ var code = 'webm'; if (v.code) code = v.code; + var color = 'materialteal'; + if (v.color) + code = v.color; var content = ''; if (v.content) content = v.content; @@ -78,6 +80,27 @@ tooltip: 'Selecciona el formato del vídeo' }, { + type: 'listbox', + name: 'color', + label: 'Piel', + value: color, + 'values': [ + {text: 'mixblue', value: 'mixblue'}, + {text: 'mixgrey', value: 'mixgrey'}, + {text: 'mixpurple', value: 'mixpurple'}, + {text: 'mixred', value: 'mixred'}, + {text: 'mixteal', value: 'mixteal'}, + {text: 'mixyellow', value: 'mixyellow'}, + {text: 'materialblue', value: 'materialblue'}, + {text: 'materialgrey', value: 'materialgrey'}, + {text: 'materialpurple', value: 'materialpurple'}, + {text: 'materialred', value: 'materialred'}, + {text: 'materialteal', value: 'materialteal'}, + {text: 'materialyellow', value: 'materialyellow'}, + ], + tooltip: 'Selecciona el color' + }, + { type: 'textbox', name: 'content', label: 'Extra', @@ -95,6 +118,8 @@ shortcode_str += ' poster="' + e.data.poster + '"'; if (typeof e.data.code != 'undefined' && e.data.code.length) shortcode_str += ' code="' + e.data.code + '"'; + if (typeof e.data.color != 'undefined' && e.data.color.length) + shortcode_str += ' skin="' + e.data.color + '"'; //add panel content shortcode_str += ']' + e.data.content + '[/' + sh_tag + ']'; @@ -111,7 +136,8 @@ editor.execCommand('librevideojs_popup', '', { url : '', poster: '', - code : 'webm', + code: 'webm', + color: '', content: '', }); } diff --git a/librevideojs/js/mce-button.min.js b/librevideojs/js/mce-button.min.js deleted file mode 100644 index 2aacc8b..0000000 --- a/librevideojs/js/mce-button.min.js +++ /dev/null @@ -1,28 +0,0 @@ -/*! - * @source: here - * - * - * @licstart The following is the entire license notice for the - * JavaScript code in this page. - * - * Copyleft 2016 Jorge Maldonado Ventura - * - * The JavaScript code in this page is free software: you can - * redistribute it and/or modify it under the terms of the GNU - * General Public License (GNU GPL) as published by the Free Software - * Foundation, either version 3 of the License, or (at your option) - * any later version. The code is distributed WITHOUT ANY WARRANTY; - * without even the implied warranty of MERCHANTABILITY or FITNESS - * FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. - * - * As additional permission under GNU GPL version 3 section 7, you - * may distribute non-source (e.g., minimized or compacted) forms of - * that code without the copy of the GNU GPL normally required by - * section 4, provided you include this license notice and a URL - * through which recipients can access the Corresponding Source. - * - * @licend The above is the entire license notice - * for the JavaScript code in this page. - * - */ -(function(){tinymce.PluginManager.add("librevideojs",function(b,a){var c="librevideojs_video";b.addCommand("librevideojs_popup",function(h,d){var e="";if(d.url){e=d.url}var i="";if(d.poster){i=d.poster}var g="webm";if(d.code){g=d.code}var f="";if(d.content){f=d.content}b.windowManager.open({title:"LibreVideoJS - Inserción de vídeo",body:[{type:"textbox",name:"url",label:"URL",value:e,tooltip:"Inserta la URL del vídeo"},{type:"textbox",name:"poster",label:"Poster",value:i,tooltip:"Escribe aquí la URL de la imagen que deseas que se visualice antes de reproducir el vídeo"},{type:"listbox",name:"code",label:"Formato",value:g,values:[{text:"webm",value:"webm"},{text:"ogv",value:"ogg"},{text:"mp4",value:"mp4"}],tooltip:"Selecciona el formato del vídeo"},{type:"textbox",name:"content",label:"Extra",value:f,multiline:true,minWidth:300,minHeight:100}],onsubmit:function(k){var j="["+c;if(typeof k.data.url!="undefined"&&k.data.url.length){j+=' url="'+k.data.url+'"'}if(typeof k.data.poster!="undefined"&&k.data.poster.length){j+=' poster="'+k.data.poster+'"'}if(typeof k.data.code!="undefined"&&k.data.code.length){j+=' code="'+k.data.code+'"'}j+="]"+k.data.content+"[/"+c+"]";b.insertContent(j)}})});b.addButton("librevideojs",{icon:"librevideojs",tooltip:"LibreVideoJS",onclick:function(){b.execCommand("librevideojs_popup","",{url:"",poster:"",code:"webm",content:"",})}})})})();
\ No newline at end of file diff --git a/librevideojs/selector/video-quality-selector.css b/librevideojs/selector/video-quality-selector.css index 023ae60..112c1fb 100644 --- a/librevideojs/selector/video-quality-selector.css +++ b/librevideojs/selector/video-quality-selector.css @@ -1,3 +1,8 @@ +/*! +LibreVideoJS Selector +Version 1.4 +Escrito por Jesús Eduardo +*/ @charset "utf-8"; /* You are free to style the button however you wish. I plan to use diff --git a/librevideojs/selector/video-quality-selector.js b/librevideojs/selector/video-quality-selector.js index 9e3184f..263db14 100644 --- a/librevideojs/selector/video-quality-selector.js +++ b/librevideojs/selector/video-quality-selector.js @@ -1,11 +1,11 @@ /*! - * @source: + * @source: here! * @base: https://github.com/dominic-p/videojs-resolution-selector * * @licstart The following is the entire license notice for the * JavaScript code in this page. * - * Copyleft 2016 Jesus E. M. + * Copyleft 2016 Jesus Estupiñán Medina * * The JavaScript code in this page is free software: you can * redistribute it and/or modify it under the terms of the GNU diff --git a/librevideojs/selector/video-quality-selector.min.css b/librevideojs/selector/video-quality-selector.min.css deleted file mode 100644 index 3c092d8..0000000 --- a/librevideojs/selector/video-quality-selector.min.css +++ /dev/null @@ -1 +0,0 @@ -@charset "utf-8";.librevjs-res-button{font-weight:bold;float:right;line-height:3em}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}.librevjs-res-button .librevjs-control-text{width:auto;height:auto;clip:auto}
\ No newline at end of file diff --git a/librevideojs/selector/video-quality-selector.min.js b/librevideojs/selector/video-quality-selector.min.js deleted file mode 100644 index 19c3f47..0000000 --- a/librevideojs/selector/video-quality-selector.min.js +++ /dev/null @@ -1,28 +0,0 @@ -/*! - * @source: - * @base: https://github.com/dominic-p/videojs-resolution-selector - * - * @licstart The following is the entire license notice for the - * JavaScript code in this page. - * - * Copyleft 2016 Jesus E. M. - * - * The JavaScript code in this page is free software: you can - * redistribute it and/or modify it under the terms of the GNU - * General Public License (GNU GPL) as published by the Free Software - * Foundation, either version 3 of the License, or (at your option) - * any later version. The code is distributed WITHOUT ANY WARRANTY; - * without even the implied warranty of MERCHANTABILITY or FITNESS - * FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. - * - * As additional permission under GNU GPL version 3 section 7, you - * may distribute non-source (e.g., minimized or compacted) forms of - * that code without the copy of the GNU GPL normally required by - * section 4, provided you include this license notice and a URL - * through which recipients can access the Corresponding Source. - * - * @licend The above is the entire license notice - * for the JavaScript code in this page. - * -*/ -(function(b){var a={extend:function(c,d){for(var e in d){if(!d.hasOwnProperty(e)){continue}if(typeof d[e]=="object"&&null!==d[e]){c[e]=a.extend(c[e]||{},d[e])}else{c[e]=d[e]}}return c},res_label:function(c){return(/^\d+$/.test(c))?c+"p":c},matchResolution:function(c,d){},buildCookiesDummy:function(){return{get:function(c){return""},set:function(c,d){return false}}}};b.ResolutionMenuItem=b.MenuItem.extend({init:function(d,c){c.label=a.res_label(c.res);c.selected=(c.res.toString()===d.getCurrentRes().toString());b.MenuItem.call(this,d,c);this.resolution=c.res;this.on("click",this.onClick);d.on("changeRes",b.bind(this,function(){if(this.resolution==d.getCurrentRes()){this.selected(true)}else{this.selected(false)}}))}});b.ResolutionMenuItem.prototype.onClick=function(){var d=this.player(),g=d.el().firstChild,h=d.currentTime(),c=d.paused(),f=d.controlBar.resolutionSelector.el().firstChild.children,e=f.length;if(d.getCurrentRes()==this.resolution){return}if("none"==g.preload){g.preload="metadata"}d.src(d.availableRes[this.resolution]).one("loadedmetadata",function(){d.currentTime(h);if(!c){d.play()}});d.currentRes=this.resolution;while(e>0){e--;if("librevjs-current-res"==f[e].className){f[e].innerHTML=a.res_label(this.resolution);break}}d.trigger("changeRes")};b.ResolutionTitleMenuItem=b.MenuItem.extend({init:function(d,c){b.MenuItem.call(this,d,c);this.off("click")}});b.ResolutionSelector=b.MenuButton.extend({init:function(d,c){d.availableRes=c.available_res;b.MenuButton.call(this,d,c)}});b.ResolutionSelector.prototype.createItems=function(){var d=this.player(),c=[],e;c.push(new b.ResolutionTitleMenuItem(d,{el:b.Component.prototype.createEl("li",{className:"librevjs-menu-title librevjs-res-menu-title",innerHTML:"Calidad"})}));for(e in d.availableRes){if("length"==e){continue}c.push(new b.ResolutionMenuItem(d,{res:e}))}c.sort(function(g,f){if(typeof g.resolution=="undefined"){return -1}else{return parseInt(f.resolution)-parseInt(g.resolution)}});return c};b.plugin("resolutionSelector",function(s){if(!this.el().firstChild.canPlayType){return}var r=this,c=r.options().sources,l=c.length,k,p,g=a.extend({default_res:"",force_types:false},s||{}),m={length:0},h,d,e=(g.default_res&&typeof g.default_res=="string")?g.default_res.split(","):[],q="cliplibrejs.resolutionSelector",f=q+".res",o=(typeof(Cookies)==="function")?Cookies:a.buildCookiesDummy();while(l>0){l--;if(!c[l]["data-res"]){continue}h=c[l]["data-res"];if(typeof m[h]!=="object"){m[h]=[];m.length++}m[h].push(c[l])}if(g.force_types){for(h in m){if("length"==h){continue}l=g.force_types.length;while(l>0){l--;k=m[h].length;found_types=0;while(k>0){k--;if(g.force_types[l]===m[h][k].type){found_types++}}if(found_types<g.force_types.length){delete m[h];m.length--;break}}}}if(m.length<2){return}var n=o.get(f);if(n){e=[n].concat(e)}for(l=0;l<e.length;l++){if(m[e[l]]){r.src(m[e[l]]);r.currentRes=e[l];break}}r.getCurrentRes=function(){if(typeof r.currentRes!=="undefined"){return r.currentRes}else{try{return res=r.options().sources[0]["data-res"]}catch(i){return""}}};h=r.getCurrentRes();if(h){h=a.res_label(h)}d=new b.ResolutionSelector(r,{el:b.Component.prototype.createEl(null,{className:"librevjs-res-button librevjs-menu-button librevjs-control",innerHTML:'<div class="librevjs-control-content"><span class="librevjs-current-res">'+(h||"Quality")+"</span></div>",role:"button","aria-live":"polite",tabIndex:0}),available_res:m});this.on("changeRes",function(){o.set(f,r.getCurrentRes())});this.one("loadedmetadata",function(){var i=o.get(f);if(i){r.src(r.availableRes[i]);r.currentRes=i;r.trigger("changeRes")}});r.controlBar.resolutionSelector=r.controlBar.addChild(d)})})(cliplibrejs);
\ No newline at end of file @@ -4,7 +4,7 @@ Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=94ETC Tags: video, wpvideo, HTML5, videojs, mobile, playlists, embed video, librevideojs, player, video player, embed, lightweight, minimal, myvideo, responsive requires at least: 4.2 Tested up to: 4.7.2 -Stable tag: 1.0.3 +Stable tag: 1.1.0 License: GPLv3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html @@ -31,7 +31,7 @@ Embed video files with LibreVideoJS beautifully in WordPress, adaptable to diffe To embed a video in a new post/page use the following Shortcode: -`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvid.webm" url_calidad="1080p" code="webm"]` +`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvideo.webm" url_calidad="1080p" code="webm"]` Here, "url" is the location of the source file of WebM Video (VP8 and VP9 encoded). You need to replace the 'url' with the actual link of the video file. When you don't want to use multiple resolutions, there is no need to write 'url_calidad' to specify the video quality. @@ -47,27 +47,30 @@ The parameter url is the URL of the video and url_calidad (example: 4k, 2k, 1080 Do not forget to put code="webm" or code="ogv" depending on the format of your file. Then it is also necessary to specify with the command selector="resolution to show" the default resolution (720p, 480p, 360p, 240p, 144p), for example: -`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvid.webm" code="webm" url_calidad="1080p" selector="360p"] +`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvideo.webm" code="webm" url_calidad="1080p" selector="360p"] [calidades lvjs_calidad="720p" src_video="video720.webm" lvjs_code="webm"] [calidades lvjs_calidad="480p" src_video="video480.webm" lvjs_code="webm"] [calidades lvjs_calidad="360p" src_video="video360.webm" lvjs_code="webm"] [/librevideojs_video] ` -Solved from graphics. **Subtitles or captions** -To add subtitles use the command 'track' followed by the parameters: 'kind', 'subt', srclang','Label', 'default' (optional) from HTML. Solved from graphics. -It is recommended that the subtitles are in your web site, i.e., if your website is https://www.example.com/ subtitles should be in -https://www.example.com/subtitles/mi_subtitulo.vtt or in a similar URL. Subtitles will not be loaded if you import them from another website (http://www.another_website.com/subs/subtitles.vtt). +To add subtitles use the command 'track' followed by the parameters: 'kind', 'subt', 'srclang', 'Label', 'default' (optional) from HTML. +It is recommended that the subtitles are in your web site, i.e., if your website is 'https://www.example.com/' subtitles should be in 'https://www.example.com/subtitles/mysubtitles.vtt' or in a similar URL. Subtitles will not be loaded if you import them from another website (http://www.another_website.com/subs/subtitles.vtt). -`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvid.webm" url_calidad="1080p" code="webm" selector="360p"] +`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvideo.webm" url_calidad="1080p" code="webm" selector="360p"] [track kind="captions" subt="http://localhost/web/wp-content/uploads/subtitles/en.vtt" srclang="en" label="English"] [track kind="captions" subt="http://localhost/web/wp-content/uploads/subtitles/es.vtt" srclang="es" label="Spanish" default="true"] [track kind="captions" subt="http://localhost/web/wp-content/uploads/subtitles/pt.vtt" srclang="pt" label="Portuguese"] [/librevideojs_video] ` +**Skin** +To change the color and style of the player use 'skin', by adding the name of the style ('mixblue', 'mixgrey','mixpurple', 'mixred', 'mixteal', 'mixyellow', 'materialblue', 'materialgrey', 'materialpurple', 'materialred', 'materialteal', 'materialyellow'), example: + +`[librevideojs_video url="myvideo.webm" code="webm" skin="mixteal"][/librevideojs_video]` + **Preload** Specifies how the video must be loaded when you load the page. By default this is set to "Auto" (the video should be fully charged when the page is loaded). There area other options: @@ -75,13 +78,13 @@ Specifies how the video must be loaded when you load the page. By default this i * "metadata" - only the metadata must be loaded when you load the page. * "none" - the video should not be loaded when you load the page. -`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvid.webm" preload="metadata" url_calidad="1080p" code="webm"]` +`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvideo.webm" preload="metadata" url_calidad="1080p" code="webm"]` **Controls** Specifies that the video controls must be shown. Its default value is "true". In order to hide the controls, set this parameter to "false". -`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvid.webm" controls="false" url_calidad="1080p" code="webm"]` +`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvideo.webm" controls="false" url_calidad="1080p" code="webm"]` When you disable the controls, users will not be able to interact with your videos. It is therefore recommended that you enable the playback without using the command controls. @@ -89,25 +92,25 @@ When you disable the controls, users will not be able to interact with your vide Makes the video file to play automatically when the page is loaded. -`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvid.webm" autoplay="true" url_calidad="1080p" code="webm"]` +`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvideo.webm" autoplay="true" url_calidad="1080p" code="webm"]` **Poster** Defines the image to display as a placeholder before the video is played. -`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvid.webm" poster="http://example.com/wp-content/uploads/poster.jpg" url_calidad="1080p" code="webm"]` +`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvideo.webm" poster="http://example.com/wp-content/uploads/poster.jpg" url_calidad="1080p" code="webm"]` **Loop** Makes the video play again from the beginning when it finishes. -`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvid.webm" loop="true" url_calidad="1080p" code="webm"]` +`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvideo.webm" loop="true" url_calidad="1080p" code="webm"]` **Mute** Specifies that the audio output of the video must be muted. -`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvid.webm" muted="true" code="webm"]` +`[librevideojs_video url="http://example.com/wp-content/uploads/videos/myvideo.webm" muted="true" code="webm"]` For detailed documentation, please visit the website of the plugin [LibreVideoJS HTML5 Player](https://notabug.org/Heckyel/librevideojs-html5-player) @@ -171,8 +174,16 @@ None == Changelog == += 1.1.0 = +* Smart shortcode +* New multicolors skin-material and skin-mix +* Debugging cliplibrejs.dev.js + = 1.0.3 = * Ordering the subtitles and tracks = 1.0.2 = * First Commit + +== More infos == +For more information, you can visit the following videos [LibreVideoJS in HTML5 Player](http://www.roaming-initiative.net/mediagoblin/u/cybersy/collection/librevideojs/) for the moment in Spanish. |
