diff --git a/web-assets/auth0/css/custom.css b/web-assets/auth0/css/custom.css index dfa6a8b..4ab6322 100644 --- a/web-assets/auth0/css/custom.css +++ b/web-assets/auth0/css/custom.css @@ -28,12 +28,6 @@ body { background-color: white !important; } -.business-column { - border-radius: 10px; - background-image: none; - width: 495px; -} - /* widget */ #hiw-login-container{ width: 495px; @@ -134,13 +128,22 @@ input::placeholder, .auth0-lock.auth0-lock div.auth0-lock-input-wrap .auth0-lock line-height: 48px; padding: 0px; font-family: Roboto; - font-weight: normal; + font-weight: 500; font-size: 17px; text-transform: capitalize; transition: unset; -webkit-transform: unset; } +.auth0-lock.auth0-lock div.auth0-lock-input-checkbox { + color: #37373C; + font-size: 13px; +} + +.auth0-lock.auth0-lock div.auth0-lock-input-checkbox span { + line-height: 22px; +} + .auth0-lock.auth0-lock button.auth0-lock-submit span { transition: unset; -webkit-transform: unset; @@ -150,6 +153,9 @@ input::placeholder, .auth0-lock.auth0-lock div.auth0-lock-input-wrap .auth0-lock fill: rgb(19, 125, 96); } +.auth0-lock.auth0-lock button.auth0-lock-submit:disabled svg g { + fill: #9b9b9b !important; +} .auth0-lock.auth0-lock button.auth0-lock-submit span.auth0-label-submit { } @@ -252,7 +258,11 @@ div.auth0-lock-error::before{ padding: 0px 0px 25px 0px; color: #37373C; font-size: 13px; - line-height: 20px; + line-height: 22px; +} + +.auth0-lock span.auth0-lock-sign-up-terms-agreement label input[type='checkbox'] { + top: 2px; } .auth0-lock.auth0-lock small.auth0-lock-terms a, @@ -320,51 +330,85 @@ div.auth0-lock-error::before{ background-color: transparent !important; border: 0px; } - - /* end: social buttons */ -/* member column*/ -.member-column { +/* member/business column */ +.member-column, .business-column { min-height: 820px; height: clamp(820px, 100%, 820px); border-radius: 10px 10px; width: 1139px; background-repeat: no-repeat; background-position: top right; +} + +.business-column { + background-image: url(https://tc-public-static-files.topcoder.com/topcoder-auth/images/business_bg.png) +} + +.member-column { background-image: url(https://tc-public-static-files.topcoder.com/topcoder-auth/images/bg.png); } -#member-signin-container, #member-signup-container { + +#member-signin-container, #member-signup-container, #business-signin-container, #business-signup-container { display: none; color: white; font-weight: 500; font-family: 'Barlow Condensed', sans-serif; - text-align: left; position: absolute; } - -#member-signin-container .header{ +#member-signin-container .title{ font-size: 48px; line-height: 50px; } -#member-signup-container .header { +#member-signup-container .title{ font-size: 34px; + text-align: left; } -#member-signup-container { - padding: 81px 0px 0px 634px; +#business-signin-container .title, #business-signup-container .title{ + font-size: 60px; + line-height: 58px; +} + +#member-signin-container .header, #member-signup-container .header, #business-signin-container .header, #business-signup-container .header{ + font-family: Roboto; + font-size: 12px; + letter-spacing: 1px; + line-height: 16px; + text-align: center; + font-weight: normal; + text-transform: uppercase; + padding-bottom: 3px; +} +#business-signin-container .title, #business-signup-container .title +{ + background: linear-gradient(90deg, #26B3C5, #45E0B8); + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-text-fill-color: transparent; +} + +#member-signup-container, #member-signin-container, #business-signin-container, #business-signup-container { + top: 60px; + padding: 82px 0px 0px 495px; + width: 644px; + position: absolute; } #member-signin-container { - padding: 130px 0px 0px 677px; + padding-top: 130px; } #member-signup-container { - padding: 81px 0px 0px 634px; + padding-top: 81px; + padding-left: 634px; } #member-signup-container .body { + text-align: left; font-size: 18px; font-weight: normal; font-family: Roboto; @@ -372,6 +416,15 @@ div.auth0-lock-error::before{ padding: 15px 0px; } +#business-signup-container .body { + font-size: 34px; + font-weight: 500; + font-family: 'Barlow Condensed', sans-serif; + line-height: 38px; + padding: 5px 0px; + text-transform: uppercase; +} + #member-signup-container .body ul { margin: 0px 0px 0px -16px; list-style: none url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSI5cHgiIHZpZXdCb3g9IjAgMCAxMiA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggZD0iTTEwLjcyNSwwLjIyNSBMMy43NSw3LjIgTDEuMjc1LDQuNzI1IEMwLjk3NSw0LjQyNSAwLjUyNSw0LjQyNSAwLjIyNSw0LjcyNSBDLTAuMDc1LDUuMDI1IC0wLjA3NSw1LjQ3NSAwLjIyNSw1Ljc3NSBMMy4yMjUsOC43NzUgQzMuMzc1LDguOTI1IDMuNTI1LDkgMy43NSw5IEMzLjk3NSw5IDQuMTI1LDguOTI1IDQuMjc1LDguNzc1IEwxMS43NzUsMS4yNzUgQzEyLjA3NSwwLjk3NSAxMi4wNzUsMC41MjUgMTEuNzc1LDAuMjI1IEMxMS40NzUsLTAuMDc1IDExLjAyNSwtMC4wNzUgMTAuNzI1LDAuMjI1IFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJSZWdpc3RyYXRpb24tVjMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSIwNy1SZWdpc3RyYXRpb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03NzUuMDAwMDAwLCAtMjA5LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iaW1hZ2UtcmlnaHQtcmVnaXN0cmF0aW9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MjYuMDAwMDAwLCA2MC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC02IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDMuMDAwMDAwLCA4MS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbnMvY2hlY2ttYXJrIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2LjAwMDAwMCwgNjguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvbWFzaz4KICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSBpZD0iaWNvbi1jaGVja21hcmsiIGZpbGw9IiNGRkZGRkYiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+); @@ -401,6 +454,7 @@ div.auth0-lock-error::before{ @media (min-width: 768px) { .auth0-lock.auth0-lock div.auth0-lock-center { padding-top:0px; + padding-bottom:11px; } .auth0-lock.auth0-lock div.auth0-lock-header-bg { background: white; @@ -465,7 +519,7 @@ div.auth0-lock-error::before{ white-space:normal; } div.auth0-lock-error::before { - left: calc(100% + 5px) + left: calc(100% + 5px) } /* end: form */