overleaf/services/web/frontend/stylesheets/app/login-register.less

330 lines
6.5 KiB
Text
Raw Normal View History

@brand-ieee-color: #00629b;
@brand-google-color: #276fea; // Not the "official" color but modified for a11y
@brand-twitter-color: #1da1f2;
@brand-orcid-color: #a6ce39;
2018-09-18 16:45:30 -04:00
.login-register-alternatives {
.form-group:last-child {
margin-bottom: 0;
}
}
2018-09-18 16:45:30 -04:00
.login-register-container {
max-width: 400px;
margin: 0 auto;
padding-bottom: @line-height-computed * 5;
}
.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 {
padding: @line-height-computed;
border-bottom: solid 1px @hr-border;
&:last-child {
border-bottom-width: 0;
}
}
.login-register-text,
.login-register-hr-text-container {
margin: 0;
}
.login-register-text {
padding-bottom: 25px;
font-size: 90%;
&:last-child {
padding-bottom: 0;
}
}
.login-register-hr-text-container {
line-height: 1;
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-btn-icon {
position: absolute;
top: 4px;
left: 4px;
background: #fff url(../../../public/img/brand/lion.svg) center/20px no-repeat;
border-radius: 99999px;
width: 26px;
height: 26px;
&::before {
content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
}
}
.login-btn-icon-twitter {
background-image: url(../../../public/img/other-brands/logo_twitter.svg);
}
2018-09-18 16:45:30 -04:00
.registration-message-heading {
color: @text-color;
2018-09-18 16:45:30 -04:00
}
.registration-message-details {
font-size: 90%;
2018-09-18 16:45:30 -04:00
}
.registration-block-separator {
margin-bottom: 0px;
}
.website-redesign {
.login-register-container {
max-width: 320px;
}
.login-register-text {
font-size: 0.875rem;
line-height: 1.4;
text-align: left;
&.login-register-text-center {
text-align: center;
}
}
.login-register-hr-text-container {
padding: @line-height-computed 0 calc(@line-height-computed / 2) 0;
&::before {
top: calc(@line-height-computed + @line-height-computed / 4);
}
}
.login-register-error-container {
padding-bottom: calc(@line-height-computed / 2);
}
.login-register-other-links {
padding: @line-height-computed 0;
a {
color: var(--green-50);
text-decoration: underline;
// text-decoration-;skip-ink is for letter with descender (like 'g' and 'y')
// this will force underline to not skip the descender
text-decoration-skip-ink: none;
&:hover {
color: var(--green-60);
}
// for accessibility with keyboard navigation
&:focus {
outline: 2px solid var(--green-50);
outline-offset: 1px;
}
}
}
.flex-center {
display: flex;
justify-content: center;
}
.login-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 4px 0;
}
.login-btn-icon {
position: relative;
top: unset;
left: unset;
background: unset;
border-radius: unset;
width: 20px;
height: 20px;
margin-right: 5px;
&::before {
content: unset;
}
}
.form-group {
text-align: left;
position: relative;
label {
font-size: @font-size-small;
}
}
.form-group-password {
display: flex;
position: relative;
flex-direction: column;
.form-group-password-input {
input.form-control {
padding-right: 35px;
}
}
.visibility-toggle {
position: absolute;
right: 0;
top: 0;
width: @input-height-base;
height: @input-height-base;
display: flex;
align-items: center;
justify-content: center;
border: unset;
background-color: unset;
#visibility-icon-off {
margin-top: 2px; // workaround for the icon not having the same center as the non-slashed one
}
}
}
.top-padding-computed-2 {
padding-top: @line-height-computed * 2;
}
.form-group-password-input {
display: flex;
flex-direction: column;
width: 100%;
}
.register-container {
.register-content-container {
display: flex;
background-color: #f2f4f7;
min-height: 100vh;
}
.register-form {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
padding-top: @line-height-computed * 2;
background-color: @white;
@media (max-width: @screen-sm-max) {
height: 100%;
}
.login-register-card {
max-width: 320px;
padding-bottom: @line-height-computed * 5; // for cookie banner
}
}
.register-illustration-container {
height: 100%;
display: flex;
align-items: center;
.register-illustration {
position: absolute;
left: 80px;
top: 100px;
// for wide screen
@media (min-width: 1700px) {
position: relative;
left: unset;
top: unset;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.register-main-image {
max-width: 850px;
@media (max-width: 1350px) {
max-width: 750px;
}
@media (max-width: 1150px) {
max-width: 670px;
}
}
.sticky-tags {
position: absolute;
height: 210px;
bottom: -135px;
right: 130px;
// for wide screen
@media (min-width: 1700px) {
right: calc(50% - 300px);
}
}
}
}
}
.tos-agreement-notice {
text-align: left;
font-size: 12px;
a {
color: var(--green-50);
text-decoration: underline;
// text-decoration-;skip-ink is for letter with descender (like 'g' and 'y')
// this will force underline to not skip the descender
text-decoration-skip-ink: none;
&:hover {
color: var(--green-60);
}
// for accessibility with keyboard navigation
&:focus {
outline: 2px solid var(--green-50);
outline-offset: 1px;
}
}
}
.register-header-logo {
&:focus {
outline: 2px solid var(--green-50);
}
}
}