diff --git a/src/client/components/ui/input.vue b/src/client/components/ui/input.vue
index cd295b68d8..c99e652fc0 100644
--- a/src/client/components/ui/input.vue
+++ b/src/client/components/ui/input.vue
@@ -239,6 +239,10 @@ export default Vue.extend({
position: relative;
margin: 32px 0;
+ &:not(.inline):first-child {
+ margin-top: 8px;
+ }
+
> .icon {
position: absolute;
top: 0;
diff --git a/src/client/components/ui/select.vue b/src/client/components/ui/select.vue
index 8bad7c5d65..772cd1167b 100644
--- a/src/client/components/ui/select.vue
+++ b/src/client/components/ui/select.vue
@@ -77,6 +77,10 @@ export default Vue.extend({
position: relative;
margin: 32px 0;
+ &:not(.inline):first-child {
+ margin-top: 8px;
+ }
+
> .icon {
position: absolute;
top: 0;
diff --git a/src/client/components/ui/textarea.vue b/src/client/components/ui/textarea.vue
index 7b42b78a73..fab307a202 100644
--- a/src/client/components/ui/textarea.vue
+++ b/src/client/components/ui/textarea.vue
@@ -85,6 +85,10 @@ export default Vue.extend({
margin: 42px 0 32px 0;
position: relative;
+ &:first-child {
+ margin-top: 16px;
+ }
+
&:last-child {
margin-bottom: 0;
}
diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue
index f922ee749a..2889cf8cce 100644
--- a/src/client/pages/instance/announcements.vue
+++ b/src/client/pages/instance/announcements.vue
@@ -5,7 +5,7 @@
<mk-button @click="add()" primary style="margin: 0 auto 16px auto;"><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
<section class="_card announcements">
<div class="_content announcement" v-for="announcement in announcements">
- <mk-input v-model="announcement.title" style="margin-top: 8px;">
+ <mk-input v-model="announcement.title">
<span>{{ $t('title') }}</span>
</mk-input>
<mk-textarea v-model="announcement.text">
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index 66b52492b9..84974f45c4 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -36,7 +36,7 @@
<section class="_card remote">
<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojisOfRemote') }}</div>
<div class="_content">
- <mk-input v-model="host" :debounce="true" style="margin-top: 0;"><span>{{ $t('host') }}</span></mk-input>
+ <mk-input v-model="host" :debounce="true"><span>{{ $t('host') }}</span></mk-input>
<mk-pagination :pagination="remotePagination" class="emojis" ref="remoteEmojis">
<template #empty><span>{{ $t('noCustomEmojis') }}</span></template>
<template #default="{items}">
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index 136a27e4a6..79bde62b43 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -6,7 +6,7 @@
<section class="_card info">
<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('basicInfo') }}</div>
<div class="_content">
- <mk-input v-model="name" style="margin-top: 8px;">{{ $t('instanceName') }}</mk-input>
+ <mk-input v-model="name">{{ $t('instanceName') }}</mk-input>
<mk-textarea v-model="description">{{ $t('instanceDescription') }}</mk-textarea>
<mk-input v-model="iconUrl"><template #icon><fa :icon="faLink"/></template>{{ $t('iconUrl') }}</mk-input>
<mk-input v-model="bannerUrl"><template #icon><fa :icon="faLink"/></template>{{ $t('bannerUrl') }}</mk-input>
@@ -78,7 +78,7 @@
<section class="_card">
<div class="_title"><fa :icon="faThumbtack"/> {{ $t('pinnedUsers') }}</div>
<div class="_content">
- <mk-textarea v-model="pinnedUsers" style="margin-top: 0;">
+ <mk-textarea v-model="pinnedUsers">
<template #desc>{{ $t('pinnedUsersDescription') }} <button class="_textButton" @click="addPinUser">{{ $t('addUser') }}</button></template>
</mk-textarea>
</div>
@@ -111,7 +111,7 @@
<section class="_card">
<div class="_title"><fa :icon="faBan"/> {{ $t('blockedInstances') }}</div>
<div class="_content">
- <mk-textarea v-model="blockedHosts" style="margin-top: 0;">
+ <mk-textarea v-model="blockedHosts">
<template #desc>{{ $t('blockedInstancesDescription') }}</template>
</mk-textarea>
</div>
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index 6f53bb8434..2341c51988 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -6,7 +6,7 @@
<section class="_card lookup">
<div class="_title"><fa :icon="faSearch"/> {{ $t('lookup') }}</div>
<div class="_content">
- <mk-input class="target" v-model="target" type="text" @enter="showUser()" style="margin-top: 0;">
+ <mk-input class="target" v-model="target" type="text" @enter="showUser()">
<span>{{ $t('usernameOrUserId') }}</span>
</mk-input>
<mk-button @click="showUser()" primary><fa :icon="faSearch"/> {{ $t('lookup') }}</mk-button>
diff --git a/src/client/pages/my-antennas/index.antenna.vue b/src/client/pages/my-antennas/index.antenna.vue
index 85982edaf7..7ee916a1c0 100644
--- a/src/client/pages/my-antennas/index.antenna.vue
+++ b/src/client/pages/my-antennas/index.antenna.vue
@@ -2,7 +2,7 @@
<div class="shaynizk _card">
<div class="_title" v-if="antenna.name">{{ antenna.name }}</div>
<div class="_content body">
- <mk-input v-model="name" style="margin-top: 8px;">
+ <mk-input v-model="name">
<span>{{ $t('name') }}</span>
</mk-input>
<mk-select v-model="src">
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index cc6f389869..f119fb684f 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -2,7 +2,7 @@
<section class="_card">
<div class="_title"><fa :icon="faCog"/> {{ $t('general') }}</div>
<div class="_content">
- <mk-input type="file" @change="onWallpaperChange" style="margin-top: 0;">
+ <mk-input type="file" @change="onWallpaperChange">
<span>{{ $t('wallpaper') }}</span>
<template #icon><fa :icon="faImage"/></template>
<template #desc v-if="wallpaperUploading">{{ $t('uploading') }}<mk-ellipsis/></template>
diff --git a/src/client/pages/settings/import-export.vue b/src/client/pages/settings/import-export.vue
index 9964df7fa3..4795741189 100644
--- a/src/client/pages/settings/import-export.vue
+++ b/src/client/pages/settings/import-export.vue
@@ -2,8 +2,7 @@
<section class="_card">
<div class="_title"><fa :icon="faBoxes"/> {{ $t('importAndExport') }}</div>
<div class="_content">
- <input ref="file" type="file" style="display: none;" @change="onChangeFile"/>
- <mk-select v-model="exportTarget" style="margin-top: 0;">
+ <mk-select v-model="exportTarget">
<option value="notes">{{ $t('_exportOrImport.allNotes') }}</option>
<option value="following">{{ $t('_exportOrImport.followingList') }}</option>
<option value="user-lists">{{ $t('_exportOrImport.userLists') }}</option>
@@ -13,6 +12,7 @@
<mk-button inline @click="doExport()"><fa :icon="faDownload"/> {{ $t('export') }}</mk-button>
<mk-button inline @click="doImport()" :disabled="!['following', 'user-lists'].includes(exportTarget)"><fa :icon="faUpload"/> {{ $t('import') }}</mk-button>
</div>
+ <input ref="file" type="file" style="display: none;" @change="onChangeFile"/>
</section>
</template>
diff --git a/src/client/pages/settings/reaction.vue b/src/client/pages/settings/reaction.vue
index 134cd8536c..250769ec9e 100644
--- a/src/client/pages/settings/reaction.vue
+++ b/src/client/pages/settings/reaction.vue
@@ -2,7 +2,7 @@
<section class="_card">
<div class="_title"><fa :icon="faLaugh"/> {{ $t('reaction') }}</div>
<div class="_content">
- <mk-textarea v-model="reactions" style="margin-top: 16px;">{{ $t('reaction') }}<template #desc>{{ $t('reactionSettingDescription') }}</template></mk-textarea>
+ <mk-textarea v-model="reactions">{{ $t('reaction') }}<template #desc>{{ $t('reactionSettingDescription') }}</template></mk-textarea>
</div>
<div class="_footer">
<mk-button @click="save()" primary inline :disabled="!changed"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>