From 7f808eaf426159c77e6ffbf8b246712a584d938b Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 10 Jul 2022 13:16:11 +0900
Subject: [PATCH] fix(client): fix style of mention

---
 packages/client/src/components/mention.vue | 39 +++++++++++-----------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/client/src/components/mention.vue b/packages/client/src/components/mention.vue
index 2c8bc0c04..e35652297 100644
--- a/packages/client/src/components/mention.vue
+++ b/packages/client/src/components/mention.vue
@@ -1,15 +1,15 @@
 <template>
-<MkA v-if="url.startsWith('/')" v-user-preview="canonical" :class="[$style.root, { isMe }]" :to="url" :style="{ background: bgCss }">
-	<img :class="$style.icon" :src="`/avatar/@${username}@${host}`" alt="">
+<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }">
+	<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
 	<span class="main">
 		<span class="username">@{{ username }}</span>
-		<span v-if="(host != localHost) || $store.state.showFullAcct" :class="$style.mainHost">@{{ toUnicode(host) }}</span>
+		<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
 	</span>
 </MkA>
-<a v-else :class="$style.root" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }">
+<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }">
 	<span class="main">
 		<span class="username">@{{ username }}</span>
-		<span :class="$style.mainHost">@{{ toUnicode(host) }}</span>
+		<span class="host">@{{ toUnicode(host) }}</span>
 	</span>
 </a>
 </template>
@@ -41,8 +41,8 @@ const bgCss = bg.toRgbString();
 useCssModule();
 </script>
 
-<style lang="scss" module>
-.root {
+<style lang="scss" scoped>
+.akbvjaqn {
 	display: inline-block;
 	padding: 4px 8px 4px 4px;
 	border-radius: 999px;
@@ -51,18 +51,19 @@ useCssModule();
 	&.isMe {
 		color: var(--mentionMe);
 	}
+
+	> .icon {
+		width: 1.5em;
+		height: 1.5em;
+		object-fit: cover;
+		margin: 0 0.2em 0 0;
+		vertical-align: bottom;
+		border-radius: 100%;
+	}
+
+	> .host {
+		opacity: 0.5;
+	}
 }
 
-.icon {
-	width: 1.5em;
-	height: 1.5em;
-	object-fit: cover;
-	margin: 0 0.2em 0 0;
-	vertical-align: bottom;
-	border-radius: 100%;
-}
-
-.mainHost {
-	opacity: 0.5;
-}
 </style>