fix layout issues at login page

new stucture:
  .fullscreen > .fullscreen-center > .fullscreen-content

app/assets/javascripts/app/views/login.jst.eco

@@ -1,5 +1,6 @@
-<div class="login">
+<div class="login fullscreen">
-  <div class="flex vertical centered">
+  <div class="fullscreen-center">
+    <div class="fullscreen-body">
       <p><%- @T( 'Login with %s', @C( 'fqdn' ) ) %></p>
 
       <div class="hero-unit">
@@ -62,7 +63,7 @@
       </p>
     <% end %>
     </div>
-
+  </div>
   <div class="poweredBy">
     <img class="logo" src="<%= @C('image_path') + '/' + 'logo.svg' %>">
     <%- @T("Powered by") %>

app/assets/javascripts/app/views/password/reset.jst.eco

@@ -1,5 +1,6 @@
-<div class="fullHeight vertical center justified reset_password fit">
+<div class="reset_password fullscreen">
-  <div class="hero-unit">
+  <div class="fullscreen-center">
+    <div class="hero-unit fullscreen-body">
       <% if @sent: %>
         <h2><%- @T('We\'ve sent password reset instructions to your email address.') %><small></small></h2>
         <p><%- @T('If you don\'t receive instructions within a minute or two, check your email\'s spam and junk filters, or try resending your request.') %></p>
@@ -16,3 +17,4 @@
       <% end %>
     </div>
   </div>
+</div>

app/assets/javascripts/app/views/signup.jst.eco

@@ -1,5 +1,6 @@
-<div class="fullHeight vertical center justified signup fit">
+<div class="signup fullscreen">
-  <div class="hero-unit">
+  <div class="fullscreen-center">
+    <div class="hero-unit fullscreen-body">
       <h1><%- @T( 'Join' ) %> <%= @C( 'product_name' ) %></h1>
       <form>
         <div class="form-controls">
@@ -9,3 +10,4 @@
       </form>
     </div>
   </div>
+</div>

app/assets/stylesheets/zammad.css.scss

@@ -822,13 +822,12 @@ textarea,
   margin-bottom: 5px;
 }
 
-.login, 
 .getstarted, 
 .reset_password,
 .signup,
-.darkBackground {
+.darkBackground,
+.login {
   padding: 10px;
-  height: auto;
   background: hsl(234,10%,19%);
 }
 
@@ -841,13 +840,37 @@ textarea,
 }
 
 .login {
-  @extend .fit;
+  padding: 24px 24px 97px;
-  @extend .vertical;
+  color: hsl(212,8%,40%);  
-  @extend .center;
+  
+  a {
+    color: hsl(229,2%,51%);
+  }
+
+  &.login--fancy {
+    color: hsla(0,0%,100%,.7);
+    background:
+      radial-gradient(circle at 49.06% 50.5%, #a36f71, transparent 74%),
+      radial-gradient(circle at 6.95% 9.56%, #745479, transparent 100%),
+      radial-gradient(circle at 2.58% 98.57%, #392e3e, transparent 51%),
+      radial-gradient(circle at 82.11% 97.15%, #5c404e, transparent 100%),
+      radial-gradient(circle at 50% 50%, #8b6b76, #8b6b76 100%);
+      
+    a {
+      color: white;
+    }
+
+    .hero-unit {
+      box-shadow: 
+        0 8px 17px 0 rgba(0, 0, 0, 0.1),
+        0 6px 20px 0 rgba(0, 0, 0, 0.09);
+    }
+  }
 }
 
 .login .hero-unit {
   width: 430px;
+  margin: 0 0 28px;
 }
 
   .login .company-logo {
@@ -858,32 +881,31 @@ textarea,
   }
 
   .login p {
-    margin: 10px 0;
+    margin: 0 auto 22px;
     max-width: 400px;
-    color: hsl(212,8%,40%);
     text-align: center;
   }
 
   .login hr {
-    margin: 10px 0;
+    margin: 0 auto 22px;
     border-top-color: rgba(255,255,255,.15);
     width: 100%;
     max-width: 400px;
   }
 
   .login p a {
-    color: hsl(229,2%,51%);
     text-decoration: underline;
   }
 
 .poweredBy {
-  @extend .horizontal;
+  @extend .centered;
-  @extend .center;
   color: hsl(233,7%,26%);
-  padding: 20px 0 10px;
+  margin: auto 0 34px -16px;
-  margin-top: auto;
-  margin-left: -14px;
   cursor: default;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
   
   .logo {
     height: 40px;
@@ -897,6 +919,24 @@ textarea,
   }
 }
 
+.fullscreen {
+  @extend .fit;
+  display: table;
+  width: 100%;
+  min-height: 100vh;
+}
+
+.fullscreen-center {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+}
+
+.fullscreen-body {
+  text-align: left;
+  display: inline-block;
+}
+
 .subtle-link {
   color: rgba(0,0,0,.32);
   text-decoration: underline;
@@ -1720,6 +1760,7 @@ form {
 }
 
 .form-controls {
+  @extend .clearfix;
   margin-top: 10px;
 }
 
@@ -4801,10 +4842,6 @@ label + .wizard-buttonList {
   flex: 1;
 }
 
-.fullHeight {
-  min-height: 100%;
-}
-
 .relative {
   position: relative;
 }