From de120ff82a4eb20cd63971bd1e1b9fab91bf9218 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 12 Jul 2020 18:36:14 +0900
Subject: [PATCH] fix(client): Show shadow

---
 src/client/components/url-preview-popup.vue | 2 +-
 src/client/components/user-preview.vue      | 2 +-
 src/client/style.scss                       | 4 ++++
 src/client/themes/_dark.json5               | 2 +-
 src/client/themes/black.json5               | 1 +
 5 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/client/components/url-preview-popup.vue b/src/client/components/url-preview-popup.vue
index 52731296c..6d00d1860 100644
--- a/src/client/components/url-preview-popup.vue
+++ b/src/client/components/url-preview-popup.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="fgmtyycl _panel" :style="{ top: top + 'px', left: left + 'px' }">
+<div class="fgmtyycl _panel _shadow" :style="{ top: top + 'px', left: left + 'px' }">
 	<mk-url-preview :url="url"/>
 </div>
 </template>
diff --git a/src/client/components/user-preview.vue b/src/client/components/user-preview.vue
index 8c8eee2a3..410de6b48 100644
--- a/src/client/components/user-preview.vue
+++ b/src/client/components/user-preview.vue
@@ -1,6 +1,6 @@
 <template>
 <transition name="popup" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
-	<div v-if="show" class="fxxzrfni _panel" ref="content" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
+	<div v-if="show" class="fxxzrfni _panel _shadow" ref="content" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
 		<div class="banner" :style="u.bannerUrl ? `background-image: url(${u.bannerUrl})` : ''"></div>
 		<mk-avatar class="avatar" :user="u" :disable-preview="true"/>
 		<div class="title">
diff --git a/src/client/style.scss b/src/client/style.scss
index 1a3eb09f4..972c38338 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -207,6 +207,10 @@ hr {
 	backdrop-filter: var(--modalBgFilter);
 }
 
+._shadow {
+	box-shadow: 0px 4px 32px var(--shadow) !important;
+}
+
 ._button {
 	appearance: none;
 	padding: 0;
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index 09c1b888f..35d79421c 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -23,7 +23,7 @@
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: 'rgba(0, 0, 0, 0)',
-		shadow: 'rgba(0, 0, 0, 0.1)',
+		shadow: 'rgba(0, 0, 0, 0.3)',
 		header: ':alpha<0.7<@bg',
 		navBg: '@bg',
 		navFg: '@fg',
diff --git a/src/client/themes/black.json5 b/src/client/themes/black.json5
index 063742847..579738f72 100644
--- a/src/client/themes/black.json5
+++ b/src/client/themes/black.json5
@@ -12,6 +12,7 @@
 		panelHeaderBg: '@panel',
 		panelHeaderDivider: '@divider',
 		panelBorder: '@divider',
+		shadow: 'rgba(255, 255, 255, 0.05)',
 		modalBg: 'rgba(255, 255, 255, 0.1)',
 		messageBg: '#1d1d1d',
 		deckColumnBorder: '@divider',