Mercurial > gemma
changeset 17:7d242100af46
Adjusted the look and feel of the login page according to ISC
We have now a light gray background.
The login is in a white rounded box with black border.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 21 Jun 2018 11:19:02 +0200 |
parents | 05d828374256 |
children | eef728039900 |
files | client/src/App.vue client/src/views/Login.vue |
diffstat | 2 files changed, 13 insertions(+), 2 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Thu Jun 21 09:20:39 2018 +0200 +++ b/client/src/App.vue Thu Jun 21 11:19:02 2018 +0200 @@ -7,6 +7,10 @@ </template> <style lang="scss"> +body { + background-color: #efefef !important; +} + #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased;
--- a/client/src/views/Login.vue Thu Jun 21 09:20:39 2018 +0200 +++ b/client/src/views/Login.vue Thu Jun 21 11:19:02 2018 +0200 @@ -1,12 +1,12 @@ <template> - <div class="login"> + <div class="login border border-dark rounded bg-white"> <div> <div class="logo d-flex flex-row justify-content-center"> <div><img src="../assets/logo.png"></div> <div class="title"><h1>{{ appTitle }}</h1></div> </div> </div> - <div class="login-wrapper border border-light d-flex flex-row justify-content-center"> + <div class="login-wrapper d-flex flex-row justify-content-center"> <form class="loginform form-signin" @submit.prevent="login"> <div v-if="loginFailed" class="alert alert-danger" role="alert"> <span class="loginerror">{{ loginAttemptFailed }}</span> @@ -36,12 +36,15 @@ <style lang="scss"> $offset: 20px; +$small-offset: 10px; $iconsize: 3em; $iconLineHeight: 0.25em; $iconwidth: 20px; .forgottenlink { text-align: right; + margin-top: $small-offset; + margin-bottom: $offset; } #inputPassword { border-right: none; @@ -50,7 +53,10 @@ background-color: white !important; } .login { + margin-left: auto; + margin-right: auto; margin-top: 200px; + width: 600px; } .loginerror { white-space: pre; @@ -61,6 +67,7 @@ .logo { position: relative; left: -85px; + margin-top: $offset; margin-bottom: $offset; } .mail-icon {