Fix player icons on chrome

diff --git a/client/.stylelintrc.json b/client/.stylelintrc.json
index 6a322da62799ae6cfad20a9671019907d7525171..3b6a465e17e771399727305010cdfd4a3dffae97 100644 (file)
--- a/client/.stylelintrc.json
+++ b/client/.stylelintrc.json
@@ -28,7 +28,7 @@
     "property-no-vendor-prefix": [
       true,
       {
-        "ignoreProperties": [ "mask-image" ]
+        "ignoreProperties": [ "mask-image", "mask-size" ]
       }
     ]
   }

diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 5548e2712d284615a98f4c463fe80d4c0e487f08..c183d24f4403eca689a2f29d795cff25aee8241f 100644 (file)
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -44,6 +44,8 @@ $context-menu-width: 350px;
       width: 14px;
       height: 14px;
       background-color: #fff;
+
+      -webkit-mask-size: cover;
       mask-size: cover;
 
       @each $icon in $icons {

diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 7fe4ac1937ea4c6cefbd453367f17ea895450e6e..96d7526994275cbc109629664e06d078787a54af 100644 (file)
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -354,9 +354,10 @@ body {
         &.icon-previous {
           mask-image: url('#{$assets-path}/player/images/next.svg');
           -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
+          mask-size: cover;
+          -webkit-mask-size: cover;
 
           background-color: #fff;
-          mask-size: cover;
           width: 11px;
           height: 11px;
           margin-top: -2px;

diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index f7e67ba16d2287da35e5574efbd2a9859b14f081..e1999709e67b5cd2eefdde5e41e33f73546ee9ac 100644 (file)
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -46,12 +46,13 @@ $playlist-menu-width: 350px;
     .cross {
       mask-image: url('#{$assets-path}/images/feather/x.svg');
       -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
+      mask-size: cover;
+      -webkit-mask-size: cover;
 
       cursor: pointer;
       width: 20px;
       height: 20px;
       background-color: #fff;
-      mask-size: cover;
     }
   }
 }
@@ -93,11 +94,12 @@ $playlist-menu-width: 350px;
 .vjs-playlist-icon {
   mask-image: url('#{$assets-path}/images/feather/list.svg');
   -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
+  mask-size: cover;
+  -webkit-mask-size: cover;
 
   width: 22px;
   height: 22px;
   background-color: #fff;
-  mask-size: cover;
   margin-bottom: 3px;
 }