From a87b41d6c214c065b17ede75f5e9c1616605ca95 Mon Sep 17 00:00:00 2001
From: aronmal <aron@mal-noh.de>
Date: Sat, 14 Jan 2023 16:28:40 +0100
Subject: [PATCH] Tiny general style compatibility

---
 leaky-ships/styles/App.scss            |  2 --
 leaky-ships/styles/mixins/effects.scss | 32 +++++++++++++-------------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/leaky-ships/styles/App.scss b/leaky-ships/styles/App.scss
index 0526b17..f16d035 100644
--- a/leaky-ships/styles/App.scss
+++ b/leaky-ships/styles/App.scss
@@ -7,8 +7,6 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 * {
diff --git a/leaky-ships/styles/mixins/effects.scss b/leaky-ships/styles/mixins/effects.scss
index e386fa9..28598d0 100644
--- a/leaky-ships/styles/mixins/effects.scss
+++ b/leaky-ships/styles/mixins/effects.scss
@@ -18,37 +18,37 @@
 }
 @mixin gradient-edge {
     &.left-top-corner {
-    -webkit-mask-image: -webkit-gradient(linear, right bottom, 
-        left top, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
+        mask-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0)));
+        -webkit-mask-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0)));
     }
     &.right-top-corner {
-    -webkit-mask-image: -webkit-gradient(linear, left bottom, 
-        right top, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
+        mask-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0)));
+        -webkit-mask-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0)));
     }
     &.left-bottom-corner {
-    -webkit-mask-image: -webkit-gradient(linear, right top, 
-        left bottom, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
+        mask-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0)));
+        -webkit-mask-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0)));
     }
     &.right-bottom-corner {
-    -webkit-mask-image: -webkit-gradient(linear, left top, 
-        right bottom, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
+        mask-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0)));
+        -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(0, 0, 0, 1)), color-stop(0.5, rgba(0, 0, 0, 0)));
     }
 
     &.left {
-    -webkit-mask-image: -webkit-gradient(linear, right top, 
-        left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
+        mask-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
+        -webkit-mask-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
     }
     &.right {
-    -webkit-mask-image: -webkit-gradient(linear, left top, 
-        right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
+        mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
+        -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
     }
     &.top {
-    -webkit-mask-image: -webkit-gradient(linear, left bottom, 
-        left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
+        mask-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
+        -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
     }
     &.bottom {
-    -webkit-mask-image: -webkit-gradient(linear, left top, 
-        left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
+        mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
+        -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
     }
 }