aboutsummaryrefslogtreecommitdiffstats
path: root/css/libre-custom-skin
diff options
context:
space:
mode:
Diffstat (limited to 'css/libre-custom-skin')
-rw-r--r--css/libre-custom-skin/custom_skin.azul.css725
-rw-r--r--css/libre-custom-skin/custom_skin.rojo.css726
-rw-r--r--css/libre-custom-skin/custom_skin.teal.css726
3 files changed, 2177 insertions, 0 deletions
diff --git a/css/libre-custom-skin/custom_skin.azul.css b/css/libre-custom-skin/custom_skin.azul.css
new file mode 100644
index 0000000..8e94cc4
--- /dev/null
+++ b/css/libre-custom-skin/custom_skin.azul.css
@@ -0,0 +1,725 @@
+/*!
+LibreVideoJS. custom Styles
+Version 0.2
+*/
+
+.librevjs-custom-skin {
+ color: #ccc;
+ background-color: inherit;
+}
+
+@font-face {
+ font-family:"VideoJS";
+ src: url("../../fonts/default/vjs.eot") format("embedded-opentype");
+ src: local('?'),
+ url("../../fonts/default/vjs.woff") format("woff"),
+ url("../../fonts/default/vjs.ttf") format("truetype"),
+ url("../../fonts/default/vjs.svg") format("svg");
+ font-weight:400;
+ font-style:normal
+}
+
+.librevjs-custom-skin .librevjs-slider {
+ /* Replace browser focus highlight with handle highlight */
+ outline: 0;
+ position: relative;
+ cursor: pointer;
+ padding: 0;
+ /* background-color-with-alpha */
+ background-color: #000000;
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
+.librevjs-custom-skin .librevjs-slider:focus {
+ -webkit-box-shadow: 0 0 2em #fff;
+ -moz-box-shadow: 0 0 2em #fff;
+ box-shadow: 0 0 2em #fff
+}
+
+
+/*Eliminación de botón de barra de progreso*/
+
+.librevjs-custom-skin .librevjs-slider-handle {
+ width: 0;
+ height: 0;
+}
+
+.librevjs-custom-skin .librevjs-slider-handle:before {
+ width: 0;
+ height: 0;
+}
+
+
+/* control bar
+ * */
+
+.librevjs-custom-skin .librevjs-control-bar {
+ /* Start hidden */
+ display: none;
+ position: absolute;
+ /* Place control bar at the bottom of the player box/video.
+ If you want more margin below the control bar, add more height. */
+ bottom: 0;
+ /* Use left/right to stretch to 100% width of player div */
+ left: 0;
+ right: 0;
+ /* Height includes any margin you want above or below control items */
+ height: 3.0em;
+ /* background-color-with-alpha */
+ background-color: #232323;
+ background-color: rgba(35, 35, 35, 0.8);
+}
+
+.librevjs-custom-skin.librevjs-has-started .librevjs-control-bar {
+ display: block;
+ visibility: visible;
+ opacity: 1;
+ -webkit-transition: visibility .1s, opacity .1s;
+ -moz-transition: visibility .1s, opacity .1s;
+ -o-transition: visibility .1s, opacity .1s;
+ transition: visibility .1s, opacity .1s
+}
+
+.librevjs-custom-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+ display: block;
+ visibility: hidden;
+ opacity: 0;
+ -webkit-transition: visibility 1s, opacity 1s;
+ -moz-transition: visibility 1s, opacity 1s;
+ -o-transition: visibility 1s, opacity 1s;
+ transition: visibility 1s, opacity 1s
+}
+
+.librevjs-custom-skin.librevjs-controls-disabled .librevjs-control-bar {
+ display: none
+}
+
+.librevjs-custom-skin.librevjs-using-native-controls .librevjs-control-bar {
+ display: none
+}
+
+@media \0screen {
+ .librevjs-custom-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content: ""
+ }
+}
+
+.librevjs-custom-skin .librevjs-control {
+ outline: 0;
+ position: relative;
+ float: left;
+ text-align: center;
+ margin: 0;
+ padding: 0;
+ height: 3em;
+ width: 4em
+}
+
+.librevjs-custom-skin .librevjs-control:before {
+ font-family: VideoJS;
+ font-size: 1.5em;
+ line-height: 2;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, .5)
+}
+
+.librevjs-custom-skin .librevjs-control:focus:before, .librevjs-custom-skin .librevjs-control:hover:before {
+ text-shadow: 0 0 1em #fff
+}
+
+.librevjs-custom-skin .librevjs-control:focus {}
+
+.librevjs-custom-skin .librevjs-control-text {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px
+}
+
+.librevjs-custom-skin .librevjs-play-control {
+ width: 5em;
+ cursor: pointer
+}
+
+.librevjs-custom-skin .librevjs-play-control:before {
+ content: "\e001"
+}
+
+.librevjs-custom-skin.librevjs-playing .librevjs-play-control:before {
+ content: "\e002"
+}
+
+.librevjs-custom-skin .librevjs-mute-control, .librevjs-custom-skin .librevjs-volume-menu-button {
+ cursor: pointer;
+ float: right
+}
+
+.librevjs-custom-skin .librevjs-mute-control:before, .librevjs-custom-skin .librevjs-volume-menu-button:before {
+ content: "\e006"
+}
+
+.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+ content: "\e003"
+}
+
+.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+ content: "\e004"
+}
+
+.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+ content: "\e005"
+}
+
+.librevjs-custom-skin .librevjs-volume-control {
+ width: 5em;
+ float: right
+}
+
+.librevjs-custom-skin .librevjs-volume-bar {
+ width: 5em;
+ height: .6em;
+ margin: 1.1em auto 0
+}
+
+.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu-content {
+ height: 2.9em
+}
+
+
+/*PERSONALIZACION DE NIVEL DE VOLUMEN*/
+
+.librevjs-custom-skin .librevjs-volume-level {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 0.5em;
+ /* assuming volume starts at 1.0 */
+ width: 100%;
+ background: #005df3 url() -50% 0 repeat;
+}
+
+
+/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/
+
+.librevjs-custom-skin .librevjs-volume-bar .librevjs-volume-handle {
+ width: .5em;
+ height: .5em
+}
+
+.librevjs-custom-skin .librevjs-volume-handle:before {
+ font-size: .9em;
+ top: -.2em;
+ left: -.2em;
+ width: 1em;
+ height: 1em
+}
+
+.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+ width: 6em;
+ left: -4em
+}
+
+.librevjs-custom-skin .librevjs-progress-control {
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: auto;
+ font-size: .3em;
+ height: 1em;
+ top: -1em;
+ -webkit-transition: all .4s;
+ -moz-transition: all .4s;
+ -o-transition: all .4s;
+ transition: all .4s
+}
+
+.librevjs-custom-skin:hover .librevjs-progress-control {
+ font-size: .9em;
+ -webkit-transition: all .2s;
+ -moz-transition: all .2s;
+ -o-transition: all .2s;
+ transition: all .2s
+}
+
+.librevjs-custom-skin .librevjs-progress-holder {
+ height: 100%
+}
+
+.librevjs-custom-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-custom-skin .librevjs-progress-holder .librevjs-load-progress {
+ position: absolute;
+ display: block;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ left: 0;
+ top: 0
+}
+
+
+/* Personalización de barra de progreso a color azul */
+
+.librevjs-custom-skin .librevjs-play-progress {
+ background: #005df3 url() -50% 0 repeat;
+}
+
+.librevjs-custom-skin .librevjs-load-progress {
+ background: #646464;
+ background: rgba(255, 255, 255, .4)
+}
+
+.librevjs-custom-skin .librevjs-seek-handle {
+ width: 1.5em;
+ height: 100%
+}
+
+.librevjs-custom-skin .librevjs-seek-handle:before {
+ padding-top: .1em
+}
+
+.librevjs-custom-skin .librevjs-time-controls {
+ font-size: 1em;
+ line-height: 3em
+}
+
+.librevjs-custom-skin .librevjs-current-time {
+ float: left
+}
+
+.librevjs-custom-skin .librevjs-duration {
+ float: left
+}
+
+.librevjs-custom-skin .librevjs-remaining-time {
+ display: none;
+ float: left
+}
+
+.librevjs-time-divider {
+ float: left;
+ line-height: 3em
+}
+
+.librevjs-custom-skin .librevjs-fullscreen-control {
+ width: 3.8em;
+ cursor: pointer;
+ float: right
+}
+
+.librevjs-custom-skin .librevjs-fullscreen-control:before {
+ content: "\e000"
+}
+
+.librevjs-custom-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+ content: "\e00b"
+}
+
+
+/*Centrado del button Play y personalizado*/
+
+.librevjs-custom-skin .librevjs-big-play-button {
+ /* Center it horizontally */
+ left: 50%;
+ margin-left: -1.4em;
+ /* Center it vertically */
+ top: 50%;
+ margin-top: -1.3em;
+ font-size: 2em;
+ display: block;
+ z-index: 2;
+ position: absolute;
+ width: 2.8em;
+ height: 2.6em;
+ text-align: center;
+ vertical-align: middle;
+ cursor: pointer;
+ opacity: 1;
+ /* Need a slightly gray bg so it can be seen on black backgrounds */
+ /* background-color-with-alpha */
+ background-color: #232323;
+ background-color: rgba(35, 35, 35, 0.8);
+ border: 0 solid;
+ /* border-radius */
+ -webkit-border-radius: 0.4em;
+ -moz-border-radius: 0.4em;
+ border-radius: 0.4em;
+ /* transition */
+ -webkit-transition: all 0.4s;
+ -moz-transition: all 0.4s;
+ -o-transition: all 0.4s;
+ transition: all 0.4s;
+}
+
+
+/* Optionally center */
+
+.librevjs-custom-skin.librevjs-big-play-centered .librevjs-big-play-button {
+ /* Center it horizontally */
+ left: 50%;
+ margin-left: -1.4em;
+ /* Center it vertically */
+ top: 50%;
+ margin-top: -1.3em;
+}
+
+
+/* Hide if controls are disabled */
+
+.librevjs-custom-skin.librevjs-controls-disabled .librevjs-big-play-button {
+ display: none;
+}
+
+
+/* Hide when video starts playing */
+
+.librevjs-custom-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-custom-skin.librevjs-using-native-controls .librevjs-big-play-button {
+ display: none;
+}
+
+.librevjs-custom-skin:hover .librevjs-big-play-button, .librevjs-custom-skin .librevjs-big-play-button:focus {
+ outline: 0;
+ cursor: pointer;
+ /* IE8 needs a non-glow hover state */
+ background-color: #005DF3;
+ color: #FFFFFF;
+}
+
+.librevjs-custom-skin .librevjs-big-play-button:before {
+ content: "\e001";
+ font-family: VideoJS;
+ /* In order to center the play icon vertically we need to set the line height
+ to the same as the button height */
+ line-height: 2.6em;
+ text-shadow: 0.05em 0.05em 0.1em #000;
+ text-align: center/* Needed for IE8 */
+ ;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.librevjs-error .librevjs-big-play-button {
+ display: none;
+}
+
+
+/*END PERSONALIZAR BIG PLAY BUTTON*/
+
+.librevjs-loading-spinner {
+ display: none;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ font-size: 4em;
+ line-height: 1;
+ width: 1em;
+ height: 1em;
+ margin-left: -.5em;
+ margin-top: -.5em;
+ opacity: .75;
+ -webkit-animation: spin 1.5s infinite linear;
+ -moz-animation: spin 1.5s infinite linear;
+ -o-animation: spin 1.5s infinite linear;
+ animation: spin 1.5s infinite linear
+}
+
+.librevjs-custom-skin .librevjs-loading-spinner:before {
+ content: "\e01e";
+ font-family: VideoJS;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 1em;
+ height: 1em;
+ text-align: center;
+ text-shadow: 0 0 .1em #000
+}
+
+@-moz-keyframes spin {
+ 0% {
+ -moz-transform: rotate(0deg)
+ }
+ 100% {
+ -moz-transform: rotate(359deg)
+ }
+}
+
+@-webkit-keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg)
+ }
+ 100% {
+ -webkit-transform: rotate(359deg)
+ }
+}
+
+@-o-keyframes spin {
+ 0% {
+ -o-transform: rotate(0deg)
+ }
+ 100% {
+ -o-transform: rotate(359deg)
+ }
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg)
+ }
+ 100% {
+ transform: rotate(359deg)
+ }
+}
+
+.librevjs-custom-skin .librevjs-menu-button {
+ float: right;
+ cursor: pointer
+}
+
+.librevjs-custom-skin .librevjs-menu {
+ display: none;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+ margin-bottom: 3em;
+ border-left: 2em solid transparent;
+ border-right: 2em solid transparent;
+ border-top: 1.55em solid #000;
+ border-top-color: rgba(7, 40, 50, .5)
+}
+
+.librevjs-custom-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+ display: block;
+ padding: 0;
+ margin: 0;
+ position: absolute;
+ width: 10em;
+ bottom: 1.5em;
+ max-height: 15em;
+ overflow: auto;
+ left: -5em;
+ background-color: #07141e;
+ background-color: rgba(7, 20, 30, .7);
+ -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2);
+ -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2);
+ box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2)
+}
+
+.librevjs-custom-skin .librevjs-menu-button:hover .librevjs-menu {
+ display: block
+}
+
+.librevjs-custom-skin .librevjs-menu-button ul li {
+ list-style: none;
+ margin: 0;
+ padding: .3em 0;
+ line-height: 1.4em;
+ font-size: 1.2em;
+ text-align: center;
+ text-transform: lowercase
+}
+
+
+/*COLOR DE SELECCION DE SUBTIULOS*/
+
+.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected {
+ color: rgb(255, 255, 255);
+ background-color: rgb(0, 93, 243);
+}
+
+.librevjs-custom-skin .librevjs-menu-button ul li:focus, .librevjs-custom-skin .librevjs-menu-button ul li:hover, .librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+ outline: 0;
+ color: #ffffff;
+ background-color: #005DF3;
+}
+
+
+/*END COLOR SELECCION DE SUBTITULOS*/
+
+.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-menu-title {
+ text-align: center;
+ text-transform: uppercase;
+ font-size: 1em;
+ line-height: 2em;
+ padding: 0;
+ margin: 0 0 .3em;
+ font-weight: 700;
+ cursor: default
+}
+
+.librevjs-custom-skin .librevjs-subtitles-button:before {
+ content: "\e00c"
+}
+
+.librevjs-custom-skin .librevjs-captions-button:before {
+ content: "\e008"
+}
+
+.librevjs-custom-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-custom-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+ -webkit-box-shadow: 0 0 1em #fff;
+ -moz-box-shadow: 0 0 1em #fff;
+ box-shadow: 0 0 1em #fff
+}
+
+.cliplibre-js {
+ background-color: #000;
+ position: relative;
+ padding: 0;
+ font-size: 10px;
+ vertical-align: middle;
+ font-weight: 400;
+ font-style: normal;
+ font-family: Arial, sans-serif;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none
+}
+
+.cliplibre-js .librevjs-tech {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%
+}
+
+.cliplibre-js:-moz-full-screen {
+ position: absolute
+}
+
+body.librevjs-full-window {
+ padding: 0;
+ margin: 0;
+ height: 100%;
+ overflow-y: auto
+}
+
+.cliplibre-js.librevjs-fullscreen {
+ position: fixed;
+ overflow: hidden;
+ z-index: 1000;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%!important;
+ height: 100%!important;
+ position: absolute;
+}
+
+.cliplibre-js:-webkit-full-screen {
+ width: 100%!important;
+ height: 100%!important
+}
+
+.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
+ cursor: none
+}
+
+.librevjs-poster {
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ background-size: contain;
+ cursor: pointer;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ width: 100%
+}
+
+.librevjs-poster img {
+ display: block;
+ margin: 0 auto;
+ max-height: 100%;
+ padding: 0;
+ width: 100%
+}
+
+.cliplibre-js.librevjs-using-native-controls .librevjs-poster {
+ display: none
+}
+
+.cliplibre-js .librevjs-text-track-display {
+ text-align: center;
+ position: absolute;
+ bottom: 4em;
+ left: 1em;
+ right: 1em
+}
+
+.cliplibre-js .librevjs-text-track {
+ display: none;
+ font-size: 1.5em;
+ text-align: center;
+ margin-bottom: .1em;
+ background-color: #000;
+ background-color: rgba(0, 0, 0, .6)
+}
+
+.cliplibre-js .librevjs-subtitles {
+ color: #fff
+}
+
+.cliplibre-js .librevjs-captions {
+ color: rgb(255, 237, 0);
+ background-color: rgba(2, 7, 11, 0.7);
+}
+
+.librevjs-tt-cue {
+ display: block
+}
+
+.librevjs-custom-skin .librevjs-hidden {
+ display: none
+}
+
+.librevjs-lock-showing {
+ display: block!important;
+ opacity: 1;
+ visibility: visible
+}
+
+
+/*Responsive*/
+
+.cliplibre-js-responsive-container.librevjs-hd {
+ padding-top: 56.25%;
+}
+
+.cliplibre-js-responsive-container.librevjs-sd {
+ padding-top: 75%;
+}
+
+.cliplibre-js-responsive-container {
+ width: 100%;
+ position: relative;
+}
+
+.cliplibre-js-responsive-container .cliplibre-js {
+ height: 100% !important;
+ width: 100% !important;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
diff --git a/css/libre-custom-skin/custom_skin.rojo.css b/css/libre-custom-skin/custom_skin.rojo.css
new file mode 100644
index 0000000..32ee409
--- /dev/null
+++ b/css/libre-custom-skin/custom_skin.rojo.css
@@ -0,0 +1,726 @@
+/*!
+LibreVideoJS. custom Styles
+Version 0.2
+*/
+
+.librevjs-custom-skin {
+ color: #ccc;
+ background-color: inherit;
+}
+
+@font-face {
+ font-family:"VideoJS";
+ src: url("../../fonts/default/vjs.eot") format("embedded-opentype");
+ src: local('?'),
+ url("../../fonts/default/vjs.woff") format("woff"),
+ url("../../fonts/default/vjs.ttf") format("truetype"),
+ url("../../fonts/default/vjs.svg") format("svg");
+ font-weight:400;
+ font-style:normal
+}
+
+.librevjs-custom-skin .librevjs-slider {
+ /* Replace browser focus highlight with handle highlight */
+ outline: 0;
+ position: relative;
+ cursor: pointer;
+ padding: 0;
+ /* background-color-with-alpha */
+ background-color: #000000;
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
+.librevjs-custom-skin .librevjs-slider:focus {
+ -webkit-box-shadow: 0 0 2em #fff;
+ -moz-box-shadow: 0 0 2em #fff;
+ box-shadow: 0 0 2em #fff
+}
+
+
+/*Eliminación de botón de barra de progreso*/
+
+.librevjs-custom-skin .librevjs-slider-handle {
+ width: 0;
+ height: 0;
+}
+
+.librevjs-custom-skin .librevjs-slider-handle:before {
+ width: 0;
+ height: 0;
+}
+
+
+/* control bar
+ * */
+
+.librevjs-custom-skin .librevjs-control-bar {
+ /* Start hidden */
+ display: none;
+ position: absolute;
+ /* Place control bar at the bottom of the player box/video.
+ If you want more margin below the control bar, add more height. */
+ bottom: 0;
+ /* Use left/right to stretch to 100% width of player div */
+ left: 0;
+ right: 0;
+ /* Height includes any margin you want above or below control items */
+ height: 3.0em;
+ /* background-color-with-alpha */
+ background-color: #232323;
+ background-color: rgba(35, 35, 35, 0.8);
+}
+
+.librevjs-custom-skin.librevjs-has-started .librevjs-control-bar {
+ display: block;
+ visibility: visible;
+ opacity: 1;
+ -webkit-transition: visibility .1s, opacity .1s;
+ -moz-transition: visibility .1s, opacity .1s;
+ -o-transition: visibility .1s, opacity .1s;
+ transition: visibility .1s, opacity .1s
+}
+
+.librevjs-custom-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+ display: block;
+ visibility: hidden;
+ opacity: 0;
+ -webkit-transition: visibility 1s, opacity 1s;
+ -moz-transition: visibility 1s, opacity 1s;
+ -o-transition: visibility 1s, opacity 1s;
+ transition: visibility 1s, opacity 1s
+}
+
+.librevjs-custom-skin.librevjs-controls-disabled .librevjs-control-bar {
+ display: none
+}
+
+.librevjs-custom-skin.librevjs-using-native-controls .librevjs-control-bar {
+ display: none
+}
+
+@media \0screen {
+ .librevjs-custom-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content: ""
+ }
+}
+
+.librevjs-custom-skin .librevjs-control {
+ outline: 0;
+ position: relative;
+ float: left;
+ text-align: center;
+ margin: 0;
+ padding: 0;
+ height: 3em;
+ width: 4em
+}
+
+.librevjs-custom-skin .librevjs-control:before {
+ font-family: VideoJS;
+ font-size: 1.5em;
+ line-height: 2;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, .5)
+}
+
+.librevjs-custom-skin .librevjs-control:focus:before, .librevjs-custom-skin .librevjs-control:hover:before {
+ text-shadow: 0 0 1em #fff
+}
+
+.librevjs-custom-skin .librevjs-control:focus {}
+
+.librevjs-custom-skin .librevjs-control-text {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px
+}
+
+.librevjs-custom-skin .librevjs-play-control {
+ width: 5em;
+ cursor: pointer
+}
+
+.librevjs-custom-skin .librevjs-play-control:before {
+ content: "\e001"
+}
+
+.librevjs-custom-skin.librevjs-playing .librevjs-play-control:before {
+ content: "\e002"
+}
+
+.librevjs-custom-skin .librevjs-mute-control, .librevjs-custom-skin .librevjs-volume-menu-button {
+ cursor: pointer;
+ float: right
+}
+
+.librevjs-custom-skin .librevjs-mute-control:before, .librevjs-custom-skin .librevjs-volume-menu-button:before {
+ content: "\e006"
+}
+
+.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+ content: "\e003"
+}
+
+.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+ content: "\e004"
+}
+
+.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+ content: "\e005"
+}
+
+.librevjs-custom-skin .librevjs-volume-control {
+ width: 5em;
+ float: right
+}
+
+.librevjs-custom-skin .librevjs-volume-bar {
+ width: 5em;
+ height: .6em;
+ margin: 1.1em auto 0
+}
+
+.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu-content {
+ height: 2.9em
+}
+
+
+/*PERSONALIZACION DE NIVEL DE VOLUMEN*/
+
+.librevjs-custom-skin .librevjs-volume-level {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 0.5em;
+ /* assuming volume starts at 1.0 */
+ width: 100%;
+ background: #f44336 url() -50% 0 repeat;
+}
+
+
+/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/
+
+.librevjs-custom-skin .librevjs-volume-bar .librevjs-volume-handle {
+ width: .5em;
+ height: .5em
+}
+
+.librevjs-custom-skin .librevjs-volume-handle:before {
+ font-size: .9em;
+ top: -.2em;
+ left: -.2em;
+ width: 1em;
+ height: 1em
+}
+
+.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+ width: 6em;
+ left: -4em
+}
+
+.librevjs-custom-skin .librevjs-progress-control {
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: auto;
+ font-size: .3em;
+ height: 1em;
+ top: -1em;
+ -webkit-transition: all .4s;
+ -moz-transition: all .4s;
+ -o-transition: all .4s;
+ transition: all .4s
+}
+
+.librevjs-custom-skin:hover .librevjs-progress-control {
+ font-size: .9em;
+ -webkit-transition: all .2s;
+ -moz-transition: all .2s;
+ -o-transition: all .2s;
+ transition: all .2s
+}
+
+.librevjs-custom-skin .librevjs-progress-holder {
+ height: 100%
+}
+
+.librevjs-custom-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-custom-skin .librevjs-progress-holder .librevjs-load-progress {
+ position: absolute;
+ display: block;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ left: 0;
+ top: 0
+}
+
+
+/* Personalización de barra de progreso a color rojo */
+
+.librevjs-custom-skin .librevjs-play-progress {
+ background: #f44336 url() -50% 0 repeat;
+}
+
+.librevjs-custom-skin .librevjs-load-progress {
+ background: #646464;
+ background: rgba(255, 255, 255, .4)
+}
+
+.librevjs-custom-skin .librevjs-seek-handle {
+ width: 1.5em;
+ height: 100%
+}
+
+.librevjs-custom-skin .librevjs-seek-handle:before {
+ padding-top: .1em
+}
+
+.librevjs-custom-skin .librevjs-time-controls {
+ font-size: 1em;
+ line-height: 3em
+}
+
+.librevjs-custom-skin .librevjs-current-time {
+ float: left
+}
+
+.librevjs-custom-skin .librevjs-duration {
+ float: left
+}
+
+.librevjs-custom-skin .librevjs-remaining-time {
+ display: none;
+ float: left
+}
+
+.librevjs-time-divider {
+ float: left;
+ line-height: 3em
+}
+
+.librevjs-custom-skin .librevjs-fullscreen-control {
+ width: 3.8em;
+ cursor: pointer;
+ float: right
+}
+
+.librevjs-custom-skin .librevjs-fullscreen-control:before {
+ content: "\e000"
+}
+
+.librevjs-custom-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+ content: "\e00b"
+}
+
+
+/*Centrado del button Play y personalizado*/
+
+.librevjs-custom-skin .librevjs-big-play-button {
+ /* Center it horizontally */
+ left: 50%;
+ margin-left: -1.4em;
+ /* Center it vertically */
+ top: 50%;
+ margin-top: -1.3em;
+ font-size: 2em;
+ display: block;
+ z-index: 2;
+ position: absolute;
+ width: 2.8em;
+ height: 2.6em;
+ text-align: center;
+ vertical-align: middle;
+ cursor: pointer;
+ opacity: 1;
+ /* Need a slightly gray bg so it can be seen on black backgrounds */
+ /* background-color-with-alpha */
+ background-color: #232323;
+ background-color: rgba(35, 35, 35, 0.8);
+ border: 0 solid;
+ /* border-radius */
+ -webkit-border-radius: 0.4em;
+ -moz-border-radius: 0.4em;
+ border-radius: 0.4em;
+ /* transition */
+ -webkit-transition: all 0.4s;
+ -moz-transition: all 0.4s;
+ -o-transition: all 0.4s;
+ transition: all 0.4s;
+}
+
+
+/* Optionally center */
+
+.librevjs-custom-skin.librevjs-big-play-centered .librevjs-big-play-button {
+ /* Center it horizontally */
+ left: 50%;
+ margin-left: -1.4em;
+ /* Center it vertically */
+ top: 50%;
+ margin-top: -1.3em;
+}
+
+
+/* Hide if controls are disabled */
+
+.librevjs-custom-skin.librevjs-controls-disabled .librevjs-big-play-button {
+ display: none;
+}
+
+
+/* Hide when video starts playing */
+
+.librevjs-custom-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-custom-skin.librevjs-using-native-controls .librevjs-big-play-button {
+ display: none;
+}
+
+.librevjs-custom-skin:hover .librevjs-big-play-button, .librevjs-custom-skin .librevjs-big-play-button:focus {
+ outline: 0;
+ cursor: pointer;
+ /* IE8 needs a non-glow hover state */
+ background-color: #f44336;
+ /*color del boton play al hacer focus*/
+ color: #FFFFFF;
+}
+
+.librevjs-custom-skin .librevjs-big-play-button:before {
+ content: "\e001";
+ font-family: VideoJS;
+ /* In order to center the play icon vertically we need to set the line height
+ to the same as the button height */
+ line-height: 2.6em;
+ text-shadow: 0.05em 0.05em 0.1em #000;
+ text-align: center/* Needed for IE8 */
+ ;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.librevjs-error .librevjs-big-play-button {
+ display: none;
+}
+
+
+/*END PERSONALIZAR BIG PLAY BUTTON*/
+
+.librevjs-loading-spinner {
+ display: none;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ font-size: 4em;
+ line-height: 1;
+ width: 1em;
+ height: 1em;
+ margin-left: -.5em;
+ margin-top: -.5em;
+ opacity: .75;
+ -webkit-animation: spin 1.5s infinite linear;
+ -moz-animation: spin 1.5s infinite linear;
+ -o-animation: spin 1.5s infinite linear;
+ animation: spin 1.5s infinite linear
+}
+
+.librevjs-custom-skin .librevjs-loading-spinner:before {
+ content: "\e01e";
+ font-family: VideoJS;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 1em;
+ height: 1em;
+ text-align: center;
+ text-shadow: 0 0 .1em #000
+}
+
+@-moz-keyframes spin {
+ 0% {
+ -moz-transform: rotate(0deg)
+ }
+ 100% {
+ -moz-transform: rotate(359deg)
+ }
+}
+
+@-webkit-keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg)
+ }
+ 100% {
+ -webkit-transform: rotate(359deg)
+ }
+}
+
+@-o-keyframes spin {
+ 0% {
+ -o-transform: rotate(0deg)
+ }
+ 100% {
+ -o-transform: rotate(359deg)
+ }
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg)
+ }
+ 100% {
+ transform: rotate(359deg)
+ }
+}
+
+.librevjs-custom-skin .librevjs-menu-button {
+ float: right;
+ cursor: pointer
+}
+
+.librevjs-custom-skin .librevjs-menu {
+ display: none;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+ margin-bottom: 3em;
+ border-left: 2em solid transparent;
+ border-right: 2em solid transparent;
+ border-top: 1.55em solid #000;
+ border-top-color: rgba(7, 40, 50, .5)
+}
+
+.librevjs-custom-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+ display: block;
+ padding: 0;
+ margin: 0;
+ position: absolute;
+ width: 10em;
+ bottom: 1.5em;
+ max-height: 15em;
+ overflow: auto;
+ left: -5em;
+ background-color: #07141e;
+ background-color: rgba(7, 20, 30, .7);
+ -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2);
+ -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2);
+ box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2)
+}
+
+.librevjs-custom-skin .librevjs-menu-button:hover .librevjs-menu {
+ display: block
+}
+
+.librevjs-custom-skin .librevjs-menu-button ul li {
+ list-style: none;
+ margin: 0;
+ padding: .3em 0;
+ line-height: 1.4em;
+ font-size: 1.2em;
+ text-align: center;
+ text-transform: lowercase
+}
+
+
+/*COLOR DE SELECCION DE SUBTIULOS*/
+
+.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected {
+ color: rgb(255, 255, 255);
+ background-color: rgb(244, 67, 54);
+}
+
+.librevjs-custom-skin .librevjs-menu-button ul li:focus, .librevjs-custom-skin .librevjs-menu-button ul li:hover, .librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+ outline: 0;
+ color: #ffffff;
+ background-color: #f44336;
+}
+
+
+/*END COLOR SELECCION DE SUBTITULOS*/
+
+.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-menu-title {
+ text-align: center;
+ text-transform: uppercase;
+ font-size: 1em;
+ line-height: 2em;
+ padding: 0;
+ margin: 0 0 .3em;
+ font-weight: 700;
+ cursor: default
+}
+
+.librevjs-custom-skin .librevjs-subtitles-button:before {
+ content: "\e00c"
+}
+
+.librevjs-custom-skin .librevjs-captions-button:before {
+ content: "\e008"
+}
+
+.librevjs-custom-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-custom-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+ -webkit-box-shadow: 0 0 1em #fff;
+ -moz-box-shadow: 0 0 1em #fff;
+ box-shadow: 0 0 1em #fff
+}
+
+.cliplibre-js {
+ background-color: #000;
+ position: relative;
+ padding: 0;
+ font-size: 10px;
+ vertical-align: middle;
+ font-weight: 400;
+ font-style: normal;
+ font-family: Arial, sans-serif;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none
+}
+
+.cliplibre-js .librevjs-tech {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%
+}
+
+.cliplibre-js:-moz-full-screen {
+ position: absolute
+}
+
+body.librevjs-full-window {
+ padding: 0;
+ margin: 0;
+ height: 100%;
+ overflow-y: auto
+}
+
+.cliplibre-js.librevjs-fullscreen {
+ position: fixed;
+ overflow: hidden;
+ z-index: 1000;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%!important;
+ height: 100%!important;
+ position: absolute;
+}
+
+.cliplibre-js:-webkit-full-screen {
+ width: 100%!important;
+ height: 100%!important
+}
+
+.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
+ cursor: none
+}
+
+.librevjs-poster {
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ background-size: contain;
+ cursor: pointer;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ width: 100%
+}
+
+.librevjs-poster img {
+ display: block;
+ margin: 0 auto;
+ max-height: 100%;
+ padding: 0;
+ width: 100%
+}
+
+.cliplibre-js.librevjs-using-native-controls .librevjs-poster {
+ display: none
+}
+
+.cliplibre-js .librevjs-text-track-display {
+ text-align: center;
+ position: absolute;
+ bottom: 4em;
+ left: 1em;
+ right: 1em
+}
+
+.cliplibre-js .librevjs-text-track {
+ display: none;
+ font-size: 1.5em;
+ text-align: center;
+ margin-bottom: .1em;
+ background-color: #000;
+ background-color: rgba(0, 0, 0, .6)
+}
+
+.cliplibre-js .librevjs-subtitles {
+ color: #fff
+}
+
+.cliplibre-js .librevjs-captions {
+ color: rgb(255, 237, 0);
+ background-color: rgba(2, 7, 11, 0.7);
+}
+
+.librevjs-tt-cue {
+ display: block
+}
+
+.librevjs-custom-skin .librevjs-hidden {
+ display: none
+}
+
+.librevjs-lock-showing {
+ display: block!important;
+ opacity: 1;
+ visibility: visible
+}
+
+
+/*Responsive*/
+
+.cliplibre-js-responsive-container.librevjs-hd {
+ padding-top: 56.25%;
+}
+
+.cliplibre-js-responsive-container.librevjs-sd {
+ padding-top: 75%;
+}
+
+.cliplibre-js-responsive-container {
+ width: 100%;
+ position: relative;
+}
+
+.cliplibre-js-responsive-container .cliplibre-js {
+ height: 100% !important;
+ width: 100% !important;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
diff --git a/css/libre-custom-skin/custom_skin.teal.css b/css/libre-custom-skin/custom_skin.teal.css
new file mode 100644
index 0000000..73ae76e
--- /dev/null
+++ b/css/libre-custom-skin/custom_skin.teal.css
@@ -0,0 +1,726 @@
+/*!
+LibreVideoJS. custom Styles
+Version 0.2
+*/
+
+.librevjs-custom-skin {
+ color: #ccc;
+ background-color: inherit;
+}
+
+@font-face {
+ font-family:"VideoJS";
+ src: url("../../fonts/default/vjs.eot") format("embedded-opentype");
+ src: local('?'),
+ url("../../fonts/default/vjs.woff") format("woff"),
+ url("../../fonts/default/vjs.ttf") format("truetype"),
+ url("../../fonts/default/vjs.svg") format("svg");
+ font-weight:400;
+ font-style:normal
+}
+
+.librevjs-custom-skin .librevjs-slider {
+ /* Replace browser focus highlight with handle highlight */
+ outline: 0;
+ position: relative;
+ cursor: pointer;
+ padding: 0;
+ /* background-color-with-alpha */
+ background-color: #000000;
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
+.librevjs-custom-skin .librevjs-slider:focus {
+ -webkit-box-shadow: 0 0 2em #fff;
+ -moz-box-shadow: 0 0 2em #fff;
+ box-shadow: 0 0 2em #fff
+}
+
+
+/*Eliminación de botón de barra de progreso*/
+
+.librevjs-custom-skin .librevjs-slider-handle {
+ width: 0;
+ height: 0;
+}
+
+.librevjs-custom-skin .librevjs-slider-handle:before {
+ width: 0;
+ height: 0;
+}
+
+
+/* control bar
+ * */
+
+.librevjs-custom-skin .librevjs-control-bar {
+ /* Start hidden */
+ display: none;
+ position: absolute;
+ /* Place control bar at the bottom of the player box/video.
+ If you want more margin below the control bar, add more height. */
+ bottom: 0;
+ /* Use left/right to stretch to 100% width of player div */
+ left: 0;
+ right: 0;
+ /* Height includes any margin you want above or below control items */
+ height: 3.0em;
+ /* background-color-with-alpha */
+ background-color: #232323;
+ background-color: rgba(35, 35, 35, 0.8);
+}
+
+.librevjs-custom-skin.librevjs-has-started .librevjs-control-bar {
+ display: block;
+ visibility: visible;
+ opacity: 1;
+ -webkit-transition: visibility .1s, opacity .1s;
+ -moz-transition: visibility .1s, opacity .1s;
+ -o-transition: visibility .1s, opacity .1s;
+ transition: visibility .1s, opacity .1s
+}
+
+.librevjs-custom-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+ display: block;
+ visibility: hidden;
+ opacity: 0;
+ -webkit-transition: visibility 1s, opacity 1s;
+ -moz-transition: visibility 1s, opacity 1s;
+ -o-transition: visibility 1s, opacity 1s;
+ transition: visibility 1s, opacity 1s
+}
+
+.librevjs-custom-skin.librevjs-controls-disabled .librevjs-control-bar {
+ display: none
+}
+
+.librevjs-custom-skin.librevjs-using-native-controls .librevjs-control-bar {
+ display: none
+}
+
+@media \0screen {
+ .librevjs-custom-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content: ""
+ }
+}
+
+.librevjs-custom-skin .librevjs-control {
+ outline: 0;
+ position: relative;
+ float: left;
+ text-align: center;
+ margin: 0;
+ padding: 0;
+ height: 3em;
+ width: 4em
+}
+
+.librevjs-custom-skin .librevjs-control:before {
+ font-family: VideoJS;
+ font-size: 1.5em;
+ line-height: 2;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, .5)
+}
+
+.librevjs-custom-skin .librevjs-control:focus:before, .librevjs-custom-skin .librevjs-control:hover:before {
+ text-shadow: 0 0 1em #fff
+}
+
+.librevjs-custom-skin .librevjs-control:focus {}
+
+.librevjs-custom-skin .librevjs-control-text {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px
+}
+
+.librevjs-custom-skin .librevjs-play-control {
+ width: 5em;
+ cursor: pointer
+}
+
+.librevjs-custom-skin .librevjs-play-control:before {
+ content: "\e001"
+}
+
+.librevjs-custom-skin.librevjs-playing .librevjs-play-control:before {
+ content: "\e002"
+}
+
+.librevjs-custom-skin .librevjs-mute-control, .librevjs-custom-skin .librevjs-volume-menu-button {
+ cursor: pointer;
+ float: right
+}
+
+.librevjs-custom-skin .librevjs-mute-control:before, .librevjs-custom-skin .librevjs-volume-menu-button:before {
+ content: "\e006"
+}
+
+.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-0:before, .librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+ content: "\e003"
+}
+
+.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-1:before, .librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+ content: "\e004"
+}
+
+.librevjs-custom-skin .librevjs-mute-control.librevjs-vol-2:before, .librevjs-custom-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+ content: "\e005"
+}
+
+.librevjs-custom-skin .librevjs-volume-control {
+ width: 5em;
+ float: right
+}
+
+.librevjs-custom-skin .librevjs-volume-bar {
+ width: 5em;
+ height: .6em;
+ margin: 1.1em auto 0
+}
+
+.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu-content {
+ height: 2.9em
+}
+
+
+/*PERSONALIZACION DE NIVEL DE VOLUMEN*/
+
+.librevjs-custom-skin .librevjs-volume-level {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 0.5em;
+ /* assuming volume starts at 1.0 */
+ width: 100%;
+ background: #1de9b6 url() -50% 0 repeat;
+}
+
+
+/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/
+
+.librevjs-custom-skin .librevjs-volume-bar .librevjs-volume-handle {
+ width: .5em;
+ height: .5em
+}
+
+.librevjs-custom-skin .librevjs-volume-handle:before {
+ font-size: .9em;
+ top: -.2em;
+ left: -.2em;
+ width: 1em;
+ height: 1em
+}
+
+.librevjs-custom-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+ width: 6em;
+ left: -4em
+}
+
+.librevjs-custom-skin .librevjs-progress-control {
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: auto;
+ font-size: .3em;
+ height: 1em;
+ top: -1em;
+ -webkit-transition: all .4s;
+ -moz-transition: all .4s;
+ -o-transition: all .4s;
+ transition: all .4s
+}
+
+.librevjs-custom-skin:hover .librevjs-progress-control {
+ font-size: .9em;
+ -webkit-transition: all .2s;
+ -moz-transition: all .2s;
+ -o-transition: all .2s;
+ transition: all .2s
+}
+
+.librevjs-custom-skin .librevjs-progress-holder {
+ height: 100%
+}
+
+.librevjs-custom-skin .librevjs-progress-holder .librevjs-play-progress, .librevjs-custom-skin .librevjs-progress-holder .librevjs-load-progress {
+ position: absolute;
+ display: block;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ left: 0;
+ top: 0
+}
+
+
+/* Personalización de barra de progreso a color azul */
+
+.librevjs-custom-skin .librevjs-play-progress {
+ background: #1de9b6 url() -50% 0 repeat;
+}
+
+.librevjs-custom-skin .librevjs-load-progress {
+ background: #646464;
+ background: rgba(255, 255, 255, .4)
+}
+
+.librevjs-custom-skin .librevjs-seek-handle {
+ width: 1.5em;
+ height: 100%
+}
+
+.librevjs-custom-skin .librevjs-seek-handle:before {
+ padding-top: .1em
+}
+
+.librevjs-custom-skin .librevjs-time-controls {
+ font-size: 1em;
+ line-height: 3em
+}
+
+.librevjs-custom-skin .librevjs-current-time {
+ float: left
+}
+
+.librevjs-custom-skin .librevjs-duration {
+ float: left
+}
+
+.librevjs-custom-skin .librevjs-remaining-time {
+ display: none;
+ float: left
+}
+
+.librevjs-time-divider {
+ float: left;
+ line-height: 3em
+}
+
+.librevjs-custom-skin .librevjs-fullscreen-control {
+ width: 3.8em;
+ cursor: pointer;
+ float: right
+}
+
+.librevjs-custom-skin .librevjs-fullscreen-control:before {
+ content: "\e000"
+}
+
+.librevjs-custom-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+ content: "\e00b"
+}
+
+
+/*Centrado del button Play y personalizado*/
+
+.librevjs-custom-skin .librevjs-big-play-button {
+ /* Center it horizontally */
+ left: 50%;
+ margin-left: -1.4em;
+ /* Center it vertically */
+ top: 50%;
+ margin-top: -1.3em;
+ font-size: 2em;
+ display: block;
+ z-index: 2;
+ position: absolute;
+ width: 2.8em;
+ height: 2.6em;
+ text-align: center;
+ vertical-align: middle;
+ cursor: pointer;
+ opacity: 1;
+ /* Need a slightly gray bg so it can be seen on black backgrounds */
+ /* background-color-with-alpha */
+ background-color: #232323;
+ background-color: rgba(35, 35, 35, 0.8);
+ border: 0 solid;
+ /* border-radius */
+ -webkit-border-radius: 0.4em;
+ -moz-border-radius: 0.4em;
+ border-radius: 0.4em;
+ /* transition */
+ -webkit-transition: all 0.4s;
+ -moz-transition: all 0.4s;
+ -o-transition: all 0.4s;
+ transition: all 0.4s;
+}
+
+
+/* Optionally center */
+
+.librevjs-custom-skin.librevjs-big-play-centered .librevjs-big-play-button {
+ /* Center it horizontally */
+ left: 50%;
+ margin-left: -1.4em;
+ /* Center it vertically */
+ top: 50%;
+ margin-top: -1.3em;
+}
+
+
+/* Hide if controls are disabled */
+
+.librevjs-custom-skin.librevjs-controls-disabled .librevjs-big-play-button {
+ display: none;
+}
+
+
+/* Hide when video starts playing */
+
+.librevjs-custom-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-custom-skin.librevjs-using-native-controls .librevjs-big-play-button {
+ display: none;
+}
+
+.librevjs-custom-skin:hover .librevjs-big-play-button, .librevjs-custom-skin .librevjs-big-play-button:focus {
+ outline: 0;
+ cursor: pointer;
+ /* IE8 needs a non-glow hover state */
+ background-color: #1de9b6;
+ /*color del boton play al hacer focus*/
+ color: #FFFFFF;
+}
+
+.librevjs-custom-skin .librevjs-big-play-button:before {
+ content: "\e001";
+ font-family: VideoJS;
+ /* In order to center the play icon vertically we need to set the line height
+ to the same as the button height */
+ line-height: 2.6em;
+ text-shadow: 0.05em 0.05em 0.1em #000;
+ text-align: center/* Needed for IE8 */
+ ;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.librevjs-error .librevjs-big-play-button {
+ display: none;
+}
+
+
+/*END PERSONALIZAR BIG PLAY BUTTON*/
+
+.librevjs-loading-spinner {
+ display: none;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ font-size: 4em;
+ line-height: 1;
+ width: 1em;
+ height: 1em;
+ margin-left: -.5em;
+ margin-top: -.5em;
+ opacity: .75;
+ -webkit-animation: spin 1.5s infinite linear;
+ -moz-animation: spin 1.5s infinite linear;
+ -o-animation: spin 1.5s infinite linear;
+ animation: spin 1.5s infinite linear
+}
+
+.librevjs-custom-skin .librevjs-loading-spinner:before {
+ content: "\e01e";
+ font-family: VideoJS;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 1em;
+ height: 1em;
+ text-align: center;
+ text-shadow: 0 0 .1em #000
+}
+
+@-moz-keyframes spin {
+ 0% {
+ -moz-transform: rotate(0deg)
+ }
+ 100% {
+ -moz-transform: rotate(359deg)
+ }
+}
+
+@-webkit-keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg)
+ }
+ 100% {
+ -webkit-transform: rotate(359deg)
+ }
+}
+
+@-o-keyframes spin {
+ 0% {
+ -o-transform: rotate(0deg)
+ }
+ 100% {
+ -o-transform: rotate(359deg)
+ }
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg)
+ }
+ 100% {
+ transform: rotate(359deg)
+ }
+}
+
+.librevjs-custom-skin .librevjs-menu-button {
+ float: right;
+ cursor: pointer
+}
+
+.librevjs-custom-skin .librevjs-menu {
+ display: none;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+ margin-bottom: 3em;
+ border-left: 2em solid transparent;
+ border-right: 2em solid transparent;
+ border-top: 1.55em solid #000;
+ border-top-color: rgba(7, 40, 50, .5)
+}
+
+.librevjs-custom-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+ display: block;
+ padding: 0;
+ margin: 0;
+ position: absolute;
+ width: 10em;
+ bottom: 1.5em;
+ max-height: 15em;
+ overflow: auto;
+ left: -5em;
+ background-color: #07141e;
+ background-color: rgba(7, 20, 30, .7);
+ -webkit-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2);
+ -moz-box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2);
+ box-shadow: -.2em -.2em .3em rgba(255, 255, 255, .2)
+}
+
+.librevjs-custom-skin .librevjs-menu-button:hover .librevjs-menu {
+ display: block
+}
+
+.librevjs-custom-skin .librevjs-menu-button ul li {
+ list-style: none;
+ margin: 0;
+ padding: .3em 0;
+ line-height: 1.4em;
+ font-size: 1.2em;
+ text-align: center;
+ text-transform: lowercase
+}
+
+
+/*COLOR DE SELECCION DE SUBTIULOS*/
+
+.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected {
+ color: rgb(1, 56, 47);
+ background-color: rgb(29, 233, 182);
+}
+
+.librevjs-custom-skin .librevjs-menu-button ul li:focus, .librevjs-custom-skin .librevjs-menu-button ul li:hover, .librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:focus, .librevjs-custom-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+ outline: 0;
+ color: #004d40;
+ background-color: #1de9b6;
+}
+
+
+/*END COLOR SELECCION DE SUBTITULOS*/
+
+.librevjs-custom-skin .librevjs-menu-button ul li.librevjs-menu-title {
+ text-align: center;
+ text-transform: uppercase;
+ font-size: 1em;
+ line-height: 2em;
+ padding: 0;
+ margin: 0 0 .3em;
+ font-weight: 700;
+ cursor: default
+}
+
+.librevjs-custom-skin .librevjs-subtitles-button:before {
+ content: "\e00c"
+}
+
+.librevjs-custom-skin .librevjs-captions-button:before {
+ content: "\e008"
+}
+
+.librevjs-custom-skin .librevjs-captions-button:focus .librevjs-control-content:before, .librevjs-custom-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+ -webkit-box-shadow: 0 0 1em #fff;
+ -moz-box-shadow: 0 0 1em #fff;
+ box-shadow: 0 0 1em #fff
+}
+
+.cliplibre-js {
+ background-color: #000;
+ position: relative;
+ padding: 0;
+ font-size: 10px;
+ vertical-align: middle;
+ font-weight: 400;
+ font-style: normal;
+ font-family: Arial, sans-serif;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none
+}
+
+.cliplibre-js .librevjs-tech {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%
+}
+
+.cliplibre-js:-moz-full-screen {
+ position: absolute
+}
+
+body.librevjs-full-window {
+ padding: 0;
+ margin: 0;
+ height: 100%;
+ overflow-y: auto
+}
+
+.cliplibre-js.librevjs-fullscreen {
+ position: fixed;
+ overflow: hidden;
+ z-index: 1000;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%!important;
+ height: 100%!important;
+ position: absolute;
+}
+
+.cliplibre-js:-webkit-full-screen {
+ width: 100%!important;
+ height: 100%!important
+}
+
+.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
+ cursor: none
+}
+
+.librevjs-poster {
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ background-size: contain;
+ cursor: pointer;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ width: 100%
+}
+
+.librevjs-poster img {
+ display: block;
+ margin: 0 auto;
+ max-height: 100%;
+ padding: 0;
+ width: 100%
+}
+
+.cliplibre-js.librevjs-using-native-controls .librevjs-poster {
+ display: none
+}
+
+.cliplibre-js .librevjs-text-track-display {
+ text-align: center;
+ position: absolute;
+ bottom: 4em;
+ left: 1em;
+ right: 1em
+}
+
+.cliplibre-js .librevjs-text-track {
+ display: none;
+ font-size: 1.5em;
+ text-align: center;
+ margin-bottom: .1em;
+ background-color: #000;
+ background-color: rgba(0, 0, 0, .6)
+}
+
+.cliplibre-js .librevjs-subtitles {
+ color: #fff
+}
+
+.cliplibre-js .librevjs-captions {
+ color: rgb(255, 237, 0);
+ background-color: rgba(2, 7, 11, 0.7);
+}
+
+.librevjs-tt-cue {
+ display: block
+}
+
+.librevjs-custom-skin .librevjs-hidden {
+ display: none
+}
+
+.librevjs-lock-showing {
+ display: block!important;
+ opacity: 1;
+ visibility: visible
+}
+
+
+/*Responsive*/
+
+.cliplibre-js-responsive-container.librevjs-hd {
+ padding-top: 56.25%;
+}
+
+.cliplibre-js-responsive-container.librevjs-sd {
+ padding-top: 75%;
+}
+
+.cliplibre-js-responsive-container {
+ width: 100%;
+ position: relative;
+}
+
+.cliplibre-js-responsive-container .cliplibre-js {
+ height: 100% !important;
+ width: 100% !important;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-26 04:24:29 +0000