From 08ed42b6f0f2feb502ddf4d136a87633fe42b827 Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Sun, 6 Aug 2023 14:06:13 -0400
Subject: [PATCH] use -webkit-mask-image in addition to mask-image for better
 cross-browser compatibility

---
 static/css/transbeam.css | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/static/css/transbeam.css b/static/css/transbeam.css
index 13e373e..f5d816b 100644
--- a/static/css/transbeam.css
+++ b/static/css/transbeam.css
@@ -82,9 +82,14 @@ body {
     width: 18px;
     height: 18px;
     background-color: var(--icon-primary);
+
     mask-image: url("../images/feather-icons/copy.svg");
     mask-size: contain;
     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 {
@@ -144,10 +149,17 @@ tr.unavailable td.file_download {
 
 .delete_button {
     background-color: var(--icon-secondary);
+
     mask-image: url("../images/feather-icons/x.svg");
     mask-size: contain;
     mask-repeat: no-repeat;
     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-right: 15px;
     cursor: pointer;
@@ -205,10 +217,17 @@ td.file_download {
 
 .download_button {
     background-color: var(--icon-ready);
+
     mask-image: url("../images/feather-icons/download.svg");
     mask-size: contain;
     mask-repeat: no-repeat;
     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-right: 15px;
     cursor: pointer;
@@ -224,10 +243,17 @@ summary {
 
 .file_unavailable {
     background-color: var(--icon-unavailable);
+
     mask-image: url("../images/feather-icons/clock.svg");
     mask-size: contain;
     mask-repeat: no-repeat;
     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-right: 15px;
 }