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))); } }