diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/_mediaqueries.sass | 8 | ||||
| -rw-r--r-- | css/_sidebar.sass | 4 | ||||
| -rw-r--r-- | css/bootstrap.css | 2 | ||||
| -rw-r--r-- | css/estilos.css | 6 | ||||
| -rw-r--r-- | css/librevideojs/red.less | 1427 | ||||
| -rw-r--r-- | css/librevideojs/teal.css | 1128 | ||||
| -rw-r--r-- | css/librevideojs/teal.less | 1427 | ||||
| -rw-r--r-- | css/librevideojs/teal.min.css | 18 | ||||
| -rw-r--r-- | css/mix-material/master.css | 4065 | ||||
| -rw-r--r-- | css/mix-material/master.min.css | 5 |
10 files changed, 4015 insertions, 4075 deletions
diff --git a/css/_mediaqueries.sass b/css/_mediaqueries.sass index 2068605..f1d82b4 100644 --- a/css/_mediaqueries.sass +++ b/css/_mediaqueries.sass @@ -1,3 +1,11 @@ +@media screen and (max-width: 1200px) + .sidebar + .widget + &.redes-sociales-libres + a + .delta-ru + margin: 1.2em + @media screen and (max-width: 990px) .sidebar .widget diff --git a/css/_sidebar.sass b/css/_sidebar.sass index 5e9dbb3..069b612 100644 --- a/css/_sidebar.sass +++ b/css/_sidebar.sass @@ -26,7 +26,7 @@ font-size: 1.875em margin-bottom: 0.5em .delta-ru - margin: 1.875em + margin: 2.2em &.boletin .formulario background: #0e2b37 @@ -44,7 +44,7 @@ font-size: 1.125em border-radius: 3px width: 100% - border:none + border: none margin-bottom: 1.25em input[type="submit"] background: $verde diff --git a/css/bootstrap.css b/css/bootstrap.css index c306b1e..4a703ca 100644 --- a/css/bootstrap.css +++ b/css/bootstrap.css @@ -6971,5 +6971,3 @@ button.close { display: none !important; } } - -/*# sourceMappingURL=bootstrap.css.map */ diff --git a/css/estilos.css b/css/estilos.css index a26073f..4b340cf 100644 --- a/css/estilos.css +++ b/css/estilos.css @@ -337,7 +337,7 @@ header form button.btn.btn-primary { font-size: 1.875em; margin-bottom: 0.5em; } .sidebar .widget.redes-sociales-libres a .delta-ru { - margin: 1.875em; } + margin: 2.2em; } .sidebar .widget.boletin .formulario { background: #0e2b37; padding: 1.25em; @@ -354,6 +354,7 @@ header form button.btn.btn-primary { font-size: 1.125em; border-radius: 3px; width: 100%; + border: none; margin-bottom: 1.25em; } .sidebar .widget.boletin .formulario input[type="submit"] { background: #48b84d; @@ -502,6 +503,9 @@ footer .copyleft p { margin-bottom: 0.5em; } /* Mediaqueries */ +@media screen and (max-width: 1200px) { + .sidebar .widget.redes-sociales-libres a .delta-ru { + margin: 1.2em; } } @media screen and (max-width: 990px) { .sidebar .widget.redes-sociales-libres a .icono { font-size: 1em; } diff --git a/css/librevideojs/red.less b/css/librevideojs/red.less new file mode 100644 index 0000000..3a7287c --- /dev/null +++ b/css/librevideojs/red.less @@ -0,0 +1,1427 @@ +/*! +LibreVideoJS +Version 2.0 +Copyright 2017, Jesus E. +*/ + +// To customize the player skin, change the values of the variables or edit the +// CSS below. +// (This file uses LESS. Learn more at http://lesscss.org/) + +// The base font size controls the size of everything, not just text. All +// dimensions use em-based sizes so that the scale along with the font size. +// Try increasing it to 20px and see what happens. +@base-font-size: 12px; +@touch-device-font-size: 15px; + +// The main font color controls the color of the text and the icons (font icons) +@main-font-color: #ffffff; // e.g. rgb(255, 255, 255) or #ffffff +@primary-color: #f44336; +@primary-dark-color: #f12b24; +@clouds-color: #d6dbdf; + +// Menu - Subtitles/captions +@text-dark-color: #0d1f2c; +@caption-color: #ffffff; //other color #ffed00; + +// The default color of control backgrounds is mostly black but with a little +// bit of blue so it can still be seen on all black video frames, which are +// common. +@control-bg-color: #232221; // e.g. rgb(255, 255, 255) or #ffffff +@control-bg-alpha: 0.8; // 1.0 = 100% opacity, 0.0 = 0% opacity + +// The slider bar color is used for the progress bar and the volume bar +@slider-bar-color: #66A8CC; // e.g. rgb(255, 255, 255) or #ffffff +// The background of the progress bar and volume bar have a lined pattern that +// is created from a base64 encoded image. You can generate your own pattern at +// http://www.patternify.com/ then replace the value in the quotes with your own +@slider-bar-pattern: ~'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC'; +// The color of the slider background +@slider-background-color: #333333; +@slider-background-alpha: 0.9; // 1.0 = 100% opacity, 0.0 = 0% opacity + +// The "Big Play Button" is the play button that shows before the video plays. +// To center it set the align values to center and middle. The typical location +// of the button is the center, but there is trend towards moving it to a corner +// where it gets out of the way of valuable content in the poster image. +@big-play-align: left; // left, center, or right +@big-play-vertical-align: top; // top, middle, or bottom +// The button colors match the control colors by default but you can customize +// them by replace the variables (@control-bg-color) with your own color values. +@big-play-bg-color: @control-bg-color; +@big-play-bg-alpha: @control-bg-alpha; +// The font size is what makes the big play button, big. All width/height values +// use ems, which are a multiple of the font size. +// If the @base-font-size is 10px, then 3em equals 30px. +@big-play-font-size: 2em; +// Now that font size is set, the following em values will be a multiple of the +// new font size. If @big-play-font-size is 3em (30px), then setting the any of +// the following values to 2em would equal 60px. 2 * font-size +@big-play-margin: 0.5em; +//@big-play-width: 1em; +@big-play-width: 3.8em; +//@big-play-height: 1em; +@big-play-height: 2.6em; +@big-play-border-radius: 0.8em; +@big-play-border-width: 0.1em; +@big-play-border-color: #3b4249; + +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurrences of 'vjs-flat-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="video-js my-skin-name"> +*/ +.librevjs-libre-mix-skin { + color: @main-font-color; +} + +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons. +*/ +@lvjs-font-path: '../../fonts'; +@font-face{ + font-family: 'LibreVideoJS'; + src: url('@{lvjs-font-path}/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'), + url('@{lvjs-font-path}/libre-material/libre-icons.woff') format('woff'), + url('@{lvjs-font-path}/libre-material/libre-icons.ttf') format('truetype'), + url('@{lvjs-font-path}/libre-material/libre-icons.svg#icomoon') format('svg'); + + font-weight: normal; + font-style: normal; +} + +// Icon font character values +@play-icon: "\e001"; +@pause-icon: "\e002"; +@volume-muted-icon: "\e003"; +@volume-low-icon: "\e004"; +@volume-mid-icon: "\e005"; +@volume-high-icon: "\e006"; +@play-big-icon: "\e007"; +@fullscreen-enter-icon: "\e000"; +@fullscreen-exit-icon: "\e00b"; +@square-icon: "\e009"; +@spinner-icon: "\e00a"; +@spinner2-icon: "\e00d"; +@spinner3-icon: "\e01e"; +@spinner4-icon: "\e01f"; +@subtitles-icon: "\e00c"; +@captions-icon: "\e008"; +@chapters-icon: "\e00c"; +@share-icon: "\e00e"; +@cog-icon: "\e600"; + +/* Base UI Component Classes +-------------------------------------------------------------------------------- +*/ + +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mix-skin .librevjs-slider { + /* Replace browser focus highlight with handle highlight */// + outline: 0; + position: relative; + cursor: pointer; + padding: 0; + + .background-color-with-alpha(@slider-background-color, @slider-background-alpha); +} + +.librevjs-libre-mix-skin .librevjs-slider:focus { + .box-shadow(0 0 2em #fff); +} + +.librevjs-libre-mix-skin .librevjs-slider-handle { + position: absolute; + /* Needed for IE6 */// + left: 0; + top: 0; +} + +.librevjs-libre-mix-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + + position: absolute; + top: 0; + left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mix-skin .librevjs-control-bar { + /* Start hidden */// + display: none; + position: absolute; + /* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */// + bottom: 0; + /* Use left/right to stretch to 100% width of player div */// + left: 0; + right: 0; + /* Height includes any margin you want above or below control items */// + height: 3.0em; + + .background-color-with-alpha(@control-bg-color, @control-bg-alpha); +} + +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mix-skin.librevjs-has-started .librevjs-control-bar { + display: block; + /* Visibility needed to make sure things hide in older browsers too. */ + visibility: visible; + opacity: 1; + + @trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma + .transition(@trans); +} + +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mix-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { + display: block; + visibility: hidden; + opacity: 0; + + @trans: visibility 1.0s, opacity 1.0s; + .transition(@trans); +} + +.librevjs-libre-mix-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none; +} + +.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none; +} + +/* The control bar shouldn't show after an error */ +.librevjs-libre-mix-skin.librevjs-error .librevjs-control-bar { + display: none; +} + +/* Don't hide the control bar if it's audio */ +.librevjs-audio.librevjs-libre-mix-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { + opacity: 1; + visibility: visible; +} + +/* IE8 is flakey with fonts, and you have to change the actual content to force +fonts to show/hide properly. + - "\9" IE8 hack didn't work for this + - Found in windows XP (Propietary Software) IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9 +*/ +@ie8screen: ~"\0screen"; +.librevjs-libre-mix-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + @media @ie8screen { content: ""; } +} + +/* General styles for individual controls. */ +.librevjs-libre-mix-skin .librevjs-control { + outline: none; + position: relative; + float: left; + text-align: center; + margin: 0; + padding: 0; + height: 3.0em; + width: 4em; +} + +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mix-skin .librevjs-control:before { + font-family: LibreVideoJS; + font-size: 1.5em; + line-height: 2; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + text-shadow: 1px 1px 1px rgba(0,0,0,0.5); +} + +/* Replacement for focus outline */ +.librevjs-libre-mix-skin .librevjs-control:hover:before { + color: @primary-color; +} + +.librevjs-libre-mix-skin .librevjs-control:focus { + /* outline: 0; */// + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} + +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mix-skin .librevjs-control-text { + .hide-visually; +} + +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: @primary-color; +} +.librevjs-libre-mix-skin .librevjs-play-control:before { + content: @play-icon; +} +.librevjs-libre-mix-skin .librevjs-play-control:hover:before { + color: @primary-dark-color; +} +.librevjs-libre-mix-skin.librevjs-playing .librevjs-play-control:before { + content: @pause-icon; +} + +/* Playback toggle +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-playback-rate .librevjs-playback-rate-value { + 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, 0.5); +} + +.librevjs-libre-mix-skin .librevjs-playback-rate.librevjs-menu-button .librevjs-menu .librevjs-menu-content { + width: 4em; + left: -2em; + list-style: none; +} + +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mix-skin .librevjs-mute-control, +.librevjs-libre-mix-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right; +} +.librevjs-libre-mix-skin .librevjs-mute-control:before, +.librevjs-libre-mix-skin .librevjs-volume-menu-button:before { + content: @volume-high-icon; +} +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-0:before, +.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: @volume-muted-icon; +} +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-1:before, +.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: @volume-low-icon; +} +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-2:before, +.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: @volume-mid-icon; +} + +.librevjs-libre-mix-skin .librevjs-volume-control { + width: 5em; + float: right; +} +.librevjs-libre-mix-skin .librevjs-volume-bar { + width: 5em; + height: 0.6em; + margin: 1.1em auto 0; +} + +.librevjs-libre-mix-skin .librevjs-volume-level { + position: absolute; + top: 0; + left: 0; + height: 0.6em; + /* assuming volume starts at 1.0 */ + width: 100%; + + background: @primary-color; +} +.librevjs-libre-mix-skin .librevjs-volume-bar .librevjs-volume-handle { + width: 0.5em; + height: 0.5em; + /* Assumes volume starts at 1.0. If you change the size of the + handle relative to the volume bar, you'll need to update this value + too. */ + left: 4.5em; +} + +.librevjs-libre-mix-skin .librevjs-volume-handle:before { + font-size: 0.9em; + top: -0.2em; + left: -0.2em; + + width: 1em; + height: 1em; +} + +/* The volume menu button is like menu buttons (captions/subtitles) but works + a little differently. It needs to be possible to tab to the volume slider + without hitting space bar on the menu button. To do this we're not using + display:none to hide the slider menu by default, and instead setting the + width and height to zero. */ +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu { + display: block; + width: 0; + height: 0; + border-top-color: transparent; +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + height: 0; + width: 0; + transform: rotate(-90deg); +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-menu-button .librevjs-menu .librevjs-menu-content { + margin-bottom: 3.2em; +} + +/*.librevjs-libre-mix-skin .librevjs-volume-menu-button:hover .librevjs-menu, +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu.librevjs-lock-showing { + border-top-color: rgba(7, 40, 50, 0.5); +}*/ + +.librevjs-libre-mix-skin .librevjs-volume-menu-button:hover .librevjs-menu .librevjs-menu-content, +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu.librevjs-lock-showing .librevjs-menu-content { + height: 2.9em; + width: 10em; +} + +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-progress-control { + position: absolute; + left: 0; + right: 0; + width: auto; + font-size: 0.3em; + height: 1em; + /* Set above the rest of the controls. */// + top: -1em; + + /* Shrink the bar slower than it grows. */// + .transition(all 0.4s); +} + +/* On hover, make the progress bar grow to something that's more clickable. + This simply changes the overall font for the progress bar, and this + updates both the em-based widths and heights, as wells as the icon font */ +.librevjs-libre-mix-skin:hover .librevjs-progress-control { + font-size: 1em; + + /* Even though we're not changing the top/height, we need to include them in + the transition so they're handled correctly. */ + .transition(all 0.2s); +} + +/* Box containing play and load progresses. Also acts as seek scrubber. */ +.librevjs-libre-mix-skin .librevjs-progress-holder { + height: 100%; +} + +/* Progress Bars */ +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-play-progress, +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress, +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress div { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + /* updated by javascript during playback */ + width: 0; + /* Needed for IE6 */// + left: 0; + top: 0; +} + +.librevjs-libre-mix-skin .librevjs-play-progress { + /* Using a data URI to create the white diagonal lines with a transparent + background. Surprisingly works in IE8. + Changing the first color value will change the bar color. + Also using a paralax effect to make the lines move backwards. + The -50% left position makes that happen. + */ + background: @primary-color /* IE8- Fallback */; +} +.librevjs-libre-mix-skin .librevjs-load-progress { + background: rgb(red(@clouds-color), green(@clouds-color), blue(@clouds-color)) /* IE8- Fallback */; + background: rgba(red(@clouds-color), green(@clouds-color), blue(@clouds-color), 0.6); +} + +/* there are child elements of the load progress bar that represent the + specific time ranges that have been buffered */ +.librevjs-libre-mix-skin .librevjs-load-progress div { + background: rgb(120, 120, 120) /* IE8- Fallback */; + background: rgba(255, 255, 255, 0.1); +} + +.librevjs-libre-mix-skin .librevjs-seek-handle { + width: 2em; + height: 2em; + border-radius: 1em; + top: -0.5em; + background-color: @primary-dark-color; + opacity: 0; + transition: opacity .4s ease-in-out; +} + +/*.librevjs-libre-mix-skin .librevjs-seek-handle:before { + padding-top: 0.1em; +}*/ + +.librevjs-libre-mix-skin .librevjs-progress-control:hover .librevjs-slider-handle { + opacity: 1; + transition: opacity .4s ease-in-out; +} + +/* Live Mode +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin.librevjs-live .librevjs-time-controls, +.librevjs-libre-mix-skin.librevjs-live .librevjs-time-divider, +.librevjs-libre-mix-skin.librevjs-live .librevjs-progress-control { + display: none; +} +.librevjs-libre-mix-skin.librevjs-live .librevjs-live-display { + display: block; +} + +/* Live Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-live-display { + display: none; + font-size: 1em; + line-height: 3em; +} + +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-time-controls { + font-size: 1.083em; + font-weight: bold; + color: #d6dbdf; + /* Align vertically by making the line height the same as the control bar */// + line-height: 3em; + width: 3em; +} +.librevjs-libre-mix-skin .librevjs-current-time { float: left; } +.librevjs-libre-mix-skin .librevjs-current-time-display { float: right; } +.librevjs-libre-mix-skin .librevjs-duration, +.librevjs-libre-mix-skin .librevjs-duration .librevjs-duration-display { float: left; } +/* Remaining time is in the HTML, but not included in default design */ +.librevjs-libre-mix-skin .librevjs-remaining-time { display: none; float: left; } +.librevjs-time-divider { + float: left; + line-height: 3em; + font-size: 1.083em; + font-weight: bold; + width: 1em; + text-align: center; +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right; +} +.librevjs-libre-mix-skin .librevjs-fullscreen-control:before { + content: @fullscreen-enter-icon; +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mix-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content: @fullscreen-exit-icon; +} + +/* 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. http://designer.videojs.com/ +*/ +.librevjs-libre-mix-skin .librevjs-big-play-button { + left: 50%; + top: 50%; + font-size: @big-play-font-size; + display: block; + z-index: 2; + position: absolute; + width: @big-play-width; + height: @big-play-height; + margin-left: -@big-play-width/2; + margin-top: -@big-play-width/2.5; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: @main-font-color; + //Sombras + .background-color-with-alpha(@slider-background-color, @slider-background-alpha); + @border: .4em; + .border-radius(@border); + @trans: all .4s; // Var needed because of comma + .transition(@trans); +} + +/* Hide if controls are disabled */ +.librevjs-libre-mix-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mix-skin.librevjs-has-started .librevjs-big-play-button { + display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-mix-skin:hover .librevjs-big-play-button, +.librevjs-libre-mix-skin .librevjs-big-play-button:focus { + color: @main-font-color; + background-color: @primary-color; +} + +.librevjs-libre-mix-skin .librevjs-big-play-button:before { + content: @play-icon; + 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 */; + + /*Shadow*/ + text-shadow: 0.05em 0.05em 0.1em #000; + line-height: 2.6em; + + position: absolute; + left: 0; + width: 100%; + height: 100%; +} + +.librevjs-error .librevjs-big-play-button { + display: none; +} + +/* Error Display +-------------------------------------------------------------------------------- +*/ + +.librevjs-error-display { + display: none; +} + +.librevjs-error .librevjs-error-display { + display: block; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; +} + +.librevjs-error .librevjs-error-display:before { + content: 'X'; + font-family: Arial; + font-size: 4em; + color: #666666; + /* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 1; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + vertical-align: middle; + + position: absolute; + left: 0; + top: 50%; + margin-top: -0.5em; + width: 100%; +} + +.librevjs-error-display div { + position: absolute; + bottom: 1em; + right: 0; + left: 0; + + font-size: 1.4em; + text-align: center; + padding: 3px; + background: rgb(0, 0, 0); // fallback to just black + background: rgba(0,0,0,0.5); // Normally show black at 50% opacity +} + +.librevjs-error-display a, .librevjs-error-display a:visited { + color: #F4A460; +} + +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ + +.librevjs-loading-spinner { + /* Should be hidden by default */// + display: none; + + position: absolute; + top: 50%; + left: 50%; + + font-size: 4em; + line-height: 1; + + width: 1em; + height: 1em; + + margin-left: -0.5em; + margin-top: -0.5em; + + opacity: 0.75; + .animation(spin 1.5s infinite linear); +} + +/* Show the spinner when waiting for data and seeking to a new time */ +.librevjs-waiting .librevjs-loading-spinner, +.librevjs-seeking .librevjs-loading-spinner { + display: block; + + /* only animate when showing because it can be processor heavy */// + .animation(spin 1.5s infinite linear); +} + +/* Errors are unrecoverable without user interaction so hide the spinner */ +.librevjs-error .librevjs-loading-spinner { + display: none; + + /* ensure animation doesn't continue while hidden */// + .animation(none); +} + +.librevjs-libre-mix-skin .librevjs-loading-spinner:before { + content: @spinner3-icon; + font-family: LibreVideoJS; + + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + text-align: center; + text-shadow: 0em 0em 0.1em #000; +} + +@-moz-keyframes spin { + 0% { -moz-transform: rotate(0deg); } + 100% { -moz-transform: rotate(359deg); } +} +@-webkit-keyframes spin { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(359deg); } +} +@-o-keyframes spin { + 0% { -o-transform: rotate(0deg); } + 100% { -o-transform: rotate(359deg); } +} +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(359deg); } +} + +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-menu-button { + float: right; + cursor: pointer; +} + +.librevjs-libre-mix-skin .librevjs-menu { + display: none; + position: absolute; + bottom: 0; + left: 0em; /* (Width of vjs-menu - width of button) / 2 */ + width: 0em; + height: 0em; + margin-bottom: 3em; + + border-left: 2em solid transparent; + border-right: 2em solid transparent; + + border-top: 1.55em solid rgb(0, 0, 0); /* Same width top as ul bottom */ + border-top-color: rgba(0, 0, 0, 0.4); /* Same as ul background */ +} + +/* Color menu (captions/subtitles)*/ +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected { + color: @text-dark-color; + background-color: @primary-color; +} + +.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus, +.librevjs-libre-mix-skin .librevjs-menu-button ul li:hover, +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus, +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: @primary-dark-color; + background-color: @primary-color; +} + +/*Title Resolution | subtitles and Caption*/ + +.librevjs-libre-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: @primary-color; + background-color: inherit; +} + +.librevjs-libre-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover { + color: @primary-color; + background-color: inherit; +} + +/* Button Pop-up Menu */ +.librevjs-libre-mix-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { + display: block; + padding: 0; margin: 0; + position: absolute; + width: 10em; + bottom: 1.5em; /* Same bottom as vjs-menu border-top */ + max-height: 15em; + overflow: auto; + + left: -5em; /* Width of menu - width of button / 2 */ + + background-color: @control-bg-color; + background-color: rgba(0, 0, 0, 0.4); + .box-shadow(-0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2)); +} + +/* +.librevjs-libre-mix-skin .librevjs-menu-button:hover .librevjs-control-content .librevjs-menu, +.librevjs-libre-mix-skin .librevjs-control-content .librevjs-menu.librevjs-lock-showing +*/ + +.librevjs-libre-mix-skin .librevjs-menu-button:hover .librevjs-menu { + display: block; +} +/* prevent menus from opening while scrubbing (FF, IE) */ +.librevjs-libre-mix-skin.librevjs-scrubbing .librevjs-menu-button:hover .librevjs-control-content .librevjs-menu { + display: none; +} +.librevjs-libre-mix-skin .librevjs-menu-button ul li { + list-style: none; + margin: 0; + padding: 0.3em 0 0.3em 0; + line-height: 1.4em; + font-size: 1.2em; + text-align: center; + text-transform: lowercase; +} +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected { + background-color: @primary-color; +} +.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus, +.librevjs-libre-mix-skin .librevjs-menu-button ul li:hover, +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus, +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: @text-dark-color; + background-color: @primary-color; + + /*.background-color-with-alpha(rgb(255, 255, 255), 0.75);*/ + /*.box-shadow(0 0 1em rgba(255, 255, 255, 1));*/ +} +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-menu-title { + text-align: center; + text-transform: uppercase; + font-size: 1em; + line-height: 2em; + padding: 0; + margin: 0 0 0.3em 0; + font-weight: bold; + cursor: default; +} + +/* Subtitles Button */ +.librevjs-libre-mix-skin .librevjs-subtitles-button:before { + content: @subtitles-icon; +} + +/* Captions Button */ +.librevjs-libre-mix-skin .librevjs-captions-button:before { + content: @captions-icon; +} + +/* Chapters Button */ +.librevjs-libre-mix-skin .librevjs-chapters-button:before { + content: @chapters-icon; +} + +.librevjs-libre-mix-skin .librevjs-chapters-button.librevjs-menu-button .librevjs-menu .librevjs-menu-content { + width: 24em; + left: -12em; +} + +/* Replacement for focus outline */ +.librevjs-libre-mix-skin .librevjs-captions-button:focus .librevjs-control-content:before, +.librevjs-libre-mix-skin .librevjs-captions-button:hover .librevjs-control-content:before { + .box-shadow(0 0 1em rgba(255, 255, 255, 1)); +} + +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (Flash or HTML5) and controls, +and sets the width and height of the video. + +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.cliplibre-js { + background-color: #000; + position: relative; + padding: 0; + /* Start with 10px for base font size so other dimensions can be em based and + easily calculable. */ + font-size: @base-font-size; + /* Allow poster to be vertically aligned. */ + vertical-align: middle; + /* display: table-cell; */ /*This works in Safari but not Firefox.*/ + + /* Provide some basic defaults for fonts */ + font-weight: normal; + font-style: normal; + /* Avoiding helvetica: issue #376 */ + font-family: Arial, Helvetica, sans-serif; + + /* Turn off user selection (text highlighting) by default. + The majority of player components will not be text blocks. + Text areas will need to turn user selection back on. */ + .user-select(none); +} + +/* Playback technology elements expand to the width/height of the containing div + <video> or <object> */ +.cliplibre-js .librevjs-tech { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when + checking fullScreenEnabled. */ +.cliplibre-js:-moz-full-screen { position: absolute; } + +/* Fullscreen Styles */ +body.librevjs-full-window { + padding: 0; + margin: 0; + height: 100%; + /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */// + 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; + /* IE6 full-window (underscore hack) */// + _position: absolute; +} +.cliplibre-js:-webkit-full-screen { + width: 100% !important; + height: 100% !important; +} +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { + cursor: none; +} + +/* Poster Styles */ +.librevjs-poster { + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; + background-color: #000000; + cursor: pointer; + margin: 0; + padding: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} +.librevjs-poster img { + display: block; + margin: 0 auto; + max-height: 100%; + padding: 0; + width: 100%; +} + +/* Hide the poster after the video has started playing */ +.cliplibre-js.librevjs-has-started .librevjs-poster { + display: none; +} + +/* Don't hide the poster if we're playing audio */ +.cliplibre-js.librevjs-audio.librevjs-has-started .librevjs-poster { + display: block; +} + +/* Hide the poster when controls are disabled because it's clickable + and the native poster can take over */ +.cliplibre-js.librevjs-controls-disabled .librevjs-poster { + display: none; +} + +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { + display: none; +} + +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { + text-align: center; + position: absolute; + bottom: 4em; + left: 1em; + right: 1em; +} + +.cliplibre-js .librevjs-subtitles { + color: #fff +} + +.cliplibre-js .librevjs-captions { + color: @caption-color; + background-color: rgba(2, 7, 11, 0.7); +} + + +/* Captions Settings Dialog */ +.librevjs-caption-settings { + position: relative; + top: 1em; + background-color: #000; + opacity: 0.75; + color: #FFF; + margin: 0 auto; + padding: 0.5em; + height: 15em; + font-family: Arial, Helvetica, sans-serif; + font-size: 12px; + width: 40em; +} + +.librevjs-caption-settings .librevjs-tracksettings { + top: 0; + bottom: 2em; + left: 0; + right: 0; + position: absolute; + overflow: auto; +} + +.librevjs-caption-settings .librevjs-tracksettings-colors, +.librevjs-caption-settings .librevjs-tracksettings-font { + float: left; +} +.librevjs-caption-settings .librevjs-tracksettings-colors:after, +.librevjs-caption-settings .librevjs-tracksettings-font:after, +.librevjs-caption-settings .librevjs-tracksettings-controls:after { + clear: both; +} + +.librevjs-caption-settings .librevjs-tracksettings-controls { + position: absolute; + bottom: 1em; + right: 1em; +} + +.librevjs-caption-settings .librevjs-tracksetting { + margin: 5px; + padding: 3px; + min-height: 40px; +} +.librevjs-caption-settings .librevjs-tracksetting label { + display: block; + width: 100px; + margin-bottom: 5px; +} + +.librevjs-caption-settings .librevjs-tracksetting span { + display: inline; + margin-left: 5px; +} + +.librevjs-caption-settings .librevjs-tracksetting > div { + margin-bottom: 5px; + min-height: 20px; +} + +.librevjs-caption-settings .librevjs-tracksetting > div:last-child { + margin-bottom: 0; + padding-bottom: 0; + min-height: 0; +} + +.librevjs-caption-settings label > input { + margin-right: 10px; +} + +.librevjs-caption-settings input[type="button"] { + width: 40px; + height: 40px; +} + +/* Hide disabled or unsupported controls */ +.librevjs-hidden { display: none !important; } + +.librevjs-lock-showing { + display: block !important; + opacity: 1; + visibility: visible; +} + +/* In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register. + The .cliplibre-js classname on the video tag also isn't considered. + This optional paragraph inside the video tag can provide a message to users + about what's required to play video. */ +.librevjs-no-js { + padding: 2em; + color: #ccc; + background-color: #333; + font-size: 1.8em; + font-family: Arial, sans-serif; + text-align: center; + width: 30em; + height: 15em; + margin: 0 auto; +} + +.librevjs-no-js a, .librevjs-no-js a:visited { + color: #F4A460; +} + +/*Responsive web desing + The dates are calculates for display +*/ + +.cliplibre-js-responsive-container.librevjs-hd { + padding-top: 56.25%; +} + +.cliplibre-js-responsive-container.librevjs-sd { + padding-top: 75%; +} + +.cliplibre-js-responsive-container { + width: 100%; + position: relative; +} + +.cliplibre-js-responsive-container .cliplibre-js { + height: 100% !important; + width: 100% !important; + position: absolute; + top: 0; + left: 0; +} + +@media screen and (max-width: 800px) { + .cliplibre-js .librevjs-text-track { + font-size: 1.5em; + margin-bottom: -0.2em; + line-height: 1.5; + } +} + +@media screen and (max-width: 600px) { + .cliplibre-js .librevjs-text-track { + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 2em; + } +} + +@media screen and (max-width: 413px) { + .cliplibre-js { + font-size: 8px; + } +} + +@media screen and (max-width: 400px) { + .cliplibre-js .librevjs-text-track { + font-size: 1em; + } + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 2em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 1em; + } +} + +@media screen and (max-width: 335px) { + .cliplibre-js { + font-size: 6px; + } +} + +@media screen and (max-width: 150px) { + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 1.8em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 1.4em; + } +} + +/* End Responsive*/ + +// MIXINS +// ============================================================================= +// Mixins are a LESS feature and are used to add vendor prefixes to CSS rules +// when needed. + +// https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow +.box-shadow (@string: 0 0 1em rgba(0, 0, 0, 0.25)) { + /* box-shadow */// + -webkit-box-shadow: @string; + -moz-box-shadow: @string; + box-shadow: @string; +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius +.border-radius (@string: 5px) { + /* border-radius */// + -webkit-border-radius: @string; + -moz-border-radius: @string; + border-radius: @string; +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/transition +.transition (@string: all 1s linear) { + /* transition */// + -webkit-transition: @string; + -moz-transition: @string; + -o-transition: @string; + transition: @string; +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/transition +.transition-delay (@string: 1s) { + /* transition-delay */// + -webkit-transition-delay: @string; + -moz-transition-delay: @string; + -o-transition-delay: @string; + transition-delay: @string; +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/animation +.animation (@string: spin 1s infinite linear) { + /* animation */// + -webkit-animation: @string; + -moz-animation: @string; + -o-animation: @string; + animation: @string; +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/transform +.transform (@string: rotate(-45deg)) { + /* transform */// + -webkit-transform: @string; + -moz-transform: @string; + -ms-transform: @string; + -o-transform: @string; + transform: @string; +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/user-select +.user-select (@string: none) { + /* user-select */// + -webkit-user-select: @string; + -moz-user-select: @string; + -ms-user-select: @string; + user-select: @string; +} + +// Hide something visually but keep available for screen readers. +// http://h5bp.com/v +.hide-visually () { + /* hide-visually */// + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +// Align an object with absolute positioning +// Used to align the Big Play Button in the corners or center +.absolute-align (@align, @margin, @length) when (@align = top) { + top: @margin; +} +.absolute-align (@align, @margin, @length) when (@align = bottom) { + bottom: @margin; +} +.absolute-align (@align, @margin, @length) when (@align = left) { + left: @margin; +} +.absolute-align (@align, @margin, @length) when (@align = right) { + right: @margin; +} +.absolute-align (@align, @margin, @length) when (@align = center) { + /* Center it horizontally */// + left: 50%; + margin-left: (-(@length/2)); + // margin-left: ((@length*-1)/2); +} +.absolute-align (@align, @margin, @length) when (@align = middle) { + /* Center it vertically */// + top: 50%; + margin-top: (-(@length/2)); + // margin-top: ((@length*-1)/2); +} + +// http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text +.background-color-with-alpha (@color, @alpha) { + @rgba: rgba(red(@color), green(@color), blue(@color), @alpha); + /* background-color-with-alpha */// + background-color: @color; + background-color: @rgba; + // No longer using MS filters because they break border radius in IE9 + // @argb: argb(@rgba); + // filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})"; + // -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})"; +} + +.border-color-with-alpha (@color, @alpha) { + @rgba: rgba(red(@color), green(@color), blue(@color), @alpha); + /* border-color-with-alpha */// + border-color: @color; + border-color: @rgba; +} + +// Autonomes styles for quality selector and progressTips + +/* Quality Selector Universal +------------------------------------------------------------------------------*/ +/* Position the button */ +.librevjs-res-button { + font-weight: bold; + float: right; + line-height: 3em; +} + +/* Don't show hover effects on title */ +ul li.librevjs-menu-title.librevjs-res-menu-title:hover { + cursor: default; + background-color: transparent; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Needed to keep text visible in LibreVideoJS */ +.librevjs-res-button .librevjs-control-text { + width: auto; + height: auto; + clip: auto; +} + +/* ProgressTips Universal +------------------------------------------------------------------------------*/ +.librevjs-progress-tip { + visibility: hidden; + display: block; + opacity: 0.8; + padding: 5px; + font-size: 10px; + position: absolute; + z-index: 100000; +} + +.librevjs-progress-tip-arrow { + background: url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) no-repeat top left; + bottom: 0; + left: 50%; + margin-left: -4px; + background-position: bottom left; + position: absolute; + width: 9px; + height: 5px; +} + +.librevjs-progress-tip-inner { + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + padding: 5px 8px 4px 8px; + background-color: black; + color: white; + max-width: 200px; + text-align: center; +} + +// NOTES ON LESS (tracking learnings so we don't forget) +// ============================================================================= +// * We want this file to continue to be accessible by people who don't know +// LESS but know CSS. This means finding the balance between using the most +// valuable LESS features (e.g. variables) and keeping it looking like CSS. +// So it's best to avoid advanced LESS features like conditional statements. +// (we're using one for the big play button position because that's a hot +// topic) +// +// * We care about the readability of the CSS output of LESS, which means we +// have to be careful about what features of LESS we use. (if you're building +// your own skin this may not apply) +// 1. Comments inside of rules (strangely) have an extra line added after +// them in the CSS output. To avoid this we can add a LESS comment after +// the CSS comment. +// /* comment */// +// +// 2. In a rule with nested rules, any comments outside of a rule are moved +// to the top of the parent rule. i.e. it might look like: +// /* title of rule 1 */ +// /* title of rule 2 */ +// .rule1 {} +// .rule2 {} +// This is why we aren't using nested rules inside of the +// librevjs-default-skin class. + +/* ----------------------------------------------------------------------------- +The original source of this file lives at +https://github.com/videojs/video.js/blob/master/src/css/video-js.less */ diff --git a/css/librevideojs/teal.css b/css/librevideojs/teal.css new file mode 100644 index 0000000..f6fc653 --- /dev/null +++ b/css/librevideojs/teal.css @@ -0,0 +1,1128 @@ +/*! +LibreVideoJS +Version 2.0 +Copyright 2017, Jesus E. +*/ +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurrences of 'vjs-flat-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="video-js my-skin-name"> +*/ +.librevjs-libre-mix-skin { + color: #ffffff; +} +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons. +*/ +@font-face { + font-family: 'LibreVideoJS'; + src: url('../../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'), 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#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} +/* Base UI Component Classes +-------------------------------------------------------------------------------- +*/ +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mix-skin .librevjs-slider { + /* Replace browser focus highlight with handle highlight */ + outline: 0; + position: relative; + cursor: pointer; + padding: 0; + /* background-color-with-alpha */ + background-color: #333333; + background-color: rgba(51, 51, 51, 0.9); +} +.librevjs-libre-mix-skin .librevjs-slider:focus { + /* box-shadow */ + -webkit-box-shadow: 0 0 2em #fff; + -moz-box-shadow: 0 0 2em #fff; + box-shadow: 0 0 2em #fff; +} +.librevjs-libre-mix-skin .librevjs-slider-handle { + position: absolute; + /* Needed for IE6 */ + left: 0; + top: 0; +} +.librevjs-libre-mix-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + position: absolute; + top: 0; + left: 0; +} +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mix-skin .librevjs-control-bar { + /* Start hidden */ + display: none; + position: absolute; + /* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */ + bottom: 0; + /* Use left/right to stretch to 100% width of player div */ + left: 0; + right: 0; + /* Height includes any margin you want above or below control items */ + height: 3.0em; + /* background-color-with-alpha */ + background-color: #232221; + background-color: rgba(35, 34, 33, 0.8); +} +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mix-skin.librevjs-has-started .librevjs-control-bar { + display: block; + /* Visibility needed to make sure things hide in older browsers too. */ + visibility: visible; + opacity: 1; + /* transition */ + -webkit-transition: visibility 0.1s, opacity 0.1s; + -moz-transition: visibility 0.1s, opacity 0.1s; + -o-transition: visibility 0.1s, opacity 0.1s; + transition: visibility 0.1s, opacity 0.1s; +} +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mix-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { + display: block; + visibility: hidden; + opacity: 0; + /* transition */ + -webkit-transition: visibility 1s, opacity 1s; + -moz-transition: visibility 1s, opacity 1s; + -o-transition: visibility 1s, opacity 1s; + transition: visibility 1s, opacity 1s; +} +.librevjs-libre-mix-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none; +} +.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none; +} +/* The control bar shouldn't show after an error */ +.librevjs-libre-mix-skin.librevjs-error .librevjs-control-bar { + display: none; +} +/* Don't hide the control bar if it's audio */ +.librevjs-audio.librevjs-libre-mix-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { + opacity: 1; + visibility: visible; +} +/* IE8 is flakey with fonts, and you have to change the actual content to force +fonts to show/hide properly. + - "\9" IE8 hack didn't work for this + - Found in windows XP (Propietary Software) IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9 +*/ +@media \0screen { + .librevjs-libre-mix-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + content: ""; + } +} +/* General styles for individual controls. */ +.librevjs-libre-mix-skin .librevjs-control { + outline: none; + position: relative; + float: left; + text-align: center; + margin: 0; + padding: 0; + height: 3.0em; + width: 4em; +} +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mix-skin .librevjs-control:before { + font-family: LibreVideoJS; + font-size: 1.5em; + line-height: 2; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); +} +/* Replacement for focus outline */ +.librevjs-libre-mix-skin .librevjs-control:hover:before { + color: #1de9b6; +} +.librevjs-libre-mix-skin .librevjs-control:focus { + /* outline: 0; */ + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mix-skin .librevjs-control-text { + /* hide-visually */ + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: #1de9b6; +} +.librevjs-libre-mix-skin .librevjs-play-control:before { + content: "\e001"; +} +.librevjs-libre-mix-skin .librevjs-play-control:hover:before { + color: #007c5d; +} +.librevjs-libre-mix-skin.librevjs-playing .librevjs-play-control:before { + content: "\e002"; +} +/* Playback toggle +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-playback-rate .librevjs-playback-rate-value { + 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, 0.5); +} +.librevjs-libre-mix-skin .librevjs-playback-rate.librevjs-menu-button .librevjs-menu .librevjs-menu-content { + width: 4em; + left: -2em; + list-style: none; +} +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mix-skin .librevjs-mute-control, +.librevjs-libre-mix-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right; +} +.librevjs-libre-mix-skin .librevjs-mute-control:before, +.librevjs-libre-mix-skin .librevjs-volume-menu-button:before { + content: "\e006"; +} +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-0:before, +.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: "\e003"; +} +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-1:before, +.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: "\e004"; +} +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-2:before, +.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: "\e005"; +} +.librevjs-libre-mix-skin .librevjs-volume-control { + width: 5em; + float: right; +} +.librevjs-libre-mix-skin .librevjs-volume-bar { + width: 5em; + height: 0.6em; + margin: 1.1em auto 0; +} +.librevjs-libre-mix-skin .librevjs-volume-level { + position: absolute; + top: 0; + left: 0; + height: 0.6em; + /* assuming volume starts at 1.0 */ + width: 100%; + background: #1de9b6; +} +.librevjs-libre-mix-skin .librevjs-volume-bar .librevjs-volume-handle { + width: 0.5em; + height: 0.5em; + /* Assumes volume starts at 1.0. If you change the size of the + handle relative to the volume bar, you'll need to update this value + too. */ + left: 4.5em; +} +.librevjs-libre-mix-skin .librevjs-volume-handle:before { + font-size: 0.9em; + top: -0.2em; + left: -0.2em; + width: 1em; + height: 1em; +} +/* The volume menu button is like menu buttons (captions/subtitles) but works + a little differently. It needs to be possible to tab to the volume slider + without hitting space bar on the menu button. To do this we're not using + display:none to hide the slider menu by default, and instead setting the + width and height to zero. */ +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu { + display: block; + width: 0; + height: 0; + border-top-color: transparent; +} +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + height: 0; + width: 0; + transform: rotate(-90deg); +} +.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-menu-button .librevjs-menu .librevjs-menu-content { + margin-bottom: 3.2em; +} +/*.librevjs-libre-mix-skin .librevjs-volume-menu-button:hover .librevjs-menu, +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu.librevjs-lock-showing { + border-top-color: rgba(7, 40, 50, 0.5); +}*/ +.librevjs-libre-mix-skin .librevjs-volume-menu-button:hover .librevjs-menu .librevjs-menu-content, +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu.librevjs-lock-showing .librevjs-menu-content { + height: 2.9em; + width: 10em; +} +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-progress-control { + position: absolute; + left: 0; + right: 0; + width: auto; + font-size: 0.3em; + height: 1em; + /* Set above the rest of the controls. */ + top: -1em; + /* Shrink the bar slower than it grows. */ + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* On hover, make the progress bar grow to something that's more clickable. + This simply changes the overall font for the progress bar, and this + updates both the em-based widths and heights, as wells as the icon font */ +.librevjs-libre-mix-skin:hover .librevjs-progress-control { + font-size: 1em; + /* Even though we're not changing the top/height, we need to include them in + the transition so they're handled correctly. */ + /* transition */ + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; +} +/* Box containing play and load progresses. Also acts as seek scrubber. */ +.librevjs-libre-mix-skin .librevjs-progress-holder { + height: 100%; +} +/* Progress Bars */ +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-play-progress, +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress, +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress div { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + /* updated by javascript during playback */ + width: 0; + /* Needed for IE6 */ + left: 0; + top: 0; +} +.librevjs-libre-mix-skin .librevjs-play-progress { + /* Using a data URI to create the white diagonal lines with a transparent + background. Surprisingly works in IE8. + Changing the first color value will change the bar color. + Also using a paralax effect to make the lines move backwards. + The -50% left position makes that happen. + */ + background: #1de9b6 /* IE8- Fallback */; +} +.librevjs-libre-mix-skin .librevjs-load-progress { + background: #d6dbdf /* IE8- Fallback */; + background: rgba(214, 219, 223, 0.6); +} +/* there are child elements of the load progress bar that represent the + specific time ranges that have been buffered */ +.librevjs-libre-mix-skin .librevjs-load-progress div { + background: #787878 /* IE8- Fallback */; + background: rgba(255, 255, 255, 0.1); +} +.librevjs-libre-mix-skin .librevjs-seek-handle { + width: 2em; + height: 2em; + border-radius: 1em; + top: -0.5em; + background-color: #007c5d; + opacity: 0; + transition: opacity 0.4s ease-in-out; +} +/*.librevjs-libre-mix-skin .librevjs-seek-handle:before { + padding-top: 0.1em; +}*/ +.librevjs-libre-mix-skin .librevjs-progress-control:hover .librevjs-slider-handle { + opacity: 1; + transition: opacity 0.4s ease-in-out; +} +/* Live Mode +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin.librevjs-live .librevjs-time-controls, +.librevjs-libre-mix-skin.librevjs-live .librevjs-time-divider, +.librevjs-libre-mix-skin.librevjs-live .librevjs-progress-control { + display: none; +} +.librevjs-libre-mix-skin.librevjs-live .librevjs-live-display { + display: block; +} +/* Live Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-live-display { + display: none; + font-size: 1em; + line-height: 3em; +} +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-time-controls { + font-size: 1.083em; + font-weight: bold; + color: #d6dbdf; + /* Align vertically by making the line height the same as the control bar */ + line-height: 3em; + width: 3em; +} +.librevjs-libre-mix-skin .librevjs-current-time { + float: left; +} +.librevjs-libre-mix-skin .librevjs-current-time-display { + float: right; +} +.librevjs-libre-mix-skin .librevjs-duration, +.librevjs-libre-mix-skin .librevjs-duration .librevjs-duration-display { + float: left; +} +/* Remaining time is in the HTML, but not included in default design */ +.librevjs-libre-mix-skin .librevjs-remaining-time { + display: none; + float: left; +} +.librevjs-time-divider { + float: left; + line-height: 3em; + font-size: 1.083em; + font-weight: bold; + width: 1em; + text-align: center; +} +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right; +} +.librevjs-libre-mix-skin .librevjs-fullscreen-control:before { + content: "\e000"; +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mix-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content: "\e00b"; +} +/* Big Play Button (play button at start) +-------------------------------------------------------------------------------- +Positioning of the play button in the center or other corners can be done more +easily in the skin designer. http://designer.videojs.com/ +*/ +.librevjs-libre-mix-skin .librevjs-big-play-button { + left: 50%; + top: 50%; + font-size: 2em; + display: block; + z-index: 2; + position: absolute; + width: 3.8em; + height: 2.6em; + margin-left: -1.9em; + margin-top: -1.52em; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: #ffffff; + /* background-color-with-alpha */ + background-color: #333333; + background-color: rgba(51, 51, 51, 0.9); + /* border-radius */ + -webkit-border-radius: 0.4em; + -moz-border-radius: 0.4em; + border-radius: 0.4em; + /* transition */ + -webkit-transition: all 0.4s; + -moz-transition: all 0.4s; + -o-transition: all 0.4s; + transition: all 0.4s; +} +/* Hide if controls are disabled */ +.librevjs-libre-mix-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mix-skin.librevjs-has-started .librevjs-big-play-button { + display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} +.librevjs-libre-mix-skin:hover .librevjs-big-play-button, +.librevjs-libre-mix-skin .librevjs-big-play-button:focus { + color: #ffffff; + background-color: #1de9b6; +} +.librevjs-libre-mix-skin .librevjs-big-play-button:before { + content: "\e001"; + font-family: LibreVideoJS; + /* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + text-align: center /* Needed for IE8 */; + /*Shadow*/ + text-shadow: 0.05em 0.05em 0.1em #000; + line-height: 2.6em; + position: absolute; + left: 0; + width: 100%; + height: 100%; +} +.librevjs-error .librevjs-big-play-button { + display: none; +} +/* Error Display +-------------------------------------------------------------------------------- +*/ +.librevjs-error-display { + display: none; +} +.librevjs-error .librevjs-error-display { + display: block; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; +} +.librevjs-error .librevjs-error-display:before { + content: 'X'; + font-family: Arial; + font-size: 4em; + color: #666666; + /* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 1; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + vertical-align: middle; + position: absolute; + left: 0; + top: 50%; + margin-top: -0.5em; + width: 100%; +} +.librevjs-error-display div { + position: absolute; + bottom: 1em; + right: 0; + left: 0; + font-size: 1.4em; + text-align: center; + padding: 3px; + background: #000000; + background: rgba(0, 0, 0, 0.5); +} +.librevjs-error-display a, +.librevjs-error-display a:visited { + color: #F4A460; +} +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ +.librevjs-loading-spinner { + /* Should be hidden by default */ + display: none; + position: absolute; + top: 50%; + left: 50%; + font-size: 4em; + line-height: 1; + width: 1em; + height: 1em; + margin-left: -0.5em; + margin-top: -0.5em; + opacity: 0.75; + /* animation */ + -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; +} +/* Show the spinner when waiting for data and seeking to a new time */ +.librevjs-waiting .librevjs-loading-spinner, +.librevjs-seeking .librevjs-loading-spinner { + display: block; + /* only animate when showing because it can be processor heavy */ + /* animation */ + -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; +} +/* Errors are unrecoverable without user interaction so hide the spinner */ +.librevjs-error .librevjs-loading-spinner { + display: none; + /* ensure animation doesn't continue while hidden */ + /* animation */ + -webkit-animation: none; + -moz-animation: none; + -o-animation: none; + animation: none; +} +.librevjs-libre-mix-skin .librevjs-loading-spinner:before { + content: "\e01e"; + font-family: LibreVideoJS; + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + text-align: center; + text-shadow: 0em 0em 0.1em #000; +} +@-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(359deg); + } +} +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + } +} +@-o-keyframes spin { + 0% { + -o-transform: rotate(0deg); + } + 100% { + -o-transform: rotate(359deg); + } +} +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(359deg); + } +} +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-menu-button { + float: right; + cursor: pointer; +} +.librevjs-libre-mix-skin .librevjs-menu { + display: none; + position: absolute; + bottom: 0; + left: 0em; + /* (Width of vjs-menu - width of button) / 2 */ + width: 0em; + height: 0em; + margin-bottom: 3em; + border-left: 2em solid transparent; + border-right: 2em solid transparent; + border-top: 1.55em solid #000000; + /* Same width top as ul bottom */ + border-top-color: rgba(0, 0, 0, 0.4); + /* Same as ul background */ +} +/* Color menu (captions/subtitles)*/ +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected { + color: #0d1f2c; + background-color: #1de9b6; +} +.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus, +.librevjs-libre-mix-skin .librevjs-menu-button ul li:hover, +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus, +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #007c5d; + background-color: #1de9b6; +} +/*Title Resolution | subtitles and Caption*/ +.librevjs-libre-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: #1de9b6; + background-color: inherit; +} +.librevjs-libre-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover { + color: #1de9b6; + background-color: inherit; +} +/* Button Pop-up Menu */ +.librevjs-libre-mix-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { + display: block; + padding: 0; + margin: 0; + position: absolute; + width: 10em; + bottom: 1.5em; + /* Same bottom as vjs-menu border-top */ + max-height: 15em; + overflow: auto; + left: -5em; + /* Width of menu - width of button / 2 */ + background-color: #232221; + background-color: rgba(0, 0, 0, 0.4); + /* box-shadow */ + -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2); + -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2); + box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2); +} +/* +.librevjs-libre-mix-skin .librevjs-menu-button:hover .librevjs-control-content .librevjs-menu, +.librevjs-libre-mix-skin .librevjs-control-content .librevjs-menu.librevjs-lock-showing +*/ +.librevjs-libre-mix-skin .librevjs-menu-button:hover .librevjs-menu { + display: block; +} +/* prevent menus from opening while scrubbing (FF, IE) */ +.librevjs-libre-mix-skin.librevjs-scrubbing .librevjs-menu-button:hover .librevjs-control-content .librevjs-menu { + display: none; +} +.librevjs-libre-mix-skin .librevjs-menu-button ul li { + list-style: none; + margin: 0; + padding: 0.3em 0 0.3em 0; + line-height: 1.4em; + font-size: 1.2em; + text-align: center; + text-transform: lowercase; +} +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected { + background-color: #1de9b6; +} +.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus, +.librevjs-libre-mix-skin .librevjs-menu-button ul li:hover, +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus, +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: #0d1f2c; + background-color: #1de9b6; + /*.background-color-with-alpha(rgb(255, 255, 255), 0.75);*/ + /*.box-shadow(0 0 1em rgba(255, 255, 255, 1));*/ +} +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-menu-title { + text-align: center; + text-transform: uppercase; + font-size: 1em; + line-height: 2em; + padding: 0; + margin: 0 0 0.3em 0; + font-weight: bold; + cursor: default; +} +/* Subtitles Button */ +.librevjs-libre-mix-skin .librevjs-subtitles-button:before { + content: "\e00c"; +} +/* Captions Button */ +.librevjs-libre-mix-skin .librevjs-captions-button:before { + content: "\e008"; +} +/* Chapters Button */ +.librevjs-libre-mix-skin .librevjs-chapters-button:before { + content: "\e00c"; +} +.librevjs-libre-mix-skin .librevjs-chapters-button.librevjs-menu-button .librevjs-menu .librevjs-menu-content { + width: 24em; + left: -12em; +} +/* Replacement for focus outline */ +.librevjs-libre-mix-skin .librevjs-captions-button:focus .librevjs-control-content:before, +.librevjs-libre-mix-skin .librevjs-captions-button:hover .librevjs-control-content:before { + /* box-shadow */ + -webkit-box-shadow: 0 0 1em #ffffff; + -moz-box-shadow: 0 0 1em #ffffff; + box-shadow: 0 0 1em #ffffff; +} +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (Flash or HTML5) and controls, +and sets the width and height of the video. + +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.cliplibre-js { + background-color: #000; + position: relative; + padding: 0; + /* Start with 10px for base font size so other dimensions can be em based and + easily calculable. */ + font-size: 12px; + /* Allow poster to be vertically aligned. */ + vertical-align: middle; + /* display: table-cell; */ + /*This works in Safari but not Firefox.*/ + /* Provide some basic defaults for fonts */ + font-weight: normal; + font-style: normal; + /* Avoiding helvetica: issue #376 */ + font-family: Arial, Helvetica, sans-serif; + /* Turn off user selection (text highlighting) by default. + The majority of player components will not be text blocks. + Text areas will need to turn user selection back on. */ + /* user-select */ + -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> or <object> */ +.cliplibre-js .librevjs-tech { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when + checking fullScreenEnabled. */ +.cliplibre-js:-moz-full-screen { + position: absolute; +} +/* Fullscreen Styles */ +body.librevjs-full-window { + padding: 0; + margin: 0; + height: 100%; + /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */ + 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; + /* IE6 full-window (underscore hack) */ + _position: absolute; +} +.cliplibre-js:-webkit-full-screen { + width: 100% !important; + height: 100% !important; +} +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { + cursor: none; +} +/* Poster Styles */ +.librevjs-poster { + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; + background-color: #000000; + cursor: pointer; + margin: 0; + padding: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} +.librevjs-poster img { + display: block; + margin: 0 auto; + max-height: 100%; + padding: 0; + width: 100%; +} +/* Hide the poster after the video has started playing */ +.cliplibre-js.librevjs-has-started .librevjs-poster { + display: none; +} +/* Don't hide the poster if we're playing audio */ +.cliplibre-js.librevjs-audio.librevjs-has-started .librevjs-poster { + display: block; +} +/* Hide the poster when controls are disabled because it's clickable + and the native poster can take over */ +.cliplibre-js.librevjs-controls-disabled .librevjs-poster { + display: none; +} +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { + display: none; +} +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { + text-align: center; + position: absolute; + bottom: 4em; + left: 1em; + right: 1em; +} +.cliplibre-js .librevjs-subtitles { + color: #fff; +} +.cliplibre-js .librevjs-captions { + color: #ffffff; + background-color: rgba(2, 7, 11, 0.7); +} +/* Captions Settings Dialog */ +.librevjs-caption-settings { + position: relative; + top: 1em; + background-color: #000; + opacity: 0.75; + color: #FFF; + margin: 0 auto; + padding: 0.5em; + height: 15em; + font-family: Arial, Helvetica, sans-serif; + font-size: 12px; + width: 40em; +} +.librevjs-caption-settings .librevjs-tracksettings { + top: 0; + bottom: 2em; + left: 0; + right: 0; + position: absolute; + overflow: auto; +} +.librevjs-caption-settings .librevjs-tracksettings-colors, +.librevjs-caption-settings .librevjs-tracksettings-font { + float: left; +} +.librevjs-caption-settings .librevjs-tracksettings-colors:after, +.librevjs-caption-settings .librevjs-tracksettings-font:after, +.librevjs-caption-settings .librevjs-tracksettings-controls:after { + clear: both; +} +.librevjs-caption-settings .librevjs-tracksettings-controls { + position: absolute; + bottom: 1em; + right: 1em; +} +.librevjs-caption-settings .librevjs-tracksetting { + margin: 5px; + padding: 3px; + min-height: 40px; +} +.librevjs-caption-settings .librevjs-tracksetting label { + display: block; + width: 100px; + margin-bottom: 5px; +} +.librevjs-caption-settings .librevjs-tracksetting span { + display: inline; + margin-left: 5px; +} +.librevjs-caption-settings .librevjs-tracksetting > div { + margin-bottom: 5px; + min-height: 20px; +} +.librevjs-caption-settings .librevjs-tracksetting > div:last-child { + margin-bottom: 0; + padding-bottom: 0; + min-height: 0; +} +.librevjs-caption-settings label > input { + margin-right: 10px; +} +.librevjs-caption-settings input[type="button"] { + width: 40px; + height: 40px; +} +/* Hide disabled or unsupported controls */ +.librevjs-hidden { + display: none !important; +} +.librevjs-lock-showing { + display: block !important; + opacity: 1; + visibility: visible; +} +/* In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register. + The .cliplibre-js classname on the video tag also isn't considered. + This optional paragraph inside the video tag can provide a message to users + about what's required to play video. */ +.librevjs-no-js { + padding: 2em; + color: #ccc; + background-color: #333; + font-size: 1.8em; + font-family: Arial, sans-serif; + text-align: center; + width: 30em; + height: 15em; + margin: 0 auto; +} +.librevjs-no-js a, +.librevjs-no-js a:visited { + color: #F4A460; +} +/*Responsive web desing + The dates are calculates for display +*/ +.cliplibre-js-responsive-container.librevjs-hd { + padding-top: 56.25%; +} +.cliplibre-js-responsive-container.librevjs-sd { + padding-top: 75%; +} +.cliplibre-js-responsive-container { + width: 100%; + position: relative; +} +.cliplibre-js-responsive-container .cliplibre-js { + height: 100% !important; + width: 100% !important; + position: absolute; + top: 0; + left: 0; +} +@media screen and (max-width: 800px) { + .cliplibre-js .librevjs-text-track { + font-size: 1.5em; + margin-bottom: -0.2em; + line-height: 1.5; + } +} +@media screen and (max-width: 600px) { + .cliplibre-js .librevjs-text-track { + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 2em; + } +} +@media screen and (max-width: 413px) { + .cliplibre-js { + font-size: 8px; + } +} +@media screen and (max-width: 400px) { + .cliplibre-js .librevjs-text-track { + font-size: 1em; + } + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 2em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 1em; + } +} +@media screen and (max-width: 335px) { + .cliplibre-js { + font-size: 6px; + } +} +@media screen and (max-width: 150px) { + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 1.8em; + } +} +@media screen and (max-width: 90px) { + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 1.4em; + } +} +/* End Responsive*/ +/* Quality Selector Universal +------------------------------------------------------------------------------*/ +/* Position the button */ +.librevjs-res-button { + font-weight: bold; + float: right; + line-height: 3em; +} +/* Don't show hover effects on title */ +ul li.librevjs-menu-title.librevjs-res-menu-title:hover { + cursor: default; + background-color: transparent; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} +/* Needed to keep text visible in LibreVideoJS */ +.librevjs-res-button .librevjs-control-text { + width: auto; + height: auto; + clip: auto; +} +/* ProgressTips Universal +------------------------------------------------------------------------------*/ +.librevjs-progress-tip { + visibility: hidden; + display: block; + opacity: 0.8; + padding: 5px; + font-size: 10px; + position: absolute; + z-index: 100000; +} +.librevjs-progress-tip-arrow { + background: url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) no-repeat top left; + bottom: 0; + left: 50%; + margin-left: -4px; + background-position: bottom left; + position: absolute; + width: 9px; + height: 5px; +} +.librevjs-progress-tip-inner { + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + padding: 5px 8px 4px 8px; + background-color: black; + color: white; + max-width: 200px; + text-align: center; +} +/* ----------------------------------------------------------------------------- +The original source of this file lives at +https://github.com/videojs/video.js/blob/master/src/css/video-js.less */ diff --git a/css/librevideojs/teal.less b/css/librevideojs/teal.less new file mode 100644 index 0000000..9ccca1a --- /dev/null +++ b/css/librevideojs/teal.less @@ -0,0 +1,1427 @@ +/*! +LibreVideoJS +Version 2.0 +Copyright 2017, Jesus E. +*/ + +// To customize the player skin, change the values of the variables or edit the +// CSS below. +// (This file uses LESS. Learn more at http://lesscss.org/) + +// The base font size controls the size of everything, not just text. All +// dimensions use em-based sizes so that the scale along with the font size. +// Try increasing it to 20px and see what happens. +@base-font-size: 12px; +@touch-device-font-size: 15px; + +// The main font color controls the color of the text and the icons (font icons) +@main-font-color: #ffffff; // e.g. rgb(255, 255, 255) or #ffffff +@primary-color: #1de9b6; +@primary-dark-color: #007c5d; +@clouds-color: #d6dbdf; + +// Menu - Subtitles/captions +@text-dark-color: #0d1f2c; +@caption-color: #ffffff; //other color #ffed00; + +// The default color of control backgrounds is mostly black but with a little +// bit of blue so it can still be seen on all black video frames, which are +// common. +@control-bg-color: #232221; // e.g. rgb(255, 255, 255) or #ffffff +@control-bg-alpha: 0.8; // 1.0 = 100% opacity, 0.0 = 0% opacity + +// The slider bar color is used for the progress bar and the volume bar +@slider-bar-color: #66A8CC; // e.g. rgb(255, 255, 255) or #ffffff +// The background of the progress bar and volume bar have a lined pattern that +// is created from a base64 encoded image. You can generate your own pattern at +// http://www.patternify.com/ then replace the value in the quotes with your own +@slider-bar-pattern: ~'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC'; +// The color of the slider background +@slider-background-color: #333333; +@slider-background-alpha: 0.9; // 1.0 = 100% opacity, 0.0 = 0% opacity + +// The "Big Play Button" is the play button that shows before the video plays. +// To center it set the align values to center and middle. The typical location +// of the button is the center, but there is trend towards moving it to a corner +// where it gets out of the way of valuable content in the poster image. +@big-play-align: left; // left, center, or right +@big-play-vertical-align: top; // top, middle, or bottom +// The button colors match the control colors by default but you can customize +// them by replace the variables (@control-bg-color) with your own color values. +@big-play-bg-color: @control-bg-color; +@big-play-bg-alpha: @control-bg-alpha; +// The font size is what makes the big play button, big. All width/height values +// use ems, which are a multiple of the font size. +// If the @base-font-size is 10px, then 3em equals 30px. +@big-play-font-size: 2em; +// Now that font size is set, the following em values will be a multiple of the +// new font size. If @big-play-font-size is 3em (30px), then setting the any of +// the following values to 2em would equal 60px. 2 * font-size +@big-play-margin: 0.5em; +//@big-play-width: 1em; +@big-play-width: 3.8em; +//@big-play-height: 1em; +@big-play-height: 2.6em; +@big-play-border-radius: 0.8em; +@big-play-border-width: 0.1em; +@big-play-border-color: #3b4249; + +/* SKIN +================================================================================ +The main class name for all skin-specific styles. To make your own skin, +replace all occurrences of 'vjs-flat-skin' with a new name. Then add your new +skin name to your video tag instead of the default skin. +e.g. <video class="video-js my-skin-name"> +*/ +.librevjs-libre-mix-skin { + color: @main-font-color; +} + +/* Custom Icon Font +-------------------------------------------------------------------------------- +The control icons are from a custom font. Each icon corresponds to a character +(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons. +*/ +@lvjs-font-path: '../../fonts'; +@font-face{ + font-family: 'LibreVideoJS'; + src: url('@{lvjs-font-path}/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'), + url('@{lvjs-font-path}/libre-material/libre-icons.woff') format('woff'), + url('@{lvjs-font-path}/libre-material/libre-icons.ttf') format('truetype'), + url('@{lvjs-font-path}/libre-material/libre-icons.svg#icomoon') format('svg'); + + font-weight: normal; + font-style: normal; +} + +// Icon font character values +@play-icon: "\e001"; +@pause-icon: "\e002"; +@volume-muted-icon: "\e003"; +@volume-low-icon: "\e004"; +@volume-mid-icon: "\e005"; +@volume-high-icon: "\e006"; +@play-big-icon: "\e007"; +@fullscreen-enter-icon: "\e000"; +@fullscreen-exit-icon: "\e00b"; +@square-icon: "\e009"; +@spinner-icon: "\e00a"; +@spinner2-icon: "\e00d"; +@spinner3-icon: "\e01e"; +@spinner4-icon: "\e01f"; +@subtitles-icon: "\e00c"; +@captions-icon: "\e008"; +@chapters-icon: "\e00c"; +@share-icon: "\e00e"; +@cog-icon: "\e600"; + +/* Base UI Component Classes +-------------------------------------------------------------------------------- +*/ + +/* Slider - used for Volume bar and Seek bar */ +.librevjs-libre-mix-skin .librevjs-slider { + /* Replace browser focus highlight with handle highlight */// + outline: 0; + position: relative; + cursor: pointer; + padding: 0; + + .background-color-with-alpha(@slider-background-color, @slider-background-alpha); +} + +.librevjs-libre-mix-skin .librevjs-slider:focus { + .box-shadow(0 0 2em #fff); +} + +.librevjs-libre-mix-skin .librevjs-slider-handle { + position: absolute; + /* Needed for IE6 */// + left: 0; + top: 0; +} + +.librevjs-libre-mix-skin .librevjs-slider-handle:before { + text-shadow: 0em 0em 1em #fff; + + position: absolute; + top: 0; + left: 0; +} + +/* Control Bar +-------------------------------------------------------------------------------- +The default control bar that is a container for most of the controls. +*/ +.librevjs-libre-mix-skin .librevjs-control-bar { + /* Start hidden */// + display: none; + position: absolute; + /* Place control bar at the bottom of the player box/video. + If you want more margin below the control bar, add more height. */// + bottom: 0; + /* Use left/right to stretch to 100% width of player div */// + left: 0; + right: 0; + /* Height includes any margin you want above or below control items */// + height: 3.0em; + + .background-color-with-alpha(@control-bg-color, @control-bg-alpha); +} + +/* Show the control bar only once the video has started playing */ +.librevjs-libre-mix-skin.librevjs-has-started .librevjs-control-bar { + display: block; + /* Visibility needed to make sure things hide in older browsers too. */ + visibility: visible; + opacity: 1; + + @trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma + .transition(@trans); +} + +/* Hide the control bar when the video is playing and the user is inactive */ +.librevjs-libre-mix-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { + display: block; + visibility: hidden; + opacity: 0; + + @trans: visibility 1.0s, opacity 1.0s; + .transition(@trans); +} + +.librevjs-libre-mix-skin.librevjs-controls-disabled .librevjs-control-bar { + display: none; +} + +.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-control-bar { + display: none; +} + +/* The control bar shouldn't show after an error */ +.librevjs-libre-mix-skin.librevjs-error .librevjs-control-bar { + display: none; +} + +/* Don't hide the control bar if it's audio */ +.librevjs-audio.librevjs-libre-mix-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { + opacity: 1; + visibility: visible; +} + +/* IE8 is flakey with fonts, and you have to change the actual content to force +fonts to show/hide properly. + - "\9" IE8 hack didn't work for this + - Found in windows XP (Propietary Software) IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9 +*/ +@ie8screen: ~"\0screen"; +.librevjs-libre-mix-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { + @media @ie8screen { content: ""; } +} + +/* General styles for individual controls. */ +.librevjs-libre-mix-skin .librevjs-control { + outline: none; + position: relative; + float: left; + text-align: center; + margin: 0; + padding: 0; + height: 3.0em; + width: 4em; +} + +/* FreeArt button icons: http://artlibre.org/licence/lal */ +.librevjs-libre-mix-skin .librevjs-control:before { + font-family: LibreVideoJS; + font-size: 1.5em; + line-height: 2; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + text-shadow: 1px 1px 1px rgba(0,0,0,0.5); +} + +/* Replacement for focus outline */ +.librevjs-libre-mix-skin .librevjs-control:hover:before { + color: @primary-color; +} + +.librevjs-libre-mix-skin .librevjs-control:focus { + /* outline: 0; */// + /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ +} + +/* Hide control text visually, but have it available for screenreaders */ +.librevjs-libre-mix-skin .librevjs-control-text { + .hide-visually; +} + +/* Play/Pause +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-play-control { + width: 5em; + cursor: pointer; + color: @primary-color; +} +.librevjs-libre-mix-skin .librevjs-play-control:before { + content: @play-icon; +} +.librevjs-libre-mix-skin .librevjs-play-control:hover:before { + color: @primary-dark-color; +} +.librevjs-libre-mix-skin.librevjs-playing .librevjs-play-control:before { + content: @pause-icon; +} + +/* Playback toggle +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-playback-rate .librevjs-playback-rate-value { + 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, 0.5); +} + +.librevjs-libre-mix-skin .librevjs-playback-rate.librevjs-menu-button .librevjs-menu .librevjs-menu-content { + width: 4em; + left: -2em; + list-style: none; +} + +/* Volume/Mute +-------------------------------------------------------------------------------- */ +.librevjs-libre-mix-skin .librevjs-mute-control, +.librevjs-libre-mix-skin .librevjs-volume-menu-button { + cursor: pointer; + float: right; +} +.librevjs-libre-mix-skin .librevjs-mute-control:before, +.librevjs-libre-mix-skin .librevjs-volume-menu-button:before { + content: @volume-high-icon; +} +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-0:before, +.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-0:before { + content: @volume-muted-icon; +} +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-1:before, +.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-1:before { + content: @volume-low-icon; +} +.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-2:before, +.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-2:before { + content: @volume-mid-icon; +} + +.librevjs-libre-mix-skin .librevjs-volume-control { + width: 5em; + float: right; +} +.librevjs-libre-mix-skin .librevjs-volume-bar { + width: 5em; + height: 0.6em; + margin: 1.1em auto 0; +} + +.librevjs-libre-mix-skin .librevjs-volume-level { + position: absolute; + top: 0; + left: 0; + height: 0.6em; + /* assuming volume starts at 1.0 */ + width: 100%; + + background: @primary-color; +} +.librevjs-libre-mix-skin .librevjs-volume-bar .librevjs-volume-handle { + width: 0.5em; + height: 0.5em; + /* Assumes volume starts at 1.0. If you change the size of the + handle relative to the volume bar, you'll need to update this value + too. */ + left: 4.5em; +} + +.librevjs-libre-mix-skin .librevjs-volume-handle:before { + font-size: 0.9em; + top: -0.2em; + left: -0.2em; + + width: 1em; + height: 1em; +} + +/* The volume menu button is like menu buttons (captions/subtitles) but works + a little differently. It needs to be possible to tab to the volume slider + without hitting space bar on the menu button. To do this we're not using + display:none to hide the slider menu by default, and instead setting the + width and height to zero. */ +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu { + display: block; + width: 0; + height: 0; + border-top-color: transparent; +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { + height: 0; + width: 0; + transform: rotate(-90deg); +} + +.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-menu-button .librevjs-menu .librevjs-menu-content { + margin-bottom: 3.2em; +} + +/*.librevjs-libre-mix-skin .librevjs-volume-menu-button:hover .librevjs-menu, +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu.librevjs-lock-showing { + border-top-color: rgba(7, 40, 50, 0.5); +}*/ + +.librevjs-libre-mix-skin .librevjs-volume-menu-button:hover .librevjs-menu .librevjs-menu-content, +.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu.librevjs-lock-showing .librevjs-menu-content { + height: 2.9em; + width: 10em; +} + +/* Progress +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-progress-control { + position: absolute; + left: 0; + right: 0; + width: auto; + font-size: 0.3em; + height: 1em; + /* Set above the rest of the controls. */// + top: -1em; + + /* Shrink the bar slower than it grows. */// + .transition(all 0.4s); +} + +/* On hover, make the progress bar grow to something that's more clickable. + This simply changes the overall font for the progress bar, and this + updates both the em-based widths and heights, as wells as the icon font */ +.librevjs-libre-mix-skin:hover .librevjs-progress-control { + font-size: 1em; + + /* Even though we're not changing the top/height, we need to include them in + the transition so they're handled correctly. */ + .transition(all 0.2s); +} + +/* Box containing play and load progresses. Also acts as seek scrubber. */ +.librevjs-libre-mix-skin .librevjs-progress-holder { + height: 100%; +} + +/* Progress Bars */ +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-play-progress, +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress, +.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress div { + position: absolute; + display: block; + height: 100%; + margin: 0; + padding: 0; + /* updated by javascript during playback */ + width: 0; + /* Needed for IE6 */// + left: 0; + top: 0; +} + +.librevjs-libre-mix-skin .librevjs-play-progress { + /* Using a data URI to create the white diagonal lines with a transparent + background. Surprisingly works in IE8. + Changing the first color value will change the bar color. + Also using a paralax effect to make the lines move backwards. + The -50% left position makes that happen. + */ + background: @primary-color /* IE8- Fallback */; +} +.librevjs-libre-mix-skin .librevjs-load-progress { + background: rgb(red(@clouds-color), green(@clouds-color), blue(@clouds-color)) /* IE8- Fallback */; + background: rgba(red(@clouds-color), green(@clouds-color), blue(@clouds-color), 0.6); +} + +/* there are child elements of the load progress bar that represent the + specific time ranges that have been buffered */ +.librevjs-libre-mix-skin .librevjs-load-progress div { + background: rgb(120, 120, 120) /* IE8- Fallback */; + background: rgba(255, 255, 255, 0.1); +} + +.librevjs-libre-mix-skin .librevjs-seek-handle { + width: 2em; + height: 2em; + border-radius: 1em; + top: -0.5em; + background-color: @primary-dark-color; + opacity: 0; + transition: opacity .4s ease-in-out; +} + +/*.librevjs-libre-mix-skin .librevjs-seek-handle:before { + padding-top: 0.1em; +}*/ + +.librevjs-libre-mix-skin .librevjs-progress-control:hover .librevjs-slider-handle { + opacity: 1; + transition: opacity .4s ease-in-out; +} + +/* Live Mode +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin.librevjs-live .librevjs-time-controls, +.librevjs-libre-mix-skin.librevjs-live .librevjs-time-divider, +.librevjs-libre-mix-skin.librevjs-live .librevjs-progress-control { + display: none; +} +.librevjs-libre-mix-skin.librevjs-live .librevjs-live-display { + display: block; +} + +/* Live Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-live-display { + display: none; + font-size: 1em; + line-height: 3em; +} + +/* Time Display +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-time-controls { + font-size: 1.083em; + font-weight: bold; + color: #d6dbdf; + /* Align vertically by making the line height the same as the control bar */// + line-height: 3em; + width: 3em; +} +.librevjs-libre-mix-skin .librevjs-current-time { float: left; } +.librevjs-libre-mix-skin .librevjs-current-time-display { float: right; } +.librevjs-libre-mix-skin .librevjs-duration, +.librevjs-libre-mix-skin .librevjs-duration .librevjs-duration-display { float: left; } +/* Remaining time is in the HTML, but not included in default design */ +.librevjs-libre-mix-skin .librevjs-remaining-time { display: none; float: left; } +.librevjs-time-divider { + float: left; + line-height: 3em; + font-size: 1.083em; + font-weight: bold; + width: 1em; + text-align: center; +} + +/* Fullscreen +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-fullscreen-control { + width: 3.8em; + cursor: pointer; + float: right; +} +.librevjs-libre-mix-skin .librevjs-fullscreen-control:before { + content: @fullscreen-enter-icon; +} +/* Switch to the exit icon when the player is in fullscreen */ +.librevjs-libre-mix-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { + content: @fullscreen-exit-icon; +} + +/* 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. http://designer.videojs.com/ +*/ +.librevjs-libre-mix-skin .librevjs-big-play-button { + left: 50%; + top: 50%; + font-size: @big-play-font-size; + display: block; + z-index: 2; + position: absolute; + width: @big-play-width; + height: @big-play-height; + margin-left: -@big-play-width/2; + margin-top: -@big-play-width/2.5; + text-align: center; + vertical-align: middle; + cursor: pointer; + opacity: 1; + color: @main-font-color; + //Sombras + .background-color-with-alpha(@slider-background-color, @slider-background-alpha); + @border: .4em; + .border-radius(@border); + @trans: all .4s; // Var needed because of comma + .transition(@trans); +} + +/* Hide if controls are disabled */ +.librevjs-libre-mix-skin.librevjs-controls-disabled .librevjs-big-play-button { + display: none; +} +/* Hide when video starts playing */ +.librevjs-libre-mix-skin.librevjs-has-started .librevjs-big-play-button { + display: none; +} +/* Hide on mobile devices. Remove when we stop using native controls + by default on mobile */ +.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-big-play-button { + display: none; +} + +.librevjs-libre-mix-skin:hover .librevjs-big-play-button, +.librevjs-libre-mix-skin .librevjs-big-play-button:focus { + color: @main-font-color; + background-color: @primary-color; +} + +.librevjs-libre-mix-skin .librevjs-big-play-button:before { + content: @play-icon; + 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 */; + + /*Shadow*/ + text-shadow: 0.05em 0.05em 0.1em #000; + line-height: 2.6em; + + position: absolute; + left: 0; + width: 100%; + height: 100%; +} + +.librevjs-error .librevjs-big-play-button { + display: none; +} + +/* Error Display +-------------------------------------------------------------------------------- +*/ + +.librevjs-error-display { + display: none; +} + +.librevjs-error .librevjs-error-display { + display: block; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; +} + +.librevjs-error .librevjs-error-display:before { + content: 'X'; + font-family: Arial; + font-size: 4em; + color: #666666; + /* In order to center the play icon vertically we need to set the line height + to the same as the button height */ + line-height: 1; + text-shadow: 0.05em 0.05em 0.1em #000; + text-align: center /* Needed for IE8 */; + vertical-align: middle; + + position: absolute; + left: 0; + top: 50%; + margin-top: -0.5em; + width: 100%; +} + +.librevjs-error-display div { + position: absolute; + bottom: 1em; + right: 0; + left: 0; + + font-size: 1.4em; + text-align: center; + padding: 3px; + background: rgb(0, 0, 0); // fallback to just black + background: rgba(0,0,0,0.5); // Normally show black at 50% opacity +} + +.librevjs-error-display a, .librevjs-error-display a:visited { + color: #F4A460; +} + +/* Loading Spinner +-------------------------------------------------------------------------------- +*/ + +.librevjs-loading-spinner { + /* Should be hidden by default */// + display: none; + + position: absolute; + top: 50%; + left: 50%; + + font-size: 4em; + line-height: 1; + + width: 1em; + height: 1em; + + margin-left: -0.5em; + margin-top: -0.5em; + + opacity: 0.75; + .animation(spin 1.5s infinite linear); +} + +/* Show the spinner when waiting for data and seeking to a new time */ +.librevjs-waiting .librevjs-loading-spinner, +.librevjs-seeking .librevjs-loading-spinner { + display: block; + + /* only animate when showing because it can be processor heavy */// + .animation(spin 1.5s infinite linear); +} + +/* Errors are unrecoverable without user interaction so hide the spinner */ +.librevjs-error .librevjs-loading-spinner { + display: none; + + /* ensure animation doesn't continue while hidden */// + .animation(none); +} + +.librevjs-libre-mix-skin .librevjs-loading-spinner:before { + content: @spinner3-icon; + font-family: LibreVideoJS; + + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + text-align: center; + text-shadow: 0em 0em 0.1em #000; +} + +@-moz-keyframes spin { + 0% { -moz-transform: rotate(0deg); } + 100% { -moz-transform: rotate(359deg); } +} +@-webkit-keyframes spin { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(359deg); } +} +@-o-keyframes spin { + 0% { -o-transform: rotate(0deg); } + 100% { -o-transform: rotate(359deg); } +} +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(359deg); } +} + +/* Menu Buttons (Captions/Subtitles/etc.) +-------------------------------------------------------------------------------- +*/ +.librevjs-libre-mix-skin .librevjs-menu-button { + float: right; + cursor: pointer; +} + +.librevjs-libre-mix-skin .librevjs-menu { + display: none; + position: absolute; + bottom: 0; + left: 0em; /* (Width of vjs-menu - width of button) / 2 */ + width: 0em; + height: 0em; + margin-bottom: 3em; + + border-left: 2em solid transparent; + border-right: 2em solid transparent; + + border-top: 1.55em solid rgb(0, 0, 0); /* Same width top as ul bottom */ + border-top-color: rgba(0, 0, 0, 0.4); /* Same as ul background */ +} + +/* Color menu (captions/subtitles)*/ +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected { + color: @text-dark-color; + background-color: @primary-color; +} + +.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus, +.librevjs-libre-mix-skin .librevjs-menu-button ul li:hover, +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus, +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: @primary-dark-color; + background-color: @primary-color; +} + +/*Title Resolution | subtitles and Caption*/ + +.librevjs-libre-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title { + color: @primary-color; + background-color: inherit; +} + +.librevjs-libre-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover { + color: @primary-color; + background-color: inherit; +} + +/* Button Pop-up Menu */ +.librevjs-libre-mix-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { + display: block; + padding: 0; margin: 0; + position: absolute; + width: 10em; + bottom: 1.5em; /* Same bottom as vjs-menu border-top */ + max-height: 15em; + overflow: auto; + + left: -5em; /* Width of menu - width of button / 2 */ + + background-color: @control-bg-color; + background-color: rgba(0, 0, 0, 0.4); + .box-shadow(-0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2)); +} + +/* +.librevjs-libre-mix-skin .librevjs-menu-button:hover .librevjs-control-content .librevjs-menu, +.librevjs-libre-mix-skin .librevjs-control-content .librevjs-menu.librevjs-lock-showing +*/ + +.librevjs-libre-mix-skin .librevjs-menu-button:hover .librevjs-menu { + display: block; +} +/* prevent menus from opening while scrubbing (FF, IE) */ +.librevjs-libre-mix-skin.librevjs-scrubbing .librevjs-menu-button:hover .librevjs-control-content .librevjs-menu { + display: none; +} +.librevjs-libre-mix-skin .librevjs-menu-button ul li { + list-style: none; + margin: 0; + padding: 0.3em 0 0.3em 0; + line-height: 1.4em; + font-size: 1.2em; + text-align: center; + text-transform: lowercase; +} +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected { + background-color: @primary-color; +} +.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus, +.librevjs-libre-mix-skin .librevjs-menu-button ul li:hover, +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus, +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover { + outline: 0; + color: @text-dark-color; + background-color: @primary-color; + + /*.background-color-with-alpha(rgb(255, 255, 255), 0.75);*/ + /*.box-shadow(0 0 1em rgba(255, 255, 255, 1));*/ +} +.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-menu-title { + text-align: center; + text-transform: uppercase; + font-size: 1em; + line-height: 2em; + padding: 0; + margin: 0 0 0.3em 0; + font-weight: bold; + cursor: default; +} + +/* Subtitles Button */ +.librevjs-libre-mix-skin .librevjs-subtitles-button:before { + content: @subtitles-icon; +} + +/* Captions Button */ +.librevjs-libre-mix-skin .librevjs-captions-button:before { + content: @captions-icon; +} + +/* Chapters Button */ +.librevjs-libre-mix-skin .librevjs-chapters-button:before { + content: @chapters-icon; +} + +.librevjs-libre-mix-skin .librevjs-chapters-button.librevjs-menu-button .librevjs-menu .librevjs-menu-content { + width: 24em; + left: -12em; +} + +/* Replacement for focus outline */ +.librevjs-libre-mix-skin .librevjs-captions-button:focus .librevjs-control-content:before, +.librevjs-libre-mix-skin .librevjs-captions-button:hover .librevjs-control-content:before { + .box-shadow(0 0 1em rgba(255, 255, 255, 1)); +} + +/* +REQUIRED STYLES (be careful overriding) +================================================================================ +When loading the player, the video tag is replaced with a DIV, +that will hold the video tag or object tag for other playback methods. +The div contains the video playback element (Flash or HTML5) and controls, +and sets the width and height of the video. + +** If you want to add some kind of border/padding (e.g. a frame), or special +positioning, use another containing element. Otherwise you risk messing up +control positioning and full window mode. ** +*/ +.cliplibre-js { + background-color: #000; + position: relative; + padding: 0; + /* Start with 10px for base font size so other dimensions can be em based and + easily calculable. */ + font-size: @base-font-size; + /* Allow poster to be vertically aligned. */ + vertical-align: middle; + /* display: table-cell; */ /*This works in Safari but not Firefox.*/ + + /* Provide some basic defaults for fonts */ + font-weight: normal; + font-style: normal; + /* Avoiding helvetica: issue #376 */ + font-family: Arial, Helvetica, sans-serif; + + /* Turn off user selection (text highlighting) by default. + The majority of player components will not be text blocks. + Text areas will need to turn user selection back on. */ + .user-select(none); +} + +/* Playback technology elements expand to the width/height of the containing div + <video> or <object> */ +.cliplibre-js .librevjs-tech { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when + checking fullScreenEnabled. */ +.cliplibre-js:-moz-full-screen { position: absolute; } + +/* Fullscreen Styles */ +body.librevjs-full-window { + padding: 0; + margin: 0; + height: 100%; + /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */// + 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; + /* IE6 full-window (underscore hack) */// + _position: absolute; +} +.cliplibre-js:-webkit-full-screen { + width: 100% !important; + height: 100% !important; +} +.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { + cursor: none; +} + +/* Poster Styles */ +.librevjs-poster { + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: contain; + background-color: #000000; + cursor: pointer; + margin: 0; + padding: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} +.librevjs-poster img { + display: block; + margin: 0 auto; + max-height: 100%; + padding: 0; + width: 100%; +} + +/* Hide the poster after the video has started playing */ +.cliplibre-js.librevjs-has-started .librevjs-poster { + display: none; +} + +/* Don't hide the poster if we're playing audio */ +.cliplibre-js.librevjs-audio.librevjs-has-started .librevjs-poster { + display: block; +} + +/* Hide the poster when controls are disabled because it's clickable + and the native poster can take over */ +.cliplibre-js.librevjs-controls-disabled .librevjs-poster { + display: none; +} + +/* Hide the poster when native controls are used otherwise it covers them */ +.cliplibre-js.librevjs-using-native-controls .librevjs-poster { + display: none; +} + +/* Text Track Styles */ +/* Overall track holder for both captions and subtitles */ +.cliplibre-js .librevjs-text-track-display { + text-align: center; + position: absolute; + bottom: 4em; + left: 1em; + right: 1em; +} + +.cliplibre-js .librevjs-subtitles { + color: #fff +} + +.cliplibre-js .librevjs-captions { + color: @caption-color; + background-color: rgba(2, 7, 11, 0.7); +} + + +/* Captions Settings Dialog */ +.librevjs-caption-settings { + position: relative; + top: 1em; + background-color: #000; + opacity: 0.75; + color: #FFF; + margin: 0 auto; + padding: 0.5em; + height: 15em; + font-family: Arial, Helvetica, sans-serif; + font-size: 12px; + width: 40em; +} + +.librevjs-caption-settings .librevjs-tracksettings { + top: 0; + bottom: 2em; + left: 0; + right: 0; + position: absolute; + overflow: auto; +} + +.librevjs-caption-settings .librevjs-tracksettings-colors, +.librevjs-caption-settings .librevjs-tracksettings-font { + float: left; +} +.librevjs-caption-settings .librevjs-tracksettings-colors:after, +.librevjs-caption-settings .librevjs-tracksettings-font:after, +.librevjs-caption-settings .librevjs-tracksettings-controls:after { + clear: both; +} + +.librevjs-caption-settings .librevjs-tracksettings-controls { + position: absolute; + bottom: 1em; + right: 1em; +} + +.librevjs-caption-settings .librevjs-tracksetting { + margin: 5px; + padding: 3px; + min-height: 40px; +} +.librevjs-caption-settings .librevjs-tracksetting label { + display: block; + width: 100px; + margin-bottom: 5px; +} + +.librevjs-caption-settings .librevjs-tracksetting span { + display: inline; + margin-left: 5px; +} + +.librevjs-caption-settings .librevjs-tracksetting > div { + margin-bottom: 5px; + min-height: 20px; +} + +.librevjs-caption-settings .librevjs-tracksetting > div:last-child { + margin-bottom: 0; + padding-bottom: 0; + min-height: 0; +} + +.librevjs-caption-settings label > input { + margin-right: 10px; +} + +.librevjs-caption-settings input[type="button"] { + width: 40px; + height: 40px; +} + +/* Hide disabled or unsupported controls */ +.librevjs-hidden { display: none !important; } + +.librevjs-lock-showing { + display: block !important; + opacity: 1; + visibility: visible; +} + +/* In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register. + The .cliplibre-js classname on the video tag also isn't considered. + This optional paragraph inside the video tag can provide a message to users + about what's required to play video. */ +.librevjs-no-js { + padding: 2em; + color: #ccc; + background-color: #333; + font-size: 1.8em; + font-family: Arial, sans-serif; + text-align: center; + width: 30em; + height: 15em; + margin: 0 auto; +} + +.librevjs-no-js a, .librevjs-no-js a:visited { + color: #F4A460; +} + +/*Responsive web desing + The dates are calculates for display +*/ + +.cliplibre-js-responsive-container.librevjs-hd { + padding-top: 56.25%; +} + +.cliplibre-js-responsive-container.librevjs-sd { + padding-top: 75%; +} + +.cliplibre-js-responsive-container { + width: 100%; + position: relative; +} + +.cliplibre-js-responsive-container .cliplibre-js { + height: 100% !important; + width: 100% !important; + position: absolute; + top: 0; + left: 0; +} + +@media screen and (max-width: 800px) { + .cliplibre-js .librevjs-text-track { + font-size: 1.5em; + margin-bottom: -0.2em; + line-height: 1.5; + } +} + +@media screen and (max-width: 600px) { + .cliplibre-js .librevjs-text-track { + font-size: 1.2em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 2em; + } +} + +@media screen and (max-width: 413px) { + .cliplibre-js { + font-size: 8px; + } +} + +@media screen and (max-width: 400px) { + .cliplibre-js .librevjs-text-track { + font-size: 1em; + } + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 2em; + } + .cliplibre-js .librevjs-text-track-display { + bottom: 1em; + } +} + +@media screen and (max-width: 335px) { + .cliplibre-js { + font-size: 6px; + } +} + +@media screen and (max-width: 150px) { + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 1.8em; + } +} + +@media screen and (max-width: 90px) { + .librevjs-libre-mix-skin .librevjs-big-play-button { + font-size: 1.4em; + } +} + +/* End Responsive*/ + +// MIXINS +// ============================================================================= +// Mixins are a LESS feature and are used to add vendor prefixes to CSS rules +// when needed. + +// https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow +.box-shadow (@string: 0 0 1em rgba(0, 0, 0, 0.25)) { + /* box-shadow */// + -webkit-box-shadow: @string; + -moz-box-shadow: @string; + box-shadow: @string; +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius +.border-radius (@string: 5px) { + /* border-radius */// + -webkit-border-radius: @string; + -moz-border-radius: @string; + border-radius: @string; +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/transition +.transition (@string: all 1s linear) { + /* transition */// + -webkit-transition: @string; + -moz-transition: @string; + -o-transition: @string; + transition: @string; +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/transition +.transition-delay (@string: 1s) { + /* transition-delay */// + -webkit-transition-delay: @string; + -moz-transition-delay: @string; + -o-transition-delay: @string; + transition-delay: @string; +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/animation +.animation (@string: spin 1s infinite linear) { + /* animation */// + -webkit-animation: @string; + -moz-animation: @string; + -o-animation: @string; + animation: @string; +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/transform +.transform (@string: rotate(-45deg)) { + /* transform */// + -webkit-transform: @string; + -moz-transform: @string; + -ms-transform: @string; + -o-transform: @string; + transform: @string; +} + +// https://developer.mozilla.org/en-US/docs/Web/CSS/user-select +.user-select (@string: none) { + /* user-select */// + -webkit-user-select: @string; + -moz-user-select: @string; + -ms-user-select: @string; + user-select: @string; +} + +// Hide something visually but keep available for screen readers. +// http://h5bp.com/v +.hide-visually () { + /* hide-visually */// + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +// Align an object with absolute positioning +// Used to align the Big Play Button in the corners or center +.absolute-align (@align, @margin, @length) when (@align = top) { + top: @margin; +} +.absolute-align (@align, @margin, @length) when (@align = bottom) { + bottom: @margin; +} +.absolute-align (@align, @margin, @length) when (@align = left) { + left: @margin; +} +.absolute-align (@align, @margin, @length) when (@align = right) { + right: @margin; +} +.absolute-align (@align, @margin, @length) when (@align = center) { + /* Center it horizontally */// + left: 50%; + margin-left: (-(@length/2)); + // margin-left: ((@length*-1)/2); +} +.absolute-align (@align, @margin, @length) when (@align = middle) { + /* Center it vertically */// + top: 50%; + margin-top: (-(@length/2)); + // margin-top: ((@length*-1)/2); +} + +// http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text +.background-color-with-alpha (@color, @alpha) { + @rgba: rgba(red(@color), green(@color), blue(@color), @alpha); + /* background-color-with-alpha */// + background-color: @color; + background-color: @rgba; + // No longer using MS filters because they break border radius in IE9 + // @argb: argb(@rgba); + // filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})"; + // -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})"; +} + +.border-color-with-alpha (@color, @alpha) { + @rgba: rgba(red(@color), green(@color), blue(@color), @alpha); + /* border-color-with-alpha */// + border-color: @color; + border-color: @rgba; +} + +// Autonomes styles for quality selector and progressTips + +/* Quality Selector Universal +------------------------------------------------------------------------------*/ +/* Position the button */ +.librevjs-res-button { + font-weight: bold; + float: right; + line-height: 3em; +} + +/* Don't show hover effects on title */ +ul li.librevjs-menu-title.librevjs-res-menu-title:hover { + cursor: default; + background-color: transparent; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Needed to keep text visible in LibreVideoJS */ +.librevjs-res-button .librevjs-control-text { + width: auto; + height: auto; + clip: auto; +} + +/* ProgressTips Universal +------------------------------------------------------------------------------*/ +.librevjs-progress-tip { + visibility: hidden; + display: block; + opacity: 0.8; + padding: 5px; + font-size: 10px; + position: absolute; + z-index: 100000; +} + +.librevjs-progress-tip-arrow { + background: url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) no-repeat top left; + bottom: 0; + left: 50%; + margin-left: -4px; + background-position: bottom left; + position: absolute; + width: 9px; + height: 5px; +} + +.librevjs-progress-tip-inner { + border-radius: 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + padding: 5px 8px 4px 8px; + background-color: black; + color: white; + max-width: 200px; + text-align: center; +} + +// NOTES ON LESS (tracking learnings so we don't forget) +// ============================================================================= +// * We want this file to continue to be accessible by people who don't know +// LESS but know CSS. This means finding the balance between using the most +// valuable LESS features (e.g. variables) and keeping it looking like CSS. +// So it's best to avoid advanced LESS features like conditional statements. +// (we're using one for the big play button position because that's a hot +// topic) +// +// * We care about the readability of the CSS output of LESS, which means we +// have to be careful about what features of LESS we use. (if you're building +// your own skin this may not apply) +// 1. Comments inside of rules (strangely) have an extra line added after +// them in the CSS output. To avoid this we can add a LESS comment after +// the CSS comment. +// /* comment */// +// +// 2. In a rule with nested rules, any comments outside of a rule are moved +// to the top of the parent rule. i.e. it might look like: +// /* title of rule 1 */ +// /* title of rule 2 */ +// .rule1 {} +// .rule2 {} +// This is why we aren't using nested rules inside of the +// librevjs-default-skin class. + +/* ----------------------------------------------------------------------------- +The original source of this file lives at +https://github.com/videojs/video.js/blob/master/src/css/video-js.less */ diff --git a/css/librevideojs/teal.min.css b/css/librevideojs/teal.min.css new file mode 100644 index 0000000..5af057b --- /dev/null +++ b/css/librevideojs/teal.min.css @@ -0,0 +1,18 @@ +/*!LibreVideoJS Version 2.0 Copyright 2017,Jesus E. */ .librevjs-libre-mix-skin{color:#fff}@font-face{font-family:'LibreVideoJS';src:url('../../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'),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#icomoon') format('svg');font-weight:normal;font-style:normal}.librevjs-libre-mix-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#333;background-color:rgba(51,51,51,0.9)}.librevjs-libre-mix-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-mix-skin .librevjs-slider-handle{position:absolute;left:0;top:0}.librevjs-libre-mix-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-mix-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232221;background-color:rgba(35,34,33,0.8)} +.librevjs-libre-mix-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-libre-mix-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-libre-mix-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}.librevjs-libre-mix-skin.librevjs-error .librevjs-control-bar{display:none}.librevjs-audio.librevjs-libre-mix-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{opacity:1;visibility:visible}@media \0screen{.librevjs-libre-mix-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""} +}.librevjs-libre-mix-skin .librevjs-control{outline:none;position:relative;float:left;text-align:center;margin:0;padding:0;height:3.0em;width:4em}.librevjs-libre-mix-skin .librevjs-control:before{font-family:LibreVideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,0.5)}.librevjs-libre-mix-skin .librevjs-control:hover:before{color:#1de9b6}.librevjs-libre-mix-skin .librevjs-control:focus{}.librevjs-libre-mix-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-mix-skin .librevjs-play-control{width:5em;cursor:pointer;color:#1de9b6}.librevjs-libre-mix-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-mix-skin .librevjs-play-control:hover:before{color:#007c5d}.librevjs-libre-mix-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-mix-skin .librevjs-playback-rate .librevjs-playback-rate-value{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,0.5)} +.librevjs-libre-mix-skin .librevjs-playback-rate.librevjs-menu-button .librevjs-menu .librevjs-menu-content{width:4em;left:-2em;list-style:none}.librevjs-libre-mix-skin .librevjs-mute-control,.librevjs-libre-mix-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-mix-skin .librevjs-mute-control:before,.librevjs-libre-mix-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-mix-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-mix-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0} +.librevjs-libre-mix-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.6em;width:100%;background:#1de9b6}.librevjs-libre-mix-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em;left:4.5em}.librevjs-libre-mix-skin .librevjs-volume-handle:before{font-size:.9em;top:-0.2em;left:-0.2em;width:1em;height:1em}.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu{display:block;width:0;height:0;border-top-color:transparent}.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{height:0;width:0;transform:rotate(-90deg)}.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-menu-button .librevjs-menu .librevjs-menu-content{margin-bottom:3.2em}.librevjs-libre-mix-skin .librevjs-volume-menu-button:hover .librevjs-menu .librevjs-menu-content,.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu.librevjs-lock-showing .librevjs-menu-content{height:2.9em;width:10em}.librevjs-libre-mix-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s} +.librevjs-libre-mix-skin:hover .librevjs-progress-control{font-size:1em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-libre-mix-skin .librevjs-progress-holder{height:100%}.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress,.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress div{position:absolute;display:block;height:100%;margin:0;padding:0;width:0;left:0;top:0}.librevjs-libre-mix-skin .librevjs-play-progress{background:#1de9b6}.librevjs-libre-mix-skin .librevjs-load-progress{background:#d6dbdf;background:rgba(214,219,223,0.6)}.librevjs-libre-mix-skin .librevjs-load-progress div{background:#787878;background:rgba(255,255,255,0.1)}.librevjs-libre-mix-skin .librevjs-seek-handle{width:2em;height:2em;border-radius:1em;top:-0.5em;background-color:#007c5d;opacity:0;transition:opacity .4s ease-in-out}.librevjs-libre-mix-skin .librevjs-progress-control:hover .librevjs-slider-handle{opacity:1;transition:opacity .4s ease-in-out} +.librevjs-libre-mix-skin.librevjs-live .librevjs-time-controls,.librevjs-libre-mix-skin.librevjs-live .librevjs-time-divider,.librevjs-libre-mix-skin.librevjs-live .librevjs-progress-control{display:none}.librevjs-libre-mix-skin.librevjs-live .librevjs-live-display{display:block}.librevjs-libre-mix-skin .librevjs-live-display{display:none;font-size:1em;line-height:3em}.librevjs-libre-mix-skin .librevjs-time-controls{font-size:1.083em;font-weight:bold;color:#d6dbdf;line-height:3em;width:3em}.librevjs-libre-mix-skin .librevjs-current-time{float:left}.librevjs-libre-mix-skin .librevjs-current-time-display{float:right}.librevjs-libre-mix-skin .librevjs-duration,.librevjs-libre-mix-skin .librevjs-duration .librevjs-duration-display{float:left}.librevjs-libre-mix-skin .librevjs-remaining-time{display:none;float:left}.librevjs-time-divider{float:left;line-height:3em;font-size:1.083em;font-weight:bold;width:1em;text-align:center}.librevjs-libre-mix-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right} +.librevjs-libre-mix-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-mix-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-mix-skin .librevjs-big-play-button{left:50%;top:50%;font-size:2em;display:block;z-index:2;position:absolute;width:3.8em;height:2.6em;margin-left:-1.9em;margin-top:-1.52em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;color:#fff;background-color:#333;background-color:rgba(51,51,51,0.9);-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mix-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-mix-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-mix-skin:hover .librevjs-big-play-button,.librevjs-libre-mix-skin .librevjs-big-play-button:focus{color:#fff;background-color:#1de9b6} +.librevjs-libre-mix-skin .librevjs-big-play-button:before{content:"\e001";font-family:LibreVideoJS;text-align:center;text-shadow:.05em .05em .1em #000;line-height:2.6em;position:absolute;left:0;width:100%;height:100%}.librevjs-error .librevjs-big-play-button{display:none}.librevjs-error-display{display:none}.librevjs-error .librevjs-error-display{display:block;position:absolute;left:0;top:0;width:100%;height:100%}.librevjs-error .librevjs-error-display:before{content:'X';font-family:Arial;font-size:4em;color:#666;line-height:1;text-shadow:.05em .05em .1em #000;text-align:center;vertical-align:middle;position:absolute;left:0;top:50%;margin-top:-0.5em;width:100%}.librevjs-error-display div{position:absolute;bottom:1em;right:0;left:0;font-size:1.4em;text-align:center;padding:3px;background:#000;background:rgba(0,0,0,0.5)}.librevjs-error-display a,.librevjs-error-display a:visited{color:#F4A460}.librevjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;font-size:4em;line-height:1;width:1em;height:1em;margin-left:-0.5em;margin-top:-0.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-waiting .librevjs-loading-spinner,.librevjs-seeking .librevjs-loading-spinner{display:block;-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-error .librevjs-loading-spinner{display:none;-webkit-animation:none;-moz-animation:none;-o-animation:none;animation:none}.librevjs-libre-mix-skin .librevjs-loading-spinner:before{content:"\e01e";font-family:LibreVideoJS;position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.librevjs-libre-mix-skin .librevjs-menu-button{float:right;cursor:pointer} +.librevjs-libre-mix-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(0,0,0,0.4)}.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected{color:#0d1f2c;background-color:#1de9b6}.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mix-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#007c5d;background-color:#1de9b6}.librevjs-libre-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title{color:#1de9b6;background-color:inherit}.librevjs-libre-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#1de9b6;background-color:inherit}.librevjs-libre-mix-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#232221;background-color:rgba(0,0,0,0.4);-webkit-box-shadow:-0.2em -0.2em .3em rgba(255,255,255,0.2);-moz-box-shadow:-0.2em -0.2em .3em rgba(255,255,255,0.2);box-shadow:-0.2em -0.2em .3em rgba(255,255,255,0.2)} +.librevjs-libre-mix-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-mix-skin.librevjs-scrubbing .librevjs-menu-button:hover .librevjs-control-content .librevjs-menu{display:none}.librevjs-libre-mix-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0 .3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected{background-color:#1de9b6}.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mix-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#0d1f2c;background-color:#1de9b6}.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em 0;font-weight:bold;cursor:default} +.librevjs-libre-mix-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-mix-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-mix-skin .librevjs-chapters-button:before{content:"\e00c"}.librevjs-libre-mix-skin .librevjs-chapters-button.librevjs-menu-button .librevjs-menu .librevjs-menu-content{width:24em;left:-12em}.librevjs-libre-mix-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mix-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.cliplibre-js{background-color:#000;position:relative;padding:0;font-size:12px;vertical-align:middle;font-weight:normal;font-style:normal;font-family:Arial,Helvetica,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cliplibre-js .librevjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.cliplibre-js:-moz-full-screen{position:absolute} +body.librevjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.cliplibre-js.librevjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important;_position:absolute}.cliplibre-js:-webkit-full-screen{width:100%!important;height:100%!important}.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive{cursor:none}.librevjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#000;cursor:pointer;margin:0;padding:0;position:absolute;top:0;right:0;bottom:0;left:0}.librevjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.cliplibre-js.librevjs-has-started .librevjs-poster{display:none}.cliplibre-js.librevjs-audio.librevjs-has-started .librevjs-poster{display:block}.cliplibre-js.librevjs-controls-disabled .librevjs-poster{display:none}.cliplibre-js.librevjs-using-native-controls .librevjs-poster{display:none}.cliplibre-js .librevjs-text-track-display{text-align:center;position:absolute;bottom:4em;left:1em;right:1em} +.cliplibre-js .librevjs-subtitles{color:#fff}.cliplibre-js .librevjs-captions{color:#fff;background-color:rgba(2,7,11,0.7)}.librevjs-caption-settings{position:relative;top:1em;background-color:#000;opacity:.75;color:#FFF;margin:0 auto;padding:.5em;height:15em;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:40em}.librevjs-caption-settings .librevjs-tracksettings{top:0;bottom:2em;left:0;right:0;position:absolute;overflow:auto}.librevjs-caption-settings .librevjs-tracksettings-colors,.librevjs-caption-settings .librevjs-tracksettings-font{float:left}.librevjs-caption-settings .librevjs-tracksettings-colors:after,.librevjs-caption-settings .librevjs-tracksettings-font:after,.librevjs-caption-settings .librevjs-tracksettings-controls:after{clear:both}.librevjs-caption-settings .librevjs-tracksettings-controls{position:absolute;bottom:1em;right:1em}.librevjs-caption-settings .librevjs-tracksetting{margin:5px;padding:3px;min-height:40px}.librevjs-caption-settings .librevjs-tracksetting label{display:block;width:100px;margin-bottom:5px} +.librevjs-caption-settings .librevjs-tracksetting span{display:inline;margin-left:5px}.librevjs-caption-settings .librevjs-tracksetting>div{margin-bottom:5px;min-height:20px}.librevjs-caption-settings .librevjs-tracksetting>div:last-child{margin-bottom:0;padding-bottom:0;min-height:0}.librevjs-caption-settings label>input{margin-right:10px}.librevjs-caption-settings input[type="button"]{width:40px;height:40px}.librevjs-hidden{display:none!important}.librevjs-lock-showing{display:block!important;opacity:1;visibility:visible}.librevjs-no-js{padding:2em;color:#ccc;background-color:#333;font-size:1.8em;font-family:Arial,sans-serif;text-align:center;width:30em;height:15em;margin:0 auto}.librevjs-no-js a,.librevjs-no-js a:visited{color:#F4A460}.cliplibre-js-responsive-container.librevjs-hd{padding-top:56.25%}.cliplibre-js-responsive-container.librevjs-sd{padding-top:75%}.cliplibre-js-responsive-container{width:100%;position:relative}.cliplibre-js-responsive-container .cliplibre-js{height:100%!important;width:100%!important;position:absolute;top:0;left:0} +@media screen and (max-width:800px){.cliplibre-js .librevjs-text-track{font-size:1.5em;margin-bottom:-0.2em;line-height:1.5}}@media screen and (max-width:600px){.cliplibre-js .librevjs-text-track{font-size:1.2em}.cliplibre-js .librevjs-text-track-display{bottom:2em}}@media screen and (max-width:413px){.cliplibre-js{font-size:8px}}@media screen and (max-width:400px){.cliplibre-js .librevjs-text-track{font-size:1em}.librevjs-libre-mix-skin .librevjs-big-play-button{font-size:2em}.cliplibre-js .librevjs-text-track-display{bottom:1em}}@media screen and (max-width:335px){.cliplibre-js{font-size:6px}}@media screen and (max-width:150px){.librevjs-libre-mix-skin .librevjs-big-play-button{font-size:1.8em}}@media screen and (max-width:90px){.librevjs-libre-mix-skin .librevjs-big-play-button{font-size:1.4em}}.librevjs-res-button{font-weight:bold;float:right;line-height:3em}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{cursor:default;background-color:transparent;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none} +.librevjs-res-button .librevjs-control-text{width:auto;height:auto;clip:auto}.librevjs-progress-tip{visibility:hidden;display:block;opacity:.8;padding:5px;font-size:10px;position:absolute;z-index:100000}.librevjs-progress-tip-arrow{background:url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) no-repeat top left;bottom:0;left:50%;margin-left:-4px;background-position:bottom left;position:absolute;width:9px;height:5px}.librevjs-progress-tip-inner{border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px 8px;background-color:black;color:white;max-width:200px;text-align:center}
\ No newline at end of file diff --git a/css/mix-material/master.css b/css/mix-material/master.css deleted file mode 100644 index e13ad10..0000000 --- a/css/mix-material/master.css +++ /dev/null @@ -1,4065 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados -Version 1.4 -Escrito por Jesús Eduardo -*/ - - -/* SKIN -================================================================================ -The main class name for all skin-specific styles. To make your own skin, -replace all occurances of 'librevjs-default-skin' with a new name. Then add your new -skin name to your video tag instead of the default skin. -e.g. <video class="librevideo-js my-skin-name"> -*/ - - -/* Custom Icon Font --------------------------------------------------------------------------------- -The control icons are from a custom font. Each icon corresponds to a character -(e.g. "\e002"). Font icons allow for easy scaling and coloring of icons. -*/ - - -/* Universal fonts */ - -@font-face { - font-family:"LibreVideoJS"; - src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype"); - src: local('?'), - url("../../fonts/libre-material/libre-icons.woff") format("woff"), - url("../../fonts/libre-material/libre-icons.ttf") format("truetype"), - url("../../fonts/libre-material/libre-icons.svg") format("svg"); -} - - -/* Skins -=========================================================================================================================*/ - - -/* Skin-Blue ------------------------------------------------------------------------------------------------------------*/ - -.librevjs-libre-mixblue-skin { - color: #ccc; - background-color: inherit; -} - - -/* Base UI Component Classes ---------------------------------------------------------------------------------*/ - - -/* Slider - used for Volume bar and Seek bar */ - -.librevjs-libre-mixblue-skin .librevjs-slider { - /* Replace browser focus highlight with handle highlight */ - outline: 0; - position: relative; - cursor: pointer; - padding: 0; - /* background-color-with-alpha */ - background-color: #000000; - background-color: rgba(0, 0, 0, 0.5); -} - -.librevjs-libre-mixblue-skin .librevjs-slider:focus { - -webkit-box-shadow: 0 0 2em #fff; - -moz-box-shadow: 0 0 2em #fff; - box-shadow: 0 0 2em #fff; -} - - -/*Eliminación de botón de barra de progreso*/ - -.librevjs-libre-mixblue-skin .librevjs-slider-handle { - width: 0; - height: 0; -} - -.librevjs-libre-mixblue-skin .librevjs-slider-handle:before { - text-shadow: 0em 0em 1em #fff; - position: absolute; - top: 0; - left: 0; -} - - -/* Control Bar --------------------------------------------------------------------------------- -The default control bar that is a container for most of the controls. -*/ - -.librevjs-libre-mixblue-skin .librevjs-control-bar { - /* Start hidden */ - display: none; - position: absolute; - /* Place control bar at the bottom of the player box/video. - If you want more margin below the control bar, add more height. */ - bottom: 0; - /* Use left/right to stretch to 100% width of player div */ - left: 0; - right: 0; - /* Height includes any margin you want above or below control items */ - height: 3.0em; - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); -} - - -/* Show the control bar only once the video has started playing */ - -.librevjs-libre-mixblue-skin.librevjs-has-started .librevjs-control-bar { - display: block; - visibility: visible; - opacity: 1; - -webkit-transition: visibility .1s, opacity .1s; - -moz-transition: visibility .1s, opacity .1s; - -o-transition: visibility .1s, opacity .1s; - transition: visibility .1s, opacity .1s -} - - -/* Hide the control bar when the video is playing and the user is inactive */ - -.librevjs-libre-mixblue-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { - display: block; - visibility: hidden; - opacity: 0; - -webkit-transition: visibility 1s, opacity 1s; - -moz-transition: visibility 1s, opacity 1s; - -o-transition: visibility 1s, opacity 1s; - transition: visibility 1s, opacity 1s -} - -.librevjs-libre-mixblue-skin.librevjs-controls-disabled .librevjs-control-bar { - display: none -} - -.librevjs-libre-mixblue-skin.librevjs-using-native-controls .librevjs-control-bar { - display: none -} - -@media \0screen { - .librevjs-libre-mixblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content: "" - } -} - - -/* General styles for individual controls. */ - -.librevjs-libre-mixblue-skin .librevjs-control { - outline: 0; - position: relative; - float: left; - text-align: center; - margin: 0; - padding: 0; - height: 3em; - width: 4em -} - - -/* FreeArt button icons: http://artlibre.org/licence/lal */ - -.librevjs-libre-mixblue-skin .librevjs-control:before { - font-family: LibreVideoJS; - font-size: 1.5em; - line-height: 2; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) -} - - -/* Replacement for focus outline */ - -.librevjs-libre-mixblue-skin .librevjs-control:focus:before, .librevjs-libre-mixblue-skin .librevjs-control:hover:before { - color: #2196F3; -} - -.librevjs-libre-mixblue-skin .librevjs-control:focus { - /* outline: 0; */ - /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ -} - - -/* Hide control text visually, but have it available for screenreaders */ - -.librevjs-libre-mixblue-skin .librevjs-control-text { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px -} - - -/* Play/Pause --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixblue-skin .librevjs-play-control { - width: 5em; - cursor: pointer; - color: rgb(33, 150, 244); -} - -.librevjs-libre-mixblue-skin .librevjs-play-control:before { - content: "\e001" -} - -.librevjs-libre-mixblue-skin .librevjs-play-control:hover:before { - color: #2980b9; - /*color de play control al pasar el cursor*/ -} - -.librevjs-libre-mixblue-skin.librevjs-playing .librevjs-play-control:before { - content: "\e002" -} - - -/* Volume/Mute --------------------------------------------------------------------------------- */ - -.librevjs-libre-mixblue-skin .librevjs-mute-control, .librevjs-libre-mixblue-skin .librevjs-volume-menu-button { - cursor: pointer; - float: right -} - -.librevjs-libre-mixblue-skin .librevjs-mute-control:before, .librevjs-libre-mixblue-skin .librevjs-volume-menu-button:before { - content: "\e006" -} - -.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before { - content: "\e003" -} - -.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before { - content: "\e004" -} - -.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before { - content: "\e005" -} - -.librevjs-libre-mixblue-skin .librevjs-volume-control { - width: 5em; - float: right -} - -.librevjs-libre-mixblue-skin .librevjs-volume-bar { - width: 5em; - height: .6em; - margin: 1.1em auto 0 -} - -.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu-content { - height: 2.9em -} - - -/*Personalización del nivel de volumen*/ - -.librevjs-libre-mixblue-skin .librevjs-volume-level { - position: absolute; - top: 0; - left: 0; - height: 0.5em; - /* assuming volume starts at 1.0 */ - width: 100%; - background: #2196F3 url() -50% 0 repeat; -} - -.librevjs-libre-mixblue-skin .librevjs-volume-bar .librevjs-volume-handle { - width: .5em; - height: .5em -} - -.librevjs-libre-mixblue-skin .librevjs-volume-handle:before { - font-size: .9em; - top: -.2em; - left: -.2em; - width: 1em; - height: 1em; -} - -.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { - width: 6em; - left: -4em; -} - - -/* Progress --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixblue-skin .librevjs-progress-control { - position: absolute; - left: 0; - right: 0; - width: auto; - font-size: .3em; - height: 1em; - top: -1em; - -webkit-transition: all .4s; - -moz-transition: all .4s; - -o-transition: all .4s; - transition: all .4s; -} - -.librevjs-libre-mixblue-skin:hover .librevjs-progress-control { - font-size: .9em; - -webkit-transition: all .2s; - -moz-transition: all .2s; - -o-transition: all .2s; - transition: all .2s; -} - - -/* Box containing play and load progress. Also acts as seek scrubber. */ - -.librevjs-libre-mixblue-skin .librevjs-progress-holder { - height: 100%; -} - - -/* Progress Bars */ - -.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-load-progress { - position: absolute; - display: block; - height: 100%; - margin: 0; - padding: 0; - left: 0; - top: 0 -} - -.librevjs-libre-mixblue-skin .librevjs-play-progress { - background: #2196F3 url() -50% 0 repeat; -} - -.librevjs-libre-mixblue-skin .librevjs-load-progress { - background: #646464; - background: rgba(255, 255, 255, .4) -} - -.librevjs-libre-mixblue-skin .librevjs-seek-handle { - width: 1.5em; - height: 100% -} - -.librevjs-libre-mixblue-skin .librevjs-seek-handle:before { - padding-top: .1em -} - - -/* Time Display --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixblue-skin .librevjs-time-controls { - font-size: 1em; - font-weight: 700; - /*mayor visibilidad*/ - line-height: 3em -} - -.librevjs-libre-mixblue-skin .librevjs-current-time { - float: left -} - -.librevjs-libre-mixblue-skin .librevjs-duration { - float: left -} - -.librevjs-libre-mixblue-skin .librevjs-remaining-time { - display: none; - float: left -} - - -/* Fullscreen --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixblue-skin .librevjs-fullscreen-control { - width: 3.8em; - cursor: pointer; - float: right -} - -.librevjs-libre-mixblue-skin .librevjs-fullscreen-control:before { - content: "\e000" -} - - -/* Switch to the exit icon when the player is in fullscreen */ - -.librevjs-libre-mixblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content: "\e00b" -} - - -/* Big Play Button (play button at start) --------------------------------------------------------------------------------- -Positioning of the play button in the center or other corners can be done more -easily in the skin designer by LibreVideoJS FreeArts. -*/ - -.librevjs-libre-mixblue-skin .librevjs-big-play-button { - /* Center it horizontally */ - left: 50%; - margin-left: -1.85em; - /* Center it vertically */ - top: 50%; - margin-top: -1.3em; - font-size: 2em; - display: block; - z-index: 2; - position: absolute; - width: 3.8em; - height: 2.6em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - /* Need a slightly gray bg so it can be seen on black backgrounds */ - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); - border: 0 solid; - /* border-radius */ - -webkit-border-radius: 0.4em; - -moz-border-radius: 0.4em; - border-radius: 0.4em; - /* transition */ - -webkit-transition: all 0.4s; - -moz-transition: all 0.4s; - -o-transition: all 0.4s; - transition: all 0.4s; -} - - -/* Hide if controls are disabled */ - -.librevjs-libre-mixblue-skin.librevjs-controls-disabled .librevjs-big-play-button { - display: none; -} - - -/* Hide when video starts playing */ - -.librevjs-libre-mixblue-skin.librevjs-has-started .librevjs-big-play-button { - display: none; -} - - -/* Hide on mobile devices. Remove when we stop using native controls - by default on mobile */ - -.librevjs-libre-mixblue-skin.librevjs-using-native-controls .librevjs-big-play-button { - display: none; -} - -.librevjs-libre-mixblue-skin:hover .librevjs-big-play-button, .librevjs-libre-mixblue-skin .librevjs-big-play-button:focus { - outline: 0; - cursor: pointer; - /* IE8 needs a non-glow hover state */ - background-color: #2196F3; - /*color del boton play al hacer focus*/ - color: #FFFFFF; -} - -.librevjs-libre-mixblue-skin .librevjs-big-play-button:before { - content: "\e001"; - font-family: LibreVideoJS; - /* In order to center the play icon vertically we need to set the line height - to the same as the button height */ - line-height: 2.6em; - text-shadow: 0.05em 0.05em 0.1em #000; - text-align: center/* Needed for IE8 */ - ; - position: absolute; - left: 0; - width: 100%; - height: 100%; -} - - -/* Menu Buttons (Captions/Subtitles/etc.) --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixblue-skin .librevjs-menu-button { - float: right; - cursor: pointer; -} - -.librevjs-libre-mixblue-skin .librevjs-menu { - display: none; - position: absolute; - bottom: 0; - left: 0; - width: 0; - height: 0; - margin-bottom: 3em; - border-left: 2em solid transparent; - border-right: 2em solid transparent; - border-top: 1.55em solid #000; - border-top-color: rgba(7, 40, 50, .5); -} - - -/* Button Pop-up Menu */ - -.librevjs-libre-mixblue-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { - display: block; - padding: 0; - margin: 0; - position: absolute; - width: 10em; - bottom: 1.5em; - /* Same bottom as librevjs-menu border-top */ - max-height: 15em; - overflow: auto; - left: -5em; - /* Width of menu - width of button / 2 */ - /* background-color-with-alpha */ - background-color: #07141e; - background-color: rgba(7, 20, 30, .7); - -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); - -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); - box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); -} - -.librevjs-libre-mixblue-skin .librevjs-menu-button:hover .librevjs-menu { - display: block; -} - -.librevjs-libre-mixblue-skin .librevjs-menu-button ul li { - list-style: none; - margin: 0; - padding: .3em 0; - line-height: 1.4em; - font-size: 1.2em; - text-align: center; - text-transform: lowercase; - color: #ccc; -} - - -/* Select color menu subtitles/captions */ - -.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected { - color: rgb(11, 21, 42); - background-color: rgb(33, 150, 244); -} - -.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:focus, .librevjs-libre-mixblue-skin .librevjs-menu-button ul li:hover, .librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:hover { - outline: 0; - color: rgb(11, 21, 42); - background-color: #2196F3; -} - - -/*End Select color menu subtitles/caption */ - -.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-menu-title { - text-align: center; - text-transform: uppercase; - font-size: 1em; - line-height: 2em; - padding: 0; - margin: 0 0 .3em; - font-weight: 700; - cursor: default; -} - - -/* Subtitles Button */ - -.librevjs-libre-mixblue-skin .librevjs-subtitles-button:before { - content: "\e00c" -} - - -/* Captions Button */ - -.librevjs-libre-mixblue-skin .librevjs-captions-button:before { - content: "\e008" -} - - -/* Replacement for focus outline */ - -.librevjs-libre-mixblue-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-mixblue-skin .librevjs-captions-button:hover .librevjs-control-content:before { - -webkit-box-shadow: 0 0 1em #fff; - -moz-box-shadow: 0 0 1em #fff; - box-shadow: 0 0 1em #fff; -} - - -/* Hide disabled or unsupported controls */ - -.librevjs-libre-mixblue-skin .librevjs-hidden { - display: none -} - - -/*Title Resolution | subtitles and Caption*/ - -.librevjs-libre-mixblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title { - color: rgb(33, 150, 244); - background-color: inherit; -} - -.librevjs-libre-mixblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover { - color: rgb(11, 137, 237); - background-color: inherit; -} - -@media screen and (max-width: 400px) { - .librevjs-libre-mixblue-skin .librevjs-big-play-button { - font-size: 2em; - } -} - -@media screen and (max-width: 150px) { - .librevjs-libre-mixblue-skin .librevjs-big-play-button { - font-size: 1.8em; - } -} - -@media screen and (max-width: 90px) { - .librevjs-libre-mixblue-skin .librevjs-big-play-button { - font-size: 1.4em; - } -} - - -/* Skin-Grey -------------------------------------------------------------------------------------------------------*/ - -.librevjs-libre-mixgrey-skin { - color: #ccc; - background-color: inherit; -} - - -/* Base UI Component Classes ---------------------------------------------------------------------------------*/ -/* Slider - used for Volume bar and Seek bar */ - -.librevjs-libre-mixgrey-skin .librevjs-slider { - /* Replace browser focus highlight with handle highlight */ - outline: 0; - position: relative; - cursor: pointer; - padding: 0; - /* background-color-with-alpha */ - background-color: #000000; - background-color: rgba(0, 0, 0, 0.5); -} - -.librevjs-libre-mixgrey-skin .librevjs-slider:focus { - -webkit-box-shadow: 0 0 2em #fff; - -moz-box-shadow: 0 0 2em #fff; - box-shadow: 0 0 2em #fff; -} - - -/*Eliminación de botón de barra de progreso*/ - -.librevjs-libre-mixgrey-skin .librevjs-slider-handle { - width: 0; - height: 0; -} - -.librevjs-libre-mixgrey-skin .librevjs-slider-handle:before { - text-shadow: 0em 0em 1em #fff; - position: absolute; - top: 0; - left: 0; -} - - -/* Control Bar --------------------------------------------------------------------------------- -The default control bar that is a container for most of the controls. -*/ - -.librevjs-libre-mixgrey-skin .librevjs-control-bar { - /* Start hidden */ - display: none; - position: absolute; - /* Place control bar at the bottom of the player box/video. - If you want more margin below the control bar, add more height. */ - bottom: 0; - /* Use left/right to stretch to 100% width of player div */ - left: 0; - right: 0; - /* Height includes any margin you want above or below control items */ - height: 3.0em; - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); -} - - -/* Show the control bar only once the video has started playing */ - -.librevjs-libre-mixgrey-skin.librevjs-has-started .librevjs-control-bar { - display: block; - visibility: visible; - opacity: 1; - -webkit-transition: visibility .1s, opacity .1s; - -moz-transition: visibility .1s, opacity .1s; - -o-transition: visibility .1s, opacity .1s; - transition: visibility .1s, opacity .1s -} - - -/* Hide the control bar when the video is playing and the user is inactive */ - -.librevjs-libre-mixgrey-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { - display: block; - visibility: hidden; - opacity: 0; - -webkit-transition: visibility 1s, opacity 1s; - -moz-transition: visibility 1s, opacity 1s; - -o-transition: visibility 1s, opacity 1s; - transition: visibility 1s, opacity 1s -} - -.librevjs-libre-mixgrey-skin.librevjs-controls-disabled .librevjs-control-bar { - display: none -} - -.librevjs-libre-mixgrey-skin.librevjs-using-native-controls .librevjs-control-bar { - display: none -} - -@media \0screen { - .librevjs-libre-mixgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content: "" - } -} - - -/* General styles for individual controls. */ - -.librevjs-libre-mixgrey-skin .librevjs-control { - outline: 0; - position: relative; - float: left; - text-align: center; - margin: 0; - padding: 0; - height: 3em; - width: 4em -} - - -/* FreeArt button icons: http://artlibre.org/licence/lal */ - -.librevjs-libre-mixgrey-skin .librevjs-control:before { - font-family: LibreVideoJS; - font-size: 1.5em; - line-height: 2; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) -} - - -/* Replacement for focus outline */ - -.librevjs-libre-mixgrey-skin .librevjs-control:focus:before, .librevjs-libre-mixgrey-skin .librevjs-control:hover:before { - color: #9e9e9e; -} - -.librevjs-libre-mixgrey-skin .librevjs-control:focus { - /* outline: 0; */ - /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ -} - - -/* Hide control text visually, but have it available for screenreaders */ - -.librevjs-libre-mixgrey-skin .librevjs-control-text { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px -} - - -/* Play/Pause --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixgrey-skin .librevjs-play-control { - width: 5em; - cursor: pointer; - color: rgb(158, 158, 158); -} - -.librevjs-libre-mixgrey-skin .librevjs-play-control:before { - content: "\e001" -} - -.librevjs-libre-mixgrey-skin .librevjs-play-control:hover:before { - color: #7c7c7c; - /*color de play control al pasar el cursor*/ -} - -.librevjs-libre-mixgrey-skin.librevjs-playing .librevjs-play-control:before { - content: "\e002" -} - - -/* Volume/Mute --------------------------------------------------------------------------------- */ - -.librevjs-libre-mixgrey-skin .librevjs-mute-control, .librevjs-libre-mixgrey-skin .librevjs-volume-menu-button { - cursor: pointer; - float: right -} - -.librevjs-libre-mixgrey-skin .librevjs-mute-control:before, .librevjs-libre-mixgrey-skin .librevjs-volume-menu-button:before { - content: "\e006" -} - -.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-0:before { - content: "\e003" -} - -.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-1:before { - content: "\e004" -} - -.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-2:before { - content: "\e005" -} - -.librevjs-libre-mixgrey-skin .librevjs-volume-control { - width: 5em; - float: right -} - -.librevjs-libre-mixgrey-skin .librevjs-volume-bar { - width: 5em; - height: .6em; - margin: 1.1em auto 0 -} - -.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu-content { - height: 2.9em -} - - -/*Personalización del nivel de volumen*/ - -.librevjs-libre-mixgrey-skin .librevjs-volume-level { - position: absolute; - top: 0; - left: 0; - height: 0.5em; - /* assuming volume starts at 1.0 */ - width: 100%; - background: #9e9e9e url() -50% 0 repeat; -} - -.librevjs-libre-mixgrey-skin .librevjs-volume-bar .librevjs-volume-handle { - width: .5em; - height: .5em -} - -.librevjs-libre-mixgrey-skin .librevjs-volume-handle:before { - font-size: .9em; - top: -.2em; - left: -.2em; - width: 1em; - height: 1em; -} - -.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { - width: 6em; - left: -4em; -} - - -/* Progress --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixgrey-skin .librevjs-progress-control { - position: absolute; - left: 0; - right: 0; - width: auto; - font-size: .3em; - height: 1em; - top: -1em; - -webkit-transition: all .4s; - -moz-transition: all .4s; - -o-transition: all .4s; - transition: all .4s; -} - -.librevjs-libre-mixgrey-skin:hover .librevjs-progress-control { - font-size: .9em; - -webkit-transition: all .2s; - -moz-transition: all .2s; - -o-transition: all .2s; - transition: all .2s; -} - - -/* Box containing play and load progress. Also acts as seek scrubber. */ - -.librevjs-libre-mixgrey-skin .librevjs-progress-holder { - height: 100%; -} - - -/* Progress Bars */ - -.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-load-progress { - position: absolute; - display: block; - height: 100%; - margin: 0; - padding: 0; - left: 0; - top: 0 -} - -.librevjs-libre-mixgrey-skin .librevjs-play-progress { - background: #9e9e9e url() -50% 0 repeat; -} - -.librevjs-libre-mixgrey-skin .librevjs-load-progress { - background: #646464; - background: rgba(255, 255, 255, .4) -} - -.librevjs-libre-mixgrey-skin .librevjs-seek-handle { - width: 1.5em; - height: 100% -} - -.librevjs-libre-mixgrey-skin .librevjs-seek-handle:before { - padding-top: .1em -} - - -/* Time Display --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixgrey-skin .librevjs-time-controls { - font-size: 1em; - font-weight: 700; - /*mayor visibilidad*/ - line-height: 3em -} - -.librevjs-libre-mixgrey-skin .librevjs-current-time { - float: left -} - -.librevjs-libre-mixgrey-skin .librevjs-duration { - float: left -} - -.librevjs-libre-mixgrey-skin .librevjs-remaining-time { - display: none; - float: left -} - - -/* Fullscreen --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control { - width: 3.8em; - cursor: pointer; - float: right -} - -.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control:before { - content: "\e000" -} - - -/* Switch to the exit icon when the player is in fullscreen */ - -.librevjs-libre-mixgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content: "\e00b" -} - - -/* Big Play Button (play button at start) --------------------------------------------------------------------------------- -Positioning of the play button in the center or other corners can be done more -easily in the skin designer by LibreVideoJS FreeArts. -*/ - -.librevjs-libre-mixgrey-skin .librevjs-big-play-button { - /* Center it horizontally */ - left: 50%; - margin-left: -1.85em; - /* Center it vertically */ - top: 50%; - margin-top: -1.3em; - font-size: 2em; - display: block; - z-index: 2; - position: absolute; - width: 3.8em; - height: 2.6em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - /* Need a slightly gray bg so it can be seen on black backgrounds */ - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); - border: 0 solid; - /* border-radius */ - -webkit-border-radius: 0.4em; - -moz-border-radius: 0.4em; - border-radius: 0.4em; - /* transition */ - -webkit-transition: all 0.4s; - -moz-transition: all 0.4s; - -o-transition: all 0.4s; - transition: all 0.4s; -} - - -/* Hide if controls are disabled */ - -.librevjs-libre-mixgrey-skin.librevjs-controls-disabled .librevjs-big-play-button { - display: none; -} - - -/* Hide when video starts playing */ - -.librevjs-libre-mixgrey-skin.librevjs-has-started .librevjs-big-play-button { - display: none; -} - - -/* Hide on mobile devices. Remove when we stop using native controls - by default on mobile */ - -.librevjs-libre-mixgrey-skin.librevjs-using-native-controls .librevjs-big-play-button { - display: none; -} - -.librevjs-libre-mixgrey-skin:hover .librevjs-big-play-button, .librevjs-libre-mixgrey-skin .librevjs-big-play-button:focus { - outline: 0; - cursor: pointer; - /* IE8 needs a non-glow hover state */ - background-color: rgb(115, 115, 115); - /*color del boton play al hacer focus*/ - color: #FFFFFF; -} - -.librevjs-libre-mixgrey-skin .librevjs-big-play-button:before { - content: "\e001"; - font-family: LibreVideoJS; - /* In order to center the play icon vertically we need to set the line height - to the same as the button height */ - line-height: 2.6em; - text-shadow: 0.05em 0.05em 0.1em #000; - text-align: center/* Needed for IE8 */ - ; - position: absolute; - left: 0; - width: 100%; - height: 100%; -} - - -/* Menu Buttons (Captions/Subtitles/etc.) --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixgrey-skin .librevjs-menu-button { - float: right; - cursor: pointer; -} - -.librevjs-libre-mixgrey-skin .librevjs-menu { - display: none; - position: absolute; - bottom: 0; - left: 0; - width: 0; - height: 0; - margin-bottom: 3em; - border-left: 2em solid transparent; - border-right: 2em solid transparent; - border-top: 1.55em solid #000; - border-top-color: rgba(7, 40, 50, .5); -} - - -/* Button Pop-up Menu */ - -.librevjs-libre-mixgrey-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { - display: block; - padding: 0; - margin: 0; - position: absolute; - width: 10em; - bottom: 1.5em; - /* Same bottom as librevjs-menu border-top */ - max-height: 15em; - overflow: auto; - left: -5em; - /* Width of menu - width of button / 2 */ - /* background-color-with-alpha */ - background-color: #07141e; - background-color: rgba(7, 20, 30, .7); - -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); - -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); - box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); -} - -.librevjs-libre-mixgrey-skin .librevjs-menu-button:hover .librevjs-menu { - display: block; -} - -.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li { - list-style: none; - margin: 0; - padding: .3em 0; - line-height: 1.4em; - font-size: 1.2em; - text-align: center; - text-transform: lowercase; - color: #ccc; -} - - -/* Select color menu subtitles/captions */ - -.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected { - color: #fff; - background-color: rgb(158, 158, 158); -} - -.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:focus, .librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:hover, .librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:hover { - outline: 0; - color: #fff; - background-color: #9e9e9e; -} - - -/*End Select color menu subtitles/caption */ - -.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-menu-title { - text-align: center; - text-transform: uppercase; - font-size: 1em; - line-height: 2em; - padding: 0; - margin: 0 0 .3em; - font-weight: 700; - cursor: default; -} - - -/* Subtitles Button */ - -.librevjs-libre-mixgrey-skin .librevjs-subtitles-button:before { - content: "\e00c" -} - - -/* Captions Button */ - -.librevjs-libre-mixgrey-skin .librevjs-captions-button:before { - content: "\e008" -} - - -/* Replacement for focus outline */ - -.librevjs-libre-mixgrey-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-mixgrey-skin .librevjs-captions-button:hover .librevjs-control-content:before { - -webkit-box-shadow: 0 0 1em #fff; - -moz-box-shadow: 0 0 1em #fff; - box-shadow: 0 0 1em #fff; -} - - -/* Hide disabled or unsupported controls */ - -.librevjs-libre-mixgrey-skin .librevjs-hidden { - display: none -} - - -/*Title Resolution | subtitles and Caption*/ - -.librevjs-libre-mixgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title { - color: #737373; - background-color: inherit; -} - -.librevjs-libre-mixgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover { - color: #9e9e9e; - background-color: inherit; -} - -@media screen and (max-width: 400px) { - .librevjs-libre-mixgrey-skin .librevjs-big-play-button { - font-size: 2em; - } -} - -@media screen and (max-width: 150px) { - .librevjs-libre-mixgrey-skin .librevjs-big-play-button { - font-size: 1.8em; - } -} - -@media screen and (max-width: 90px) { - .librevjs-libre-mixgrey-skin .librevjs-big-play-button { - font-size: 1.4em; - } -} - - -/* Skin-Purple -----------------------------------------------------------------------------------------------------*/ - -.librevjs-libre-mixpurple-skin { - color: #ccc; - background-color: inherit; -} - - -/* Base UI Component Classes ---------------------------------------------------------------------------------*/ -/* Slider - used for Volume bar and Seek bar */ - -.librevjs-libre-mixpurple-skin .librevjs-slider { - /* Replace browser focus highlight with handle highlight */ - outline: 0; - position: relative; - cursor: pointer; - padding: 0; - /* background-color-with-alpha */ - background-color: #000000; - background-color: rgba(0, 0, 0, 0.5); -} - -.librevjs-libre-mixpurple-skin .librevjs-slider:focus { - -webkit-box-shadow: 0 0 2em #fff; - -moz-box-shadow: 0 0 2em #fff; - box-shadow: 0 0 2em #fff; -} - - -/*Eliminación de botón de barra de progreso*/ - -.librevjs-libre-mixpurple-skin .librevjs-slider-handle { - width: 0; - height: 0; -} - -.librevjs-libre-mixpurple-skin .librevjs-slider-handle:before { - text-shadow: 0em 0em 1em #fff; - position: absolute; - top: 0; - left: 0; -} - - -/* Control Bar --------------------------------------------------------------------------------- -The default control bar that is a container for most of the controls. -*/ - -.librevjs-libre-mixpurple-skin .librevjs-control-bar { - /* Start hidden */ - display: none; - position: absolute; - /* Place control bar at the bottom of the player box/video. - If you want more margin below the control bar, add more height. */ - bottom: 0; - /* Use left/right to stretch to 100% width of player div */ - left: 0; - right: 0; - /* Height includes any margin you want above or below control items */ - height: 3.0em; - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); -} - - -/* Show the control bar only once the video has started playing */ - -.librevjs-libre-mixpurple-skin.librevjs-has-started .librevjs-control-bar { - display: block; - visibility: visible; - opacity: 1; - -webkit-transition: visibility .1s, opacity .1s; - -moz-transition: visibility .1s, opacity .1s; - -o-transition: visibility .1s, opacity .1s; - transition: visibility .1s, opacity .1s -} - - -/* Hide the control bar when the video is playing and the user is inactive */ - -.librevjs-libre-mixpurple-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { - display: block; - visibility: hidden; - opacity: 0; - -webkit-transition: visibility 1s, opacity 1s; - -moz-transition: visibility 1s, opacity 1s; - -o-transition: visibility 1s, opacity 1s; - transition: visibility 1s, opacity 1s -} - -.librevjs-libre-mixpurple-skin.librevjs-controls-disabled .librevjs-control-bar { - display: none -} - -.librevjs-libre-mixpurple-skin.librevjs-using-native-controls .librevjs-control-bar { - display: none -} - -@media \0screen { - .librevjs-libre-mixpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content: "" - } -} - - -/* General styles for individual controls. */ - -.librevjs-libre-mixpurple-skin .librevjs-control { - outline: 0; - position: relative; - float: left; - text-align: center; - margin: 0; - padding: 0; - height: 3em; - width: 4em -} - - -/* FreeArt button icons: http://artlibre.org/licence/lal */ - -.librevjs-libre-mixpurple-skin .librevjs-control:before { - font-family: LibreVideoJS; - font-size: 1.5em; - line-height: 2; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) -} - - -/* Replacement for focus outline */ - -.librevjs-libre-mixpurple-skin .librevjs-control:focus:before, .librevjs-libre-mixpurple-skin .librevjs-control:hover:before { - color: #9c27b0; -} - -.librevjs-libre-mixpurple-skin .librevjs-control:focus { - /* outline: 0; */ - /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ -} - - -/* Hide control text visually, but have it available for screenreaders */ - -.librevjs-libre-mixpurple-skin .librevjs-control-text { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px -} - - -/* Play/Pause --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixpurple-skin .librevjs-play-control { - width: 5em; - cursor: pointer; - color: rgb(156, 39, 176); -} - -.librevjs-libre-mixpurple-skin .librevjs-play-control:before { - content: "\e001" -} - -.librevjs-libre-mixpurple-skin .librevjs-play-control:hover:before { - color: #8e44ad; - /*color de play control al pasar el cursor*/ -} - -.librevjs-libre-mixpurple-skin.librevjs-playing .librevjs-play-control:before { - content: "\e002" -} - - -/* Volume/Mute --------------------------------------------------------------------------------- */ - -.librevjs-libre-mixpurple-skin .librevjs-mute-control, .librevjs-libre-mixpurple-skin .librevjs-volume-menu-button { - cursor: pointer; - float: right -} - -.librevjs-libre-mixpurple-skin .librevjs-mute-control:before, .librevjs-libre-mixpurple-skin .librevjs-volume-menu-button:before { - content: "\e006" -} - -.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before { - content: "\e003" -} - -.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before { - content: "\e004" -} - -.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before { - content: "\e005" -} - -.librevjs-libre-mixpurple-skin .librevjs-volume-control { - width: 5em; - float: right -} - -.librevjs-libre-mixpurple-skin .librevjs-volume-bar { - width: 5em; - height: .6em; - margin: 1.1em auto 0 -} - -.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu-content { - height: 2.9em -} - - -/*Personalización del nivel de volumen*/ - -.librevjs-libre-mixpurple-skin .librevjs-volume-level { - position: absolute; - top: 0; - left: 0; - height: 0.5em; - /* assuming volume starts at 1.0 */ - width: 100%; - background: #9c27b0 url() -50% 0 repeat; -} - -.librevjs-libre-mixpurple-skin .librevjs-volume-bar .librevjs-volume-handle { - width: .5em; - height: .5em -} - -.librevjs-libre-mixpurple-skin .librevjs-volume-handle:before { - font-size: .9em; - top: -.2em; - left: -.2em; - width: 1em; - height: 1em; -} - -.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { - width: 6em; - left: -4em; -} - - -/* Progress --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixpurple-skin .librevjs-progress-control { - position: absolute; - left: 0; - right: 0; - width: auto; - font-size: .3em; - height: 1em; - top: -1em; - -webkit-transition: all .4s; - -moz-transition: all .4s; - -o-transition: all .4s; - transition: all .4s; -} - -.librevjs-libre-mixpurple-skin:hover .librevjs-progress-control { - font-size: .9em; - -webkit-transition: all .2s; - -moz-transition: all .2s; - -o-transition: all .2s; - transition: all .2s; -} - - -/* Box containing play and load progress. Also acts as seek scrubber. */ - -.librevjs-libre-mixpurple-skin .librevjs-progress-holder { - height: 100%; -} - - -/* Progress Bars */ - -.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-load-progress { - position: absolute; - display: block; - height: 100%; - margin: 0; - padding: 0; - left: 0; - top: 0 -} - -.librevjs-libre-mixpurple-skin .librevjs-play-progress { - background: #9c27b0 url() -50% 0 repeat; -} - -.librevjs-libre-mixpurple-skin .librevjs-load-progress { - background: #646464; - background: rgba(255, 255, 255, .4) -} - -.librevjs-libre-mixpurple-skin .librevjs-seek-handle { - width: 1.5em; - height: 100% -} - -.librevjs-libre-mixpurple-skin .librevjs-seek-handle:before { - padding-top: .1em -} - - -/* Time Display --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixpurple-skin .librevjs-time-controls { - font-size: 1em; - font-weight: 700; - /*mayor visibilidad*/ - line-height: 3em -} - -.librevjs-libre-mixpurple-skin .librevjs-current-time { - float: left -} - -.librevjs-libre-mixpurple-skin .librevjs-duration { - float: left -} - -.librevjs-libre-mixpurple-skin .librevjs-remaining-time { - display: none; - float: left -} - - -/* Fullscreen --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control { - width: 3.8em; - cursor: pointer; - float: right -} - -.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control:before { - content: "\e000" -} - - -/* Switch to the exit icon when the player is in fullscreen */ - -.librevjs-libre-mixpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content: "\e00b" -} - - -/* Big Play Button (play button at start) --------------------------------------------------------------------------------- -Positioning of the play button in the center or other corners can be done more -easily in the skin designer by LibreVideoJS FreeArts. -*/ - -.librevjs-libre-mixpurple-skin .librevjs-big-play-button { - /* Center it horizontally */ - left: 50%; - margin-left: -1.85em; - /* Center it vertically */ - top: 50%; - margin-top: -1.3em; - font-size: 2em; - display: block; - z-index: 2; - position: absolute; - width: 3.8em; - height: 2.6em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - /* Need a slightly gray bg so it can be seen on black backgrounds */ - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); - border: 0 solid; - /* border-radius */ - -webkit-border-radius: 0.4em; - -moz-border-radius: 0.4em; - border-radius: 0.4em; - /* transition */ - -webkit-transition: all 0.4s; - -moz-transition: all 0.4s; - -o-transition: all 0.4s; - transition: all 0.4s; -} - - -/* Hide if controls are disabled */ - -.librevjs-libre-mixpurple-skin.librevjs-controls-disabled .librevjs-big-play-button { - display: none; -} - - -/* Hide when video starts playing */ - -.librevjs-libre-mixpurple-skin.librevjs-has-started .librevjs-big-play-button { - display: none; -} - - -/* Hide on mobile devices. Remove when we stop using native controls - by default on mobile */ - -.librevjs-libre-mixpurple-skin.librevjs-using-native-controls .librevjs-big-play-button { - display: none; -} - -.librevjs-libre-mixpurple-skin:hover .librevjs-big-play-button, .librevjs-libre-mixpurple-skin .librevjs-big-play-button:focus { - outline: 0; - cursor: pointer; - /* IE8 needs a non-glow hover state */ - background-color: rgb(142, 68, 173); - /*color del boton play al hacer focus*/ - color: #FFFFFF; -} - -.librevjs-libre-mixpurple-skin .librevjs-big-play-button:before { - content: "\e001"; - font-family: LibreVideoJS; - /* In order to center the play icon vertically we need to set the line height - to the same as the button height */ - line-height: 2.6em; - text-shadow: 0.05em 0.05em 0.1em #000; - text-align: center/* Needed for IE8 */ - ; - position: absolute; - left: 0; - width: 100%; - height: 100%; -} - - -/* Menu Buttons (Captions/Subtitles/etc.) --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixpurple-skin .librevjs-menu-button { - float: right; - cursor: pointer; -} - -.librevjs-libre-mixpurple-skin .librevjs-menu { - display: none; - position: absolute; - bottom: 0; - left: 0; - width: 0; - height: 0; - margin-bottom: 3em; - border-left: 2em solid transparent; - border-right: 2em solid transparent; - border-top: 1.55em solid #000; - border-top-color: rgba(7, 40, 50, .5); -} - - -/* Button Pop-up Menu */ - -.librevjs-libre-mixpurple-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { - display: block; - padding: 0; - margin: 0; - position: absolute; - width: 10em; - bottom: 1.5em; - /* Same bottom as librevjs-menu border-top */ - max-height: 15em; - overflow: auto; - left: -5em; - /* Width of menu - width of button / 2 */ - /* background-color-with-alpha */ - background-color: #07141e; - background-color: rgba(7, 20, 30, .7); - -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); - -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); - box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); -} - -.librevjs-libre-mixpurple-skin .librevjs-menu-button:hover .librevjs-menu { - display: block; -} - -.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li { - list-style: none; - margin: 0; - padding: .3em 0; - line-height: 1.4em; - font-size: 1.2em; - text-align: center; - text-transform: lowercase; - color: #ccc; -} - - -/* Select color menu subtitles/captions */ - -.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected { - color: #fff; - background-color: rgb(156, 39, 176); -} - -.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:focus, .librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:hover, .librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover { - outline: 0; - color: #fff; - background-color: #9c27b0; -} - - -/*End Select color menu subtitles/caption */ - -.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-menu-title { - text-align: center; - text-transform: uppercase; - font-size: 1em; - line-height: 2em; - padding: 0; - margin: 0 0 .3em; - font-weight: 700; - cursor: default; -} - - -/* Subtitles Button */ - -.librevjs-libre-mixpurple-skin .librevjs-subtitles-button:before { - content: "\e00c" -} - - -/* Captions Button */ - -.librevjs-libre-mixpurple-skin .librevjs-captions-button:before { - content: "\e008" -} - - -/* Replacement for focus outline */ - -.librevjs-libre-mixpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-mixpurple-skin .librevjs-captions-button:hover .librevjs-control-content:before { - -webkit-box-shadow: 0 0 1em #fff; - -moz-box-shadow: 0 0 1em #fff; - box-shadow: 0 0 1em #fff; -} - - -/* Hide disabled or unsupported controls */ - -.librevjs-libre-mixpurple-skin .librevjs-hidden { - display: none -} - - -/*Title Resolution | subtitles and Caption*/ - -.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title { - color: #9c27b0; - background-color: inherit; -} - -.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover { - color: #8e44ad; - background-color: inherit; -} - -@media screen and (max-width: 400px) { - .librevjs-libre-mixpurple-skin .librevjs-big-play-button { - font-size: 2em; - } -} - -@media screen and (max-width: 150px) { - .librevjs-libre-mixpurple-skin .librevjs-big-play-button { - font-size: 1.8em; - } -} - -@media screen and (max-width: 90px) { - .librevjs-libre-mixpurple-skin .librevjs-big-play-button { - font-size: 1.4em; - } -} - - -/* Skin-Red --------------------------------------------------------------------------------------------------------*/ - -.librevjs-libre-mixred-skin { - color: #ccc; - background-color: inherit; -} - - -/* Base UI Component Classes ---------------------------------------------------------------------------------*/ -/* Slider - used for Volume bar and Seek bar */ - -.librevjs-libre-mixred-skin .librevjs-slider { - /* Replace browser focus highlight with handle highlight */ - outline: 0; - position: relative; - cursor: pointer; - padding: 0; - /* background-color-with-alpha */ - background-color: #000000; - background-color: rgba(0, 0, 0, 0.5); -} - -.librevjs-libre-mixred-skin .librevjs-slider:focus { - -webkit-box-shadow: 0 0 2em #fff; - -moz-box-shadow: 0 0 2em #fff; - box-shadow: 0 0 2em #fff; -} - - -/*Eliminación de botón de barra de progreso*/ - -.librevjs-libre-mixred-skin .librevjs-slider-handle { - width: 0; - height: 0; -} - -.librevjs-libre-mixred-skin .librevjs-slider-handle:before { - text-shadow: 0em 0em 1em #fff; - position: absolute; - top: 0; - left: 0; -} - - -/* Control Bar --------------------------------------------------------------------------------- -The default control bar that is a container for most of the controls. -*/ - -.librevjs-libre-mixred-skin .librevjs-control-bar { - /* Start hidden */ - display: none; - position: absolute; - /* Place control bar at the bottom of the player box/video. - If you want more margin below the control bar, add more height. */ - bottom: 0; - /* Use left/right to stretch to 100% width of player div */ - left: 0; - right: 0; - /* Height includes any margin you want above or below control items */ - height: 3.0em; - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); -} - - -/* Show the control bar only once the video has started playing */ - -.librevjs-libre-mixred-skin.librevjs-has-started .librevjs-control-bar { - display: block; - visibility: visible; - opacity: 1; - -webkit-transition: visibility .1s, opacity .1s; - -moz-transition: visibility .1s, opacity .1s; - -o-transition: visibility .1s, opacity .1s; - transition: visibility .1s, opacity .1s -} - - -/* Hide the control bar when the video is playing and the user is inactive */ - -.librevjs-libre-mixred-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { - display: block; - visibility: hidden; - opacity: 0; - -webkit-transition: visibility 1s, opacity 1s; - -moz-transition: visibility 1s, opacity 1s; - -o-transition: visibility 1s, opacity 1s; - transition: visibility 1s, opacity 1s -} - -.librevjs-libre-mixred-skin.librevjs-controls-disabled .librevjs-control-bar { - display: none -} - -.librevjs-libre-mixred-skin.librevjs-using-native-controls .librevjs-control-bar { - display: none -} - -@media \0screen { - .librevjs-libre-mixred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content: "" - } -} - - -/* General styles for individual controls. */ - -.librevjs-libre-mixred-skin .librevjs-control { - outline: 0; - position: relative; - float: left; - text-align: center; - margin: 0; - padding: 0; - height: 3em; - width: 4em -} - - -/* FreeArt button icons: http://artlibre.org/licence/lal */ - -.librevjs-libre-mixred-skin .librevjs-control:before { - font-family: LibreVideoJS; - font-size: 1.5em; - line-height: 2; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) -} - - -/* Replacement for focus outline */ - -.librevjs-libre-mixred-skin .librevjs-control:focus:before, .librevjs-libre-mixred-skin .librevjs-control:hover:before { - color: #f44336; -} - -.librevjs-libre-mixred-skin .librevjs-control:focus { - /* outline: 0; */ - /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ -} - - -/* Hide control text visually, but have it available for screenreaders */ - -.librevjs-libre-mixred-skin .librevjs-control-text { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px -} - - -/* Play/Pause --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixred-skin .librevjs-play-control { - width: 5em; - cursor: pointer; - color: rgb(244, 67, 54); -} - -.librevjs-libre-mixred-skin .librevjs-play-control:before { - content: "\e001" -} - -.librevjs-libre-mixred-skin .librevjs-play-control:hover:before { - color: #f22e1f; - /*color de play control al pasar el cursor*/ -} - -.librevjs-libre-mixred-skin.librevjs-playing .librevjs-play-control:before { - content: "\e002" -} - - -/* Volume/Mute --------------------------------------------------------------------------------- */ - -.librevjs-libre-mixred-skin .librevjs-mute-control, .librevjs-libre-mixred-skin .librevjs-volume-menu-button { - cursor: pointer; - float: right -} - -.librevjs-libre-mixred-skin .librevjs-mute-control:before, .librevjs-libre-mixred-skin .librevjs-volume-menu-button:before { - content: "\e006" -} - -.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-0:before { - content: "\e003" -} - -.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-1:before { - content: "\e004" -} - -.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-2:before { - content: "\e005" -} - -.librevjs-libre-mixred-skin .librevjs-volume-control { - width: 5em; - float: right -} - -.librevjs-libre-mixred-skin .librevjs-volume-bar { - width: 5em; - height: .6em; - margin: 1.1em auto 0 -} - -.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu-content { - height: 2.9em -} - - -/*Personalización del nivel de volumen*/ - -.librevjs-libre-mixred-skin .librevjs-volume-level { - position: absolute; - top: 0; - left: 0; - height: 0.5em; - /* assuming volume starts at 1.0 */ - width: 100%; - background: #f44336 url() -50% 0 repeat; -} - -.librevjs-libre-mixred-skin .librevjs-volume-bar .librevjs-volume-handle { - width: .5em; - height: .5em -} - -.librevjs-libre-mixred-skin .librevjs-volume-handle:before { - font-size: .9em; - top: -.2em; - left: -.2em; - width: 1em; - height: 1em; -} - -.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { - width: 6em; - left: -4em; -} - - -/* Progress --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixred-skin .librevjs-progress-control { - position: absolute; - left: 0; - right: 0; - width: auto; - font-size: .3em; - height: 1em; - top: -1em; - -webkit-transition: all .4s; - -moz-transition: all .4s; - -o-transition: all .4s; - transition: all .4s; -} - -.librevjs-libre-mixred-skin:hover .librevjs-progress-control { - font-size: .9em; - -webkit-transition: all .2s; - -moz-transition: all .2s; - -o-transition: all .2s; - transition: all .2s; -} - - -/* Box containing play and load progress. Also acts as seek scrubber. */ - -.librevjs-libre-mixred-skin .librevjs-progress-holder { - height: 100%; -} - - -/* Progress Bars */ - -.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-load-progress { - position: absolute; - display: block; - height: 100%; - margin: 0; - padding: 0; - left: 0; - top: 0 -} - -.librevjs-libre-mixred-skin .librevjs-play-progress { - background: #f44336 url() -50% 0 repeat; -} - -.librevjs-libre-mixred-skin .librevjs-load-progress { - background: #646464; - background: rgba(255, 255, 255, .4) -} - -.librevjs-libre-mixred-skin .librevjs-seek-handle { - width: 1.5em; - height: 100% -} - -.librevjs-libre-mixred-skin .librevjs-seek-handle:before { - padding-top: .1em -} - - -/* Time Display --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixred-skin .librevjs-time-controls { - font-size: 1em; - font-weight: 700; - /*mayor visibilidad*/ - line-height: 3em -} - -.librevjs-libre-mixred-skin .librevjs-current-time { - float: left -} - -.librevjs-libre-mixred-skin .librevjs-duration { - float: left -} - -.librevjs-libre-mixred-skin .librevjs-remaining-time { - display: none; - float: left -} - - -/* Fullscreen --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixred-skin .librevjs-fullscreen-control { - width: 3.8em; - cursor: pointer; - float: right -} - -.librevjs-libre-mixred-skin .librevjs-fullscreen-control:before { - content: "\e000" -} - - -/* Switch to the exit icon when the player is in fullscreen */ - -.librevjs-libre-mixred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content: "\e00b" -} - - -/* Big Play Button (play button at start) --------------------------------------------------------------------------------- -Positioning of the play button in the center or other corners can be done more -easily in the skin designer by LibreVideoJS FreeArts. -*/ - -.librevjs-libre-mixred-skin .librevjs-big-play-button { - /* Center it horizontally */ - left: 50%; - margin-left: -1.85em; - /* Center it vertically */ - top: 50%; - margin-top: -1.3em; - font-size: 2em; - display: block; - z-index: 2; - position: absolute; - width: 3.8em; - height: 2.6em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - /* Need a slightly gray bg so it can be seen on black backgrounds */ - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); - border: 0 solid; - /* border-radius */ - -webkit-border-radius: 0.4em; - -moz-border-radius: 0.4em; - border-radius: 0.4em; - /* transition */ - -webkit-transition: all 0.4s; - -moz-transition: all 0.4s; - -o-transition: all 0.4s; - transition: all 0.4s; -} - - -/* Hide if controls are disabled */ - -.librevjs-libre-mixred-skin.librevjs-controls-disabled .librevjs-big-play-button { - display: none; -} - - -/* Hide when video starts playing */ - -.librevjs-libre-mixred-skin.librevjs-has-started .librevjs-big-play-button { - display: none; -} - - -/* Hide on mobile devices. Remove when we stop using native controls - by default on mobile */ - -.librevjs-libre-mixred-skin.librevjs-using-native-controls .librevjs-big-play-button { - display: none; -} - -.librevjs-libre-mixred-skin:hover .librevjs-big-play-button, .librevjs-libre-mixred-skin .librevjs-big-play-button:focus { - outline: 0; - cursor: pointer; - /* IE8 needs a non-glow hover state */ - background-color: #f12b24; - /*color del boton play al hacer focus*/ - color: #FFFFFF; -} - -.librevjs-libre-mixred-skin .librevjs-big-play-button:before { - content: "\e001"; - font-family: LibreVideoJS; - /* In order to center the play icon vertically we need to set the line height - to the same as the button height */ - line-height: 2.6em; - text-shadow: 0.05em 0.05em 0.1em #000; - text-align: center/* Needed for IE8 */ - ; - position: absolute; - left: 0; - width: 100%; - height: 100%; -} - - -/* Menu Buttons (Captions/Subtitles/etc.) --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixred-skin .librevjs-menu-button { - float: right; - cursor: pointer; -} - -.librevjs-libre-mixred-skin .librevjs-menu { - display: none; - position: absolute; - bottom: 0; - left: 0; - width: 0; - height: 0; - margin-bottom: 3em; - border-left: 2em solid transparent; - border-right: 2em solid transparent; - border-top: 1.55em solid #000; - border-top-color: rgba(7, 40, 50, .5); -} - - -/* Button Pop-up Menu */ - -.librevjs-libre-mixred-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { - display: block; - padding: 0; - margin: 0; - position: absolute; - width: 10em; - bottom: 1.5em; - max-height: 15em; - /* Same bottom as librevjs-menu border-top */ - overflow: auto; - left: -5em; - /* Width of menu - width of button / 2 */ - /* background-color-with-alpha */ - background-color: #07141e; - background-color: rgba(7, 20, 30, .7); - -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); - -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); - box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); -} - -.librevjs-libre-mixred-skin .librevjs-menu-button:hover .librevjs-menu { - display: block; -} - -.librevjs-libre-mixred-skin .librevjs-menu-button ul li { - list-style: none; - margin: 0; - padding: .3em 0; - line-height: 1.4em; - font-size: 1.2em; - text-align: center; - text-transform: lowercase; - color: #ccc; -} - - -/* Select color menu subtitles/captions */ - -.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected { - color: #fff; - background-color: rgb(244, 67, 54); -} - -.librevjs-libre-mixred-skin .librevjs-menu-button ul li:focus, .librevjs-libre-mixred-skin .librevjs-menu-button ul li:hover, .librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:hover { - outline: 0; - color: #fff; - background-color: #f44336; -} - - -/*End Select color menu subtitles/caption */ - -.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-menu-title { - text-align: center; - text-transform: uppercase; - font-size: 1em; - line-height: 2em; - padding: 0; - margin: 0 0 .3em; - font-weight: 700; - cursor: default; -} - - -/* Subtitles Button */ - -.librevjs-libre-mixred-skin .librevjs-subtitles-button:before { - content: "\e00c" -} - - -/* Captions Button */ - -.librevjs-libre-mixred-skin .librevjs-captions-button:before { - content: "\e008" -} - - -/* Replacement for focus outline */ - -.librevjs-libre-mixred-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-mixred-skin .librevjs-captions-button:hover .librevjs-control-content:before { - -webkit-box-shadow: 0 0 1em #fff; - -moz-box-shadow: 0 0 1em #fff; - box-shadow: 0 0 1em #fff; -} - - -/* Hide disabled or unsupported controls */ - -.librevjs-libre-mixred-skin .librevjs-hidden { - display: none -} - - -/*Title Resolution | subtitles and Caption*/ - -.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title { - color: rgb(246, 44, 30); - background-color: inherit; -} - -.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover { - color: rgb(244, 67, 54); - background-color: inherit; -} - -@media screen and (max-width: 400px) { - .librevjs-libre-mixred-skin .librevjs-big-play-button { - font-size: 2em; - } -} - -@media screen and (max-width: 150px) { - .librevjs-libre-mixred-skin .librevjs-big-play-button { - font-size: 1.8em; - } -} - -@media screen and (max-width: 90px) { - .librevjs-libre-mixred-skin .librevjs-big-play-button { - font-size: 1.4em; - } -} - - -/* Skin-Teal -------------------------------------------------------------------------------------------------------*/ - -.librevjs-libre-mixteal-skin { - color: #ccc; - background-color: inherit; -} - - -/* Base UI Component Classes ---------------------------------------------------------------------------------*/ -/* Slider - used for Volume bar and Seek bar */ - -.librevjs-libre-mixteal-skin .librevjs-slider { - /* Replace browser focus highlight with handle highlight */ - outline: 0; - position: relative; - cursor: pointer; - padding: 0; - /* background-color-with-alpha */ - background-color: #000000; - background-color: rgba(0, 0, 0, 0.5); -} - -.librevjs-libre-mixteal-skin .librevjs-slider:focus { - -webkit-box-shadow: 0 0 2em #fff; - -moz-box-shadow: 0 0 2em #fff; - box-shadow: 0 0 2em #fff; -} - - -/*Eliminación de botón de barra de progreso*/ - -.librevjs-libre-mixteal-skin .librevjs-slider-handle { - width: 0; - height: 0; -} - -.librevjs-libre-mixteal-skin .librevjs-slider-handle:before { - text-shadow: 0em 0em 1em #fff; - position: absolute; - top: 0; - left: 0; -} - - -/* Control Bar --------------------------------------------------------------------------------- -The default control bar that is a container for most of the controls. -*/ - -.librevjs-libre-mixteal-skin .librevjs-control-bar { - /* Start hidden */ - display: none; - position: absolute; - /* Place control bar at the bottom of the player box/video. - If you want more margin below the control bar, add more height. */ - bottom: 0; - /* Use left/right to stretch to 100% width of player div */ - left: 0; - right: 0; - /* Height includes any margin you want above or below control items */ - height: 3.0em; - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); -} - - -/* Show the control bar only once the video has started playing */ - -.librevjs-libre-mixteal-skin.librevjs-has-started .librevjs-control-bar { - display: block; - visibility: visible; - opacity: 1; - -webkit-transition: visibility .1s, opacity .1s; - -moz-transition: visibility .1s, opacity .1s; - -o-transition: visibility .1s, opacity .1s; - transition: visibility .1s, opacity .1s -} - - -/* Hide the control bar when the video is playing and the user is inactive */ - -.librevjs-libre-mixteal-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { - display: block; - visibility: hidden; - opacity: 0; - -webkit-transition: visibility 1s, opacity 1s; - -moz-transition: visibility 1s, opacity 1s; - -o-transition: visibility 1s, opacity 1s; - transition: visibility 1s, opacity 1s -} - -.librevjs-libre-mixteal-skin.librevjs-controls-disabled .librevjs-control-bar { - display: none -} - -.librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-control-bar { - display: none -} - -@media \0screen { - .librevjs-libre-mixteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content: "" - } -} - - -/* General styles for individual controls. */ - -.librevjs-libre-mixteal-skin .librevjs-control { - outline: 0; - position: relative; - float: left; - text-align: center; - margin: 0; - padding: 0; - height: 3em; - width: 4em -} - - -/* FreeArt button icons: http://artlibre.org/licence/lal */ - -.librevjs-libre-mixteal-skin .librevjs-control:before { - font-family: LibreVideoJS; - font-size: 1.5em; - line-height: 2; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) -} - - -/* Replacement for focus outline */ - -.librevjs-libre-mixteal-skin .librevjs-control:focus:before, .librevjs-libre-mixteal-skin .librevjs-control:hover:before { - color: #1de9b6; -} - -.librevjs-libre-mixteal-skin .librevjs-control:focus { - /* outline: 0; */ - /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ -} - - -/* Hide control text visually, but have it available for screenreaders */ - -.librevjs-libre-mixteal-skin .librevjs-control-text { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px -} - - -/* Play/Pause --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixteal-skin .librevjs-play-control { - width: 5em; - cursor: pointer; - color: rgb(29, 233, 182); -} - -.librevjs-libre-mixteal-skin .librevjs-play-control:before { - content: "\e001" -} - -.librevjs-libre-mixteal-skin .librevjs-play-control:hover:before { - color: #007c5d; - /*color de play control al pasar el cursor*/ -} - -.librevjs-libre-mixteal-skin.librevjs-playing .librevjs-play-control:before { - content: "\e002" -} - - -/* Volume/Mute --------------------------------------------------------------------------------- */ - -.librevjs-libre-mixteal-skin .librevjs-mute-control, .librevjs-libre-mixteal-skin .librevjs-volume-menu-button { - cursor: pointer; - float: right -} - -.librevjs-libre-mixteal-skin .librevjs-mute-control:before, .librevjs-libre-mixteal-skin .librevjs-volume-menu-button:before { - content: "\e006" -} - -.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before { - content: "\e003" -} - -.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before { - content: "\e004" -} - -.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before { - content: "\e005" -} - -.librevjs-libre-mixteal-skin .librevjs-volume-control { - width: 5em; - float: right -} - -.librevjs-libre-mixteal-skin .librevjs-volume-bar { - width: 5em; - height: .6em; - margin: 1.1em auto 0 -} - -.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu-content { - height: 2.9em -} - - -/*Personalización del nivel de volumen*/ - -.librevjs-libre-mixteal-skin .librevjs-volume-level { - position: absolute; - top: 0; - left: 0; - height: 0.5em; - /* assuming volume starts at 1.0 */ - width: 100%; - background: #1de9b6 url() -50% 0 repeat; -} - -.librevjs-libre-mixteal-skin .librevjs-volume-bar .librevjs-volume-handle { - width: .5em; - height: .5em -} - -.librevjs-libre-mixteal-skin .librevjs-volume-handle:before { - font-size: .9em; - top: -.2em; - left: -.2em; - width: 1em; - height: 1em; -} - -.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { - width: 6em; - left: -4em; -} - - -/* Progress --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixteal-skin .librevjs-progress-control { - position: absolute; - left: 0; - right: 0; - width: auto; - font-size: .3em; - height: 1em; - top: -1em; - -webkit-transition: all .4s; - -moz-transition: all .4s; - -o-transition: all .4s; - transition: all .4s; -} - -.librevjs-libre-mixteal-skin:hover .librevjs-progress-control { - font-size: .9em; - -webkit-transition: all .2s; - -moz-transition: all .2s; - -o-transition: all .2s; - transition: all .2s; -} - - -/* Box containing play and load progress. Also acts as seek scrubber. */ - -.librevjs-libre-mixteal-skin .librevjs-progress-holder { - height: 100%; -} - - -/* Progress Bars */ - -.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-load-progress { - position: absolute; - display: block; - height: 100%; - margin: 0; - padding: 0; - left: 0; - top: 0 -} - -.librevjs-libre-mixteal-skin .librevjs-play-progress { - background: #1de9b6 url() -50% 0 repeat; -} - -.librevjs-libre-mixteal-skin .librevjs-load-progress { - background: #646464; - background: rgba(255, 255, 255, .4) -} - -.librevjs-libre-mixteal-skin .librevjs-seek-handle { - width: 1.5em; - height: 100% -} - -.librevjs-libre-mixteal-skin .librevjs-seek-handle:before { - padding-top: .1em -} - - -/* Time Display --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixteal-skin .librevjs-time-controls { - font-size: 1em; - font-weight: 700; - /*mayor visibilidad*/ - line-height: 3em -} - -.librevjs-libre-mixteal-skin .librevjs-current-time { - float: left -} - -.librevjs-libre-mixteal-skin .librevjs-duration { - float: left -} - -.librevjs-libre-mixteal-skin .librevjs-remaining-time { - display: none; - float: left -} - - -/* Fullscreen --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixteal-skin .librevjs-fullscreen-control { - width: 3.8em; - cursor: pointer; - float: right -} - -.librevjs-libre-mixteal-skin .librevjs-fullscreen-control:before { - content: "\e000" -} - - -/* Switch to the exit icon when the player is in fullscreen */ - -.librevjs-libre-mixteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content: "\e00b" -} - - -/* Big Play Button (play button at start) --------------------------------------------------------------------------------- -Positioning of the play button in the center or other corners can be done more -easily in the skin designer by LibreVideoJS FreeArts. -*/ - -.librevjs-libre-mixteal-skin .librevjs-big-play-button { - /* Center it horizontally */ - left: 50%; - margin-left: -1.85em; - /* Center it vertically */ - top: 50%; - margin-top: -1.3em; - font-size: 2em; - display: block; - z-index: 2; - position: absolute; - width: 3.8em; - height: 2.6em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - /* Need a slightly gray bg so it can be seen on black backgrounds */ - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); - border: 0 solid; - /* border-radius */ - -webkit-border-radius: 0.4em; - -moz-border-radius: 0.4em; - border-radius: 0.4em; - /* transition */ - -webkit-transition: all 0.4s; - -moz-transition: all 0.4s; - -o-transition: all 0.4s; - transition: all 0.4s; -} - - -/* Hide if controls are disabled */ - -.librevjs-libre-mixteal-skin.librevjs-controls-disabled .librevjs-big-play-button { - display: none; -} - - -/* Hide when video starts playing */ - -.librevjs-libre-mixteal-skin.librevjs-has-started .librevjs-big-play-button { - display: none; -} - - -/* Hide on mobile devices. Remove when we stop using native controls - by default on mobile */ - -.librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-big-play-button { - display: none; -} - -.librevjs-libre-mixteal-skin:hover .librevjs-big-play-button, .librevjs-libre-mixteal-skin .librevjs-big-play-button:focus { - outline: 0; - cursor: pointer; - /* IE8 needs a non-glow hover state */ - background-color: #1de9b6; - /*color del boton play al hacer focus*/ - color: #FFFFFF; -} - -.librevjs-libre-mixteal-skin .librevjs-big-play-button:before { - content: "\e001"; - font-family: LibreVideoJS; - /* In order to center the play icon vertically we need to set the line height - to the same as the button height */ - line-height: 2.6em; - text-shadow: 0.05em 0.05em 0.1em #000; - text-align: center/* Needed for IE8 */ - ; - position: absolute; - left: 0; - width: 100%; - height: 100%; -} - - -/* Menu Buttons (Captions/Subtitles/etc.) --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixteal-skin .librevjs-menu-button { - float: right; - cursor: pointer; -} - -.librevjs-libre-mixteal-skin .librevjs-menu { - display: none; - position: absolute; - bottom: 0; - left: 0; - width: 0; - height: 0; - margin-bottom: 3em; - border-left: 2em solid transparent; - border-right: 2em solid transparent; - border-top: 1.55em solid #000; - border-top-color: rgba(7, 40, 50, .5); -} - - -/* Button Pop-up Menu */ - -.librevjs-libre-mixteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { - display: block; - padding: 0; - margin: 0; - position: absolute; - width: 10em; - bottom: 1.5em; - /* Same bottom as librevjs-menu border-top */ - max-height: 15em; - overflow: auto; - left: -5em; - /* Width of menu - width of button / 2 */ - /* background-color-with-alpha */ - background-color: #07141e; - background-color: rgba(7, 20, 30, .7); - -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); - -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); - box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); -} - -.librevjs-libre-mixteal-skin .librevjs-menu-button:hover .librevjs-menu { - display: block; -} - -.librevjs-libre-mixteal-skin .librevjs-menu-button ul li { - list-style: none; - margin: 0; - padding: .3em 0; - line-height: 1.4em; - font-size: 1.2em; - text-align: center; - text-transform: lowercase; - color: #ccc; -} - - -/* Select color menu subtitles/captions */ - -.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected { - color: rgb(1, 56, 47); - background-color: rgb(29, 233, 182); -} - -.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:focus, .librevjs-libre-mixteal-skin .librevjs-menu-button ul li:hover, .librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:hover { - outline: 0; - color: #004d40; - background-color: #1de9b6; -} - - -/*End Select color menu subtitles/caption */ - -.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-menu-title { - text-align: center; - text-transform: uppercase; - font-size: 1em; - line-height: 2em; - padding: 0; - margin: 0 0 .3em; - font-weight: 700; - cursor: default; -} - - -/* Subtitles Button */ - -.librevjs-libre-mixteal-skin .librevjs-subtitles-button:before { - content: "\e00c" -} - - -/* Captions Button */ - -.librevjs-libre-mixteal-skin .librevjs-captions-button:before { - content: "\e008" -} - - -/* Replacement for focus outline */ - -.librevjs-libre-mixteal-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-mixteal-skin .librevjs-captions-button:hover .librevjs-control-content:before { - -webkit-box-shadow: 0 0 1em #fff; - -moz-box-shadow: 0 0 1em #fff; - box-shadow: 0 0 1em #fff; -} - - -/* Hide disabled or unsupported controls */ - -.librevjs-libre-mixteal-skin .librevjs-hidden { - display: none -} - - -/*Title Resolution | subtitles and Caption*/ - -.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title { - color: rgb(26, 187, 156); - background-color: inherit; -} - -.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover { - color: rgb(29, 233, 182); - background-color: inherit; -} - -@media screen and (max-width: 400px) { - .librevjs-libre-mixteal-skin .librevjs-big-play-button { - font-size: 2em; - } -} - -@media screen and (max-width: 150px) { - .librevjs-libre-mixteal-skin .librevjs-big-play-button { - font-size: 1.8em; - } -} - -@media screen and (max-width: 90px) { - .librevjs-libre-mixteal-skin .librevjs-big-play-button { - font-size: 1.4em; - } -} - - -/* Skin-Yellow -----------------------------------------------------------------------------------------------------*/ - -.librevjs-libre-mixyellow-skin { - color: #ccc; - background-color: inherit; -} - - -/* Base UI Component Classes ---------------------------------------------------------------------------------*/ -/* Slider - used for Volume bar and Seek bar */ - -.librevjs-libre-mixyellow-skin .librevjs-slider { - /* Replace browser focus highlight with handle highlight */ - outline: 0; - position: relative; - cursor: pointer; - padding: 0; - /* background-color-with-alpha */ - background-color: #000000; - background-color: rgba(0, 0, 0, 0.5); -} - -.librevjs-libre-mixyellow-skin .librevjs-slider:focus { - -webkit-box-shadow: 0 0 2em #fff; - -moz-box-shadow: 0 0 2em #fff; - box-shadow: 0 0 2em #fff; -} - - -/*Eliminación de botón de barra de progreso*/ - -.librevjs-libre-mixyellow-skin .librevjs-slider-handle { - width: 0; - height: 0; -} - -.librevjs-libre-mixyellow-skin .librevjs-slider-handle:before { - text-shadow: 0em 0em 1em #fff; - position: absolute; - top: 0; - left: 0; -} - - -/* Control Bar --------------------------------------------------------------------------------- -The default control bar that is a container for most of the controls. -*/ - -.librevjs-libre-mixyellow-skin .librevjs-control-bar { - /* Start hidden */ - display: none; - position: absolute; - /* Place control bar at the bottom of the player box/video. - If you want more margin below the control bar, add more height. */ - bottom: 0; - /* Use left/right to stretch to 100% width of player div */ - left: 0; - right: 0; - /* Height includes any margin you want above or below control items */ - height: 3.0em; - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); -} - - -/* Show the control bar only once the video has started playing */ - -.librevjs-libre-mixyellow-skin.librevjs-has-started .librevjs-control-bar { - display: block; - visibility: visible; - opacity: 1; - -webkit-transition: visibility .1s, opacity .1s; - -moz-transition: visibility .1s, opacity .1s; - -o-transition: visibility .1s, opacity .1s; - transition: visibility .1s, opacity .1s -} - - -/* Hide the control bar when the video is playing and the user is inactive */ - -.librevjs-libre-mixyellow-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar { - display: block; - visibility: hidden; - opacity: 0; - -webkit-transition: visibility 1s, opacity 1s; - -moz-transition: visibility 1s, opacity 1s; - -o-transition: visibility 1s, opacity 1s; - transition: visibility 1s, opacity 1s -} - -.librevjs-libre-mixyellow-skin.librevjs-controls-disabled .librevjs-control-bar { - display: none -} - -.librevjs-libre-mixyellow-skin.librevjs-using-native-controls .librevjs-control-bar { - display: none -} - -@media \0screen { - .librevjs-libre-mixyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before { - content: "" - } -} - - -/* General styles for individual controls. */ - -.librevjs-libre-mixyellow-skin .librevjs-control { - outline: 0; - position: relative; - float: left; - text-align: center; - margin: 0; - padding: 0; - height: 3em; - width: 4em -} - - -/* FreeArt button icons: http://artlibre.org/licence/lal */ - -.librevjs-libre-mixyellow-skin .librevjs-control:before { - font-family: LibreVideoJS; - font-size: 1.5em; - line-height: 2; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - text-shadow: 1px 1px 1px rgba(0, 0, 0, .5) -} - - -/* Replacement for focus outline */ - -.librevjs-libre-mixyellow-skin .librevjs-control:focus:before, .librevjs-libre-mixyellow-skin .librevjs-control:hover:before { - color: #f1c40f; -} - -.librevjs-libre-mixyellow-skin .librevjs-control:focus { - /* outline: 0; */ - /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ -} - - -/* Hide control text visually, but have it available for screenreaders */ - -.librevjs-libre-mixyellow-skin .librevjs-control-text { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px -} - - -/* Play/Pause --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixyellow-skin .librevjs-play-control { - width: 5em; - cursor: pointer; - color: rgb(241, 196, 14); -} - -.librevjs-libre-mixyellow-skin .librevjs-play-control:before { - content: "\e001" -} - -.librevjs-libre-mixyellow-skin .librevjs-play-control:hover:before { - color: #f39c12; - /*color de play control al pasar el cursor*/ -} - -.librevjs-libre-mixyellow-skin.librevjs-playing .librevjs-play-control:before { - content: "\e002" -} - - -/* Volume/Mute --------------------------------------------------------------------------------- */ - -.librevjs-libre-mixyellow-skin .librevjs-mute-control, .librevjs-libre-mixyellow-skin .librevjs-volume-menu-button { - cursor: pointer; - float: right -} - -.librevjs-libre-mixyellow-skin .librevjs-mute-control:before, .librevjs-libre-mixyellow-skin .librevjs-volume-menu-button:before { - content: "\e006" -} - -.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before { - content: "\e003" -} - -.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before { - content: "\e004" -} - -.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before { - content: "\e005" -} - -.librevjs-libre-mixyellow-skin .librevjs-volume-control { - width: 5em; - float: right -} - -.librevjs-libre-mixyellow-skin .librevjs-volume-bar { - width: 5em; - height: .6em; - margin: 1.1em auto 0 -} - -.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu-content { - height: 2.9em -} - - -/*Personalización del nivel de volumen*/ - -.librevjs-libre-mixyellow-skin .librevjs-volume-level { - position: absolute; - top: 0; - left: 0; - height: 0.5em; - /* assuming volume starts at 1.0 */ - width: 100%; - background: #f1c40f url() -50% 0 repeat; -} - -.librevjs-libre-mixyellow-skin .librevjs-volume-bar .librevjs-volume-handle { - width: .5em; - height: .5em -} - -.librevjs-libre-mixyellow-skin .librevjs-volume-handle:before { - font-size: .9em; - top: -.2em; - left: -.2em; - width: 1em; - height: 1em; -} - -.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content { - width: 6em; - left: -4em; -} - - -/* Progress --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixyellow-skin .librevjs-progress-control { - position: absolute; - left: 0; - right: 0; - width: auto; - font-size: .3em; - height: 1em; - top: -1em; - -webkit-transition: all .4s; - -moz-transition: all .4s; - -o-transition: all .4s; - transition: all .4s; -} - -.librevjs-libre-mixyellow-skin:hover .librevjs-progress-control { - font-size: .9em; - -webkit-transition: all .2s; - -moz-transition: all .2s; - -o-transition: all .2s; - transition: all .2s; -} - - -/* Box containing play and load progress. Also acts as seek scrubber. */ - -.librevjs-libre-mixyellow-skin .librevjs-progress-holder { - height: 100%; -} - - -/* Progress Bars */ - -.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-load-progress { - position: absolute; - display: block; - height: 100%; - margin: 0; - padding: 0; - left: 0; - top: 0 -} - -.librevjs-libre-mixyellow-skin .librevjs-play-progress { - background: #f1c40f url() -50% 0 repeat; -} - -.librevjs-libre-mixyellow-skin .librevjs-load-progress { - background: #646464; - background: rgba(255, 255, 255, .4) -} - -.librevjs-libre-mixyellow-skin .librevjs-seek-handle { - width: 1.5em; - height: 100% -} - -.librevjs-libre-mixyellow-skin .librevjs-seek-handle:before { - padding-top: .1em -} - - -/* Time Display --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixyellow-skin .librevjs-time-controls { - font-size: 1em; - font-weight: 700; - /*mayor visibilidad*/ - line-height: 3em -} - -.librevjs-libre-mixyellow-skin .librevjs-current-time { - float: left -} - -.librevjs-libre-mixyellow-skin .librevjs-duration { - float: left -} - -.librevjs-libre-mixyellow-skin .librevjs-remaining-time { - display: none; - float: left -} - - -/* Fullscreen --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control { - width: 3.8em; - cursor: pointer; - float: right -} - -.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control:before { - content: "\e000" -} - - -/* Switch to the exit icon when the player is in fullscreen */ - -.librevjs-libre-mixyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before { - content: "\e00b" -} - - -/* Big Play Button (play button at start) --------------------------------------------------------------------------------- -Positioning of the play button in the center or other corners can be done more -easily in the skin designer by LibreVideoJS FreeArts. -*/ - -.librevjs-libre-mixyellow-skin .librevjs-big-play-button { - /* Center it horizontally */ - left: 50%; - margin-left: -1.85em; - /* Center it vertically */ - top: 50%; - margin-top: -1.3em; - font-size: 2em; - display: block; - z-index: 2; - position: absolute; - width: 3.8em; - height: 2.6em; - text-align: center; - vertical-align: middle; - cursor: pointer; - opacity: 1; - /* Need a slightly gray bg so it can be seen on black backgrounds */ - /* background-color-with-alpha */ - background-color: #232323; - background-color: rgba(35, 35, 35, 0.8); - border: 0 solid; - /* border-radius */ - -webkit-border-radius: 0.4em; - -moz-border-radius: 0.4em; - border-radius: 0.4em; - /* transition */ - -webkit-transition: all 0.4s; - -moz-transition: all 0.4s; - -o-transition: all 0.4s; - transition: all 0.4s; -} - - -/* Hide if controls are disabled */ - -.librevjs-libre-mixyellow-skin.librevjs-controls-disabled .librevjs-big-play-button { - display: none; -} - - -/* Hide when video starts playing */ - -.librevjs-libre-mixyellow-skin.librevjs-has-started .librevjs-big-play-button { - display: none; -} - - -/* Hide on mobile devices. Remove when we stop using native controls - by default on mobile */ - -.librevjs-libre-mixyellow-skin.librevjs-using-native-controls .librevjs-big-play-button { - display: none; -} - -.librevjs-libre-mixyellow-skin:hover .librevjs-big-play-button, .librevjs-libre-mixyellow-skin .librevjs-big-play-button:focus { - outline: 0; - cursor: pointer; - /* IE8 needs a non-glow hover state */ - background-color: rgb(244, 156, 18); - /*color del boton play al hacer focus*/ - color: #FFFFFF; -} - -.librevjs-libre-mixyellow-skin .librevjs-big-play-button:before { - content: "\e001"; - font-family: LibreVideoJS; - /* In order to center the play icon vertically we need to set the line height - to the same as the button height */ - line-height: 2.6em; - text-shadow: 0.05em 0.05em 0.1em #000; - text-align: center/* Needed for IE8 */ - ; - position: absolute; - left: 0; - width: 100%; - height: 100%; -} - - -/* Menu Buttons (Captions/Subtitles/etc.) --------------------------------------------------------------------------------- -*/ - -.librevjs-libre-mixyellow-skin .librevjs-menu-button { - float: right; - cursor: pointer; -} - -.librevjs-libre-mixyellow-skin .librevjs-menu { - display: none; - position: absolute; - bottom: 0; - left: 0; - width: 0; - height: 0; - margin-bottom: 3em; - border-left: 2em solid transparent; - border-right: 2em solid transparent; - border-top: 1.55em solid #000; - border-top-color: rgba(7, 40, 50, .5); -} - - -/* Button Pop-up Menu */ - -.librevjs-libre-mixyellow-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content { - display: block; - padding: 0; - margin: 0; - position: absolute; - width: 10em; - bottom: 1.5em; - /* Same bottom as librevjs-menu border-top */ - max-height: 15em; - overflow: auto; - left: -5em; - /* Width of menu - width of button / 2 */ - /* background-color-with-alpha */ - background-color: #07141e; - background-color: rgba(7, 20, 30, .7); - -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); - -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); - box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2); -} - -.librevjs-libre-mixyellow-skin .librevjs-menu-button:hover .librevjs-menu { - display: block; -} - -.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li { - list-style: none; - margin: 0; - padding: .3em 0; - line-height: 1.4em; - font-size: 1.2em; - text-align: center; - text-transform: lowercase; - color: #ccc; -} - - -/* Select color menu subtitles/captions */ - -.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected { - color: #fff; - background-color: rgb(241, 196, 14); -} - -.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:focus, .librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:hover, .librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover { - outline: 0; - color: #fff; - background-color: #f1c40f; -} - - -/*End Select color menu subtitles/caption */ - -.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-menu-title { - text-align: center; - text-transform: uppercase; - font-size: 1em; - line-height: 2em; - padding: 0; - margin: 0 0 .3em; - font-weight: 700; - cursor: default; -} - - -/* Subtitles Button */ - -.librevjs-libre-mixyellow-skin .librevjs-subtitles-button:before { - content: "\e00c" -} - - -/* Captions Button */ - -.librevjs-libre-mixyellow-skin .librevjs-captions-button:before { - content: "\e008" -} - - -/* Replacement for focus outline */ - -.librevjs-libre-mixyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-libre-mixyellow-skin .librevjs-captions-button:hover .librevjs-control-content:before { - -webkit-box-shadow: 0 0 1em #fff; - -moz-box-shadow: 0 0 1em #fff; - box-shadow: 0 0 1em #fff; -} - - -/* Hide disabled or unsupported controls */ - -.librevjs-libre-mixyellow-skin .librevjs-hidden { - display: none -} - - -/*Title Resolution | subtitles and Caption*/ - -.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title { - color: #f1c40f; - background-color: inherit; -} - -.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover { - color: #f39c12; - background-color: inherit; -} - -@media screen and (max-width: 400px) { - .librevjs-libre-mixyellow-skin .librevjs-big-play-button { - font-size: 2em; - } -} - -@media screen and (max-width: 150px) { - .librevjs-libre-mixyellow-skin .librevjs-big-play-button { - font-size: 1.8em; - } -} - -@media screen and (max-width: 90px) { - .librevjs-libre-mixyellow-skin .librevjs-big-play-button { - font-size: 1.4em; - } -} - - -/* Global Styles -==============================================================================================*/ - - -/* Global Time-Display */ - -.librevjs-time-divider { - float: left; - line-height: 3em -} - - -/* Global Big-Play-Button-(play-button-at-start) */ - -.librevjs-error .librevjs-big-play-button { - display: none; -} - - -/* Global Loading Spinner */ - -.librevjs-loading-spinner { - display: none; - position: absolute; - top: 50%; - left: 50%; - font-size: 4em; - line-height: 1; - width: 1em; - height: 1em; - margin-left: -.5em; - margin-top: -.5em; - opacity: .75; - -webkit-animation: spin 1.5s infinite linear; - -moz-animation: spin 1.5s infinite linear; - -o-animation: spin 1.5s infinite linear; - animation: spin 1.5s infinite linear -} - -.librevjs-loading-spinner:before { - content: "\e01e"; - font-family: LibreVideoJS; - position: absolute; - top: 0; - left: 0; - width: 1em; - height: 1em; - text-align: center; - text-shadow: 0 0 .1em #000 -} - -@-moz-keyframes spin { - 0% { - -moz-transform: rotate(0deg) - } - 100% { - -moz-transform: rotate(359deg) - } -} - -@-webkit-keyframes spin { - 0% { - -webkit-transform: rotate(0deg) - } - 100% { - -webkit-transform: rotate(359deg) - } -} - -@-o-keyframes spin { - 0% { - -o-transform: rotate(0deg) - } - 100% { - -o-transform: rotate(359deg) - } -} - -@keyframes spin { - 0% { - transform: rotate(0deg) - } - 100% { - transform: rotate(359deg) - } -} - - -/* -REQUIRED STYLES (be careful overriding) -================================================================================ -When loading the player, the video tag is replaced with a DIV, -that will hold the video tag or object tag for other playback methods. -The div contains the video playback element (HTML5) and controls, -and sets the width and height of the video. -** If you want to add some kind of border/padding (e.g. a frame), or special -positioning, use another containing element. Otherwise you risk messing up -control positioning and full window mode. ** -*/ - -.cliplibre-js { - background-color: #000; - position: relative; - padding: 0; - font-size: 10px; - vertical-align: middle; - font-weight: 500; - font-style: normal; - font-family: Arial, sans-serif; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none -} - - -/* Playback technology elements expand to the width/height of the containing div <video> */ - -.cliplibre-js .librevjs-tech { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100% -} - -.cliplibre-js:-moz-full-screen { - position: absolute -} - - -/* Fullscreen Styles */ - -body.librevjs-full-window { - padding: 0; - margin: 0; - height: 100%; - overflow-y: auto; -} - -.cliplibre-js.librevjs-fullscreen { - position: fixed; - overflow: hidden; - z-index: 1000; - left: 0; - top: 0; - bottom: 0; - right: 0; - width: 100%!important; - height: 100%!important; - position: absolute; -} - -.cliplibre-js:-webkit-full-screen { - width: 100%!important; - height: 100%!important -} - -.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive { - cursor: none -} - - -/* Poster Styles */ - -.librevjs-poster { - background-repeat: no-repeat; - background-position: 50% 50%; - background-size: contain; - cursor: pointer; - height: 100%; - margin: 0; - padding: 0; - position: relative; - width: 100% -} - -.librevjs-poster img { - display: block; - margin: 0 auto; - max-height: 100%; - padding: 0; - width: 100% -} - - -/* Hide the poster when native controls are used otherwise it covers them */ - -.cliplibre-js.librevjs-using-native-controls .librevjs-poster { - display: none -} - - -/* Text Track Styles */ - - -/* Overall track holder for both captions and subtitles */ - -.cliplibre-js .librevjs-text-track-display { - text-align: center; - position: absolute; - bottom: 4em; - left: 1em; - right: 1em -} - - -/* Individual tracks */ - -.cliplibre-js .librevjs-text-track { - display: none; - font-size: 1.7em; - text-align: center; - margin-bottom: .1em; - /* Transparent black background, or fallback to all black (oldIE) */ - background-color: #000; - background-color: rgba(0, 0, 0, .6) -} - -.cliplibre-js .librevjs-subtitles { - color: #fff -} - -.cliplibre-js .librevjs-captions { - color: rgb(255, 237, 0); - background-color: rgba(2, 7, 11, 0.7); -} - -.librevjs-tt-cue { - display: block -} - - -/* Global Hide disabled or unsupported controls */ - -.librevjs-lock-showing { - display: block!important; - opacity: 1; - visibility: visible -} - - -/* Opctional Styles No support HTML5*/ - -.no_html5 { - background: black none repeat scroll 0 0; - color: white; - height: 160px; - padding: 130px 10px 20px; - text-align: center; -} - - -/* Global Responsive -------------------------------------------------------------------------------*/ - -.cliplibre-js-responsive-container.librevjs-hd { - padding-top: 56.25%; -} - -.cliplibre-js-responsive-container.librevjs-sd { - padding-top: 75%; -} - -.cliplibre-js-responsive-container { - width: 100%; - position: relative; -} - -.cliplibre-js-responsive-container .cliplibre-js { - height: 100% !important; - width: 100% !important; - position: absolute; - top: 0; - left: 0; -} - -@media screen and (max-width: 800px) { - .cliplibre-js .librevjs-text-track { - font-size: 1.5em; - margin-bottom: -0.2em; - } -} - -@media screen and (max-width: 600px) { - .cliplibre-js .librevjs-text-track { - font-size: 1.2em; - } - .cliplibre-js .librevjs-text-track-display { - bottom: 2em; - } -} - -@media screen and (max-width: 413px) { - .cliplibre-js { - font-size: 8px; - } -} - -@media screen and (max-width: 400px) { - .cliplibre-js .librevjs-text-track { - font-size: 1em; - } - .cliplibre-js .librevjs-text-track-display { - bottom: 1em; - } -} - -@media screen and (max-width: 335px) { - .cliplibre-js { - font-size: 6px; - } -} - -/* Quality Selector Universal -------------------------------------------------------------------------------*/ -/* Position the button */ -.librevjs-res-button { - font-weight: bold; - float: right; - line-height: 3em; -} - -/* Don't show hover effects on title */ -ul li.librevjs-menu-title.librevjs-res-menu-title:hover { - cursor: default; - background-color: transparent; - -moz-box-shadow: none; - -webkit-box-shadow: none; - box-shadow: none; -} - -/* Needed to keep text visible in video.js 4.9 */ -.librevjs-res-button .librevjs-control-text { - width: auto; - height: auto; - clip: auto; -} -/* margin to librevideojs */ -div.LibreVideoJS { - margin-bottom: 20px; -} - -/* ProgressTips Universal -------------------------------------------------------------------------------*/ -.librevjs-progress-tip { - visibility: hidden; - display: block; - opacity: 0.8; - padding: 5px; - font-size: 10px; - position: absolute; - z-index: 100000; -} - -.librevjs-progress-tip-arrow { - background: url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) no-repeat top left; - bottom: 0; - left: 50%; - margin-left: -4px; - background-position: bottom left; - position: absolute; - width: 9px; - height: 5px; -} - -.librevjs-progress-tip-inner { - border-radius: 3px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - padding: 5px 8px 4px 8px; - background-color: black; - color: white; - max-width: 200px; - text-align: center; -} diff --git a/css/mix-material/master.min.css b/css/mix-material/master.min.css deleted file mode 100644 index 9ac70d8..0000000 --- a/css/mix-material/master.min.css +++ /dev/null @@ -1,5 +0,0 @@ -/*! -LibreVideoJS Estilos personalizados -Version 1.4 -Escrito por Jesús Eduardo -*/@font-face{font-family:"LibreVideoJS";src:url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");src:local('?'),url("../../fonts/libre-material/libre-icons.woff") format("woff"),url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),url("../../fonts/libre-material/libre-icons.svg") format("svg")}.librevjs-libre-mixblue-skin{color:#ccc;background-color:inherit}.librevjs-libre-mixblue-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-mixblue-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-mixblue-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-mixblue-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-mixblue-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-mixblue-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-libre-mixblue-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-libre-mixblue-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-mixblue-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-mixblue-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-mixblue-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-mixblue-skin .librevjs-control:before{font-family:LibreVideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-libre-mixblue-skin .librevjs-control:focus:before,.librevjs-libre-mixblue-skin .librevjs-control:hover:before{color:#2196f3}.librevjs-libre-mixblue-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-mixblue-skin .librevjs-play-control{width:5em;cursor:pointer;color:#2196f4}.librevjs-libre-mixblue-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-mixblue-skin .librevjs-play-control:hover:before{color:#2980b9}.librevjs-libre-mixblue-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-mixblue-skin .librevjs-mute-control,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-mixblue-skin .librevjs-mute-control:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-mixblue-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixblue-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-mixblue-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-mixblue-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-mixblue-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#2196f3 url() -50% 0 repeat}.librevjs-libre-mixblue-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-mixblue-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-mixblue-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-mixblue-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixblue-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-libre-mixblue-skin .librevjs-progress-holder{height:100%}.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixblue-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-mixblue-skin .librevjs-play-progress{background:#2196f3 url() -50% 0 repeat}.librevjs-libre-mixblue-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-mixblue-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-mixblue-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-mixblue-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-mixblue-skin .librevjs-current-time{float:left}.librevjs-libre-mixblue-skin .librevjs-duration{float:left}.librevjs-libre-mixblue-skin .librevjs-remaining-time{display:none;float:left}.librevjs-libre-mixblue-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-mixblue-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-mixblue-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-mixblue-skin .librevjs-big-play-button{left:50%;margin-left:-1.85em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:3.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixblue-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-mixblue-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-mixblue-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-mixblue-skin:hover .librevjs-big-play-button,.librevjs-libre-mixblue-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#2196f3;color:#fff}.librevjs-libre-mixblue-skin .librevjs-big-play-button:before{content:"\e001";font-family:LibreVideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-libre-mixblue-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-mixblue-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-libre-mixblue-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-libre-mixblue-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-mixblue-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase;color:#ccc}.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected{color:#0b152a;background-color:#2196f4}.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#0b152a;background-color:#2196f3}.librevjs-libre-mixblue-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-libre-mixblue-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-mixblue-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-mixblue-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixblue-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.librevjs-libre-mixblue-skin .librevjs-hidden{display:none}.librevjs-libre-mixblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title{color:#2196f4;background-color:inherit}.librevjs-libre-mixblue-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#0b89ed;background-color:inherit}@media screen and (max-width:400px){.librevjs-libre-mixblue-skin .librevjs-big-play-button{font-size:2em}}@media screen and (max-width:150px){.librevjs-libre-mixblue-skin .librevjs-big-play-button{font-size:1.8em}}@media screen and (max-width:90px){.librevjs-libre-mixblue-skin .librevjs-big-play-button{font-size:1.4em}}.librevjs-libre-mixgrey-skin{color:#ccc;background-color:inherit}.librevjs-libre-mixgrey-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-mixgrey-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-mixgrey-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-mixgrey-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-mixgrey-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-mixgrey-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-libre-mixgrey-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-libre-mixgrey-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-mixgrey-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-mixgrey-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-mixgrey-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-mixgrey-skin .librevjs-control:before{font-family:LibreVideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-libre-mixgrey-skin .librevjs-control:focus:before,.librevjs-libre-mixgrey-skin .librevjs-control:hover:before{color:#9e9e9e}.librevjs-libre-mixgrey-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-mixgrey-skin .librevjs-play-control{width:5em;cursor:pointer;color:#9e9e9e}.librevjs-libre-mixgrey-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-mixgrey-skin .librevjs-play-control:hover:before{color:#7c7c7c}.librevjs-libre-mixgrey-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-mixgrey-skin .librevjs-mute-control,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-mixgrey-skin .librevjs-mute-control:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-mixgrey-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-mixgrey-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-mixgrey-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-mixgrey-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#9e9e9e url() -50% 0 repeat}.librevjs-libre-mixgrey-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-mixgrey-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-mixgrey-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-mixgrey-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixgrey-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-libre-mixgrey-skin .librevjs-progress-holder{height:100%}.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixgrey-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-mixgrey-skin .librevjs-play-progress{background:#9e9e9e url() -50% 0 repeat}.librevjs-libre-mixgrey-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-mixgrey-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-mixgrey-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-mixgrey-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-mixgrey-skin .librevjs-current-time{float:left}.librevjs-libre-mixgrey-skin .librevjs-duration{float:left}.librevjs-libre-mixgrey-skin .librevjs-remaining-time{display:none;float:left}.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-mixgrey-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-mixgrey-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-mixgrey-skin .librevjs-big-play-button{left:50%;margin-left:-1.85em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:3.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixgrey-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-mixgrey-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-mixgrey-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-mixgrey-skin:hover .librevjs-big-play-button,.librevjs-libre-mixgrey-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#737373;color:#fff}.librevjs-libre-mixgrey-skin .librevjs-big-play-button:before{content:"\e001";font-family:LibreVideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-libre-mixgrey-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-mixgrey-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-libre-mixgrey-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-libre-mixgrey-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase;color:#ccc}.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#9e9e9e}.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#9e9e9e}.librevjs-libre-mixgrey-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-libre-mixgrey-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-mixgrey-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-mixgrey-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixgrey-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.librevjs-libre-mixgrey-skin .librevjs-hidden{display:none}.librevjs-libre-mixgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title{color:#737373;background-color:inherit}.librevjs-libre-mixgrey-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#9e9e9e;background-color:inherit}@media screen and (max-width:400px){.librevjs-libre-mixgrey-skin .librevjs-big-play-button{font-size:2em}}@media screen and (max-width:150px){.librevjs-libre-mixgrey-skin .librevjs-big-play-button{font-size:1.8em}}@media screen and (max-width:90px){.librevjs-libre-mixgrey-skin .librevjs-big-play-button{font-size:1.4em}}.librevjs-libre-mixpurple-skin{color:#ccc;background-color:inherit}.librevjs-libre-mixpurple-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-mixpurple-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-mixpurple-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-mixpurple-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-mixpurple-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-mixpurple-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-libre-mixpurple-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-libre-mixpurple-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-mixpurple-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-mixpurple-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-mixpurple-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-mixpurple-skin .librevjs-control:before{font-family:LibreVideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-libre-mixpurple-skin .librevjs-control:focus:before,.librevjs-libre-mixpurple-skin .librevjs-control:hover:before{color:#9c27b0}.librevjs-libre-mixpurple-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-mixpurple-skin .librevjs-play-control{width:5em;cursor:pointer;color:#9c27b0}.librevjs-libre-mixpurple-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-mixpurple-skin .librevjs-play-control:hover:before{color:#8e44ad}.librevjs-libre-mixpurple-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-mixpurple-skin .librevjs-mute-control,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-mixpurple-skin .librevjs-mute-control:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-mixpurple-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-mixpurple-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-mixpurple-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-mixpurple-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#9c27b0 url() -50% 0 repeat}.librevjs-libre-mixpurple-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-mixpurple-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-mixpurple-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-mixpurple-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixpurple-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-libre-mixpurple-skin .librevjs-progress-holder{height:100%}.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixpurple-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-mixpurple-skin .librevjs-play-progress{background:#9c27b0 url() -50% 0 repeat}.librevjs-libre-mixpurple-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-mixpurple-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-mixpurple-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-mixpurple-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-mixpurple-skin .librevjs-current-time{float:left}.librevjs-libre-mixpurple-skin .librevjs-duration{float:left}.librevjs-libre-mixpurple-skin .librevjs-remaining-time{display:none;float:left}.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-mixpurple-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-mixpurple-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-mixpurple-skin .librevjs-big-play-button{left:50%;margin-left:-1.85em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:3.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixpurple-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-mixpurple-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-mixpurple-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-mixpurple-skin:hover .librevjs-big-play-button,.librevjs-libre-mixpurple-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#8e44ad;color:#fff}.librevjs-libre-mixpurple-skin .librevjs-big-play-button:before{content:"\e001";font-family:LibreVideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-libre-mixpurple-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-mixpurple-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-libre-mixpurple-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-libre-mixpurple-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase;color:#ccc}.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#9c27b0}.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#9c27b0}.librevjs-libre-mixpurple-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-libre-mixpurple-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-mixpurple-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-mixpurple-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixpurple-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.librevjs-libre-mixpurple-skin .librevjs-hidden{display:none}.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title{color:#9c27b0;background-color:inherit}.librevjs-libre-mixpurple-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#8e44ad;background-color:inherit}@media screen and (max-width:400px){.librevjs-libre-mixpurple-skin .librevjs-big-play-button{font-size:2em}}@media screen and (max-width:150px){.librevjs-libre-mixpurple-skin .librevjs-big-play-button{font-size:1.8em}}@media screen and (max-width:90px){.librevjs-libre-mixpurple-skin .librevjs-big-play-button{font-size:1.4em}}.librevjs-libre-mixred-skin{color:#ccc;background-color:inherit}.librevjs-libre-mixred-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-mixred-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-mixred-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-mixred-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-mixred-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-mixred-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-libre-mixred-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-libre-mixred-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-mixred-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-mixred-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-mixred-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-mixred-skin .librevjs-control:before{font-family:LibreVideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-libre-mixred-skin .librevjs-control:focus:before,.librevjs-libre-mixred-skin .librevjs-control:hover:before{color:#f44336}.librevjs-libre-mixred-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-mixred-skin .librevjs-play-control{width:5em;cursor:pointer;color:#f44336}.librevjs-libre-mixred-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-mixred-skin .librevjs-play-control:hover:before{color:#f22e1f}.librevjs-libre-mixred-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-mixred-skin .librevjs-mute-control,.librevjs-libre-mixred-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-mixred-skin .librevjs-mute-control:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-mixred-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixred-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-mixred-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-mixred-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-mixred-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#f44336 url() -50% 0 repeat}.librevjs-libre-mixred-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-mixred-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-mixred-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-mixred-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixred-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-libre-mixred-skin .librevjs-progress-holder{height:100%}.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixred-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-mixred-skin .librevjs-play-progress{background:#f44336 url() -50% 0 repeat}.librevjs-libre-mixred-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-mixred-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-mixred-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-mixred-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-mixred-skin .librevjs-current-time{float:left}.librevjs-libre-mixred-skin .librevjs-duration{float:left}.librevjs-libre-mixred-skin .librevjs-remaining-time{display:none;float:left}.librevjs-libre-mixred-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-mixred-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-mixred-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-mixred-skin .librevjs-big-play-button{left:50%;margin-left:-1.85em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:3.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixred-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-mixred-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-mixred-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-mixred-skin:hover .librevjs-big-play-button,.librevjs-libre-mixred-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#f12b24;color:#fff}.librevjs-libre-mixred-skin .librevjs-big-play-button:before{content:"\e001";font-family:LibreVideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-libre-mixred-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-mixred-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-libre-mixred-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-libre-mixred-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-mixred-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase;color:#ccc}.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#f44336}.librevjs-libre-mixred-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixred-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#f44336}.librevjs-libre-mixred-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-libre-mixred-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-mixred-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-mixred-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixred-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.librevjs-libre-mixred-skin .librevjs-hidden{display:none}.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title{color:#f62c1e;background-color:inherit}.librevjs-libre-mixred-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#f44336;background-color:inherit}@media screen and (max-width:400px){.librevjs-libre-mixred-skin .librevjs-big-play-button{font-size:2em}}@media screen and (max-width:150px){.librevjs-libre-mixred-skin .librevjs-big-play-button{font-size:1.8em}}@media screen and (max-width:90px){.librevjs-libre-mixred-skin .librevjs-big-play-button{font-size:1.4em}}.librevjs-libre-mixteal-skin{color:#ccc;background-color:inherit}.librevjs-libre-mixteal-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-mixteal-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-mixteal-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-mixteal-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-mixteal-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-mixteal-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-libre-mixteal-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-libre-mixteal-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-mixteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-mixteal-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-mixteal-skin .librevjs-control:before{font-family:LibreVideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-libre-mixteal-skin .librevjs-control:focus:before,.librevjs-libre-mixteal-skin .librevjs-control:hover:before{color:#1de9b6}.librevjs-libre-mixteal-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-mixteal-skin .librevjs-play-control{width:5em;cursor:pointer;color:#1de9b6}.librevjs-libre-mixteal-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-mixteal-skin .librevjs-play-control:hover:before{color:#007c5d}.librevjs-libre-mixteal-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-mixteal-skin .librevjs-mute-control,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-mixteal-skin .librevjs-mute-control:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-mixteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-mixteal-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-mixteal-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-mixteal-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#1de9b6 url() -50% 0 repeat}.librevjs-libre-mixteal-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-mixteal-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-mixteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-mixteal-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixteal-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-libre-mixteal-skin .librevjs-progress-holder{height:100%}.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixteal-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-mixteal-skin .librevjs-play-progress{background:#1de9b6 url() -50% 0 repeat}.librevjs-libre-mixteal-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-mixteal-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-mixteal-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-mixteal-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-mixteal-skin .librevjs-current-time{float:left}.librevjs-libre-mixteal-skin .librevjs-duration{float:left}.librevjs-libre-mixteal-skin .librevjs-remaining-time{display:none;float:left}.librevjs-libre-mixteal-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-mixteal-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-mixteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-mixteal-skin .librevjs-big-play-button{left:50%;margin-left:-1.85em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:3.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixteal-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-mixteal-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-mixteal-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-mixteal-skin:hover .librevjs-big-play-button,.librevjs-libre-mixteal-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#1de9b6;color:#fff}.librevjs-libre-mixteal-skin .librevjs-big-play-button:before{content:"\e001";font-family:LibreVideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-libre-mixteal-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-mixteal-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-libre-mixteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-libre-mixteal-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-mixteal-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase;color:#ccc}.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected{color:#01382f;background-color:#1de9b6}.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#004d40;background-color:#1de9b6}.librevjs-libre-mixteal-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-libre-mixteal-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-mixteal-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-mixteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixteal-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.librevjs-libre-mixteal-skin .librevjs-hidden{display:none}.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{color:#1abb9c;background-color:inherit}.librevjs-libre-mixteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#1de9b6;background-color:inherit}@media screen and (max-width:400px){.librevjs-libre-mixteal-skin .librevjs-big-play-button{font-size:2em}}@media screen and (max-width:150px){.librevjs-libre-mixteal-skin .librevjs-big-play-button{font-size:1.8em}}@media screen and (max-width:90px){.librevjs-libre-mixteal-skin .librevjs-big-play-button{font-size:1.4em}}.librevjs-libre-mixyellow-skin{color:#ccc;background-color:inherit}.librevjs-libre-mixyellow-skin .librevjs-slider{outline:0;position:relative;cursor:pointer;padding:0;background-color:#000;background-color:rgba(0,0,0,0.5)}.librevjs-libre-mixyellow-skin .librevjs-slider:focus{-webkit-box-shadow:0 0 2em #fff;-moz-box-shadow:0 0 2em #fff;box-shadow:0 0 2em #fff}.librevjs-libre-mixyellow-skin .librevjs-slider-handle{width:0;height:0}.librevjs-libre-mixyellow-skin .librevjs-slider-handle:before{text-shadow:0 0 1em #fff;position:absolute;top:0;left:0}.librevjs-libre-mixyellow-skin .librevjs-control-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:3.0em;background-color:#232323;background-color:rgba(35,35,35,0.8)}.librevjs-libre-mixyellow-skin.librevjs-has-started .librevjs-control-bar{display:block;visibility:visible;opacity:1;-webkit-transition:visibility .1s,opacity .1s;-moz-transition:visibility .1s,opacity .1s;-o-transition:visibility .1s,opacity .1s;transition:visibility .1s,opacity .1s}.librevjs-libre-mixyellow-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar{display:block;visibility:hidden;opacity:0;-webkit-transition:visibility 1s,opacity 1s;-moz-transition:visibility 1s,opacity 1s;-o-transition:visibility 1s,opacity 1s;transition:visibility 1s,opacity 1s}.librevjs-libre-mixyellow-skin.librevjs-controls-disabled .librevjs-control-bar{display:none}.librevjs-libre-mixyellow-skin.librevjs-using-native-controls .librevjs-control-bar{display:none}@media \0screen{.librevjs-libre-mixyellow-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar:before{content:""}}.librevjs-libre-mixyellow-skin .librevjs-control{outline:0;position:relative;float:left;text-align:center;margin:0;padding:0;height:3em;width:4em}.librevjs-libre-mixyellow-skin .librevjs-control:before{font-family:LibreVideoJS;font-size:1.5em;line-height:2;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.5)}.librevjs-libre-mixyellow-skin .librevjs-control:focus:before,.librevjs-libre-mixyellow-skin .librevjs-control:hover:before{color:#f1c40f}.librevjs-libre-mixyellow-skin .librevjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.librevjs-libre-mixyellow-skin .librevjs-play-control{width:5em;cursor:pointer;color:#f1c40e}.librevjs-libre-mixyellow-skin .librevjs-play-control:before{content:"\e001"}.librevjs-libre-mixyellow-skin .librevjs-play-control:hover:before{color:#f39c12}.librevjs-libre-mixyellow-skin.librevjs-playing .librevjs-play-control:before{content:"\e002"}.librevjs-libre-mixyellow-skin .librevjs-mute-control,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button{cursor:pointer;float:right}.librevjs-libre-mixyellow-skin .librevjs-mute-control:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button:before{content:"\e006"}.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-0:before{content:"\e003"}.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-1:before{content:"\e004"}.librevjs-libre-mixyellow-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button.librevjs-vol-2:before{content:"\e005"}.librevjs-libre-mixyellow-skin .librevjs-volume-control{width:5em;float:right}.librevjs-libre-mixyellow-skin .librevjs-volume-bar{width:5em;height:.6em;margin:1.1em auto 0}.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu-content{height:2.9em}.librevjs-libre-mixyellow-skin .librevjs-volume-level{position:absolute;top:0;left:0;height:.5em;width:100%;background:#f1c40f url() -50% 0 repeat}.librevjs-libre-mixyellow-skin .librevjs-volume-bar .librevjs-volume-handle{width:.5em;height:.5em}.librevjs-libre-mixyellow-skin .librevjs-volume-handle:before{font-size:.9em;top:-.2em;left:-.2em;width:1em;height:1em}.librevjs-libre-mixyellow-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content{width:6em;left:-4em}.librevjs-libre-mixyellow-skin .librevjs-progress-control{position:absolute;left:0;right:0;width:auto;font-size:.3em;height:1em;top:-1em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixyellow-skin:hover .librevjs-progress-control{font-size:.9em;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.librevjs-libre-mixyellow-skin .librevjs-progress-holder{height:100%}.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-mixyellow-skin .librevjs-progress-holder .librevjs-load-progress{position:absolute;display:block;height:100%;margin:0;padding:0;left:0;top:0}.librevjs-libre-mixyellow-skin .librevjs-play-progress{background:#f1c40f url() -50% 0 repeat}.librevjs-libre-mixyellow-skin .librevjs-load-progress{background:#646464;background:rgba(255,255,255,.4)}.librevjs-libre-mixyellow-skin .librevjs-seek-handle{width:1.5em;height:100%}.librevjs-libre-mixyellow-skin .librevjs-seek-handle:before{padding-top:.1em}.librevjs-libre-mixyellow-skin .librevjs-time-controls{font-size:1em;font-weight:700;line-height:3em}.librevjs-libre-mixyellow-skin .librevjs-current-time{float:left}.librevjs-libre-mixyellow-skin .librevjs-duration{float:left}.librevjs-libre-mixyellow-skin .librevjs-remaining-time{display:none;float:left}.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control{width:3.8em;cursor:pointer;float:right}.librevjs-libre-mixyellow-skin .librevjs-fullscreen-control:before{content:"\e000"}.librevjs-libre-mixyellow-skin.librevjs-fullscreen .librevjs-fullscreen-control:before{content:"\e00b"}.librevjs-libre-mixyellow-skin .librevjs-big-play-button{left:50%;margin-left:-1.85em;top:50%;margin-top:-1.3em;font-size:2em;display:block;z-index:2;position:absolute;width:3.8em;height:2.6em;text-align:center;vertical-align:middle;cursor:pointer;opacity:1;background-color:#232323;background-color:rgba(35,35,35,0.8);border:0 solid;-webkit-border-radius:.4em;-moz-border-radius:.4em;border-radius:.4em;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.librevjs-libre-mixyellow-skin.librevjs-controls-disabled .librevjs-big-play-button{display:none}.librevjs-libre-mixyellow-skin.librevjs-has-started .librevjs-big-play-button{display:none}.librevjs-libre-mixyellow-skin.librevjs-using-native-controls .librevjs-big-play-button{display:none}.librevjs-libre-mixyellow-skin:hover .librevjs-big-play-button,.librevjs-libre-mixyellow-skin .librevjs-big-play-button:focus{outline:0;cursor:pointer;background-color:#f49c12;color:#fff}.librevjs-libre-mixyellow-skin .librevjs-big-play-button:before{content:"\e001";font-family:LibreVideoJS;line-height:2.6em;text-shadow:.05em .05em .1em #000;text-align:center;position:absolute;left:0;width:100%;height:100%}.librevjs-libre-mixyellow-skin .librevjs-menu-button{float:right;cursor:pointer}.librevjs-libre-mixyellow-skin .librevjs-menu{display:none;position:absolute;bottom:0;left:0;width:0;height:0;margin-bottom:3em;border-left:2em solid transparent;border-right:2em solid transparent;border-top:1.55em solid #000;border-top-color:rgba(7,40,50,.5)}.librevjs-libre-mixyellow-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content{display:block;padding:0;margin:0;position:absolute;width:10em;bottom:1.5em;max-height:15em;overflow:auto;left:-5em;background-color:#07141e;background-color:rgba(7,20,30,.7);-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);box-shadow:-.2em -.2em .3em rgba(255,255,255,.2)}.librevjs-libre-mixyellow-skin .librevjs-menu-button:hover .librevjs-menu{display:block}.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li{list-style:none;margin:0;padding:.3em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase;color:#ccc}.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected{color:#fff;background-color:#f1c40e}.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:focus,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li:hover,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-selected:hover{outline:0;color:#fff;background-color:#f1c40f}.librevjs-libre-mixyellow-skin .librevjs-menu-button ul li.librevjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.librevjs-libre-mixyellow-skin .librevjs-subtitles-button:before{content:"\e00c"}.librevjs-libre-mixyellow-skin .librevjs-captions-button:before{content:"\e008"}.librevjs-libre-mixyellow-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-mixyellow-skin .librevjs-captions-button:hover .librevjs-control-content:before{-webkit-box-shadow:0 0 1em #fff;-moz-box-shadow:0 0 1em #fff;box-shadow:0 0 1em #fff}.librevjs-libre-mixyellow-skin .librevjs-hidden{display:none}.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title{color:#f1c40f;background-color:inherit}.librevjs-libre-mixyellow-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{color:#f39c12;background-color:inherit}@media screen and (max-width:400px){.librevjs-libre-mixyellow-skin .librevjs-big-play-button{font-size:2em}}@media screen and (max-width:150px){.librevjs-libre-mixyellow-skin .librevjs-big-play-button{font-size:1.8em}}@media screen and (max-width:90px){.librevjs-libre-mixyellow-skin .librevjs-big-play-button{font-size:1.4em}}.librevjs-time-divider{float:left;line-height:3em}.librevjs-error .librevjs-big-play-button{display:none}.librevjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;font-size:4em;line-height:1;width:1em;height:1em;margin-left:-.5em;margin-top:-.5em;opacity:.75;-webkit-animation:spin 1.5s infinite linear;-moz-animation:spin 1.5s infinite linear;-o-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear}.librevjs-loading-spinner:before{content:"\e01e";font-family:LibreVideoJS;position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}.cliplibre-js{background-color:#000;position:relative;padding:0;font-size:10px;vertical-align:middle;font-weight:500;font-style:normal;font-family:Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cliplibre-js .librevjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}.cliplibre-js:-moz-full-screen{position:absolute}body.librevjs-full-window{padding:0;margin:0;height:100%;overflow-y:auto}.cliplibre-js.librevjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important;position:absolute}.cliplibre-js:-webkit-full-screen{width:100%!important;height:100%!important}.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive{cursor:none}.librevjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;cursor:pointer;height:100%;margin:0;padding:0;position:relative;width:100%}.librevjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.cliplibre-js.librevjs-using-native-controls .librevjs-poster{display:none}.cliplibre-js .librevjs-text-track-display{text-align:center;position:absolute;bottom:4em;left:1em;right:1em}.cliplibre-js .librevjs-text-track{display:none;font-size:1.7em;text-align:center;margin-bottom:.1em;background-color:#000;background-color:rgba(0,0,0,.6)}.cliplibre-js .librevjs-subtitles{color:#fff}.cliplibre-js .librevjs-captions{color:#ffed00;background-color:rgba(2,7,11,0.7)}.librevjs-tt-cue{display:block}.librevjs-lock-showing{display:block!important;opacity:1;visibility:visible}.no_html5{background:black none repeat scroll 0 0;color:white;height:160px;padding:130px 10px 20px;text-align:center}.cliplibre-js-responsive-container.librevjs-hd{padding-top:56.25%}.cliplibre-js-responsive-container.librevjs-sd{padding-top:75%}.cliplibre-js-responsive-container{width:100%;position:relative}.cliplibre-js-responsive-container .cliplibre-js{height:100%!important;width:100%!important;position:absolute;top:0;left:0}@media screen and (max-width:800px){.cliplibre-js .librevjs-text-track{font-size:1.5em;margin-bottom:-0.2em}}@media screen and (max-width:600px){.cliplibre-js .librevjs-text-track{font-size:1.2em}.cliplibre-js .librevjs-text-track-display{bottom:2em}}@media screen and (max-width:413px){.cliplibre-js{font-size:8px}}@media screen and (max-width:400px){.cliplibre-js .librevjs-text-track{font-size:1em}.cliplibre-js .librevjs-text-track-display{bottom:1em}}@media screen and (max-width:335px){.cliplibre-js{font-size:6px}}.librevjs-res-button{font-weight:bold;float:right;line-height:3em}ul li.librevjs-menu-title.librevjs-res-menu-title:hover{cursor:default;background-color:transparent;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.librevjs-res-button .librevjs-control-text{width:auto;height:auto;clip:auto}div.LibreVideoJS{margin-bottom:20px}.librevjs-progress-tip{visibility:hidden;display:block;opacity:.8;padding:5px;font-size:10px;position:absolute;z-index:100000}.librevjs-progress-tip-arrow{background:url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) no-repeat top left;bottom:0;left:50%;margin-left:-4px;background-position:bottom left;position:absolute;width:9px;height:5px}.librevjs-progress-tip-inner{border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 8px 4px 8px;background-color:black;color:white;max-width:200px;text-align:center}
\ No newline at end of file |