From c7e60cfd0c4d3b75c84b761b04c9a0668d5665d4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 28 Apr 2021 18:36:07 +0900
Subject: [PATCH] Fix style

---
 src/client/components/user-select-dialog.vue | 166 ++++++++++---------
 1 file changed, 85 insertions(+), 81 deletions(-)

diff --git a/src/client/components/user-select-dialog.vue b/src/client/components/user-select-dialog.vue
index 620c8eee28..74081753b7 100644
--- a/src/client/components/user-select-dialog.vue
+++ b/src/client/components/user-select-dialog.vue
@@ -8,33 +8,35 @@
 	@closed="$emit('closed')"
 >
 	<template #header>{{ $ts.selectUser }}</template>
-	<div class="tbhwbxda _section">
-		<div class="inputs">
-			<MkInput v-model:value="username" class="input" @update:value="search" ref="username"><span>{{ $ts.username }}</span><template #prefix>@</template></MkInput>
-			<MkInput v-model:value="host" class="input" @update:value="search"><span>{{ $ts.host }}</span><template #prefix>@</template></MkInput>
-		</div>
-	</div>
-	<div class="tbhwbxda _section result" v-if="username != '' || host != ''" :class="{ hit: users.length > 0 }">
-		<div class="users" v-if="users.length > 0">
-			<div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-				<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-				<div class="body">
-					<MkUserName :user="user" class="name"/>
-					<MkAcct :user="user" class="acct"/>
-				</div>
+	<div class="tbhwbxda _monolithic_">
+		<div class="_section">
+			<div class="inputs">
+				<MkInput v-model:value="username" class="input" @update:value="search" ref="username"><span>{{ $ts.username }}</span><template #prefix>@</template></MkInput>
+				<MkInput v-model:value="host" class="input" @update:value="search"><span>{{ $ts.host }}</span><template #prefix>@</template></MkInput>
 			</div>
 		</div>
-		<div v-else class="empty">
-			<span>{{ $ts.noUsers }}</span>
+		<div class="_section result" v-if="username != '' || host != ''" :class="{ hit: users.length > 0 }">
+			<div class="users" v-if="users.length > 0">
+				<div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
+					<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
+					<div class="body">
+						<MkUserName :user="user" class="name"/>
+						<MkAcct :user="user" class="acct"/>
+					</div>
+				</div>
+			</div>
+			<div v-else class="empty">
+				<span>{{ $ts.noUsers }}</span>
+			</div>
 		</div>
-	</div>
-	<div class="tbhwbxda _section recent" v-if="username == '' && host == ''">
-		<div class="users">
-			<div class="user" v-for="user in recentUsers" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-				<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-				<div class="body">
-					<MkUserName :user="user" class="name"/>
-					<MkAcct :user="user" class="acct"/>
+		<div class="_section recent" v-if="username == '' && host == ''">
+			<div class="users">
+				<div class="user" v-for="user in recentUsers" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
+					<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
+					<div class="body">
+						<MkUserName :user="user" class="name"/>
+						<MkAcct :user="user" class="acct"/>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -122,76 +124,78 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .tbhwbxda {
-	display: flex;
-	flex-direction: column;
-	overflow: auto;
-	height: 100%;
-
-	&.result.hit {
-		padding: 0;
-	}
-
-	&.recent {
-		padding: 0;
-	}
-
-	> .inputs {
-		> .input {
-			display: inline-block;
-			width: 50%;
-			margin: 0;
-		}
-	}
-
-	> .users {
-		flex: 1;
+	> ._section {
+		display: flex;
+		flex-direction: column;
 		overflow: auto;
-		padding: 8px 0;
+		height: 100%;
 
-		> .user {
-			display: flex;
-			align-items: center;
-			padding: 8px var(--root-margin);
-			font-size: 14px;
+		&.result.hit {
+			padding: 0;
+		}
 
-			&:hover {
-				background: var(--X7);
+		&.recent {
+			padding: 0;
+		}
+
+		> .inputs {
+			> .input {
+				display: inline-block;
+				width: 50%;
+				margin: 0;
 			}
+		}
 
-			&.selected {
-				background: var(--accent);
-				color: #fff;
-			}
+		> .users {
+			flex: 1;
+			overflow: auto;
+			padding: 8px 0;
 
-			> * {
-				pointer-events: none;
-				user-select: none;
-			}
+			> .user {
+				display: flex;
+				align-items: center;
+				padding: 8px var(--root-margin);
+				font-size: 14px;
 
-			> .avatar {
-				width: 45px;
-				height: 45px;
-			}
-
-			> .body {
-				padding: 0 8px;
-				min-width: 0;
-
-				> .name {
-					display: block;
-					font-weight: bold;
+				&:hover {
+					background: var(--X7);
 				}
 
-				> .acct {
-					opacity: 0.5;
+				&.selected {
+					background: var(--accent);
+					color: #fff;
+				}
+
+				> * {
+					pointer-events: none;
+					user-select: none;
+				}
+
+				> .avatar {
+					width: 45px;
+					height: 45px;
+				}
+
+				> .body {
+					padding: 0 8px;
+					min-width: 0;
+
+					> .name {
+						display: block;
+						font-weight: bold;
+					}
+
+					> .acct {
+						opacity: 0.5;
+					}
 				}
 			}
 		}
-	}
 
-	> .empty {
-		opacity: 0.7;
-		text-align: center;
+		> .empty {
+			opacity: 0.7;
+			text-align: center;
+		}
 	}
 }
 </style>