Add masks in app

Author: Warinyourself

src/assets/images/masks/balance.svg

@@ -35,6 +35,9 @@ export default class BackgroundImage extends Vue {
   render(h: CreateElement) {
     const body = h(components[this.theme.component ?? 'random'])
 
-    return <div class='background-image' key={ this.theme.name }> { body } </div>
+    return <div class='background-image' key={ this.theme.name }>
+      <div class="mask-background"></div>
+      { body }
+    </div>
   }
 }

src/assets/images/masks/main.svg

@@ -12,4 +12,7 @@
   transform translate(-50%, -50%)
 
 .transition-group
-  position: relative
+  position: relative
+
+.background-image
+  mask url('../assets/images/masks/main.svg') 50% 50% / 100% 80%  no-repeat border-box

src/components/base/BackgroundImage.tsx

@@ -7,7 +7,7 @@
 
 :root
   --color-active #FA076C
-  --color-bg #13111C
+  --color-bg #22233D
   --color-green #91e60a
   --color-blue #04ded4
   --color-unfocus rgba(255, 255, 255, .5)