simplify login css

use mixins, remove lots of unnecessary CSS

share/jupyter/hub/static/less/login.less

@@ -1,9 +1,7 @@
-@login-primary: #f8A52D;
-@login-secondary: #E25C24;
-
 #login-main {
     display: table;
-    height:80vh;
+    height: 80vh;
+    
     form {
         display: table-cell;
         vertical-align: middle;
@@ -12,82 +10,39 @@
         font-size: large;
     }
     
-
     .input-group, input[type=text], button {
         width: 100%;
     }
 
-    .input-group-addon {
-        width: 100px;
-    }
-
-    input:focus {
-        z-index: 5;
-    }
-    
-    .pwd-group {
-        margin-top: -1px;
-    }
-    
     input[type=submit] {
         margin-top: 16px;
-        background-color: @login-primary;
-        background: linear-gradient(to bottom,  @login-primary 0%, @login-secondary 100%); /* W3C */
-        border-color: @login-primary;
-        transition: all 0.1s;
-            &:hover{
-                background-color: darken(@login-primary, 8%);
-                background: linear-gradient(to bottom,  darken(@login-primary, 5%) 0%, darken(@login-secondary, 5%) 100%); /* W3C */
-                border-color: darken(@login-primary, 12%);
-            }
     }
     
     .form-control:focus, input[type=submit]:focus {
-        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @login-primary;
+        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @jupyter-orange;
-        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @login-primary;
+        border-color: @jupyter-orange;
-        border-color: @login-primary;
+        outline-color: @jupyter-orange;
-        outline-color: @login-primary;
+    }
+    
+    .message {
+        color: orangered;
+        font-weight: bold;
+        text-align: center;
+    }
+
+    .auth-form-header {
+        padding: 10px 20px;
+        color: #fff;
+        background: @jupyter-orange;
+        border-radius: @border-radius-large @border-radius-large 0 0;
+    }
+
+    .auth-form-body {
+        padding: 20px;
+        font-size: 14px;
+        border: thin silver solid;
+        border-top: none;
+        border-radius: 0 0 @border-radius-large @border-radius-large;
     }
 }
 
-
-.message {
-    color:orangered;
-    font-weight:bold;
-    margin:0 1em 1em 1em;
-    text-align: center;
-}
-
-.auth-form-header {
-    position: relative;
-    padding: 10px 20px;
-    margin: 0;
-    color: #fff;
-
-    background: @login-primary; /* Old browsers */
-    background: linear-gradient(to bottom,  @login-primary 0%, @login-secondary 100%); /* W3C */
-
-
-    border-radius: @border-radius-large @border-radius-large 0 0;
-}
-
-form {
-    border-radius: @border-radius-large;
-    border: none;
-}
-
-.auth-form-header h1 {
-    margin-top: 0;
-    margin-bottom: 0;
-    font-size: 16px;
-    border:none;
-}
-
-
-.auth-form-body {
-    padding: 20px;
-    font-size: 14px;
-    border: thin silver solid;
-    border-top:none;
-    border-radius: 0 0 @border-radius-large @border-radius-large;
-}

share/jupyter/hub/static/less/variables.less

@@ -1,5 +1,10 @@
-@border-radius-small: 1px;
+@border-radius-small: 2px;
 @border-radius-base: 2px;
 @border-radius-large: 3px;
 
+@jupyter-orange: #F37524;
+@jupyter-red: #E34F21;
 
+.btn-jupyter {
+  .button-variant(#fff; @jupyter-orange; @jupyter-red);
+}

share/jupyter/hub/templates/login.html

@@ -11,13 +11,13 @@
 {% else %}
   <form action="{{login_url}}?next={{next}}" method="post" role="form">
         <div class="auth-form-header">
-            <h1>Sign in</h1>
+            Sign in
         </div>
         <div class='auth-form-body'>
           {% if message %}
-            <div class="message">
+            <p class="message">
               {{message.error}}
-            </div>
+            </p>
           {% endif %}
           <label           for="username_input">Username:</label>
           <input          
@@ -32,8 +32,7 @@
                       autofocus="autofocus"
                       />
             <label 
-                            for='password_input'    >Password:
+                            for='password_input'>Password:
-                            <!--<a href="/password_reset">(forgot password)</a>-->
             </label>
             <input 
                            type="password" 
@@ -44,7 +43,7 @@
 
              <input       type="submit"
                            id="login_submit"
-                        class='btn btn-default btn-primary'
+                        class='btn btn-jupyter'
                         value='Sign In'
                       tabindex="3"
                          />