diff --git a/packages/frontend/src/components/MkFormDialog.vue b/packages/frontend/src/components/MkFormDialog.vue
index d95d339a72..971bb806af 100644
--- a/packages/frontend/src/components/MkFormDialog.vue
+++ b/packages/frontend/src/components/MkFormDialog.vue
@@ -15,7 +15,7 @@
</template>
<MkSpacer :margin-min="20" :margin-max="32">
- <div class="xkpnjxcv _gaps_m">
+ <div class="_gaps_m">
<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
<MkInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1">
<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
@@ -119,9 +119,3 @@ export default defineComponent({
},
});
</script>
-
-<style lang="scss" scoped>
-.xkpnjxcv {
-
-}
-</style>
diff --git a/packages/frontend/src/components/MkGoogle.vue b/packages/frontend/src/components/MkGoogle.vue
index d104cd4cd4..007728176e 100644
--- a/packages/frontend/src/components/MkGoogle.vue
+++ b/packages/frontend/src/components/MkGoogle.vue
@@ -1,7 +1,7 @@
<template>
-<div class="mk-google">
- <input v-model="query" type="search" :placeholder="q">
- <button @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button>
+<div :class="$style.root">
+ <input v-model="query" :class="$style.input" type="search" :placeholder="q">
+ <button :class="$style.button" @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button>
</div>
</template>
@@ -19,33 +19,33 @@ const search = () => {
};
</script>
-<style lang="scss" scoped>
-.mk-google {
+<style lang="scss" module>
+.root {
display: flex;
margin: 8px 0;
+}
- > input {
- flex-shrink: 1;
- padding: 10px;
- width: 100%;
- height: 40px;
- font-size: 16px;
- border: solid 1px var(--divider);
- border-radius: 4px 0 0 4px;
- -webkit-appearance: textfield;
- }
+.input {
+ flex-shrink: 1;
+ padding: 10px;
+ width: 100%;
+ height: 40px;
+ font-size: 16px;
+ border: solid 1px var(--divider);
+ border-radius: 4px 0 0 4px;
+ -webkit-appearance: textfield;
+}
- > button {
- flex-shrink: 0;
- margin: 0;
- padding: 0 16px;
- border: solid 1px var(--divider);
- border-left: none;
- border-radius: 0 4px 4px 0;
+.button {
+ flex-shrink: 0;
+ margin: 0;
+ padding: 0 16px;
+ border: solid 1px var(--divider);
+ border-left: none;
+ border-radius: 0 4px 4px 0;
- &:active {
- box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
- }
+ &:active {
+ box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
}
}
</style>
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
index 6e651a06ab..944c76d7dc 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -1,7 +1,7 @@
<template>
-<div class="xubzgfgb" :class="{ cover }" :title="title">
- <canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/>
- <img v-if="src" :src="src" :title="title" :alt="alt" @load="onLoad"/>
+<div :class="[$style.root, { [$style.cover]: cover }]" :title="title">
+ <canvas v-if="!loaded" ref="canvas" :class="$style.canvas" :width="size" :height="size" :title="title"/>
+ <img v-if="src" :class="$style.img" :src="src" :title="title" :alt="alt" @load="onLoad"/>
</div>
</template>
@@ -45,32 +45,32 @@ onMounted(() => {
});
</script>
-<style lang="scss" scoped>
-.xubzgfgb {
+<style lang="scss" module>
+.root {
position: relative;
width: 100%;
height: 100%;
- > canvas,
- > img {
- display: block;
- width: 100%;
- height: 100%;
- }
-
- > canvas {
- position: absolute;
- object-fit: cover;
- }
-
- > img {
- object-fit: contain;
- }
-
&.cover {
- > img {
+ > .img {
object-fit: cover;
}
}
}
+
+.canvas,
+.img {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.canvas {
+ position: absolute;
+ object-fit: cover;
+}
+
+.img {
+ object-fit: contain;
+}
</style>
diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue
index 2f941a311d..31daf9afbd 100644
--- a/packages/frontend/src/components/MkLaunchPad.vue
+++ b/packages/frontend/src/components/MkLaunchPad.vue
@@ -3,12 +3,12 @@
<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
<div class="main">
<template v-for="item in items">
- <button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
+ <button v-if="item.action" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
<i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
</button>
- <MkA v-else v-click-anime :to="item.to" @click.passive="close()">
+ <MkA v-else v-click-anime :to="item.to" class="item" @click.passive="close()">
<i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
@@ -82,11 +82,11 @@ function close() {
text-align: center;
}
- > .main, > .sub {
+ > .main {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
- > * {
+ > .item {
position: relative;
display: flex;
flex-direction: column;
@@ -128,11 +128,5 @@ function close() {
}
}
}
-
- > .sub {
- margin-top: 8px;
- padding-top: 8px;
- border-top: solid 0.5px var(--divider);
- }
}
</style>
diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue
index 3091b435e4..f586eeff4d 100644
--- a/packages/frontend/src/components/MkMention.vue
+++ b/packages/frontend/src/components/MkMention.vue
@@ -1,17 +1,11 @@
<template>
-<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }">
- <img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
- <span class="main">
- <span class="username">@{{ username }}</span>
- <span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
+<MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }">
+ <img :class="$style.icon" :src="`/avatar/@${username}@${host}`" alt="">
+ <span>
+ <span :class="$style.username">@{{ username }}</span>
+ <span v-if="(host != localHost) || $store.state.showFullAcct" :class="$style.host">@{{ toUnicode(host) }}</span>
</span>
</MkA>
-<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }">
- <span class="main">
- <span class="username">@{{ username }}</span>
- <span class="host">@{{ toUnicode(host) }}</span>
- </span>
-</a>
</template>
<script lang="ts" setup>
@@ -39,8 +33,8 @@ bg.setAlpha(0.1);
const bgCss = bg.toRgbString();
</script>
-<style lang="scss" scoped>
-.akbvjaqn {
+<style lang="scss" module>
+.root {
display: inline-block;
padding: 4px 8px 4px 4px;
border-radius: 999px;
@@ -49,18 +43,18 @@ const bgCss = bg.toRgbString();
&.isMe {
color: var(--mentionMe);
}
+}
- > .icon {
- width: 1.5em;
- height: 1.5em;
- object-fit: cover;
- margin: 0 0.2em 0 0;
- vertical-align: bottom;
- border-radius: 100%;
- }
+.icon {
+ width: 1.5em;
+ height: 1.5em;
+ object-fit: cover;
+ margin: 0 0.2em 0 0;
+ vertical-align: bottom;
+ border-radius: 100%;
+}
- > .main > .host {
- opacity: 0.5;
- }
+.host {
+ opacity: 0.5;
}
</style>