overleaf/services/web/frontend/stylesheets/app/bonus.less
Alf Eaton 2ff1cf43d6 Merge pull request #3470 from overleaf/eslint
Upgrade and configure ESLint

GitOrigin-RevId: ad5aeaf85e72c847a125ff3a9db99a12855e38aa
2020-12-16 03:08:28 +00:00

125 lines
2.3 KiB
Text

@twitter-color: #1da1f2;
@facebook-color: #3b5998;
@email-color: #808b9a;
@link-to-us-color: #406eb3;
.bonus {
margin-top: 15px;
.page-header h1 {
text-align: center;
}
h2 {
text-align: center;
font-size: 20px;
line-height: 28px;
margin-bottom: @line-height-computed;
margin-top: 0;
&.direct-link {
margin-top: @line-height-computed;
}
}
.bonus-banner {
.bonus-top {
border-bottom: 1px solid lighten(@blue, 40%);
}
.title {
a {
display: flex;
align-items: center;
font-size: 18px;
padding: 20px;
background-color: white;
border-bottom: 1px solid lighten(@blue, 40%);
color: @blue;
> i {
margin-right: 10px;
}
&:hover,
&:focus {
background-color: lighten(@blue, 45%);
text-decoration: none;
}
}
}
a.twitter > i {
color: @twitter-color;
}
a.facebook > i {
color: @facebook-color;
}
a.email > i {
color: @email-color;
}
a.link > i {
color: @link-to-us-color;
}
h2.direct-link {
}
}
p.thanks {
font-size: 18px;
line-height: 28px;
margin-top: 10px;
text-align: center;
}
.number {
position: absolute;
margin-left: -13px;
width: 26px;
padding: 3px 0;
text-align: center;
background-color: #ddd;
&.active {
background-color: @blue;
color: white;
}
border-radius: 3px;
}
.progress {
margin-top: @line-height-computed / 2;
margin-left: -15px;
margin-right: -15px;
height: 30px;
}
.perk {
position: absolute;
background-color: #ddd;
border-radius: 5px;
text-align: center;
padding: 5px 5px;
min-width: min-content;
width: 110px;
margin-left: -50px;
font-size: 14px;
&:before {
border-bottom: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: '';
position: absolute;
left: 42px;
top: -8px;
}
&.active {
color: white;
background-color: @blue;
&:before {
border-bottom: 8px solid @blue;
}
}
}
}
.link-modal {
text-align: center;
textarea {
width: 95%;
margin-bottom: 0;
}
}