adding campaign page with live data; working on ability to switch between list and panel views on supporter page
Andromeda Yelton
parent
2dcf1dfbee
commit
f428634bf7
|
|
@ -95,6 +95,9 @@ class Campaign(models.Model):
|
|||
self.save()
|
||||
return self
|
||||
|
||||
def supporters(self):
|
||||
translist = self.transactions().values_list('user', flat=True).distinct()
|
||||
return translist
|
||||
|
||||
class Work(models.Model):
|
||||
created = models.DateTimeField(auto_now_add=True)
|
||||
|
|
@ -117,17 +120,17 @@ class Work(models.Model):
|
|||
myauthor = ''
|
||||
return myauthor
|
||||
|
||||
def last_campaign_status(self):
|
||||
def last_campaign(self):
|
||||
try:
|
||||
last = self.campaigns.order_by('-created')[0].status
|
||||
last = self.campaigns.order_by('-created')[0]
|
||||
except:
|
||||
last = "No campaign yet"
|
||||
return last
|
||||
|
||||
def percent_unglued(self):
|
||||
if(self.last_campaign_status() == 'SUCCESSFUL'):
|
||||
if(self.last_campaign().status == 'SUCCESSFUL'):
|
||||
return 6;
|
||||
elif(self.last_campaign_status() == 'ACTIVE'):
|
||||
elif(self.last_campaign().status == 'ACTIVE'):
|
||||
target = float(self.campaigns.order_by('-created')[0].target)
|
||||
if target <= 0:
|
||||
return 6
|
||||
|
|
|
|||
|
|
@ -0,0 +1,178 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %}
|
||||
Campaign for WORK TITLE GOES HERE
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/campaign.css" />
|
||||
|
||||
<!-- this was written with JS 1.4.2. does it work with the 1.6.3 in base.html? -->
|
||||
|
||||
<script type="text/javascript">
|
||||
var $j = jQuery.noConflict();
|
||||
$j(document).ready(function(){
|
||||
$j('.tabs1').click(function(){
|
||||
$j('#tabs').find('.active').removeClass('active');
|
||||
$j(this).addClass('active');
|
||||
$j('.content-block-content').find('.active').removeClass('active');
|
||||
$j('#tabs-1').addClass('active').show(300);
|
||||
$j('#tabs-2').hide(200);
|
||||
$j('#tabs-3').hide(200);
|
||||
$j('#tabs-4').hide(200);
|
||||
});
|
||||
$j('.tabs2').click(function(){
|
||||
$j('#tabs').find('.active').removeClass('active');
|
||||
$j(this).addClass('active');
|
||||
$j('.content-block-content').find('.active').removeClass('active');
|
||||
$j('#tabs-2').addClass('active').show(300);
|
||||
$j('#tabs-1').hide(200);
|
||||
$j('#tabs-3').hide(200);
|
||||
$j('#tabs-4').hide(200);
|
||||
});
|
||||
$j('.tabs3').click(function(){
|
||||
$j('#tabs').find('.active').removeClass('active');
|
||||
$j(this).addClass('active');
|
||||
$j('.content-block-content').find('.active').removeClass('active');
|
||||
$j('#tabs-3').addClass('active').show(300);
|
||||
$j('#tabs-2').hide(200);
|
||||
$j('#tabs-1').hide(200);
|
||||
$j('#tabs-4').hide(200);
|
||||
});
|
||||
$j('.tabs4').click(function(){
|
||||
$j('#tabs').find('.active').removeClass('active');
|
||||
$j(this).addClass('active');
|
||||
$j('.content-block-content').find('.active').removeClass('active');
|
||||
$j('#tabs-4').addClass('active').show(300);
|
||||
$j('#tabs-2').hide(200);
|
||||
$j('#tabs-1').hide(200);
|
||||
$j('#tabs-3').hide(200);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div id="main-container">
|
||||
<div class="js-main">
|
||||
<div id="js-leftcol">
|
||||
<div class="jsmodule rounded">
|
||||
<div class="jsmod-content">
|
||||
Campaign in Progress: <br />${{ work.last_campaign.current_total }}/${{ work.last_campaign.target }}
|
||||
</div>
|
||||
</div>
|
||||
{% include "explore.html" %}
|
||||
</div>
|
||||
<div id="js-maincol">
|
||||
<div class="js-maincol-inner">
|
||||
<div class="content-block">
|
||||
<div class="book-detail">
|
||||
<div class="book-detail-img"><a href="#">
|
||||
<img src="{{ work.cover_image_thumbnail }}" alt="{{ work.title }}" title="{{ work.title }}" width="131" height="192" /></a>
|
||||
</div>
|
||||
<div class="book-detail-info">
|
||||
<h2 class="book-name">{{ work.title }}</h2>
|
||||
<h3 class="book-author">{{ work.author }}</h3>
|
||||
<h3 class="book-year">{{ work.editions.all.0.publication_date }}</h3>
|
||||
<div class="find-book">
|
||||
<label>Find it here</label>
|
||||
<!-- todo: these should be a real thing -->
|
||||
<div class="find-link">
|
||||
<a class="find-google" href="#"><img src="/static/images/icons/google.png" align="" title="" /></a>
|
||||
<a class="find-group" href="#"><img src="/static/images/icons/group.png" align="" title="" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pledged-info"><div class="pledged-group">{{ work.last_campaign.supporters.count }} Ungluers have pledged ${{ work.last_campaign.current_total }}</div><div class="status"><img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png" /></div></div>
|
||||
<div class="btn_support"><a href="#">Support</a></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- needed to put 10px padding on this for supporter page but hurts here. disentangle. -->
|
||||
<div class="content-block-heading" id="tabs">
|
||||
<ul class="tabs">
|
||||
<li class="tabs1"><a href="#">Campaign</a></li>
|
||||
<li class="tabs2"><a href="#">Community </a></li>
|
||||
<li class="tabs3"><a href="#">Supporters</a></li>
|
||||
<li class="tabs4"><a href="#">Details</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content-block-content">
|
||||
<div id="tabs-1" class="tabs">
|
||||
<div class="tabs-content">
|
||||
<h3 class="tabcontent-title">Title</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
|
||||
|
||||
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
|
||||
|
||||
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. </p>
|
||||
|
||||
<p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tabs-2" class="tabs">
|
||||
<div class="tabs-content">
|
||||
Being Unglued infomation
|
||||
</div>
|
||||
</div>
|
||||
<div id="tabs-3" class="tabs">
|
||||
<div class="tabs-content">
|
||||
Want to Unglue infomation
|
||||
</div>
|
||||
</div>
|
||||
<div id="tabs-4" class="tabs">
|
||||
<div class="tabs-content">
|
||||
Want to Unglue infomation xxx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="js-rightcol">
|
||||
<div class="js-rightcol-pad rounded">
|
||||
|
||||
<div class="jsmodule">
|
||||
<h3 class="jsmod-title"><span>Share</span></h3>
|
||||
<div class="jsmod-content">
|
||||
<ul class="social menu">
|
||||
<li class="facebook first"><a href="#"><span>Facebook</span></a></li>
|
||||
<li class="twitter"><a href="#"><span>Twitter</span></a></li>
|
||||
<li class="lasts email"><a href="#"><span>Email</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jsmodule">
|
||||
<h3 class="jsmod-title"><span>Support</span></h3>
|
||||
<div class="jsmod-content">
|
||||
<ul class="support menu">
|
||||
<li class="first"><a href="#">
|
||||
<span class="menu-item-price">$1</span>
|
||||
<span class="menu-item-desc">The ebook delivered to your inbox.</span>
|
||||
</a></li>
|
||||
<li class=""><a href="#">
|
||||
<span class="menu-item-price">$25</span>
|
||||
<span class="menu-item-desc">The ebook your name in the credits section under "supporters".</span>
|
||||
</a></li>
|
||||
<li class=""><a href="#">
|
||||
<span class="menu-item-price">$50</span>
|
||||
<span class="menu-item-desc">The ebook your name & a link of your choice in the credits under "benefactors".</span>
|
||||
</a></li>
|
||||
<li class="last"><a href="#">
|
||||
<span class="menu-item-price">$100</span>
|
||||
<span class="menu-item-desc">The ebook your name & a link of your choice in the credits under "benefactors".</span>
|
||||
</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
<div id="js-leftcol">
|
||||
<div class="jsmodule">
|
||||
<h3 class="jsmod-title"><span>Explore</span></h3>
|
||||
<div class="jsmod-content">
|
||||
|
|
@ -24,4 +23,3 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,9 @@
|
|||
{% block content %}
|
||||
<div id="main-container">
|
||||
<div class="js-main">
|
||||
|
||||
{% include "explore.html" %}
|
||||
<div id="js-leftcol">
|
||||
{% include "explore.html" %}
|
||||
</div>
|
||||
|
||||
<div id="js-maincol-fr">
|
||||
<div class="js-maincol-inner">
|
||||
|
|
|
|||
|
|
@ -183,8 +183,9 @@ how do I integrate the your wishlist thing with the tabs thing?
|
|||
|
||||
<div id="main-container">
|
||||
<div class="js-main">
|
||||
|
||||
{% include "explore.html" %}
|
||||
<div id="js-leftcol">
|
||||
{% include "explore.html" %}
|
||||
</div>
|
||||
|
||||
<div id="js-maincol-fr">
|
||||
<div class="js-maincol-inner">
|
||||
|
|
@ -232,10 +233,10 @@ how do I integrate the your wishlist thing with the tabs thing?
|
|||
{% endifequal %}
|
||||
{% else %}
|
||||
{% for work in wishlist.works.all %}
|
||||
<!-- classify which tab depending on work.last_campaign_status -->
|
||||
{% if work.last_campaign_status == 'SUCCESSFUL' %}
|
||||
<!-- classify which tab depending on work.last_campaign.status -->
|
||||
{% if work.last_campaign.status == 'SUCCESSFUL' %}
|
||||
<div class="tabs tabs-1">
|
||||
{% else %}{% if work.last_campaign_status == 'ACTIVE' %}
|
||||
{% else %}{% if work.last_campaign.status == 'ACTIVE' %}
|
||||
<div class="tabs tabs-2">
|
||||
{% else %}
|
||||
<div class="tabs tabs-3">
|
||||
|
|
@ -267,7 +268,7 @@ how do I integrate the your wishlist thing with the tabs thing?
|
|||
</div>
|
||||
{% endif %}{% endif %}{% endifequal %}
|
||||
<div class="booklist-status">
|
||||
<span class="booklist-status-text">{{ work.last_campaign_status }}</span>
|
||||
<span class="booklist-status-text">{{ work.last_campaign.status }}</span>
|
||||
<span class="booklist-status-img">
|
||||
<img src="/static/images/icon-book{{ work.percent_unglued }}.png" title="book list status" alt="book list status" />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -236,10 +236,10 @@ how to handle overlong author/titles? Am using truncatewords; truncatechars is b
|
|||
{% else %}
|
||||
<div id="main-wrapper">
|
||||
{% for work in wishlist.works.all %}
|
||||
<!-- classify which tab depending on work.last_campaign_status -->
|
||||
{% if work.last_campaign_status == 'SUCCESSFUL' %}
|
||||
<!-- classify which tab depending on work.last_campaign.status -->
|
||||
{% if work.last_campaign.status == 'SUCCESSFUL' %}
|
||||
<div class="tabs tabs-1">
|
||||
{% else %}{% if work.last_campaign_status == 'ACTIVE' %}
|
||||
{% else %}{% if work.last_campaign.status == 'ACTIVE' %}
|
||||
<div class="tabs tabs-2">
|
||||
{% else %}
|
||||
<div class="tabs tabs-3">
|
||||
|
|
@ -250,7 +250,7 @@ how to handle overlong author/titles? Am using truncatewords; truncatechars is b
|
|||
<div class="image">
|
||||
<img src="{{ work.cover_image_thumbnail }}" width="120" height="182"/> <b>{{ work.title|truncatewords:5 }}</b>
|
||||
<p>{{ work.author|truncatewords:3 }}</p>
|
||||
<p class="green"><b>Status:</b> {{ work.last_campaign_status }}</p>
|
||||
<p class="green"><b>Status:</b> {{ work.last_campaign.status }}</p>
|
||||
<div class="read">
|
||||
<img src="/static/images/images/icon-book-37by25-{{ work.percent_unglued }}.png" title="book list status" alt="book list status" />
|
||||
<p>100%</p>
|
||||
|
|
@ -284,7 +284,7 @@ how to handle overlong author/titles? Am using truncatewords; truncatechars is b
|
|||
<div class="add_towish"> <a href="#">Add to Wishlist</a> </div>
|
||||
<div class="white_text"> <b><a href="#">{{ work.title }}</a></b>
|
||||
<p><a href="#">{{ work.author }}</a></p>
|
||||
<p><b>Status:</b> {{ work.last_campaign_status }}</p>
|
||||
<p><b>Status:</b> {{ work.last_campaign.status }}</p>
|
||||
</div>
|
||||
<div class="moreinfo"> <a href="#">More Info</a> </div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
|
||||
<div id="main-container">
|
||||
<div class="js-main">
|
||||
<div id="js-leftcol">
|
||||
{% include "explore.html" %}
|
||||
</div>
|
||||
<div id="js-maincol-fr">
|
||||
<div class="js-maincol-inner">
|
||||
<div class="content-block">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ from regluit.frontend.views import CampaignFormView, GoodreadsDisplayView
|
|||
urlpatterns = patterns(
|
||||
"regluit.frontend.views",
|
||||
url(r"^$", "home", name="home"),
|
||||
url(r"work/(?P<work_id>.+)/$", "work", name="work"),
|
||||
url(r"works/(?P<work_id>.+)/$", "work", name="work"),
|
||||
url(r"^supporter/(?P<supporter_username>.+)/$", "supporter", {'template_name': 'supporter.html'}, name="supporter"),
|
||||
url(r"^supporter2/(?P<supporter_username>.+)/$", "supporter", {'template_name': 'supporter_panel.html'}, name="supporter2"),
|
||||
url(r"^search/$", "search", name="search"),
|
||||
|
|
@ -27,5 +27,6 @@ urlpatterns = patterns(
|
|||
url(r"^goodreads/flush/$","goodreads_flush_assoc", name="goodreads_flush_assoc"),
|
||||
url(r"^goodreads/load_shelf/$","goodreads_load_shelf", name="goodreads_load_shelf"),
|
||||
url(r"^goodreads/clear_wishlist/$","clear_wishlist", name="clear_wishlist"),
|
||||
url(r"^stub/", "stub", name="stub")
|
||||
url(r"^stub/", "stub", name="stub"),
|
||||
url(r"^work/(?P<isbn>\d+)/$", "campaign", name="campaign")
|
||||
)
|
||||
|
|
|
|||
|
|
@ -339,3 +339,7 @@ def clear_wishlist(request):
|
|||
return HttpResponse("Error in clearing wishlist: %s " % (e))
|
||||
logger.info("Error in clearing wishlist: %s ", e)
|
||||
|
||||
def campaign(request, isbn):
|
||||
isbn = int(isbn)
|
||||
work = models.Edition.get_by_isbn(isbn).work
|
||||
return render(request, 'campaign.html', {'work': work})
|
||||
|
|
|
|||
|
|
@ -9,9 +9,11 @@
|
|||
#main-wrapper{
|
||||
height: 100%;
|
||||
width: 725px;
|
||||
margin: 0px auto 0px 10px;
|
||||
margin: 0px;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
|
||||
/*
|
||||
.item_wrapper{
|
||||
margin: 0px;
|
||||
padding: 0px 0px;
|
||||
|
|
@ -19,10 +21,12 @@
|
|||
width: 142px;
|
||||
float: left;
|
||||
}
|
||||
*/
|
||||
.panel_item{
|
||||
padding:5px 0px;
|
||||
margin:0px auto;
|
||||
margin:0px;
|
||||
width:142px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.panel_item span.active{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
#js-page-wrap{ overflow:hidden;}
|
||||
#main-container{ margin-top:20px;}
|
||||
|
||||
#js-leftcol .jsmodule{ margin-bottom:10px;}
|
||||
#js-leftcol .jsmodule.rounded{ background:#edf3f4; border-radius:20px;}
|
||||
#js-leftcol .jsmodule.rounded .jsmod-content{ padding:10px 20px; font-weight:bold; border:none; margin:0;}
|
||||
|
||||
.book-detail{ float:left; width:100%; clear:both; display:block;}
|
||||
.book-detail-img{ float: left; margin-right:10px; width:151px;}
|
||||
.book-detail-img img{ padding:5px; border: solid 5px #edf3f4;}
|
||||
.book-detail-info{ float:left; width:309px;}
|
||||
.book-detail-info h2.book-name,
|
||||
.book-detail-info h3.book-author,
|
||||
.book-detail-info h3.book-year{ padding:0; margin:0; line-height:normal;}
|
||||
.book-detail-info h2.book-name{ font-size:18px; text-transform:capitalize; font-weight:bold; color:#3d4e53;}
|
||||
.book-detail-info h3.book-author,
|
||||
.book-detail-info h3.book-year{ font-size:12px; font-weight:normal; color:#6994a3;}
|
||||
|
||||
.book-detail-info > div{ width:100%; clear:both; display:block; overflow:hidden; border-top:1px solid #edf3f4;padding:10px 0;}
|
||||
.book-detail-info .find-book{ margin-top:15px; }
|
||||
.book-detail-info .find-book label{ float:left; line-height:31px;}
|
||||
.book-detail-info .find-link{ float:right;}
|
||||
.book-detail-info .pledged-info{ padding:0;}
|
||||
.book-detail-info .pledged-group{ padding:10px 40px 10px 0; float:left;}
|
||||
.book-detail-info .status { float: right; padding-top: 4px;}
|
||||
.book-detail-info .btn_support a{ background:url(/static/images/btn_bg.png) 0 0 no-repeat; width:104px; height:41px; line-height:41px; display:block; color:#fff; font-weight:bold; text-align:center; }
|
||||
|
||||
|
||||
#tabs{
|
||||
border-bottom: 4px solid #6994a3;
|
||||
clear: both;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
#tabs ul.book-list-view { margin-bottom:4px !important;}
|
||||
#tabs-1,
|
||||
#tabs-2,
|
||||
#tabs-3{ margin-left:10px;}
|
||||
#tabs-2,
|
||||
#tabs-3,
|
||||
#tabs-4{ display:none;}
|
||||
|
||||
ul.tabs{ float:left; padding:0; margin:0; list-style:none;}
|
||||
ul.tabs li{ float: left; height:46px; line-height:46px; margin-right:2px; margin-bottom:1px;}
|
||||
ul.tabs li a{ height:46px; line-height:46px; display:block; text-align:center;padding:0 10px; min-width:80px;border-radius:7px 7px 0 0; background:#d6dde0; color:#3d4e53;}
|
||||
ul.tabs li a:hover,
|
||||
ul.tabs li.active a{ background:#6994a3; color:#fff;}
|
||||
|
||||
#js-rightcol{ float:right; width:235px; }
|
||||
.js-rightcol-pad{border:1px solid #d6dde0; border-radius:10px; padding:10px;}
|
||||
|
||||
#js-maincol-fr{ float:right; width:725px;}
|
||||
#js-maincol{ float:left; width:470px; margin:0 10px;}
|
||||
#js-maincol div.content-block{ background: none; padding:0;}
|
||||
|
||||
|
||||
#js-rightcol h3.jsmod-title{ background:#a7c1ca; border-radius:10px; padding:10px; height:auto; height:auto; font-style:normal; font-size:14px; margin:0 0 10px 0;}
|
||||
#js-rightcol h3.jsmod-title span{ padding:0; color:#fff;font-style:normal;}
|
||||
#js-rightcol .jsmodule{ margin-bottom:10px;}
|
||||
#js-rightcol .jsmod-content{ padding-left:10px;}
|
||||
|
||||
ul.social li{ padding:5px 0 5px 30px; height:28px; line-height:28px; }
|
||||
ul.social li.facebook{ background:url(/static/images/icons/facebook.png) left center no-repeat;}
|
||||
ul.social li.twitter{ background:url(/static/images/icons/twitter.png) left center no-repeat;}
|
||||
ul.social li.email{ background:url(/static/images/icons/email.png) left center no-repeat;}
|
||||
ul.support li{ border-bottom:1px solid #d6dde0; padding:10px 15px 10px 0; background:url(/static/images/icons/r-arrow.png) right center no-repeat;}
|
||||
ul.support span{ display:block;}
|
||||
ul.support span.menu-item-price{ font-size:18px;}
|
||||
|
||||
a{ color:#3d4e53; font-size:12px;}
|
||||
|
|
@ -741,7 +741,6 @@ a.my-setting.active {
|
|||
border-bottom: 4px solid #8DC63F;
|
||||
clear: both;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -784,21 +783,203 @@ ul.tabs li a:hover, ul.tabs li.active a {
|
|||
.book-list span.rounded > span a {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
/* work page */
|
||||
|
||||
ul.edition-list {
|
||||
list-style: none;
|
||||
.book_panel {
|
||||
margin: 20px auto;
|
||||
padding: 0 5px 5px 5px;
|
||||
height: 300px;
|
||||
width: 120px;
|
||||
line-height: 16px;
|
||||
background-color: #ffffff;
|
||||
color: #3d4e53;
|
||||
border: 5px solid #edf3f4;
|
||||
}
|
||||
ul.edition-list li {
|
||||
clear: both;
|
||||
.book_panel a {
|
||||
font-size: 12pt;
|
||||
color: #73a334;
|
||||
text-decoration: none;
|
||||
}
|
||||
.book_panel a:hover {
|
||||
color: #8dc63f;
|
||||
text-decoration: none;
|
||||
}
|
||||
.book_panel p {
|
||||
margin: 0;
|
||||
}
|
||||
.book_panel img {
|
||||
padding: 5px 0;
|
||||
margin: 0;
|
||||
}
|
||||
.book_panel:hover {
|
||||
color: #3d4e53;
|
||||
}
|
||||
.green {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
.book_panel_back {
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
height: 80px;
|
||||
border-bottom: thin gray solid;
|
||||
height: 295px;
|
||||
width: 120px;
|
||||
line-height: 16px;
|
||||
background-color: #8dc63f;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
}
|
||||
li.edition img.cover {
|
||||
vertical-align: top;
|
||||
.book_panel_back a {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
li.edition span.publisher {
|
||||
.unglued_white {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 5px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.status {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
.read_itbutton {
|
||||
width: 118px;
|
||||
height: 35px;
|
||||
padding: 0 0;
|
||||
background: #FFFFFF;
|
||||
margin: 0;
|
||||
-moz-border-radius: 4px 4px 4px 4px;
|
||||
-webkit-border-radius: 4px 4px 4px 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #81bb38;
|
||||
}
|
||||
.read_itbutton a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background: url("/static/images/book-panel/book_icon.png") no-repeat left center;
|
||||
background-position: 10px center;
|
||||
padding: 0 0 0 30px;
|
||||
color: #73a334;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.read_itbutton a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
#add_towish {
|
||||
width: 130px;
|
||||
height: 30px;
|
||||
padding: 0 0;
|
||||
margin: 10px auto;
|
||||
}
|
||||
#add_towish a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-image: url("/static/images/book-panel/add_wish_icon.png") no-repeat left center;
|
||||
padding: 8px 5px 8px 21px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
border-width: 1px 0px;
|
||||
border-style: solid none;
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
#add_towish a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
#white_text {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
padding: 17px 0;
|
||||
margin: 0;
|
||||
}
|
||||
#white_text a {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
#white_text a:hover {
|
||||
color: #3d4e53;
|
||||
text-decoration: none;
|
||||
}
|
||||
#moreinfo {
|
||||
width: 130px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
margin: 15px 0 0;
|
||||
}
|
||||
#moreinfo a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-image: url("/static/images/book-panel/more_icon.png") no-repeat left center;
|
||||
padding: 8px 42px 8px 20px;
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
border-width: 1px 0px;
|
||||
border-style: solid none;
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
#moreinfo a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
.green {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
#graypanel a {
|
||||
color: #3d4e53;
|
||||
text-decoration: none;
|
||||
}
|
||||
.read {
|
||||
margin: 15px auto;
|
||||
padding: 0;
|
||||
width: 140px;
|
||||
color: #8dc63f;
|
||||
height: 40px;
|
||||
line-height: 25px;
|
||||
float: left;
|
||||
}
|
||||
.read p {
|
||||
margin: 0;
|
||||
padding: 10px 3px;
|
||||
width: 50px;
|
||||
font-size: 10pt;
|
||||
float: left;
|
||||
}
|
||||
.read img {
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
.right_add {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
float: right;
|
||||
}
|
||||
p.right_add {
|
||||
float: right;
|
||||
padding: 10px 10px 0 0;
|
||||
width: 24px;
|
||||
}
|
||||
/* slideout hover state */
|
||||
.book_panel_interior {
|
||||
float: left;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
}
|
||||
.book_panel_interior img {
|
||||
z-index: 100;
|
||||
}
|
||||
.book_panel_interior span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -10px;
|
||||
top: -5px;
|
||||
z-index: 1000;
|
||||
height: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -105,3 +105,11 @@ a.readon{ background:url(../images/bg.png) 100% -72px no-repeat; color:#fff; tex
|
|||
a.readon span{ background:url(../images/bg.png) -770px -108px no-repeat; margin-right:34px; padding:0 5px 0 20px; height:36px; line-height:36px; display:block;}
|
||||
|
||||
a{ font-weight:bold; font-size:13px; text-decoration:none; cursor:pointer;}
|
||||
|
||||
div.content-block-content {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
margin-left: 10px;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 359 B |
Binary file not shown.
|
After Width: | Height: | Size: 225 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 196 B |
Binary file not shown.
|
After Width: | Height: | Size: 267 B |
|
|
@ -41,20 +41,15 @@
|
|||
#main-wrapper{
|
||||
height: 100%;
|
||||
width: 725px;
|
||||
margin: 0px auto 0px 10px;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
.item_wrapper{
|
||||
margin: 0px;
|
||||
padding: 0px 0px;
|
||||
height: auto;
|
||||
width: 142px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.panel_item{
|
||||
padding:5px 0px;
|
||||
margin:0px auto;
|
||||
margin:0px;
|
||||
width:142px;
|
||||
float: left;
|
||||
|
||||
span.active{
|
||||
padding:15px;
|
||||
|
|
@ -64,7 +59,7 @@
|
|||
}
|
||||
|
||||
.greenpanel {
|
||||
.greenpanelstuff
|
||||
.greenpanelstuff;
|
||||
margin: auto;
|
||||
padding: 0px 5px 5px 5px;
|
||||
height: 300px;
|
||||
|
|
@ -101,7 +96,7 @@
|
|||
/*2 start*/
|
||||
|
||||
.greenpanel2 {
|
||||
.greenpanelstuff
|
||||
.greenpanelstuff;
|
||||
margin: 0px auto;
|
||||
padding: 10px;
|
||||
height: 295px;
|
||||
|
|
@ -127,7 +122,7 @@
|
|||
|
||||
a {
|
||||
.greenpanelactionitems(10px);
|
||||
background: url(@{image-base}book-panel/book_icon.png) no-repeat left center;
|
||||
background: url(""@{image-base}book-panel/book_icon.png") no-repeat left center;
|
||||
padding:0px 0px 0px 30px;
|
||||
color:@dark-green;
|
||||
|
||||
|
|
@ -146,7 +141,7 @@
|
|||
|
||||
a {
|
||||
.greenpanelactionitems(left);
|
||||
background-image: url(@{image-base}book-panel/add_wish_icon.png);
|
||||
background-image: url("@{image-base}book-panel/add_wish_icon.png");
|
||||
padding:8px 5px 8px 21px;
|
||||
color:#FFFFFF;
|
||||
.greenpanelactionborders()
|
||||
|
|
@ -178,7 +173,7 @@
|
|||
|
||||
a {
|
||||
.greenpanelactionitems(left);
|
||||
background-image: url(@{image-base}book-panel/more_icon.png);
|
||||
background-image: url("@{image-base}book-panel/more_icon.png");
|
||||
padding:8px 42px 8px 20px;
|
||||
padding-left:20px;
|
||||
color:#FFFFFF;
|
||||
|
|
@ -235,7 +230,7 @@
|
|||
}
|
||||
.Unglue_itbutton a{
|
||||
.greenpanelactionitems(2px);
|
||||
background-image: url(@{image-base}book-panel/unglue_icon.png);
|
||||
background-image: url("@{image-base}book-panel/unglue_icon.png");
|
||||
padding:5px 0px 0px 20px;
|
||||
color:@text-blue;
|
||||
text-align:right;
|
||||
|
|
@ -253,7 +248,7 @@ text-decoration:none;
|
|||
}
|
||||
.add_towish2 a{
|
||||
.greenpanelactionitems(left);
|
||||
background-image: url(@{image-base}book-panel/add_gray.png);
|
||||
background-image: url("@{image-base}book-panel/add_gray.png");
|
||||
padding:8px 0px;
|
||||
padding-left:20px;
|
||||
color:@text-blue;
|
||||
|
|
@ -284,7 +279,7 @@ text-decoration:none;
|
|||
.moreinfo2 a{
|
||||
line-height:40px;
|
||||
font-size:12px;
|
||||
background-image: url(@{image-base}book-panel/gray_more_info.png);
|
||||
background-image: url("@{image-base}book-panel/gray_more_info.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
padding:8px 35px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,184 @@
|
|||
.header-text {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
.panelborders {
|
||||
border-width: 1px 0px;
|
||||
border-style: solid none;
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
div.book-list.listview {
|
||||
clear: both;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
height: 43px;
|
||||
line-height: 43px;
|
||||
margin: 0 5px 0 0;
|
||||
padding: 7px 0;
|
||||
}
|
||||
div.book-list.listview.row1 {
|
||||
background: #f6f9f9;
|
||||
}
|
||||
div.book-list.listview.row2 {
|
||||
background: #fff;
|
||||
}
|
||||
div.book-list.listview div.unglue-this {
|
||||
float: left;
|
||||
}
|
||||
div.book-list.listview div.book-thumb {
|
||||
margin-right: 5px;
|
||||
float: left;
|
||||
}
|
||||
div.book-list.listview div.book-name {
|
||||
width: 260px;
|
||||
margin-right: 10px;
|
||||
background: url("../images/booklist/booklist-vline.png") right center no-repeat;
|
||||
float: left;
|
||||
}
|
||||
div.book-list.listview div.book-name span {
|
||||
display: block;
|
||||
line-height: normal;
|
||||
height: 43px;
|
||||
line-height: 43px;
|
||||
}
|
||||
div.book-list.listview div.add-wishlist, div.book-list.listview div.remove-wishlist {
|
||||
margin-right: 10px;
|
||||
padding-right: 10px;
|
||||
background: url("../images/booklist/booklist-vline.png") right center no-repeat;
|
||||
float: left;
|
||||
}
|
||||
div.book-list.listview div.add-wishlist a, div.book-list.listview div.remove-wishlist a {
|
||||
font-weight: normal;
|
||||
color: #3d4e53;
|
||||
text-transform: none;
|
||||
background: url("../images/booklist/add-wishlist.png") left center no-repeat;
|
||||
padding-left: 20px;
|
||||
}
|
||||
div.book-list.listview div.booklist-status {
|
||||
margin-right: 7px;
|
||||
float: left;
|
||||
}
|
||||
.booklist-status.listview span.booklist-status-label {
|
||||
display: none;
|
||||
}
|
||||
.booklist-status.listview span.booklist-status-text {
|
||||
float: left;
|
||||
display: block;
|
||||
padding-right: 5px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.booklist-status.listview .booklist-status-img p {
|
||||
display: none;
|
||||
}
|
||||
div.unglue-this a {
|
||||
text-transform: uppercase;
|
||||
color: #3d4e53;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
div.unglue-this.complete .unglue-this-inner1 {
|
||||
background: url("/static/images/booklist/bg.png") 0 -84px no-repeat;
|
||||
height: 42px;
|
||||
}
|
||||
div.unglue-this.complete .unglue-this-inner2 {
|
||||
background: url("/static/images/booklist/bg.png") 100% -126px no-repeat;
|
||||
margin-left: 29px;
|
||||
height: 42px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
div.unglue-this.complete a {
|
||||
color: #fff;
|
||||
display: block;
|
||||
}
|
||||
div.unglue-this.processing .unglue-this-inner1 {
|
||||
background: url("/static/images/booklist/bg.png") 0 0 no-repeat;
|
||||
height: 42px;
|
||||
}
|
||||
div.unglue-this.processing .unglue-this-inner2 {
|
||||
background: url("/static/images/booklist/bg.png") 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;
|
||||
}
|
||||
ul.book-list-view li {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
line-height: 22px;
|
||||
}
|
||||
div.navigation {
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
color: #37414d;
|
||||
}
|
||||
ul.navigation {
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
ul.navigation li {
|
||||
float: left;
|
||||
line-height: normal;
|
||||
margin-right: 5px;
|
||||
}
|
||||
ul.navigation li a {
|
||||
color: #37414d;
|
||||
font-weight: normal;
|
||||
}
|
||||
ul.navigation li.arrow-l a {
|
||||
background: url("/static/images/booklist/bg.png") 0 -168px no-repeat;
|
||||
width: 10px;
|
||||
height: 15px;
|
||||
display: block;
|
||||
text-indent: -10000px;
|
||||
}
|
||||
ul.navigation li.arrow-r a {
|
||||
background: url("/static/images/booklist/bg.png") -1px -185px no-repeat;
|
||||
width: 10px;
|
||||
height: 15px;
|
||||
display: block;
|
||||
text-indent: -10000px;
|
||||
}
|
||||
ul.navigation li a:hover, ul.navigation li.active a {
|
||||
color: #8ac3d7;
|
||||
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;
|
||||
}
|
||||
.book-thumb.listview a:hover {
|
||||
overflow: visible;
|
||||
z-index: 1000;
|
||||
border: none;
|
||||
}
|
||||
.book-thumb.listview a img {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: -50px;
|
||||
}
|
||||
.listview.author {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
@import "variables.less";
|
||||
|
||||
div.book-list.listview{
|
||||
clear:both;
|
||||
display:block;
|
||||
vertical-align: middle;
|
||||
.height(43px);
|
||||
margin:0 5px 0 0;
|
||||
padding:7px 0;
|
||||
// overflow:hidden;
|
||||
|
||||
&.row1 {
|
||||
background:#f6f9f9;
|
||||
}
|
||||
|
||||
&.row2 {
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
div {
|
||||
&.unglue-this {
|
||||
float: left;
|
||||
}
|
||||
&.book-thumb {
|
||||
margin-right: 5px;
|
||||
float: left;
|
||||
}
|
||||
&.book-name {
|
||||
width:260px;
|
||||
margin-right:10px;
|
||||
background:url("../images/booklist/booklist-vline.png") right center no-repeat;
|
||||
float: left;
|
||||
|
||||
span {
|
||||
display:block;
|
||||
line-height:normal;
|
||||
.height(43px);
|
||||
}
|
||||
}
|
||||
&.add-wishlist, &.remove-wishlist {
|
||||
margin-right: 10px;
|
||||
padding-right: 10px;
|
||||
background:url("../images/booklist/booklist-vline.png") right center no-repeat;
|
||||
float: left;
|
||||
|
||||
a {
|
||||
font-weight:normal;
|
||||
color:@text-blue;
|
||||
text-transform: none;
|
||||
background:url("../images/booklist/add-wishlist.png") left center no-repeat;
|
||||
padding-left:20px;
|
||||
}
|
||||
|
||||
}
|
||||
&.booklist-status {
|
||||
margin-right:7px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.booklist-status.listview {
|
||||
span.booklist-status-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.booklist-status-text {
|
||||
float:left;
|
||||
display:block;
|
||||
padding-right:5px;
|
||||
text-transform:capitalize;
|
||||
}
|
||||
|
||||
.booklist-status-img p {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
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: #8ac3d7;
|
||||
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;
|
||||
top:-20px;
|
||||
left:-50px;
|
||||
}
|
||||
}
|
||||
|
||||
.listview.author {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,413 @@
|
|||
.header-text {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
.panelborders {
|
||||
border-width: 1px 0px;
|
||||
border-style: solid none;
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
.greenpanelstuff {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
width: 120px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.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: #3d4e53;
|
||||
}
|
||||
@charset "utf-8";
|
||||
* {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
/*main_Css*/
|
||||
#main-wrapper {
|
||||
height: 100%;
|
||||
width: 725px;
|
||||
margin: 0px;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
.panel_item {
|
||||
padding: 5px 0px;
|
||||
margin: 0px;
|
||||
width: 142px;
|
||||
float: left;
|
||||
}
|
||||
.panel_item span.active {
|
||||
padding: 15px;
|
||||
margin: 15px 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.greenpanel {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
width: 120px;
|
||||
line-height: 16px;
|
||||
margin: auto;
|
||||
padding: 0px 5px 5px 5px;
|
||||
height: 300px;
|
||||
background-color: #ffffff;
|
||||
color: #3d4e53;
|
||||
border: 5px solid #edf3f4;
|
||||
}
|
||||
.greenpanel:hover {
|
||||
color: #3d4e53;
|
||||
}
|
||||
.greenpanel img {
|
||||
padding: 5px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.greenpanel a {
|
||||
color: #73a334;
|
||||
text-decoration: none;
|
||||
}
|
||||
.greenpanel a:hover {
|
||||
color: #8dc63f;
|
||||
text-decoration: none;
|
||||
}
|
||||
.green {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
/*2 start*/
|
||||
.greenpanel2 {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
width: 120px;
|
||||
line-height: 16px;
|
||||
margin: 0px auto;
|
||||
padding: 10px;
|
||||
height: 295px;
|
||||
background-color: #8dc63f;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
}
|
||||
.unglued_white {
|
||||
font-size: 12px;
|
||||
margin: 0px auto;
|
||||
margin-bottom: 5px;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
.read_itbutton {
|
||||
width: 118px;
|
||||
height: 35px;
|
||||
padding: 0px 0px;
|
||||
background: #FFFFFF;
|
||||
margin: 0px;
|
||||
-moz-border-radius: 4px 4px 4px 4px;
|
||||
-webkit-border-radius: 4px 4px 4px 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #81bb38;
|
||||
}
|
||||
.read_itbutton a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10px center;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background: url(/static/images/book-panel/book_icon.png) no-repeat left center;
|
||||
padding: 0px 0px 0px 30px;
|
||||
color: #73a334;
|
||||
}
|
||||
.read_itbutton a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.add_towish {
|
||||
width: 125px;
|
||||
height: 30px;
|
||||
padding: 0px 0px;
|
||||
margin: 15px auto;
|
||||
}
|
||||
.add_towish a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-image: url(/static/images/book-panel/add_wish_icon.png);
|
||||
padding: 8px 5px 8px 21px;
|
||||
color: #FFFFFF;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
.add_towish a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
.white_text {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
padding: 17px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.white_text a {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
.white_text a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
/*more info*/
|
||||
.moreinfo {
|
||||
width: 130px;
|
||||
height: 30px;
|
||||
padding: 0px;
|
||||
margin: 15px 0 0;
|
||||
}
|
||||
.moreinfo a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-image: url(/static/images/book-panel/more_icon.png);
|
||||
padding: 8px 42px 8px 20px;
|
||||
padding-left: 20px;
|
||||
color: #FFFFFF;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
.moreinfo a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
/*end of the more info/*
|
||||
/*end the 2greenpanel*/
|
||||
/*2 start*/
|
||||
.graypanel {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
margin: 20px auto;
|
||||
padding: 4px 5px;
|
||||
height: 300px;
|
||||
width: 130px;
|
||||
line-height: 16px;
|
||||
background-color: #edf3f4;
|
||||
color: #3d4e53;
|
||||
border: 5px solid #edf3f4;
|
||||
}
|
||||
.unglued_white2 {
|
||||
font-size: 12px;
|
||||
margin: 3px auto;
|
||||
padding: 5px 0px;
|
||||
}
|
||||
.green {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
.graypanel a {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
.graypanel a:hover {
|
||||
color: #8dc63f;
|
||||
text-decoration: none;
|
||||
}
|
||||
.Unglue_itbutton {
|
||||
width: 110px;
|
||||
height: 40px;
|
||||
padding: 0px 9px;
|
||||
background: #FFFFFF;
|
||||
margin: 0px auto;
|
||||
-moz-border-radius: 4px 4px 4px 4px;
|
||||
-webkit-border-radius: 4px 4px 4px 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #d4dcdd;
|
||||
}
|
||||
.Unglue_itbutton a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2px center;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-image: url(/static/images/book-panel/unglue_icon.png);
|
||||
padding: 5px 0px 0px 20px;
|
||||
color: #3d4e53;
|
||||
text-align: right;
|
||||
font-family: "LucidaGrandeBold";
|
||||
}
|
||||
.Unglue_itbutton a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.add_towish2 {
|
||||
width: 130px;
|
||||
height: 30px;
|
||||
padding: 0px 0px;
|
||||
margin: 15px auto;
|
||||
}
|
||||
.add_towish2 a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-image: url(/static/images/book-panel/add_gray.png);
|
||||
padding: 8px 0px;
|
||||
padding-left: 20px;
|
||||
color: #3d4e53;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: #FFFFFF;
|
||||
font-family: "LucidaGrandeBold";
|
||||
}
|
||||
.add_towish2 a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.white_text2 {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
padding: 13px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.white_text2 a, a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
/*more info*/
|
||||
.moreinfo2 {
|
||||
width: 130px;
|
||||
height: 30px;
|
||||
padding: 0px 20px 0px 0px;
|
||||
margin: 15px auto;
|
||||
}
|
||||
.moreinfo2 a {
|
||||
line-height: 40px;
|
||||
font-size: 12px;
|
||||
background-image: url(/static/images/book-panel/gray_more_info.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
padding: 8px 35px;
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
color: #3d4e53;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: #FFFFFF;
|
||||
font-family: "LucidaGrandeBold";
|
||||
}
|
||||
.moreinfo2 a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
/*end the 2greenpanel*/
|
||||
.read {
|
||||
margin: 15px auto 5px auto;
|
||||
padding: 0px;
|
||||
width: 140px;
|
||||
color: #8dc63f;
|
||||
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;
|
||||
}
|
||||
.right_add {
|
||||
padding: 10px;
|
||||
margin: 0px;
|
||||
float: right;
|
||||
}
|
||||
p.right_add {
|
||||
float: right;
|
||||
padding: 10px 10px 0 0;
|
||||
width: 24px;
|
||||
}
|
||||
/**/
|
||||
.read2 {
|
||||
margin: 15px auto;
|
||||
padding: 0px;
|
||||
width: 130px;
|
||||
color: #8dc63f;
|
||||
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 ) --------------------------------------------- */
|
||||
.image {
|
||||
float: left;
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
.image img {
|
||||
z-index: 100;
|
||||
}
|
||||
.image span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -10px;
|
||||
top: -5px;
|
||||
z-index: 1000;
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,378 @@
|
|||
@import "variables.less";
|
||||
|
||||
// Local variables
|
||||
.greenpanelstuff {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
width: 120px;
|
||||
line-height:16px;
|
||||
}
|
||||
|
||||
.greenpanelactionitems(@pos) {
|
||||
line-height:40px;
|
||||
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;
|
||||
}
|
||||
|
||||
@charset "utf-8";
|
||||
*{
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
/*main_Css*/
|
||||
|
||||
#main-wrapper{
|
||||
height: 100%;
|
||||
width: 725px;
|
||||
margin: 0px;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
|
||||
.panel_item{
|
||||
padding:5px 0px;
|
||||
margin:0px;
|
||||
width:142px;
|
||||
float: left;
|
||||
|
||||
span.active{
|
||||
padding:15px;
|
||||
margin:15px 0px;
|
||||
font-weight:bold;
|
||||
}
|
||||
}
|
||||
|
||||
.greenpanel {
|
||||
.greenpanelstuff;
|
||||
margin: auto;
|
||||
padding: 0px 5px 5px 5px;
|
||||
height: 300px;
|
||||
background-color: #ffffff;
|
||||
color: @text-blue;
|
||||
border: 5px solid @pale-blue;
|
||||
|
||||
&:hover {
|
||||
color: @text-blue;
|
||||
}
|
||||
|
||||
img {
|
||||
padding:5px 0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @dark-green;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: @green;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.green {
|
||||
color: @green;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
/*2 start*/
|
||||
|
||||
.greenpanel2 {
|
||||
.greenpanelstuff;
|
||||
margin: 0px auto;
|
||||
padding: 10px;
|
||||
height: 295px;
|
||||
background-color: @green;
|
||||
color: #ffffff;
|
||||
position:relative;
|
||||
}
|
||||
.unglued_white {
|
||||
font-size: 12px;
|
||||
margin: 0px auto;
|
||||
margin-bottom:5px;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
.read_itbutton {
|
||||
width:118px;
|
||||
height:35px;
|
||||
padding:0px 0px;
|
||||
background:#FFFFFF;
|
||||
margin:0px;
|
||||
.border-radius(4px, 4px, 4px, 4px);
|
||||
border: 1px solid #81bb38;
|
||||
|
||||
a {
|
||||
.greenpanelactionitems(10px);
|
||||
background: url(/static/images/book-panel/book_icon.png) no-repeat left center;
|
||||
padding:0px 0px 0px 30px;
|
||||
color:@dark-green;
|
||||
|
||||
&:hover {
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.add_towish {
|
||||
width:125px;
|
||||
height:30px;
|
||||
padding:0px 0px;
|
||||
margin:15px auto;
|
||||
|
||||
a {
|
||||
.greenpanelactionitems(left);
|
||||
background-image: url(/static/images/book-panel/add_wish_icon.png);
|
||||
padding:8px 5px 8px 21px;
|
||||
color:#FFFFFF;
|
||||
.greenpanelactionborders();
|
||||
|
||||
&:hover{ .panelhoverlink;}
|
||||
}
|
||||
}
|
||||
|
||||
.white_text {
|
||||
width:130px;
|
||||
height:40px;
|
||||
padding:17px 0px;
|
||||
margin:0px;
|
||||
|
||||
a {
|
||||
color:#FFFFFF;
|
||||
text-decoration:none;
|
||||
|
||||
&:hover { .panelhoverlink;}
|
||||
}
|
||||
}
|
||||
|
||||
/*more info*/
|
||||
.moreinfo {
|
||||
width:130px;
|
||||
height:30px;
|
||||
padding:0px;
|
||||
margin:15px 0 0;
|
||||
|
||||
a {
|
||||
.greenpanelactionitems(left);
|
||||
background-image: url(/static/images/book-panel/more_icon.png);
|
||||
padding:8px 42px 8px 20px;
|
||||
padding-left:20px;
|
||||
color:#FFFFFF;
|
||||
.greenpanelactionborders;
|
||||
|
||||
&:hover { .panelhoverlink;}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*end of the more info/*
|
||||
/*end the 2greenpanel*/
|
||||
|
||||
/*2 start*/
|
||||
|
||||
.graypanel {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
margin: 20px auto;
|
||||
padding: 4px 5px;
|
||||
height: 300px;
|
||||
width: 130px;
|
||||
line-height:16px;
|
||||
background-color: @pale-blue;
|
||||
color: @text-blue;
|
||||
border: 5px solid @pale-blue;
|
||||
}
|
||||
.unglued_white2{
|
||||
font-size: 12px;
|
||||
margin: 3px auto;
|
||||
padding: 5px 0px;
|
||||
}
|
||||
.green{
|
||||
color: @green;
|
||||
text-align: left;
|
||||
}
|
||||
.graypanel a {
|
||||
.panelhoverlink;
|
||||
}
|
||||
|
||||
.graypanel a:hover{
|
||||
color: @green;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Unglue_itbutton{
|
||||
width:110px;
|
||||
height:40px;
|
||||
padding:0px 9px;
|
||||
background:#FFFFFF;
|
||||
margin:0px auto;
|
||||
.border-radius(4px, 4px, 4px, 4px);
|
||||
border: 1px solid #d4dcdd;
|
||||
}
|
||||
.Unglue_itbutton a{
|
||||
.greenpanelactionitems(2px);
|
||||
background-image: url(/static/images/book-panel/unglue_icon.png);
|
||||
padding:5px 0px 0px 20px;
|
||||
color:@text-blue;
|
||||
text-align:right;
|
||||
font-family: "LucidaGrandeBold";
|
||||
}
|
||||
.Unglue_itbutton a:hover{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.add_towish2{
|
||||
width:130px;
|
||||
height:30px;
|
||||
padding:0px 0px;
|
||||
margin:15px auto;
|
||||
}
|
||||
.add_towish2 a{
|
||||
.greenpanelactionitems(left);
|
||||
background-image: url(/static/images/book-panel/add_gray.png);
|
||||
padding:8px 0px;
|
||||
padding-left:20px;
|
||||
color:@text-blue;
|
||||
.greenpanelactionborders;
|
||||
font-family: "LucidaGrandeBold";
|
||||
}
|
||||
.add_towish2 a:hover{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.white_text2{
|
||||
width:130px;
|
||||
height:40px;
|
||||
padding:13px 0px;
|
||||
margin:0px;
|
||||
}
|
||||
.white_text2 a, a:hover {
|
||||
.panelhoverlink;
|
||||
}
|
||||
|
||||
/*more info*/
|
||||
.moreinfo2{
|
||||
width:130px;
|
||||
height:30px;
|
||||
padding:0px 20px 0px 0px;
|
||||
margin:15px auto;
|
||||
}
|
||||
.moreinfo2 a{
|
||||
line-height:40px;
|
||||
font-size:12px;
|
||||
background-image: url(/static/images/book-panel/gray_more_info.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
padding:8px 35px;
|
||||
font-weight:bold;
|
||||
padding-left:20px;
|
||||
color:@text-blue;
|
||||
text-decoration:none;
|
||||
text-transform: uppercase;
|
||||
.greenpanelactionborders;
|
||||
font-family: "LucidaGrandeBold";
|
||||
}
|
||||
.moreinfo2 a:hover{
|
||||
.panelhoverlink;
|
||||
}
|
||||
/*end the 2greenpanel*/
|
||||
|
||||
.read{
|
||||
margin: 15px auto 5px auto;
|
||||
padding: 0px;
|
||||
width: 140px;
|
||||
color:@green;
|
||||
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;
|
||||
}
|
||||
|
||||
.right_add{
|
||||
padding:10px;
|
||||
margin:0px;
|
||||
float:right;
|
||||
}
|
||||
p.right_add { float:right; padding:10px 10px 0 0; width:24px; }
|
||||
|
||||
/**/
|
||||
.read2{
|
||||
margin: 15px auto;
|
||||
padding: 0px;
|
||||
width: 130px;
|
||||
color:@green;
|
||||
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 ) --------------------------------------------- */
|
||||
.image {
|
||||
float: left;
|
||||
position: relative;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
left:0px;
|
||||
height:100%;
|
||||
}
|
||||
.image img {
|
||||
z-index: 100;
|
||||
}
|
||||
.image span {
|
||||
position:absolute;
|
||||
bottom: 0;
|
||||
left:-10px;
|
||||
top:-5px;
|
||||
z-index: 1000;
|
||||
height:auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,431 @@
|
|||
.header-text {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
.panelborders {
|
||||
border-width: 1px 0px;
|
||||
border-style: solid none;
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
.greenpanelstuff {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
width: 120px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.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: #3d4e53;
|
||||
}
|
||||
@charset "utf-8";
|
||||
* {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
/*main_Css*/
|
||||
#main-wrapper {
|
||||
height: 100%;
|
||||
width: 725px;
|
||||
margin: 0px;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
.panelview.tabs {
|
||||
padding: 5px 0px;
|
||||
margin: 0px;
|
||||
width: 142px;
|
||||
float: left;
|
||||
}
|
||||
.panelview.tabs span.active {
|
||||
padding: 15px;
|
||||
margin: 15px 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.panelview.book-list {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
width: 120px;
|
||||
line-height: 16px;
|
||||
margin: auto;
|
||||
padding: 0px 5px 5px 5px;
|
||||
height: 300px;
|
||||
background-color: #ffffff;
|
||||
color: #3d4e53;
|
||||
border: 5px solid #edf3f4;
|
||||
/* might need this for panel hover state; don't want it for nonhover. hm.
|
||||
a {
|
||||
color: @dark-green;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: @green;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
.panelview.book-list:hover {
|
||||
color: #3d4e53;
|
||||
}
|
||||
.panelview.book-list img {
|
||||
padding: 5px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
div.remove-wishlist.panelview {
|
||||
display: none;
|
||||
}
|
||||
.panelview.book-name, .panelview.author {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #3d4e53;
|
||||
}
|
||||
.panelview.booklist-status {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
.panelview.booklist-status .booklist-status-label {
|
||||
float: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
/*2 start*/
|
||||
.greenpanel2 {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
width: 120px;
|
||||
line-height: 16px;
|
||||
margin: 0px auto;
|
||||
padding: 10px;
|
||||
height: 295px;
|
||||
background-color: #8dc63f;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
}
|
||||
.unglued_white {
|
||||
font-size: 12px;
|
||||
margin: 0px auto;
|
||||
margin-bottom: 5px;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
.read_itbutton {
|
||||
width: 118px;
|
||||
height: 35px;
|
||||
padding: 0px 0px;
|
||||
background: #FFFFFF;
|
||||
margin: 0px;
|
||||
-moz-border-radius: 4px 4px 4px 4px;
|
||||
-webkit-border-radius: 4px 4px 4px 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #81bb38;
|
||||
}
|
||||
.read_itbutton a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10px center;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background: url(/static/images/book-panel/book_icon.png) no-repeat left center;
|
||||
padding: 0px 0px 0px 30px;
|
||||
color: #73a334;
|
||||
}
|
||||
.read_itbutton a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.add_towish {
|
||||
width: 125px;
|
||||
height: 30px;
|
||||
padding: 0px 0px;
|
||||
margin: 15px auto;
|
||||
}
|
||||
.add_towish a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-image: url(/static/images/book-panel/add_wish_icon.png);
|
||||
padding: 8px 5px 8px 21px;
|
||||
color: #FFFFFF;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
.add_towish a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
.white_text {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
padding: 17px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.white_text a {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
.white_text a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
/*more info*/
|
||||
.moreinfo {
|
||||
width: 130px;
|
||||
height: 30px;
|
||||
padding: 0px;
|
||||
margin: 15px 0 0;
|
||||
}
|
||||
.moreinfo a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-image: url(/static/images/book-panel/more_icon.png);
|
||||
padding: 8px 42px 8px 20px;
|
||||
padding-left: 20px;
|
||||
color: #FFFFFF;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: #FFFFFF;
|
||||
}
|
||||
.moreinfo a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
/*end of the more info/*
|
||||
/*end the 2greenpanel*/
|
||||
/*2 start*/
|
||||
.graypanel {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
margin: 20px auto;
|
||||
padding: 4px 5px;
|
||||
height: 300px;
|
||||
width: 130px;
|
||||
line-height: 16px;
|
||||
background-color: #edf3f4;
|
||||
color: #3d4e53;
|
||||
border: 5px solid #edf3f4;
|
||||
}
|
||||
.unglued_white2 {
|
||||
font-size: 12px;
|
||||
margin: 3px auto;
|
||||
padding: 5px 0px;
|
||||
}
|
||||
.green {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
.graypanel a {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
.graypanel a:hover {
|
||||
color: #8dc63f;
|
||||
text-decoration: none;
|
||||
}
|
||||
.Unglue_itbutton {
|
||||
width: 110px;
|
||||
height: 40px;
|
||||
padding: 0px 9px;
|
||||
background: #FFFFFF;
|
||||
margin: 0px auto;
|
||||
-moz-border-radius: 4px 4px 4px 4px;
|
||||
-webkit-border-radius: 4px 4px 4px 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #d4dcdd;
|
||||
}
|
||||
.Unglue_itbutton a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 2px center;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-image: url(/static/images/book-panel/unglue_icon.png);
|
||||
padding: 5px 0px 0px 20px;
|
||||
color: #3d4e53;
|
||||
text-align: right;
|
||||
font-family: "LucidaGrandeBold";
|
||||
}
|
||||
.Unglue_itbutton a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.add_towish2 {
|
||||
width: 130px;
|
||||
height: 30px;
|
||||
padding: 0px 0px;
|
||||
margin: 15px auto;
|
||||
}
|
||||
.add_towish2 a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
background-image: url(/static/images/book-panel/add_gray.png);
|
||||
padding: 8px 0px;
|
||||
padding-left: 20px;
|
||||
color: #3d4e53;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: #FFFFFF;
|
||||
font-family: "LucidaGrandeBold";
|
||||
}
|
||||
.add_towish2 a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.white_text2 {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
padding: 13px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.white_text2 a, a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
/*more info*/
|
||||
.moreinfo2 {
|
||||
width: 130px;
|
||||
height: 30px;
|
||||
padding: 0px 20px 0px 0px;
|
||||
margin: 15px auto;
|
||||
}
|
||||
.moreinfo2 a {
|
||||
line-height: 40px;
|
||||
font-size: 12px;
|
||||
background-image: url(/static/images/book-panel/gray_more_info.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
padding: 8px 35px;
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
color: #3d4e53;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-top-color: #FFFFFF;
|
||||
border-bottom-color: #FFFFFF;
|
||||
font-family: "LucidaGrandeBold";
|
||||
}
|
||||
.moreinfo2 a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
/*end the 2greenpanel*/
|
||||
.read {
|
||||
margin: 15px auto 5px auto;
|
||||
padding: 0px;
|
||||
width: 140px;
|
||||
color: #8dc63f;
|
||||
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;
|
||||
}
|
||||
.right_add {
|
||||
padding: 10px;
|
||||
margin: 0px;
|
||||
float: right;
|
||||
}
|
||||
p.right_add {
|
||||
float: right;
|
||||
padding: 10px 10px 0 0;
|
||||
width: 24px;
|
||||
}
|
||||
/**/
|
||||
.read2 {
|
||||
margin: 15px auto;
|
||||
padding: 0px;
|
||||
width: 130px;
|
||||
color: #8dc63f;
|
||||
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 {
|
||||
float: left;
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.panelview.book-thumb img {
|
||||
z-index: 100;
|
||||
width: 120px;
|
||||
height: 182px;
|
||||
}
|
||||
.panelview.book-thumb span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -10px;
|
||||
top: -5px;
|
||||
z-index: 1000;
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,397 @@
|
|||
@import "variables.less";
|
||||
|
||||
// Local variables
|
||||
.greenpanelstuff {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
width: 120px;
|
||||
line-height:16px;
|
||||
}
|
||||
|
||||
.greenpanelactionitems(@pos) {
|
||||
line-height:40px;
|
||||
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;
|
||||
}
|
||||
|
||||
@charset "utf-8";
|
||||
*{
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
/*main_Css*/
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
|
||||
.panelview.book-list {
|
||||
.greenpanelstuff;
|
||||
margin: auto;
|
||||
padding: 0px 5px 5px 5px;
|
||||
height: 300px;
|
||||
background-color: #ffffff;
|
||||
color: @text-blue;
|
||||
border: 5px solid @pale-blue;
|
||||
|
||||
&:hover {
|
||||
color: @text-blue;
|
||||
}
|
||||
|
||||
img {
|
||||
padding:5px 0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
/* might need this for panel hover state; don't want it for nonhover. hm.
|
||||
a {
|
||||
color: @dark-green;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: @green;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
div.remove-wishlist.panelview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panelview.book-name, .panelview.author {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height:16px;
|
||||
color: #3d4e53;
|
||||
}
|
||||
|
||||
.panelview.booklist-status {
|
||||
color: @green;
|
||||
text-align: left;
|
||||
|
||||
.booklist-status-label {
|
||||
float: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*2 start*/
|
||||
|
||||
.greenpanel2 {
|
||||
.greenpanelstuff;
|
||||
margin: 0px auto;
|
||||
padding: 10px;
|
||||
height: 295px;
|
||||
background-color: @green;
|
||||
color: #ffffff;
|
||||
position:relative;
|
||||
}
|
||||
.unglued_white {
|
||||
font-size: 12px;
|
||||
margin: 0px auto;
|
||||
margin-bottom:5px;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
.read_itbutton {
|
||||
width:118px;
|
||||
height:35px;
|
||||
padding:0px 0px;
|
||||
background:#FFFFFF;
|
||||
margin:0px;
|
||||
.border-radius(4px, 4px, 4px, 4px);
|
||||
border: 1px solid #81bb38;
|
||||
|
||||
a {
|
||||
.greenpanelactionitems(10px);
|
||||
background: url(/static/images/book-panel/book_icon.png) no-repeat left center;
|
||||
padding:0px 0px 0px 30px;
|
||||
color:@dark-green;
|
||||
|
||||
&:hover {
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.add_towish {
|
||||
width:125px;
|
||||
height:30px;
|
||||
padding:0px 0px;
|
||||
margin:15px auto;
|
||||
|
||||
a {
|
||||
.greenpanelactionitems(left);
|
||||
background-image: url(/static/images/book-panel/add_wish_icon.png);
|
||||
padding:8px 5px 8px 21px;
|
||||
color:#FFFFFF;
|
||||
.greenpanelactionborders();
|
||||
|
||||
&:hover{ .panelhoverlink;}
|
||||
}
|
||||
}
|
||||
|
||||
.white_text {
|
||||
width:130px;
|
||||
height:40px;
|
||||
padding:17px 0px;
|
||||
margin:0px;
|
||||
|
||||
a {
|
||||
color:#FFFFFF;
|
||||
text-decoration:none;
|
||||
|
||||
&:hover { .panelhoverlink;}
|
||||
}
|
||||
}
|
||||
|
||||
/*more info*/
|
||||
.moreinfo {
|
||||
width:130px;
|
||||
height:30px;
|
||||
padding:0px;
|
||||
margin:15px 0 0;
|
||||
|
||||
a {
|
||||
.greenpanelactionitems(left);
|
||||
background-image: url(/static/images/book-panel/more_icon.png);
|
||||
padding:8px 42px 8px 20px;
|
||||
padding-left:20px;
|
||||
color:#FFFFFF;
|
||||
.greenpanelactionborders;
|
||||
|
||||
&:hover { .panelhoverlink;}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*end of the more info/*
|
||||
/*end the 2greenpanel*/
|
||||
|
||||
/*2 start*/
|
||||
|
||||
.graypanel {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
margin: 20px auto;
|
||||
padding: 4px 5px;
|
||||
height: 300px;
|
||||
width: 130px;
|
||||
line-height:16px;
|
||||
background-color: @pale-blue;
|
||||
color: @text-blue;
|
||||
border: 5px solid @pale-blue;
|
||||
}
|
||||
.unglued_white2{
|
||||
font-size: 12px;
|
||||
margin: 3px auto;
|
||||
padding: 5px 0px;
|
||||
}
|
||||
.green{
|
||||
color: @green;
|
||||
text-align: left;
|
||||
}
|
||||
.graypanel a {
|
||||
.panelhoverlink;
|
||||
}
|
||||
|
||||
.graypanel a:hover{
|
||||
color: @green;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.Unglue_itbutton{
|
||||
width:110px;
|
||||
height:40px;
|
||||
padding:0px 9px;
|
||||
background:#FFFFFF;
|
||||
margin:0px auto;
|
||||
.border-radius(4px, 4px, 4px, 4px);
|
||||
border: 1px solid #d4dcdd;
|
||||
}
|
||||
.Unglue_itbutton a{
|
||||
.greenpanelactionitems(2px);
|
||||
background-image: url(/static/images/book-panel/unglue_icon.png);
|
||||
padding:5px 0px 0px 20px;
|
||||
color:@text-blue;
|
||||
text-align:right;
|
||||
font-family: "LucidaGrandeBold";
|
||||
}
|
||||
.Unglue_itbutton a:hover{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.add_towish2{
|
||||
width:130px;
|
||||
height:30px;
|
||||
padding:0px 0px;
|
||||
margin:15px auto;
|
||||
}
|
||||
.add_towish2 a{
|
||||
.greenpanelactionitems(left);
|
||||
background-image: url(/static/images/book-panel/add_gray.png);
|
||||
padding:8px 0px;
|
||||
padding-left:20px;
|
||||
color:@text-blue;
|
||||
.greenpanelactionborders;
|
||||
font-family: "LucidaGrandeBold";
|
||||
}
|
||||
.add_towish2 a:hover{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.white_text2{
|
||||
width:130px;
|
||||
height:40px;
|
||||
padding:13px 0px;
|
||||
margin:0px;
|
||||
}
|
||||
.white_text2 a, a:hover {
|
||||
.panelhoverlink;
|
||||
}
|
||||
|
||||
/*more info*/
|
||||
.moreinfo2{
|
||||
width:130px;
|
||||
height:30px;
|
||||
padding:0px 20px 0px 0px;
|
||||
margin:15px auto;
|
||||
}
|
||||
.moreinfo2 a{
|
||||
line-height:40px;
|
||||
font-size:12px;
|
||||
background-image: url(/static/images/book-panel/gray_more_info.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
padding:8px 35px;
|
||||
font-weight:bold;
|
||||
padding-left:20px;
|
||||
color:@text-blue;
|
||||
text-decoration:none;
|
||||
text-transform: uppercase;
|
||||
.greenpanelactionborders;
|
||||
font-family: "LucidaGrandeBold";
|
||||
}
|
||||
.moreinfo2 a:hover{
|
||||
.panelhoverlink;
|
||||
}
|
||||
/*end the 2greenpanel*/
|
||||
|
||||
.read{
|
||||
margin: 15px auto 5px auto;
|
||||
padding: 0px;
|
||||
width: 140px;
|
||||
color:@green;
|
||||
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;
|
||||
}
|
||||
|
||||
.right_add{
|
||||
padding:10px;
|
||||
margin:0px;
|
||||
float:right;
|
||||
}
|
||||
p.right_add { float:right; padding:10px 10px 0 0; width:24px; }
|
||||
|
||||
/**/
|
||||
.read2{
|
||||
margin: 15px auto;
|
||||
padding: 0px;
|
||||
width: 130px;
|
||||
color:@green;
|
||||
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 {
|
||||
float: left;
|
||||
position: relative;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
left:0px;
|
||||
}
|
||||
.panelview.book-thumb img {
|
||||
z-index: 100;
|
||||
width: 120px;
|
||||
height: 182px;
|
||||
}
|
||||
.panelview.book-thumb span {
|
||||
position:absolute;
|
||||
bottom: 0;
|
||||
left:-10px;
|
||||
top:-5px;
|
||||
z-index: 1000;
|
||||
height:auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,987 @@
|
|||
/*
|
||||
DO NOT MAKE CHANGES DIRECTLY TO layout.css.
|
||||
Make changes to the appropriate file in /static/less/ and compile with the less app or similar (lesscss.org).
|
||||
Changes made directly to layout.css will be overwritten.
|
||||
*/
|
||||
@charset "utf-8";
|
||||
.header-text {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
.panelborders {
|
||||
border-width: 1px 0px;
|
||||
border-style: solid none;
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
div.book-list {
|
||||
clear: both;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
height: 43px;
|
||||
line-height: 43px;
|
||||
margin: 0 5px 0 0;
|
||||
padding: 7px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.book-list.row1 {
|
||||
background: #f6f9f9;
|
||||
}
|
||||
div.book-list.row2 {
|
||||
background: #fff;
|
||||
}
|
||||
div.book-list div.unglue-this {
|
||||
float: left;
|
||||
}
|
||||
div.book-list div.book-thumb {
|
||||
margin-right: 5px;
|
||||
float: left;
|
||||
}
|
||||
div.book-list div.book-name {
|
||||
width: 260px;
|
||||
margin-right: 10px;
|
||||
background: url("/static/images/booklist/booklist-vline.png") right center no-repeat;
|
||||
float: left;
|
||||
}
|
||||
div.book-list div.book-name span {
|
||||
display: block;
|
||||
line-height: normal;
|
||||
height: 43px;
|
||||
line-height: 43px;
|
||||
}
|
||||
div.book-list div.add-wishlist, div.book-list div.remove-wishlist {
|
||||
margin-right: 10px;
|
||||
padding-right: 10px;
|
||||
background: url("/static/images/booklist/booklist-vline.png") right center no-repeat;
|
||||
float: left;
|
||||
}
|
||||
div.book-list div.add-wishlist a, div.book-list div.remove-wishlist a {
|
||||
font-weight: normal;
|
||||
color: #3d4e53;
|
||||
text-transform: none;
|
||||
background: url("/static/images/booklist/add-wishlist.png") left center no-repeat;
|
||||
padding-left: 20px;
|
||||
}
|
||||
div.book-list div.booklist-status {
|
||||
margin-right: 7px;
|
||||
float: left;
|
||||
}
|
||||
span.booklist-status-text {
|
||||
float: left;
|
||||
display: block;
|
||||
padding-right: 5px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
div.unglue-this a {
|
||||
text-transform: uppercase;
|
||||
color: #3d4e53;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
div.unglue-this.complete .unglue-this-inner1 {
|
||||
background: url("/static/images/booklist/bg.png") 0 -84px no-repeat;
|
||||
height: 42px;
|
||||
}
|
||||
div.unglue-this.complete .unglue-this-inner2 {
|
||||
background: url("/static/images/booklist/bg.png") 100% -126px no-repeat;
|
||||
margin-left: 29px;
|
||||
height: 42px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
div.unglue-this.complete a {
|
||||
color: #fff;
|
||||
display: block;
|
||||
}
|
||||
div.unglue-this.processing .unglue-this-inner1 {
|
||||
background: url("/static/images/booklist/bg.png") 0 0 no-repeat;
|
||||
height: 42px;
|
||||
}
|
||||
div.unglue-this.processing .unglue-this-inner2 {
|
||||
background: url("/static/images/booklist/bg.png") 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;
|
||||
}
|
||||
ul.book-list-view li {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
line-height: 22px;
|
||||
}
|
||||
div.navigation {
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
color: #37414d;
|
||||
}
|
||||
ul.navigation {
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
ul.navigation li {
|
||||
float: left;
|
||||
line-height: normal;
|
||||
margin-right: 5px;
|
||||
}
|
||||
ul.navigation li a {
|
||||
color: #37414d;
|
||||
font-weight: normal;
|
||||
}
|
||||
ul.navigation li.arrow-l a {
|
||||
background: url("/static/images/booklist/bg.png") 0 -168px no-repeat;
|
||||
width: 10px;
|
||||
height: 15px;
|
||||
display: block;
|
||||
text-indent: -10000px;
|
||||
}
|
||||
ul.navigation li.arrow-r a {
|
||||
background: url("/static/images/booklist/bg.png") -1px -185px no-repeat;
|
||||
width: 10px;
|
||||
height: 15px;
|
||||
display: block;
|
||||
text-indent: -10000px;
|
||||
}
|
||||
ul.navigation li a:hover, ul.navigation li.active a {
|
||||
color: #8ac3d7;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.unglue-button {
|
||||
display: block;
|
||||
border: 0;
|
||||
}
|
||||
.book-thumb img {
|
||||
height: 50px;
|
||||
}
|
||||
.book_panel {
|
||||
margin: 20px auto;
|
||||
padding: 0 5px 5px 5px;
|
||||
height: 300px;
|
||||
width: 120px;
|
||||
line-height: 16px;
|
||||
background-color: #ffffff;
|
||||
color: #3d4e53;
|
||||
border: 5px solid #edf3f4;
|
||||
}
|
||||
.book_panel a {
|
||||
font-size: 12pt;
|
||||
color: #73a334;
|
||||
text-decoration: none;
|
||||
}
|
||||
.book_panel a:hover {
|
||||
color: #8dc63f;
|
||||
text-decoration: none;
|
||||
}
|
||||
.book_panel p {
|
||||
margin: 0;
|
||||
}
|
||||
.book_panel img {
|
||||
padding: 5px 0;
|
||||
margin: 0;
|
||||
}
|
||||
.book_panel:hover {
|
||||
color: #3d4e53;
|
||||
}
|
||||
.green {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
.book_panel_back {
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
height: 295px;
|
||||
width: 120px;
|
||||
line-height: 16px;
|
||||
background-color: #8dc63f;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
}
|
||||
.book_panel_back a {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.unglued_white {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 5px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.status {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
.read_itbutton {
|
||||
width: 118px;
|
||||
height: 35px;
|
||||
padding: 0 0;
|
||||
background: #FFFFFF;
|
||||
margin: 0;
|
||||
-moz-border-radius: 4px 4px 4px 4px;
|
||||
-webkit-border-radius: 4px 4px 4px 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #81bb38;
|
||||
}
|
||||
.read_itbutton a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background: url("/static/images/book-panel/book_icon.png") no-repeat left center;
|
||||
background-position: 10px center;
|
||||
padding: 0 0 0 30px;
|
||||
color: #73a334;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.read_itbutton a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
#add_towish {
|
||||
width: 130px;
|
||||
height: 30px;
|
||||
padding: 0 0;
|
||||
margin: 10px auto;
|
||||
}
|
||||
#add_towish a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-image: url("/static/images/book-panel/add_wish_icon.png") no-repeat left center;
|
||||
padding: 8px 5px 8px 21px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
border-width: 1px 0px;
|
||||
border-style: solid none;
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
#add_towish a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
#white_text {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
padding: 17px 0;
|
||||
margin: 0;
|
||||
}
|
||||
#white_text a {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
#white_text a:hover {
|
||||
color: #3d4e53;
|
||||
text-decoration: none;
|
||||
}
|
||||
#moreinfo {
|
||||
width: 130px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
margin: 15px 0 0;
|
||||
}
|
||||
#moreinfo a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-image: url("/static/images/book-panel/more_icon.png") no-repeat left center;
|
||||
padding: 8px 42px 8px 20px;
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
border-width: 1px 0px;
|
||||
border-style: solid none;
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
#moreinfo a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
.green {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
#graypanel a {
|
||||
color: #3d4e53;
|
||||
text-decoration: none;
|
||||
}
|
||||
.read {
|
||||
margin: 15px auto;
|
||||
padding: 0;
|
||||
width: 140px;
|
||||
color: #8dc63f;
|
||||
height: 40px;
|
||||
line-height: 25px;
|
||||
float: left;
|
||||
}
|
||||
.read p {
|
||||
margin: 0;
|
||||
padding: 10px 3px;
|
||||
width: 50px;
|
||||
font-size: 10pt;
|
||||
float: left;
|
||||
}
|
||||
.read img {
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
.right_add {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
float: right;
|
||||
}
|
||||
p.right_add {
|
||||
float: right;
|
||||
padding: 10px 10px 0 0;
|
||||
width: 24px;
|
||||
}
|
||||
/* slideout hover state */
|
||||
.book_panel_interior {
|
||||
float: left;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
}
|
||||
.book_panel_interior img {
|
||||
z-index: 100;
|
||||
}
|
||||
.book_panel_interior span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -10px;
|
||||
top: -5px;
|
||||
z-index: 1000;
|
||||
height: auto;
|
||||
}
|
||||
body {
|
||||
background: url("/static/images/bg-body.png") 0 0 repeat-x;
|
||||
padding: 0 0 20px 0;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-family: Lucida "Lucida Grande", "Lucida Sans Unicode", sans-serif, Helvetica, sans-serif;
|
||||
color: #3d4e53;
|
||||
}
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
h2.content-heading {
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
font-size: 19px;
|
||||
font-weight: normal;
|
||||
color: #3d4e53;
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
h2.content-heading span {
|
||||
font-style: italic;
|
||||
}
|
||||
h3.jsmod-title {
|
||||
background: url("/static/images/bg.png") 0 0 no-repeat;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 73px;
|
||||
}
|
||||
h3.jsmod-title span {
|
||||
background: url("/static/images/icon-h3.png") 90% center no-repeat;
|
||||
font-size: 17px;
|
||||
color: #fff;
|
||||
padding: 26px 40px 27px 20px;
|
||||
display: block;
|
||||
}
|
||||
ul.menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
a.readon {
|
||||
background: url("/static/images/bg.png") 100% -72px no-repeat;
|
||||
color: #fff;
|
||||
text-transform: capitalize;
|
||||
display: block;
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
a.readon span {
|
||||
background: url("/static/images/bg.png") -770px -108px no-repeat;
|
||||
margin-right: 34px;
|
||||
padding: 0 5px 0 20px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
display: block;
|
||||
}
|
||||
a {
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
#js-header {
|
||||
height: 90px;
|
||||
}
|
||||
.js-main {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
padding: 0;
|
||||
}
|
||||
.js-logo {
|
||||
float: left;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.js-logo a img {
|
||||
border: none;
|
||||
}
|
||||
.js-topmenu {
|
||||
float: right;
|
||||
padding-top: 25px;
|
||||
}
|
||||
.js-topmenu ul li {
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.js-topmenu ul li a {
|
||||
color: #3d4e53;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
.js-topmenu ul li span#welcome {
|
||||
color: #8dc63f;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
.js-topmenu ul li.last a {
|
||||
background: url("/static/images/bg.png") right top no-repeat;
|
||||
}
|
||||
.js-topmenu ul li.last a span {
|
||||
background: url("/static/images/bg.png") -770px -36px no-repeat;
|
||||
margin-right: 29px;
|
||||
display: block;
|
||||
padding: 0 5px 0 15px;
|
||||
}
|
||||
#js-topsection {
|
||||
padding: 15px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.js-topnews {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.js-topnews1 {
|
||||
background: url("/static/images/header/header-m.png") 0 0 repeat-y;
|
||||
}
|
||||
.js-topnews2 {
|
||||
background: url("/static/images/header/header-t.png") 0 0 no-repeat;
|
||||
}
|
||||
.js-topnews3 {
|
||||
background: url("/static/images/header/header-b.png") 0 100% no-repeat;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
}
|
||||
.js-search {
|
||||
float: right;
|
||||
width: 30%;
|
||||
padding-top: 25px;
|
||||
}
|
||||
.js-search input {
|
||||
float: left;
|
||||
}
|
||||
.js-search .inputbox {
|
||||
padding: 0 0 0 15px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: url("/static/images/bg.png") -645px -180px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
float: left;
|
||||
color: #6994a3;
|
||||
}
|
||||
.js-search .button {
|
||||
background: url("/static/images/bg.png") 100% -144px no-repeat;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 40px;
|
||||
height: 36px;
|
||||
display: block;
|
||||
border: none;
|
||||
text-indent: -10000px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.js-search-inner {
|
||||
float: right;
|
||||
}
|
||||
#js-leftcol {
|
||||
float: left;
|
||||
width: 235px;
|
||||
}
|
||||
#js-leftcol a {
|
||||
font-weight: normal;
|
||||
}
|
||||
#js-leftcol a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#js-leftcol .jsmod-content {
|
||||
border: 1px solid #edf3f4;
|
||||
margin-left: 10px;
|
||||
-moz-border-radius: 0 0 10px 10px;
|
||||
-webkit-border-radius: 0 0 10px 10px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
#js-leftcol ul.level1 > li > a {
|
||||
text-transform: uppercase;
|
||||
color: #3d4e53;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #edf3f4;
|
||||
border-top: 1px solid #edf3f4;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
}
|
||||
#js-leftcol ul.level2 li {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
#js-leftcol ul.level2 li a {
|
||||
color: #6994a3;
|
||||
}
|
||||
#js-maincol-fr {
|
||||
float: right;
|
||||
width: 725px;
|
||||
}
|
||||
div.content-block {
|
||||
overflow: hidden;
|
||||
background: url("/static/images/bg.png") 100% -223px no-repeat;
|
||||
padding: 0 0 0 7px;
|
||||
}
|
||||
.content-block-heading a.block-link {
|
||||
float: right;
|
||||
padding: 15px;
|
||||
font-size: 11px;
|
||||
color: #3d4e53;
|
||||
text-decoration: underline;
|
||||
font-weight: normal;
|
||||
}
|
||||
div.content-block-content {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding-left: 10px;
|
||||
}
|
||||
div.content-block-content .cols3 .column {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
}
|
||||
#footer {
|
||||
border-top: 7px solid #edf3f4;
|
||||
clear: both;
|
||||
height: 90px;
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
}
|
||||
#footer a {
|
||||
color: #3d4e53;
|
||||
}
|
||||
.errorlist {
|
||||
color: red;
|
||||
}
|
||||
#registration {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 30%;
|
||||
margin-top: 5%;
|
||||
}
|
||||
#registration input[type="submit"] {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
.block-inner {
|
||||
padding-right: 10px;
|
||||
}
|
||||
.user-block {
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
.user-block-hide {
|
||||
float: left;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
.user-block-hide .block {
|
||||
float: left;
|
||||
width: 33%;
|
||||
}
|
||||
.user-block-hide input {
|
||||
float: left;
|
||||
margin: 3px 10px 0 0;
|
||||
}
|
||||
.user-block-hide label {
|
||||
float: left;
|
||||
width: 90%;
|
||||
}
|
||||
.user-block1 {
|
||||
float: left;
|
||||
width: 25%;
|
||||
}
|
||||
.user-block2 {
|
||||
color: #6994a3;
|
||||
font-size: 11px;
|
||||
line-height: normal;
|
||||
float: left;
|
||||
width: 25%;
|
||||
}
|
||||
.user-block3, .user-block4 {
|
||||
float: right;
|
||||
width: 25%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
img.user-avatar {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.social {
|
||||
width: 100%;
|
||||
padding-left: 35px;
|
||||
}
|
||||
span.user-name, span.user-date, span.user-short-info {
|
||||
display: block;
|
||||
}
|
||||
span.user-name, span.user-name a, a {
|
||||
font-size: 12px;
|
||||
color: #3d4e53;
|
||||
}
|
||||
span.user-status-title {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
span.rounded {
|
||||
border: 1px solid #d4d4d4;
|
||||
-moz-border-radius: 7px 7px 7px 7px;
|
||||
-webkit-border-radius: 7px 7px 7px 7px;
|
||||
border-radius: 7px 7px 7px 7px;
|
||||
padding: 1px;
|
||||
color: #fff;
|
||||
margin: 0 8px 0 0;
|
||||
display: inline-block;
|
||||
}
|
||||
span.rounded > span {
|
||||
padding: 7px 10px;
|
||||
min-width: 15px;
|
||||
-moz-border-radius: 5px 5px 5px 5px;
|
||||
-webkit-border-radius: 5px 5px 5px 5px;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
span.blue {
|
||||
background: #a7d26a url("/static/images/header-button-blue.png") left bottom repeat-x;
|
||||
}
|
||||
span.orange {
|
||||
background: #eabc7c url("/static/images/header-button-orange.png") left bottom repeat-x;
|
||||
}
|
||||
span.grey {
|
||||
background: #bacfd6 url("/static/images/header-button-grey.png") left bottom repeat-x;
|
||||
}
|
||||
div.check-list {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
a.profile-edit {
|
||||
display: block;
|
||||
background: url("/static/images/header/icon-edit.png") right top no-repeat;
|
||||
}
|
||||
div.profile-save {
|
||||
padding-top: 15px;
|
||||
border: none;
|
||||
}
|
||||
input.profile-save {
|
||||
background: url("/static/images/header/save-setting.png") 0 0 no-repeat;
|
||||
width: 116px;
|
||||
height: 42px;
|
||||
display: block;
|
||||
text-indent: -100000px;
|
||||
border: none;
|
||||
}
|
||||
a.my-setting {
|
||||
background: #d6dde0 url("/static/images/header/explane.png") 90% center no-repeat;
|
||||
border-radius: 7px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
display: block;
|
||||
padding: 0 0 0 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
a.my-setting.active {
|
||||
background: #d6dde0 url("/static/images/header/collspane.png") 90% center no-repeat;
|
||||
}
|
||||
#tabs {
|
||||
border-bottom: 4px solid #8DC63F;
|
||||
clear: both;
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
#tabs ul.book-list-view {
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
#tabs-1, #tabs-2, #tabs-3 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
ul.tabs {
|
||||
float: left;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
ul.tabs li {
|
||||
float: left;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
ul.tabs li a {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
min-width: 80px;
|
||||
border-radius: 7px 7px 0 0;
|
||||
background: url("/static/images/header/bg-tabs1.png") left bottom repeat-x;
|
||||
}
|
||||
ul.tabs li a:hover, ul.tabs li.active a {
|
||||
background: url("/static/images/header/bg-tabs.png") left bottom repeat-x;
|
||||
color: #fff;
|
||||
}
|
||||
.book-list span.rounded > span {
|
||||
line-height: normal;
|
||||
width: 75px;
|
||||
}
|
||||
.book-list span.rounded > span a {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.book_panel {
|
||||
margin: 20px auto;
|
||||
padding: 0 5px 5px 5px;
|
||||
height: 300px;
|
||||
width: 120px;
|
||||
line-height: 16px;
|
||||
background-color: #ffffff;
|
||||
color: #3d4e53;
|
||||
border: 5px solid #edf3f4;
|
||||
}
|
||||
.book_panel a {
|
||||
font-size: 12pt;
|
||||
color: #73a334;
|
||||
text-decoration: none;
|
||||
}
|
||||
.book_panel a:hover {
|
||||
color: #8dc63f;
|
||||
text-decoration: none;
|
||||
}
|
||||
.book_panel p {
|
||||
margin: 0;
|
||||
}
|
||||
.book_panel img {
|
||||
padding: 5px 0;
|
||||
margin: 0;
|
||||
}
|
||||
.book_panel:hover {
|
||||
color: #3d4e53;
|
||||
}
|
||||
.green {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
.book_panel_back {
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
height: 295px;
|
||||
width: 120px;
|
||||
line-height: 16px;
|
||||
background-color: #8dc63f;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
}
|
||||
.book_panel_back a {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.unglued_white {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 5px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.status {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
.read_itbutton {
|
||||
width: 118px;
|
||||
height: 35px;
|
||||
padding: 0 0;
|
||||
background: #FFFFFF;
|
||||
margin: 0;
|
||||
-moz-border-radius: 4px 4px 4px 4px;
|
||||
-webkit-border-radius: 4px 4px 4px 4px;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid #81bb38;
|
||||
}
|
||||
.read_itbutton a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background: url("/static/images/book-panel/book_icon.png") no-repeat left center;
|
||||
background-position: 10px center;
|
||||
padding: 0 0 0 30px;
|
||||
color: #73a334;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.read_itbutton a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
#add_towish {
|
||||
width: 130px;
|
||||
height: 30px;
|
||||
padding: 0 0;
|
||||
margin: 10px auto;
|
||||
}
|
||||
#add_towish a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-image: url("/static/images/book-panel/add_wish_icon.png") no-repeat left center;
|
||||
padding: 8px 5px 8px 21px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
border-width: 1px 0px;
|
||||
border-style: solid none;
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
#add_towish a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
#white_text {
|
||||
width: 130px;
|
||||
height: 40px;
|
||||
padding: 17px 0;
|
||||
margin: 0;
|
||||
}
|
||||
#white_text a {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
#white_text a:hover {
|
||||
color: #3d4e53;
|
||||
text-decoration: none;
|
||||
}
|
||||
#moreinfo {
|
||||
width: 130px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
margin: 15px 0 0;
|
||||
}
|
||||
#moreinfo a {
|
||||
line-height: 40px;
|
||||
font-size: 11px;
|
||||
background-image: url("/static/images/book-panel/more_icon.png") no-repeat left center;
|
||||
padding: 8px 42px 8px 20px;
|
||||
font-weight: bold;
|
||||
padding-left: 20px;
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
border-width: 1px 0px;
|
||||
border-style: solid none;
|
||||
border-color: #FFFFFF;
|
||||
}
|
||||
#moreinfo a:hover {
|
||||
text-decoration: none;
|
||||
color: #3d4e53;
|
||||
}
|
||||
.green {
|
||||
color: #8dc63f;
|
||||
text-align: left;
|
||||
}
|
||||
#graypanel a {
|
||||
color: #3d4e53;
|
||||
text-decoration: none;
|
||||
}
|
||||
.read {
|
||||
margin: 15px auto;
|
||||
padding: 0;
|
||||
width: 140px;
|
||||
color: #8dc63f;
|
||||
height: 40px;
|
||||
line-height: 25px;
|
||||
float: left;
|
||||
}
|
||||
.read p {
|
||||
margin: 0;
|
||||
padding: 10px 3px;
|
||||
width: 50px;
|
||||
font-size: 10pt;
|
||||
float: left;
|
||||
}
|
||||
.read img {
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
.right_add {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
float: right;
|
||||
}
|
||||
p.right_add {
|
||||
float: right;
|
||||
padding: 10px 10px 0 0;
|
||||
width: 24px;
|
||||
}
|
||||
/* slideout hover state */
|
||||
.book_panel_interior {
|
||||
float: left;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
}
|
||||
.book_panel_interior img {
|
||||
z-index: 100;
|
||||
}
|
||||
.book_panel_interior span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -10px;
|
||||
top: -5px;
|
||||
z-index: 1000;
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@ Changes made directly to layout.css will be overwritten.
|
|||
@import "sitewide.less";
|
||||
@import "registration.less";
|
||||
@import "supporter_layout.less";
|
||||
@import "book_panel.less";
|
||||
|
||||
// I am going to need to draw out the page on a white board and get a sense of how this content wants to be structured for reusability.
|
||||
// What might I need to look at...
|
||||
|
|
|
|||
|
|
@ -258,6 +258,7 @@ div.content-block {
|
|||
div.content-block-content {
|
||||
width:100%;
|
||||
overflow:hidden;
|
||||
padding-left: 10px;
|
||||
|
||||
.cols3 .column {
|
||||
width:33.33%;
|
||||
|
|
|
|||
|
|
@ -205,3 +205,11 @@ ul.tabs {
|
|||
text-transform:capitalize;
|
||||
}
|
||||
}
|
||||
|
||||
div.content-block-content {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<html>
|
||||
<head>
|
||||
|
||||
<!-- there's stuff we need from here and stuff that's incompatible:
|
||||
<link href="css/layout.css" rel="stylesheet" type="text/css" /> -->
|
||||
|
||||
<link href="less/book_list-test.css" rel="stylesheet" type="text/css" />
|
||||
<link href="less/book_panel_unimported_test.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
|
||||
|
||||
<!-- Beware of fadeIn/fadeOut jQuery animations; they add an inline "display: block"
|
||||
which overrides display: none in the stylesheet. Sneaky! -->
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
$('#toggle-list').click(function(){
|
||||
$('div.panelview').addClass("listview").removeClass("panelview");
|
||||
});
|
||||
$('#toggle-panel').click(function(){
|
||||
$('div.listview').addClass("panelview").removeClass("listview");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<a href="#" id="toggle-list">List view</a>
|
||||
<a href="#" id="toggle-panel">Panel view</a>
|
||||
<br />
|
||||
|
||||
<div class="listview tabs tabs-3">
|
||||
<div class="listview book-list row1">
|
||||
<div class="listview book-thumb">
|
||||
<a href="#"><img src="http://bks0.books.google.com/books?id=v6iZL5n5cLwC&printsec=frontcover&img=1&zoom=1" alt="Book name" title="book name" /></a>
|
||||
</div>
|
||||
<div class="listview book-name">
|
||||
<span>
|
||||
<a href="{% url work work.id %}">Title</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="listview author">
|
||||
<span id="{{ work.author }}">James K. Polk</span>
|
||||
</div>
|
||||
<div class="listview remove-wishlist">
|
||||
<span id="{{ work.id }}">Remove from Wishlist</span>
|
||||
</div>
|
||||
<div class="listview booklist-status">
|
||||
<span class="booklist-status-label">Status: </span><span class="booklist-status-text">Active</span>
|
||||
<!-- images differ for list and panel; need to deal. maybe can use smaller version in rounded-corner pale-background div? -->
|
||||
<!-- also this span is not nested in the panel view but is in list. how to deal? -->
|
||||
<span class="booklist-status-img">
|
||||
<img src="images/images/icon-book-37by25-4.png" title="book list status" alt="book list status" />
|
||||
<p>100%</p>
|
||||
<p class="right_add"><img src="/static/images/book-panel/add_gray.png" border="0" /></p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="listview unglue-this none">
|
||||
<div class="listview unglue-this-inner1">
|
||||
<div class="listview unglue-this-inner2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
Loading…
Reference in New Issue