2 files changed, 230 insertions, 32 deletions
diff --git a/librevideojs/css/librevideojs-material/master.css b/librevideojs/css/librevideojs-material/master.css
index 0a22c81..1825544 100644
--- a/librevideojs/css/librevideojs-material/master.css
+++ b/librevideojs/css/librevideojs-material/master.css
@@ -473,6 +473,28 @@ color: rgb(11, 137, 237);
 background-color: inherit;
 }
 
+@media screen and (max-width: 400px){
+ .librevjs-libre-materialblue-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialblue-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialblue-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialblue-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+
 /* Skin-Grey -------------------------------------------------------------------------------------------------------*/
 
 .librevjs-libre-materialgrey-skin {
@@ -915,6 +937,28 @@ color: #9e9e9e;
 background-color: inherit;
 }
 
+@media screen and (max-width: 400px){
+ .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialgrey-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+
 /* Skin-Purple -----------------------------------------------------------------------------------------------------*/
 .librevjs-libre-materialpurple-skin {
 color:#ccc;
@@ -1356,6 +1400,30 @@ background-color: inherit;
 color: #8e44ad;
 background-color: inherit;
 }
+
+@media screen and (max-width: 400px){
+ .librevjs-libre-materialpurple-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialpurple-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialpurple-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialpurple-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+
+
 /* Skin-Red --------------------------------------------------------------------------------------------------------*/
 
 .librevjs-libre-materialred-skin {
@@ -1799,6 +1867,28 @@ color: rgb(244, 67, 54);
 background-color: inherit;
 }
 
+@media screen and (max-width: 400px){
+ .librevjs-libre-materialred-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialred-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialred-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialred-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+
 /* Skin-Teal -------------------------------------------------------------------------------------------------------*/
 
 
@@ -2244,6 +2334,28 @@ color: rgb(29, 233, 182);
 background-color: inherit;
 }
 
+@media screen and (max-width: 400px){
+ .librevjs-libre-materialteal-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+}
+@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;
+ }
+}
+
 /* Skin-Yellow -----------------------------------------------------------------------------------------------------*/
 
 
@@ -2689,6 +2801,27 @@ color: #f39c12;
 background-color: inherit;
 }
 
+@media screen and (max-width: 400px){
+ .librevjs-libre-materialyellow-skin .librevjs-big-play-button{
+ font-size: 5em;
+ top: 45%;
+ }
+}
+@media screen and (max-width: 200px){
+ .librevjs-libre-materialyellow-skin .librevjs-big-play-button	{
+ top:35%;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-materialyellow-skin .librevjs-big-play-button{
+ font-size: 3em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-materialyellow-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
 
 /* Global Styles
 ==============================================================================*/
@@ -2926,10 +3059,6 @@ left: 0;
  .cliplibre-js .librevjs-text-track{
  font-size: 0.9em;
  }
- .librevjs-big-play-button{
- font-size: 5em;
- top: 45%;
- }
  .cliplibre-js .librevjs-text-track-display{
  bottom: 1em;
  }
@@ -2939,18 +3068,3 @@ left: 0;
     font-size:6px;
   }
 }
-@media screen and (max-width: 200px){
- .librevjs-big-play-button	{
- top:35%;
- }
-}
-@media screen and (max-width: 150px){
- .librevjs-big-play-button{
- font-size: 3em;
- }
-}
-@media screen and (max-width: 90px){
- .librevjs-big-play-button{
- font-size: 2em;
- }
-}
diff --git a/librevideojs/css/mix-material/master.css b/librevideojs/css/mix-material/master.css
index 7e2e157..5b4d9eb 100644
--- a/librevideojs/css/mix-material/master.css
+++ b/librevideojs/css/mix-material/master.css
@@ -494,6 +494,22 @@ color: rgb(11, 137, 237);
 background-color: inherit;
 }
 
+@media screen and (max-width: 400px){
+ .librevjs-libre-mixblue-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-mixblue-skin .librevjs-big-play-button{
+ font-size: 1.8em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-mixblue-skin .librevjs-big-play-button{
+ font-size: 1.4em;
+ }
+}
+
 /* Skin-Grey -------------------------------------------------------------------------------------------------------*/
 
 .librevjs-libre-mixgrey-skin {
@@ -957,6 +973,22 @@ color: #9e9e9e;
 background-color: inherit;
 }
 
+@media screen and (max-width: 400px){
+ .librevjs-libre-mixgrey-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-mixgrey-skin .librevjs-big-play-button{
+ font-size: 1.8em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-mixgrey-skin .librevjs-big-play-button{
+ font-size: 1.4em;
+ }
+}
+
 /* Skin-Purple -----------------------------------------------------------------------------------------------------*/
 .librevjs-libre-mixpurple-skin {
 color:#ccc;
@@ -1419,6 +1451,23 @@ background-color: inherit;
 color: #8e44ad;
 background-color: inherit;
 }
+
+@media screen and (max-width: 400px){
+ .librevjs-libre-mixpurple-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-mixpurple-skin .librevjs-big-play-button{
+ font-size: 1.8em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-mixpurple-skin .librevjs-big-play-button{
+ font-size: 1.4em;
+ }
+}
+
 /* Skin-Red --------------------------------------------------------------------------------------------------------*/
 
 .librevjs-libre-mixred-skin {
@@ -1883,6 +1932,22 @@ color: rgb(244, 67, 54);
 background-color: inherit;
 }
 
+@media screen and (max-width: 400px){
+ .librevjs-libre-mixred-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-mixred-skin .librevjs-big-play-button{
+ font-size: 1.8em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-mixred-skin .librevjs-big-play-button{
+ font-size: 1.4em;
+ }
+}
+
 /* Skin-Teal -------------------------------------------------------------------------------------------------------*/
 
 
@@ -2349,6 +2414,22 @@ color: rgb(29, 233, 182);
 background-color: inherit;
 }
 
+@media screen and (max-width: 400px){
+ .librevjs-libre-mixteal-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-mixteal-skin .librevjs-big-play-button{
+ font-size: 1.8em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-mixteal-skin .librevjs-big-play-button{
+ font-size: 1.4em;
+ }
+}
+
 /* Skin-Yellow -----------------------------------------------------------------------------------------------------*/
 
 
@@ -2815,6 +2896,22 @@ color: #f39c12;
 background-color: inherit;
 }
 
+@media screen and (max-width: 400px){
+ .librevjs-libre-mixyellow-skin .librevjs-big-play-button{
+ font-size: 2em;
+ }
+}
+@media screen and (max-width: 150px){
+ .librevjs-libre-mixyellow-skin .librevjs-big-play-button{
+ font-size: 1.8em;
+ }
+}
+@media screen and (max-width: 90px){
+ .librevjs-libre-mixyellow-skin .librevjs-big-play-button{
+ font-size: 1.4em;
+ }
+}
+
 
 /* Global Styles
 ==============================================================================*/
@@ -3058,9 +3155,6 @@ left: 0;
  .cliplibre-js .librevjs-text-track{
  font-size: 1em;
  }
- .librevjs-big-play-button{
- font-size: 2em;
- }
  .cliplibre-js .librevjs-text-track-display{
  bottom: 1em;
  }
@@ -3070,13 +3164,3 @@ left: 0;
     font-size:6px;
   }
 }
-@media screen and (max-width: 150px){
- .librevjs-big-play-button{
- font-size: 1.8em;
- }
-}
-@media screen and (max-width: 90px){
- .librevjs-big-play-button{
- font-size: 1.4em;
- }
-}