wip

packages/frontend/src/components/MkButton.vue

@@ -124,7 +124,7 @@ function onMousedown(evt: MouseEvent): void {
 	display: block;
 	min-width: 100px;
 	width: max-content;
-	padding: 7px 14px;
+	padding: 9px 14px;
 	text-align: center;
 	font-weight: normal;
 	font-size: 95%;

packages/frontend/src/components/MkCodeEditor.vue

@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<XCode :class="$style.codeEditorHighlighter" :codeEditor="true" :code="v" :lang="lang"/>
 		</div>
 	</div>
-	<div :class="$style.caption"><slot name="caption"></slot></div>
+	<div :class="$style.caption" class="_mt"><slot name="caption"></slot></div>
 	<MkButton v-if="manualSave && changed" primary :class="$style.save" @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 </div>
 </template>

packages/frontend/src/components/MkColorInput.vue

@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			@input="onInput"
 		>
 	</div>
-	<div :class="$style.caption"><slot name="caption"></slot></div>
+	<div :class="$style.caption" class="_mt"><slot name="caption"></slot></div>
 </div>
 </template>
 

packages/frontend/src/components/MkDialog.vue

@@ -25,8 +25,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<i v-else-if="type === 'question'" :class="$style.iconInner" class="ti ti-help-circle"></i>
 			<MkLoading v-else-if="type === 'waiting'" :class="$style.iconInner" :em="true"/>
 		</div>
-		<header v-if="title" :class="$style.title" class="_selectable"><Mfm :text="title"/></header>
+		<header v-if="title" :class="$style.title" class="_selectable _mt"><Mfm :text="title"/></header>
-		<div v-if="text" :class="$style.text" class="_selectable"><Mfm :text="text"/></div>
+		<div v-if="text" :class="$style.text" class="_selectable _mt"><Mfm :text="text"/></div>
 		<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" :autocomplete="input.autocomplete" @keydown="onInputKeydown">
 			<template v-if="input.type === 'password'" #prefix><i class="ti ti-lock"></i></template>
 			<template #caption>

packages/frontend/src/components/MkFolder.vue

@@ -10,10 +10,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<button :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle">
 				<div :class="$style.headerIcon"><slot name="icon"></slot></div>
 				<div :class="$style.headerText">
-					<div :class="$style.headerTextMain">
+					<div :class="$style.headerTextMain" class="_1t">
 						<MkCondensedLine :minScale="2 / 3"><slot name="label"></slot></MkCondensedLine>
 					</div>
-					<div :class="$style.headerTextSub">
+					<div v-if="$slots.caption" :class="$style.headerTextSub" class="_1t">
 						<slot name="caption"></slot>
 					</div>
 				</div>
@@ -143,7 +143,7 @@ onMounted(() => {
 	align-items: center;
 	width: 100%;
 	box-sizing: border-box;
-	padding: 9px 12px 9px 12px;
+	padding: 10px 12px 10px 12px;
 	background: var(--MI_THEME-folderHeaderBg);
 	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
 	backdrop-filter: var(--MI-blur, blur(15px));
@@ -209,6 +209,7 @@ onMounted(() => {
 }
 
 .headerTextSub {
+	margin-top: 4px;
 	color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
 	font-size: .85em;
 }

packages/frontend/src/components/MkInfo.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.root, { [$style.warn]: warn }]" class="_selectable">
+<div :class="[$style.root, { [$style.warn]: warn }]" class="_selectable _mt">
 	<i v-if="warn" class="ti ti-alert-triangle" :class="$style.i"></i>
 	<i v-else class="ti ti-info-circle" :class="$style.i"></i>
 	<div><slot></slot></div>

packages/frontend/src/components/MkInput.vue

@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</datalist>
 		<div ref="suffixEl" :class="$style.suffix"><slot name="suffix"></slot></div>
 	</div>
-	<div :class="$style.caption"><slot name="caption"></slot></div>
+	<div :class="$style.caption" class="_mt"><slot name="caption"></slot></div>
 
 	<MkButton v-if="manualSave && changed" primary :class="$style.save" @click="updated"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
 </div>

packages/frontend/src/components/MkMenu.vue

@@ -31,9 +31,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<template v-for="item in (items2 ?? [])">
 			<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
 
-			<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
+			<div v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label]">
-				<span style="opacity: 0.7;">{{ item.text }}</span>
+				<span>{{ item.text }}</span>
-			</span>
+			</div>
 
 			<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
 				<span><MkEllipsis/></span>
@@ -484,9 +484,9 @@ onBeforeUnmount(() => {
 			min-width: 230px;
 
 			> .item {
-				padding: 6px 20px;
+				padding: 0 20px;
+				min-height: 35px;
 				font-size: 0.95em;
-				line-height: 24px;
 			}
 		}
 	}
@@ -541,12 +541,12 @@ onBeforeUnmount(() => {
 	display: flex;
 	align-items: center;
 	position: relative;
-	padding: 5px 16px;
+	padding: 0 16px;
+	min-height: 30px;
 	width: 100%;
 	box-sizing: border-box;
 	white-space: nowrap;
 	font-size: 0.9em;
-	line-height: 20px;
 	text-align: left;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -619,12 +619,6 @@ onBeforeUnmount(() => {
 		--menuActiveBg: var(--MI_THEME-accentedBg);
 	}
 
-	&.label {
-		pointer-events: none;
-		font-size: 0.7em;
-		padding-bottom: 4px;
-	}
-
 	&.pending {
 		pointer-events: none;
 		opacity: 0.7;
@@ -674,7 +668,6 @@ onBeforeUnmount(() => {
 
 .icon {
 	margin-right: 8px;
-	line-height: 1;
 }
 
 .caret {
@@ -699,6 +692,19 @@ onBeforeUnmount(() => {
 	border-top: solid 0.5px var(--MI_THEME-divider);
 }
 
+.label {
+	position: relative;
+	padding: 6px 16px;
+	box-sizing: border-box;
+	white-space: nowrap;
+	font-size: 0.7em;
+	text-align: left;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	opacity: 0.7;
+	pointer-events: none;
+}
+
 .radioIcon {
 	display: inline-block;
 	position: relative;

packages/frontend/src/components/MkNote.vue

@@ -74,13 +74,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 							:emojiUrls="appearNote.emojis"
 							:enableEmojiMenu="true"
 							:enableEmojiMenuReaction="true"
-							class="_selectable"
+							class="_selectable _mt"
 						/>
 						<div v-if="translating || translation" :class="$style.translation">
 							<MkLoading v-if="translating" mini/>
 							<div v-else-if="translation">
 								<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
+								<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable _mt"/>
 							</div>
 						</div>
 					</div>

packages/frontend/src/components/MkNoteDetailed.vue

@@ -97,14 +97,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:emojiUrls="appearNote.emojis"
 					:enableEmojiMenu="true"
 					:enableEmojiMenuReaction="true"
-					class="_selectable"
+					class="_selectable _mt"
 				/>
 				<a v-if="appearNote.renote != null" :class="$style.rn">RN:</a>
 				<div v-if="translating || translation" :class="$style.translation">
 					<MkLoading v-if="translating" mini/>
 					<div v-else-if="translation">
 						<b>{{ i18n.tsx.translatedFrom({ x: translation.sourceLang }) }}: </b>
-						<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable"/>
+						<Mfm :text="translation.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis" class="_selectable _mt"/>
 					</div>
 				</div>
 				<div v-if="appearNote.files && appearNote.files.length > 0">

packages/frontend/src/components/MkSelect.vue

@@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<div ref="suffixEl" :class="$style.suffix"><i class="ti ti-chevron-down" :class="[$style.chevron, { [$style.chevronOpening]: opening }]"></i></div>
 	</div>
-	<div :class="$style.caption"><slot name="caption"></slot></div>
+	<div :class="$style.caption" class="_mt"><slot name="caption"></slot></div>
 </div>
 </template>
 

packages/frontend/src/components/MkSuperMenu.vue

@@ -235,7 +235,7 @@ function searchOnKeyDown(ev: KeyboardEvent) {
 				align-items: center;
 				width: 100%;
 				box-sizing: border-box;
-				padding: 9px 16px 9px 8px;
+				padding: 10px 16px 10px 8px;
 				border-radius: 9px;
 				font-size: 0.9em;
 

packages/frontend/src/components/MkSwitch.vue

@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</span>
 			<span v-if="helpText" v-tooltip:dialog="helpText" class="_button _help" :class="$style.help"><i class="ti ti-help-circle"></i></span>
 		</span>
-		<p :class="$style.caption"><slot name="caption"></slot></p>
+		<p :class="$style.caption" class="_mt"><slot name="caption"></slot></p>
 	</span>
 </div>
 </template>

packages/frontend/src/components/MkTextarea.vue

@@ -19,13 +19,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:pattern="pattern"
 			:autocomplete="autocomplete"
 			:spellcheck="spellcheck"
+			class="_mt"
 			@focus="focused = true"
 			@blur="focused = false"
 			@keydown="onKeydown($event)"
 			@input="onInput"
 		></textarea>
 	</div>
-	<div :class="$style.caption"><slot name="caption"></slot></div>
+	<div :class="$style.caption" class="_mt"><slot name="caption"></slot></div>
 	<button v-if="mfmPreview" style="font-size: 0.85em;" class="_textButton" type="button" @click="preview = !preview">{{ i18n.ts.preview }}</button>
 	<div v-if="mfmPreview" v-show="preview" v-panel :class="$style.mfmPreview">
 		<Mfm :text="v"/>
@@ -177,7 +178,7 @@ onUnmounted(() => {
 	min-height: 130px;
 	margin: 0;
 	padding: 12px;
-	font: inherit;
+	font-family: inherit;
 	font-weight: normal;
 	font-size: 1em;
 	color: var(--MI_THEME-fg);

packages/frontend/src/components/MkVisibilityPicker.vue

@@ -11,28 +11,28 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<button key="public" :disabled="isSilenced || isReplyVisibilitySpecified" class="_button" :class="[$style.item, { [$style.active]: v === 'public' }]" data-index="1" @click="choose('public')">
 			<div :class="$style.icon"><i class="ti ti-world"></i></div>
-			<div :class="$style.body">
+			<div :class="$style.body" class="_mt">
 				<span :class="$style.itemTitle">{{ i18n.ts._visibility.public }}</span>
 				<span :class="$style.itemDescription">{{ i18n.ts._visibility.publicDescription }}</span>
 			</div>
 		</button>
 		<button key="home" :disabled="isReplyVisibilitySpecified" class="_button" :class="[$style.item, { [$style.active]: v === 'home' }]" data-index="2" @click="choose('home')">
 			<div :class="$style.icon"><i class="ti ti-home"></i></div>
-			<div :class="$style.body">
+			<div :class="$style.body" class="_mt">
 				<span :class="$style.itemTitle">{{ i18n.ts._visibility.home }}</span>
 				<span :class="$style.itemDescription">{{ i18n.ts._visibility.homeDescription }}</span>
 			</div>
 		</button>
 		<button key="followers" :disabled="isReplyVisibilitySpecified" class="_button" :class="[$style.item, { [$style.active]: v === 'followers' }]" data-index="3" @click="choose('followers')">
 			<div :class="$style.icon"><i class="ti ti-lock"></i></div>
-			<div :class="$style.body">
+			<div :class="$style.body" class="_mt">
 				<span :class="$style.itemTitle">{{ i18n.ts._visibility.followers }}</span>
 				<span :class="$style.itemDescription">{{ i18n.ts._visibility.followersDescription }}</span>
 			</div>
 		</button>
 		<button key="specified" :disabled="localOnly" class="_button" :class="[$style.item, { [$style.active]: v === 'specified' }]" data-index="4" @click="choose('specified')">
 			<div :class="$style.icon"><i class="ti ti-mail"></i></div>
-			<div :class="$style.body">
+			<div :class="$style.body" class="_mt">
 				<span :class="$style.itemTitle">{{ i18n.ts._visibility.specified }}</span>
 				<span :class="$style.itemDescription">{{ i18n.ts._visibility.specifiedDescription }}</span>
 			</div>

packages/frontend/src/components/form/slot.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div>
 		<slot></slot>
 	</div>
-	<div :class="$style.caption"><slot name="caption"></slot></div>
+	<div :class="$style.caption" class="_mt"><slot name="caption"></slot></div>
 </div>
 </template>
 

packages/frontend/src/pages/announcement.vue

@@ -23,10 +23,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--MI_THEME-error);"></i>
 						<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--MI_THEME-success);"></i>
 					</span>
-					<Mfm :text="announcement.title"/>
+					<Mfm :text="announcement.title" class="_selectable _mt"/>
 				</div>
 				<div :class="$style.content">
-					<Mfm :text="announcement.text"/>
+					<Mfm :text="announcement.text" class="_selectable _mt"/>
 					<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
 					<div style="margin-top: 8px; opacity: 0.7; font-size: 85%;">
 						{{ i18n.ts.createdAt }}: <MkTime :time="announcement.createdAt" mode="detail"/>

packages/frontend/src/pages/announcements.vue

@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<MkA :to="`/announcements/${announcement.id}`"><span>{{ announcement.title }}</span></MkA>
 						</div>
 						<div :class="$style.content">
-							<Mfm :text="announcement.text"/>
+							<Mfm :text="announcement.text" class="_selectable _mt"/>
 							<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
 							<MkA :to="`/announcements/${announcement.id}`">
 								<div style="margin-top: 8px; opacity: 0.7; font-size: 85%;">

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

@@ -51,7 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div v-if="user.followedMessage != null" class="followedMessage">
 						<MkFukidashi class="fukidashi" :tail="narrow ? 'none' : 'left'" negativeMargin>
 							<div class="messageHeader">{{ i18n.ts.messageToFollower }}</div>
-							<div><MkSparkle><Mfm :plain="true" :text="user.followedMessage" :author="user"/></MkSparkle></div>
+							<div><MkSparkle><Mfm :plain="true" :text="user.followedMessage" :author="user" class="_selectable _mt"/></MkSparkle></div>
 						</MkFukidashi>
 					</div>
 					<div v-if="user.roles.length > 0" class="roles">
@@ -84,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 					<div class="description">
 						<MkOmit>
-							<Mfm v-if="user.description" :text="user.description" :isNote="false" :author="user"/>
+							<Mfm v-if="user.description" :text="user.description" :isNote="false" :author="user" class="_selectable _mt"/>
 							<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
 						</MkOmit>
 					</div>
@@ -105,10 +105,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div v-if="user.fields.length > 0" class="fields">
 						<dl v-for="(field, i) in user.fields" :key="i" class="field">
 							<dt class="name">
-								<Mfm :text="field.name" :author="user" :plain="true" :colored="false"/>
+								<Mfm :text="field.name" :author="user" :plain="true" :colored="false" class="_selectable"/>
 							</dt>
 							<dd class="value">
-								<Mfm :text="field.value" :author="user" :colored="false"/>
+								<Mfm :text="field.value" :author="user" :colored="false" class="_selectable"/>
 								<i v-if="user.verifiedLinks.includes(field.value)" v-tooltip:dialog="i18n.ts.verifiedLink" class="ti ti-circle-check" :class="$style.verifiedLink"></i>
 							</dd>
 						</dl>

packages/frontend/src/style.scss

@@ -32,7 +32,7 @@ html {
 	overflow-wrap: break-word;
 	font-family: 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
 	font-size: 14px;
-	line-height: 1.35;
+	line-height: 1;
 	text-size-adjust: 100%;
 	tab-size: 2;
 	-webkit-text-size-adjust: 100%;
@@ -163,11 +163,12 @@ rt {
 
 .ti {
 	width: 1.28em;
-	vertical-align: -12%;
+	vertical-align: -20%;
-	line-height: 1em;
+	line-height: 0.5;
 
 	&::before {
 		font-size: 128%;
+		line-height: 0.5;
 	}
 }
 
@@ -176,6 +177,15 @@ rt {
 	text-align: center;
 }
 
+// one-line text
+._1t {
+	line-height: 1;
+}
+
+// multi-line text
+	line-height: 1.35;
+}
+
 ._pageContainer {
 	container-type: size;
 	contain: strict;