mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-29 16:13:42 -05:00
Add login and register styles.
This commit is contained in:
Paulo Reis
James Allen
parent
062bf0cd87
commit
b008d163e7
4 changed files with 154 additions and 1 deletions
|
|
@ -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";
|
||||
|
|
|
|||
152
services/web/public/stylesheets/app/login-register.less
Normal file
152
services/web/public/stylesheets/app/login-register.less
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
@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(@color) {
|
||||
background-color: @color;
|
||||
text-indent: -10px;
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: darken(@color, 8%);
|
||||
}
|
||||
&:active {
|
||||
background-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-btn-ieee {
|
||||
.make-login-register-brand-btn(@brand-ieee-color);
|
||||
}
|
||||
|
||||
.login-btn-google {
|
||||
.make-login-register-brand-btn(@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-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-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-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%;
|
||||
}
|
||||
|
||||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue