This commit is contained in:
parent
46f68cb6be
commit
9cf047c44e
|
@ -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%;
|
||||
|
|
|
@ -66,7 +66,7 @@ onMounted(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 360px;
|
||||
min-height: 336px;
|
||||
|
||||
> .root {
|
||||
width: 100%;
|
||||
|
|
|
@ -125,7 +125,7 @@ defineExpose({
|
|||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 360px;
|
||||
min-height: 336px;
|
||||
|
||||
> .root {
|
||||
width: 100%;
|
||||
|
|
|
@ -48,7 +48,7 @@ const isBackupCode = ref(false);
|
|||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 360px;
|
||||
min-height: 336px;
|
||||
|
||||
> .root {
|
||||
width: 100%;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue