refactor(client): use css modules

packages/frontend/src/components/MkChartTooltip.vue

@@ -1,10 +1,10 @@
 <template>
 <MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" :direction="'top'" :inner-margin="16" @closed="emit('closed')">
-	<div v-if="title || series" class="qpcyisrl">
-		<div v-if="title" class="title">{{ title }}</div>
+	<div v-if="title || series">
+		<div v-if="title" :class="$style.title">{{ title }}</div>
 		<template v-if="series">
-			<div v-for="x in series" class="series">
-				<span class="color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
+			<div v-for="x in series">
+				<span :class="$style.color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
 				<span>{{ x.text }}</span>
 			</div>
 		</template>
@@ -33,14 +33,12 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-.qpcyisrl {
-	> .title {
+<style lang="scss" module>
+.title {
 	margin-bottom: 4px;
 }
 
-	> .series {
-		> .color {
+.color {
 	display: inline-block;
 	width: 8px;
 	height: 8px;
@@ -48,6 +46,4 @@ const emit = defineEmits<{
 	border-style: solid;
 	margin-right: 8px;
 }
-	}
-}
 </style>

packages/frontend/src/components/MkContextMenu.vue

@@ -1,6 +1,12 @@
 <template>
-<Transition :name="$store.state.animation ? 'fade' : ''" appear>
-	<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
+<Transition
+	appear
+	:enter-active-class="$store.state.animation ? $style.transition_fade_enterActive : ''"
+	:leave-active-class="$store.state.animation ? $style.transition_fade_leaveActive : ''"
+	:enter-from-class="$store.state.animation ? $style.transition_fade_enterFrom : ''"
+	:leave-to-class="$store.state.animation ? $style.transition_fade_leaveTo : ''"
+>
+	<div ref="rootEl" :class="$style.root" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
 		<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
 	</div>
 </Transition>
@@ -68,18 +74,19 @@ function onMousedown(evt: Event) {
 }
 </script>
 
-<style lang="scss" scoped>
-.nvlagfpb {
-	position: absolute;
-}
-
-.fade-enter-active, .fade-leave-active {
+<style lang="scss" module>
+.transition_fade_enterActive,
+.transition_fade_leaveActive {
 	transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 	transform-origin: left top;
 }
-
-.fade-enter-from, .fade-leave-to {
+.transition_fade_enterFrom,
+.transition_fade_leaveTo {
 	opacity: 0;
 	transform: scale(0.9);
 }
+
+.root {
+	position: absolute;
+}
 </style>

packages/frontend/src/components/MkEmojiPicker.section.vue

@@ -31,6 +31,3 @@ const emit = defineEmits<{
 
 const shown = ref(!!props.initialShown);
 </script>
-
-<style lang="scss" scoped>
-</style>

packages/frontend/src/components/MkFeaturedPhotos.vue

@@ -1,5 +1,5 @@
 <template>
-<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
+<div v-if="meta" :class="$style.root" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
 </template>
 
 <script lang="ts" setup>
@@ -14,8 +14,8 @@ os.api('meta', { detail: true }).then(gotMeta => {
 });
 </script>
 
-<style lang="scss" scoped>
-.xfbouadm {
+<style lang="scss" module>
+.root {
 	background-position: center;
 	background-size: cover;
 }