From bc4c9cc1d75d591c217d61ab22a107b7f1044c76 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 7 May 2021 11:25:47 +0200
Subject: [PATCH] Fix mask-image property
Needed by chrome
---
client/.stylelintrc.json | 8 +++-
client/src/app/app.component.scss | 4 +-
client/src/sass/application.scss | 21 +++++++++-
client/src/sass/include/_mixins.scss | 49 +++++------------------
client/src/sass/player/context-menu.scss | 1 +
client/src/sass/player/peertube-skin.scss | 2 +
client/src/sass/player/playlist.scss | 8 +++-
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;