aboutsummaryrefslogtreecommitdiffstats
path: root/lib/librevideojs/css/teal.css
diff options
context:
space:
mode:
Diffstat (limited to 'lib/librevideojs/css/teal.css')
-rw-r--r--lib/librevideojs/css/teal.css1128
1 files changed, 0 insertions, 1128 deletions
diff --git a/lib/librevideojs/css/teal.css b/lib/librevideojs/css/teal.css
deleted file mode 100644
index 0b64ce7..0000000
--- a/lib/librevideojs/css/teal.css
+++ /dev/null
@@ -1,1128 +0,0 @@
-/*!
-LibreVideoJS
-Version 2.0
-Copyright 2017, Jesus E.
-*/
-/* SKIN
-================================================================================
-The main class name for all skin-specific styles. To make your own skin,
-replace all occurrences of 'vjs-flat-skin' with a new name. Then add your new
-skin name to your video tag instead of the default skin.
-e.g. <video class="video-js my-skin-name">
-*/
-.librevjs-libre-mix-skin {
- color: #ffffff;
-}
-/* Custom Icon Font
---------------------------------------------------------------------------------
-The control icons are from a custom font. Each icon corresponds to a character
-(e.g. "\e001"). Font icons allow for easy scaling and coloring of icons.
-*/
-@font-face {
- font-family: 'LibreVideoJS';
- src: url('../fonts/libre-material/libre-icons.eot?#iefix') format('embedded-opentype'), url('../fonts/libre-material/libre-icons.woff') format('woff'), url('../fonts/libre-material/libre-icons.ttf') format('truetype'), url('../fonts/libre-material/libre-icons.svg#icomoon') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-/* Base UI Component Classes
---------------------------------------------------------------------------------
-*/
-/* Slider - used for Volume bar and Seek bar */
-.librevjs-libre-mix-skin .librevjs-slider {
- /* Replace browser focus highlight with handle highlight */
- outline: 0;
- position: relative;
- cursor: pointer;
- padding: 0;
- /* background-color-with-alpha */
- background-color: #333333;
- background-color: rgba(51, 51, 51, 0.9);
-}
-.librevjs-libre-mix-skin .librevjs-slider:focus {
- /* box-shadow */
- -webkit-box-shadow: 0 0 2em #fff;
- -moz-box-shadow: 0 0 2em #fff;
- box-shadow: 0 0 2em #fff;
-}
-.librevjs-libre-mix-skin .librevjs-slider-handle {
- position: absolute;
- /* Needed for IE6 */
- left: 0;
- top: 0;
-}
-.librevjs-libre-mix-skin .librevjs-slider-handle:before {
- text-shadow: 0em 0em 1em #fff;
- position: absolute;
- top: 0;
- left: 0;
-}
-/* Control Bar
---------------------------------------------------------------------------------
-The default control bar that is a container for most of the controls.
-*/
-.librevjs-libre-mix-skin .librevjs-control-bar {
- /* Start hidden */
- display: none;
- position: absolute;
- /* Place control bar at the bottom of the player box/video.
- If you want more margin below the control bar, add more height. */
- bottom: 0;
- /* Use left/right to stretch to 100% width of player div */
- left: 0;
- right: 0;
- /* Height includes any margin you want above or below control items */
- height: 3.0em;
- /* background-color-with-alpha */
- background-color: #232221;
- background-color: rgba(35, 34, 33, 0.8);
-}
-/* Show the control bar only once the video has started playing */
-.librevjs-libre-mix-skin.librevjs-has-started .librevjs-control-bar {
- display: block;
- /* Visibility needed to make sure things hide in older browsers too. */
- visibility: visible;
- opacity: 1;
- /* transition */
- -webkit-transition: visibility 0.1s, opacity 0.1s;
- -moz-transition: visibility 0.1s, opacity 0.1s;
- -o-transition: visibility 0.1s, opacity 0.1s;
- transition: visibility 0.1s, opacity 0.1s;
-}
-/* Hide the control bar when the video is playing and the user is inactive */
-.librevjs-libre-mix-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
- display: block;
- visibility: hidden;
- opacity: 0;
- /* transition */
- -webkit-transition: visibility 1s, opacity 1s;
- -moz-transition: visibility 1s, opacity 1s;
- -o-transition: visibility 1s, opacity 1s;
- transition: visibility 1s, opacity 1s;
-}
-.librevjs-libre-mix-skin.librevjs-controls-disabled .librevjs-control-bar {
- display: none;
-}
-.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-control-bar {
- display: none;
-}
-/* The control bar shouldn't show after an error */
-.librevjs-libre-mix-skin.librevjs-error .librevjs-control-bar {
- display: none;
-}
-/* Don't hide the control bar if it's audio */
-.librevjs-audio.librevjs-libre-mix-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
- opacity: 1;
- visibility: visible;
-}
-/* IE8 is flakey with fonts, and you have to change the actual content to force
-fonts to show/hide properly.
- - "\9" IE8 hack didn't work for this
- - Found in windows XP (Propietary Software) IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
-*/
-@media \0screen {
- .librevjs-libre-mix-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
- content: "";
- }
-}
-/* General styles for individual controls. */
-.librevjs-libre-mix-skin .librevjs-control {
- outline: none;
- position: relative;
- float: left;
- text-align: center;
- margin: 0;
- padding: 0;
- height: 3.0em;
- width: 4em;
-}
-/* FreeArt button icons: http://artlibre.org/licence/lal */
-.librevjs-libre-mix-skin .librevjs-control:before {
- font-family: LibreVideoJS;
- font-size: 1.5em;
- line-height: 2;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- text-align: center;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-}
-/* Replacement for focus outline */
-.librevjs-libre-mix-skin .librevjs-control:hover:before {
- color: #1de9b6;
-}
-.librevjs-libre-mix-skin .librevjs-control:focus {
- /* outline: 0; */
- /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */
-}
-/* Hide control text visually, but have it available for screenreaders */
-.librevjs-libre-mix-skin .librevjs-control-text {
- /* hide-visually */
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
-}
-/* Play/Pause
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin .librevjs-play-control {
- width: 5em;
- cursor: pointer;
- color: #1de9b6;
-}
-.librevjs-libre-mix-skin .librevjs-play-control:before {
- content: "\e001";
-}
-.librevjs-libre-mix-skin .librevjs-play-control:hover:before {
- color: #007c5d;
-}
-.librevjs-libre-mix-skin.librevjs-playing .librevjs-play-control:before {
- content: "\e002";
-}
-/* Playback toggle
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin .librevjs-playback-rate .librevjs-playback-rate-value {
- font-size: 1.5em;
- line-height: 2;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- text-align: center;
- text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-}
-.librevjs-libre-mix-skin .librevjs-playback-rate.librevjs-menu-button .librevjs-menu .librevjs-menu-content {
- width: 4em;
- left: -2em;
- list-style: none;
-}
-/* Volume/Mute
--------------------------------------------------------------------------------- */
-.librevjs-libre-mix-skin .librevjs-mute-control,
-.librevjs-libre-mix-skin .librevjs-volume-menu-button {
- cursor: pointer;
- float: right;
-}
-.librevjs-libre-mix-skin .librevjs-mute-control:before,
-.librevjs-libre-mix-skin .librevjs-volume-menu-button:before {
- content: "\e006";
-}
-.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-0:before,
-.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
- content: "\e003";
-}
-.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-1:before,
-.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
- content: "\e004";
-}
-.librevjs-libre-mix-skin .librevjs-mute-control.librevjs-vol-2:before,
-.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
- content: "\e005";
-}
-.librevjs-libre-mix-skin .librevjs-volume-control {
- width: 5em;
- float: right;
-}
-.librevjs-libre-mix-skin .librevjs-volume-bar {
- width: 5em;
- height: 0.6em;
- margin: 1.1em auto 0;
-}
-.librevjs-libre-mix-skin .librevjs-volume-level {
- position: absolute;
- top: 0;
- left: 0;
- height: 0.6em;
- /* assuming volume starts at 1.0 */
- width: 100%;
- background: #1de9b6;
-}
-.librevjs-libre-mix-skin .librevjs-volume-bar .librevjs-volume-handle {
- width: 0.5em;
- height: 0.5em;
- /* Assumes volume starts at 1.0. If you change the size of the
- handle relative to the volume bar, you'll need to update this value
- too. */
- left: 4.5em;
-}
-.librevjs-libre-mix-skin .librevjs-volume-handle:before {
- font-size: 0.9em;
- top: -0.2em;
- left: -0.2em;
- width: 1em;
- height: 1em;
-}
-/* The volume menu button is like menu buttons (captions/subtitles) but works
- a little differently. It needs to be possible to tab to the volume slider
- without hitting space bar on the menu button. To do this we're not using
- display:none to hide the slider menu by default, and instead setting the
- width and height to zero. */
-.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu {
- display: block;
- width: 0;
- height: 0;
- border-top-color: transparent;
-}
-.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
- height: 0;
- width: 0;
- transform: rotate(-90deg);
-}
-.librevjs-libre-mix-skin .librevjs-volume-menu-button.librevjs-menu-button .librevjs-menu .librevjs-menu-content {
- margin-bottom: 3.2em;
-}
-/*.librevjs-libre-mix-skin .librevjs-volume-menu-button:hover .librevjs-menu,
-.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu.librevjs-lock-showing {
- border-top-color: rgba(7, 40, 50, 0.5);
-}*/
-.librevjs-libre-mix-skin .librevjs-volume-menu-button:hover .librevjs-menu .librevjs-menu-content,
-.librevjs-libre-mix-skin .librevjs-volume-menu-button .librevjs-menu.librevjs-lock-showing .librevjs-menu-content {
- height: 2.9em;
- width: 10em;
-}
-/* Progress
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin .librevjs-progress-control {
- position: absolute;
- left: 0;
- right: 0;
- width: auto;
- font-size: 0.3em;
- height: 1em;
- /* Set above the rest of the controls. */
- top: -1em;
- /* Shrink the bar slower than it grows. */
- /* transition */
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
-}
-/* On hover, make the progress bar grow to something that's more clickable.
- This simply changes the overall font for the progress bar, and this
- updates both the em-based widths and heights, as wells as the icon font */
-.librevjs-libre-mix-skin:hover .librevjs-progress-control {
- font-size: 1em;
- /* Even though we're not changing the top/height, we need to include them in
- the transition so they're handled correctly. */
- /* transition */
- -webkit-transition: all 0.2s;
- -moz-transition: all 0.2s;
- -o-transition: all 0.2s;
- transition: all 0.2s;
-}
-/* Box containing play and load progresses. Also acts as seek scrubber. */
-.librevjs-libre-mix-skin .librevjs-progress-holder {
- height: 100%;
-}
-/* Progress Bars */
-.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-play-progress,
-.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress,
-.librevjs-libre-mix-skin .librevjs-progress-holder .librevjs-load-progress div {
- position: absolute;
- display: block;
- height: 100%;
- margin: 0;
- padding: 0;
- /* updated by javascript during playback */
- width: 0;
- /* Needed for IE6 */
- left: 0;
- top: 0;
-}
-.librevjs-libre-mix-skin .librevjs-play-progress {
- /* Using a data URI to create the white diagonal lines with a transparent
- background. Surprisingly works in IE8.
- Changing the first color value will change the bar color.
- Also using a paralax effect to make the lines move backwards.
- The -50% left position makes that happen.
- */
- background: #1de9b6 /* IE8- Fallback */;
-}
-.librevjs-libre-mix-skin .librevjs-load-progress {
- background: #d6dbdf /* IE8- Fallback */;
- background: rgba(214, 219, 223, 0.6);
-}
-/* there are child elements of the load progress bar that represent the
- specific time ranges that have been buffered */
-.librevjs-libre-mix-skin .librevjs-load-progress div {
- background: #787878 /* IE8- Fallback */;
- background: rgba(255, 255, 255, 0.1);
-}
-.librevjs-libre-mix-skin .librevjs-seek-handle {
- width: 2em;
- height: 2em;
- border-radius: 1em;
- top: -0.5em;
- background-color: #007c5d;
- opacity: 0;
- transition: opacity 0.4s ease-in-out;
-}
-/*.librevjs-libre-mix-skin .librevjs-seek-handle:before {
- padding-top: 0.1em;
-}*/
-.librevjs-libre-mix-skin .librevjs-progress-control:hover .librevjs-slider-handle {
- opacity: 1;
- transition: opacity 0.4s ease-in-out;
-}
-/* Live Mode
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin.librevjs-live .librevjs-time-controls,
-.librevjs-libre-mix-skin.librevjs-live .librevjs-time-divider,
-.librevjs-libre-mix-skin.librevjs-live .librevjs-progress-control {
- display: none;
-}
-.librevjs-libre-mix-skin.librevjs-live .librevjs-live-display {
- display: block;
-}
-/* Live Display
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin .librevjs-live-display {
- display: none;
- font-size: 1em;
- line-height: 3em;
-}
-/* Time Display
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin .librevjs-time-controls {
- font-size: 1.083em;
- font-weight: bold;
- color: #d6dbdf;
- /* Align vertically by making the line height the same as the control bar */
- line-height: 3em;
- width: 2em;
-}
-.librevjs-libre-mix-skin .librevjs-current-time {
- float: left;
-}
-.librevjs-libre-mix-skin .librevjs-current-time-display {
- float: right;
-}
-.librevjs-libre-mix-skin .librevjs-duration,
-.librevjs-libre-mix-skin .librevjs-duration .librevjs-duration-display {
- float: left;
-}
-/* Remaining time is in the HTML, but not included in default design */
-.librevjs-libre-mix-skin .librevjs-remaining-time {
- display: none;
- float: left;
-}
-.librevjs-time-divider {
- float: left;
- line-height: 3em;
- font-size: 1.083em;
- font-weight: bold;
- width: 1em;
- text-align: center;
-}
-/* Fullscreen
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin .librevjs-fullscreen-control {
- width: 3.8em;
- cursor: pointer;
- float: right;
-}
-.librevjs-libre-mix-skin .librevjs-fullscreen-control:before {
- content: "\e000";
-}
-/* Switch to the exit icon when the player is in fullscreen */
-.librevjs-libre-mix-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
- content: "\e00b";
-}
-/* Big Play Button (play button at start)
---------------------------------------------------------------------------------
-Positioning of the play button in the center or other corners can be done more
-easily in the skin designer. http://designer.videojs.com/
-*/
-.librevjs-libre-mix-skin .librevjs-big-play-button {
- left: 50%;
- top: 50%;
- font-size: 2em;
- display: block;
- z-index: 2;
- position: absolute;
- width: 3.8em;
- height: 2.6em;
- margin-left: -1.9em;
- margin-top: -1.52em;
- text-align: center;
- vertical-align: middle;
- cursor: pointer;
- opacity: 1;
- color: #ffffff;
- /* background-color-with-alpha */
- background-color: #333333;
- background-color: rgba(51, 51, 51, 0.9);
- /* border-radius */
- -webkit-border-radius: 0.4em;
- -moz-border-radius: 0.4em;
- border-radius: 0.4em;
- /* transition */
- -webkit-transition: all 0.4s;
- -moz-transition: all 0.4s;
- -o-transition: all 0.4s;
- transition: all 0.4s;
-}
-/* Hide if controls are disabled */
-.librevjs-libre-mix-skin.librevjs-controls-disabled .librevjs-big-play-button {
- display: none;
-}
-/* Hide when video starts playing */
-.librevjs-libre-mix-skin.librevjs-has-started .librevjs-big-play-button {
- display: none;
-}
-/* Hide on mobile devices. Remove when we stop using native controls
- by default on mobile */
-.librevjs-libre-mix-skin.librevjs-using-native-controls .librevjs-big-play-button {
- display: none;
-}
-.librevjs-libre-mix-skin:hover .librevjs-big-play-button,
-.librevjs-libre-mix-skin .librevjs-big-play-button:focus {
- color: #ffffff;
- background-color: #1de9b6;
-}
-.librevjs-libre-mix-skin .librevjs-big-play-button:before {
- content: "\e001";
- font-family: LibreVideoJS;
- /* In order to center the play icon vertically we need to set the line height
- to the same as the button height */
- text-align: center /* Needed for IE8 */;
- /*Shadow*/
- text-shadow: 0.05em 0.05em 0.1em #000;
- line-height: 2.6em;
- position: absolute;
- left: 0;
- width: 100%;
- height: 100%;
-}
-.librevjs-error .librevjs-big-play-button {
- display: none;
-}
-/* Error Display
---------------------------------------------------------------------------------
-*/
-.librevjs-error-display {
- display: none;
-}
-.librevjs-error .librevjs-error-display {
- display: block;
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
-}
-.librevjs-error .librevjs-error-display:before {
- content: 'X';
- font-family: Arial;
- font-size: 4em;
- color: #666666;
- /* In order to center the play icon vertically we need to set the line height
- to the same as the button height */
- line-height: 1;
- text-shadow: 0.05em 0.05em 0.1em #000;
- text-align: center /* Needed for IE8 */;
- vertical-align: middle;
- position: absolute;
- left: 0;
- top: 50%;
- margin-top: -0.5em;
- width: 100%;
-}
-.librevjs-error-display div {
- position: absolute;
- bottom: 1em;
- right: 0;
- left: 0;
- font-size: 1.4em;
- text-align: center;
- padding: 3px;
- background: #000000;
- background: rgba(0, 0, 0, 0.5);
-}
-.librevjs-error-display a,
-.librevjs-error-display a:visited {
- color: #F4A460;
-}
-/* Loading Spinner
---------------------------------------------------------------------------------
-*/
-.librevjs-loading-spinner {
- /* Should be hidden by default */
- display: none;
- position: absolute;
- top: 50%;
- left: 50%;
- font-size: 4em;
- line-height: 1;
- width: 1em;
- height: 1em;
- margin-left: -0.5em;
- margin-top: -0.5em;
- opacity: 0.75;
- /* animation */
- -webkit-animation: spin 1.5s infinite linear;
- -moz-animation: spin 1.5s infinite linear;
- -o-animation: spin 1.5s infinite linear;
- animation: spin 1.5s infinite linear;
-}
-/* Show the spinner when waiting for data and seeking to a new time */
-.librevjs-waiting .librevjs-loading-spinner,
-.librevjs-seeking .librevjs-loading-spinner {
- display: block;
- /* only animate when showing because it can be processor heavy */
- /* animation */
- -webkit-animation: spin 1.5s infinite linear;
- -moz-animation: spin 1.5s infinite linear;
- -o-animation: spin 1.5s infinite linear;
- animation: spin 1.5s infinite linear;
-}
-/* Errors are unrecoverable without user interaction so hide the spinner */
-.librevjs-error .librevjs-loading-spinner {
- display: none;
- /* ensure animation doesn't continue while hidden */
- /* animation */
- -webkit-animation: none;
- -moz-animation: none;
- -o-animation: none;
- animation: none;
-}
-.librevjs-libre-mix-skin .librevjs-loading-spinner:before {
- content: "\e01e";
- font-family: LibreVideoJS;
- position: absolute;
- top: 0;
- left: 0;
- width: 1em;
- height: 1em;
- text-align: center;
- text-shadow: 0em 0em 0.1em #000;
-}
-@-moz-keyframes spin {
- 0% {
- -moz-transform: rotate(0deg);
- }
- 100% {
- -moz-transform: rotate(359deg);
- }
-}
-@-webkit-keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(359deg);
- }
-}
-@-o-keyframes spin {
- 0% {
- -o-transform: rotate(0deg);
- }
- 100% {
- -o-transform: rotate(359deg);
- }
-}
-@keyframes spin {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(359deg);
- }
-}
-/* Menu Buttons (Captions/Subtitles/etc.)
---------------------------------------------------------------------------------
-*/
-.librevjs-libre-mix-skin .librevjs-menu-button {
- float: right;
- cursor: pointer;
-}
-.librevjs-libre-mix-skin .librevjs-menu {
- display: none;
- position: absolute;
- bottom: 0;
- left: 0em;
- /* (Width of vjs-menu - width of button) / 2 */
- width: 0em;
- height: 0em;
- margin-bottom: 3em;
- border-left: 2em solid transparent;
- border-right: 2em solid transparent;
- border-top: 1.55em solid #000000;
- /* Same width top as ul bottom */
- border-top-color: rgba(0, 0, 0, 0.4);
- /* Same as ul background */
-}
-/* Color menu (captions/subtitles)*/
-.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected {
- color: #0d1f2c;
- background-color: #1de9b6;
-}
-.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus,
-.librevjs-libre-mix-skin .librevjs-menu-button ul li:hover,
-.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus,
-.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover {
- outline: 0;
- color: #007c5d;
- background-color: #1de9b6;
-}
-/*Title Resolution | subtitles and Caption*/
-.librevjs-libre-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title {
- color: #1de9b6;
- background-color: inherit;
-}
-.librevjs-libre-mix-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover {
- color: #1de9b6;
- background-color: inherit;
-}
-/* Button Pop-up Menu */
-.librevjs-libre-mix-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
- display: block;
- padding: 0;
- margin: 0;
- position: absolute;
- width: 10em;
- bottom: 1.5em;
- /* Same bottom as vjs-menu border-top */
- max-height: 15em;
- overflow: auto;
- left: -5em;
- /* Width of menu - width of button / 2 */
- background-color: #232221;
- background-color: rgba(0, 0, 0, 0.4);
- /* box-shadow */
- -webkit-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
- -moz-box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
- box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2);
-}
-/*
-.librevjs-libre-mix-skin .librevjs-menu-button:hover .librevjs-control-content .librevjs-menu,
-.librevjs-libre-mix-skin .librevjs-control-content .librevjs-menu.librevjs-lock-showing
-*/
-.librevjs-libre-mix-skin .librevjs-menu-button:hover .librevjs-menu {
- display: block;
-}
-/* prevent menus from opening while scrubbing (FF, IE) */
-.librevjs-libre-mix-skin.librevjs-scrubbing .librevjs-menu-button:hover .librevjs-control-content .librevjs-menu {
- display: none;
-}
-.librevjs-libre-mix-skin .librevjs-menu-button ul li {
- list-style: none;
- margin: 0;
- padding: 0.3em 0 0.3em 0;
- line-height: 1.4em;
- font-size: 1.2em;
- text-align: center;
- text-transform: lowercase;
-}
-.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected {
- background-color: #1de9b6;
-}
-.librevjs-libre-mix-skin .librevjs-menu-button ul li:focus,
-.librevjs-libre-mix-skin .librevjs-menu-button ul li:hover,
-.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:focus,
-.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-selected:hover {
- outline: 0;
- color: #0d1f2c;
- background-color: #1de9b6;
- /*.background-color-with-alpha(rgb(255, 255, 255), 0.75);*/
- /*.box-shadow(0 0 1em rgba(255, 255, 255, 1));*/
-}
-.librevjs-libre-mix-skin .librevjs-menu-button ul li.librevjs-menu-title {
- text-align: center;
- text-transform: uppercase;
- font-size: 1em;
- line-height: 2em;
- padding: 0;
- margin: 0 0 0.3em 0;
- font-weight: bold;
- cursor: default;
-}
-/* Subtitles Button */
-.librevjs-libre-mix-skin .librevjs-subtitles-button:before {
- content: "\e00c";
-}
-/* Captions Button */
-.librevjs-libre-mix-skin .librevjs-captions-button:before {
- content: "\e008";
-}
-/* Chapters Button */
-.librevjs-libre-mix-skin .librevjs-chapters-button:before {
- content: "\e00c";
-}
-.librevjs-libre-mix-skin .librevjs-chapters-button.librevjs-menu-button .librevjs-menu .librevjs-menu-content {
- width: 24em;
- left: -12em;
-}
-/* Replacement for focus outline */
-.librevjs-libre-mix-skin .librevjs-captions-button:focus .librevjs-control-content:before,
-.librevjs-libre-mix-skin .librevjs-captions-button:hover .librevjs-control-content:before {
- /* box-shadow */
- -webkit-box-shadow: 0 0 1em #ffffff;
- -moz-box-shadow: 0 0 1em #ffffff;
- box-shadow: 0 0 1em #ffffff;
-}
-/*
-REQUIRED STYLES (be careful overriding)
-================================================================================
-When loading the player, the video tag is replaced with a DIV,
-that will hold the video tag or object tag for other playback methods.
-The div contains the video playback element (Flash or HTML5) and controls,
-and sets the width and height of the video.
-
-** If you want to add some kind of border/padding (e.g. a frame), or special
-positioning, use another containing element. Otherwise you risk messing up
-control positioning and full window mode. **
-*/
-.cliplibre-js {
- background-color: #000;
- position: relative;
- padding: 0;
- /* Start with 10px for base font size so other dimensions can be em based and
- easily calculable. */
- font-size: 12px;
- /* Allow poster to be vertically aligned. */
- vertical-align: middle;
- /* display: table-cell; */
- /*This works in Safari but not Firefox.*/
- /* Provide some basic defaults for fonts */
- font-weight: normal;
- font-style: normal;
- /* Avoiding helvetica: issue #376 */
- font-family: Arial, Helvetica, sans-serif;
- /* Turn off user selection (text highlighting) by default.
- The majority of player components will not be text blocks.
- Text areas will need to turn user selection back on. */
- /* user-select */
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-/* Playback technology elements expand to the width/height of the containing div
- <video> or <object> */
-.cliplibre-js .librevjs-tech {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-}
-/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
- checking fullScreenEnabled. */
-.cliplibre-js:-moz-full-screen {
- position: absolute;
-}
-/* Fullscreen Styles */
-body.librevjs-full-window {
- padding: 0;
- margin: 0;
- height: 100%;
- /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
- overflow-y: auto;
-}
-.cliplibre-js.librevjs-fullscreen {
- position: fixed;
- overflow: hidden;
- z-index: 1000;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- width: 100% !important;
- height: 100% !important;
- /* IE6 full-window (underscore hack) */
- _position: absolute;
-}
-.cliplibre-js:-webkit-full-screen {
- width: 100% !important;
- height: 100% !important;
-}
-.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
- cursor: none;
-}
-/* Poster Styles */
-.librevjs-poster {
- background-repeat: no-repeat;
- background-position: 50% 50%;
- background-size: contain;
- background-color: #000000;
- cursor: pointer;
- margin: 0;
- padding: 0;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-}
-.librevjs-poster img {
- display: block;
- margin: 0 auto;
- max-height: 100%;
- padding: 0;
- width: 100%;
-}
-/* Hide the poster after the video has started playing */
-.cliplibre-js.librevjs-has-started .librevjs-poster {
- display: none;
-}
-/* Don't hide the poster if we're playing audio */
-.cliplibre-js.librevjs-audio.librevjs-has-started .librevjs-poster {
- display: block;
-}
-/* Hide the poster when controls are disabled because it's clickable
- and the native poster can take over */
-.cliplibre-js.librevjs-controls-disabled .librevjs-poster {
- display: none;
-}
-/* Hide the poster when native controls are used otherwise it covers them */
-.cliplibre-js.librevjs-using-native-controls .librevjs-poster {
- display: none;
-}
-/* Text Track Styles */
-/* Overall track holder for both captions and subtitles */
-.cliplibre-js .librevjs-text-track-display {
- text-align: center;
- position: absolute;
- bottom: 4em;
- left: 1em;
- right: 1em;
-}
-.cliplibre-js .librevjs-subtitles {
- color: #fff;
-}
-.cliplibre-js .librevjs-captions {
- color: #ffffff;
- background-color: rgba(2, 7, 11, 0.7);
-}
-/* Captions Settings Dialog */
-.librevjs-caption-settings {
- position: relative;
- top: 1em;
- background-color: #000;
- opacity: 0.75;
- color: #FFF;
- margin: 0 auto;
- padding: 0.5em;
- height: 15em;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 12px;
- width: 40em;
-}
-.librevjs-caption-settings .librevjs-tracksettings {
- top: 0;
- bottom: 2em;
- left: 0;
- right: 0;
- position: absolute;
- overflow: auto;
-}
-.librevjs-caption-settings .librevjs-tracksettings-colors,
-.librevjs-caption-settings .librevjs-tracksettings-font {
- float: left;
-}
-.librevjs-caption-settings .librevjs-tracksettings-colors:after,
-.librevjs-caption-settings .librevjs-tracksettings-font:after,
-.librevjs-caption-settings .librevjs-tracksettings-controls:after {
- clear: both;
-}
-.librevjs-caption-settings .librevjs-tracksettings-controls {
- position: absolute;
- bottom: 1em;
- right: 1em;
-}
-.librevjs-caption-settings .librevjs-tracksetting {
- margin: 5px;
- padding: 3px;
- min-height: 40px;
-}
-.librevjs-caption-settings .librevjs-tracksetting label {
- display: block;
- width: 100px;
- margin-bottom: 5px;
-}
-.librevjs-caption-settings .librevjs-tracksetting span {
- display: inline;
- margin-left: 5px;
-}
-.librevjs-caption-settings .librevjs-tracksetting > div {
- margin-bottom: 5px;
- min-height: 20px;
-}
-.librevjs-caption-settings .librevjs-tracksetting > div:last-child {
- margin-bottom: 0;
- padding-bottom: 0;
- min-height: 0;
-}
-.librevjs-caption-settings label > input {
- margin-right: 10px;
-}
-.librevjs-caption-settings input[type="button"] {
- width: 40px;
- height: 40px;
-}
-/* Hide disabled or unsupported controls */
-.librevjs-hidden {
- display: none !important;
-}
-.librevjs-lock-showing {
- display: block !important;
- opacity: 1;
- visibility: visible;
-}
-/* In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
- The .cliplibre-js classname on the video tag also isn't considered.
- This optional paragraph inside the video tag can provide a message to users
- about what's required to play video. */
-.librevjs-no-js {
- padding: 2em;
- color: #ccc;
- background-color: #333;
- font-size: 1.8em;
- font-family: Arial, sans-serif;
- text-align: center;
- width: 30em;
- height: 15em;
- margin: 0 auto;
-}
-.librevjs-no-js a,
-.librevjs-no-js a:visited {
- color: #F4A460;
-}
-/*Responsive web desing
- The dates are calculates for display
-*/
-.cliplibre-js-responsive-container.librevjs-hd {
- padding-top: 56.25%;
-}
-.cliplibre-js-responsive-container.librevjs-sd {
- padding-top: 75%;
-}
-.cliplibre-js-responsive-container {
- width: 100%;
- position: relative;
-}
-.cliplibre-js-responsive-container .cliplibre-js {
- height: 100% !important;
- width: 100% !important;
- position: absolute;
- top: 0;
- left: 0;
-}
-@media screen and (max-width: 800px) {
- .cliplibre-js .librevjs-text-track {
- font-size: 1.5em;
- margin-bottom: -0.2em;
- line-height: 1.5;
- }
-}
-@media screen and (max-width: 600px) {
- .cliplibre-js .librevjs-text-track {
- font-size: 1.2em;
- }
- .cliplibre-js .librevjs-text-track-display {
- bottom: 2em;
- }
-}
-@media screen and (max-width: 413px) {
- .cliplibre-js {
- font-size: 8px;
- }
-}
-@media screen and (max-width: 400px) {
- .cliplibre-js .librevjs-text-track {
- font-size: 1em;
- }
- .librevjs-libre-mix-skin .librevjs-big-play-button {
- font-size: 2em;
- }
- .cliplibre-js .librevjs-text-track-display {
- bottom: 1em;
- }
-}
-@media screen and (max-width: 335px) {
- .cliplibre-js {
- font-size: 6px;
- }
-}
-@media screen and (max-width: 150px) {
- .librevjs-libre-mix-skin .librevjs-big-play-button {
- font-size: 1.8em;
- }
-}
-@media screen and (max-width: 90px) {
- .librevjs-libre-mix-skin .librevjs-big-play-button {
- font-size: 1.4em;
- }
-}
-/* End Responsive*/
-/* Quality Selector Universal
-------------------------------------------------------------------------------*/
-/* Position the button */
-.librevjs-res-button {
- font-weight: bold;
- float: right;
- line-height: 3em;
-}
-/* Don't show hover effects on title */
-ul li.librevjs-menu-title.librevjs-res-menu-title:hover {
- cursor: default;
- background-color: transparent;
- -moz-box-shadow: none;
- -webkit-box-shadow: none;
- box-shadow: none;
-}
-/* Needed to keep text visible in LibreVideoJS */
-.librevjs-res-button .librevjs-control-text {
- width: auto;
- height: auto;
- clip: auto;
-}
-/* ProgressTips Universal
-------------------------------------------------------------------------------*/
-.librevjs-progress-tip {
- visibility: hidden;
- display: block;
- opacity: 0.8;
- padding: 5px;
- font-size: 10px;
- position: absolute;
- z-index: 100000;
-}
-.librevjs-progress-tip-arrow {
- background: url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) no-repeat top left;
- bottom: 0;
- left: 50%;
- margin-left: -4px;
- background-position: bottom left;
- position: absolute;
- width: 9px;
- height: 5px;
-}
-.librevjs-progress-tip-inner {
- border-radius: 3px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- padding: 5px 8px 4px 8px;
- background-color: black;
- color: white;
- max-width: 200px;
- text-align: center;
-}
-/* -----------------------------------------------------------------------------
-The original source of this file lives at
-https://github.com/videojs/video.js/blob/master/src/css/video-js.less */
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-10 19:40:22 +0000