login: optimized UI for login/register/password reset windows.

rhodecode/public/css/login.less

@@ -2,7 +2,7 b''
 
 
 .loginbox {
-    max-width: 65%;
+    max-width: 960px;
     margin: @pagepadding auto;
     font-family: @text-light;
     border: @border-thickness solid @grey5;
@@ -83,7 +83,7 b''
     .sign-in-image {
         display: block;
         width: 65%;
-        margin: 5% auto;
+        margin: 1% auto;
     }
 
     .sign-in-title {

rhodecode/templates/login.mako

@@ -7,8 +7,8 b''
         · ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
+<style>body{background-color:#eeeeee;}</style>
 
-<style>body{background-color:#eeeeee;}</style>
 <div class="loginbox">
     <div class="header-account">
         <div id="header-inner" class="title">
@@ -28,11 +28,11 b''
     <div class="loginwrapper">
         <rhodecode-toast id="notifications"></rhodecode-toast>
 
-        <div class="left-column">
+        <div class="auth-image-wrapper">
             <img class="sign-in-image" src="${h.asset('images/sign-in.png')}" alt="RhodeCode"/>
         </div>
 
-        <div id="login" class="right-column">
+        <div id="login">
             <%block name="above_login_button" />
             <!-- login -->
             <div class="sign-in-title">

rhodecode/templates/password_reset.mako

@@ -27,7 +27,8 b''
 
     <div class="loginwrapper">
         <rhodecode-toast id="notifications"></rhodecode-toast>
-        <div class="left-column">
+
+        <div class="auth-image-wrapper">
             <img class="sign-in-image" src="${h.asset('images/sign-in.png')}" alt="RhodeCode"/>
         </div>
 
@@ -43,7 +44,7 b''
                 </p>
             </div>
         %else:
-            <div id="register" class="right-column">
+            <div id="register">
                 <!-- login -->
                 <div class="sign-in-title">
                     <h1>${_('Reset your Password')}</h1>

rhodecode/templates/register.mako

@@ -27,11 +27,13 b''
 
     <div class="loginwrapper">
         <rhodecode-toast id="notifications"></rhodecode-toast>
-        <div class="left-column">
+
+        <div class="auth-image-wrapper">
             <img class="sign-in-image" src="${h.asset('images/sign-in.png')}" alt="RhodeCode"/>
         </div>
-        <%block name="above_register_button" />
-        <div id="register" class="right-column">
+
+        <div id="register">
+            <%block name="above_register_button" />
             <!-- login -->
             <div class="sign-in-title">
                 % if external_auth_provider: