fix(login): Make login form and footer look like a dashboard panel

Also adjust border radius to match new main content box.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

diff --git a/core/css/guest.scss b/core/css/guest.scss
index 08137f1c630e14dd653c944413aa1f6d48ac8ab3..f8435d1e911f36d9b9587abc1eac55f3d4527946 100644 (file)
--- 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 4afa81d0dfa4d0a9bdc1b31424da1a3ed0789111..539c1db308ecaf3937f5ff8046843c4aebea42f2 100644 (file)
--- 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;
 }