🎨

src/client/app/mobile/views/components/notify.vue

@@ -1,7 +1,9 @@
 <template>
 <div class="mk-notify">
+	<div>
 		<mk-notification-preview :notification="notification"/>
 	</div>
+</div>
 </template>
 
 <script lang="ts">
@@ -22,7 +24,7 @@ export default Vue.extend({
 			setTimeout(() => {
 				anime({
 					targets: this.$el,
-					bottom: '-64px',
+					bottom: '-72px',
 					duration: 500,
 					easing: 'easeOutQuad',
 					complete: () => this.$destroy()
@@ -37,13 +39,22 @@ export default Vue.extend({
 .mk-notify
 	position fixed
 	z-index 1024
-	bottom -64px
+	bottom -72px
 	left 0
+	right 0
 	width 100%
-	height 64px
+	max-width 500px
+	height 72px
+	margin 0 auto
+	padding 8px
 	pointer-events none
+	font-size 80%
+
+	> div
+		height 100%
 		-webkit-backdrop-filter blur(2px)
 		backdrop-filter blur(2px)
 		background-color rgba(#000, 0.5)
+		border-radius 6px
 
 </style>