@import "variables.less"; /* Local variables */ .greenpanelstuff { font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 120px; line-height:16px; } .greenpanelactionitems(@pos, @lineheight) { line-height:@lineheight; font-size:11px; background-repeat: no-repeat; background-position: @pos center; font-weight:bold; text-decoration:none; text-transform: uppercase; } .greenpanelactionborders { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #FFFFFF; border-bottom-color: #FFFFFF; } .panelhoverlink { text-decoration:none; color:@text-blue; } .readit { width:118px; height:35px; padding:0px 0px; background:#FFFFFF; margin:0px; .one-border-radius(4px); border: 1px solid #81bb38; } .readit_inner (@padding, @lineheight) { .greenpanelactionitems(10px, @lineheight); padding:0px 0px 0px @padding; color:@dark-green; &:hover { text-decoration:none; } } .banners (@right) { width:120px; height:30px; padding:0px; margin:10px 0 0 0; .greenpanelactionborders; a, span { .greenpanelactionitems(left, 30px); padding:0 @right 0 21px; color:#FFF; &:hover { .panelhoverlink;} } } /* background */ @charset "utf-8"; *{ padding:0px; margin:0px; } #main-wrapper{ height: 100%; width: 725px; margin: 0px; padding: 0px 0px; } .panelview.tabs{ padding:5px 0px; margin:0px; width:142px; float: left; span.active{ padding:15px; margin:15px 0px; font-weight:bold; } } /* styling of front side elements */ .panelview.book-list { .greenpanelstuff; margin: auto; padding: 0px 5px 5px 5px; height: 300px; background-color: #ffffff; color: @text-blue; border: 5px solid @pale-blue; position: relative; &:hover { color: @text-blue; } img { padding:5px 0px; margin:0px; } } .panelview { &.remove-wishlist, &.on-wishlist, &.create-account, &.add-wishlist { display: none; } } .panelview.book-name div { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height:16px; max-height:32px; color: #3d4e53; overflow: hidden; } .panelview.booklist-status { display: none; } .panelview.icons { position: absolute; bottom: -3px; width: 140px; .booklist-status-img { float: left; } .booklist-status-label { position: absolute; color: @green; padding-left: 5px; left: 40px; bottom: 5px; font-size: 17px; margin-bottom: 3px; } .panelnope { display: none; } .rounded { margin-bottom: 7px; } } /* make sure the box with the number of wishers displays right */ span.rounded { .roundedspan; } span.grey { .supporter-color-span(#bacfd6, "grey"); } .panelview.boolist-ebook a { display: none; } /* switch to/from hover state when jquery swaps class names */ div.panelview.side1 { display: visible; } div.panelview.side2 { display: none; } /* styling of hover state */ .panelback { position: relative; } .greenpanel2 { .greenpanelstuff; margin: 0; padding: 10px; height: 295px; background-color: @green; color: #fff; position:absolute; top:-5px; left:-10px; } .greenpanel_top { height: 135px; } /* Campaign status text at top of hover state */ .unglued_white { font-size: 12px; margin: 0px auto 10px auto; padding: 5px 0 10px 0; height:58px; } /* White-background action buttons; vary by state of campaign */ .read_itbutton { .readit; span { .readit_inner(30px, 40px); background: url("@{image-base}book-panel/book_icon.png") no-repeat 10% center; &:hover { .panelhoverlink; } } &.pledge { span { .readit_inner(25px, 35px); background: none; &:hover { .panelhoverlink; } } background-image: url("@{image-base}icons/pledgearrow-green.png"); background-repeat: no-repeat; background-position: 90% center; } } .read_itbutton_fail { .readit; span { .readit_inner(15px, 40px); background: none; } } .Unglue_itbutton{ .readit; a { background-image: url("@{image-base}book-panel/unglue_icon.png"); .readit_inner(25px, 40px); } } .moreinfo.add-wishlist, .moreinfo.create-account { .banners(5px); background: url("@{image-base}book-panel/add_wish_icon.png") no-repeat left center; padding-right:0; } .moreinfo.remove-wishlist { .banners(5px); background: url("@{image-base}booklist/remove-wishlist-white.png") no-repeat left center; } .moreinfo.on-wishlist { .banners(5px); background: url("@{image-base}checkmark_small-white.png") no-repeat left center; } /* title, author */ .white_text { width:120px; height:45px; padding:15px 0px; margin:0px; a { color:#FFFFFF; text-decoration:none; &:hover { .panelhoverlink;} } p { /* necessary to ensure title/author don't overflow onto icons */ line-height:16px; max-height:32px; overflow: hidden; } } .moreinfo { .banners(0); background: url("@{image-base}book-panel/more_icon.png") no-repeat left center; cursor: pointer; > div { .height(30px); padding-bottom:8px; } } /*end the 2greenpanel*/ .read{ margin: 15px auto 5px auto; padding: 0px; width: 140px; color:@call-to-action; height:40px; line-height:25px; float:left; position: absolute; bottom: -15px; } .read p { margin: 0px; padding: 10px 3px; width: 50px; font-size: 10pt; float:left; } .read img{ padding:5px 0px; margin:0px; float:left; } /**/ .read2{ margin: 15px auto; padding: 0px; width: 130px; color:@call-to-action; height:40px; line-height:25px; } .read2 p { margin: 0px; padding: 10px 3px; width: 50px; font-size:10pt; float:left; } .read2 img{ padding:0px; margin:0px; float:left; } .right_add{ padding:10px; margin:0px; float:right; } /* --------------- ( slideout hover state ) --------------------------------------------- */ .panelview.book-thumb { position: relative; margin:0px; padding:0px; left:0px; img { z-index: 100; width: 120px; height: 182px; } span { position:absolute; bottom: 0; left:-10px; top:-5px; z-index: 1000; height:auto; } }