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

196 lines
4 KiB
Text
Raw Normal View History

2018-09-18 16:45:30 -04:00
@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;
2018-09-18 16:45:30 -04:00
text-indent: -10px;
padding-left: 0;
padding-right: 0;
2018-09-18 16:45:30 -04:00
&:focus,
&:hover {
background-color: darken(@bg-color, 8%);
2018-09-18 16:45:30 -04:00
}
&: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%);
2018-09-18 16:45:30 -04:00
}
}
.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;
2018-09-18 16:45:30 -04:00
border-bottom: solid 1px @hr-border;
&:last-child {
border-bottom-width: 0;
}
}
.login-register-other-links {
padding: @line-height-computed;
2018-09-18 16:45:30 -04:00
}
.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%;
2018-09-24 05:38:18 -04:00
margin-top: @line-height-computed;
text-align: left;
& > .checkbox {
margin-bottom: 0;
}
}
2018-09-18 16:45:30 -04:00
.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);
}
2018-09-18 16:45:30 -04:00
.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%));
}
2018-09-18 16:45:30 -04:00
.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);
}
2018-09-18 16:45:30 -04:00
.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);
}
2018-09-18 16:45:30 -04:00
.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%;
}