Fix icon colouring in iOS

package.json

@@ -1,7 +1,7 @@
 {
   "name": "lindsvg-pwa",
   "private": true,
-  "version": "2.0.1",
+  "version": "2.0.2",
   "type": "module",
   "scripts": {
     "lint": "eslint \"src/**/*.{mjs,vue}\"",

src/components/PanelAttributes.vue

@@ -296,10 +296,12 @@ function plot() {
     position: relative;
 
     &::before {
-      background: url(../assets/icons.svg) -150px 0 no-repeat;
+      background-color: var(--color-accent);
       content: "";
       height: 25px;
       left: 50%;
+      -webkit-mask: url(../assets/icons.svg) -150px 0 no-repeat;
+      mask: url(../assets/icons.svg) -150px 0 no-repeat;
       opacity: 0.5;
       position: absolute;
       top: 50%;

src/components/PanelCollections.vue

@@ -134,10 +134,12 @@ function deleteLSystem(lid) {
     display: flex;
 
     &::after {
-      background: url(../assets/icons.svg) -125px 0 no-repeat;
+      background-color: var(--color-accent);
       content: "";
       flex-shrink: 0;
       height: 25px;
+      -webkit-mask: url(../assets/icons.svg) -125px 0 no-repeat;
+      mask: url(../assets/icons.svg) -125px 0 no-repeat;
       width: 25px;
     }
 
@@ -147,7 +149,7 @@ function deleteLSystem(lid) {
   }
 
   .filterField {
-    appearance: textfield; /* fixes border-radius issue in Safari */
+    -webkit-appearance: none; /* fixes border-radius issue in Safari */
     box-sizing: border-box;
     flex-grow: 1;
     min-width: 0;

src/components/PanelSettings.vue

@@ -219,10 +219,12 @@ function plot() {
     position: relative;
 
     &::before {
-      background: url(../assets/icons.svg) -100px 0 no-repeat;
+      background-color: var(--color-accent);
       content: "";
       height: 25px;
       left: 20px;
+      -webkit-mask: url(../assets/icons.svg) -100px 0 no-repeat;
+      mask: url(../assets/icons.svg) -100px 0 no-repeat;
       pointer-events: none;
       position: absolute;
       top: 50%;

src/components/ThePopover.vue

@@ -37,13 +37,21 @@ let {popover} = storeToRefs(useInterfaceStore());
   box-shadow: 0 0 3px 0 var(--color-surface-shadow);
   box-sizing: border-box;
   display: grid;
-  gap: 20px;
+  gap: 5px 20px;
   grid-template-columns: 1fr auto auto;
   max-width: 500px;
   padding: 5px 20px;
   right: 15px;
   position: fixed;
   width: calc(100% - 30px - var(--size-sidebar-button));
+
+  @media (max-width: 450px) {
+    grid-template-columns: 1fr auto;
+
+    & :first-child {
+      grid-row: 1 / 3;
+    }
+  }
 }
 
 .button {

src/components/TheSidebar.vue

@@ -48,9 +48,11 @@ let interfaceStore = useInterfaceStore();
 }
 
 .collapse {
-  background: url(../assets/icons.svg) -175px 0 no-repeat;
+  background-color: var(--color-accent);
   border: none;
   height: 25px;
+  -webkit-mask: url(../assets/icons.svg) -175px 0 no-repeat;
+  mask: url(../assets/icons.svg) -175px 0 no-repeat;
   padding: 0;
   position: absolute;
   right: 10px;

src/styles/interface.module.css

@@ -68,28 +68,34 @@
   width: 32px;
 
   &::before {
-    background: url(../assets/icons.svg) -100% -100% no-repeat;
+    background-color: var(--color-accent);
     content: "";
     height: 25px;
+    -webkit-mask: url(../assets/icons.svg) -100% -100% no-repeat;
+    mask: url(../assets/icons.svg) -100% -100% no-repeat;
     width: 25px;
   }
 }
 
 .iconButtonView::before {
-  background-position: 0 0;
+  -webkit-mask-position: 0 0;
+  mask-position: 0 0;
 }
 
 .iconButtonConfig::before {
-  background-position: -25px 0;
+  -webkit-mask-position: -25px 0;
+  mask-position: -25px 0;
 }
 
 .iconButtonErase::before,
 .iconButtonAdd::before {
-  background-position: -50px 0;
+  -webkit-mask-position: -50px 0;
+  mask-position: -50px 0;
 }
 
 .iconButtonDelete::before {
-  background-position: -75px 0;
+  -webkit-mask-position: -75px 0;
+  mask-position: -75px 0;
 }
 
 @keyframes add-breath {