overleaf/services/web/frontend/stylesheets/app/bonus.less

128 lines
2 KiB
Text
Raw Normal View History

@twitter-color : #1DA1F2;
@facebook-color : #3B5998;
@email-color : #808B9A;
@link-to-us-color : #406EB3;
2014-07-07 10:54:40 -04:00
.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;
2014-07-07 10:54:40 -04:00
font-size: 18px;
padding: 20px;
2014-07-07 10:54:40 -04:00
background-color: white;
border-bottom: 1px solid lighten(@blue, 40%);
color: @blue;
> i {
margin-right: 10px;
}
&:hover,
&:focus {
2014-07-07 10:54:40 -04:00
background-color: lighten(@blue, 45%);
text-decoration: none;
2014-07-07 10:54:40 -04:00
}
2014-07-07 10:54:40 -04:00
}
}
a.twitter > i {
color: @twitter-color;
2014-07-07 10:54:40 -04:00
}
a.facebook > i {
color: @facebook-color;
2014-07-07 10:54:40 -04:00
}
a.email > i {
color: @email-color;
2014-07-07 10:54:40 -04:00
}
a.link > i {
color: @link-to-us-color;
2014-07-07 10:54:40 -04:00
}
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;
width: 110px;
2014-07-07 10:54:40 -04:00
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;
2014-07-07 10:54:40 -04:00
textarea {
width: 95%;
margin-bottom: 0;
}
}