diff --git a/packages/frontend/src/components/MkAbuseReportWindow.vue b/packages/frontend/src/components/MkAbuseReportWindow.vue
index 9f2bf993389f89c3e0b55fb5d1ca1805c7609135..7a1b7d532e1268d69499bc23e49dc47ac974f294 100644
--- a/packages/frontend/src/components/MkAbuseReportWindow.vue
+++ b/packages/frontend/src/components/MkAbuseReportWindow.vue
@@ -9,7 +9,7 @@
</I18n>
</template>
<MkSpacer :margin-min="20" :margin-max="28">
- <div class="dpvffvvy _gaps_m">
+ <div class="_gaps_m" :class="$style.root">
<div class="">
<MkTextarea v-model="comment">
<template #label>{{ i18n.ts.details }}</template>
@@ -60,8 +60,8 @@ function send() {
}
</script>
-<style lang="scss" scoped>
-.dpvffvvy {
+<style lang="scss" module>
+.root {
--root-margin: 16px;
}
</style>
diff --git a/packages/frontend/src/components/MkChannelList.vue b/packages/frontend/src/components/MkChannelList.vue
index 408eab7399e6a56603a418cd1b4f06659c6f9dc6..4050520eb9bedd7c542c8be4768df20a7d61eb4f 100644
--- a/packages/frontend/src/components/MkChannelList.vue
+++ b/packages/frontend/src/components/MkChannelList.vue
@@ -26,6 +26,3 @@ const props = withDefaults(defineProps<{
extractor: (item) => item,
});
</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/frontend/src/components/MkObjectView.vue b/packages/frontend/src/components/MkObjectView.vue
index 55578a37f6b0c799bd7e3231b70f70a0a275df94..8b1ed74142b78a7e587a422583ba32fcb4640507 100644
--- a/packages/frontend/src/components/MkObjectView.vue
+++ b/packages/frontend/src/components/MkObjectView.vue
@@ -1,5 +1,5 @@
<template>
-<div class="zhyxdalp">
+<div>
<XValue :value="value" :collapsed="false"/>
</div>
</template>
@@ -12,9 +12,3 @@ const props = defineProps<{
value: Record<string, unknown>;
}>();
</script>
-
-<style lang="scss" scoped>
-.zhyxdalp {
-
-}
-</style>
diff --git a/packages/frontend/src/components/MkRetentionLineChart.vue b/packages/frontend/src/components/MkRetentionLineChart.vue
index 8bd0279806208bf9424600196e14abe2061d6e19..9f56189f3efc2cd837f0293e598f288a22217b99 100644
--- a/packages/frontend/src/components/MkRetentionLineChart.vue
+++ b/packages/frontend/src/components/MkRetentionLineChart.vue
@@ -124,7 +124,3 @@ onMounted(async () => {
});
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/components/MkRippleEffect.vue b/packages/frontend/src/components/MkRippleEffect.vue
index 9d93211d5f8aace5d3825ec1c0cdd9b4f1e72674..60c3a47385a592f2b95add8ba970a49912f12908 100644
--- a/packages/frontend/src/components/MkRippleEffect.vue
+++ b/packages/frontend/src/components/MkRippleEffect.vue
@@ -1,7 +1,7 @@
<template>
-<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
+<div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
- <circle fill="none" cx="64" cy="64">
+ <circle fill="none" cx="64" cy="64" style="stroke: var(--accent);">
<animate
attributeName="r"
begin="0s" dur="0.5s"
@@ -22,7 +22,7 @@
/>
</circle>
<g fill="none" fill-rule="evenodd">
- <circle v-for="(particle, i) in particles" :key="i" :fill="particle.color">
+ <circle v-for="(particle, i) in particles" :key="i" :fill="particle.color" style="stroke: var(--accent);">
<animate
attributeName="r"
begin="0s" dur="0.8s"
@@ -100,17 +100,11 @@ onMounted(() => {
});
</script>
-<style lang="scss" scoped>
-.vswabwbm {
+<style lang="scss" module>
+.root {
pointer-events: none;
position: fixed;
width: 128px;
height: 128px;
-
- > svg {
- > circle {
- stroke: var(--accent);
- }
- }
}
</style>
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
index ffc5e82b56198de5a2c3f3acaa0cf2186d95b756..6eae8ecf84d198130a1bf9eec30755bda94c5b6e 100644
--- a/packages/frontend/src/components/MkSignin.vue
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -1,7 +1,7 @@
<template>
-<form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
- <div class="auth _gaps_m">
- <div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
+<form :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
+ <div class="_gaps_m">
+ <div v-show="withAvatar" :class="$style.avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
<MkInfo v-if="message">
{{ message }}
</MkInfo>
@@ -236,18 +236,14 @@ function resetPassword() {
}
</script>
-<style lang="scss" scoped>
-.eppvobhk {
- > .auth {
- > .avatar {
- margin: 0 auto 0 auto;
- width: 64px;
- height: 64px;
- background: #ddd;
- background-position: center;
- background-size: cover;
- border-radius: 100%;
- }
- }
+<style lang="scss" module>
+.avatar {
+ margin: 0 auto 0 auto;
+ width: 64px;
+ height: 64px;
+ background: #ddd;
+ background-position: center;
+ background-size: cover;
+ border-radius: 100%;
}
</style>
diff --git a/packages/frontend/src/components/MkUrlPreviewPopup.vue b/packages/frontend/src/components/MkUrlPreviewPopup.vue
index e244be3e963b3d3e5bd50690486f4c5e8a574847..30204b91c1300dc6322e064e8529d6a7e5e04b00 100644
--- a/packages/frontend/src/components/MkUrlPreviewPopup.vue
+++ b/packages/frontend/src/components/MkUrlPreviewPopup.vue
@@ -1,5 +1,5 @@
<template>
-<div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
+<div :class="$style.root" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
<Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" @after-leave="emit('closed')">
<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/>
</Transition>
@@ -36,8 +36,8 @@ onMounted(() => {
});
</script>
-<style lang="scss" scoped>
-.fgmtyycl {
+<style lang="scss" module>
+.root {
position: absolute;
width: 500px;
max-width: calc(90vw - 12px);
diff --git a/packages/frontend/src/components/page/page.button.vue b/packages/frontend/src/components/page/page.button.vue
index 83931021d856376ee7f62d64dfe1622aa68659bd..8e89023fd71146585716db6c90ed168be25b3d2b 100644
--- a/packages/frontend/src/components/page/page.button.vue
+++ b/packages/frontend/src/components/page/page.button.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
+ <MkButton :class="$style.button" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
</div>
</template>
@@ -56,8 +56,8 @@ export default defineComponent({
});
</script>
-<style lang="scss" scoped>
-.kudkigyw {
+<style lang="scss" module>
+.button {
display: inline-block;
min-width: 200px;
max-width: 450px;
diff --git a/packages/frontend/src/components/page/page.counter.vue b/packages/frontend/src/components/page/page.counter.vue
index 63fde6a1207f9bc5cf51a7f240a73924f95db9df..3f282a2e512f51cc2312ae1f7697697f89a67697 100644
--- a/packages/frontend/src/components/page/page.counter.vue
+++ b/packages/frontend/src/components/page/page.counter.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkButton class="llumlmnx" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
+ <MkButton :class="$style.button" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
</div>
</template>
@@ -41,8 +41,8 @@ export default defineComponent({
});
</script>
-<style lang="scss" scoped>
-.llumlmnx {
+<style lang="scss" module>
+.button {
display: inline-block;
min-width: 300px;
max-width: 450px;
diff --git a/packages/frontend/src/components/page/page.note.vue b/packages/frontend/src/components/page/page.note.vue
index 8c65dabf08471966ecf0ec495cf26696ec627675..7c620184d722c3c71034f555948540d7c8722088 100644
--- a/packages/frontend/src/components/page/page.note.vue
+++ b/packages/frontend/src/components/page/page.note.vue
@@ -1,5 +1,5 @@
<template>
-<div class="voxdxuby">
+<div style="margin: 1em 0;">
<MkNote v-if="note && !block.detailed" :key="note.id + ':normal'" v-model:note="note"/>
<MkNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" v-model:note="note"/>
</div>
@@ -28,9 +28,9 @@ export default defineComponent({
onMounted(() => {
os.api('notes/show', { noteId: props.block.note })
- .then(result => {
- note.value = result;
- });
+ .then(result => {
+ note.value = result;
+ });
});
return {
@@ -39,9 +39,3 @@ export default defineComponent({
},
});
</script>
-
-<style lang="scss" scoped>
-.voxdxuby {
- margin: 1em 0;
-}
-</style>
diff --git a/packages/frontend/src/components/page/page.number-input.vue b/packages/frontend/src/components/page/page.number-input.vue
index 72c1b6deb091fbcd68329fe3381f3cd384cbb81c..9cac3b4f0d30c7c285a3e1d0af4c282be7d77c29 100644
--- a/packages/frontend/src/components/page/page.number-input.vue
+++ b/packages/frontend/src/components/page/page.number-input.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkInput class="kudkigyw" :model-value="value" type="number" @update:model-value="updateValue($event)">
+ <MkInput :class="$style.input" :model-value="value" type="number" @update:model-value="updateValue($event)">
<template #label>{{ hpml.interpolate(block.text) }}</template>
</MkInput>
</div>
@@ -44,8 +44,8 @@ export default defineComponent({
});
</script>
-<style lang="scss" scoped>
-.kudkigyw {
+<style lang="scss" module>
+.input {
display: inline-block;
min-width: 300px;
max-width: 450px;
diff --git a/packages/frontend/src/components/page/page.text-input.vue b/packages/frontend/src/components/page/page.text-input.vue
index d020a99de88318fc7dfa8c521885f12a9377d0b4..1df45fefed6ff3156b9fb578b17df72f45743dd6 100644
--- a/packages/frontend/src/components/page/page.text-input.vue
+++ b/packages/frontend/src/components/page/page.text-input.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <MkInput class="kudkigyw" :model-value="value" type="text" @update:model-value="updateValue($event)">
+ <MkInput :class="$style.input" :model-value="value" type="text" @update:model-value="updateValue($event)">
<template #label>{{ hpml.interpolate(block.text) }}</template>
</MkInput>
</div>
@@ -44,8 +44,8 @@ export default defineComponent({
});
</script>
-<style lang="scss" scoped>
-.kudkigyw {
+<style lang="scss" module>
+.input {
display: inline-block;
min-width: 300px;
max-width: 450px;
diff --git a/packages/frontend/src/pages/admin/abuses.vue b/packages/frontend/src/pages/admin/abuses.vue
index 9e8af43024e6eca006fe08db606a2ad5401bb7e8..f8200570f9ca02094d7d3a14d4290dc8df0aee9f 100644
--- a/packages/frontend/src/pages/admin/abuses.vue
+++ b/packages/frontend/src/pages/admin/abuses.vue
@@ -2,7 +2,7 @@
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="900">
- <div class="lcixvhis">
+ <div>
<div class="reports">
<div class="">
<div class="inputs" style="display: flex;">
@@ -87,9 +87,3 @@ definePageMetadata({
icon: 'ti ti-exclamation-circle',
});
</script>
-
-<style lang="scss" scoped>
-.lcixvhis {
- margin: var(--margin);
-}
-</style>
diff --git a/packages/frontend/src/pages/admin/announcements.vue b/packages/frontend/src/pages/admin/announcements.vue
index b76e4b911491f854b29d5d9ceb5edb9259db46cc..638b193c116eac4939809aff579d74f00d8d3d5d 100644
--- a/packages/frontend/src/pages/admin/announcements.vue
+++ b/packages/frontend/src/pages/admin/announcements.vue
@@ -2,7 +2,7 @@
<MkStickyContainer>
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="900">
- <div class="ztgjmzrw _gaps_m">
+ <div class="_gaps_m">
<section v-for="announcement in announcements" class="">
<div class="_panel _gaps_m" style="padding: 24px;">
<MkInput v-model="announcement.title">
@@ -113,9 +113,3 @@ definePageMetadata({
icon: 'ti ti-speakerphone',
});
</script>
-
-<style lang="scss" scoped>
-.ztgjmzrw {
- margin: var(--margin);
-}
-</style>
diff --git a/packages/frontend/src/pages/admin/files.vue b/packages/frontend/src/pages/admin/files.vue
index c189437246abc1d6b005bdfd7cb44246d918e98f..2b13a7c80c2d14e124f0b190fbaf10f9c29517cb 100644
--- a/packages/frontend/src/pages/admin/files.vue
+++ b/packages/frontend/src/pages/admin/files.vue
@@ -3,7 +3,7 @@
<MkStickyContainer>
<template #header><XHeader :actions="headerActions"/></template>
<MkSpacer :content-max="900">
- <div class="xrmjdkdw">
+ <div>
<div>
<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
<MkSelect v-model="origin" style="margin: 0; flex: 1;">
@@ -109,9 +109,3 @@ definePageMetadata(computed(() => ({
icon: 'ti ti-cloud',
})));
</script>
-
-<style lang="scss" scoped>
-.xrmjdkdw {
- margin: var(--margin);
-}
-</style>
diff --git a/packages/frontend/src/pages/admin/overview.pie.vue b/packages/frontend/src/pages/admin/overview.pie.vue
index 08a29bf550373933f6c13cee800f352069c7d84e..af7bc70551fbb0c1ca1a26e0fbf0149b78a7b088 100644
--- a/packages/frontend/src/pages/admin/overview.pie.vue
+++ b/packages/frontend/src/pages/admin/overview.pie.vue
@@ -67,7 +67,3 @@ onMounted(() => {
});
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/admin/overview.queue.chart.vue b/packages/frontend/src/pages/admin/overview.queue.chart.vue
index 6a11e8b768fa622c0ab6232aeb9f508c92b7b387..a3c8659ce5e3cac71cc2138386642bdad7469625 100644
--- a/packages/frontend/src/pages/admin/overview.queue.chart.vue
+++ b/packages/frontend/src/pages/admin/overview.queue.chart.vue
@@ -132,7 +132,3 @@ defineExpose({
pushData,
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/admin/overview.vue b/packages/frontend/src/pages/admin/overview.vue
index 5c96c07bfbe2a5256f71a64c131d0c7a6ea0a0fb..bdfb200a887ca2159fea9f98d7dbfac5c9a786a4 100644
--- a/packages/frontend/src/pages/admin/overview.vue
+++ b/packages/frontend/src/pages/admin/overview.vue
@@ -1,6 +1,6 @@
<template>
<MkSpacer :content-max="1000">
- <div ref="rootEl" class="edbbcaef">
+ <div ref="rootEl" :class="$style.root">
<MkFoldableSection class="item">
<template #header>Stats</template>
<XStats/>
@@ -176,8 +176,8 @@ definePageMetadata({
});
</script>
-<style lang="scss" scoped>
-.edbbcaef {
+<style lang="scss" module>
+.root {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-gap: 16px;
diff --git a/packages/frontend/src/pages/admin/queue.chart.chart.vue b/packages/frontend/src/pages/admin/queue.chart.chart.vue
index 1a1f6a9db4dd434426d8a6ba50a5f0824547f348..9bc0eee2124fdce9806d66a7eed071eec5791800 100644
--- a/packages/frontend/src/pages/admin/queue.chart.chart.vue
+++ b/packages/frontend/src/pages/admin/queue.chart.chart.vue
@@ -132,7 +132,3 @@ defineExpose({
pushData,
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/emoji-edit-dialog.vue b/packages/frontend/src/pages/emoji-edit-dialog.vue
index 84bc153b71d4d75fcbb7a669655f4bd3ff68ce4f..3c829d6a8ea7b6db9baf67bfd93ffa3643d20ca0 100644
--- a/packages/frontend/src/pages/emoji-edit-dialog.vue
+++ b/packages/frontend/src/pages/emoji-edit-dialog.vue
@@ -10,8 +10,8 @@
<template #header>:{{ emoji.name }}:</template>
<MkSpacer :margin-min="20" :margin-max="28">
- <div class="yigymqpb _gaps_m">
- <img :src="`/emoji/${emoji.name}.webp`" class="img"/>
+ <div class="_gaps_m">
+ <img :src="`/emoji/${emoji.name}.webp`" :class="$style.img"/>
<MkInput v-model="name">
<template #label>{{ i18n.ts.name }}</template>
</MkInput>
@@ -99,12 +99,10 @@ async function del() {
}
</script>
-<style lang="scss" scoped>
-.yigymqpb {
- > .img {
- display: block;
- height: 64px;
- margin: 0 auto;
- }
+<style lang="scss" module>
+.img {
+ display: block;
+ height: 64px;
+ margin: 0 auto;
}
</style>
diff --git a/packages/frontend/src/pages/flash/flash-edit.vue b/packages/frontend/src/pages/flash/flash-edit.vue
index 816825e5b6e5649d7062cb20e2939196664a8b87..5e875d195bc4b77644a5f09c8a1b9ba46fde63fb 100644
--- a/packages/frontend/src/pages/flash/flash-edit.vue
+++ b/packages/frontend/src/pages/flash/flash-edit.vue
@@ -442,7 +442,3 @@ definePageMetadata(computed(() => flash ? {
title: i18n.ts._play.new,
}));
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/gallery/index.vue b/packages/frontend/src/pages/gallery/index.vue
index fc9cc7ae9e997f4345783a510bbe293aee69bdd6..3855a6d9d8ef26e0c88d187a4f9b160298962483 100644
--- a/packages/frontend/src/pages/gallery/index.vue
+++ b/packages/frontend/src/pages/gallery/index.vue
@@ -7,7 +7,7 @@
<MkFoldableSection class="_margin">
<template #header><i class="ti ti-clock"></i>{{ i18n.ts.recentPosts }}</template>
<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
- <div class="vfpdbgtk">
+ <div :class="$style.items">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
@@ -15,7 +15,7 @@
<MkFoldableSection class="_margin">
<template #header><i class="ti ti-comet"></i>{{ i18n.ts.popularPosts }}</template>
<MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
- <div class="vfpdbgtk">
+ <div :class="$style.items">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
@@ -23,7 +23,7 @@
</div>
<div v-else-if="tab === 'liked'">
<MkPagination v-slot="{items}" :pagination="likedPostsPagination">
- <div class="vfpdbgtk">
+ <div :class="$style.items">
<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
</div>
</MkPagination>
@@ -31,7 +31,7 @@
<div v-else-if="tab === 'my'">
<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ti ti-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
<MkPagination v-slot="{items}" :pagination="myPostsPagination">
- <div class="vfpdbgtk">
+ <div :class="$style.items">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
@@ -119,15 +119,11 @@ definePageMetadata({
});
</script>
-<style lang="scss" scoped>
-.vfpdbgtk {
+<style lang="scss" module>
+.items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: 12px;
margin: 0 var(--margin);
-
- > .post {
-
- }
}
</style>
diff --git a/packages/frontend/src/pages/my-antennas/create.vue b/packages/frontend/src/pages/my-antennas/create.vue
index c35af3e22a8c04ea84bfd090e9485d9ee2f75fe7..14ab18a3dfa44857c6fe7166248792bd62fb1641 100644
--- a/packages/frontend/src/pages/my-antennas/create.vue
+++ b/packages/frontend/src/pages/my-antennas/create.vue
@@ -38,7 +38,3 @@ definePageMetadata({
icon: 'ti ti-antenna',
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/my-antennas/edit.vue b/packages/frontend/src/pages/my-antennas/edit.vue
index 913fbde8e95620fe1b1c51f60d899b1c9c964712..da9b2de48f1d67b54ecbeb34c715d6194bc15e29 100644
--- a/packages/frontend/src/pages/my-antennas/edit.vue
+++ b/packages/frontend/src/pages/my-antennas/edit.vue
@@ -36,7 +36,3 @@ definePageMetadata({
icon: 'ti ti-antenna',
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/my-antennas/editor.vue b/packages/frontend/src/pages/my-antennas/editor.vue
index 26b7bcc71b6614e017a510cc6b075b588fcd392f..dd5f3222afc69dc726ac6878f6945c229ee4be02 100644
--- a/packages/frontend/src/pages/my-antennas/editor.vue
+++ b/packages/frontend/src/pages/my-antennas/editor.vue
@@ -1,6 +1,6 @@
<template>
<MkSpacer :content-max="700">
- <div class="shaynizk">
+ <div>
<div class="_gaps_m">
<MkInput v-model="name">
<template #label>{{ i18n.ts.name }}</template>
@@ -33,7 +33,7 @@
<MkSwitch v-model="withFile">{{ i18n.ts.withFileAntenna }}</MkSwitch>
<MkSwitch v-model="notify">{{ i18n.ts.notifyAntenna }}</MkSwitch>
</div>
- <div class="actions">
+ <div :class="$style.actions">
<MkButton inline primary @click="saveAntenna()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
<MkButton v-if="antenna.id != null" inline danger @click="deleteAntenna()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</div>
@@ -128,12 +128,10 @@ function addUser() {
}
</script>
-<style lang="scss" scoped>
-.shaynizk {
- > .actions {
- margin-top: 16px;
- padding: 24px 0;
- border-top: solid 0.5px var(--divider);
- }
+<style lang="scss" module>
+.actions {
+ margin-top: 16px;
+ padding: 24px 0;
+ border-top: solid 0.5px var(--divider);
}
</style>
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
index 1b292e8f3c8e8394772638ffeaf53f526d23c687..eca3feda62f02bf306681660514b7be94f71bc89 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
@@ -8,8 +8,8 @@
</button>
</template>
- <section class="oyyftmcf">
- <MkDriveFileThumbnail v-if="file" class="preview" :file="file" fit="contain" @click="choose()"/>
+ <section>
+ <MkDriveFileThumbnail v-if="file" style="height: 150px;" :file="file" fit="contain" @click="choose()"/>
</section>
</XContainer>
</template>
@@ -54,11 +54,3 @@ onMounted(async () => {
}
});
</script>
-
-<style lang="scss" scoped>
-.oyyftmcf {
- > .preview {
- height: 150px;
- }
-}
-</style>
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
index bf21ae3c676e64577a4a8872d6bfd172356d62e5..3b15c17747a48d6913bb8eb8897ff9706d763c7f 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
@@ -3,8 +3,8 @@
<XContainer :draggable="true" @remove="() => $emit('remove')">
<template #header><i class="ti ti-align-left"></i> {{ i18n.ts._pages.blocks.text }}</template>
- <section class="vckmsadr">
- <textarea v-model="text"></textarea>
+ <section>
+ <textarea v-model="text" :class="$style.textarea"></textarea>
</section>
</XContainer>
</template>
@@ -33,23 +33,21 @@ watch($$(text), () => {
});
</script>
-<style lang="scss" scoped>
-.vckmsadr {
- > textarea {
- display: block;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- width: 100%;
- min-width: 100%;
- min-height: 150px;
- border: none;
- box-shadow: none;
- padding: 16px;
- background: transparent;
- color: var(--fg);
- font-size: 14px;
- box-sizing: border-box;
- }
+<style lang="scss" module>
+.textarea {
+ display: block;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ width: 100%;
+ min-width: 100%;
+ min-height: 150px;
+ border: none;
+ box-shadow: none;
+ padding: 16px;
+ background: transparent;
+ color: var(--fg);
+ font-size: 14px;
+ box-sizing: border-box;
}
</style>
diff --git a/packages/frontend/src/pages/preview.vue b/packages/frontend/src/pages/preview.vue
index 354f686e467c70138ce7f39d190686fae0b16ae4..952af23a53f2a257d81192a35ee08224fdd9f464 100644
--- a/packages/frontend/src/pages/preview.vue
+++ b/packages/frontend/src/pages/preview.vue
@@ -1,5 +1,5 @@
<template>
-<div class="graojtoi">
+<div>
<MkSample/>
</div>
</template>
@@ -19,9 +19,3 @@ definePageMetadata(computed(() => ({
icon: 'ti ti-eye',
})));
</script>
-
-<style lang="scss" scoped>
-.graojtoi {
- padding: var(--margin);
-}
-</style>
diff --git a/packages/frontend/src/pages/registry.keys.vue b/packages/frontend/src/pages/registry.keys.vue
index c687b89eab09c2f947b118c7ad2be84e50ba8ecc..52b7c256e0556bb79cde53a290911561f3bd14da 100644
--- a/packages/frontend/src/pages/registry.keys.vue
+++ b/packages/frontend/src/pages/registry.keys.vue
@@ -93,6 +93,3 @@ definePageMetadata({
icon: 'ti ti-adjustments',
});
</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/frontend/src/pages/registry.value.vue b/packages/frontend/src/pages/registry.value.vue
index 00e2ca5e036dbf130ae2cf02ff2ce43358d12a34..6ff07e2b771d7d15730e23ba73b6eea8432f68ed 100644
--- a/packages/frontend/src/pages/registry.value.vue
+++ b/packages/frontend/src/pages/registry.value.vue
@@ -118,6 +118,3 @@ definePageMetadata({
icon: 'ti ti-adjustments',
});
</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/frontend/src/pages/registry.vue b/packages/frontend/src/pages/registry.vue
index 5a029cb0c7e7462035e63bc55b347b8ba3edadcf..016af22815fd43da1e031e88aa57b95401ea0837 100644
--- a/packages/frontend/src/pages/registry.vue
+++ b/packages/frontend/src/pages/registry.vue
@@ -68,6 +68,3 @@ definePageMetadata({
icon: 'ti ti-adjustments',
});
</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/frontend/src/pages/reset-password.vue b/packages/frontend/src/pages/reset-password.vue
index 38c88cc650ea676863dfc76b3ff822ba56b51289..ab7a96a8d03580ec9461eaf350a7bf79063cd923 100644
--- a/packages/frontend/src/pages/reset-password.vue
+++ b/packages/frontend/src/pages/reset-password.vue
@@ -53,7 +53,3 @@ definePageMetadata({
icon: 'ti ti-lock',
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/settings/plugin.vue b/packages/frontend/src/pages/settings/plugin.vue
index 8b57dceefbff3f6d3b3e46ee625f98381e3e6f0a..f90ca737e9a95229b55045b5f20c2dbf7f108d08 100644
--- a/packages/frontend/src/pages/settings/plugin.vue
+++ b/packages/frontend/src/pages/settings/plugin.vue
@@ -94,7 +94,3 @@ definePageMetadata({
icon: 'ti ti-plug',
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 6ffd6826108839dbe650f317d9f0f62c96ba0d2b..dd552ed92b72af166cf061ac8c3e8f4c04f3780f 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -1,11 +1,11 @@
<template>
<div class="_gaps_m">
- <div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
- <div class="avatar">
- <MkAvatar class="avatar" :user="$i" @click="changeAvatar"/>
- <MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
+ <div :class="$style.avatarAndBanner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
+ <div :class="$style.avatarContainer">
+ <MkAvatar :class="$style.avatar" :user="$i" @click="changeAvatar"/>
+ <MkButton primary rounded :class="$style.avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
</div>
- <MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
+ <MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
</div>
<MkInput v-model="profile.name" :max="30" manual-save>
@@ -248,36 +248,39 @@ definePageMetadata({
});
</script>
-<style lang="scss" scoped>
-.llvierxe {
+<style lang="scss" module>
+.avatarAndBanner {
position: relative;
background-size: cover;
background-position: center;
border: solid 1px var(--divider);
border-radius: 10px;
overflow: clip;
+}
- > .avatar {
- display: inline-block;
- text-align: center;
- padding: 16px;
+.avatarContainer {
+ display: inline-block;
+ text-align: center;
+ padding: 16px;
+}
- > .avatar {
- display: inline-block;
- width: 72px;
- height: 72px;
- margin: 0 auto 16px auto;
- }
- }
+.avatar {
+ display: inline-block;
+ width: 72px;
+ height: 72px;
+ margin: 0 auto 16px auto;
+}
- > .bannerEdit {
- position: absolute;
- top: 16px;
- right: 16px;
- }
+.avatarEdit {
+
}
-</style>
-<style lang="scss" module>
+
+.bannerEdit {
+ position: absolute;
+ top: 16px;
+ right: 16px;
+}
+
.metadataRoot {
container-type: inline-size;
}
diff --git a/packages/frontend/src/pages/settings/reaction.vue b/packages/frontend/src/pages/settings/reaction.vue
index ed913731d36b41afe81c4076eb8c50e5bfa15a62..10169ccf1847612a1ca1076f45bb9bb7907b73e5 100644
--- a/packages/frontend/src/pages/settings/reaction.vue
+++ b/packages/frontend/src/pages/settings/reaction.vue
@@ -3,15 +3,15 @@
<FromSlot>
<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
<div v-panel style="border-radius: 6px;">
- <Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
+ <Sortable v-model="reactions" :class="$style.reactions" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
<template #item="{element}">
- <button class="_button item" @click="remove(element, $event)">
+ <button class="_button" :class="$style.reactionsItem" @click="remove(element, $event)">
<MkCustomEmoji v-if="element[0] === ':'" :name="element" :normal="true"/>
<MkEmoji v-else :emoji="element" :normal="true"/>
</button>
</template>
<template #footer>
- <button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
+ <button class="_button" :class="$style.reactionsAdd" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
</template>
</Sortable>
</div>
@@ -135,20 +135,20 @@ definePageMetadata({
});
</script>
-<style lang="scss" scoped>
-.zoaiodol {
+<style lang="scss" module>
+.reactions {
padding: 12px;
font-size: 1.1em;
+}
- > .item {
- display: inline-block;
- padding: 8px;
- cursor: move;
- }
+.reactionsItem {
+ display: inline-block;
+ padding: 8px;
+ cursor: move;
+}
- > .add {
- display: inline-block;
- padding: 8px;
- }
+.reactionsAdd {
+ display: inline-block;
+ padding: 8px;
}
</style>
diff --git a/packages/frontend/src/pages/share.vue b/packages/frontend/src/pages/share.vue
index 78e0710162aff4edd01393002ea79b4cba1ea9d8..5abb234893d5f828105fb729739376848e6bfabd 100644
--- a/packages/frontend/src/pages/share.vue
+++ b/packages/frontend/src/pages/share.vue
@@ -16,7 +16,7 @@
class="_panel"
@posted="state = 'posted'"
/>
- <MkButton v-else-if="state === 'posted'" primary class="close" @click="close()">{{ i18n.ts.close }}</MkButton>
+ <MkButton v-else-if="state === 'posted'" primary :class="$style.close" @click="close()">{{ i18n.ts.close }}</MkButton>
</MkSpacer>
</MkStickyContainer>
</template>
@@ -162,7 +162,7 @@ definePageMetadata({
});
</script>
-<style lang="scss" scoped>
+<style lang="scss" module>
.close {
margin: 16px auto;
}
diff --git a/packages/frontend/src/pages/signup-complete.vue b/packages/frontend/src/pages/signup-complete.vue
index 545953231032da2655ec717c9906fee373311714..079cbb3d33235a572a8c8f20481bd7a690553fd7 100644
--- a/packages/frontend/src/pages/signup-complete.vue
+++ b/packages/frontend/src/pages/signup-complete.vue
@@ -35,7 +35,3 @@ definePageMetadata({
icon: 'ti ti-user',
});
</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/frontend/src/widgets/WidgetActivity.chart.vue b/packages/frontend/src/widgets/WidgetActivity.chart.vue
index b61e419f9466a76f776924b6276e4922cd31ccb9..cc4df65dd2f1c9484f06dc790eb256812e40e0da 100644
--- a/packages/frontend/src/widgets/WidgetActivity.chart.vue
+++ b/packages/frontend/src/widgets/WidgetActivity.chart.vue
@@ -1,26 +1,30 @@
<template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" @mousedown.prevent="onMousedown">
+<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" :class="$style.root" @mousedown.prevent="onMousedown">
<polyline
:points="pointsNote"
fill="none"
stroke-width="1"
- stroke="#41ddde"/>
+ stroke="#41ddde"
+ />
<polyline
:points="pointsReply"
fill="none"
stroke-width="1"
- stroke="#f7796c"/>
+ stroke="#f7796c"
+ />
<polyline
:points="pointsRenote"
fill="none"
stroke-width="1"
- stroke="#a1de41"/>
+ stroke="#a1de41"
+ />
<polyline
:points="pointsTotal"
fill="none"
stroke-width="1"
stroke="#555"
- stroke-dasharray="2 2"/>
+ stroke-dasharray="2 2"
+ />
</svg>
</template>
@@ -81,8 +85,8 @@ function render() {
}
</script>
-<style lang="scss" scoped>
-svg {
+<style lang="scss" module>
+.root {
display: block;
padding: 16px;
width: 100%;
diff --git a/packages/frontend/src/widgets/WidgetAichan.vue b/packages/frontend/src/widgets/WidgetAichan.vue
index 37326ee981f3aa9b839be0bff1b0f4b4880e4ce2..0c485441d2cbb6e0daa6dfdbbe8b4221e43cd6c0 100644
--- a/packages/frontend/src/widgets/WidgetAichan.vue
+++ b/packages/frontend/src/widgets/WidgetAichan.vue
@@ -1,6 +1,6 @@
<template>
<MkContainer :naked="widgetProps.transparent" :show-header="false" data-cy-mkw-aichan class="mkw-aichan">
- <iframe ref="live2d" class="dedjhjmo" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100" @click="touched"></iframe>
+ <iframe ref="live2d" :class="$style.root" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100" @click="touched"></iframe>
</MkContainer>
</template>
@@ -64,8 +64,8 @@ defineExpose<WidgetComponentExpose>({
});
</script>
-<style lang="scss" scoped>
-.dedjhjmo {
+<style lang="scss" module>
+.root {
width: 100%;
height: 350px;
border: none;
diff --git a/packages/frontend/src/widgets/WidgetButton.vue b/packages/frontend/src/widgets/WidgetButton.vue
index 9eee9680dbf6dd1a3dcaabd7e4cc5f6aec1b286c..98260caeefe1e66a5ed36c439990d89efae452cc 100644
--- a/packages/frontend/src/widgets/WidgetButton.vue
+++ b/packages/frontend/src/widgets/WidgetButton.vue
@@ -101,8 +101,3 @@ defineExpose<WidgetComponentExpose>({
id: props.widget ? props.widget.id : null,
});
</script>
-
-<style lang="scss" scoped>
-.mkw-button {
-}
-</style>