refactor(client): use css modules

4 files changed, 19 insertions, 25 deletions

diff --git a/packages/frontend/src/ui/deck/antenna-column.vue b/packages/frontend/src/ui/deck/antenna-column.vue
index 53d744676c..4c69c8e8e8 100644
--- a/packages/frontend/src/ui/deck/antenna-column.vue
+++ b/packages/frontend/src/ui/deck/antenna-column.vue
@@ -65,6 +65,3 @@ defineExpose({
 });
 */
 </script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/frontend/src/ui/deck/list-column.vue b/packages/frontend/src/ui/deck/list-column.vue
index e31446ebb2..58633e5672 100644
--- a/packages/frontend/src/ui/deck/list-column.vue
+++ b/packages/frontend/src/ui/deck/list-column.vue
@@ -53,6 +53,3 @@ const menu = [{
 	action: setList,
 }];
 </script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/frontend/src/ui/deck/tl-column.vue b/packages/frontend/src/ui/deck/tl-column.vue
index b8a0a504a3..8bde7e4ce3 100644
--- a/packages/frontend/src/ui/deck/tl-column.vue
+++ b/packages/frontend/src/ui/deck/tl-column.vue
@@ -8,12 +8,12 @@
 		<span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
-	<div v-if="disabled" class="iwaalbte">
-		<p>
+	<div v-if="disabled" :class="$style.disabled">
+		<p :class="$style.disabledTitle">
 			<i class="ti ti-minus-circle"></i>
 			{{ $t('disabled-timeline.title') }}
 		</p>
-		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
+		<p :class="$style.disabledDescription">{{ $t('disabled-timeline.description') }}</p>
 	</div>
 	<XTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')"/>
 </XColumn>
@@ -80,16 +80,16 @@ const menu = [{
 }];
 </script>
 
-<style lang="scss" scoped>
-.iwaalbte {
+<style lang="scss" module>
+.disabled {
 	text-align: center;
+}
 
-	> p {
-		margin: 16px;
+.disabledTitle {
+	margin: 16px;
+}
 
-		&.desc {
-			font-size: 14px;
-		}
-	}
+.disabledDescription {
+	font-size: 90%;
 }
 </style>
diff --git a/packages/frontend/src/ui/deck/widgets-column.vue b/packages/frontend/src/ui/deck/widgets-column.vue
index edc54c1c2b..3b5b727991 100644
--- a/packages/frontend/src/ui/deck/widgets-column.vue
+++ b/packages/frontend/src/ui/deck/widgets-column.vue
@@ -2,8 +2,8 @@
 <XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header><i class="ti ti-apps" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
-	<div class="wtdtxvec">
-		<div v-if="!(column.widgets && column.widgets.length > 0) && !edit" class="intro">{{ i18n.ts._deck.widgetsIntroduction }}</div>
+	<div :class="$style.root">
+		<div v-if="!(column.widgets && column.widgets.length > 0) && !edit" :class="$style.intro">{{ i18n.ts._deck.widgetsIntroduction }}</div>
 		<XWidgets :edit="edit" :widgets="column.widgets ?? []" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
 	</div>
 </XColumn>
@@ -54,16 +54,16 @@ const menu = [{
 }];
 </script>
 
-<style lang="scss" scoped>
-.wtdtxvec {
+<style lang="scss" module>
+.root {
 	--margin: 8px;
 	--panelBorder: none;
 
 	padding: 0 var(--margin);
+}
 
-	> .intro {
-		padding: 16px;
-		text-align: center;
-	}
+.intro {
+	padding: 16px;
+	text-align: center;
 }
 </style>