feat(client): blur effect for modal

5 files changed, 7 insertions, 42 deletions

diff --git a/src/client/components/dialog.vue b/src/client/components/dialog.vue
index 58115b47a2..0ca9a5c69e 100644
--- a/src/client/components/dialog.vue
+++ b/src/client/components/dialog.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-dialog" :class="{ iconOnly }">
 	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg" ref="bg" @click="onBgClick" v-if="show"></div>
+		<div class="bg _modalBg" ref="bg" @click="onBgClick" v-if="show"></div>
 	</transition>
 	<transition :name="$store.state.device.animation ? 'dialog' : ''" appear @after-leave="() => { destroyDom(); }">
 		<div class="main" ref="main" v-if="show">
@@ -245,16 +245,6 @@ export default Vue.extend({
 		width: initial;
 	}
 
-	> .bg {
-		display: block;
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(0,0,0,0.7);
-	}
-
 	> .main {
 		display: block;
 		position: fixed;
diff --git a/src/client/components/modal.vue b/src/client/components/modal.vue
index f941d4d503..6ae46d451e 100644
--- a/src/client/components/modal.vue
+++ b/src/client/components/modal.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-modal" v-hotkey.global="keymap">
 	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg" ref="bg" v-if="show" @click="canClose ? close() : () => {}"></div>
+		<div class="bg _modalBg" ref="bg" v-if="show" @click="canClose ? close() : () => {}"></div>
 	</transition>
 	<transition :name="$store.state.device.animation ? 'modal' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
 		<div class="content" ref="content" v-if="show" @click.self="canClose ? close() : () => {}"><slot></slot></div>
@@ -60,13 +60,7 @@ export default Vue.extend({
 
 .mk-modal {
 	> .bg {
-		position: fixed;
-		top: 0;
-		left: 0;
 		z-index: 10000;
-		width: 100%;
-		height: 100%;
-		background: var(--modalBg)
 	}
 
 	> .content {
diff --git a/src/client/components/popup.vue b/src/client/components/popup.vue
index 0af83162e4..6d27ff7ae0 100644
--- a/src/client/components/popup.vue
+++ b/src/client/components/popup.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-popup" v-hotkey.global="keymap">
 	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg" ref="bg" @click="close()" v-if="show"></div>
+		<div class="bg _modalBg" ref="bg" @click="close()" v-if="show"></div>
 	</transition>
 	<transition :name="$store.state.device.animation ? 'popup' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
 		<div class="content" :class="{ fixed }" ref="content" v-if="show" :style="{ width: width ? width + 'px' : 'auto' }"><slot></slot></div>
@@ -128,13 +128,7 @@ export default Vue.extend({
 
 .mk-popup {
 	> .bg {
-		position: fixed;
-		top: 0;
-		left: 0;
 		z-index: 10000;
-		width: 100%;
-		height: 100%;
-		background: var(--modalBg)
 	}
 
 	> .content {
diff --git a/src/client/components/post-form-dialog.vue b/src/client/components/post-form-dialog.vue
index 9cb527af23..14227fec5d 100644
--- a/src/client/components/post-form-dialog.vue
+++ b/src/client/components/post-form-dialog.vue
@@ -1,7 +1,7 @@
 <template>
-<div class="ulveipglmagnxfgvitaxyszerjwiqmwl">
+<div class="ulveipgl">
 	<transition :name="$store.state.device.animation ? 'form-fade' : ''" appear @after-leave="$emit('closed');">
-		<div class="bg" ref="bg" v-if="show" @click="close()"></div>
+		<div class="bg _modalBg" ref="bg" v-if="show" @click="close()"></div>
 	</transition>
 	<div class="main" ref="main" @click.self="close()" @keydown="onKeydown">
 		<transition :name="$store.state.device.animation ? 'form' : ''" appear
@@ -119,16 +119,9 @@ export default Vue.extend({
 	opacity: 0;
 }
 
-.ulveipglmagnxfgvitaxyszerjwiqmwl {
+.ulveipgl {
 	> .bg {
-		display: block;
-		position: fixed;
 		z-index: 10000;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(#000, 0.7);
 	}
 
 	> .main {
diff --git a/src/client/components/sidebar.vue b/src/client/components/sidebar.vue
index 975dccb04d..e926b4447e 100644
--- a/src/client/components/sidebar.vue
+++ b/src/client/components/sidebar.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mvcprjjd">
 	<transition name="nav-back">
-		<div class="nav-back"
+		<div class="nav-back _modalBg"
 			v-if="showing"
 			@click="showing = false"
 			@touchstart="showing = false"
@@ -320,13 +320,7 @@ export default Vue.extend({
 	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
 
 	> .nav-back {
-		position: fixed;
-		top: 0;
-		left: 0;
 		z-index: 1001;
-		width: 100%;
-		height: 100%;
-		background: var(--modalBg);
 	}
 
 	> .nav {