From 9cf047c44e9050942c9c3a103a3c517887e6888a Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 4 Oct 2024 10:51:08 +0900
Subject: [PATCH] :art:

---
 .../src/components/MkSignin.input.vue         |  4 +-
 .../src/components/MkSignin.passkey.vue       |  2 +-
 .../src/components/MkSignin.password.vue      |  2 +-
 .../frontend/src/components/MkSignin.totp.vue |  2 +-
 .../src/components/MkSigninDialog.vue         | 38 +++++++++++++------
 5 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/components/MkSignin.input.vue b/packages/frontend/src/components/MkSignin.input.vue
index 67ebcbdd93..6336b78c80 100644
--- a/packages/frontend/src/components/MkSignin.input.vue
+++ b/packages/frontend/src/components/MkSignin.input.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="$style.wrapper" data-cy-signin-page-input>
 	<div :class="$style.root">
-		<div :class="$style.avatar" :style="{ marginBottom: message ? '1.5em' : undefined }">
+		<div :class="$style.avatar">
 			<i class="ti ti-user"></i>
 		</div>
 
@@ -153,7 +153,7 @@ async function specifyHostAndOpenRemote(options: OpenOnRemoteOptions): Promise<v
 	display: flex;
 	align-items: center;
 	width: 100%;
-	min-height: 300px;
+	min-height: 336px;
 
 	> .root {
 		width: 100%;
diff --git a/packages/frontend/src/components/MkSignin.passkey.vue b/packages/frontend/src/components/MkSignin.passkey.vue
index 297db95f89..0d68955fab 100644
--- a/packages/frontend/src/components/MkSignin.passkey.vue
+++ b/packages/frontend/src/components/MkSignin.passkey.vue
@@ -66,7 +66,7 @@ onMounted(() => {
 	display: flex;
 	align-items: center;
 	width: 100%;
-	min-height: 360px;
+	min-height: 336px;
 
 	> .root {
 		width: 100%;
diff --git a/packages/frontend/src/components/MkSignin.password.vue b/packages/frontend/src/components/MkSignin.password.vue
index 0748c59ffc..2d79e2aeb1 100644
--- a/packages/frontend/src/components/MkSignin.password.vue
+++ b/packages/frontend/src/components/MkSignin.password.vue
@@ -125,7 +125,7 @@ defineExpose({
 	display: flex;
 	align-items: center;
 	width: 100%;
-	min-height: 360px;
+	min-height: 336px;
 
 	> .root {
 		width: 100%;
diff --git a/packages/frontend/src/components/MkSignin.totp.vue b/packages/frontend/src/components/MkSignin.totp.vue
index e64cdc1f26..880c08315e 100644
--- a/packages/frontend/src/components/MkSignin.totp.vue
+++ b/packages/frontend/src/components/MkSignin.totp.vue
@@ -48,7 +48,7 @@ const isBackupCode = ref(false);
 	display: flex;
 	align-items: center;
 	width: 100%;
-	min-height: 360px;
+	min-height: 336px;
 
 	> .root {
 		width: 100%;
diff --git a/packages/frontend/src/components/MkSigninDialog.vue b/packages/frontend/src/components/MkSigninDialog.vue
index 5b10928aa0..bd338257a1 100644
--- a/packages/frontend/src/components/MkSigninDialog.vue
+++ b/packages/frontend/src/components/MkSigninDialog.vue
@@ -11,11 +11,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@closed="emit('closed')"
 >
 	<div :class="$style.root">
-		<div :class="$style.header"><i class="ti ti-login-2"></i> {{ i18n.ts.login }}</div>
-		<button :class="$style.closeButton" class="_button" @click="onClose"><i class="ti ti-x"></i></button>
-		<MkSpacer :marginMin="20" :marginMax="28" style="margin: auto;">
+		<div :class="$style.header">
+			<div :class="$style.headerText"><i class="ti ti-login-2"></i> {{ i18n.ts.login }}</div>
+			<button :class="$style.closeButton" class="_button" @click="onClose"><i class="ti ti-x"></i></button>
+		</div>
+		<div :class="$style.content">
 			<MkSignin :autoSet="autoSet" :message="message" :openOnRemote="openOnRemote" @login="onLogin"/>
-		</MkSpacer>
+		</div>
 	</div>
 </MkModal>
 </template>
@@ -58,11 +60,9 @@ function onLogin(res) {
 
 <style lang="scss" module>
 .root {
-	display: flex;
 	overflow: auto;
 	margin: auto;
 	position: relative;
-	padding: 32px;
 	width: 100%;
 	max-width: 400px;
 	height: 100%;
@@ -73,19 +73,33 @@ function onLogin(res) {
 }
 
 .header {
-	position: absolute;
+	position: sticky;
 	top: 0;
 	left: 0;
+	width: 100%;
+	min-height: 50px;
+	display: flex;
+	align-items: center;
 	font-weight: bold;
-	padding: 16px 20px;
+	backdrop-filter: var(--blur, blur(15px));
+	background: var(--acrylicBg);
+	border-bottom: solid .5px var(--divider);
+	z-index: 1;
+}
+
+.headerText {
+	padding: 0 20px;
+	box-sizing: border-box;
 }
 
 .closeButton {
-	position: absolute;
-	z-index: 1;
-	top: 0;
-	right: 0;
+	margin-left: auto;
 	padding: 16px;
 	font-size: 16px;
 }
+
+.content {
+	padding: 32px;
+	box-sizing: border-box;
+}
 </style>