From fb1b0394a4b8f12f8dbaa37f002a25ff9a5ebffc Mon Sep 17 00:00:00 2001
From: sim1222 <kokt@sim1222.com>
Date: Wed, 7 Dec 2022 21:53:37 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/components/MkAbuseReport.vue   |    2 +-
 .../client/src/components/MkAutocomplete.vue  |    2 +-
 .../src/components/MkChannelPreview.vue       |    2 +-
 .../client/src/components/MkContainer.vue     |    2 +-
 .../src/components/MkEmojiPickerDialog.vue    |    2 +-
 .../src/components/MkGalleryPostPreview.vue   |    2 +-
 .../client/src/components/MkLaunchPad.vue     |    2 +-
 packages/client/src/components/MkMenu.vue     |    2 +-
 packages/client/src/components/MkNote.vue     |    4 +
 .../client/src/components/MkNoteDetailed.vue  |    2 +-
 .../client/src/components/MkNotifications.vue |    2 +-
 packages/client/src/components/MkPostForm.vue |   70 +-
 .../src/components/MkUrlPreviewPopup.vue      |    2 +-
 packages/client/src/components/MkUserInfo.vue |    8 +-
 .../client/src/components/MkUserPreview.vue   |    2 +-
 .../src/components/MkVisibilityPicker.vue     |    2 +-
 .../client/src/components/global/MkEmoji.vue  |    2 +
 packages/client/src/pages/admin/ads.vue       |    2 +-
 packages/client/src/pages/admin/emojis.vue    |    4 +-
 packages/client/src/pages/admin/overview.vue  |   18 +-
 packages/client/src/pages/admin/relays.vue    |    2 +-
 packages/client/src/pages/channel.vue         |    8 +-
 packages/client/src/pages/clip.vue            |    4 +-
 packages/client/src/pages/follow-requests.vue |    2 +-
 packages/client/src/pages/my-clips/index.vue  |    2 +-
 packages/client/src/pages/my-lists/index.vue  |    2 +-
 packages/client/src/pages/my-lists/list.vue   |    2 +-
 packages/client/src/pages/note.vue            |    2 +-
 packages/client/src/pages/scratchpad.vue      |    2 +-
 .../client/src/pages/settings/accounts.vue    |    2 +-
 packages/client/src/pages/settings/apps.vue   |    2 +-
 packages/client/src/pages/settings/plugin.vue |    2 +-
 .../pages/settings/preferences-backups.vue    |    6 +-
 packages/client/src/pages/settings/theme.vue  |    2 +-
 packages/client/src/pages/share.vue           |    2 +-
 packages/client/src/pages/user/clips.vue      |    2 +-
 packages/client/src/pages/user/reactions.vue  |    2 +-
 .../client/src/pages/welcome.entrance.c.vue   |    2 +-
 .../client/src/pages/welcome.timeline.vue     |    2 +-
 packages/client/src/style.scss                |    9 +-
 .../client/src/ui/_common_old/sidebar.vue     | 1052 ++++++++---------
 packages/client/src/ui/deck.vue               |    2 +-
 packages/client/src/ui/deckold/column.vue     |    4 +-
 packages/client/src/widgets/post-form.vue     |    2 +-
 packages/client/src/widgets/slideshow.vue     |    2 +-
 45 files changed, 642 insertions(+), 613 deletions(-)

diff --git a/packages/client/src/components/MkAbuseReport.vue b/packages/client/src/components/MkAbuseReport.vue
index 9a3464b64..f8fd901f3 100644
--- a/packages/client/src/components/MkAbuseReport.vue
+++ b/packages/client/src/components/MkAbuseReport.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="bcekxzvu _gap _panel">
+<div class="bcekxzvu _gap _panel blur">
 	<div class="target">
 		<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`">
 			<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true" :disable-link="true"/>
diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
index 144281e3c..7e4146b53 100644
--- a/packages/client/src/components/MkAutocomplete.vue
+++ b/packages/client/src/components/MkAutocomplete.vue
@@ -1,5 +1,5 @@
 <template>
-<div ref="rootEl" class="swhvrteh _popup _shadow" :style="{ zIndex }" @contextmenu.prevent="() => {}">
+<div ref="rootEl" class="swhvrteh _popup blur _shadow" :style="{ zIndex }" @contextmenu.prevent="() => {}">
 	<ol v-if="type === 'user'" ref="suggests" class="users">
 		<li v-for="user in users" tabindex="-1" class="user" @click="complete(type, user)" @keydown="onKeydown">
 			<img class="avatar" :src="user.avatarUrl"/>
diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue
index dd3794a65..4ddf9b51e 100644
--- a/packages/client/src/components/MkChannelPreview.vue
+++ b/packages/client/src/components/MkChannelPreview.vue
@@ -1,5 +1,5 @@
 <template>
-<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
+<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel blur" tabindex="-1">
 	<div class="banner" :style="bannerStyle">
 		<div class="fade"></div>
 		<div class="name"><i class="fas fa-satellite-dish"></i> {{ channel.name }}</div>
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index 4be59adc2..73a4b6067 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
+<div v-size="{ max: [380] }" class="ukygtjoj _panel blur" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
 	<header v-if="showHeader" ref="header">
 		<div class="title"><slot name="header"></slot></div>
 		<div class="sub">
diff --git a/packages/client/src/components/MkEmojiPickerDialog.vue b/packages/client/src/components/MkEmojiPickerDialog.vue
index fdec2b169..61f484bd3 100644
--- a/packages/client/src/components/MkEmojiPickerDialog.vue
+++ b/packages/client/src/components/MkEmojiPickerDialog.vue
@@ -14,7 +14,7 @@
 >
 	<MkEmojiPicker
 		ref="picker"
-		class="ryghynhb _popup _shadow"
+		class="ryghynhb _popup blur _shadow"
 		:class="{ drawer: type === 'drawer' }"
 		:show-pinned="showPinned"
 		:as-reaction-picker="asReactionPicker"
diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue
index a133f6431..0c2af1c00 100644
--- a/packages/client/src/components/MkGalleryPostPreview.vue
+++ b/packages/client/src/components/MkGalleryPostPreview.vue
@@ -1,5 +1,5 @@
 <template>
-<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
+<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel blur" tabindex="-1">
 	<div class="thumbnail">
 		<ImgWithBlurhash class="img" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/>
 	</div>
diff --git a/packages/client/src/components/MkLaunchPad.vue b/packages/client/src/components/MkLaunchPad.vue
index 19283178c..ba2f61818 100644
--- a/packages/client/src/components/MkLaunchPad.vue
+++ b/packages/client/src/components/MkLaunchPad.vue
@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :anchor="anchor" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
-	<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
+	<div class="szkkfdyq _popup blur _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
 		<div class="main">
 			<template v-for="item in items">
 				<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index 578e736c8..d7385542f 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -2,7 +2,7 @@
 <div>
 	<div
 		ref="itemsEl" v-hotkey="keymap"
-		class="rrevdjwt _popup _shadow"
+		class="rrevdjwt _popup blur _shadow"
 		:class="{ center: align === 'center', asDrawer }"
 		:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
 		@contextmenu.self="e => e.preventDefault()"
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 0f6909fe5..a9ebe5b52 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -651,4 +651,8 @@ function readPromo() {
 	text-align: center;
 	opacity: 0.7;
 }
+
+.selecting {
+	
+}
 </style>
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index faee101b9..b53d75955 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -102,7 +102,7 @@
 	</article>
 	<MkNoteSub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
 </div>
-<div v-else class="_panel muted" @click="muted = false">
+<div v-else class="_panel blur muted" @click="muted = false">
 	<I18n :src="i18n.ts.userSaysSomething" tag="small">
 		<template #name>
 			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
diff --git a/packages/client/src/components/MkNotifications.vue b/packages/client/src/components/MkNotifications.vue
index 0e1cc0674..4bb1b51ee 100644
--- a/packages/client/src/components/MkNotifications.vue
+++ b/packages/client/src/components/MkNotifications.vue
@@ -10,7 +10,7 @@
 	<template #default="{ items: notifications }">
 		<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
 			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
-			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
+			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel blur notification"/>
 		</XList>
 	</template>
 </MkPagination>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 37746aebf..6fafb17f2 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -41,7 +41,11 @@
 		</div>
 		<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
 		<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
-		<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
+		<div>
+			<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
+			<i class="caret"></i>
+		</div>
+		<div ref="mask" class="mask"></div>
 		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
 		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 		<XPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
@@ -869,28 +873,50 @@ onMounted(() => {
 			margin: 0 20px 16px 20px;
 		}
 
-		> .cw,
-		> .hashtags,
-		> .text {
-			display: block;
-			box-sizing: border-box;
-			padding: 0 24px;
-			margin: 0;
-			width: 100%;
+		> div {
+			> .cw,
+			> .hashtags,
+			> .text {
+				display: block;
+				box-sizing: border-box;
+				padding: 0 24px;
+				margin: 0;
+				width: 100%;
+				font-size: 16px;
+				border: none;
+				border-radius: 0;
+				background: transparent;
+				color: var(--fg);
+				font-family: inherit;
+
+				&:focus {
+					outline: none;
+				}
+
+				&:disabled {
+					opacity: 0.5;
+				}
+			}
+			> .caret {
+				position: absolute;
+				top: 0;
+				right: 0;
+				width: 2px;
+				height: 1rem;
+				border: none;
+				border-radius: 1px;
+				background-color: #0c7ac9;
+				font-size: 16px;
+			}
+		}
+
+		> .mask {
+			visibility: hidden;
+			width: auto;
+			display: inline-block;
+			position: fixed;
+			overflow: auto;
 			font-size: 16px;
-			border: none;
-			border-radius: 0;
-			background: transparent;
-			color: var(--fg);
-			font-family: inherit;
-
-			&:focus {
-				outline: none;
-			}
-
-			&:disabled {
-				opacity: 0.5;
-			}
 		}
 
 		> .cw {
diff --git a/packages/client/src/components/MkUrlPreviewPopup.vue b/packages/client/src/components/MkUrlPreviewPopup.vue
index f343c6d8a..ac940f7d0 100644
--- a/packages/client/src/components/MkUrlPreviewPopup.vue
+++ b/packages/client/src/components/MkUrlPreviewPopup.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
 	<transition :name="$store.state.animation ? 'zoom' : ''" @after-leave="emit('closed')">
-		<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/>
+		<MkUrlPreview v-if="showing" class="_popup blur _shadow" :url="url"/>
 	</transition>
 </div>
 </template>
diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index 036cbea30..28206789d 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="_panel vjnjpkug">
+<div class="_panel blur vjnjpkug">
 	<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
 	<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 	<div class="title">
@@ -82,7 +82,7 @@ defineProps<{
 			opacity: 0.7;
 		}
 	}
-	
+
 	> .followed {
 		position: absolute;
 		top: 12px;
@@ -93,7 +93,7 @@ defineProps<{
 		font-size: 0.7em;
 		border-radius: 6px;
 	}
-	
+
 	> .description {
 		padding: 16px;
 		font-size: 0.8em;
@@ -102,7 +102,7 @@ defineProps<{
 		> .mfm {
 			display: -webkit-box;
 			-webkit-line-clamp: 3;
-			-webkit-box-orient: vertical;  
+			-webkit-box-orient: vertical;
 			overflow: hidden;
 		}
 	}
diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue
index 08bb725f1..4d2043142 100644
--- a/packages/client/src/components/MkUserPreview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -1,6 +1,6 @@
 <template>
 <transition :name="$store.state.animation ? 'popup' : ''" appear @after-leave="emit('closed')">
-	<div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
+	<div v-if="showing" class="fxxzrfni _popup blur _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
 		<div v-if="user != null" class="info">
 			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
 				<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index ecc022eca..30aff2e29 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
-	<div class="gqyayizv _popup">
+	<div class="gqyayizv _popup blur">
 		<button key="public" class="_button" :class="{ active: v === 'public' }" data-index="1" @click="choose('public')">
 			<div><i class="fas fa-globe"></i></div>
 			<div>
diff --git a/packages/client/src/components/global/MkEmoji.vue b/packages/client/src/components/global/MkEmoji.vue
index ff113ae2a..38842547c 100644
--- a/packages/client/src/components/global/MkEmoji.vue
+++ b/packages/client/src/components/global/MkEmoji.vue
@@ -36,6 +36,8 @@ const url = char.value ?
 		defaultStore.state.mediaProxy + '?url=' + imageSrc
 		:
 		imageSrc;
+console.log(imageSrc);
+console.log(url);
 
 const alt = computed(() => customEmoji.value ? `:${customEmoji.value.name}:` : char.value);
 </script>
diff --git a/packages/client/src/pages/admin/ads.vue b/packages/client/src/pages/admin/ads.vue
index 9a28d2ad6..02004a23e 100644
--- a/packages/client/src/pages/admin/ads.vue
+++ b/packages/client/src/pages/admin/ads.vue
@@ -3,7 +3,7 @@
 	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="900">
 		<div class="uqshojas">
-			<div v-for="ad in ads" class="_panel _formRoot ad">
+			<div v-for="ad in ads" class="_panel blur _formRoot ad">
 				<MkAd v-if="ad.url" :specify="ad"/>
 				<MkInput v-model="ad.url" type="url" class="_formBlock">
 					<template #label>URL</template>
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index 8c7a9c0a5..6ee783c1f 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -24,7 +24,7 @@
 						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
 						<template #default="{items}">
 							<div class="ldhfsamy">
-								<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
+								<button v-for="emoji in items" :key="emoji.id" class="emoji _panel blur _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
 									<img :src="emoji.url" class="img" :alt="emoji.name"/>
 									<div class="body">
 										<div class="name _monospace">{{ emoji.name }}</div>
@@ -50,7 +50,7 @@
 						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
 						<template #default="{items}">
 							<div class="ldhfsamy">
-								<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
+								<div v-for="emoji in items" :key="emoji.id" class="emoji _panel blur _button" @click="remoteMenu(emoji, $event)">
 									<img :src="emoji.url" class="img" :alt="emoji.name"/>
 									<div class="body">
 										<div class="name _monospace">{{ emoji.name }}</div>
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index e532a908f..b66bcd24a 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -5,14 +5,14 @@
 			<div v-if="stats" class="container stats">
 				<div class="title">Stats</div>
 				<div class="body">
-					<div class="number _panel">
+					<div class="number _panel blur">
 						<div class="label">Users</div>
 						<div class="value _monospace">
 							{{ number(stats.originalUsersCount) }}
 							<MkNumberDiff v-if="usersComparedToThePrevDay != null" v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"><template #before>(</template><template #after>)</template></MkNumberDiff>
 						</div>
 					</div>
-					<div class="number _panel">
+					<div class="number _panel blur">
 						<div class="label">Notes</div>
 						<div class="value _monospace">
 							{{ number(stats.originalNotesCount) }}
@@ -53,23 +53,23 @@
 			<div class="container env">
 				<div class="title">Enviroment</div>
 				<div class="body">
-					<div class="number _panel">
+					<div class="number _panel blur">
 						<div class="label">Misskey</div>
 						<div class="value _monospace">{{ version }}</div>
 					</div>
-					<div v-if="serverInfo" class="number _panel">
+					<div v-if="serverInfo" class="number _panel blur">
 						<div class="label">Node.js</div>
 						<div class="value _monospace">{{ serverInfo.node }}</div>
 					</div>
-					<div v-if="serverInfo" class="number _panel">
+					<div v-if="serverInfo" class="number _panel blur">
 						<div class="label">PostgreSQL</div>
 						<div class="value _monospace">{{ serverInfo.psql }}</div>
 					</div>
-					<div v-if="serverInfo" class="number _panel">
+					<div v-if="serverInfo" class="number _panel blur">
 						<div class="label">Redis</div>
 						<div class="value _monospace">{{ serverInfo.redis }}</div>
 					</div>
-					<div class="number _panel">
+					<div class="number _panel blur">
 						<div class="label">Vue</div>
 						<div class="value _monospace">{{ vueVersion }}</div>
 					</div>
@@ -92,14 +92,14 @@
 			<div v-if="stats" class="container federationStats">
 				<div class="title">Federation</div>
 				<div class="body">
-					<div class="number _panel">
+					<div class="number _panel blur">
 						<div class="label">Sub</div>
 						<div class="value _monospace">
 							{{ number(federationSubActive) }}
 							<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationSubActiveDiff"><template #before>(</template><template #after>)</template></MkNumberDiff>
 						</div>
 					</div>
-					<div class="number _panel">
+					<div class="number _panel blur">
 						<div class="label">Pub</div>
 						<div class="value _monospace">
 							{{ number(federationPubActive) }}
diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue
index e6f7f4ead..4dbfbda9e 100644
--- a/packages/client/src/pages/admin/relays.vue
+++ b/packages/client/src/pages/admin/relays.vue
@@ -2,7 +2,7 @@
 <MkStickyContainer>
 	<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="800">
-		<div v-for="relay in relays" :key="relay.inbox" class="relaycxt _panel _block" style="padding: 16px;">
+		<div v-for="relay in relays" :key="relay.inbox" class="relaycxt _panel blur _block" style="padding: 16px;">
 			<div>{{ relay.inbox }}</div>
 			<div class="status">
 				<i v-if="relay.status === 'accepted'" class="fas fa-check icon accepted"></i>
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index 380c3efc8..801f5a054 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -3,7 +3,7 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
 		<div v-if="channel">
-			<div class="wpgynlbz _panel _gap" :class="{ hide: !showBanner }">
+			<div class="wpgynlbz _panel blur _gap" :class="{ hide: !showBanner }">
 				<XChannelFollowButton :channel="channel" :full="true" class="subscribe"/>
 				<button class="_button toggle" @click="() => showBanner = !showBanner">
 					<template v-if="showBanner"><i class="fas fa-angle-up"></i></template>
@@ -23,7 +23,7 @@
 				</div>
 			</div>
 
-			<XPostForm v-if="$i" :channel="channel" class="post-form _panel _gap" fixed/>
+			<XPostForm v-if="$i" :channel="channel" class="post-form _panel blur _gap" fixed/>
 
 			<XTimeline :key="channelId" class="_gap" src="channel" :channel="channelId" @before="before" @after="after"/>
 		</div>
@@ -105,12 +105,12 @@ definePageMetadata(computed(() => channel ? {
 		color: #fff;
 		background: rgba(0, 0, 0, 0.5);
 		border-radius: 100%;
-		
+
 		> i {
 			vertical-align: middle;
 		}
 	}
-	
+
 	> .banner {
 		position: relative;
 		height: 200px;
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index 5b56651bd..4e7af359e 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -3,7 +3,7 @@
 	<template #header><MkPageHeader :actions="headerActions"/></template>
 		<MkSpacer :content-max="800">
 		<div v-if="clip">
-			<div class="okzinsic _panel">
+			<div class="okzinsic _panel blur">
 				<div v-if="clip.description" class="description">
 					<Mfm :text="clip.description" :is-note="false" :i="$i"/>
 				</div>
@@ -48,7 +48,7 @@ watch(() => props.clipId, async () => {
 	});
 }, {
 	immediate: true,
-}); 
+});
 
 provide('currentClipPage', $$(clip));
 
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index 82d716426..9c80a30d6 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -11,7 +11,7 @@
 			</template>
 			<template #default="{items}">
 				<div class="mk-follow-requests">
-					<div v-for="req in items" :key="req.id" class="user _panel">
+					<div v-for="req in items" :key="req.id" class="user _panel blur">
 						<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
 						<div class="body">
 							<div class="name">
diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue
index 68330d6db..646cc593c 100644
--- a/packages/client/src/pages/my-clips/index.vue
+++ b/packages/client/src/pages/my-clips/index.vue
@@ -6,7 +6,7 @@
 			<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
 
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="list">
-				<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
+				<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel blur _gap">
 					<b>{{ item.name }}</b>
 					<div v-if="item.description" class="description">{{ item.description }}</div>
 				</MkA>
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index 9af7c0d10..fde811e7b 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -6,7 +6,7 @@
 			<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ i18n.ts.createList }}</MkButton>
 
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists _content">
-				<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
+				<MkA v-for="list in items" :key="list.id" class="list _panel blur" :to="`/my/lists/${ list.id }`">
 					<div class="name">{{ list.name }}</div>
 					<MkAvatars :user-ids="list.userIds"/>
 				</MkA>
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
index d90453526..648bac2f2 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/packages/client/src/pages/my-lists/list.vue
@@ -18,7 +18,7 @@
 					<div class="_title">{{ i18n.ts.members }}</div>
 					<div class="_content">
 						<div class="users">
-							<div v-for="user in users" :key="user.id" class="user _panel">
+							<div v-for="user in users" :key="user.id" class="user _panel blur">
 								<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
 								<div class="body">
 									<MkUserName :user="user" class="name"/>
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index 6509cb306..b469804fc 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -17,7 +17,7 @@
 						</div>
 						<div v-if="clips && clips.length > 0" class="_content clips _gap">
 							<div class="title">{{ i18n.ts.clip }}</div>
-							<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
+							<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel blur _gap">
 								<b>{{ item.name }}</b>
 								<div v-if="item.description" class="description">{{ item.description }}</div>
 								<div class="user">
diff --git a/packages/client/src/pages/scratchpad.vue b/packages/client/src/pages/scratchpad.vue
index 12b5d78b2..96a4caf4c 100644
--- a/packages/client/src/pages/scratchpad.vue
+++ b/packages/client/src/pages/scratchpad.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="iltifgqe">
-	<div class="editor _panel _gap">
+	<div class="editor _panel blur _gap">
 		<PrismEditor v-model="code" class="_code code" :highlight="highlighter" :line-numbers="false"/>
 		<MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="fas fa-play"></i></MkButton>
 	</div>
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index e16931a9c..d648a9bca 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -3,7 +3,7 @@
 	<FormSuspense :p="init">
 		<FormButton primary @click="addAccount"><i class="fas fa-plus"></i> {{ i18n.ts.addAccount }}</FormButton>
 
-		<div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)">
+		<div v-for="account in accounts" :key="account.id" class="_panel blur _button lcjjdxlm" @click="menu(account, $event)">
 			<div class="avatar">
 				<MkAvatar :user="account" class="avatar"/>
 			</div>
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index 8b345c8e9..0fdccbf48 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -8,7 +8,7 @@
 			</div>
 		</template>
 		<template #default="{items}">
-			<div v-for="token in items" :key="token.id" class="_panel bfomjevm">
+			<div v-for="token in items" :key="token.id" class="_panel blur bfomjevm">
 				<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
 				<div class="body">
 					<div class="name">{{ token.name }}</div>
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index 8ce6fe444..4faaec40f 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -4,7 +4,7 @@
 
 	<FormSection>
 		<template #label>{{ i18n.ts.manage }}</template>
-		<div v-for="plugin in plugins" :key="plugin.id" class="_formBlock _panel" style="padding: 20px;">
+		<div v-for="plugin in plugins" :key="plugin.id" class="_formBlock _panel blur" style="padding: 20px;">
 			<span style="display: flex;"><b>{{ plugin.name }}</b><span style="margin-left: auto;">v{{ plugin.version }}</span></span>
 
 			<FormSwitch class="_formBlock" :model-value="plugin.active" @update:modelValue="changeActive(plugin, $event)">{{ i18n.ts.makeActive }}</FormSwitch>
diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue
index fac67185b..be12f93c1 100644
--- a/packages/client/src/pages/settings/preferences-backups.vue
+++ b/packages/client/src/pages/settings/preferences-backups.vue
@@ -11,7 +11,7 @@
 			<div
 				v-for="(profile, id) in profiles"
 				:key="id"
-				class="_formBlock _panel"
+				class="_formBlock _panel blur"
 				:class="$style.profile"
 				@click="$event => menu($event, id)"
 				@contextmenu.prevent.stop="$event => menu($event, id)"
@@ -139,7 +139,7 @@ function validate(profile: unknown): void {
 
 	if (!profile.name) throw new Error('Missing required prop: name');
 	if (!profile.misskeyVersion) throw new Error('Missing required prop: misskeyVersion');
-	
+
 	// Check if createdAt and updatedAt is Date
 	// https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
 	if (!profile.createdAt || Number.isNaN(new Date(profile.createdAt).getTime())) throw new Error('createdAt is falsy or not Date');
@@ -268,7 +268,7 @@ async function applyProfile(id: string): Promise<void> {
 			defaultStore.set(key, settings.hot[key]);
 		}
 	}
-	
+
 	// coldDeviceStorage
 	for (const key of coldDeviceStorageSaveKeys) {
 		if (settings.cold[key] !== undefined) {
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 6571a881a..cd144061c 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_formRoot rsljpzjq">
-	<div v-adaptive-border class="rfqxtzch _panel _formBlock">
+	<div v-adaptive-border class="rfqxtzch _panel blur _formBlock">
 		<div class="toggle">
 			<div class="toggleWrapper">
 				<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
diff --git a/packages/client/src/pages/share.vue b/packages/client/src/pages/share.vue
index 69d22ed63..7278471d9 100644
--- a/packages/client/src/pages/share.vue
+++ b/packages/client/src/pages/share.vue
@@ -13,7 +13,7 @@
 			:reply="reply"
 			:renote="renote"
 			:initial-visible-users="visibleUsers"
-			class="_panel"
+			class="_panel blur"
 			@posted="state = 'posted'"
 		/>
 		<MkButton v-else-if="state === 'posted'" primary class="close" @click="close()">{{ i18n.ts.close }}</MkButton>
diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue
index 50a5d4b81..5fa9dbc59 100644
--- a/packages/client/src/pages/user/clips.vue
+++ b/packages/client/src/pages/user/clips.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
+		<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel blur _gap">
 			<b>{{ item.name }}</b>
 			<div v-if="item.description" class="description">{{ item.description }}</div>
 		</MkA>
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index 7e84e100a..d383157c9 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
+		<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel blur _gap afdcfbfb">
 			<div class="header">
 				<MkAvatar class="avatar" :user="user"/>
 				<MkReactionIcon class="reaction" :reaction="item.type" :custom-emojis="item.note.emojis" :no-style="true"/>
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index e69f7949f..a517cc81b 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -12,7 +12,7 @@
 		</div>
 		<div class="main">
 			<img src="/client-assets/misskey.svg" class="misskey"/>
-			<div class="form _panel">
+			<div class="form _panel blur">
 				<div class="bg">
 					<div class="fade"></div>
 				</div>
diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue
index 162b752d9..550d7d6ac 100644
--- a/packages/client/src/pages/welcome.timeline.vue
+++ b/packages/client/src/pages/welcome.timeline.vue
@@ -2,7 +2,7 @@
 <div class="civpbkhh">
 	<div ref="scroll" class="scrollbox" v-bind:class="{ scroll: isScrolling }">
 		<div v-for="note in notes" class="note">
-			<div class="content _panel">
+			<div class="content _panel blur">
 				<div class="body">
 					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
 					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 68c298dc4..f8a2facb5 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -253,8 +253,6 @@ hr {
 	// background: var(--panel);
 	border-radius: var(--radius);
 	overflow: clip;
-	backdrop-filter: var(--blur, blur(8px));
-	-webkit-backdrop-filter: var(--blur, blur(8px));
 }
 
 ._block {
@@ -336,8 +334,6 @@ hr {
 	background: var(--popup);
 	border-radius: var(--radius);
 	contain: content;
-	-webkit-backdrop-filter: var(--blur, blur(15px));
-	backdrop-filter: var(--blur, blur(15px));
 }
 
 // TODO: 廃止
@@ -563,3 +559,8 @@ hr {
     transform:  scaleX(1.00) scaleY(1.00) ;
   }
 }
+
+.blur {
+	backdrop-filter: var(--blur, blur(15px) saturate(1.3) brightness(1.1));
+	-webkit-backdrop-filter: var(--blur, blur(15px) saturate(1.3) brightness(1.1));
+}
diff --git a/packages/client/src/ui/_common_old/sidebar.vue b/packages/client/src/ui/_common_old/sidebar.vue
index f603b4cca..8aa610cf8 100644
--- a/packages/client/src/ui/_common_old/sidebar.vue
+++ b/packages/client/src/ui/_common_old/sidebar.vue
@@ -1,527 +1,525 @@
-<template>
-<div class="mvcprjjd" :class="{ iconOnly }">
-	<div class="body">
-		<div class="top">
-			<div class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"></div>
-			<button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
-				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			</button>
-		</div>
-		<div class="middle">
-			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="icon fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component
-					:is="navbarItemDef[item].to ? 'MkA' : 'button'"
-					v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
-					v-click-anime
-					v-tooltip.noDelay.right="i18n.ts[navbarItemDef[item].title]"
-					class="item _button"
-					:class="[item, { active: navbarItemDef[item].active }]"
-					active-class="active"
-					:to="navbarItemDef[item].to"
-					v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
-				>
-					<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
-				</component>
-			</template>
-			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.noDelay.right="i18n.ts.controlPanel" class="item" active-class="active" to="/admin">
-				<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
-			</MkA>
-			<button v-click-anime class="item _button" @click="more">
-				<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
-				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
-			</button>
-			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item" active-class="active" to="/settings">
-				<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
-			</MkA>
-		</div>
-		<div class="bottom">
-			<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
-				<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
-			</button>
-			<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
-			</button>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, watch } from 'vue';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { host } from '@/config';
-
-const iconOnly = ref(false);
-
-const menu = computed(() => defaultStore.state.menu);
-const otherMenuItemIndicated = computed(() => {
-	for (const def in navbarItemDef) {
-		if (menu.value.includes(def)) continue;
-		if (navbarItemDef[def].indicated) return true;
-	}
-	return false;
-});
-
-const calcViewState = () => {
-	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
-};
-
-calcViewState();
-
-window.addEventListener('resize', calcViewState);
-
-watch(defaultStore.reactiveState.menuDisplay, () => {
-	calcViewState();
-});
-
-function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
-		withExtraOperation: true,
-	}, ev);
-}
-
-function openInstanceMenu(ev: MouseEvent) {
-	os.popupMenu([{
-		text: instance.name ?? host,
-		type: 'label',
-	}, {
-		type: 'link',
-		text: i18n.ts.instanceInfo,
-		icon: 'fas fa-info-circle',
-		to: '/about',
-	}, {
-		type: 'link',
-		text: i18n.ts.customEmojis,
-		icon: 'fas fa-laugh',
-		to: '/about#emojis',
-	}, {
-		type: 'link',
-		text: i18n.ts.federation,
-		icon: 'fas fa-globe',
-		to: '/about#federation',
-		}, null, {
-			type: 'parent',
-			text: i18n.ts.help,
-			icon: 'fas fa-question-circle',
-			children: [{
-				type: 'link',
-				to: '/mfm-cheat-sheet',
-				text: i18n.ts._mfm.cheatSheet,
-				icon: 'fas fa-code',
-			}, {
-				type: 'link',
-				to: '/scratchpad',
-				text: i18n.ts.scratchpad,
-				icon: 'fas fa-terminal',
-			}, {
-				type: 'link',
-				to: '/api-console',
-				text: 'API Console',
-				icon: 'fas fa-terminal',
-			}, null, {
-				text: i18n.ts.document,
-				icon: 'fas fa-question-circle',
-				action: () => {
-					window.open('https://misskey-hub.net/help.html', '_blank');
-				},
-			}],
-		}, {
-			type: 'link',
-			text: i18n.ts.aboutMisskey,
-			to: '/about-misskey',
-	}], ev.currentTarget ?? ev.target, {
-		align: 'left',
-	});
-}
-
-function more(ev: MouseEvent) {
-	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
-		src: ev.currentTarget ?? ev.target,
-	}, {
-	}, 'closed');
-}
-</script>
-
-<style lang="scss" scoped>
-.mvcprjjd {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$nav-width: 250px;
-	$nav-icon-only-width: 86px;
-	$avatar-size: 32px;
-	$avatar-margin: 8px;
-
-	flex: 0 0 $nav-width;
-	width: $nav-width;
-	box-sizing: border-box;
-
-	> .body {
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: 1001;
-		width: $nav-icon-only-width;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
-		box-sizing: border-box;
-		overflow: auto;
-		overflow-x: clip;
-		background: var(--navBg);
-		contain: strict;
-		display: flex;
-		flex-direction: column;
-		backdrop-filter: var(--blur, blur(8px));
-		-webkit-backdrop-filter: var(--blur, blur(8px));
-	}
-
-	&:not(.iconOnly) {
-		> .body {
-			width: $nav-width;
-
-			> .top {
-				position: sticky;
-				top: 0;
-				z-index: 1;
-				padding: 20px 0;
-				background: var(--X14);
-				-webkit-backdrop-filter: var(--blur, blur(8px));
-				backdrop-filter: var(--blur, blur(8px));
-
-				> .banner {
-					position: absolute;
-					top: 0;
-					left: 0;
-					width: 100%;
-					height: 100%;
-					background-size: cover;
-					background-position: center center;
-					-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-					mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-				}
-
-				> .instance {
-					position: relative;
-					display: block;
-					text-align: center;
-					width: 100%;
-
-					> .icon {
-						display: inline-block;
-						width: 38px;
-						aspect-ratio: 1;
-					}
-				}
-			}
-
-			> .bottom {
-				position: sticky;
-				bottom: 0;
-				padding: 20px 0;
-				background: var(--X14);
-				-webkit-backdrop-filter: var(--blur, blur(8px));
-				backdrop-filter: var(--blur, blur(8px));
-
-				> .post {
-					position: relative;
-					display: block;
-					width: 100%;
-					height: 40px;
-					color: var(--fgOnAccent);
-					font-weight: bold;
-					text-align: left;
-
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 38px);
-						height: 100%;
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-					}
-
-					&:hover, &.active {
-						&:before {
-							background: var(--accentLighten);
-						}
-					}
-
-					> .icon {
-						position: relative;
-						margin-left: 30px;
-						margin-right: 8px;
-						width: 32px;
-					}
-
-					> .text {
-						position: relative;
-					}
-				}
-
-				> .account {
-					position: relative;
-					display: flex;
-					align-items: center;
-					padding-left: 30px;
-					text-overflow: ellipsis;
-					overflow: hidden;
-					white-space: nowrap;
-					width: 100%;
-					text-align: left;
-					box-sizing: border-box;
-					margin-top: 16px;
-
-					> .avatar {
-						position: relative;
-						width: 32px;
-						aspect-ratio: 1;
-						margin-right: 8px;
-					}
-				}
-			}
-
-			> .middle {
-				flex: 1;
-
-				> .divider {
-					margin: 16px 16px;
-					border-top: solid 0.5px var(--divider);
-				}
-
-				> .item {
-					position: relative;
-					display: block;
-					padding-left: 30px;
-					line-height: 2.85rem;
-					text-overflow: ellipsis;
-					overflow: hidden;
-					white-space: nowrap;
-					width: 100%;
-					text-align: left;
-					box-sizing: border-box;
-					color: var(--navFg);
-
-					> .icon {
-						position: relative;
-						width: 32px;
-						margin-right: 8px;
-					}
-
-					> .indicator {
-						position: absolute;
-						top: 0;
-						left: 20px;
-						color: var(--navIndicator);
-						font-size: 8px;
-						animation: blink 1s infinite;
-					}
-
-					> .text {
-						position: relative;
-						font-size: 0.9em;
-					}
-
-					&:hover {
-						text-decoration: none;
-						color: var(--navHoverFg);
-					}
-
-					&.active {
-						color: var(--navActive);
-					}
-
-					&:hover, &.active {
-						color: var(--accent);
-
-						&:before {
-							content: "";
-							display: block;
-							width: calc(100% - 34px);
-							height: 100%;
-							margin: auto;
-							position: absolute;
-							top: 0;
-							left: 0;
-							right: 0;
-							bottom: 0;
-							border-radius: 999px;
-							background: var(--accentedBg);
-						}
-					}
-				}
-			}
-		}
-	}
-
-	&.iconOnly {
-		flex: 0 0 $nav-icon-only-width;
-		width: $nav-icon-only-width;
-
-		> .body {
-			width: $nav-icon-only-width;
-
-			> .top {
-				position: sticky;
-				top: 0;
-				z-index: 1;
-				padding: 20px 0;
-				background: var(--X14);
-				-webkit-backdrop-filter: var(--blur, blur(8px));
-				backdrop-filter: var(--blur, blur(8px));
-
-				> .instance {
-					display: block;
-					text-align: center;
-					width: 100%;
-
-					> .icon {
-						display: inline-block;
-						width: 30px;
-						aspect-ratio: 1;
-					}
-				}
-			}
-
-			> .bottom {
-				position: sticky;
-				bottom: 0;
-				padding: 20px 0;
-				background: var(--X14);
-				-webkit-backdrop-filter: var(--blur, blur(8px));
-				backdrop-filter: var(--blur, blur(8px));
-
-				> .post {
-					display: block;
-					position: relative;
-					width: 100%;
-					height: 52px;
-					margin-bottom: 16px;
-					text-align: center;
-
-					&:before {
-						content: "";
-						display: block;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						margin: auto;
-						width: 52px;
-						aspect-ratio: 1/1;
-						border-radius: 100%;
-						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-					}
-
-					&:hover, &.active {
-						&:before {
-							background: var(--accentLighten);
-						}
-					}
-
-					> .icon {
-						position: relative;
-						color: var(--fgOnAccent);
-					}
-
-					> .text {
-						display: none;
-					}
-				}
-
-				> .account {
-					display: block;
-					text-align: center;
-					width: 100%;
-
-					> .avatar {
-						display: inline-block;
-						width: 38px;
-						aspect-ratio: 1;
-					}
-
-					> .text {
-						display: none;
-					}
-				}
-			}
-
-			> .middle {
-				flex: 1;
-
-				> .divider {
-					margin: 8px auto;
-					width: calc(100% - 32px);
-					border-top: solid 0.5px var(--divider);
-				}
-
-				> .item {
-					display: block;
-					position: relative;
-					padding: 18px 0;
-					width: 100%;
-					text-align: center;
-
-					> .icon {
-						display: block;
-						margin: 0 auto;
-						opacity: 0.7;
-					}
-
-					> .text {
-						display: none;
-					}
-
-					> .indicator {
-						position: absolute;
-						top: 6px;
-						left: 24px;
-						color: var(--navIndicator);
-						font-size: 8px;
-						animation: blink 1s infinite;
-					}
-
-					&:hover, &.active {
-						text-decoration: none;
-						color: var(--accent);
-
-						&:before {
-							content: "";
-							display: block;
-							height: 100%;
-							aspect-ratio: 1;
-							margin: auto;
-							position: absolute;
-							top: 0;
-							left: 0;
-							right: 0;
-							bottom: 0;
-							border-radius: 999px;
-							background: var(--accentedBg);
-						}
-
-						> .icon, > .text {
-							opacity: 1;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-</style>
+<template>
+<div class="mvcprjjd" :class="{ iconOnly }">
+	<div class="body blur">
+		<div class="top">
+			<div class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"></div>
+			<button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
+				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+			</button>
+		</div>
+		<div class="middle">
+			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
+				<i class="icon fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
+			</MkA>
+			<template v-for="item in menu">
+				<div v-if="item === '-'" class="divider"></div>
+				<component
+					:is="navbarItemDef[item].to ? 'MkA' : 'button'"
+					v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
+					v-click-anime
+					v-tooltip.noDelay.right="i18n.ts[navbarItemDef[item].title]"
+					class="item _button"
+					:class="[item, { active: navbarItemDef[item].active }]"
+					active-class="active"
+					:to="navbarItemDef[item].to"
+					v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
+				>
+					<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
+					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
+				</component>
+			</template>
+			<div class="divider"></div>
+			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.noDelay.right="i18n.ts.controlPanel" class="item" active-class="active" to="/admin">
+				<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
+			</MkA>
+			<button v-click-anime class="item _button" @click="more">
+				<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
+				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
+			</button>
+			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item" active-class="active" to="/settings">
+				<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+			</MkA>
+		</div>
+		<div class="bottom">
+			<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
+				<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
+			</button>
+			<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
+				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
+			</button>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref, watch } from 'vue';
+import * as os from '@/os';
+import { navbarItemDef } from '@/navbar';
+import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+import { host } from '@/config';
+
+const iconOnly = ref(false);
+
+const menu = computed(() => defaultStore.state.menu);
+const otherMenuItemIndicated = computed(() => {
+	for (const def in navbarItemDef) {
+		if (menu.value.includes(def)) continue;
+		if (navbarItemDef[def].indicated) return true;
+	}
+	return false;
+});
+
+const calcViewState = () => {
+	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
+};
+
+calcViewState();
+
+window.addEventListener('resize', calcViewState);
+
+watch(defaultStore.reactiveState.menuDisplay, () => {
+	calcViewState();
+});
+
+function openAccountMenu(ev: MouseEvent) {
+	openAccountMenu_({
+		withExtraOperation: true,
+	}, ev);
+}
+
+function openInstanceMenu(ev: MouseEvent) {
+	os.popupMenu([{
+		text: instance.name ?? host,
+		type: 'label',
+	}, {
+		type: 'link',
+		text: i18n.ts.instanceInfo,
+		icon: 'fas fa-info-circle',
+		to: '/about',
+	}, {
+		type: 'link',
+		text: i18n.ts.customEmojis,
+		icon: 'fas fa-laugh',
+		to: '/about#emojis',
+	}, {
+		type: 'link',
+		text: i18n.ts.federation,
+		icon: 'fas fa-globe',
+		to: '/about#federation',
+		}, null, {
+			type: 'parent',
+			text: i18n.ts.help,
+			icon: 'fas fa-question-circle',
+			children: [{
+				type: 'link',
+				to: '/mfm-cheat-sheet',
+				text: i18n.ts._mfm.cheatSheet,
+				icon: 'fas fa-code',
+			}, {
+				type: 'link',
+				to: '/scratchpad',
+				text: i18n.ts.scratchpad,
+				icon: 'fas fa-terminal',
+			}, {
+				type: 'link',
+				to: '/api-console',
+				text: 'API Console',
+				icon: 'fas fa-terminal',
+			}, null, {
+				text: i18n.ts.document,
+				icon: 'fas fa-question-circle',
+				action: () => {
+					window.open('https://misskey-hub.net/help.html', '_blank');
+				},
+			}],
+		}, {
+			type: 'link',
+			text: i18n.ts.aboutMisskey,
+			to: '/about-misskey',
+	}], ev.currentTarget ?? ev.target, {
+		align: 'left',
+	});
+}
+
+function more(ev: MouseEvent) {
+	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
+		src: ev.currentTarget ?? ev.target,
+	}, {
+	}, 'closed');
+}
+</script>
+
+<style lang="scss" scoped>
+.mvcprjjd {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$nav-width: 250px;
+	$nav-icon-only-width: 86px;
+	$avatar-size: 32px;
+	$avatar-margin: 8px;
+
+	flex: 0 0 $nav-width;
+	width: $nav-width;
+	box-sizing: border-box;
+
+	> .body {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1001;
+		width: $nav-icon-only-width;
+		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+		height: calc(var(--vh, 1vh) * 100);
+		box-sizing: border-box;
+		overflow: auto;
+		overflow-x: clip;
+		background: var(--navBg);
+		contain: strict;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&:not(.iconOnly) {
+		> .body {
+			width: $nav-width;
+
+			> .top {
+				position: sticky;
+				top: 0;
+				z-index: 1;
+				padding: 20px 0;
+				background: var(--X14);
+				-webkit-backdrop-filter: var(--blur, blur(8px));
+				backdrop-filter: var(--blur, blur(8px));
+
+				> .banner {
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					background-size: cover;
+					background-position: center center;
+					-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
+					mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
+				}
+
+				> .instance {
+					position: relative;
+					display: block;
+					text-align: center;
+					width: 100%;
+
+					> .icon {
+						display: inline-block;
+						width: 38px;
+						aspect-ratio: 1;
+					}
+				}
+			}
+
+			> .bottom {
+				position: sticky;
+				bottom: 0;
+				padding: 20px 0;
+				background: var(--X14);
+				-webkit-backdrop-filter: var(--blur, blur(8px));
+				backdrop-filter: var(--blur, blur(8px));
+
+				> .post {
+					position: relative;
+					display: block;
+					width: 100%;
+					height: 40px;
+					color: var(--fgOnAccent);
+					font-weight: bold;
+					text-align: left;
+
+					&:before {
+						content: "";
+						display: block;
+						width: calc(100% - 38px);
+						height: 100%;
+						margin: auto;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 999px;
+						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+					}
+
+					&:hover, &.active {
+						&:before {
+							background: var(--accentLighten);
+						}
+					}
+
+					> .icon {
+						position: relative;
+						margin-left: 30px;
+						margin-right: 8px;
+						width: 32px;
+					}
+
+					> .text {
+						position: relative;
+					}
+				}
+
+				> .account {
+					position: relative;
+					display: flex;
+					align-items: center;
+					padding-left: 30px;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+					width: 100%;
+					text-align: left;
+					box-sizing: border-box;
+					margin-top: 16px;
+
+					> .avatar {
+						position: relative;
+						width: 32px;
+						aspect-ratio: 1;
+						margin-right: 8px;
+					}
+				}
+			}
+
+			> .middle {
+				flex: 1;
+
+				> .divider {
+					margin: 16px 16px;
+					border-top: solid 0.5px var(--divider);
+				}
+
+				> .item {
+					position: relative;
+					display: block;
+					padding-left: 30px;
+					line-height: 2.85rem;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+					width: 100%;
+					text-align: left;
+					box-sizing: border-box;
+					color: var(--navFg);
+
+					> .icon {
+						position: relative;
+						width: 32px;
+						margin-right: 8px;
+					}
+
+					> .indicator {
+						position: absolute;
+						top: 0;
+						left: 20px;
+						color: var(--navIndicator);
+						font-size: 8px;
+						animation: blink 1s infinite;
+					}
+
+					> .text {
+						position: relative;
+						font-size: 0.9em;
+					}
+
+					&:hover {
+						text-decoration: none;
+						color: var(--navHoverFg);
+					}
+
+					&.active {
+						color: var(--navActive);
+					}
+
+					&:hover, &.active {
+						color: var(--accent);
+
+						&:before {
+							content: "";
+							display: block;
+							width: calc(100% - 34px);
+							height: 100%;
+							margin: auto;
+							position: absolute;
+							top: 0;
+							left: 0;
+							right: 0;
+							bottom: 0;
+							border-radius: 999px;
+							background: var(--accentedBg);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&.iconOnly {
+		flex: 0 0 $nav-icon-only-width;
+		width: $nav-icon-only-width;
+
+		> .body {
+			width: $nav-icon-only-width;
+
+			> .top {
+				position: sticky;
+				top: 0;
+				z-index: 1;
+				padding: 20px 0;
+				background: var(--X14);
+				-webkit-backdrop-filter: var(--blur, blur(8px));
+				backdrop-filter: var(--blur, blur(8px));
+
+				> .instance {
+					display: block;
+					text-align: center;
+					width: 100%;
+
+					> .icon {
+						display: inline-block;
+						width: 30px;
+						aspect-ratio: 1;
+					}
+				}
+			}
+
+			> .bottom {
+				position: sticky;
+				bottom: 0;
+				padding: 20px 0;
+				background: var(--X14);
+				-webkit-backdrop-filter: var(--blur, blur(8px));
+				backdrop-filter: var(--blur, blur(8px));
+
+				> .post {
+					display: block;
+					position: relative;
+					width: 100%;
+					height: 52px;
+					margin-bottom: 16px;
+					text-align: center;
+
+					&:before {
+						content: "";
+						display: block;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						margin: auto;
+						width: 52px;
+						aspect-ratio: 1/1;
+						border-radius: 100%;
+						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+					}
+
+					&:hover, &.active {
+						&:before {
+							background: var(--accentLighten);
+						}
+					}
+
+					> .icon {
+						position: relative;
+						color: var(--fgOnAccent);
+					}
+
+					> .text {
+						display: none;
+					}
+				}
+
+				> .account {
+					display: block;
+					text-align: center;
+					width: 100%;
+
+					> .avatar {
+						display: inline-block;
+						width: 38px;
+						aspect-ratio: 1;
+					}
+
+					> .text {
+						display: none;
+					}
+				}
+			}
+
+			> .middle {
+				flex: 1;
+
+				> .divider {
+					margin: 8px auto;
+					width: calc(100% - 32px);
+					border-top: solid 0.5px var(--divider);
+				}
+
+				> .item {
+					display: block;
+					position: relative;
+					padding: 18px 0;
+					width: 100%;
+					text-align: center;
+
+					> .icon {
+						display: block;
+						margin: 0 auto;
+						opacity: 0.7;
+					}
+
+					> .text {
+						display: none;
+					}
+
+					> .indicator {
+						position: absolute;
+						top: 6px;
+						left: 24px;
+						color: var(--navIndicator);
+						font-size: 8px;
+						animation: blink 1s infinite;
+					}
+
+					&:hover, &.active {
+						text-decoration: none;
+						color: var(--accent);
+
+						&:before {
+							content: "";
+							display: block;
+							height: 100%;
+							aspect-ratio: 1;
+							margin: auto;
+							position: absolute;
+							top: 0;
+							left: 0;
+							right: 0;
+							bottom: 0;
+							border-radius: 999px;
+							background: var(--accentedBg);
+						}
+
+						> .icon, > .text {
+							opacity: 1;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 3c0c2a44b..9173b29f5 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -27,7 +27,7 @@
 					@parent-focus="moveFocus(ids[0], $event)"
 				/>
 			</template>
-			<div v-if="layout.length === 0" class="intro _panel">
+			<div v-if="layout.length === 0" class="intro _panel blur">
 				<div>{{ i18n.ts._deck.introduction }}</div>
 				<MkButton primary class="add" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
 				<div>{{ i18n.ts._deck.introduction2 }}</div>
diff --git a/packages/client/src/ui/deckold/column.vue b/packages/client/src/ui/deckold/column.vue
index 126164327..a9e7b650f 100644
--- a/packages/client/src/ui/deckold/column.vue
+++ b/packages/client/src/ui/deckold/column.vue
@@ -1,6 +1,6 @@
 <template>
 <!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-<section v-hotkey="keymap" class="dnpfarvg _panel _narrow_"
+<section v-hotkey="keymap" class="dnpfarvg _panel blur _narrow_"
 	:class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }"
 	:style="{ '--deckColumnHeaderHeight': deckStore.reactiveState.columnHeaderHeight.value + 'px' }"
 	@dragover.prevent.stop="onDragover"
@@ -296,8 +296,6 @@ function onDrop(ev) {
 
 	&.naked {
 		background: var(--acrylicBg) !important;
-		-webkit-backdrop-filter: var(--blur, blur(10px));
-		backdrop-filter: var(--blur, blur(10px));
 
 		> header {
 			background: transparent;
diff --git a/packages/client/src/widgets/post-form.vue b/packages/client/src/widgets/post-form.vue
index f1708775b..669c23341 100644
--- a/packages/client/src/widgets/post-form.vue
+++ b/packages/client/src/widgets/post-form.vue
@@ -1,5 +1,5 @@
 <template>
-<XPostForm class="_panel mkw-postForm" :fixed="true" :autofocus="false"/>
+<XPostForm class="_panel blur mkw-postForm" :fixed="true" :autofocus="false"/>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/widgets/slideshow.vue b/packages/client/src/widgets/slideshow.vue
index e317b8ab9..3af1ad4f8 100644
--- a/packages/client/src/widgets/slideshow.vue
+++ b/packages/client/src/widgets/slideshow.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="kvausudm _panel mkw-slideshow" :style="{ height: widgetProps.height + 'px' }">
+<div class="kvausudm _panel blur mkw-slideshow" :style="{ height: widgetProps.height + 'px' }">
 	<div @click="choose">
 		<p v-if="widgetProps.folderId == null">
 			{{ i18n.ts.folder }}