diff options
| -rw-r--r-- | core/css/guest.scss | 2 | ||||
| -rw-r--r-- | core/src/views/Login.vue | 40 |
2 files changed, 36 insertions, 6 deletions
diff --git a/core/css/guest.scss b/core/css/guest.scss index 08137f1c630..f8435d1e911 100644 --- a/core/css/guest.scss +++ b/core/css/guest.scss @@ -797,7 +797,7 @@ a.legal { color: var(--color-main-text); background-color: var(--color-main-background); padding: $guest-container-padding; - border-radius: var(--border-radius-large); + border-radius: var(--body-container-radius); box-shadow: 0 0 10px var(--color-box-shadow); display: inline-block; } diff --git a/core/src/views/Login.vue b/core/src/views/Login.vue index 4afa81d0dfa..539c1db308e 100644 --- a/core/src/views/Login.vue +++ b/core/src/views/Login.vue @@ -21,7 +21,7 @@ <template> <div class="guest-box login-box"> - <div v-if="!hideLoginForm || directLogin"> + <template v-if="!hideLoginForm || directLogin"> <transition name="fade" mode="out-in"> <div v-if="!passwordlessLogin && !resetPassword && resetPasswordTarget === ''"> <LoginForm :username.sync="user" @@ -93,14 +93,14 @@ @done="passwordResetFinished" /> </div> </transition> - </div> - <div v-else> + </template> + <template v-else> <transition name="fade" mode="out-in"> <NcNoteCard type="warning" :title="t('core', 'Login form is disabled.')"> {{ t('core', 'Please contact your administrator.') }} </NcNoteCard> </transition> - </div> + </template> <div id="alternative-logins" class="alternative-logins"> <NcButton v-for="(alternativeLogin, index) in alternativeLogins" @@ -193,7 +193,9 @@ body { } .login-box { - width: 300px; + // Same size as dashboard panels + width: 320px; + box-sizing: border-box; &__link { display: block; @@ -203,6 +205,34 @@ body { font-weight: normal !important; } } + +// Same look like a dashboard panel +.login-box.guest-box, footer { + color: var(--color-main-text); + background-color: var(--color-main-background-blur); + -webkit-backdrop-filter: var(--filter-background-blur); + backdrop-filter: var(--filter-background-blur); +} + +footer { + // Usually the same size as the login box, but allow longer texts + min-width: 320px; + box-sizing: border-box; + // align with login box + box-shadow: 0 0 10px var(--color-box-shadow); + // set border to pill style and adjust padding for it + border-radius: var(--border-radius-pill); + padding: 6px 24px; + // always show above bottom + margin-bottom: 1rem; + min-height: unset; + + // reset margin to reduce height of pill + p.info { + margin: auto 0px; + } +} + .fade-enter-active, .fade-leave-active { transition: opacity .3s; } |