overleaf/services/web/public/stylesheets/app/bonus.less
2014-08-24 17:26:20 +01:00

128 lines
2.3 KiB
Text

.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: block;
font-size: 18px;
padding: 20px 62px;
background-color: white;
border-bottom: 1px solid lighten(@blue, 40%);
color: @blue;
&:hover {
background-color: lighten(@blue, 45%);
}
}
}
a.twitter {
background-image: url(/img/social/twitter-32.png);
background-repeat: no-repeat;
background-position: 16px center;
}
a.facebook {
background-image: url(/img/social/facebook-32.png);
background-repeat: no-repeat;
background-position: 16px center;
}
a.email {
background-image: url(/img/social/mail-32.png);
background-repeat: no-repeat;
background-position: 16px center;
}
a.google-plus {
background-image: url(//www.gstatic.com/images/icons/gplus-32.png);
background-repeat: no-repeat;
background-position: 16px center;
}
a.link {
background-image: url(/img/social/link-32.png);
background-repeat: no-repeat;
background-position: 16px center;
}
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;
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;
}
}