aboutsummaryrefslogtreecommitdiffstats
path: root/lib/librevideojs/css
diff options
context:
space:
mode:
Diffstat (limited to 'lib/librevideojs/css')
-rw-r--r--lib/librevideojs/css/blue.css1127
-rw-r--r--lib/librevideojs/css/blue.less1426
-rw-r--r--lib/librevideojs/css/teal.css1127
-rw-r--r--lib/librevideojs/css/teal.less1426
4 files changed, 5106 insertions, 0 deletions
diff --git a/lib/librevideojs/css/blue.css b/lib/librevideojs/css/blue.css
new file mode 100644
index 0000000..cb0986d
--- /dev/null
+++ b/lib/librevideojs/css/blue.css
@@ -0,0 +1,1127 @@
+/*!
+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: #0b89ed;
+}
+.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: #0b89ed;
+}
+.librevjs-libre-mix-skin .librevjs-play-control:before {
+ content: "\e001";
+}
+.librevjs-libre-mix-skin .librevjs-play-control:hover:before {
+ color: #2196f4;
+}
+.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: #0b89ed;
+}
+.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: #0b89ed /* 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: #2196f4;
+ 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;
+}
+.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: #0b89ed;
+}
+.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: #0b89ed;
+}
+.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: #2196f4;
+ background-color: #0b89ed;
+}
+/*Title Resolution | subtitles and Caption*/
+.librevjs-libre-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title {
+ color: #0b89ed;
+ background-color: inherit;
+}
+.librevjs-libre-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover {
+ color: #0b89ed;
+ 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: #0b89ed;
+}
+.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: #0b89ed;
+ /*.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: 3.5em;
+ 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/lib/librevideojs/css/blue.less b/lib/librevideojs/css/blue.less
new file mode 100644
index 0000000..b14d95d
--- /dev/null
+++ b/lib/librevideojs/css/blue.less
@@ -0,0 +1,1426 @@
+/*!
+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: #0b89ed;
+@primary-dark-color: #2196f4;
+@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;
+}
+.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: 3.5em;
+ 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/lib/librevideojs/css/teal.css b/lib/librevideojs/css/teal.css
new file mode 100644
index 0000000..bc76d20
--- /dev/null
+++ b/lib/librevideojs/css/teal.css
@@ -0,0 +1,1127 @@
+/*!
+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;
+}
+.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: 3.5em;
+ 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/lib/librevideojs/css/teal.less b/lib/librevideojs/css/teal.less
new file mode 100644
index 0000000..5404f69
--- /dev/null
+++ b/lib/librevideojs/css/teal.less
@@ -0,0 +1,1426 @@
+/*!
+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;
+}
+.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: 3.5em;
+ 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 */
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-12 01:21:03 +0000