diff options
Diffstat (limited to 'librevideojs/css/material/master.css')
| -rw-r--r-- | librevideojs/css/material/master.css | 4497 |
1 files changed, 2669 insertions, 1828 deletions
diff --git a/librevideojs/css/material/master.css b/librevideojs/css/material/master.css index e700b80..2f91158 100644 --- a/librevideojs/css/material/master.css +++ b/librevideojs/css/material/master.css @@ -3,6 +3,8 @@ 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, @@ -10,2896 +12,3690 @@ replace all occurances of 'librevjs-default-skin' with a new name. Then add your 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"); + 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; + 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); + /* 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; + -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; + width: 0; + height: 0; } + .librevjs-libre-materialblue-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; + 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. + /* 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); + 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 + 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 + 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 + display: none } + .librevjs-libre-materialblue-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none + display: none } + @media \0screen { - .librevjs-libre-materialblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } + .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 + 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) + 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: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 */ + /* 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 + 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); + width: 5em; + cursor: pointer; + color: rgb(33, 150, 244); } + .librevjs-libre-materialblue-skin .librevjs-play-control:before { -content:"\e001" + content: "\e001" } + .librevjs-libre-materialblue-skin .librevjs-play-control:hover:before { -color:#2980b9; /*color de play control al pasar el cursor*/ + color: #2980b9; + /*color de play control al pasar el cursor*/ } + .librevjs-libre-materialblue-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" + 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, .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: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-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-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-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 + width: 5em; + float: right } + .librevjs-libre-materialblue-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 + width: 5em; + height: .6em; + margin: 1.1em auto 0 } + .librevjs-libre-materialblue-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em + 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-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 + width: .5em; + height: .5em } + .librevjs-libre-materialblue-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em; + 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; + 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; + 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; + 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%; + 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-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; + background: #2196F3 url() -50% 0 repeat; } + .librevjs-libre-materialblue-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) + background: #646464; + background: rgba(255, 255, 255, .4) } + .librevjs-libre-materialblue-skin .librevjs-seek-handle { -width:1.5em; -height:100% + width: 1.5em; + height: 100% } + .librevjs-libre-materialblue-skin .librevjs-seek-handle:before { -padding-top:.1em + padding-top: .1em } + /* Time Display -------------------------------------------------------------------------------- */ + .librevjs-libre-materialblue-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em } + .librevjs-libre-materialblue-skin .librevjs-current-time { -float:left + float: left } + .librevjs-libre-materialblue-skin .librevjs-duration { -float:left + float: left } + .librevjs-libre-materialblue-skin .librevjs-remaining-time { -display:none; -float:left + display: none; + float: left } + /* Fullscreen -------------------------------------------------------------------------------- */ + .librevjs-libre-materialblue-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right + width: 3.8em; + cursor: pointer; + float: right } + .librevjs-libre-materialblue-skin .librevjs-fullscreen-control:before { -content:"\e000" + 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" + 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: 50%; - font-size: 10em; - display: block; - z-index: 2; - position: absolute; - width: 1em; - height: 1em; - margin-left: -0.5em; - margin-top: -0.5em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - color: #2196F3; - line-height: normal; + left: 50%; + top: 50%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #2196F3; + line-height: normal; } + + /* Hide if controls are disabled */ + .librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; + display: none; } + + /* Hide when video starts playing */ + .librevjs-libre-materialblue-skin.librevjs-has-started .librevjs-big-play-button { -display: none; + 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; + 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: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 + 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%; + 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; + 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); + 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); + 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; + 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; + 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); + 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; + +.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; + 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" + content: "\e00c" } + + /* Captions Button */ + .librevjs-libre-materialblue-skin .librevjs-captions-button:before { -content:"\e008" + 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; + +.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 + 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 { + 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; + +.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: 50%; - } +@media screen and (max-width: 400px) { + .librevjs-libre-materialblue-skin .librevjs-big-play-button { + font-size: 5em; + top: 50%; + } } -@media screen and (max-width: 200px){ - .librevjs-libre-materialblue-skin .librevjs-big-play-button { - top: 50%; - } + +@media screen and (max-width: 200px) { + .librevjs-libre-materialblue-skin .librevjs-big-play-button { + top: 50%; + } } -@media screen and (max-width: 150px){ - .librevjs-libre-materialblue-skin .librevjs-big-play-button{ - font-size: 3em; - } + +@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; - } + +@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; + 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); + /* 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; + -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; + width: 0; + height: 0; } + .librevjs-libre-materialgrey-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; + 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. + /* 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); + 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 + 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 + 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 + display: none } + .librevjs-libre-materialgrey-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none + display: none } + @media \0screen { - .librevjs-libre-materialgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } + .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 + 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) + 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: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 */ + /* 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 + 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); + width: 5em; + cursor: pointer; + color: rgb(158, 158, 158); } + .librevjs-libre-materialgrey-skin .librevjs-play-control:before { -content:"\e001" + content: "\e001" } + .librevjs-libre-materialgrey-skin .librevjs-play-control:hover:before { -color:#7c7c7c; /*color de play control al pasar el cursor*/ + color: #7c7c7c; + /*color de play control al pasar el cursor*/ } + .librevjs-libre-materialgrey-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" + 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, .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: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-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-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-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 + width: 5em; + float: right } + .librevjs-libre-materialgrey-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 + width: 5em; + height: .6em; + margin: 1.1em auto 0 } + .librevjs-libre-materialgrey-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em + 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-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 + width: .5em; + height: .5em } + .librevjs-libre-materialgrey-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em; + 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; + 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; + 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; + 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%; + 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-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; + background: #9e9e9e url() -50% 0 repeat; } + .librevjs-libre-materialgrey-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) + background: #646464; + background: rgba(255, 255, 255, .4) } + .librevjs-libre-materialgrey-skin .librevjs-seek-handle { -width:1.5em; -height:100% + width: 1.5em; + height: 100% } + .librevjs-libre-materialgrey-skin .librevjs-seek-handle:before { -padding-top:.1em + padding-top: .1em } + + /* Time Display -------------------------------------------------------------------------------- */ + .librevjs-libre-materialgrey-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em } + .librevjs-libre-materialgrey-skin .librevjs-current-time { -float:left + float: left } + .librevjs-libre-materialgrey-skin .librevjs-duration { -float:left + float: left } + .librevjs-libre-materialgrey-skin .librevjs-remaining-time { -display:none; -float:left + display: none; + float: left } + + /* Fullscreen -------------------------------------------------------------------------------- */ + .librevjs-libre-materialgrey-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right + width: 3.8em; + cursor: pointer; + float: right } + .librevjs-libre-materialgrey-skin .librevjs-fullscreen-control:before { -content:"\e000" + 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" + 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: 50%; - font-size: 10em; - display: block; - z-index: 2; - position: absolute; - width: 1em; - height: 1em; - margin-left: -0.5em; - margin-top: -0.5em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - color: #9e9e9e; - line-height: normal; + left: 50%; + top: 50%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #9e9e9e; + line-height: normal; } + + /* Hide if controls are disabled */ + .librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; + display: none; } + + /* Hide when video starts playing */ + .librevjs-libre-materialgrey-skin.librevjs-has-started .librevjs-big-play-button { -display: none; + 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; + 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: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 + 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%; + 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; + 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); + 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); + 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; + 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; + 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); + 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; + +.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; + 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" + content: "\e00c" } + + /* Captions Button */ + .librevjs-libre-materialgrey-skin .librevjs-captions-button:before { -content:"\e008" + 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; + +.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 + 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 { + color: #737373; + background-color: inherit; } -.librevjs-libre-materialgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ -color: #9e9e9e; -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: 50%; - } +@media screen and (max-width: 400px) { + .librevjs-libre-materialgrey-skin .librevjs-big-play-button { + font-size: 5em; + top: 50%; + } } -@media screen and (max-width: 200px){ - .librevjs-libre-materialgrey-skin .librevjs-big-play-button { - top: 50%; - } + +@media screen and (max-width: 200px) { + .librevjs-libre-materialgrey-skin .librevjs-big-play-button { + top: 50%; + } } -@media screen and (max-width: 150px){ - .librevjs-libre-materialgrey-skin .librevjs-big-play-button{ - font-size: 3em; - } + +@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; - } + +@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; + 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); + /* 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; + -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; + width: 0; + height: 0; } + .librevjs-libre-materialpurple-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; + 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. + /* 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); + 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 + 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 + 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 + display: none } + .librevjs-libre-materialpurple-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none + display: none } + @media \0screen { - .librevjs-libre-materialpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } + .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 + 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) + 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: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 */ + /* 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 + 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); + width: 5em; + cursor: pointer; + color: rgb(156, 39, 176); } + .librevjs-libre-materialpurple-skin .librevjs-play-control:before { -content:"\e001" + content: "\e001" } + .librevjs-libre-materialpurple-skin .librevjs-play-control:hover:before { -color:#8e44ad; /*color de play control al pasar el cursor*/ + color: #8e44ad; + /*color de play control al pasar el cursor*/ } + .librevjs-libre-materialpurple-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" + 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, .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: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-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-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-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 + width: 5em; + float: right } + .librevjs-libre-materialpurple-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 + width: 5em; + height: .6em; + margin: 1.1em auto 0 } + .librevjs-libre-materialpurple-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em + 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-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 + width: .5em; + height: .5em } + .librevjs-libre-materialpurple-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em; + 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; + 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; + 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; + 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%; + 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-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; + background: #9c27b0 url() -50% 0 repeat; } + .librevjs-libre-materialpurple-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) + background: #646464; + background: rgba(255, 255, 255, .4) } + .librevjs-libre-materialpurple-skin .librevjs-seek-handle { -width:1.5em; -height:100% + width: 1.5em; + height: 100% } + .librevjs-libre-materialpurple-skin .librevjs-seek-handle:before { -padding-top:.1em + padding-top: .1em } + + /* Time Display -------------------------------------------------------------------------------- */ + .librevjs-libre-materialpurple-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em } + .librevjs-libre-materialpurple-skin .librevjs-current-time { -float:left + float: left } + .librevjs-libre-materialpurple-skin .librevjs-duration { -float:left + float: left } + .librevjs-libre-materialpurple-skin .librevjs-remaining-time { -display:none; -float:left + display: none; + float: left } + /* Fullscreen -------------------------------------------------------------------------------- */ + .librevjs-libre-materialpurple-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right + width: 3.8em; + cursor: pointer; + float: right } + .librevjs-libre-materialpurple-skin .librevjs-fullscreen-control:before { -content:"\e000" + 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" + 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: 50%; - font-size: 10em; - display: block; - z-index: 2; - position: absolute; - width: 1em; - height: 1em; - margin-left: -0.5em; - margin-top: -0.5em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - color: #9c27b0; - line-height: normal; + left: 50%; + top: 50%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #9c27b0; + line-height: normal; } + + /* Hide if controls are disabled */ + .librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; + display: none; } + + /* Hide when video starts playing */ + .librevjs-libre-materialpurple-skin.librevjs-has-started .librevjs-big-play-button { -display: none; + 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; + 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: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 + 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%; + 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; + 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); + 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); + 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; + 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; + 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); + 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; + +.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; + 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" + content: "\e00c" } + + /* Captions Button */ + .librevjs-libre-materialpurple-skin .librevjs-captions-button:before { -content:"\e008" + 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; + +.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 + 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 { + color: #9c27b0; + background-color: inherit; } -.librevjs-libre-materialpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ -color: #8e44ad; -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: 50%; - } +@media screen and (max-width: 400px) { + .librevjs-libre-materialpurple-skin .librevjs-big-play-button { + font-size: 5em; + top: 50%; + } } -@media screen and (max-width: 200px){ - .librevjs-libre-materialpurple-skin .librevjs-big-play-button { - top: 50%; - } + +@media screen and (max-width: 200px) { + .librevjs-libre-materialpurple-skin .librevjs-big-play-button { + top: 50%; + } } -@media screen and (max-width: 150px){ - .librevjs-libre-materialpurple-skin .librevjs-big-play-button{ - font-size: 3em; - } + +@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; - } + +@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; + 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); + /* 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; + -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; + width: 0; + height: 0; } + .librevjs-libre-materialred-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; + 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. + /* 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); + 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 + 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 + 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 + display: none } + .librevjs-libre-materialred-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none + display: none } + @media \0screen { - .librevjs-libre-materialred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } + .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 + 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) + 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: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 */ + /* 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 + 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); + width: 5em; + cursor: pointer; + color: rgb(244, 67, 54); } + .librevjs-libre-materialred-skin .librevjs-play-control:before { -content:"\e001" + content: "\e001" } + .librevjs-libre-materialred-skin .librevjs-play-control:hover:before { -color:#f22e1f; /*color de play control al pasar el cursor*/ + color: #f22e1f; + /*color de play control al pasar el cursor*/ } + .librevjs-libre-materialred-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" + 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, .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: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-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-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-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 + width: 5em; + float: right } + .librevjs-libre-materialred-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 + width: 5em; + height: .6em; + margin: 1.1em auto 0 } + .librevjs-libre-materialred-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em + 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-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 + width: .5em; + height: .5em } + .librevjs-libre-materialred-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em; + 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; + 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; + 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; + 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%; + 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-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; + background: #f44336 url() -50% 0 repeat; } + .librevjs-libre-materialred-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) + background: #646464; + background: rgba(255, 255, 255, .4) } + .librevjs-libre-materialred-skin .librevjs-seek-handle { -width:1.5em; -height:100% + width: 1.5em; + height: 100% } + .librevjs-libre-materialred-skin .librevjs-seek-handle:before { -padding-top:.1em + padding-top: .1em } + + /* Time Display -------------------------------------------------------------------------------- */ + .librevjs-libre-materialred-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em } + .librevjs-libre-materialred-skin .librevjs-current-time { -float:left + float: left } + .librevjs-libre-materialred-skin .librevjs-duration { -float:left + float: left } + .librevjs-libre-materialred-skin .librevjs-remaining-time { -display:none; -float:left + display: none; + float: left } + + /* Fullscreen -------------------------------------------------------------------------------- */ + .librevjs-libre-materialred-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right + width: 3.8em; + cursor: pointer; + float: right } + .librevjs-libre-materialred-skin .librevjs-fullscreen-control:before { -content:"\e000" + 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" + 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: 50%; - font-size: 10em; - display: block; - z-index: 2; - position: absolute; - width: 1em; - height: 1em; - margin-left: -0.5em; - margin-top: -0.5em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - color: #f44336; - line-height: normal; + left: 50%; + top: 50%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #f44336; + line-height: normal; } + + /* Hide if controls are disabled */ + .librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; + display: none; } + + /* Hide when video starts playing */ + .librevjs-libre-materialred-skin.librevjs-has-started .librevjs-big-play-button { -display: none; + 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; + 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: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 + 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%; + 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; + 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); + 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); + 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; + 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; + 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); + 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; + +.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; + 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" + content: "\e00c" } + + /* Captions Button */ + .librevjs-libre-materialred-skin .librevjs-captions-button:before { -content:"\e008" + 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; + +.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 + 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 { + 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; + +.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: 50%; - } +@media screen and (max-width: 400px) { + .librevjs-libre-materialred-skin .librevjs-big-play-button { + font-size: 5em; + top: 50%; + } } -@media screen and (max-width: 200px){ - .librevjs-libre-materialred-skin .librevjs-big-play-button { - top: 50%; - } + +@media screen and (max-width: 200px) { + .librevjs-libre-materialred-skin .librevjs-big-play-button { + top: 50%; + } } -@media screen and (max-width: 150px){ - .librevjs-libre-materialred-skin .librevjs-big-play-button{ - font-size: 3em; - } + +@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; - } + +@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; + 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); + /* 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; + -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; + width: 0; + height: 0; } + .librevjs-libre-materialteal-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; + 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. + /* 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); + 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 + 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 + 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 + display: none } + .librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none + display: none } + @media \0screen { - .librevjs-libre-materialteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } + .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 + 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) + 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: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 */ + /* 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 + 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); + width: 5em; + cursor: pointer; + color: rgb(29, 233, 182); } + .librevjs-libre-materialteal-skin .librevjs-play-control:before { -content:"\e001" + content: "\e001" } + .librevjs-libre-materialteal-skin .librevjs-play-control:hover:before { -color:#007c5d; /*color de play control al pasar el cursor*/ + color: #007c5d; + /*color de play control al pasar el cursor*/ } + .librevjs-libre-materialteal-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" + 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, .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: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-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-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-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 + width: 5em; + float: right } + .librevjs-libre-materialteal-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 + width: 5em; + height: .6em; + margin: 1.1em auto 0 } + .librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em + 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-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 + width: .5em; + height: .5em } + .librevjs-libre-materialteal-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em; + 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; + 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; + 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; + 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%; + 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-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; + background: #1de9b6 url() -50% 0 repeat; } + .librevjs-libre-materialteal-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) + background: #646464; + background: rgba(255, 255, 255, .4) } + .librevjs-libre-materialteal-skin .librevjs-seek-handle { -width:1.5em; -height:100% + width: 1.5em; + height: 100% } + .librevjs-libre-materialteal-skin .librevjs-seek-handle:before { -padding-top:.1em + padding-top: .1em } + + /* Time Display -------------------------------------------------------------------------------- */ + .librevjs-libre-materialteal-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em } + .librevjs-libre-materialteal-skin .librevjs-current-time { -float:left + float: left } + .librevjs-libre-materialteal-skin .librevjs-duration { -float:left + float: left } + .librevjs-libre-materialteal-skin .librevjs-remaining-time { -display:none; -float:left + display: none; + float: left } + /* Fullscreen -------------------------------------------------------------------------------- */ + .librevjs-libre-materialteal-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right + width: 3.8em; + cursor: pointer; + float: right } + .librevjs-libre-materialteal-skin .librevjs-fullscreen-control:before { -content:"\e000" + 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" + 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: 50%; -font-size: 10em; -display: block; -z-index: 2; -position: absolute; -width: 1em; -height: 1em; -margin-left: -0.5em; -margin-top: -0.5em; -text-align: center; -vertical-align: middle; -cursor: pointer; -opacity: 1; -color: #1abc9c; -line-height: normal; + left: 50%; + top: 50%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #1abc9c; + line-height: normal; } + + /* Hide if controls are disabled */ + .librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; + display: none; } + + /* Hide when video starts playing */ + .librevjs-libre-materialteal-skin.librevjs-has-started .librevjs-big-play-button { -display: none; + 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; + 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: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 + 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%; + 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; + 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); + 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); + 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; + 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; + 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); + 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; + +.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; + 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" + content: "\e00c" } + + /* Captions Button */ + .librevjs-libre-materialteal-skin .librevjs-captions-button:before { -content:"\e008" + 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; + +.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 + 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 { + 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; + +.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: 50%; - } +@media screen and (max-width: 400px) { + .librevjs-libre-materialteal-skin .librevjs-big-play-button { + font-size: 5em; + top: 50%; + } } -@media screen and (max-width: 200px){ - .librevjs-libre-materialteal-skin .librevjs-big-play-button { - top: 50%; - } + +@media screen and (max-width: 200px) { + .librevjs-libre-materialteal-skin .librevjs-big-play-button { + top: 50%; + } } -@media screen and (max-width: 150px){ - .librevjs-libre-materialteal-skin .librevjs-big-play-button{ - font-size: 3em; - } + +@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; - } + +@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; + 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); + /* 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; + -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; + width: 0; + height: 0; } + .librevjs-libre-materialyellow-skin .librevjs-slider-handle:before { -text-shadow: 0em 0em 1em #fff; -position: absolute; -top: 0; -left: 0; + 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. + /* 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); + 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 + 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 + 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 + display: none } + .librevjs-libre-materialyellow-skin.librevjs-using-native-controls .librevjs-control-bar { -display:none + display: none } + @media \0screen { - .librevjs-libre-materialyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content:"" - } + .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 + 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) + 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: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 */ + /* 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 + 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); + width: 5em; + cursor: pointer; + color: rgb(241, 196, 14); } + .librevjs-libre-materialyellow-skin .librevjs-play-control:before { -content:"\e001" + content: "\e001" } + .librevjs-libre-materialyellow-skin .librevjs-play-control:hover:before { -color:#f39c12; /*color de play control al pasar el cursor*/ + color: #f39c12; + /*color de play control al pasar el cursor*/ } + .librevjs-libre-materialyellow-skin.librevjs-playing .librevjs-play-control:before { -content:"\e002" + 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, .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: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-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-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-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 + width: 5em; + float: right } + .librevjs-libre-materialyellow-skin .librevjs-volume-bar { -width:5em; -height:.6em; -margin:1.1em auto 0 + width: 5em; + height: .6em; + margin: 1.1em auto 0 } + .librevjs-libre-materialyellow-skin .librevjs-volume-menu-button .librevjs-menu-content { -height:2.9em + 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-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 + width: .5em; + height: .5em } + .librevjs-libre-materialyellow-skin .librevjs-volume-handle:before { -font-size:.9em; -top:-.2em; -left:-.2em; -width:1em; -height:1em; + 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; + 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; + 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; + 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%; + 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-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; + background: #f1c40f url() -50% 0 repeat; } + .librevjs-libre-materialyellow-skin .librevjs-load-progress { -background:#646464; -background:rgba(255,255,255,.4) + background: #646464; + background: rgba(255, 255, 255, .4) } + .librevjs-libre-materialyellow-skin .librevjs-seek-handle { -width:1.5em; -height:100% + width: 1.5em; + height: 100% } + .librevjs-libre-materialyellow-skin .librevjs-seek-handle:before { -padding-top:.1em + padding-top: .1em } + + /* Time Display -------------------------------------------------------------------------------- */ + .librevjs-libre-materialyellow-skin .librevjs-time-controls { -font-size:1em; -font-weight: 700;/*mayor visibilidad*/ -line-height:3em + font-size: 1em; + font-weight: 700; + /*mayor visibilidad*/ + line-height: 3em } + .librevjs-libre-materialyellow-skin .librevjs-current-time { -float:left + float: left } + .librevjs-libre-materialyellow-skin .librevjs-duration { -float:left + float: left } + .librevjs-libre-materialyellow-skin .librevjs-remaining-time { -display:none; -float:left + display: none; + float: left } + /* Fullscreen -------------------------------------------------------------------------------- */ + .librevjs-libre-materialyellow-skin .librevjs-fullscreen-control { -width:3.8em; -cursor:pointer; -float:right + width: 3.8em; + cursor: pointer; + float: right } + .librevjs-libre-materialyellow-skin .librevjs-fullscreen-control:before { -content:"\e000" + 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" + 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: 50%; - font-size: 10em; - display: block; - z-index: 2; - position: absolute; - width: 1em; - height: 1em; - margin-left: -0.5em; - margin-top: -0.5em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - color: #f1c40f; - line-height: normal; + left: 50%; + top: 50%; + font-size: 10em; + display: block; + z-index: 2; + position: absolute; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #f1c40f; + line-height: normal; } + + /* Hide if controls are disabled */ + .librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-big-play-button { -display: none; + display: none; } + + /* Hide when video starts playing */ + .librevjs-libre-materialyellow-skin.librevjs-has-started .librevjs-big-play-button { -display: none; + 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; + 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: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 + 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%; + 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; + 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); + 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); + 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; + 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; + 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); + 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; + +.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; + 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" + content: "\e00c" } + + /* Captions Button */ + .librevjs-libre-materialyellow-skin .librevjs-captions-button:before { -content:"\e008" + 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; + +.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 + 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 { + color: #f1c40f; + background-color: inherit; } -.librevjs-libre-materialyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{ -color: #f39c12; -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: 50%; - } +@media screen and (max-width: 400px) { + .librevjs-libre-materialyellow-skin .librevjs-big-play-button { + font-size: 5em; + top: 50%; + } } -@media screen and (max-width: 200px){ - .librevjs-libre-materialyellow-skin .librevjs-big-play-button { - top: 50%; - } + +@media screen and (max-width: 200px) { + .librevjs-libre-materialyellow-skin .librevjs-big-play-button { + top: 50%; + } } -@media screen and (max-width: 150px){ - .librevjs-libre-materialyellow-skin .librevjs-big-play-button{ - font-size: 3em; - } + +@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; - } + +@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 + float: left; + line-height: 3em } + + /* Global Big-Play-Button-(play-button-at-start) */ + .librevjs-error .librevjs-big-play-button { -display: none; + 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 + 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 + 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) - } + 0% { + -moz-transform: rotate(0deg) + } + 100% { + -moz-transform: rotate(359deg) + } } + @-webkit-keyframes spin { -0% { - -webkit-transform:rotate(0deg) - } -100% { - -webkit-transform:rotate(359deg) - } + 0% { + -webkit-transform: rotate(0deg) + } + 100% { + -webkit-transform: rotate(359deg) + } } + @-o-keyframes spin { -0% { - -o-transform:rotate(0deg) - } -100% { - -o-transform:rotate(359deg) - } + 0% { + -o-transform: rotate(0deg) + } + 100% { + -o-transform: rotate(359deg) + } } + @keyframes spin { -0% { - transform:rotate(0deg) - } -100% { - transform:rotate(359deg) - } + 0% { + transform: rotate(0deg) + } + 100% { + transform: rotate(359deg) + } } + + /* REQUIRED STYLES (be careful overriding) ================================================================================ @@ -2911,165 +3707,210 @@ and sets the width and height of the video. 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 + 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% + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100% } + .cliplibre-js:-moz-full-screen { -position:absolute + position: absolute } + + /* Fullscreen Styles */ + body.librevjs-full-window { -padding:0; -margin:0; -height:100%; -overflow-y:auto; + 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; + 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 + width: 100%!important; + height: 100%!important } + .cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { -cursor:none + 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% + 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% + 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 + 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 + 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) + 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 + color: #fff } + .cliplibre-js .librevjs-captions { -color:rgb(255, 237, 0); -background-color: rgba(2, 7, 11, 0.7); + color: rgb(255, 237, 0); + background-color: rgba(2, 7, 11, 0.7); } + .librevjs-tt-cue { -display:block + display: block } + + /* Global Hide disabled or unsupported controls */ + .librevjs-lock-showing { -display:block!important; -opacity:1; -visibility:visible + 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; + 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%; + padding-top: 56.25%; } + .cliplibre-js-responsive-container.librevjs-sd { -padding-top: 75%; + padding-top: 75%; } + .cliplibre-js-responsive-container { -width: 100%; -position: relative; + 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; - } + 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; + } } |