diff --git a/services/web/public/img/other-brands/logo_google.svg b/services/web/public/img/other-brands/logo_google.svg new file mode 100644 index 0000000000..728b6fa185 --- /dev/null +++ b/services/web/public/img/other-brands/logo_google.svg @@ -0,0 +1 @@ +Shape-Copy \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_google_alt.svg b/services/web/public/img/other-brands/logo_google_alt.svg new file mode 100644 index 0000000000..3c7a7228ae --- /dev/null +++ b/services/web/public/img/other-brands/logo_google_alt.svg @@ -0,0 +1 @@ +Shape-Copy \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_ieee.svg b/services/web/public/img/other-brands/logo_ieee.svg new file mode 100644 index 0000000000..29fc90e1a7 --- /dev/null +++ b/services/web/public/img/other-brands/logo_ieee.svg @@ -0,0 +1 @@ +Asset 2 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_orcid.svg b/services/web/public/img/other-brands/logo_orcid.svg new file mode 100644 index 0000000000..98107f2e5e --- /dev/null +++ b/services/web/public/img/other-brands/logo_orcid.svg @@ -0,0 +1 @@ +Asset 1 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_orcid_alt.svg b/services/web/public/img/other-brands/logo_orcid_alt.svg new file mode 100644 index 0000000000..82affd04de --- /dev/null +++ b/services/web/public/img/other-brands/logo_orcid_alt.svg @@ -0,0 +1 @@ +Asset 1 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_sharelatex.svg b/services/web/public/img/other-brands/logo_sharelatex.svg new file mode 100644 index 0000000000..e59e2db80d --- /dev/null +++ b/services/web/public/img/other-brands/logo_sharelatex.svg @@ -0,0 +1 @@ +Asset 4 \ No newline at end of file diff --git a/services/web/public/img/other-brands/logo_twitter.svg b/services/web/public/img/other-brands/logo_twitter.svg new file mode 100644 index 0000000000..6a00726c0c --- /dev/null +++ b/services/web/public/img/other-brands/logo_twitter.svg @@ -0,0 +1 @@ +Asset 3 \ No newline at end of file diff --git a/services/web/public/stylesheets/_ol_style_includes.less b/services/web/public/stylesheets/_ol_style_includes.less index c55729976d..a96bc34d95 100644 --- a/services/web/public/stylesheets/_ol_style_includes.less +++ b/services/web/public/stylesheets/_ol_style_includes.less @@ -2,3 +2,4 @@ @import "app/front-chat-widget.less"; @import "app/ol-chat.less"; @import "app/templates-v2.less"; +@import "app/login-register.less"; diff --git a/services/web/public/stylesheets/app/homepage.less b/services/web/public/stylesheets/app/homepage.less index 784eb1d6d0..795d04488f 100644 --- a/services/web/public/stylesheets/app/homepage.less +++ b/services/web/public/stylesheets/app/homepage.less @@ -1,3 +1,5 @@ +@register-v-spacing: 20px; + .deprecated-sl-masthead { display: inline-block; margin-top: @header-height; @@ -73,7 +75,7 @@ .register-banner { background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.7),rgba(0,0,0,0.9)); background-image: linear-gradient(to bottom,rgba(0,0,0,0.7),rgba(0,0,0,0.9)); - padding: @line-height-computed 0; + padding: @register-v-spacing 0; position: absolute; bottom: 0; width: 100%; @@ -83,13 +85,17 @@ font-family: @font-family-sans-serif; font-weight: 500; letter-spacing: 1px; + margin-bottom: @register-v-spacing; } .form-group { margin-left: @line-height-computed / 2; } + .input-lg { + border-radius: 9999px; + } } .screenshot { - height: 550px; + height: 600px; margin: auto; margin-bottom: -50px; overflow-y: hidden; @@ -115,18 +121,64 @@ } } } - .btn-hero { - float: left; - } } -@media only screen and (max-width: @screen-sm-max) { - .masthead { - .btn-hero { - float: none; + +.hp-register-external-separator { + margin: 0 0 (@register-v-spacing / 2); + color: #FFF; +} + + .hp-register-external-separator-or { + vertical-align: middle; + &::before, + &::after { + content: ""; + display: inline-block; + vertical-align: middle; + width: 5em; + height: 1px; + background-color: rgba(255, 255, 255, .3); + } + &::before { + margin-right: 1.25em; + } + &::after { + margin-left: 1.25em; + } + } + +.hp-register-newsletter-checkbox { + font-size: 90%; + & > .checkbox-newsletter { + text-align: left; + @media only screen and (min-width: @screen-sm-min) { + text-align: center; } } } +.hp-login-btn { + min-width: 220px; +} + +.hp-register-form-email-pwd { + position: relative; +} + + .hp-register-form-email-pwd-btn-container.form-group { + display: block; + margin-top: (@register-v-spacing / 2); + @media only screen and (min-width: @screen-md-min) { + position: absolute; + display: inline-block; + height: 100%; + top: -(@register-v-spacing / 2); + & > .btn-hero { + height: 100%; + } + } + } + .universities { border-bottom: 1px solid @gray-lighter; text-align: center; diff --git a/services/web/public/stylesheets/app/login-register.less b/services/web/public/stylesheets/app/login-register.less new file mode 100644 index 0000000000..95b762e31c --- /dev/null +++ b/services/web/public/stylesheets/app/login-register.less @@ -0,0 +1,195 @@ +@brand-ieee-color : #00629B; +@brand-google-color : #4885ED; +@brand-twitter-color : #1DA1F2; +@brand-orcid-color : #A6CE39; +@brand-sharelatex-color : #A93529; + +.make-login-register-brand-btn(@bg-color) { + background-color: @bg-color; + text-indent: -10px; + padding-left: 0; + padding-right: 0; + &:focus, + &:hover { + background-color: darken(@bg-color, 8%); + } + &:active { + background-color: darken(@bg-color, 16%); + } +} + +.make-login-register-brand-btn-alt(@color) { + background-color: #FFF; + color: @color; + text-indent: -10px; + padding-left: 0; + padding-right: 0; + &:focus, + &:hover { + background-color: #FFF; + color: darken(@color, 8%); + } + &:active { + background-color: #FFF; + color: darken(@color, 16%); + } +} + +.login-register-container { + max-width: 400px; + margin: 0 auto; +} + .login-register-header { + padding-top: @line-height-computed; + padding-bottom: @line-height-computed - 5; + border-bottom: solid 1px @hr-border; + } + .login-register-header-heading { + margin: 0; + color: @text-color; + } + + .login-register-card { + padding-top: 0; + padding-bottom: 0; + text-align: center; + } + + .login-register-form, + .login-register-sharelatex { + padding: @line-height-computed (@line-height-computed * 2); + border-bottom: solid 1px @hr-border; + &:last-child { + border-bottom-width: 0; + } + } + .login-register-other-links { + padding: @line-height-computed (@line-height-computed * 2); + } + + .login-register-text, + .login-register-hr-text-container { + margin: 0; + line-height: 1; + font-size: 90%; + } + + .login-register-text { + padding-bottom: 25px; + &:last-child { + padding-bottom: 0; + } + } + + .login-register-hr-text-container { + position: relative; + padding: @line-height-computed 0; + + &::before { + content: ''; + position: absolute; + height: 1px; + background-color: @hr-border; + top: 50%; + left: 0; + right: 0; + } + } + .login-register-hr-text { + position: relative; + background-color: #FFF; + padding: 0 (@line-height-computed / 2); + } + .login-register-sharelatex-tooltip { + display: inline-block; + font-size: 135%; + position: relative; + top: 2px; + margin-left: 3px; + color: @link-color; + cursor: pointer; + } + + .login-register-newsletter { + font-size: 90%; + margin: @line-height-computed -(2 * @line-height-computed) 0; + text-align: left; + + & > .checkbox { + margin-bottom: 0; + } + } + + .login-btn-ieee { + .make-login-register-brand-btn(@brand-ieee-color); + } + + .login-btn-google { + .make-login-register-brand-btn(@brand-google-color); + } + + .login-btn-google-alt { + .make-login-register-brand-btn-alt(@brand-google-color); + } + + .login-btn-twitter { + .make-login-register-brand-btn(@brand-twitter-color); + } + + .login-btn-orcid { + .make-login-register-brand-btn(@brand-orcid-color); + } + + .login-btn-orcid-alt { + .make-login-register-brand-btn-alt(darken(@brand-orcid-color, 6%)); + } + + .login-btn-sharelatex { + .make-login-register-brand-btn(@brand-sharelatex-color); + } + .login-btn-icon { + display: inline-block; + float: left; + margin-left: 5px; + background: url(/img/brand/lion.svg) center/contain no-repeat; + width: 24px; + + &::before { + content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome. + } + } + .login-btn-icon-ieee { + background-image: url(/img/other-brands/logo_ieee.svg); + } + .login-btn-icon-google { + background-image: url(/img/other-brands/logo_google.svg); + } + .login-btn-icon-google-alt { + background-image: url(/img/other-brands/logo_google_alt.svg); + } + .login-btn-icon-twitter { + background-image: url(/img/other-brands/logo_twitter.svg); + } + .login-btn-icon-orcid { + background-image: url(/img/other-brands/logo_orcid.svg); + } + .login-btn-icon-orcid-alt { + background-image: url(/img/other-brands/logo_orcid_alt.svg); + } + .login-btn-icon-sharelatex { + background-image: url(/img/other-brands/logo_sharelatex.svg); + } + + .login-register-header-heading { + margin: 0; + color: @text-color; + } + +.registration-message-heading { + color: @text-color; +} + +.registration-message-details { + font-size: 90%; +} + diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index 3a6c08516e..f33b62456f 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/services/web/public/stylesheets/core/_common-variables.less @@ -17,7 +17,6 @@ //** Link hover color set via `darken()` function. @link-hover-color: darken(@link-color, 15%); - //== Typography // //## Font, line-height, and color for body text, headings, and more. diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index 2890c55976..6bf5284ad5 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/services/web/public/stylesheets/core/ol-variables.less @@ -52,6 +52,7 @@ @link-color-alt : @ol-green; @link-active-color : @ol-dark-green; @link-hover-color : @ol-dark-blue; +@hr-border : @ol-blue-gray-1; // Button colors and sizing @btn-border-width : 0; diff --git a/services/web/test/acceptance/coffee/helpers/User.coffee b/services/web/test/acceptance/coffee/helpers/User.coffee index 691a214c8b..80846240d7 100644 --- a/services/web/test/acceptance/coffee/helpers/User.coffee +++ b/services/web/test/acceptance/coffee/helpers/User.coffee @@ -58,7 +58,7 @@ class User @getCsrfToken (error) => return callback(error) if error? @request.post { - url: "/login" + url: if settings.enableLegacyLogin then "/login/legacy" else "/login" json: { email, @password } }, callback