ui: fix labels on sign in screen

rhodecode/public/css/login.less

@@ -1,298 +1,304 b''
 //LOGIN
 
 
 .loginbox {
     max-width: 65%;
     margin: @pagepadding auto;
     font-family: @text-light;
     border: @border-thickness solid @grey5;
     box-sizing: border-box;
 
     @media (max-width:1200px) {
         max-width: 85%;
     }
 
     @media (max-width:768px) {
         max-width: 100%;
         width: 100%;
         margin: 0;
     }
 
     .title {
         float: none;
     }
 
     .header {
         width: 100%;
         padding: 0 35px;
         box-sizing: border-box;
 
         .title {
             padding: 0;
         }
     }
 
     .loginwrapper {
         float: left;
         height: 100%;
         width: 100%;
         padding: 35px 55px 35px 35px;
         background-color: white;
         box-sizing: border-box;
 
         @media (max-width:414px) {
             padding: 35px;
         }
     }
 
     .left-column {
         float: left;
         position: relative;
         width: 50%;
         height: 100%;
 
         @media (max-width:414px) {
             display:none;
         }
     }
 
     .right-column {
         float: right;
         position: relative;
         width: 50%;
 
         @media (max-width:414px) {
             width: 100%;
         }
     }
 
     .sign-in-image {
         display: block;
         width: 65%;
         margin: 5% auto;
     }
 
     .sign-in-title {
 
         h4 {
             margin: @padding*2 0;
         }
     }
 
     .form {
         label {
             display: block;
         }
 
         input {
             width: 100%;
             margin: 0 10% @padding 0;
             .box-sizing(border-box) ;
 
             &[type="checkbox"] {
                 clear: both;
                 width: auto;
                 margin: 0 1em @padding 0;
             }
         }
         
         .checkbox {
             display: inline;
             width: auto;
         }
 
         .sign-in {
             clear: both;
             width: 100%;
             margin: @padding 0;
         }
+        .pwd_reset {
+            font-weight: normal;
+        }
+        .new_account {
+            font-weight: bold;
+        }
     }
     .register_message,
     .activation_msg {
         padding: 0 0 @padding;
     }
 
     .buttons,
     .links {
         padding: 0;
     }
 
     .buttons {
         input {
             margin-right: 0;
             .box-sizing(border-box);
         }
 
         #sign_up, #send {
             width: 100%;
         }
     }
 
     .fields {
         .field.field-compact {
             margin-bottom: 0px;
         }
 
         .buttons {
             margin: 0;
         }
 
         .field {
             margin-bottom: 15px;
 
             input {
                 width: 100%;
                 .box-sizing(border-box);
             }
 
             .input {
                 margin-left: 0;
             }
 
             .label {
                 padding-top: 0;
             }
         }
     }
 
     .checkbox {
         margin:  0 0 @textmargin 0;
 
         input[type="checkbox"] {
             width: auto;
         }
 
         label {
             padding: 0;
             min-height: 0;
         }
     }
 
     .activation_msg {
         padding: @padding 0 0;
         color: @grey4;
     }
 
     .links {
         float: right;
         margin: 0;
         padding: 0;
         line-height: 1;
 
         p {
             float: right;
             margin: 0;
             line-height: 1.5em;
         }
     }
 
     p.help-block {
         margin-left: 0;
     }
 }
 
 .user-menu.submenu {
     right: 0; 
     left: auto;
 }
 #quick_login {
     left: auto;
     right: 0;
     padding: @menupadding;
     z-index: 999;
     overflow: hidden;
     background-color: @grey6;
     color: @grey2;
 
     h4 {
         margin-bottom: 12px;
     }
 
     .form {
         width: auto;
     }
 
     label, .field {
         margin-bottom: 0;
     }
 
     .label {
         padding-top: 0;
     }
 
     input {
         min-width: 215px;
         margin: 8px 0 @padding;
     }
 
     input[type="submit"] {
         &:extend(.btn-primary);
         width:100%;
         min-width: 0;
     }
 
     .forgot_password,
     .buttons .register {
         a {
             color: @rcblue;
     
             &:hover {
                 color: @rcdarkblue;
             }
         }
     }
 
     .buttons {
         margin: 0;
     }
 
     .buttons a {
         padding: 8px 0;
         line-height: 1.4em;
         color: @grey4;
 
         &:hover {
             color: @grey2;
         }
     }
 
     #sign_in {
         margin-bottom: 0
     }
 
     .big_gravatar {
         float: left;
         display: block;
         margin-top: .5em;
     }
 
     .full_name,
     .email {
         margin: 0 0 0 65px;
     }
 
     .email {
         font-family: @text-light;
     }
 
     ol.links {
         clear:both;
         margin: 0;
         padding: @padding 0 0 0;
 
         li {
             border-top: @border-thickness solid @grey5;
 
             input {
                 margin: @padding 0 0 0;
             }
         }
     }
 }
 .submenu #quick_login li:hover {
     background-color: transparent;
 }
 
 #quick_login_link:hover + #quick_login {
     display: block;
 }

rhodecode/templates/login.mako

@@ -1,104 +1,104 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="base/root.mako"/>
 
 <%def name="title()">
     ${_('Sign In')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <style>body{background-color:#eeeeee;}</style>
 <div class="loginbox">
     <div class="header">
         <div id="header-inner" class="title">
             <div id="logo">
                 <div class="logo-wrapper">
                     <a href="${h.route_path('home')}"><img src="${h.asset('images/rhodecode-logo-white-216x60.png')}" alt="RhodeCode"/></a>
                 </div>
                 %if c.rhodecode_name:
                 <div class="branding">- ${h.branding(c.rhodecode_name)}</div>
                 %endif
             </div>
         </div>
     </div>
 
     <div class="loginwrapper">
         <rhodecode-toast id="notifications"></rhodecode-toast>
 
         <div class="left-column">
             <img class="sign-in-image" src="${h.asset('images/sign-in.png')}" alt="RhodeCode"/>
         </div>
 
         <%block name="above_login_button" />
         <div id="login" class="right-column">
             <!-- login -->
             <div class="sign-in-title">
                 <h1>${_('Sign In using username/password')}</h1>
             </div>
             <div class="inner form">
                 ${h.form(request.route_path('login', _query={'came_from': c.came_from}), needs_csrf_token=False)}
 
                     <label for="username">${_('Username')}:</label>
                     ${h.text('username', class_='focus', value=defaults.get('username'))}
                     %if 'username' in errors:
                     <span class="error-message">${errors.get('username')}</span>
                     <br />
                     %endif
 
                     <label for="password">${_('Password')}:
                     %if h.HasPermissionAny('hg.password_reset.enabled')():
                         <div class="pull-right">${h.link_to(_('Forgot your password?'), h.route_path('reset_password'), class_='pwd_reset', tabindex="-1")}</div>
                     %endif
 
                     </label>
                     ${h.password('password', class_='focus')}
                     %if 'password' in errors:
                     <span class="error-message">${errors.get('password')}</span>
                     <br />
                     %endif
 
                     ${h.checkbox('remember', value=True, checked=defaults.get('remember'))}
                     <% timeout = request.registry.settings.get('beaker.session.timeout', '0') %>
                     % if timeout == '0':
                         <% remember_label = _('Remember my indefinitely') %>
                     % else:
                         <% remember_label = _('Remember me for {}').format(h.age_from_seconds(timeout)) %>
                     % endif
                     <label class="checkbox" for="remember">${remember_label}</label>
 
                     <p class="links">
                     %if h.HasPermissionAny('hg.admin', 'hg.register.auto_activate', 'hg.register.manual_activate')():
-                        ${h.link_to(_("Create a new account."), request.route_path('register'))}
+                        ${h.link_to(_("Create a new account."), request.route_path('register'), class_='new_account')}
                     %endif
                     </p>
 
                     %if not h.HasPermissionAny('hg.password_reset.enabled')():
                         ## password reset hidden or disabled.
                         <p class="help-block">
                             ${_('Password reset is disabled.')} <br/>
                             ${_('Please contact ')}
                             % if c.visual.rhodecode_support_url:
                                 <a href="${c.visual.rhodecode_support_url}" target="_blank">${_('Support')}</a>
                                 ${_('or')}
                             % endif
                             ${_('an administrator if you need help.')}
                         </p>
                     %endif
 
                     ${h.submit('sign_in', _('Sign In'), class_="btn sign-in", title=_('Sign in to {}').format(c.rhodecode_edition))}
 
                 ${h.end_form()}
                 <script type="text/javascript">
                     $(document).ready(function(){
                         $('#username').focus();
                     })
                 </script>
 
             </div>
             <!-- end login -->
 
             <%block name="below_login_button" />
         </div>
     </div>
 </div>