aboutsummaryrefslogtreecommitdiffstats
path: root/librevideojs/css/librevideojs-material/libre-skin-teal.css
diff options
context:
space:
mode:
Diffstat (limited to 'librevideojs/css/librevideojs-material/libre-skin-teal.css')
-rw-r--r--librevideojs/css/librevideojs-material/libre-skin-teal.css149
1 files changed, 76 insertions, 73 deletions
diff --git a/librevideojs/css/librevideojs-material/libre-skin-teal.css b/librevideojs/css/librevideojs-material/libre-skin-teal.css
index a3c4292..d36a6ac 100644
--- a/librevideojs/css/librevideojs-material/libre-skin-teal.css
+++ b/librevideojs/css/librevideojs-material/libre-skin-teal.css
@@ -3,7 +3,7 @@ LibreVideoJS Estilos personalizados = Teal
Version 1.2
Escrito por Jesús Eduardo
*/
-.librevjs-libre-skin {
+.librevjs-libre-materialteal-skin {
color:#ccc;
background-color: inherit;
}
@@ -15,7 +15,7 @@ src: local('?'),
url("../../fonts/libre-material/libre-icons.ttf") format("truetype"),
url("../../fonts/libre-material/libre-icons.svg") format("svg");
}
-.librevjs-libre-skin .librevjs-slider {
+.librevjs-libre-materialteal-skin .librevjs-slider {
/* Replace browser focus highlight with handle highlight */
outline: 0;
position: relative;
@@ -25,18 +25,18 @@ padding: 0;
background-color: #000000;
background-color: rgba(0, 0, 0, 0.5);
}
-.librevjs-libre-skin .librevjs-slider:focus {
+.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-skin .librevjs-slider-handle {
+.librevjs-libre-materialteal-skin .librevjs-slider-handle {
width: 0;
height: 0;
}
-.librevjs-libre-skin .librevjs-slider-handle:before {
+.librevjs-libre-materialteal-skin .librevjs-slider-handle:before {
text-shadow: 0em 0em 1em #fff;
position: absolute;
top: 0;
@@ -44,7 +44,7 @@ left: 0;
}
/* control bar */
-.librevjs-libre-skin .librevjs-control-bar {
+.librevjs-libre-materialteal-skin .librevjs-control-bar {
/* Start hidden */
display: none;
position: absolute;
@@ -60,7 +60,7 @@ height: 3.0em;
background-color: #232323;
background-color: rgba(35, 35, 35, 0.8);
}
-.librevjs-libre-skin.librevjs-has-started .librevjs-control-bar {
+.librevjs-libre-materialteal-skin.librevjs-has-started .librevjs-control-bar {
display:block;
visibility:visible;
opacity:1;
@@ -69,7 +69,7 @@ opacity:1;
-o-transition:visibility .1s,opacity .1s;
transition:visibility .1s,opacity .1s
}
-.librevjs-libre-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
+.librevjs-libre-materialteal-skin.librevjs-has-started.librevjs-user-inactive.librevjs-playing .librevjs-control-bar {
display:block;
visibility:hidden;
opacity:0;
@@ -78,18 +78,18 @@ opacity:0;
-o-transition:visibility 1s,opacity 1s;
transition:visibility 1s,opacity 1s
}
-.librevjs-libre-skin.librevjs-controls-disabled .librevjs-control-bar {
+.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-control-bar {
display:none
}
-.librevjs-libre-skin.librevjs-using-native-controls .librevjs-control-bar {
+.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-control-bar {
display:none
}
@media \0screen {
- .librevjs-libre-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
+ .librevjs-libre-materialteal-skin.librevjs-user-inactive.librevjs-playing .librevjs-control-bar :before {
content:""
}
}
-.librevjs-libre-skin .librevjs-control {
+.librevjs-libre-materialteal-skin .librevjs-control {
outline:0;
position:relative;
float:left;
@@ -99,7 +99,7 @@ padding:0;
height:3em;
width:4em
}
-.librevjs-libre-skin .librevjs-control:before {
+.librevjs-libre-materialteal-skin .librevjs-control:before {
font-family:LibreVideoJS;
font-size:1.5em;
line-height:2;
@@ -112,13 +112,13 @@ 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-skin .librevjs-control:focus:before,.librevjs-libre-skin .librevjs-control:hover:before {
+.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-skin .librevjs-control:focus {
+.librevjs-libre-materialteal-skin .librevjs-control:focus {
}
-.librevjs-libre-skin .librevjs-control-text {
+.librevjs-libre-materialteal-skin .librevjs-control-text {
border:0;
clip:rect(0 0 0 0);
height:1px;
@@ -130,52 +130,52 @@ width:1px
}
/*Color y diseño de boton play control*/
-.librevjs-libre-skin .librevjs-play-control {
+.librevjs-libre-materialteal-skin .librevjs-play-control {
width:5em;
cursor:pointer;
color:rgb(29, 233, 182);
}
-.librevjs-libre-skin .librevjs-play-control:before {
+.librevjs-libre-materialteal-skin .librevjs-play-control:before {
content:"\e001"
}
-.librevjs-libre-skin .librevjs-play-control:hover:before {
+.librevjs-libre-materialteal-skin .librevjs-play-control:hover:before {
color:#007c5d; /*color de play control al pasar el cursor*/
}
-.librevjs-libre-skin.librevjs-playing .librevjs-play-control:before {
+.librevjs-libre-materialteal-skin.librevjs-playing .librevjs-play-control:before {
content:"\e002"
}
/*END Color y diseño de boton play control*/
-.librevjs-libre-skin .librevjs-mute-control,.librevjs-libre-skin .librevjs-volume-menu-button {
+.librevjs-libre-materialteal-skin .librevjs-mute-control,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button {
cursor:pointer;
float:right
}
-.librevjs-libre-skin .librevjs-mute-control:before,.librevjs-libre-skin .librevjs-volume-menu-button:before {
+.librevjs-libre-materialteal-skin .librevjs-mute-control:before,.librevjs-libre-materialteal-skin .librevjs-volume-menu-button:before {
content:"\e006"
}
-.librevjs-libre-skin .librevjs-mute-control.librevjs-vol-0:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-0:before {
+.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-skin .librevjs-mute-control.librevjs-vol-1:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-1:before {
+.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-skin .librevjs-mute-control.librevjs-vol-2:before,.librevjs-libre-skin .librevjs-volume-menu-button.librevjs-vol-2:before {
+.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-skin .librevjs-volume-control {
+.librevjs-libre-materialteal-skin .librevjs-volume-control {
width:5em;
float:right
}
-.librevjs-libre-skin .librevjs-volume-bar {
+.librevjs-libre-materialteal-skin .librevjs-volume-bar {
width:5em;
height:.6em;
margin:1.1em auto 0
}
-.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu-content {
+.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu-content {
height:2.9em
}
/*PERSONALIZACION DE NIVEL DE VOLUMEN*/
-.librevjs-libre-skin .librevjs-volume-level {
+.librevjs-libre-materialteal-skin .librevjs-volume-level {
position: absolute;
top: 0;
left: 0;
@@ -186,22 +186,22 @@ width: 100%;
background: #1de9b6 url() -50% 0 repeat;
}
/*END PERSONALIZACION DE NIVEL DE VOLUMEN*/
-.librevjs-libre-skin .librevjs-volume-bar .librevjs-volume-handle {
+.librevjs-libre-materialteal-skin .librevjs-volume-bar .librevjs-volume-handle {
width:.5em;
height:.5em
}
-.librevjs-libre-skin .librevjs-volume-handle:before {
+.librevjs-libre-materialteal-skin .librevjs-volume-handle:before {
font-size:.9em;
top:-.2em;
left:-.2em;
width:1em;
height:1em;
}
-.librevjs-libre-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
+.librevjs-libre-materialteal-skin .librevjs-volume-menu-button .librevjs-menu .librevjs-menu-content {
width:6em;
left:-4em;
}
-.librevjs-libre-skin .librevjs-progress-control {
+.librevjs-libre-materialteal-skin .librevjs-progress-control {
position:absolute;
left:0;
right:0;
@@ -214,17 +214,17 @@ top:-1em;
-o-transition:all .4s;
transition:all .4s;
}
-.librevjs-libre-skin:hover .librevjs-progress-control {
+.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-skin .librevjs-progress-holder {
+.librevjs-libre-materialteal-skin .librevjs-progress-holder {
height:100%;
}
-.librevjs-libre-skin .librevjs-progress-holder .librevjs-play-progress,.librevjs-libre-skin .librevjs-progress-holder .librevjs-load-progress {
+.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%;
@@ -235,32 +235,32 @@ top:0
}
/* Personalización de barra de progreso a color azul */
-.librevjs-libre-skin .librevjs-play-progress {
+.librevjs-libre-materialteal-skin .librevjs-play-progress {
background: #1de9b6 url() -50% 0 repeat;
}
-.librevjs-libre-skin .librevjs-load-progress {
+.librevjs-libre-materialteal-skin .librevjs-load-progress {
background:#646464;
background:rgba(255,255,255,.4)
}
-.librevjs-libre-skin .librevjs-seek-handle {
+.librevjs-libre-materialteal-skin .librevjs-seek-handle {
width:1.5em;
height:100%
}
-.librevjs-libre-skin .librevjs-seek-handle:before {
+.librevjs-libre-materialteal-skin .librevjs-seek-handle:before {
padding-top:.1em
}
-.librevjs-libre-skin .librevjs-time-controls {
+.librevjs-libre-materialteal-skin .librevjs-time-controls {
font-size:1em;
font-weight: 700;/*mayor visibilidad*/
line-height:3em
}
-.librevjs-libre-skin .librevjs-current-time {
+.librevjs-libre-materialteal-skin .librevjs-current-time {
float:left
}
-.librevjs-libre-skin .librevjs-duration {
+.librevjs-libre-materialteal-skin .librevjs-duration {
float:left
}
-.librevjs-libre-skin .librevjs-remaining-time {
+.librevjs-libre-materialteal-skin .librevjs-remaining-time {
display:none;
float:left
}
@@ -268,20 +268,20 @@ float:left
float:left;
line-height:3em
}
-.librevjs-libre-skin .librevjs-fullscreen-control {
+.librevjs-libre-materialteal-skin .librevjs-fullscreen-control {
width:3.8em;
cursor:pointer;
float:right
}
-.librevjs-libre-skin .librevjs-fullscreen-control:before {
+.librevjs-libre-materialteal-skin .librevjs-fullscreen-control:before {
content:"\e000"
}
-.librevjs-libre-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
+.librevjs-libre-materialteal-skin.librevjs-fullscreen .librevjs-fullscreen-control:before {
content:"\e00b"
}
/*Centrado del button Play y personalizado*/
-.librevjs-libre-skin .librevjs-big-play-button {
+.librevjs-libre-materialteal-skin .librevjs-big-play-button {
left: 50%;
top: 40%;
font-size: 10em;
@@ -299,23 +299,23 @@ opacity: 1;
color: #1abc9c;
}
/* Hide if controls are disabled */
-.librevjs-libre-skin.librevjs-controls-disabled .librevjs-big-play-button {
+.librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-big-play-button {
display: none;
}
/* Hide when video starts playing */
-.librevjs-libre-skin.librevjs-has-started .librevjs-big-play-button {
+.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-skin.librevjs-using-native-controls .librevjs-big-play-button {
+.librevjs-libre-materialteal-skin.librevjs-using-native-controls .librevjs-big-play-button {
display: none;
}
-.librevjs-libre-skin:hover .librevjs-big-play-button,
-.librevjs-libre-skin .librevjs-big-play-button:focus {
+.librevjs-libre-materialteal-skin:hover .librevjs-big-play-button,
+.librevjs-libre-materialteal-skin .librevjs-big-play-button:focus {
color: #16a085;
}
-.librevjs-libre-skin .librevjs-big-play-button:before {
+.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
@@ -348,7 +348,7 @@ opacity:.75;
-o-animation:spin 1.5s infinite linear;
animation:spin 1.5s infinite linear
}
-.librevjs-libre-skin .librevjs-loading-spinner:before {
+.librevjs-libre-materialteal-skin .librevjs-loading-spinner:before {
content:"\e01e";
font-family:LibreVideoJS;
position:absolute;
@@ -391,11 +391,11 @@ text-shadow:0 0 .1em #000
transform:rotate(359deg)
}
}
-.librevjs-libre-skin .librevjs-menu-button {
+.librevjs-libre-materialteal-skin .librevjs-menu-button {
float:right;
cursor:pointer;
}
-.librevjs-libre-skin .librevjs-menu {
+.librevjs-libre-materialteal-skin .librevjs-menu {
display:none;
position:absolute;
bottom:0;
@@ -408,7 +408,7 @@ border-right:2em solid transparent;
border-top:1.55em solid #000;
border-top-color:rgba(7,40,50,.5);
}
-.librevjs-libre-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
+.librevjs-libre-materialteal-skin .librevjs-menu-button .librevjs-menu .librevjs-menu-content {
display:block;
padding:0;
margin:0;
@@ -424,10 +424,10 @@ background-color:rgba(7,20,30,.7);
-moz-box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
box-shadow:-.2em -.2em .3em rgba(255,255,255,.2);
}
-.librevjs-libre-skin .librevjs-menu-button:hover .librevjs-menu {
+.librevjs-libre-materialteal-skin .librevjs-menu-button:hover .librevjs-menu {
display:block;
}
-.librevjs-libre-skin .librevjs-menu-button ul li {
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li {
list-style:none;
margin:0;
padding:.3em 0;
@@ -435,20 +435,21 @@ line-height:1.4em;
font-size:1.2em;
text-align:center;
text-transform:lowercase;
+color:#ccc;
}
/*COLOR DE SELECCION DE SUBTIULOS*/
-.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected {
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-selected {
color: rgb(1, 56, 47);
background-color: rgb(29, 233, 182);
}
-.librevjs-libre-skin .librevjs-menu-button ul li:focus,.librevjs-libre-skin .librevjs-menu-button ul li:hover,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:focus,.librevjs-libre-skin .librevjs-menu-button ul li.librevjs-selected:hover {
+.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-skin .librevjs-menu-button ul li.librevjs-menu-title {
+.librevjs-libre-materialteal-skin .librevjs-menu-button ul li.librevjs-menu-title {
text-align:center;
text-transform:uppercase;
font-size:1em;
@@ -458,13 +459,13 @@ margin:0 0 .3em;
font-weight:700;
cursor:default;
}
-.librevjs-libre-skin .librevjs-subtitles-button:before {
+.librevjs-libre-materialteal-skin .librevjs-subtitles-button:before {
content:"\e00c"
}
-.librevjs-libre-skin .librevjs-captions-button:before {
+.librevjs-libre-materialteal-skin .librevjs-captions-button:before {
content:"\e008"
}
-.librevjs-libre-skin .librevjs-captions-button:focus .librevjs-control-content:before,.librevjs-libre-skin .librevjs-captions-button:hover .librevjs-control-content:before {
+.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;
@@ -564,7 +565,7 @@ background-color: rgba(2, 7, 11, 0.7);
.librevjs-tt-cue {
display:block
}
-.librevjs-libre-skin .librevjs-hidden {
+.librevjs-libre-materialteal-skin .librevjs-hidden {
display:none
}
.librevjs-lock-showing {
@@ -581,11 +582,13 @@ text-align: center;
}
/*title de resolucion | subtitles y Caption*/
-ul li.librevjs-menu-title.librevjs-res-menu-title{
+.librevjs-libre-materialteal-skin ul li.librevjs-menu-title.librevjs-res-menu-title{
color:rgb(26, 187, 156);
+background-color: inherit;
}
-ul li.librevjs-menu-title.librevjs-res-menu-title:hover{
+.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 {
@@ -622,7 +625,7 @@ left: 0;
.cliplibre-js .librevjs-text-track{
font-size: 0.9em;
}
- .librevjs-libre-skin .librevjs-big-play-button{
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button{
font-size: 5em;
top: 45%;
}
@@ -636,17 +639,17 @@ left: 0;
}
}
@media screen and (max-width: 200px){
- .librevjs-libre-skin .librevjs-big-play-button {
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button {
top:35%;
}
}
@media screen and (max-width: 150px){
- .librevjs-libre-skin .librevjs-big-play-button{
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button{
font-size: 3em;
}
}
@media screen and (max-width: 90px){
- .librevjs-libre-skin .librevjs-big-play-button{
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button{
font-size: 2em;
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-07-16 10:21:42 +0000