This commit is contained in:
kakkokari-gtyih 2024-10-04 10:51:08 +09:00
parent 46f68cb6be
commit 9cf047c44e
5 changed files with 31 additions and 17 deletions

View File

@ -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%;

View File

@ -66,7 +66,7 @@ onMounted(() => {
display: flex;
align-items: center;
width: 100%;
min-height: 360px;
min-height: 336px;
> .root {
width: 100%;

View File

@ -125,7 +125,7 @@ defineExpose({
display: flex;
align-items: center;
width: 100%;
min-height: 360px;
min-height: 336px;
> .root {
width: 100%;

View File

@ -48,7 +48,7 @@ const isBackupCode = ref(false);
display: flex;
align-items: center;
width: 100%;
min-height: 360px;
min-height: 336px;
> .root {
width: 100%;

View File

@ -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>