regluit/static/less/book_detail.less

189 lines
3.9 KiB
Plaintext

@import "variables.less";
/* needed for campaign, pledge, and manage_campaign */
.book-detail {
float:left;
width:100%;
clear:both;
display:block;
}
#book-detail-img {
float: left;
margin-right:10px;
width:151px;
img {
.mediaborder;
}
}
.book-detail-info {
float:left;
/* if we want to nix the explore bar, width should be 544ish */
width:309px;
h2.book-name, h3.book-author, h3.book-year {
padding:0;
margin:0;
line-height:normal
}
h2.book-name {
font-size: @font-size-header;
text-transform:capitalize;
font-weight:bold;
color:@text-blue;
}
h3.book-author, h3.book-year {
font-size: @font-size-default;
font-weight:normal;
color:@medium-blue;
}
> div {
width:100%;
clear:both;
display:block;
overflow:hidden;
border-top:1px solid @pale-blue;
padding:10px 0;
}
> div.layout {
border: none;
padding: 0;
div.pubinfo {
float: left;
width: auto;
padding-bottom: 7px;
}
}
.btn_wishlist span {
text-align: right;
}
.find-book label {
float:left;
line-height:31px;
}
.find-link {
float:right;
img {
padding: 2px;
.one-border-radius(5px);
}
}
.pledged-info {
padding:10px 0;
position: relative;
&.noborder {
border-top: none;
padding-top: 0;
}
.campaign-status-info {
float: left;
width: 50%;
margin-top: @font-size-default;
span {
font-size: @font-size-larger;
color: @medium-blue;
font-weight: bold;
}
}
}
.thermometer {
.one-border-radius(10px);
border: solid 2px @blue-grey;
width: 291px;
padding: 7px;
position: relative;
overflow: visible;
/* looks better if we start the gradient a little closer to the success color */
@greener-than-alert: #CF6944;
background: -webkit-gradient(linear, left top, right top, from(@call-to-action), to(@greener-than-alert));
background: -webkit-linear-gradient(left, @greener-than-alert, @call-to-action);
background: -moz-linear-gradient(left, @greener-than-alert, @call-to-action);
background: -ms-linear-gradient(left, @greener-than-alert, @call-to-action);
background: -o-linear-gradient(left, @greener-than-alert, @call-to-action);
background: linear-gradient(left, @greener-than-alert, @call-to-action);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@alert', endColorstr='@call-to-action'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='@alert', endColorstr='@call-to-action')"; /* IE8+ */
&.successful {
border-color: @bright-blue;
background: @pale-blue;
}
.cover {
position: absolute;
right: 0;
.border-radius(0, 10px, 10px, 0);
width: 50px;
height: 14px;
margin-top: -7px;
background: lighten(@blue-grey, 10%);
}
span {
display: none;
}
&:hover span {
display: block;
position: absolute;
z-index: 200;
right: 0;
top:-7px;
font-size: @font-size-header;
color: @medium-blue;
background: white;
border: 2px solid @blue-grey;
.one-border-radius(10px);
padding: 5px;
}
}
.explainer{
span.explanation{
display: none;
}
&:hover span.explanation {
display: block;
position: absolute;
z-index: 200;
right: 0;
top:12px;
font-size: @font-size-default;
font-weight: normal;
color: @text-blue;
background: white;
border: 2px solid @blue-grey;
.one-border-radius(10px);
padding: 5px;
}
}
.status {
position: absolute;
top:50%;
right:0%;
height: 25px;
margin-top: -12px;
}
}