diff --git a/src/client/pages/about.vue b/src/client/pages/about.vue
index e47856bb9..f25cd03cb 100644
--- a/src/client/pages/about.vue
+++ b/src/client/pages/about.vue
@@ -3,7 +3,7 @@
<portal to="icon"><fa :icon="faInfoCircle"/></portal>
<portal to="title">{{ $t('about') }}</portal>
- <section class="_section info" v-if="meta">
+ <section class="_card info" v-if="meta">
<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('instanceInfo') }}</div>
<div class="_content" v-if="meta.description">
<div>{{ meta.description }}</div>
@@ -21,7 +21,7 @@
</div>
</section>
- <section class="_section aboutMisskey">
+ <section class="_card aboutMisskey">
<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('aboutMisskey') }}</div>
<div class="_content">
<div style="margin-bottom: 1em;">{{ $t('aboutMisskeyText') }}</div>
diff --git a/src/client/pages/announcements.vue b/src/client/pages/announcements.vue
index 586bc0c03..f3abea958 100644
--- a/src/client/pages/announcements.vue
+++ b/src/client/pages/announcements.vue
@@ -4,7 +4,7 @@
<portal to="title">{{ $t('announcements') }}</portal>
<mk-pagination :pagination="pagination" #default="{items}" class="ruryvtyk" ref="list">
- <section class="_section announcement" v-for="(announcement, i) in items" :key="announcement.id" :data-index="i">
+ <section class="_card announcement" v-for="(announcement, i) in items" :key="announcement.id" :data-index="i">
<div class="_title"><span v-if="$store.getters.isSignedIn && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
<div class="_content">
<mfm :text="announcement.text"/>
diff --git a/src/client/pages/auth.form.vue b/src/client/pages/auth.form.vue
index 80a792eb3..e6f61f52f 100644
--- a/src/client/pages/auth.form.vue
+++ b/src/client/pages/auth.form.vue
@@ -1,5 +1,5 @@
<template>
-<section class="_section">
+<section class="_card">
<div class="_title">{{ $t('_auth.shareAccess', { name: app.name }) }}</div>
<div class="_content">
<h2>{{ app.name }}</h2>
diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue
index 71cec64c7..f922ee749 100644
--- a/src/client/pages/instance/announcements.vue
+++ b/src/client/pages/instance/announcements.vue
@@ -3,7 +3,7 @@
<portal to="icon"><fa :icon="faBroadcastTower"/></portal>
<portal to="title">{{ $t('announcements') }}</portal>
<mk-button @click="add()" primary style="margin: 0 auto 16px auto;"><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
- <section class="_section announcements">
+ <section class="_card announcements">
<div class="_content announcement" v-for="announcement in announcements">
<mk-input v-model="announcement.title" style="margin-top: 8px;">
<span>{{ $t('title') }}</span>
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index 7a69a7efe..b1005b063 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -2,7 +2,7 @@
<div class="mk-instance-emojis">
<portal to="icon"><fa :icon="faLaugh"/></portal>
<portal to="title">{{ $t('customEmojis') }}</portal>
- <section class="_section local">
+ <section class="_card local">
<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojis') }}</div>
<div class="_content">
<input ref="file" type="file" style="display: none;" @change="onChangeFile"/>
@@ -23,7 +23,7 @@
<mk-button inline :disabled="selected == null" @click="del()"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</mk-button>
</div>
</section>
- <section class="_section remote">
+ <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>
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue
index 224ff72a9..ab8eeb86b 100644
--- a/src/client/pages/instance/federation.vue
+++ b/src/client/pages/instance/federation.vue
@@ -1,6 +1,6 @@
<template>
<div class="mk-federation">
- <section class="_section instances">
+ <section class="_card instances">
<div class="_title"><fa :icon="faGlobe"/> {{ $t('instances') }}</div>
<div class="_content">
<div class="inputs" style="display: flex;">
diff --git a/src/client/pages/instance/files.vue b/src/client/pages/instance/files.vue
index e7475e94c..0bc1c81e6 100644
--- a/src/client/pages/instance/files.vue
+++ b/src/client/pages/instance/files.vue
@@ -1,5 +1,5 @@
<template>
-<section class="_section">
+<section class="_card">
<div class="_title"><fa :icon="faCloud"/> {{ $t('files') }}</div>
<div class="_content">
<mk-button primary @click="clear()"><fa :icon="faTrashAlt"/> {{ $t('clearCachedFiles') }}</mk-button>
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index 5301fc7e0..bdd04b635 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -3,7 +3,7 @@
<portal to="icon"><fa :icon="faServer"/></portal>
<portal to="title">{{ $t('instance') }}</portal>
- <section class="_section info">
+ <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>
@@ -19,7 +19,7 @@
</div>
</section>
- <section class="_section info">
+ <section class="_card info">
<div class="_content">
<mk-switch v-model="enableLocalTimeline" @change="save()">{{ $t('enableLocalTimeline') }}</mk-switch>
<mk-switch v-model="enableGlobalTimeline" @change="save()">{{ $t('enableGlobalTimeline') }}</mk-switch>
@@ -27,7 +27,7 @@
</div>
</section>
- <section class="_section info">
+ <section class="_card info">
<div class="_title"><fa :icon="faUser"/> {{ $t('registration') }}</div>
<div class="_content">
<mk-switch v-model="enableRegistration" @change="save()">{{ $t('enableRegistration') }}</mk-switch>
@@ -35,7 +35,7 @@
</div>
</section>
- <section class="_section">
+ <section class="_card">
<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('recaptcha') }}</div>
<div class="_content">
<mk-switch v-model="enableRecaptcha">{{ $t('enableRecaptcha') }}</mk-switch>
@@ -55,7 +55,7 @@
</div>
</section>
- <section class="_section">
+ <section class="_card">
<div class="_title"><fa :icon="faBolt"/> {{ $t('serviceworker') }}</div>
<div class="_content">
<mk-switch v-model="enableServiceWorker">{{ $t('enableServiceworker') }}<template #desc>{{ $t('serviceworker-info') }}</template></mk-switch>
@@ -72,7 +72,7 @@
</div>
</section>
- <section class="_section">
+ <section class="_card">
<div class="_title"><fa :icon="faThumbtack"/> {{ $t('pinnedUsers') }}</div>
<div class="_content">
<mk-textarea v-model="pinnedUsers" style="margin-top: 0;">
@@ -84,7 +84,7 @@
</div>
</section>
- <section class="_section">
+ <section class="_card">
<div class="_title"><fa :icon="faCloud"/> {{ $t('files') }}</div>
<div class="_content">
<mk-switch v-model="cacheRemoteFiles">{{ $t('cacheRemoteFiles') }}<template #desc>{{ $t('cacheRemoteFilesDescription') }}</template></mk-switch>
@@ -97,7 +97,7 @@
</div>
</section>
- <section class="_section">
+ <section class="_card">
<div class="_title"><fa :icon="faGhost"/> {{ $t('proxyAccount') }}</div>
<div class="_content">
<mk-input v-model="proxyAccount" style="margin: 0;"><template #prefix>@</template>{{ $t('proxyAccount') }}<template #desc>{{ $t('proxyAccountDescription') }}</template></mk-input>
@@ -107,7 +107,7 @@
</div>
</section>
- <section class="_section">
+ <section class="_card">
<div class="_title"><fa :icon="faBan"/> {{ $t('blockedInstances') }}</div>
<div class="_content">
<mk-textarea v-model="blockedHosts" style="margin-top: 0;">
@@ -119,7 +119,7 @@
</div>
</section>
- <section class="_section">
+ <section class="_card">
<div class="_title"><fa :icon="faShareAlt"/> {{ $t('integration') }}</div>
<div class="_content">
<header><fa :icon="faTwitter"/> {{ $t('twitter-integration-config') }}</header>
@@ -153,7 +153,7 @@
</div>
</section>
- <section class="_section info">
+ <section class="_card info">
<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('instanceInfo') }}</div>
<div class="_content table" v-if="stats">
<div><b>{{ $t('users') }}</b><span>{{ stats.originalUsersCount | number }}</span></div>
diff --git a/src/client/pages/instance/monitor.vue b/src/client/pages/instance/monitor.vue
index 3f3ce6d73..b75755126 100644
--- a/src/client/pages/instance/monitor.vue
+++ b/src/client/pages/instance/monitor.vue
@@ -1,6 +1,6 @@
<template>
<div class="mk-instance-monitor">
- <section class="_section">
+ <section class="_card">
<div class="_title"><fa :icon="faMicrochip"/> {{ $t('cpuAndMemory') }}</div>
<div class="_content" style="margin-top: -8px; margin-bottom: -12px;">
<canvas ref="cpumem"></canvas>
@@ -18,7 +18,7 @@
</div>
</div>
</section>
- <section class="_section">
+ <section class="_card">
<div class="_title"><fa :icon="faHdd"/> {{ $t('disk') }}</div>
<div class="_content" style="margin-top: -8px; margin-bottom: -12px;">
<canvas ref="disk"></canvas>
@@ -33,7 +33,7 @@
</div>
</div>
</section>
- <section class="_section">
+ <section class="_card">
<div class="_title"><fa :icon="faExchangeAlt"/> {{ $t('network') }}</div>
<div class="_content" style="margin-top: -8px; margin-bottom: -12px;">
<canvas ref="net"></canvas>
diff --git a/src/client/pages/instance/queue.queue.vue b/src/client/pages/instance/queue.queue.vue
index cc542b176..6cd2f2a33 100644
--- a/src/client/pages/instance/queue.queue.vue
+++ b/src/client/pages/instance/queue.queue.vue
@@ -1,5 +1,5 @@
<template>
-<section class="_section mk-queue-queue">
+<section class="_card mk-queue-queue">
<div class="_title"><slot name="title"></slot></div>
<div class="_content status">
<div class="cell"><div class="label">Process</div>{{ activeSincePrevTick | number }}</div>
diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue
index b7e633081..8590f9ae2 100644
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@@ -6,7 +6,7 @@
<x-queue :connection="connection" domain="deliver">
<template #title><fa :icon="faExchangeAlt"/> Out</template>
</x-queue>
- <section class="_section">
+ <section class="_card">
<div class="_content">
<mk-button @click="clear()"><fa :icon="faTrashAlt"/> {{ $t('clearQueue') }}</mk-button>
</div>
diff --git a/src/client/pages/instance/stats.vue b/src/client/pages/instance/stats.vue
index 595ad2cc3..4883d8c87 100644
--- a/src/client/pages/instance/stats.vue
+++ b/src/client/pages/instance/stats.vue
@@ -1,6 +1,6 @@
<template>
<div class="mk-instance-stats">
- <section class="_section">
+ <section class="_card">
<div class="_title"><fa :icon="faChartBar"/> {{ $t('statistics') }}</div>
<div class="_content" style="margin-top: -8px; margin-bottom: -12px;">
<div class="selects" style="display: flex;">
diff --git a/src/client/pages/instance/users.vue b/src/client/pages/instance/users.vue
index da59d8ce2..bafb0c006 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -3,7 +3,7 @@
<portal to="icon"><fa :icon="faUsers"/></portal>
<portal to="title">{{ $t('users') }}</portal>
- <section class="_section lookup">
+ <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;">
@@ -16,7 +16,7 @@
</div>
</section>
- <section class="_section users">
+ <section class="_card users">
<div class="_title"><fa :icon="faUsers"/> {{ $t('users') }}</div>
<div class="_content _list">
<mk-pagination :pagination="pagination" #default="{items}" class="users" ref="users" :auto-margin="false">
diff --git a/src/client/pages/my-antennas/index.antenna.vue b/src/client/pages/my-antennas/index.antenna.vue
index a4b140db1..85982edaf 100644
--- a/src/client/pages/my-antennas/index.antenna.vue
+++ b/src/client/pages/my-antennas/index.antenna.vue
@@ -1,5 +1,5 @@
<template>
-<div class="shaynizk _section">
+<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;">
diff --git a/src/client/pages/my-lists/list.vue b/src/client/pages/my-lists/list.vue
index 8899b4c44..43a3e2b66 100644
--- a/src/client/pages/my-lists/list.vue
+++ b/src/client/pages/my-lists/list.vue
@@ -1,7 +1,7 @@
<template>
<div class="mk-list-page">
<transition name="zoom" mode="out-in">
- <div v-if="list" :key="list.id" class="_section list">
+ <div v-if="list" :key="list.id" class="_card list">
<div class="_title">{{ list.name }}</div>
<div class="_content">
<div class="users">
diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index f5ed55614..780b6eccd 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -3,7 +3,7 @@
<portal to="avatar" v-if="page"><mk-avatar class="avatar" :user="page.user" :disable-preview="true"/></portal>
<portal to="title" v-if="page">{{ page.title || page.name }}</portal>
- <div class="_section" v-if="page" :key="page.id">
+ <div class="_card" v-if="page" :key="page.id">
<div class="_title">{{ page.title }}</div>
<div class="_content">
<x-page :page="page"/>
diff --git a/src/client/pages/settings/2fa.vue b/src/client/pages/settings/2fa.vue
index 7b6ff223b..77d7b2682 100644
--- a/src/client/pages/settings/2fa.vue
+++ b/src/client/pages/settings/2fa.vue
@@ -1,5 +1,5 @@
<template>
-<section class="_section">
+<section class="_card">
<div class="_title"><fa :icon="faLock"/> {{ $t('twoStepAuthentication') }}</div>
<div class="_content">
<p v-if="!data && !$store.state.i.twoFactorEnabled"><mk-button @click="register">{{ $t('_2fa.registerDevice') }}</mk-button></p>
diff --git a/src/client/pages/settings/drive.vue b/src/client/pages/settings/drive.vue
index d0c18a07e..8ff054b9b 100644
--- a/src/client/pages/settings/drive.vue
+++ b/src/client/pages/settings/drive.vue
@@ -1,5 +1,5 @@
<template>
-<section class="mk-settings-page-drive _section">
+<section class="uawsfosz _card">
<div class="_title"><fa :icon="faCloud"/> {{ $t('drive') }}</div>
<div class="_content">
<mk-pagination :pagination="drivePagination" #default="{items}" class="drive" ref="drive">
@@ -110,7 +110,7 @@ export default Vue.extend({
</script>
<style lang="scss" scoped>
-.mk-settings-page-drive {
+.uawsfosz {
> ._content {
max-height: 350px;
overflow: auto;
diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue
index 6b63da742..f5c2f4cee 100644
--- a/src/client/pages/settings/general.vue
+++ b/src/client/pages/settings/general.vue
@@ -1,5 +1,5 @@
<template>
-<section class="mk-settings-page-general _section">
+<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;">
diff --git a/src/client/pages/settings/import-export.vue b/src/client/pages/settings/import-export.vue
index 5714aabbf..9964df7fa 100644
--- a/src/client/pages/settings/import-export.vue
+++ b/src/client/pages/settings/import-export.vue
@@ -1,5 +1,5 @@
<template>
-<section class="mk-settings-page-import-export _section">
+<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"/>
diff --git a/src/client/pages/settings/integration.vue b/src/client/pages/settings/integration.vue
index b156e1302..bb0346d1c 100644
--- a/src/client/pages/settings/integration.vue
+++ b/src/client/pages/settings/integration.vue
@@ -1,5 +1,5 @@
<template>
-<section class="_section" v-if="enableTwitterIntegration || enableDiscordIntegration || enableGithubIntegration">
+<section class="_card" v-if="enableTwitterIntegration || enableDiscordIntegration || enableGithubIntegration">
<div class="_title"><fa :icon="faShareAlt"/> {{ $t('integration') }}</div>
<div class="_content" v-if="enableTwitterIntegration">
<header><fa :icon="faTwitter"/> Twitter</header>
diff --git a/src/client/pages/settings/mute-block.vue b/src/client/pages/settings/mute-block.vue
index 109b33d4f..86541472f 100644
--- a/src/client/pages/settings/mute-block.vue
+++ b/src/client/pages/settings/mute-block.vue
@@ -1,5 +1,5 @@
<template>
-<section class="mk-settings-page-mute-block _section">
+<section class="rrfwjxfl _card">
<div class="_title"><fa :icon="faBan"/> {{ $t('muteAndBlock') }}</div>
<div class="_content">
<span>{{ $t('mutedUsers') }}</span>
@@ -60,7 +60,7 @@ export default Vue.extend({
</script>
<style lang="scss" scoped>
-.mk-settings-page-mute-block {
+.rrfwjxfl {
> ._content {
max-height: 350px;
overflow: auto;
diff --git a/src/client/pages/settings/privacy.vue b/src/client/pages/settings/privacy.vue
index 0fc67d5b7..af2c3f501 100644
--- a/src/client/pages/settings/privacy.vue
+++ b/src/client/pages/settings/privacy.vue
@@ -1,5 +1,5 @@
<template>
-<section class="mk-settings-page-privacy _section">
+<section class="_card">
<div class="_title"><fa :icon="faLock"/> {{ $t('privacy') }}</div>
<div class="_content">
<mk-switch v-model="isLocked" @change="save()">{{ $t('makeFollowManuallyApprove') }}</mk-switch>
diff --git a/src/client/pages/settings/profile.vue b/src/client/pages/settings/profile.vue
index b859816ed..e295b6b65 100644
--- a/src/client/pages/settings/profile.vue
+++ b/src/client/pages/settings/profile.vue
@@ -1,5 +1,5 @@
<template>
-<section class="llvierxe _section">
+<section class="llvierxe _card">
<div class="_title"><fa :icon="faUser"/> {{ $t('profile') }}<small style="display: block; font-weight: normal; opacity: 0.6;">@{{ $store.state.i.username }}@{{ host }}</small></div>
<div class="_content">
<div class="header" :style="{ backgroundImage: $store.state.i.bannerUrl ? `url(${ $store.state.i.bannerUrl })` : null }" @click="changeBanner">
diff --git a/src/client/pages/settings/reaction.vue b/src/client/pages/settings/reaction.vue
index 310237b5f..134cd8536 100644
--- a/src/client/pages/settings/reaction.vue
+++ b/src/client/pages/settings/reaction.vue
@@ -1,5 +1,5 @@
<template>
-<section class="mk-settings-page-reaction _section">
+<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>
diff --git a/src/client/pages/settings/security.vue b/src/client/pages/settings/security.vue
index ecf9c01dd..ba670b2f6 100644
--- a/src/client/pages/settings/security.vue
+++ b/src/client/pages/settings/security.vue
@@ -1,5 +1,5 @@
<template>
-<section class="_section">
+<section class="_card">
<div class="_title"><fa :icon="faLock"/> {{ $t('password') }}</div>
<div class="_content">
<mk-button primary @click="change()">{{ $t('changePassword') }}</mk-button>
diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue
index 71628ab2b..ecedb8362 100644
--- a/src/client/pages/settings/theme.vue
+++ b/src/client/pages/settings/theme.vue
@@ -1,5 +1,5 @@
<template>
-<section class="mk-settings-page-theme _section">
+<section class="rfqxtzch _card">
<div class="_title"><fa :icon="faPalette"/> {{ $t('theme') }}</div>
<div class="_content">
<mk-select v-model="theme" :placeholder="$t('theme')">
diff --git a/src/client/style.scss b/src/client/style.scss
index 5f90a7aa1..ec59072ef 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -234,10 +234,10 @@ a {
border-radius: var(--radius);
}
-._section {
+._card {
@extend ._panel;
- & + ._section {
+ & + ._card {
margin-top: var(--margin);
}