diff --git a/app/assets/images/logotype on dark.svg b/app/assets/images/logotype on dark.svg new file mode 100644 index 000000000..ec4360a20 --- /dev/null +++ b/app/assets/images/logotype on dark.svg @@ -0,0 +1,17 @@ + + + + logotype on dark + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/app/assets/images/logotype.svg b/app/assets/images/logotype.svg deleted file mode 100644 index 4e29ad919..000000000 --- a/app/assets/images/logotype.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/javascripts/app/views/login.jst.eco b/app/assets/javascripts/app/views/login.jst.eco index af584f0a4..8729e8d55 100644 --- a/app/assets/javascripts/app/views/login.jst.eco +++ b/app/assets/javascripts/app/views/login.jst.eco @@ -1,55 +1,63 @@ -
-

<%- @T( 'Login with %s', @C( 'fqdn' ) ) %>

+
+
+

<%- @T( 'Login with %s', @C( 'fqdn' ) ) %>

-
- -
-
- - -
+
+ + +
+ + +
-
- - -
+
+ + +
-
- +
+ - <% if @C('user_lost_password'): %> - <%- @T( 'Forgot password?' ) %> + <% if @C('user_lost_password'): %> + <%- @T( 'Forgot password?' ) %> + <% end %> +
+ + <% if !_.isEmpty( @auth_providers ): %> +
+ <%- @T( 'or sign in using' ) %> +
+ +
+ <% for auth_provider in @auth_providers: %> + + + <%- @T( auth_provider.name ) %> + + <% end %> +
<% end %> -
+ +
- <% if !_.isEmpty( @auth_providers ): %> -
- <%- @T( 'or sign in using' ) %> -
- -
- <% for auth_provider in @auth_providers: %> - - - <%- @T( auth_provider.name ) %> - - <% end %> -
+

+ <%- @T( "You're already registered with your email adress if you've been in touch with our support team.") %>
+ <% if @C('user_lost_password'): %> + <%- @T( "You can request your password") %> <%- @T( "here") %>. <% end %> - +

+ + <% if @C('user_create_account'): %> +
+

+ <%- @T( 'Register as a new customer' ) %> +

+ <% end %>
-

- <%- @T( "You're already registered with your email adress if you've been in touch with our support team.") %>
- <% if @C('user_lost_password'): %> - <%- @T( "You can request your password") %> <%- @T( "here") %>. - <% end %> -

- - <% if @C('user_create_account'): %> -
-

- <%- @T( 'Register as a new customer' ) %> -

- <% end %> +
+ + <%- @T("Powered by") %> + +
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss index 5fce6278e..a8123e3f8 100644 --- a/app/assets/stylesheets/zammad.css.scss +++ b/app/assets/stylesheets/zammad.css.scss @@ -808,6 +808,12 @@ textarea, background: hsl(234,10%,19%); } +.login { + @extend .fit; + @extend .vertical; + @extend .center; +} + .login .hero-unit { width: 430px; } @@ -822,7 +828,7 @@ textarea, .login p { margin: 10px 0; max-width: 400px; - color: hsl(210,8%,42%); + color: hsl(233,7%,42%); text-align: center; } @@ -834,19 +840,42 @@ textarea, } .login p a { - color: hsl(210,8%,54%); + color: hsl(233,7%,54%); text-decoration: underline; } - .subtle-link { - color: rgba(0,0,0,.32); - text-decoration: underline; - @extend .u-clickable; +.poweredBy { + @extend .horizontal; + @extend .center; + color: hsl(233,7%,26%); + padding: 20px 0 10px; + margin-top: auto; + margin-left: -14px; + cursor: default; + + .logo { + height: 40px; + margin-right: 8px; + margin-top: -11px; } - .subtle-link:hover { - color: rgba(0,0,0,.5); + .logotype { + opacity: 0.095; + height: 15px; + margin-left: 5px; + margin-top: -6px; } +} + +.subtle-link { + color: rgba(0,0,0,.32); + text-decoration: underline; + @extend .u-clickable; +} + +.subtle-link:hover { + color: rgba(0,0,0,.5); +} ol.tabs { list-style: decimal inside;