client: remove _acrylic

Acrylic is defined as having a background
similar to panel + transparency and backdrop.
Simply change everything that is _acrylic to be _panel instead.

packages/client/src/components/emoji-picker.section.vue

@@ -1,6 +1,6 @@
 <template>
 <section>
-	<header class="_acrylic" @click="shown = !shown">
+	<header class="_panel" @click="shown = !shown">
 		<i class="toggle fa-fw" :class="shown ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
 	</header>
 	<div v-if="shown">

packages/client/src/components/emoji-picker.vue

@@ -46,7 +46,7 @@
 			</section>
 
 			<section>
-				<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header>
+				<header class="_panel"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header>
 				<div>
 					<button
 						v-for="emoji in recentlyUsedEmojis"
@@ -60,11 +60,11 @@
 			</section>
 		</div>
 		<div>
-			<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
+			<header class="_panel">{{ i18n.ts.customEmojis }}</header>
 			<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
 		</div>
 		<div>
-			<header class="_acrylic">{{ i18n.ts.emoji }}</header>
+			<header class="_panel">{{ i18n.ts.emoji }}</header>
 			<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
 		</div>
 	</div>

packages/client/src/components/notification-toast.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mk-notification-toast" :style="{ zIndex }">
 	<transition :name="$store.state.animation ? 'notification-toast' : ''" appear @after-leave="emit('closed')">
-		<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
+		<XNotification v-if="showing" :notification="notification" class="notification _panel"/>
 	</transition>
 </div>
 </template>

packages/client/src/components/ui/tooltip.vue

@@ -1,6 +1,6 @@
 <template>
 <transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')">
-	<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
+	<div v-show="showing" ref="el" class="buebdbiu _panel _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
 		<slot>
 			<Mfm v-if="asMfm" :text="text"/>
 			<span v-else>{{ text }}</span>

packages/client/src/pages/settings/profile.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="_formRoot">
 	<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
-		<div class="avatar _acrylic">
+		<div class="avatar _panel">
 			<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
 			<MkButton primary class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
 		</div>

packages/client/src/pages/welcome.entrance.a.vue

@@ -15,7 +15,7 @@
 		</div>
 		<div class="main">
 			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			<button class="_button _acrylic menu" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
+			<button class="_button _panel menu" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
 			<div class="fg">
 				<h1>
 					<!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に -->
@@ -272,9 +272,7 @@ function showMenu(ev) {
 			left: 0;
 			right: 0;
 			margin: auto;
-			background: var(--acrylicPanel);
+			background: var(--panel);
-			-webkit-backdrop-filter: var(--blur, blur(15px));
-			backdrop-filter: var(--blur, blur(15px));
 			border-radius: 999px;
 			overflow: clip;
 			width: 800px;

packages/client/src/style.scss

@@ -367,12 +367,6 @@ hr {
 	}
 }
 
-._acrylic {
-	background: var(--acrylicPanel);
-	-webkit-backdrop-filter: var(--blur, blur(15px));
-	backdrop-filter: var(--blur, blur(15px));
-}
-
 ._formBlock {
 	margin: 1.5em 0;
 }

packages/client/src/themes/_dark.json5

@@ -15,7 +15,6 @@
 		accentedBg: ':alpha<0.15<@accent',
 		focus: ':alpha<0.3<@accent',
 		bg: '#000',
-		acrylicBg: ':alpha<0.5<@bg',
 		fg: '#dadada',
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
@@ -29,7 +28,6 @@
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--divider)',
-		acrylicPanel: ':alpha<0.5<@panel',
 		popup: ':lighten<3<@panel',
 		shadow: 'rgba(0, 0, 0, 0.3)',
 		header: ':alpha<0.7<@panel',

packages/client/src/themes/_light.json5

@@ -15,7 +15,6 @@
 		accentedBg: ':alpha<0.15<@accent',
 		focus: ':alpha<0.3<@accent',
 		bg: '#fff',
-		acrylicBg: ':alpha<0.5<@bg',
 		fg: '#5f5f5f',
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		fgTransparent: ':alpha<0.5<@fg',
@@ -29,7 +28,6 @@
 		panelHeaderFg: '@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		panelBorder: '" solid 1px var(--divider)',
-		acrylicPanel: ':alpha<0.5<@panel',
 		popup: ':lighten<3<@panel',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: ':alpha<0.7<@panel',

packages/client/src/themes/d-astro.json5

@@ -28,7 +28,6 @@
 		modalBg: 'rgba(0, 0, 0, 0.5)',
 		success: '#86b300',
 		buttonBg: 'rgba(255, 255, 255, 0.05)',
-		acrylicBg: ':alpha<0.5<@bg',
 		cwHoverBg: '#707b97',
 		indicator: '@accent',
 		mentionMe: '#fb5d38',
@@ -42,7 +41,6 @@
 		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
 		panelBorder: '" solid 1px var(--divider)',
 		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@accent',
 		accentLighten: ':lighten<10<@accent',
 		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',

packages/client/src/themes/d-pumpkin.json5

@@ -49,7 +49,6 @@
 		success: '#86b300',
 		buttonBg: 'rgba(255, 255, 255, 0.05)',
 		switchBg: 'rgba(255, 255, 255, 0.15)',
-		acrylicBg: ':alpha<0.5<@bg',
 		cwHoverBg: '#707b97',
 		indicator: '@accent',
 		mentionMe: '@accent',
@@ -64,7 +63,6 @@
 		inputBorder: 'rgba(255, 255, 255, 0.1)',
 		panelBorder: '" solid 1px var(--divider)',
 		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@indicator',
 		accentLighten: ':lighten<10<@accent',
 		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',

packages/client/src/themes/l-vivid.json5

@@ -31,7 +31,6 @@
 		modalBg: 'rgba(0, 0, 0, 0.3)',
 		success: '#86b300',
 		buttonBg: 'rgba(0, 0, 0, 0.05)',
-		acrylicBg: ':alpha<0.5<@bg',
 		cwHoverBg: '#bbc4ce',
 		indicator: '@accent',
 		mentionMe: '@mention',
@@ -45,7 +44,6 @@
 		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
 		panelBorder: '" solid 1px var(--divider)',
 		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
 		navIndicator: '@accent',
 		accentLighten: ':lighten<10<@accent',
 		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',

packages/client/src/ui/_common_/upload.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-uploader _acrylic" :style="{ zIndex }">
+<div class="mk-uploader _panel" :style="{ zIndex }">
 	<ol v-if="uploads.length > 0">
 		<li v-for="ctx in uploads" :key="ctx.id">
 			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>

packages/client/src/ui/deck/column.vue

@@ -283,7 +283,7 @@ function onDrop(ev) {
 	}
 
 	&.naked {
-		background: var(--acrylicBg) !important;
+		background: var(--bg) !important;
 		-webkit-backdrop-filter: var(--blur, blur(10px));
 		backdrop-filter: var(--blur, blur(10px));