diff --git a/client/.stylelintrc.json b/client/.stylelintrc.json index 6a322da62..3b6a465e1 100644 --- 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 5548e2712..c183d24f4 100644 --- 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 7fe4ac193..96d752699 100644 --- 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 f7e67ba16..e1999709e 100644 --- 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; }