refactor

packages/frontend/src/components/MkEmojiPickerDialog.vue

@@ -14,8 +14,8 @@
 >
 	<MkEmojiPicker
 		ref="picker"
-		class="ryghynhb _popup _shadow"
-		:class="{ drawer: type === 'drawer' }"
+		class="_popup _shadow"
+		:class="{ [$style.drawer]: type === 'drawer' }"
 		:showPinned="showPinned"
 		:asReactionPicker="asReactionPicker"
 		:asDrawer="type === 'drawer'"
@@ -67,12 +67,10 @@ function opening() {
 }
 </script>
 
-<style lang="scss" scoped>
-.ryghynhb {
-	&.drawer {
+<style lang="scss" module>
+.drawer {
 	border-radius: 24px;
 	border-bottom-right-radius: 0;
 	border-bottom-left-radius: 0;
-	}
 }
 </style>

packages/frontend/src/components/MkTextarea.vue

@@ -1,12 +1,12 @@
 <template>
-<div class="adhpbeos">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="input" :class="{ disabled, focused, tall, pre }">
+<div>
+	<div :class="$style.label" @click="focus"><slot name="label"></slot></div>
+	<div :class="{ [$style.disabled]: disabled, [$style.focused]: focused, [$style.tall]: tall, [$style.pre]: pre }" style="position: relative;">
 		<textarea
 			ref="inputEl"
 			v-model="v"
 			v-adaptive-border
-			:class="{ code, _monospace: code }"
+			:class="[$style.textarea, { [$style.code]: code, _monospace: code }]"
 			:disabled="disabled"
 			:required="required"
 			:readonly="readonly"
@@ -20,9 +20,9 @@
 			@input="onInput"
 		></textarea>
 	</div>
-	<div class="caption"><slot name="caption"></slot></div>
+	<div :class="$style.caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+	<MkButton v-if="manualSave && changed" primary :class="$style.save" @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 </div>
 </template>
 
@@ -111,9 +111,8 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.adhpbeos {
-	> .label {
+<style lang="scss" module>
+.label {
 	font-size: 0.85em;
 	padding: 0 0 8px 0;
 	user-select: none;
@@ -121,9 +120,9 @@ onMounted(() => {
 	&:empty {
 		display: none;
 	}
-	}
+}
 
-	> .caption {
+.caption {
 	font-size: 0.85em;
 	padding: 8px 0 0 0;
 	color: var(--fgTransparentWeak);
@@ -131,12 +130,9 @@ onMounted(() => {
 	&:empty {
 		display: none;
 	}
-	}
+}
 
-	> .input {
-		position: relative;
-
-		> textarea {
+.textarea {
 	appearance: none;
 	-webkit-appearance: none;
 	display: block;
@@ -161,37 +157,36 @@ onMounted(() => {
 	&:hover {
 		border-color: var(--inputBorderHover) !important;
 	}
-		}
+}
 
-		&.focused {
-			> textarea {
+.focused {
+	> .textarea {
 		border-color: var(--accent) !important;
 	}
-		}
+}
 
-		&.disabled {
+.disabled {
 	opacity: 0.7;
+	cursor: not-allowed !important;
 
-			&, * {
+	> .textarea {
 		cursor: not-allowed !important;
 	}
-		}
+}
 
-		&.tall {
-			> textarea {
+.tall {
+	> .textarea {
 		min-height: 200px;
 	}
-		}
+}
 
-		&.pre {
-			> textarea {
+.pre {
+	> .textarea {
 		white-space: pre;
 	}
-		}
-	}
+}
 
-	> .save {
+.save {
 	margin: 8px 0 0 0;
-	}
 }
 </style>

packages/frontend/src/components/form/link.vue

@@ -1,19 +1,19 @@
 <template>
-<div class="ffcbddfc" :class="{ inline }">
-	<a v-if="external" class="main _button" :href="to" target="_blank">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-		<span class="right">
-			<span class="text"><slot name="suffix"></slot></span>
-			<i class="ti ti-external-link icon"></i>
+<div :class="[$style.root, { [$style.inline]: inline }]">
+	<a v-if="external" :class="$style.main" class="_button" :href="to" target="_blank">
+		<span :class="$style.icon"><slot name="icon"></slot></span>
+		<span :class="$style.text"><slot></slot></span>
+		<span :class="$style.suffix">
+			<span :class="$style.suffixText"><slot name="suffix"></slot></span>
+			<i class="ti ti-external-link" :class="$style.suffixIcon"></i>
 		</span>
 	</a>
-	<MkA v-else class="main _button" :class="{ active }" :to="to" :behavior="behavior">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-		<span class="right">
-			<span class="text"><slot name="suffix"></slot></span>
-			<i class="ti ti-chevron-right icon"></i>
+	<MkA v-else :class="[$style.main, { [$style.active]: active }]" class="_button" :to="to" :behavior="behavior">
+		<span :class="$style.icon"><slot name="icon"></slot></span>
+		<span :class="$style.text"><slot></slot></span>
+		<span :class="$style.suffix">
+			<span :class="$style.suffixText"><slot name="suffix"></slot></span>
+			<i class="ti ti-chevron-right" :class="$style.suffixIcon"></i>
 		</span>
 	</MkA>
 </div>
@@ -31,15 +31,16 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-.ffcbddfc {
+<style lang="scss" module>
+.root {
 	display: block;
 
 	&.inline {
 		display: inline-block;
 	}
+}
 
-	> .main {
+.main {
 	display: flex;
 	align-items: center;
 	width: 100%;
@@ -58,8 +59,9 @@ const props = defineProps<{
 		color: var(--accent);
 		background: var(--buttonHoverBg);
 	}
+}
 
-		> .icon {
+.icon {
 	margin-right: 0.75em;
 	flex-shrink: 0;
 	text-align: center;
@@ -72,24 +74,22 @@ const props = defineProps<{
 			padding-left: 4px;
 		}
 	}
-		}
+}
 
-		> .text {
+.text {
 	flex-shrink: 1;
 	white-space: normal;
 	padding-right: 12px;
 	text-align: center;
-		}
+}
 
-		> .right {
+.suffix {
 	margin-left: auto;
 	opacity: 0.7;
 	white-space: nowrap;
 
-			> .text:not(:empty) {
+	> .suffixText:not(:empty) {
 		margin-right: 0.75em;
 	}
-		}
-	}
 }
 </style>

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

@@ -1,8 +1,8 @@
 <template>
-<section class="sdgxphyu">
-	<component :is="'h' + h">{{ block.title }}</component>
+<section>
+	<component :is="'h' + h" :class="h < 5 ? $style['h' + h] : null">{{ block.title }}</component>
 
-	<div class="children">
+	<div class="_gaps">
 		<XBlock v-for="child in block.children" :key="child.id" :page="page" :block="child" :h="h + 1"/>
 	</div>
 </section>
@@ -22,27 +22,19 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-.sdgxphyu {
-	margin: 1.5em 0;
-
-	> h2 {
+<style lang="scss" module>
+.h2 {
 	font-size: 1.35em;
 	margin: 0 0 0.5em 0;
-	}
+}
 
-	> h3 {
+.h3 {
 	font-size: 1em;
 	margin: 0 0 0.5em 0;
-	}
+}
 
-	> h4 {
+.h4 {
 	font-size: 1em;
 	margin: 0 0 0.5em 0;
-	}
-
-	> .children {
-		//padding 16px
-	}
 }
 </style>

packages/frontend/src/components/page/page.text.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="mrdgzndn">
+<div class="_gaps">
 	<Mfm :text="block.text" :isNote="false" :i="$i"/>
-	<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url"/>
+	<MkUrlPreview v-for="url in urls" :key="url" :url="url"/>
 </div>
 </template>
 
@@ -22,19 +22,3 @@ const props = defineProps<{
 
 const urls = props.block.text ? extractUrlFromMfm(mfm.parse(props.block.text)) : [];
 </script>
-
-<style lang="scss" scoped>
-.mrdgzndn {
-	&:not(:first-child) {
-		margin-top: 0.5em;
-	}
-
-	&:not(:last-child) {
-		margin-bottom: 0.5em;
-	}
-
-	> .url {
-		margin: 0.5em 0;
-	}
-}
-</style>

packages/frontend/src/components/page/page.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
+<div :class="{ [$style.center]: page.alignCenter, [$style.serif]: page.font === 'serif' }">
 	<XBlock v-for="child in page.content" :key="child.id" :block="child" :h="2"/>
 </div>
 </template>
@@ -14,16 +14,12 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-.iroscrza {
-	&.serif {
-		> div {
+<style lang="scss" module>
+.serif {
 	font-family: serif;
-		}
-	}
+}
 
-	&.center {
+.center {
 	text-align: center;
-	}
 }
 </style>

packages/frontend/src/pages/admin/relays.vue

@@ -5,10 +5,10 @@
 		<div class="_gaps">
 			<div v-for="relay in relays" :key="relay.inbox" class="relaycxt _panel" style="padding: 16px;">
 				<div>{{ relay.inbox }}</div>
-				<div class="status">
-					<i v-if="relay.status === 'accepted'" class="ti ti-check icon accepted"></i>
-					<i v-else-if="relay.status === 'rejected'" class="ti ti-ban icon rejected"></i>
-					<i v-else class="ti ti-clock icon requesting"></i>
+				<div style="margin: 8px 0;">
+					<i v-if="relay.status === 'accepted'" class="ti ti-check" :class="$style.icon" style="color: var(--success);"></i>
+					<i v-else-if="relay.status === 'rejected'" class="ti ti-ban" :class="$style.icon" style="color: var(--error);"></i>
+					<i v-else class="ti ti-clock" :class="$style.icon"></i>
 					<span>{{ i18n.t(`_relayStatus.${relay.status}`) }}</span>
 				</div>
 				<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
@@ -83,23 +83,9 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
-.relaycxt {
-	> .status {
-		margin: 8px 0;
-
-		> .icon {
+<style lang="scss" module>
+.icon {
 	width: 1em;
 	margin-right: 0.75em;
-
-			&.accepted {
-				color: var(--success);
-			}
-
-			&.rejected {
-				color: var(--error);
-			}
-		}
-	}
 }
 </style>

packages/frontend/src/pages/flash/flash-index.vue

@@ -2,29 +2,29 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<div v-if="tab === 'featured'" class="">
+		<div v-if="tab === 'featured'">
 			<MkPagination v-slot="{items}" :pagination="featuredFlashsPagination">
 				<div class="_gaps_s">
-					<MkFlashPreview v-for="flash in items" :key="flash.id" class="" :flash="flash"/>
+					<MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash"/>
 				</div>
 			</MkPagination>
 		</div>
 
-		<div v-else-if="tab === 'my'" class="my">
+		<div v-else-if="tab === 'my'">
 			<div class="_gaps">
-				<MkButton class="new" gradate rounded style="margin: 0 auto;" @click="create()"><i class="ti ti-plus"></i></MkButton>
+				<MkButton gradate rounded style="margin: 0 auto;" @click="create()"><i class="ti ti-plus"></i></MkButton>
 				<MkPagination v-slot="{items}" :pagination="myFlashsPagination">
 					<div class="_gaps_s">
-						<MkFlashPreview v-for="flash in items" :key="flash.id" class="" :flash="flash"/>
+						<MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash"/>
 					</div>
 				</MkPagination>
 			</div>
 		</div>
 
-		<div v-else-if="tab === 'liked'" class="">
+		<div v-else-if="tab === 'liked'">
 			<MkPagination v-slot="{items}" :pagination="likedFlashsPagination">
 				<div class="_gaps_s">
-					<MkFlashPreview v-for="like in items" :key="like.flash.id" class="" :flash="like.flash"/>
+					<MkFlashPreview v-for="like in items" :key="like.flash.id" :flash="like.flash"/>
 				</div>
 			</MkPagination>
 		</div>
@@ -87,21 +87,3 @@ definePageMetadata(computed(() => ({
 	icon: 'ti ti-player-play',
 })));
 </script>
-
-<style lang="scss" scoped>
-.rknalgpo {
-	&.my .ckltabjg:first-child {
-		margin-top: 16px;
-	}
-
-	.ckltabjg:not(:last-child) {
-		margin-bottom: 8px;
-	}
-
-	@media (min-width: 500px) {
-		.ckltabjg:not(:last-child) {
-			margin-bottom: 16px;
-		}
-	}
-}
-</style>

packages/frontend/src/pages/my-lists/index.vue

@@ -2,14 +2,16 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
-		<div class="qkcjvfiv">
-			<MkButton primary class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
+		<div class="_gaps">
+			<MkButton primary rounded style="margin: 0 auto;" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
 
-			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists">
-				<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
-					<div class="name">{{ list.name }}</div>
+			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination">
+				<div class="_gaps">
+					<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/my/lists/${ list.id }`">
+						<div style="margin-bottom: 4px;">{{ list.name }}</div>
 						<MkAvatars :userIds="list.userIds"/>
 					</MkA>
+				</div>
 			</MkPagination>
 		</div>
 	</MkSpacer>
@@ -58,14 +60,8 @@ definePageMetadata({
 });
 </script>
 
-<style lang="scss" scoped>
-.qkcjvfiv {
-	> .add {
-		margin: 0 auto var(--margin) auto;
-	}
-
-	> .lists {
-		> .list {
+<style lang="scss" module>
+.list {
 	display: block;
 	padding: 16px;
 	border: solid 1px var(--divider);
@@ -76,11 +72,5 @@ definePageMetadata({
 		border: solid 1px var(--accent);
 		text-decoration: none;
 	}
-
-			> .name {
-				margin-bottom: 4px;
-			}
-		}
-	}
 }
 </style>