diff --git a/share/jupyter/hub/static/less/login.less b/share/jupyter/hub/static/less/login.less index ce4d6203..7ef883fe 100644 --- a/share/jupyter/hub/static/less/login.less +++ b/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 @login-primary; - border-color: @login-primary; - outline-color: @login-primary; + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @jupyter-orange; + border-color: @jupyter-orange; + outline-color: @jupyter-orange; + } + + .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; -} diff --git a/share/jupyter/hub/static/less/variables.less b/share/jupyter/hub/static/less/variables.less index b4ce1f1e..a133ce20 100644 --- a/share/jupyter/hub/static/less/variables.less +++ b/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); +} diff --git a/share/jupyter/hub/templates/login.html b/share/jupyter/hub/templates/login.html index 2717df9f..ca3e7af2 100644 --- a/share/jupyter/hub/templates/login.html +++ b/share/jupyter/hub/templates/login.html @@ -11,13 +11,13 @@ {% else %}
-

Sign in

+ Sign in
{% if message %} -
+

{{message.error}} -

+

{% endif %}