Correction style of play button and New version

7 files changed, 48 insertions, 36 deletions

diff --git a/librevideojs/css/material/libre-skin-blue.css b/librevideojs/css/material/libre-skin-blue.css
index f5cdf77..6bbbecf 100644
--- a/librevideojs/css/material/libre-skin-blue.css
+++ b/librevideojs/css/material/libre-skin-blue.css
@@ -284,7 +284,7 @@ content:"\e00b"
 /*Centrado del button Play y personalizado*/
 .librevjs-libre-materialblue-skin .librevjs-big-play-button {
 left: 50%;
-top: 40%;
+top: 50%;
 font-size: 10em;
 display: block;
 z-index: 2;
@@ -298,6 +298,7 @@ vertical-align: middle;
 cursor: pointer;
 opacity: 1;
 color: #2196F3;
+line-height: normal;
 }
 /* Hide if controls are disabled */
 .librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-big-play-button {
@@ -628,7 +629,7 @@ left: 0;
  }
  .librevjs-libre-materialblue-skin .librevjs-big-play-button{
  font-size: 5em;
- top: 45%;
+ top: 50%;
  }
  .cliplibre-js .librevjs-text-track-display{
  bottom: 1em;
@@ -641,7 +642,7 @@ left: 0;
 }
 @media screen and (max-width: 200px){
  .librevjs-libre-materialblue-skin .librevjs-big-play-button	{
- top:35%;
+ top:50%;
  }
 }
 @media screen and (max-width: 150px){
diff --git a/librevideojs/css/material/libre-skin-grey.css b/librevideojs/css/material/libre-skin-grey.css
index cd74eef..41bdced 100644
--- a/librevideojs/css/material/libre-skin-grey.css
+++ b/librevideojs/css/material/libre-skin-grey.css
@@ -284,7 +284,7 @@ content:"\e00b"
 /*Centrado del button Play y personalizado*/
 .librevjs-libre-materialgrey-skin .librevjs-big-play-button {
 left: 50%;
-top: 40%;
+top: 50%;
 font-size: 10em;
 display: block;
 z-index: 2;
@@ -298,6 +298,7 @@ vertical-align: middle;
 cursor: pointer;
 opacity: 1;
 color: #9e9e9e;
+line-height: normal;
 }
 /* Hide if controls are disabled */
 .librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-big-play-button {
@@ -628,7 +629,7 @@ left: 0;
  }
  .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
  font-size: 5em;
- top: 45%;
+ top: 50%;
  }
  .cliplibre-js .librevjs-text-track-display{
  bottom: 1em;
@@ -641,7 +642,7 @@ left: 0;
 }
 @media screen and (max-width: 200px){
  .librevjs-libre-materialgrey-skin .librevjs-big-play-button	{
- top:35%;
+ top:50%;
  }
 }
 @media screen and (max-width: 150px){
diff --git a/librevideojs/css/material/libre-skin-purple.css b/librevideojs/css/material/libre-skin-purple.css
index 3eeb9d6..e6139d9 100644
--- a/librevideojs/css/material/libre-skin-purple.css
+++ b/librevideojs/css/material/libre-skin-purple.css
@@ -284,7 +284,7 @@ content:"\e00b"
 /*Centrado del button Play y personalizado*/
 .librevjs-libre-materialpurple-skin .librevjs-big-play-button {
 left: 50%;
-top: 40%;
+top: 50%;
 font-size: 10em;
 display: block;
 z-index: 2;
@@ -298,6 +298,7 @@ vertical-align: middle;
 cursor: pointer;
 opacity: 1;
 color: #9c27b0;
+line-height: normal;
 }
 /* Hide if controls are disabled */
 .librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-big-play-button {
@@ -628,7 +629,7 @@ left: 0;
  }
  .librevjs-libre-materialpurple-skin .librevjs-big-play-button{
  font-size: 5em;
- top: 45%;
+ top: 50%;
  }
  .cliplibre-js .librevjs-text-track-display{
  bottom: 1em;
@@ -641,7 +642,7 @@ left: 0;
 }
 @media screen and (max-width: 200px){
  .librevjs-libre-materialpurple-skin .librevjs-big-play-button	{
- top:35%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 150px){
diff --git a/librevideojs/css/material/libre-skin-red.css b/librevideojs/css/material/libre-skin-red.css
index 2a14676..4e76331 100644
--- a/librevideojs/css/material/libre-skin-red.css
+++ b/librevideojs/css/material/libre-skin-red.css
@@ -283,7 +283,7 @@ content:"\e00b"
 /*Centrado del button Play y personalizado*/
 .librevjs-libre-materialred-skin .librevjs-big-play-button {
 left: 50%;
-top: 40%;
+top: 50%;
 font-size: 10em;
 display: block;
 z-index: 2;
@@ -297,6 +297,7 @@ vertical-align: middle;
 cursor: pointer;
 opacity: 1;
 color: #f44336;
+line-height: normal;
 }
 /* Hide if controls are disabled */
 .librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-big-play-button {
@@ -626,7 +627,7 @@ left: 0;
  }
  .librevjs-libre-materialred-skin .librevjs-big-play-button{
  font-size: 5em;
- top: 45%;
+ top: 50%;
  }
  .cliplibre-js .librevjs-text-track-display{
  bottom: 1em;
@@ -639,7 +640,7 @@ left: 0;
 }
 @media screen and (max-width: 200px){
  .librevjs-libre-materialred-skin .librevjs-big-play-button	{
- top:35%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 150px){
diff --git a/librevideojs/css/material/libre-skin-teal.css b/librevideojs/css/material/libre-skin-teal.css
index d36a6ac..040bba8 100644
--- a/librevideojs/css/material/libre-skin-teal.css
+++ b/librevideojs/css/material/libre-skin-teal.css
@@ -283,7 +283,7 @@ content:"\e00b"
 /*Centrado del button Play y personalizado*/
 .librevjs-libre-materialteal-skin .librevjs-big-play-button {
 left: 50%;
-top: 40%;
+top: 50%;
 font-size: 10em;
 display: block;
 z-index: 2;
@@ -297,6 +297,7 @@ vertical-align: middle;
 cursor: pointer;
 opacity: 1;
 color: #1abc9c;
+line-height: normal;
 }
 /* Hide if controls are disabled */
 .librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-big-play-button {
@@ -627,7 +628,7 @@ left: 0;
  }
  .librevjs-libre-materialteal-skin .librevjs-big-play-button{
  font-size: 5em;
- top: 45%;
+ top: 50%;
  }
  .cliplibre-js .librevjs-text-track-display{
  bottom: 1em;
@@ -640,7 +641,7 @@ left: 0;
 }
 @media screen and (max-width: 200px){
  .librevjs-libre-materialteal-skin .librevjs-big-play-button	{
- top:35%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 150px){
diff --git a/librevideojs/css/material/libre-skin-yellow.css b/librevideojs/css/material/libre-skin-yellow.css
index 22b2b08..ff9d009 100644
--- a/librevideojs/css/material/libre-skin-yellow.css
+++ b/librevideojs/css/material/libre-skin-yellow.css
@@ -283,7 +283,7 @@ content:"\e00b"
 /*Centrado del button Play y personalizado*/
 .librevjs-libre-materialyellow-skin .librevjs-big-play-button {
 left: 50%;
-top: 40%;
+top: 50%;
 font-size: 10em;
 display: block;
 z-index: 2;
@@ -297,6 +297,7 @@ vertical-align: middle;
 cursor: pointer;
 opacity: 1;
 color: #f1c40f;
+line-height: normal;
 }
 /* Hide if controls are disabled */
 .librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-big-play-button {
@@ -626,7 +627,7 @@ left: 0;
  }
  .librevjs-libre-materialyellow-skin .librevjs-big-play-button{
  font-size: 5em;
- top: 45%;
+ top: 50%;
  }
  .cliplibre-js .librevjs-text-track-display{
  bottom: 1em;
@@ -639,7 +640,7 @@ left: 0;
 }
 @media screen and (max-width: 200px){
  .librevjs-libre-materialyellow-skin .librevjs-big-play-button	{
- top:35%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 150px){
diff --git a/librevideojs/css/material/master.css b/librevideojs/css/material/master.css
index 8aaa213..e700b80 100644
--- a/librevideojs/css/material/master.css
+++ b/librevideojs/css/material/master.css
@@ -327,7 +327,7 @@ easily in the skin designer by LibreVideoJS FreeArts.
 */
 .librevjs-libre-materialblue-skin .librevjs-big-play-button {
   left: 50%;
-  top: 40%;
+  top: 50%;
   font-size: 10em;
   display: block;
   z-index: 2;
@@ -341,6 +341,7 @@ easily in the skin designer by LibreVideoJS FreeArts.
   cursor: pointer;
   opacity: 1;
   color: #2196F3;
+  line-height: normal;
 }
 /* Hide if controls are disabled */
 .librevjs-libre-materialblue-skin.librevjs-controls-disabled .librevjs-big-play-button {
@@ -477,12 +478,12 @@ background-color: inherit;
 @media screen and (max-width: 400px){
  .librevjs-libre-materialblue-skin .librevjs-big-play-button{
  font-size: 5em;
- top: 45%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 200px){
  .librevjs-libre-materialblue-skin .librevjs-big-play-button	{
- top:35%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 150px){
@@ -792,7 +793,7 @@ easily in the skin designer by LibreVideoJS FreeArts.
 */
 .librevjs-libre-materialgrey-skin .librevjs-big-play-button {
   left: 50%;
-  top: 40%;
+  top: 50%;
   font-size: 10em;
   display: block;
   z-index: 2;
@@ -806,6 +807,7 @@ easily in the skin designer by LibreVideoJS FreeArts.
   cursor: pointer;
   opacity: 1;
   color: #9e9e9e;
+  line-height: normal;
 }
 /* Hide if controls are disabled */
 .librevjs-libre-materialgrey-skin.librevjs-controls-disabled .librevjs-big-play-button {
@@ -941,12 +943,12 @@ background-color: inherit;
 @media screen and (max-width: 400px){
  .librevjs-libre-materialgrey-skin .librevjs-big-play-button{
  font-size: 5em;
- top: 45%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 200px){
  .librevjs-libre-materialgrey-skin .librevjs-big-play-button	{
- top:35%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 150px){
@@ -1257,7 +1259,7 @@ easily in the skin designer by LibreVideoJS FreeArts.
 */
 .librevjs-libre-materialpurple-skin .librevjs-big-play-button {
   left: 50%;
-  top: 40%;
+  top: 50%;
   font-size: 10em;
   display: block;
   z-index: 2;
@@ -1271,6 +1273,7 @@ easily in the skin designer by LibreVideoJS FreeArts.
   cursor: pointer;
   opacity: 1;
   color: #9c27b0;
+  line-height: normal;
 }
 /* Hide if controls are disabled */
 .librevjs-libre-materialpurple-skin.librevjs-controls-disabled .librevjs-big-play-button {
@@ -1406,12 +1409,12 @@ background-color: inherit;
 @media screen and (max-width: 400px){
  .librevjs-libre-materialpurple-skin .librevjs-big-play-button{
  font-size: 5em;
- top: 45%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 200px){
  .librevjs-libre-materialpurple-skin .librevjs-big-play-button	{
- top:35%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 150px){
@@ -1722,7 +1725,7 @@ easily in the skin designer by LibreVideoJS FreeArts.
 */
 .librevjs-libre-materialred-skin .librevjs-big-play-button {
   left: 50%;
-  top: 40%;
+  top: 50%;
   font-size: 10em;
   display: block;
   z-index: 2;
@@ -1736,6 +1739,7 @@ easily in the skin designer by LibreVideoJS FreeArts.
   cursor: pointer;
   opacity: 1;
   color: #f44336;
+  line-height: normal;
 }
 /* Hide if controls are disabled */
 .librevjs-libre-materialred-skin.librevjs-controls-disabled .librevjs-big-play-button {
@@ -1871,12 +1875,12 @@ background-color: inherit;
 @media screen and (max-width: 400px){
  .librevjs-libre-materialred-skin .librevjs-big-play-button{
  font-size: 5em;
- top: 45%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 200px){
  .librevjs-libre-materialred-skin .librevjs-big-play-button	{
- top:35%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 150px){
@@ -2187,7 +2191,7 @@ easily in the skin designer by LibreVideoJS FreeArts.
 */
 .librevjs-libre-materialteal-skin .librevjs-big-play-button {
 left: 50%;
-top: 40%;
+top: 50%;
 font-size: 10em;
 display: block;
 z-index: 2;
@@ -2201,6 +2205,7 @@ vertical-align: middle;
 cursor: pointer;
 opacity: 1;
 color: #1abc9c;
+line-height: normal;
 }
 /* Hide if controls are disabled */
 .librevjs-libre-materialteal-skin.librevjs-controls-disabled .librevjs-big-play-button {
@@ -2337,12 +2342,12 @@ background-color: inherit;
 @media screen and (max-width: 400px){
  .librevjs-libre-materialteal-skin .librevjs-big-play-button{
  font-size: 5em;
- top: 45%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 200px){
  .librevjs-libre-materialteal-skin .librevjs-big-play-button	{
- top:35%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 150px){
@@ -2653,7 +2658,7 @@ easily in the skin designer by LibreVideoJS FreeArts.
 */
 .librevjs-libre-materialyellow-skin .librevjs-big-play-button {
   left: 50%;
-  top: 40%;
+  top: 50%;
   font-size: 10em;
   display: block;
   z-index: 2;
@@ -2667,6 +2672,7 @@ easily in the skin designer by LibreVideoJS FreeArts.
   cursor: pointer;
   opacity: 1;
   color: #f1c40f;
+  line-height: normal;
 }
 /* Hide if controls are disabled */
 .librevjs-libre-materialyellow-skin.librevjs-controls-disabled .librevjs-big-play-button {
@@ -2803,12 +2809,12 @@ background-color: inherit;
 @media screen and (max-width: 400px){
  .librevjs-libre-materialyellow-skin .librevjs-big-play-button{
  font-size: 5em;
- top: 45%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 200px){
  .librevjs-libre-materialyellow-skin .librevjs-big-play-button	{
- top:35%;
+ top: 50%;
  }
 }
 @media screen and (max-width: 150px){