diff --git a/web/assets/css/transmission-app.scss b/web/assets/css/transmission-app.scss index 751e50d39..f4a6d8107 100644 --- a/web/assets/css/transmission-app.scss +++ b/web/assets/css/transmission-app.scss @@ -369,13 +369,19 @@ $video-image: '../img/film.svg'; @mixin mime-icon($mime-icon) { // background-image: url($mime-icon); background-color: var(--color-fg-primary); + -webkit-mask-image: url($mime-icon); mask-image: url($mime-icon); + -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; &[data-icon-multifile='true'] { + -webkit-mask-image: url($mime-icon), url($folder-image); mask-image: url($mime-icon), url($folder-image); + -webkit-mask-position: top left, bottom right; mask-position: top left, bottom right; + -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; + -webkit-mask-size: 16px, 16px; mask-size: 16px, 16px; } } @@ -437,6 +443,7 @@ $video-image: '../img/film.svg'; .icon { flex-shrink: 0; height: $icon-size; + -webkit-mask-size: $icon-size, $icon-size-num * 0.5px; mask-size: $icon-size, $icon-size-num * 0.5px; width: $icon-size; diff --git a/web/stylelint.config.js b/web/stylelint.config.js index 4d319a59e..edf6abf7a 100644 --- a/web/stylelint.config.js +++ b/web/stylelint.config.js @@ -27,6 +27,7 @@ module.exports = { "primer/no-undefined-vars": true, "primer/no-unused-vars": true, "property-no-unknown": true, + "property-no-vendor-prefix": null, "scss/at-rule-no-unknown": true, "selector-attribute-quotes": null, "selector-max-compound-selectors": null,