1 files changed, 655 insertions, 0 deletions
diff --git a/librevideojs/css/material/libre-skin-teal.css b/librevideojs/css/material/libre-skin-teal.css
new file mode 100644
index 0000000..d36a6ac
--- /dev/null
+++ b/librevideojs/css/material/libre-skin-teal.css
@@ -0,0 +1,655 @@
+/*!
+LibreVideoJS Estilos personalizados = Teal
+Version 1.2
+Escrito por Jesús Eduardo
+*/
+.librevjs-libre-materialteal-skin {
+color:#ccc;
+background-color: inherit;
+}
+@font-face {
+font-family:"LibreVideoJS";
+src: url("../../fonts/libre-material/libre-icons.eot") format("embedded-opentype");
+src: local('?'),
+     url("../../fonts/libre-material/libre-icons.woff") format("woff"),
+     url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),
+     url("../../fonts/libre-material/libre-icons.svg") format("svg");
+}
+.librevjs-libre-materialteal-skin .librevjs-slider {
+/* Replace browser focus highlight with handle highlight */
+outline: 0;
+position: relative;
+cursor: pointer;
+padding: 0;
+/* background-color-with-alpha */
+background-color: #000000;
+background-color: rgba(0, 0, 0, 0.5);
+}
+.librevjs-libre-materialteal-skin .librevjs-slider:focus {
+-webkit-box-shadow:0 0 2em #fff;
+-moz-box-shadow:0 0 2em #fff;
+box-shadow:0 0 2em #fff;
+}
+
+/*Eliminación de botón de barra de progreso*/
+.librevjs-libre-materialteal-skin .librevjs-slider-handle {
+width: 0;
+height: 0;
+}
+.librevjs-libre-materialteal-skin .librevjs-slider-handle:before {
+text-shadow: 0em 0em 1em #fff;
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* control bar */
+.librevjs-libre-materialteal-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-libre-materialteal-skin.librevjs-has-started .librevjs-control-bar {
+display:block;
+visibility:visible;
+opacity:1;
+-webkit-transition:visibility .1s,opacity .1s;
+-moz-transition:visibility .1s,opacity .1s;
+-o-transition:visibility .1s,opacity .1s;
+transition:visibility .1s,opacity .1s
+}
+.librevjs-libre-materialteal-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+display:block;
+visibility:hidden;
+opacity:0;
+-webkit-transition:visibility 1s,opacity 1s;
+-moz-transition:visibility 1s,opacity 1s;
+-o-transition:visibility 1s,opacity 1s;
+transition:visibility 1s,opacity 1s
+}
+.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-control-bar {
+display:none
+}
+.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-control-bar {
+display:none
+}
+@media \0screen {
+ .librevjs-libre-materialteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ content:""
+ }
+}
+.librevjs-libre-materialteal-skin .librevjs-control {
+outline:0;
+position:relative;
+float:left;
+text-align:center;
+margin:0;
+padding:0;
+height:3em;
+width:4em
+}
+.librevjs-libre-materialteal-skin .librevjs-control:before {
+font-family:LibreVideoJS;
+font-size:1.5em;
+line-height:2;
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%;
+text-align:center;
+text-shadow:1px 1px 1px rgba(0,0,0,.5)
+}
+/*COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
+.librevjs-libre-materialteal-skin .librevjs-control:focus:before,.librevjs-libre-materialteal-skin .librevjs-control:hover:before {
+color: #1de9b6;
+}
+/*END COLOR AL PASAR EL CURSOR EN LOS BOTONES DE VOLUMEN y SUBTITULOS*/
+.librevjs-libre-materialteal-skin .librevjs-control:focus {
+}
+.librevjs-libre-materialteal-skin .librevjs-control-text {
+border:0;
+clip:rect(0 0 0 0);
+height:1px;
+margin:-1px;
+overflow:hidden;
+padding:0;
+position:absolute;
+width:1px
+}
+
+/*Color y diseño de boton play control*/
+.librevjs-libre-materialteal-skin .librevjs-play-control {
+width:5em;
+cursor:pointer;
+color:rgb(29, 233, 182);
+}
+.librevjs-libre-materialteal-skin .librevjs-play-control:before {
+content:"\e001"
+}
+.librevjs-libre-materialteal-skin .librevjs-play-control:hover:before {
+color:#007c5d; /*color de play control al pasar el cursor*/
+}
+.librevjs-libre-materialteal-skin.librevjs-playing .librevjs-play-control:before {
+content:"\e002"
+}
+/*END Color y diseño de boton play control*/
+.librevjs-libre-materialteal-skin .librevjs-mute-control,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button {
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialteal-skin .librevjs-mute-control:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button:before {
+content:"\e006"
+}
+.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+content:"\e003"
+}
+.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+content:"\e004"
+}
+.librevjs-libre-materialteal-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+content:"\e005"
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-control {
+width:5em;
+float:right
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-bar {
+width:5em;
+height:.6em;
+margin:1.1em auto 0
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu-content {
+height:2.9em
+}
+
+/*PERSONALIZACION DE NIVEL DE VOLUMEN*/
+.librevjs-libre-materialteal-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-libre-materialteal-skin .librevjs-volume-bar .librevjs-volume-handle {
+width:.5em;
+height:.5em
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-handle:before {
+font-size:.9em;
+top:-.2em;
+left:-.2em;
+width:1em;
+height:1em;
+}
+.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+width:6em;
+left:-4em;
+}
+.librevjs-libre-materialteal-skin .librevjs-progress-control {
+position:absolute;
+left:0;
+right:0;
+width:auto;
+font-size:.3em;
+height:1em;
+top:-1em;
+-webkit-transition:all .4s;
+-moz-transition:all .4s;
+-o-transition:all .4s;
+transition:all .4s;
+}
+.librevjs-libre-materialteal-skin:hover .librevjs-progress-control {
+font-size:.9em;
+-webkit-transition:all .2s;
+-moz-transition:all .2s;
+-o-transition:all .2s;
+transition:all .2s;
+}
+.librevjs-libre-materialteal-skin .librevjs-progress-holder {
+height:100%;
+}
+.librevjs-libre-materialteal-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-materialteal-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-libre-materialteal-skin .librevjs-play-progress {
+background: #1de9b6 url() -50% 0 repeat;
+}
+.librevjs-libre-materialteal-skin .librevjs-load-progress {
+background:#646464;
+background:rgba(255,255,255,.4)
+}
+.librevjs-libre-materialteal-skin .librevjs-seek-handle {
+width:1.5em;
+height:100%
+}
+.librevjs-libre-materialteal-skin .librevjs-seek-handle:before {
+padding-top:.1em
+}
+.librevjs-libre-materialteal-skin .librevjs-time-controls {
+font-size:1em;
+font-weight: 700;/*mayor visibilidad*/
+line-height:3em
+}
+.librevjs-libre-materialteal-skin .librevjs-current-time {
+float:left
+}
+.librevjs-libre-materialteal-skin .librevjs-duration {
+float:left
+}
+.librevjs-libre-materialteal-skin .librevjs-remaining-time {
+display:none;
+float:left
+}
+.librevjs-time-divider {
+float:left;
+line-height:3em
+}
+.librevjs-libre-materialteal-skin .librevjs-fullscreen-control {
+width:3.8em;
+cursor:pointer;
+float:right
+}
+.librevjs-libre-materialteal-skin .librevjs-fullscreen-control:before {
+content:"\e000"
+}
+.librevjs-libre-materialteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+content:"\e00b"
+}
+
+/*Centrado del button Play y personalizado*/
+.librevjs-libre-materialteal-skin .librevjs-big-play-button {
+left: 50%;
+top: 40%;
+font-size: 10em;
+display: block;
+z-index: 2;
+position: absolute;
+width: 1em;
+height: 1em;
+margin-left: -0.5em;
+margin-top: -0.5em;
+text-align: center;
+vertical-align: middle;
+cursor: pointer;
+opacity: 1;
+color: #1abc9c;
+}
+/* Hide if controls are disabled */
+.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-big-play-button {
+display: none;
+}
+/* Hide when video starts playing */
+.librevjs-libre-materialteal-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-materialteal-skin.librevjs-using-native-controls .librevjs-big-play-button {
+display: none;
+}
+.librevjs-libre-materialteal-skin:hover .librevjs-big-play-button,
+.librevjs-libre-materialteal-skin .librevjs-big-play-button:focus {
+color: #16a085;
+}
+.librevjs-libre-materialteal-skin .librevjs-big-play-button:before {
+content: "\e007";
+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 */;
+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-libre-materialteal-skin .librevjs-loading-spinner:before {
+content:"\e01e";
+font-family:LibreVideoJS;
+position:absolute;
+top:0;
+left:0;
+width:1em;
+height:1em;
+text-align:center;
+text-shadow:0 0 .1em #000
+}
+@-moz-keyframes spin {
+0% {
+   -moz-transform:rotate(0deg)
+   }
+100% {
+   -moz-transform:rotate(359deg)
+   }
+}
+@-webkit-keyframes spin {
+0% {
+   -webkit-transform:rotate(0deg)
+   }
+100% {
+   -webkit-transform:rotate(359deg)
+   }
+}
+@-o-keyframes spin {
+0% {
+   -o-transform:rotate(0deg)
+   }
+100% {
+   -o-transform:rotate(359deg)
+   }
+}
+@keyframes spin {
+0% {
+   transform:rotate(0deg)
+   }
+100% {
+   transform:rotate(359deg)
+   }
+}
+.librevjs-libre-materialteal-skin .librevjs-menu-button {
+float:right;
+cursor:pointer;
+}
+.librevjs-libre-materialteal-skin .librevjs-menu {
+display:none;
+position:absolute;
+bottom:0;
+left:0;
+width:0;
+height:0;
+margin-bottom:3em;
+border-left:2em solid transparent;
+border-right:2em solid transparent;
+border-top:1.55em solid #000;
+border-top-color:rgba(7,40,50,.5);
+}
+.librevjs-libre-materialteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+display:block;
+padding:0;
+margin:0;
+position:absolute;
+width:10em;
+bottom:1.5em;
+max-height:15em;
+overflow:auto;
+left:-5em;
+background-color:#07141e;
+background-color:rgba(7,20,30,.7);
+-webkit-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
+}
+.librevjs-libre-materialteal-skin .librevjs-menu-button:hover .librevjs-menu {
+display:block;
+}
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li {
+list-style:none;
+margin:0;
+padding:.3em 0;
+line-height:1.4em;
+font-size:1.2em;
+text-align:center;
+text-transform:lowercase;
+color:#ccc;
+}
+
+/*COLOR DE SELECCION DE SUBTIULOS*/
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected {
+color: rgb(1, 56, 47);
+background-color: rgb(29, 233, 182);
+}
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li:hover,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+outline: 0;
+color: #004d40;
+background-color: #1de9b6;
+}
+/*END COLOR SELECCION DE SUBTITULOS*/
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-menu-title {
+text-align:center;
+text-transform:uppercase;
+font-size:1em;
+line-height:2em;
+padding:0;
+margin:0 0 .3em;
+font-weight:700;
+cursor:default;
+}
+.librevjs-libre-materialteal-skin .librevjs-subtitles-button:before {
+content:"\e00c"
+}
+.librevjs-libre-materialteal-skin .librevjs-captions-button:before {
+content:"\e008"
+}
+.librevjs-libre-materialteal-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-materialteal-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:500;
+font-style:normal;
+font-family:Arial,sans-serif;
+-webkit-user-select:none;
+-moz-user-select:none;
+-ms-user-select:none;
+user-select:none
+}
+.cliplibre-js .librevjs-tech {
+position:absolute;
+top:0;
+left:0;
+width:100%;
+height:100%
+}
+.cliplibre-js:-moz-full-screen {
+position:absolute
+}
+body.librevjs-full-window {
+padding:0;
+margin:0;
+height:100%;
+overflow-y:auto;
+}
+.cliplibre-js.librevjs-fullscreen {
+position:fixed;
+overflow:hidden;
+z-index:1000;
+left:0;
+top:0;
+bottom:0;
+right:0;
+width:100%!important;
+height:100%!important;
+position:absolute;
+}
+.cliplibre-js:-webkit-full-screen {
+width:100%!important;
+height:100%!important
+}
+.cliplibre-js.librevjs-fullscreen.librevjs-user-inactive {
+cursor:none
+}
+.librevjs-poster {
+background-repeat:no-repeat;
+background-position:50% 50%;
+background-size:contain;
+cursor:pointer;
+height:100%;
+margin:0;
+padding:0;
+position:relative;
+width:100%
+}
+.librevjs-poster img {
+display:block;
+margin:0 auto;
+max-height:100%;
+padding:0;
+width:100%
+}
+.cliplibre-js.librevjs-using-native-controls .librevjs-poster {
+display:none
+}
+.cliplibre-js .librevjs-text-track-display {
+text-align:center;
+position:absolute;
+bottom:4em;
+left:1em;
+right:1em
+}
+.cliplibre-js .librevjs-text-track {
+display:none;
+font-size:1.8em;
+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-libre-materialteal-skin .librevjs-hidden {
+display:none
+}
+.librevjs-lock-showing {
+display:block!important;
+opacity:1;
+visibility:visible
+}
+.no_html5 {
+background: black none repeat scroll 0 0;
+color: white;
+height: 160px;
+padding: 130px 10px 20px;
+text-align: center;
+}
+
+/*title de resolucion | subtitles y Caption*/
+.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
+color:rgb(26, 187, 156);
+background-color: inherit;
+}
+.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
+color: rgb(29, 233, 182);
+background-color: inherit;
+}
+/*Responsive*/
+.cliplibre-js-responsive-container.librevjs-hd {
+padding-top: 56.25%;
+}
+.cliplibre-js-responsive-container.librevjs-sd {
+padding-top: 75%;
+}
+.cliplibre-js-responsive-container {
+width: 100%;
+position: relative;
+}
+.cliplibre-js-responsive-container .cliplibre-js {
+height: 100% !important;
+width: 100% !important;
+position: absolute;
+top: 0;
+left: 0;
+}
+@media screen and (max-width: 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: 0.9em;
+ }
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+ .cliplibre-js .librevjs-text-track-display{
+ bottom: 1em;
+ }
+}
+@media screen and (max-width: 335px){
+  .cliplibre-js {
+    font-size:6px;
+  }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}