From 7fda726bbeda6260f47f773205f7bd522cad5a63 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 14 Apr 2021 14:12:29 +0900
Subject: [PATCH] Tweak UI

---
 src/client/components/notifications.vue |  1 +
 src/client/components/ui/folder.vue     |  6 +++++-
 src/client/components/user-list.vue     |  2 +-
 src/client/pages/explore.vue            | 12 +++++++-----
 src/client/widgets/notifications.vue    |  2 +-
 5 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index 01b3ae439..baafa86f4 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -1,5 +1,6 @@
 <template>
 <div class="mfcuwfyp _noGap_">
+	<div class="_magnet"></div>
 	<XList class="notifications" :items="items" v-slot="{ item: notification }">
 		<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
 		<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
diff --git a/src/client/components/ui/folder.vue b/src/client/components/ui/folder.vue
index 6a163130c..aee3c0cca 100644
--- a/src/client/components/ui/folder.vue
+++ b/src/client/components/ui/folder.vue
@@ -101,6 +101,8 @@ export default defineComponent({
 		z-index: 10;
 		position: sticky;
 		top: var(--stickyTop, 0px);
+		background: var(--X17);
+		-webkit-backdrop-filter: blur(8px);
 		backdrop-filter: blur(20px);
 
 		> .title {
@@ -138,6 +140,8 @@ export default defineComponent({
 }
 
 ._flat_ .ssazuxis {
-	margin: var(--margin);
+	> header {
+		padding: 0 16px;
+	}
 }
 </style>
diff --git a/src/client/components/user-list.vue b/src/client/components/user-list.vue
index 418c4127d..38d9df63b 100644
--- a/src/client/components/user-list.vue
+++ b/src/client/components/user-list.vue
@@ -1,7 +1,7 @@
 <template>
 <MkError v-if="error" @retry="init()"/>
 
-<div v-else class="efvhhmdq">
+<div v-else class="efvhhmdq _isolated">
 	<div class="no-users" v-if="empty">
 		<p>{{ $ts.noUsers }}</p>
 	</div>
diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue
index 50106f458..7e0acaddf 100644
--- a/src/client/pages/explore.vue
+++ b/src/client/pages/explore.vue
@@ -1,11 +1,13 @@
 <template>
 <div class="lznhrdub _root">
-	<div class="_section">
-		<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $ts.searchUser }}</span></MkInput>
+	<div>
+		<div class="_isolated">
+			<MkInput v-model:value="query" :debounce="true" type="search"><template #icon><Fa :icon="faSearch"/></template><span>{{ $ts.searchUser }}</span></MkInput>
+		</div>
 
 		<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
 
-		<div class="localfedi7 _panel _gap" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
+		<div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
 			<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
 			<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
 		</div>
@@ -29,8 +31,8 @@
 			</MkFolder>
 		</template>
 	</div>
-	<div class="_section">
-		<div class="localfedi7 _panel _gap" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }">
+	<div>
+		<div class="localfedi7 _block _isolated" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }">
 			<header><span>{{ $ts.exploreFediverse }}</span></header>
 		</div>
 
diff --git a/src/client/widgets/notifications.vue b/src/client/widgets/notifications.vue
index b4c220186..046556ef1 100644
--- a/src/client/widgets/notifications.vue
+++ b/src/client/widgets/notifications.vue
@@ -3,7 +3,7 @@
 	<template #header><Fa :icon="faBell"/>{{ $ts.notifications }}</template>
 	<template #func><button @click="configure()" class="_button"><Fa :icon="faCog"/></button></template>
 
-	<div>
+	<div class="_flat_">
 		<XNotifications :include-types="props.includingTypes"/>
 	</div>
 </MkContainer>