regluit/static/less/book_list.less

@import "variables.less";

/* Cross-browser language */
.opacity (@op) {
    filter:alpha(opacity=@op);
    -moz-opacity:@op/100;
    -khtml-opacity:@op/100;
    opacity:@op/100;
}

/* rows in listview should alternate colors */
.row1 .book-list.listview {
	background: #f6f9f9;
}

.row2 .book-list.listview {
	background: #fff;
}

div.book-list.listview{ 
    clear:both;
    display:block;
    vertical-align: middle;
    .height(43px);
    margin:0 5px 0 0;
    padding:7px 0;
    // overflow:hidden;
    position: relative;

	/* row is a container for divs with individual content elements */
	/* these elements are styled differently to create list and panel views */
    div {
        &.unglue-this {
            float: left;
        }
        &.book-thumb {
            margin-right: 5px;
            float: left;
        }
        &.book-name {
            width:235px;
            margin-right:10px;
            background:url("@{image-base}booklist/booklist-vline.png") right center no-repeat;
            float: left;
            
            .title { 
                display:block;
                line-height:normal;
                overflow: hidden;
                .height(19px);
                margin-bottom: 5px;
                font-weight:bold;
            }
            
            .listview.author {
                overflow: hidden;
                display:block;
                line-height:normal;
                .height(19px);
            }
        }
        &.add-wishlist, &.remove-wishlist, &.on-wishlist, &.create-account {
            margin-right: 10px;
            padding-right: 10px;
            width: 136px;
            background:url("@{image-base}booklist/booklist-vline.png") right center no-repeat;
            float: left;
            
            span {
                font-weight:normal;
                color:@text-blue;
                text-transform: none;
                padding-left:20px;
            }
            
        }
        
        &.add-wishlist span, &.create-account span {
            background:url("@{image-base}booklist/add-wishlist.png") left center no-repeat;
        }
        
        &.add-wishlist span.booklist_pledge {
            background: none;
        }
        
        &.remove-wishlist span {
            background:url("@{image-base}booklist/remove-wishlist-blue.png") left center no-repeat;
        }
        
        &.on-wishlist > span, > span.on-wishlist {
            background:url("@{image-base}checkmark_small.png") left center no-repeat;        	
        }

        &.booklist-status {
            width: 110px;
            margin-right:7px;
            float: left;
        }
    }
}

div.add-wishlist, div.remove-wishlist {
    cursor: pointer;
}

.booklist-status.listview {
    span.booklist-status-label {
        display: none;
    }

    span.booklist-status-text {
        float:left;
        display:block;
        padding-right:5px;
    }
}

div.unglue-this {
    a {
        text-transform:uppercase;
        color:@text-blue;
        font-size:11px;
        font-weight:bold;
    }
    
    &.complete {
        .unglue-this-inner1 {
            background:url(@background-booklist) 0 -84px no-repeat;
            height:42px;
        }
        .unglue-this-inner2 {
            background:url(@background-booklist) 100% -126px no-repeat;
            margin-left:29px;
            height:42px;
            padding-right:10px;
        }
        a {
            color:#fff;
            display: block;
        }
    }

    &.processing {
        .unglue-this-inner1 {
            background:url(@background-booklist) 0 0 no-repeat; 
            height:42px;
        }
    
        .unglue-this-inner2 {
            background:url(@background-booklist) 100% -42px no-repeat;
            margin-left:25px;
            height:42px;
            padding-right:10px;
        }
    }
}

ul.book-list-view {
    padding:0;
    margin:15px;
    float:right;
    list-style:none;
    
    li {
        float:left;
        margin-right:10px;
        display:block;
        vertical-align:middle;
        line-height:22px;
    }
}

div.navigation {
    float: left;
    clear:both;
    width:100%;
    color:@dark-blue;
}

ul.navigation {
    float:right;
    padding:0;
    margin:0;
    list-style:none;
    
    li {
        float: left;
        line-height:normal;
        margin-right:5px;
        
        a {
            color:@dark-blue;
            font-weight:normal;            
        }
        
        &.arrow-l a {
            .navigation-arrows(0, -168px);
        }
        
        &.arrow-r a {
            .navigation-arrows(-1px, -185px);
        }        
    }
}

ul.navigation li a:hover, ul.navigation li.active a {
    color: @bright-blue;
    text-decoration:underline;
}

.unglue-button {
    display: block;
    border: 0;
}

.book-thumb.listview a {
    display:block;
    height: 50px;
    width: 32px;
    overflow:hidden;
    position:relative;
    z-index:1;
    
    &:hover {
        overflow:visible;
        z-index:1000;
        border:none;        
    }
    
    img {
        position:absolute;
        /* the excerpt you get looks cooler if you select from the middle, but 
        the popup version doesn't extend past the containing div's boundaries,
        so the positioned part is cut off.
        top:-20px;
        left:-50px;
        */
    }
}

.listview.icons {
    position: absolute;
    right: 31px;
    
    .booklist-status-img {
        .one-border-radius(4px);
        background-color: #fff;
        margin-top: 4px;
        height: 37px;

        img {
            padding: 5px;
        }
    }
    .booklist-status-label, {
        display: none;
    }
}

div#content-block-content {
  padding-bottom: 100px;
}

.listview.panelback, .listview.panelback div {
    display: none;
}

/* Starting state of toggle icons; will be overwritten by js in page */
#toggle-list {
    .opacity(100);
}

#toggle-panel {
    .opacity(20);
}

.nobold {
	font-weight: normal;
}