refactor

3 files changed, 117 insertions, 98 deletions

diff --git a/packages/frontend/src/ui/_common_/statusbar-federation.vue b/packages/frontend/src/ui/_common_/statusbar-federation.vue
index fe95460ba4..4ea84c82c2 100644
--- a/packages/frontend/src/ui/_common_/statusbar-federation.vue
+++ b/packages/frontend/src/ui/_common_/statusbar-federation.vue
@@ -1,14 +1,20 @@
 <template>
-<span v-if="!fetching" class="nmidsaqw">
+<span v-if="!fetching" :class="$style.root">
 	<template v-if="display === 'marquee'">
-		<Transition name="change" mode="default">
+		<Transition
+			:enterActiveClass="$style.transition_change_enterActive"
+			:leaveActiveClass="$style.transition_change_leaveActive"
+			:enterFromClass="$style.transition_change_enterFrom"
+			:leaveToClass="$style.transition_change_leaveTo"
+			mode="default"
+		>
 			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
-				<span v-for="instance in instances" :key="instance.id" class="item" :class="{ colored }" :style="{ background: colored ? instance.themeColor : null }">
-					<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
-					<MkA :to="`/instance-info/${instance.host}`" class="host _monospace">
+				<span v-for="instance in instances" :key="instance.id" :class="[$style.item, { [$style.colored]: colored }]" :style="{ background: colored ? instance.themeColor : null }">
+					<img :class="$style.icon" :src="getInstanceIcon(instance)" alt=""/>
+					<MkA :to="`/instance-info/${instance.host}`" :class="$style.host" class="_monospace">
 						{{ instance.host }}
 					</MkA>
-					<span class="divider"></span>
+					<span :class="$style.divider"></span>
 				</span>
 			</MarqueeText>
 		</Transition>
@@ -61,46 +67,47 @@ function getInstanceIcon(instance): string {
 }
 </script>
 
-<style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
+<style lang="scss" module>
+.transition_change_enterActive,
+.transition_change_leaveActive {
 	position: absolute;
 	top: 0;
   transition: all 1s ease;
 }
-.change-enter-from {
-  opacity: 0;
+.transition_change_enterFrom {
+	opacity: 0;
 	transform: translateY(-100%);
 }
-.change-leave-to {
-  opacity: 0;
+.transition_change_leaveTo {
+	opacity: 0;
 	transform: translateY(100%);
 }
 
-.nmidsaqw {
+.root {
 	display: inline-block;
 	position: relative;
+}
 
-	::v-deep(.item) {
-		display: inline-block;
-		vertical-align: bottom;
-		margin-right: 5em;
+.item {
+	display: inline-block;
+	vertical-align: bottom;
+	margin-right: 5em;
 
-		> .icon {
-			display: inline-block;
-			height: var(--height);
-			aspect-ratio: 1;
-			vertical-align: bottom;
-			margin-right: 1em;
-		}
+	&.colored {
+		padding-right: 1em;
+		color: #fff;
+	}
+}
 
-		> .host {
-			vertical-align: bottom;
-		}
+.icon {
+	display: inline-block;
+	height: var(--height);
+	aspect-ratio: 1;
+	vertical-align: bottom;
+	margin-right: 1em;
+}
 
-		&.colored {
-			padding-right: 1em;
-			color: #fff;
-		}
-	}
+.host {
+	vertical-align: bottom;
 }
 </style>
diff --git a/packages/frontend/src/ui/_common_/statusbar-rss.vue b/packages/frontend/src/ui/_common_/statusbar-rss.vue
index 44b6b278ea..82473b609f 100644
--- a/packages/frontend/src/ui/_common_/statusbar-rss.vue
+++ b/packages/frontend/src/ui/_common_/statusbar-rss.vue
@@ -1,10 +1,16 @@
 <template>
-<span v-if="!fetching" class="xbhtxfms">
+<span v-if="!fetching" :class="$style.root">
 	<template v-if="display === 'marquee'">
-		<Transition name="change" mode="default">
+		<Transition
+			:enterActiveClass="$style.transition_change_enterActive"
+			:leaveActiveClass="$style.transition_change_leaveActive"
+			:enterFromClass="$style.transition_change_enterFrom"
+			:leaveToClass="$style.transition_change_leaveTo"
+			mode="default"
+		>
 			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
-				<span v-for="item in items" class="item">
-					<a class="link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span class="divider"></span>
+				<span v-for="item in items" :class="$style.item">
+					<a :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span :class="$style.divider"></span>
 				</span>
 			</MarqueeText>
 		</Transition>
@@ -54,39 +60,40 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 });
 </script>
 
-<style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
+<style lang="scss" module>
+.transition_change_enterActive,
+.transition_change_leaveActive {
 	position: absolute;
 	top: 0;
   transition: all 1s ease;
 }
-.change-enter-from {
-  opacity: 0;
+.transition_change_enterFrom {
+	opacity: 0;
 	transform: translateY(-100%);
 }
-.change-leave-to {
-  opacity: 0;
+.transition_change_leaveTo {
+	opacity: 0;
 	transform: translateY(100%);
 }
 
-.xbhtxfms {
+.root {
 	display: inline-block;
 	position: relative;
+}
 
-	::v-deep(.item) {
-		display: inline-flex;
-		align-items: center;
-		vertical-align: bottom;
-		margin: 0;
+.item {
+	display: inline-flex;
+	align-items: center;
+	vertical-align: bottom;
+	margin: 0;
+}
 
-		> .divider {
-			display: inline-block;
-			width: 0.5px;
-			height: var(--height);
-			margin: 0 3em;
-			background: currentColor;
-			opacity: 0.3;
-		}
-	}
+.divider {
+	display: inline-block;
+	width: 0.5px;
+	height: var(--height);
+	margin: 0 3em;
+	background: currentColor;
+	opacity: 0.3;
 }
 </style>
diff --git a/packages/frontend/src/ui/_common_/statusbar-user-list.vue b/packages/frontend/src/ui/_common_/statusbar-user-list.vue
index 16df69d968..9ac744943d 100644
--- a/packages/frontend/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/frontend/src/ui/_common_/statusbar-user-list.vue
@@ -1,14 +1,20 @@
 <template>
-<span v-if="!fetching" class="osdsvwzy">
+<span v-if="!fetching" :class="$style.root">
 	<template v-if="display === 'marquee'">
-		<Transition name="change" mode="default">
+		<Transition
+			:enterActiveClass="$style.transition_change_enterActive"
+			:leaveActiveClass="$style.transition_change_leaveActive"
+			:enterFromClass="$style.transition_change_enterFrom"
+			:leaveToClass="$style.transition_change_leaveTo"
+			mode="default"
+		>
 			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
-				<span v-for="note in notes" :key="note.id" class="item">
-					<img class="avatar" :src="note.user.avatarUrl" decoding="async"/>
-					<MkA class="text" :to="notePage(note)">
-						<Mfm class="text" :text="getNoteSummary(note)" :plain="true" :nowrap="true"/>
+				<span v-for="note in notes" :key="note.id" :class="$style.item">
+					<img :class="$style.avatar" :src="note.user.avatarUrl" decoding="async"/>
+					<MkA :class="$style.text" :to="notePage(note)">
+						<Mfm :text="getNoteSummary(note)" :plain="true" :nowrap="true"/>
 					</MkA>
-					<span class="divider"></span>
+					<span :class="$style.divider"></span>
 				</span>
 			</MarqueeText>
 		</Transition>
@@ -60,54 +66,53 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 });
 </script>
 
-<style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
+<style lang="scss" module>
+.transition_change_enterActive,
+.transition_change_leaveActive {
 	position: absolute;
 	top: 0;
   transition: all 1s ease;
 }
-.change-enter-from {
-  opacity: 0;
+.transition_change_enterFrom {
+	opacity: 0;
 	transform: translateY(-100%);
 }
-.change-leave-to {
-  opacity: 0;
+.transition_change_leaveTo {
+	opacity: 0;
 	transform: translateY(100%);
 }
 
-.osdsvwzy {
+.root {
 	display: inline-block;
 	position: relative;
+}
 
-	::v-deep(.item) {
-		display: inline-flex;
-		align-items: center;
-		vertical-align: bottom;
-		margin: 0;
+.item {
+	display: inline-flex;
+	align-items: center;
+	vertical-align: bottom;
+	margin: 0;
+}
 
-		> .avatar {
-			display: inline-block;
-			height: var(--height);
-			aspect-ratio: 1;
-			vertical-align: bottom;
-			margin-right: 8px;
-		}
+.avatar {
+	display: inline-block;
+	height: var(--height);
+	aspect-ratio: 1;
+	vertical-align: bottom;
+	margin-right: 8px;
+}
 
-		> .text {
-			> .text {
-				display: inline-block;
-				vertical-align: bottom;
-			}
-		}
+.text {
+	display: inline-block;
+	vertical-align: bottom;
+}
 
-		> .divider {
-			display: inline-block;
-			width: 0.5px;
-			height: 16px;
-			margin: 0 3em;
-			background: currentColor;
-			opacity: 0;
-		}
-	}
+.divider {
+	display: inline-block;
+	width: 0.5px;
+	height: 16px;
+	margin: 0 3em;
+	background: currentColor;
+	opacity: 0;
 }
 </style>