use -webkit-mask-image in addition to mask-image for better cross-browser compatibility

This commit is contained in:
xenofem 2023-08-06 14:06:13 -04:00
parent 3bbea6dc9c
commit 08ed42b6f0

View file

@ -82,9 +82,14 @@ body {
width: 18px; width: 18px;
height: 18px; height: 18px;
background-color: var(--icon-primary); background-color: var(--icon-primary);
mask-image: url("../images/feather-icons/copy.svg"); mask-image: url("../images/feather-icons/copy.svg");
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-image: url("../images/feather-icons/copy.svg");
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
} }
#download_code_container:hover .copy_button { #download_code_container:hover .copy_button {
@ -144,10 +149,17 @@ tr.unavailable td.file_download {
.delete_button { .delete_button {
background-color: var(--icon-secondary); background-color: var(--icon-secondary);
mask-image: url("../images/feather-icons/x.svg"); mask-image: url("../images/feather-icons/x.svg");
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
-webkit-mask-image: url("../images/feather-icons/x.svg");
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
cursor: pointer; cursor: pointer;
@ -205,10 +217,17 @@ td.file_download {
.download_button { .download_button {
background-color: var(--icon-ready); background-color: var(--icon-ready);
mask-image: url("../images/feather-icons/download.svg"); mask-image: url("../images/feather-icons/download.svg");
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
-webkit-mask-image: url("../images/feather-icons/download.svg");
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
cursor: pointer; cursor: pointer;
@ -224,10 +243,17 @@ summary {
.file_unavailable { .file_unavailable {
background-color: var(--icon-unavailable); background-color: var(--icon-unavailable);
mask-image: url("../images/feather-icons/clock.svg"); mask-image: url("../images/feather-icons/clock.svg");
mask-size: contain; mask-size: contain;
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
-webkit-mask-image: url("../images/feather-icons/clock.svg");
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
} }