diff options
| -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/mce-button.css | 2 | ||||
| -rw-r--r-- | functions.php | 2 | ||||
| -rw-r--r-- | readme.txt | 8 | ||||
| -rw-r--r-- | vinotjs/processor.php | 3 | ||||
| -rw-r--r-- | vinotjs/vinotjs.php | 4 |
9 files changed, 10 insertions, 4009 deletions
diff --git a/css/librevideojs/red.less b/css/librevideojs/red.less deleted file mode 100644 index 3a7287c..0000000 --- a/css/librevideojs/red.less +++ /dev/null @@ -1,1427 +0,0 @@ -/*! -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 deleted file mode 100644 index f6fc653..0000000 --- a/css/librevideojs/teal.css +++ /dev/null @@ -1,1128 +0,0 @@ -/*! -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 deleted file mode 100644 index 9ccca1a..0000000 --- a/css/librevideojs/teal.less +++ /dev/null @@ -1,1427 +0,0 @@ -/*! -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 deleted file mode 100644 index 5af057b..0000000 --- a/css/librevideojs/teal.min.css +++ /dev/null @@ -1,18 +0,0 @@ -/*!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/mce-button.css b/css/mce-button.css index f039409..f51eb9b 100644 --- a/css/mce-button.css +++ b/css/mce-button.css @@ -1,4 +1,4 @@ i.mce-i-vinotjs:before { font-family: "dashicons"; - content: "\f236"; + content: "\f234"; } diff --git a/functions.php b/functions.php index a8f7011..5c563b6 100644 --- a/functions.php +++ b/functions.php @@ -155,6 +155,6 @@ function disable_embeds_rewrites($rules) { return $rules; } -/* LibreVideoJS +/* ViNotJS ------------------------------------------------------------------------------*/ include_once 'vinotjs/vinotjs.php'; @@ -2,15 +2,15 @@ Contributors: Jesús Eduardo Donate link: https://liberapay.com/ConocimientosLibres/donate Requires at least: WordPress 4.3 -Tested up to: 4.7.5 +Tested up to: 4.8 Stable tag: 1.0 Version: 1.0 License: GPLv3 or later -License URI: http://www.gnu.org/licenses/gpl-3.0.html +License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: libre, tema, librejs, html5, wordpress, responsive desing == Description == -Theme written in HTML5, Bootstrap 3, CSS3 and JS, for a world free and compatible with the GNU LibreJS. +Theme written in HTML5, Bootstrap 3, CSS3, for a world free and compatible with the GNU LibreJS. * Responsive Layout * Custom Colors @@ -59,7 +59,7 @@ Not necessary to already available in the preview. = 1.0 = * Add Languages -* Add LibreVideoJS v2.0 +* Add ViNotJS * Optimal Code = 0.0.1 = diff --git a/vinotjs/processor.php b/vinotjs/processor.php index 555a081..579a1ee 100644 --- a/vinotjs/processor.php +++ b/vinotjs/processor.php @@ -1,9 +1,10 @@ <?php $yturllarge = "www.youtube.com"; +$ytmobile = "m.youtube.com"; $yturlshort = 'youtu.be/'; -if (strpos($url, $yturlshort) !== false || strpos($url, $yturllarge) !== false ){ +if (strpos($url, $yturlshort) !== false || strpos($url, $yturllarge) !== false || strpos($url, $ytmobile) !== false){ $link = $url; $id = substr($link, -11); //Extract the youtube video ID $format = "video/webm"; //the MIME type of the video. e.g. video/webm, etc. diff --git a/vinotjs/vinotjs.php b/vinotjs/vinotjs.php index 1ab4be2..8e1337e 100644 --- a/vinotjs/vinotjs.php +++ b/vinotjs/vinotjs.php @@ -1,6 +1,6 @@ <?php -/* Implementación de LibreVideoJS +/* Implementación de ViNotJS ==============================================================================================*/ include_once 'libre-panel.php'; @@ -162,4 +162,4 @@ function track_vinotjs($atts, $content=null){ return $track; } -add_shortcode('track', 'track_vinotjs');
\ No newline at end of file +add_shortcode('track', 'track_vinotjs'); |