🎨

packages/frontend/src/init.ts

@@ -172,6 +172,7 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
 		app.config.performance = true;
 	}
 
+	// TODO: 廃止
 	app.config.globalProperties = {
 		$i,
 		$store: defaultStore,

packages/frontend/src/pages/settings/email.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="_autoGap">
-	<FormSection>
+	<FormSection first>
 		<template #label>{{ i18n.ts.emailAddress }}</template>
 		<FormInput v-model="emailAddress" type="email" manual-save>
 			<template #prefix><i class="ti ti-mail"></i></template>

packages/frontend/src/pages/settings/import-export.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="_autoGap">
-	<FormSection>
+	<FormSection first>
 		<template #label><i class="ti ti-pencil"></i> {{ i18n.ts._exportOrImport.allNotes }}</template>
 		<FormFolder>
 			<template #label>{{ i18n.ts.export }}</template>
@@ -18,9 +18,11 @@
 	</FormSection>
 	<FormSection>
 		<template #label><i class="ti ti-users"></i> {{ i18n.ts._exportOrImport.followingList }}</template>
+		<div class="_autoGap_half">
 			<FormFolder>
 				<template #label>{{ i18n.ts.export }}</template>
 				<template #icon><i class="ti ti-download"></i></template>
+				<div class="_autoGap_half">
 					<FormSwitch v-model="excludeMutingUsers">
 						{{ i18n.ts._exportOrImport.excludeMutingUsers }}
 					</FormSwitch>
@@ -28,15 +30,18 @@
 						{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
 					</FormSwitch>
 					<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+				</div>
 			</FormFolder>
 			<FormFolder>
 				<template #label>{{ i18n.ts.import }}</template>
 				<template #icon><i class="ti ti-upload"></i></template>
 				<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
 			</FormFolder>
+		</div>
 	</FormSection>
 	<FormSection>
 		<template #label><i class="ti ti-users"></i> {{ i18n.ts._exportOrImport.userLists }}</template>
+		<div class="_autoGap_half">
 			<FormFolder>
 				<template #label>{{ i18n.ts.export }}</template>
 				<template #icon><i class="ti ti-download"></i></template>
@@ -47,9 +52,11 @@
 				<template #icon><i class="ti ti-upload"></i></template>
 				<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
 			</FormFolder>
+		</div>
 	</FormSection>
 	<FormSection>
 		<template #label><i class="ti ti-user-off"></i> {{ i18n.ts._exportOrImport.muteList }}</template>
+		<div class="_autoGap_half">
 			<FormFolder>
 				<template #label>{{ i18n.ts.export }}</template>
 				<template #icon><i class="ti ti-download"></i></template>
@@ -60,9 +67,11 @@
 				<template #icon><i class="ti ti-upload"></i></template>
 				<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
 			</FormFolder>
+		</div>
 	</FormSection>
 	<FormSection>
 		<template #label><i class="ti ti-user-off"></i> {{ i18n.ts._exportOrImport.blockingList }}</template>
+		<div class="_autoGap_half">
 			<FormFolder>
 				<template #label>{{ i18n.ts.export }}</template>
 				<template #icon><i class="ti ti-download"></i></template>
@@ -73,6 +82,7 @@
 				<template #icon><i class="ti ti-upload"></i></template>
 				<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
 			</FormFolder>
+		</div>
 	</FormSection>
 </div>
 </template>

packages/frontend/src/pages/settings/security.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="_autoGap">
-	<FormSection>
+	<FormSection first>
 		<template #label>{{ i18n.ts.password }}</template>
 		<MkButton primary @click="change()">{{ i18n.ts.changePassword }}</MkButton>
 	</FormSection>

packages/frontend/src/pages/user/home.vue

@@ -1,15 +1,15 @@
 <template>
 <MkSpacer :content-max="narrow ? 800 : 1100">
 	<div ref="rootEl" class="ftskorzw" :class="{ wide: !narrow }" style="container-type: inline-size;">
-		<div class="main">
+		<div class="main _autoGap">
 			<!-- TODO -->
 			<!-- <div class="punished" v-if="user.isSuspended"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
 			<!-- <div class="punished" v-if="user.isSilenced"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
 
-			<div class="profile">
+			<div class="profile _autoGap">
 				<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
 
-				<div :key="user.id" class="main">
+				<div :key="user.id" class="main _panel">
 					<div class="banner-container" :style="style">
 						<div ref="bannerEl" class="banner" :style="style"></div>
 						<div class="fade"></div>
@@ -86,8 +86,8 @@
 			</div>
 
 			<div class="contents">
-				<div v-if="user.pinnedNotes.length > 0" class="_margin">
+				<div v-if="user.pinnedNotes.length > 0" class="_autoGap_half">
-					<XNote v-for="note in user.pinnedNotes" :key="note.id" class="note" :note="note" :pinned="true"/>
+					<XNote v-for="note in user.pinnedNotes" :key="note.id" class="note _panel" :note="note" :pinned="true"/>
 				</div>
 				<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
 				<template v-if="narrow">