From 0f2523df41c7165e98269ed0756c2639900ee912 Mon Sep 17 00:00:00 2001
From: ikasoba <57828948+ikasoba@users.noreply.github.com>
Date: Mon, 18 Dec 2023 21:16:09 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=AF=E3=83=A9=E3=82=B9=E3=81=AB=E3=81=BE?=
 =?UTF-8?q?=E3=81=A8=E3=82=81=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/MkChannelPreview.vue       | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
index c96cad4030..bf6504d6bf 100644
--- a/packages/frontend/src/components/MkChannelPreview.vue
+++ b/packages/frontend/src/components/MkChannelPreview.vue
@@ -40,18 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</MkA>
 	<div
 		v-if="channel.lastNotedAt && (channel.isFavorited || channel.isFollowing) && (!lastReadedAt || Date.parse(channel.lastNotedAt) > lastReadedAt)"
-		style="
-			position: absolute;
-			top: 0;
-			right: 0;
-			transform: translate(25%, -25%);
-			background-color: var(--accent);
-			border: solid var(--bg) 4px;
-			border-radius: 100%;
-			width: 1.5rem;
-			height: 1.5rem;
-			aspect-ratio: 1 / 1;
-		"
+		class="indicator"
 	></div>
 </div>
 </template>
@@ -202,4 +191,17 @@ const bannerStyle = computed(() => {
 	}
 }
 
+.indicator {
+	position: absolute;
+	top: 0;
+	right: 0;
+	transform: translate(25%, -25%);
+	background-color: var(--accent);
+	border: solid var(--bg) 4px;
+	border-radius: 100%;
+	width: 1.5rem;
+	height: 1.5rem;
+	aspect-ratio: 1 / 1;
+}
+
 </style>