diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
index d60921803b..cfb65e3b63 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/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 {
- border-radius: 24px;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
- }
+<style lang="scss" module>
+.drawer {
+ border-radius: 24px;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
}
</style>
diff --git a/packages/frontend/src/components/MkTextarea.vue b/packages/frontend/src/components/MkTextarea.vue
index e8f10ab048..f5e6c71b75 100644
--- a/packages/frontend/src/components/MkTextarea.vue
+++ b/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,87 +111,82 @@ onMounted(() => {
});
</script>
-<style lang="scss" scoped>
-.adhpbeos {
- > .label {
- font-size: 0.85em;
- padding: 0 0 8px 0;
- user-select: none;
+<style lang="scss" module>
+.label {
+ font-size: 0.85em;
+ padding: 0 0 8px 0;
+ user-select: none;
- &:empty {
- display: none;
- }
- }
-
- > .caption {
- font-size: 0.85em;
- padding: 8px 0 0 0;
- color: var(--fgTransparentWeak);
-
- &:empty {
- display: none;
- }
- }
-
- > .input {
- position: relative;
-
- > textarea {
- appearance: none;
- -webkit-appearance: none;
- display: block;
- width: 100%;
- min-width: 100%;
- max-width: 100%;
- min-height: 130px;
- margin: 0;
- padding: 12px;
- font: inherit;
- font-weight: normal;
- font-size: 1em;
- color: var(--fg);
- background: var(--panel);
- border: solid 1px var(--panel);
- border-radius: 6px;
- outline: none;
- box-shadow: none;
- box-sizing: border-box;
- transition: border-color 0.1s ease-out;
-
- &:hover {
- border-color: var(--inputBorderHover) !important;
- }
- }
-
- &.focused {
- > textarea {
- border-color: var(--accent) !important;
- }
- }
-
- &.disabled {
- opacity: 0.7;
-
- &, * {
- cursor: not-allowed !important;
- }
- }
-
- &.tall {
- > textarea {
- min-height: 200px;
- }
- }
-
- &.pre {
- > textarea {
- white-space: pre;
- }
- }
- }
-
- > .save {
- margin: 8px 0 0 0;
+ &:empty {
+ display: none;
}
}
+
+.caption {
+ font-size: 0.85em;
+ padding: 8px 0 0 0;
+ color: var(--fgTransparentWeak);
+
+ &:empty {
+ display: none;
+ }
+}
+
+.textarea {
+ appearance: none;
+ -webkit-appearance: none;
+ display: block;
+ width: 100%;
+ min-width: 100%;
+ max-width: 100%;
+ min-height: 130px;
+ margin: 0;
+ padding: 12px;
+ font: inherit;
+ font-weight: normal;
+ font-size: 1em;
+ color: var(--fg);
+ background: var(--panel);
+ border: solid 1px var(--panel);
+ border-radius: 6px;
+ outline: none;
+ box-shadow: none;
+ box-sizing: border-box;
+ transition: border-color 0.1s ease-out;
+
+ &:hover {
+ border-color: var(--inputBorderHover) !important;
+ }
+}
+
+.focused {
+ > .textarea {
+ border-color: var(--accent) !important;
+ }
+}
+
+.disabled {
+ opacity: 0.7;
+ cursor: not-allowed !important;
+
+ > .textarea {
+ cursor: not-allowed !important;
+ }
+}
+
+.tall {
+ > .textarea {
+ min-height: 200px;
+ }
+}
+
+.pre {
+ > .textarea {
+ white-space: pre;
+ }
+}
+
+.save {
+ margin: 8px 0 0 0;
+}
</style>
diff --git a/packages/frontend/src/components/form/link.vue b/packages/frontend/src/components/form/link.vue
index a1775c0bdb..1424332dae 100644
--- a/packages/frontend/src/components/form/link.vue
+++ b/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,65 +31,65 @@ const props = defineProps<{
}>();
</script>
-<style lang="scss" scoped>
-.ffcbddfc {
+<style lang="scss" module>
+.root {
display: block;
&.inline {
display: inline-block;
}
+}
- > .main {
- display: flex;
- align-items: center;
- width: 100%;
- box-sizing: border-box;
- padding: 10px 14px;
- background: var(--buttonBg);
- border-radius: 6px;
- font-size: 0.9em;
+.main {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 10px 14px;
+ background: var(--buttonBg);
+ border-radius: 6px;
+ font-size: 0.9em;
- &:hover {
- text-decoration: none;
- background: var(--buttonHoverBg);
- }
+ &:hover {
+ text-decoration: none;
+ background: var(--buttonHoverBg);
+ }
- &.active {
- color: var(--accent);
- background: var(--buttonHoverBg);
- }
+ &.active {
+ color: var(--accent);
+ background: var(--buttonHoverBg);
+ }
+}
- > .icon {
- margin-right: 0.75em;
- flex-shrink: 0;
- text-align: center;
- color: var(--fgTransparentWeak);
+.icon {
+ margin-right: 0.75em;
+ flex-shrink: 0;
+ text-align: center;
+ color: var(--fgTransparentWeak);
- &:empty {
- display: none;
+ &:empty {
+ display: none;
- & + .text {
- padding-left: 4px;
- }
- }
- }
-
- > .text {
- flex-shrink: 1;
- white-space: normal;
- padding-right: 12px;
- text-align: center;
- }
-
- > .right {
- margin-left: auto;
- opacity: 0.7;
- white-space: nowrap;
-
- > .text:not(:empty) {
- margin-right: 0.75em;
- }
+ & + .text {
+ padding-left: 4px;
}
}
}
+
+.text {
+ flex-shrink: 1;
+ white-space: normal;
+ padding-right: 12px;
+ text-align: center;
+}
+
+.suffix {
+ margin-left: auto;
+ opacity: 0.7;
+ white-space: nowrap;
+
+ > .suffixText:not(:empty) {
+ margin-right: 0.75em;
+ }
+}
</style>
diff --git a/packages/frontend/src/components/page/page.section.vue b/packages/frontend/src/components/page/page.section.vue
index dc06a231f9..9f79ecc833 100644
--- a/packages/frontend/src/components/page/page.section.vue
+++ b/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;
+<style lang="scss" module>
+.h2 {
+ font-size: 1.35em;
+ margin: 0 0 0.5em 0;
+}
- > h2 {
- font-size: 1.35em;
- margin: 0 0 0.5em 0;
- }
+.h3 {
+ font-size: 1em;
+ margin: 0 0 0.5em 0;
+}
- > h3 {
- font-size: 1em;
- margin: 0 0 0.5em 0;
- }
-
- > h4 {
- font-size: 1em;
- margin: 0 0 0.5em 0;
- }
-
- > .children {
- //padding 16px
- }
+.h4 {
+ font-size: 1em;
+ margin: 0 0 0.5em 0;
}
</style>
diff --git a/packages/frontend/src/components/page/page.text.vue b/packages/frontend/src/components/page/page.text.vue
index 308948b45c..48ce4b0e1e 100644
--- a/packages/frontend/src/components/page/page.text.vue
+++ b/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>
diff --git a/packages/frontend/src/components/page/page.vue b/packages/frontend/src/components/page/page.vue
index f9291c4d2d..a6d3ff6359 100644
--- a/packages/frontend/src/components/page/page.vue
+++ b/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 {
- font-family: serif;
- }
- }
+<style lang="scss" module>
+.serif {
+ font-family: serif;
+}
- &.center {
- text-align: center;
- }
+.center {
+ text-align: center;
}
</style>
diff --git a/packages/frontend/src/pages/admin/relays.vue b/packages/frontend/src/pages/admin/relays.vue
index c82e7e1e00..119439c958 100644
--- a/packages/frontend/src/pages/admin/relays.vue
+++ b/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 {
- width: 1em;
- margin-right: 0.75em;
-
- &.accepted {
- color: var(--success);
- }
-
- &.rejected {
- color: var(--error);
- }
- }
- }
+<style lang="scss" module>
+.icon {
+ width: 1em;
+ margin-right: 0.75em;
}
</style>
diff --git a/packages/frontend/src/pages/flash/flash-index.vue b/packages/frontend/src/pages/flash/flash-index.vue
index 0fd5527a85..1f933c2346 100644
--- a/packages/frontend/src/pages/flash/flash-index.vue
+++ b/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>
diff --git a/packages/frontend/src/pages/my-lists/index.vue b/packages/frontend/src/pages/my-lists/index.vue
index e4b6f0e5bc..cee241c489 100644
--- a/packages/frontend/src/pages/my-lists/index.vue
+++ b/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>
- <MkAvatars :userIds="list.userIds"/>
- </MkA>
+ <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,29 +60,17 @@ definePageMetadata({
});
</script>
-<style lang="scss" scoped>
-.qkcjvfiv {
- > .add {
- margin: 0 auto var(--margin) auto;
- }
+<style lang="scss" module>
+.list {
+ display: block;
+ padding: 16px;
+ border: solid 1px var(--divider);
+ border-radius: 6px;
+ margin-bottom: 8px;
- > .lists {
- > .list {
- display: block;
- padding: 16px;
- border: solid 1px var(--divider);
- border-radius: 6px;
- margin-bottom: 8px;
-
- &:hover {
- border: solid 1px var(--accent);
- text-decoration: none;
- }
-
- > .name {
- margin-bottom: 4px;
- }
- }
+ &:hover {
+ border: solid 1px var(--accent);
+ text-decoration: none;
}
}
</style>