🎨

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"/>

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"/>

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>

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">

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"

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>

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(); }">

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()"

packages/client/src/components/MkNote.vue

@@ -651,4 +651,8 @@ function readPromo() {
 	text-align: center;
 	opacity: 0.7;
 }
+
+.selecting {
+	
+}
 </style>

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)">

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>

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,
+		> div {
-		> .hashtags,
+			> .cw,
-		> .text {
+			> .hashtags,
-			display: block;
+			> .text {
-			box-sizing: border-box;
+				display: block;
-			padding: 0 24px;
+				box-sizing: border-box;
-			margin: 0;
+				padding: 0 24px;
-			width: 100%;
+				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 {

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>

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;
 		}
 	}

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>

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>

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>

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>

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>

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) }}

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>

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;

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));
 

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">

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>

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>

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"/>

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">

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>

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>

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>

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>

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) {

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"/>

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>

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>

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"/>

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>

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"/>

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));
+}

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>

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;

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>

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 }}