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;

	.book-name:hover {
    	background: #f6f9f9;
	}
}

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

div.book-list.listview{ 
    clear:both;
    display:block;
    vertical-align: middle;
    .height(43px);
    margin:0 5px 0 0;
    padding:7px 0;
    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);
            }
            
            &.listview:hover {
                // allow titles and authors to expand onhover
                overflow: visible;

                width: auto;
                min-width: 219px;
                
                margin-top: -1px;
                padding-right: 15px;
                border: 1px solid @blue-grey;
                .border-radius(0, 10px, 10px, 0);
                border-left: none;
            }
            
            &.listview {
                z-index:100;
                // z-index only works on positioned elements, so if you
                // do not include this the absolutely positioned add-wishlist
                // div stacks above it! crazytown.
                position: absolute;
                left: 42px;
            }
        }
        &.add-wishlist, &.remove-wishlist, &.on-wishlist, &.create-account, &.pledge {
            margin-right: 10px;
            padding-right: 10px;
            width: 136px;
            background:url("@{image-base}booklist/booklist-vline.png") right center no-repeat;

            //position: absolute;
            margin-left:255px;
            float:left;
            
            span {
                font-weight:normal;
                color:@text-blue;
                text-transform: none;
                padding-left:20px;
            }
            
            span.booklist_pledge {
                padding-left: 18px;
            }
            
        }
        
        &.pledge span.booklist_pledge {
            padding-left: 0;
        }
        
        &.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:85px;
            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;
        max-width: 180px;
        overflow: hidden;
    }
    
    .read_itbutton {
        margin-top: 4px;
    }
}

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;
    }
    
    .boolist-ebook img {
        margin-top: 6px;
    }
}

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;
}