Fix mask-image property

Needed by chrome

7 files changed, 50 insertions, 43 deletions

diff --git a/client/.stylelintrc.json b/client/.stylelintrc.json
index 25f0b1002..6a322da62 100644
--- a/client/.stylelintrc.json
+++ b/client/.stylelintrc.json
@@ -24,6 +24,12 @@
     "rule-empty-line-before": null,
     "selector-max-id": null,
     "scss/at-function-pattern": null,
-    "function-parentheses-space-inside": "never-single-line"
+    "function-parentheses-space-inside": "never-single-line",
+    "property-no-vendor-prefix": [
+      true,
+      {
+        "ignoreProperties": [ "mask-image" ]
+      }
+    ]
   }
 }
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index e21ada0f1..0543564b4 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -40,8 +40,10 @@
   }
 
   .icon-menu {
-    background-color: pvar(--mainForegroundColor);
     mask-image: url('../assets/images/misc/menu.svg');
+    -webkit-mask-image: url('../assets/images/misc/menu.svg');
+
+    background-color: pvar(--mainForegroundColor);
     margin: 0 18px 0 20px;
 
     @media screen and (max-width: $mobile-view) {
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 89b6f0c4c..ae511aa02 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -402,7 +402,26 @@ ngx-loading-bar {
     }
 
     .admin-sub-header {
-      @include admin-sub-header-responsive;
+      flex-direction: column;
+
+      .form-sub-title {
+        margin-right: 0 !important;
+        margin-bottom: 10px;
+        text-align: center;
+      }
+
+      .admin-sub-nav {
+        display: block;
+        overflow-x: auto;
+        white-space: nowrap;
+        height: 50px;
+        padding: 10px 0;
+        width: 100%;
+
+        a {
+          margin-left: 5px;
+        }
+      }
     }
 
     my-markdown-textarea {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index b2083e516..06e55532a 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -336,20 +336,6 @@
   cursor: pointer;
 }
 
-@mixin select-arrow-down {
-  top: 50%;
-  right: calc(0% + 15px);
-  content: ' ';
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-  border: 5px solid rgba(0, 0, 0, 0);
-  border-top-color: #000;
-  margin-top: -2px;
-  z-index: 100;
-}
-
 @mixin responsive-width ($width) {
   width: $width;
 
@@ -381,7 +367,17 @@
   }
 
   &::after {
-    @include select-arrow-down;
+    top: 50%;
+    right: calc(0% + 15px);
+    content: ' ';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border: 5px solid rgba(0, 0, 0, 0);
+    border-top-color: #000;
+    margin-top: -2px;
+    z-index: 100;
   }
 
   select {
@@ -849,29 +845,6 @@
   }
 }
 
-@mixin admin-sub-header-responsive {
-  flex-direction: column;
-
-  .form-sub-title {
-    margin-right: 0 !important;
-    margin-bottom: 10px;
-    text-align: center;
-  }
-
-  .admin-sub-nav {
-    display: block;
-    overflow-x: auto;
-    white-space: nowrap;
-    height: 50px;
-    padding: 10px 0;
-    width: 100%;
-
-    a {
-      margin-left: 5px;
-    }
-  }
-}
-
 // applies ratio (default to 16:9) to a child element (using $selector) only using
 // an immediate's parent size. This allows to set a ratio without explicit
 // dimensions, as width/height cannot be computed from each other.
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 45cee3e77..1738f486d 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -47,6 +47,7 @@ $context-menu-width: 350px;
       @each $icon in $icons {
         &[class$="-#{$icon}"] {
           mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
+          -webkit-mask-image: url('#{$assets-path}/player/images/#{$icon}.svg');
         }
       }
 
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 8fe2e054d..c010f7297 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -346,6 +346,8 @@ body {
         &.icon-next,
         &.icon-previous {
           mask-image: url('#{$assets-path}/player/images/next.svg');
+          -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
+
           background-color: #fff;
           mask-size: cover;
           width: 11px;
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
index 8558fc837..3279bd263 100644
--- a/client/src/sass/player/playlist.scss
+++ b/client/src/sass/player/playlist.scss
@@ -40,10 +40,12 @@ $playlist-menu-width: 350px;
     }
 
     .cross {
+      mask-image: url('#{$assets-path}/images/feather/x.svg');
+      -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
+
       cursor: pointer;
       width: 20px;
       height: 20px;
-      mask-image: url('#{$assets-path}/images/feather/x.svg');
       background-color: #fff;
       mask-size: cover;
     }
@@ -85,9 +87,11 @@ $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');
+
   width: 22px;
   height: 22px;
-  mask-image: url('#{$assets-path}/images/feather/list.svg');
   background-color: #fff;
   mask-size: cover;
   margin-bottom: 3px;