From 96a303943431a7b7b36710156428bb99eeed4360 Mon Sep 17 00:00:00 2001 From: Andromeda Yelton Date: Sun, 6 Nov 2011 15:24:16 -0500 Subject: [PATCH 1/2] fixing bugs resulting from am addition of last_campaign method --- api/templates/widget.html | 2 +- core/models.py | 8 +- frontend/templates/base.html | 2 +- frontend/templates/supporter.html | 4 + static/less/campaign.less | 71 ++++++ static/less/layout.css | 161 +++++++++++- static/less/supporter_layout.css | 399 ++++++++++++++---------------- static/less/supporter_layout.less | 97 +++++++- 8 files changed, 520 insertions(+), 224 deletions(-) create mode 100644 static/less/campaign.less diff --git a/api/templates/widget.html b/api/templates/widget.html index 14744b72..8fbd1c04 100644 --- a/api/templates/widget.html +++ b/api/templates/widget.html @@ -2,7 +2,7 @@ unglue.it: {% block title %}{% endblock %} - + diff --git a/core/models.py b/core/models.py index 6c5ad0bc..6c033a23 100755 --- a/core/models.py +++ b/core/models.py @@ -135,7 +135,7 @@ class Work(models.Model): return last def last_campaign_status(self): - campaign = self.last_campaign + campaign = self.last_campaign() if campaign: status = campaign.status else: @@ -144,10 +144,10 @@ class Work(models.Model): def percent_unglued(self): status = 0 - if last_campaign is not None: - if(self.last_campaign().status == 'SUCCESSFUL'): + if self.last_campaign() is not None: + if(self.last_campaign_status() == 'SUCCESSFUL'): status = 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: status = 6 diff --git a/frontend/templates/base.html b/frontend/templates/base.html index ac471e62..5fcb9d35 100644 --- a/frontend/templates/base.html +++ b/frontend/templates/base.html @@ -7,7 +7,7 @@ unglue.it {% block title %}{% endblock %} - + diff --git a/frontend/templates/supporter.html b/frontend/templates/supporter.html index 5b0a12c3..02b2e886 100644 --- a/frontend/templates/supporter.html +++ b/frontend/templates/supporter.html @@ -3,6 +3,10 @@ {% block title %} — {{ supporter.username }}{% endblock %} {% block extra_head %} + + + + diff --git a/static/less/campaign.less b/static/less/campaign.less new file mode 100644 index 00000000..4281c08f --- /dev/null +++ b/static/less/campaign.less @@ -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;} \ No newline at end of file diff --git a/static/less/layout.css b/static/less/layout.css index 09b43c19..510e84ab 100644 --- a/static/less/layout.css +++ b/static/less/layout.css @@ -24,6 +24,8 @@ div.book-list { vertical-align: middle; height: 43px; line-height: 43px; + height: 43px; + line-height: 43px; margin: 0 5px 0 0; padding: 7px 0; overflow: hidden; @@ -52,6 +54,8 @@ div.book-list div.book-name span { line-height: normal; height: 43px; line-height: 43px; + height: 43px; + line-height: 43px; } div.book-list div.add-wishlist, div.book-list div.remove-wishlist { margin-right: 10px; @@ -146,6 +150,11 @@ ul.navigation li.arrow-l a { height: 15px; display: block; text-indent: -10000px; + 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; @@ -153,6 +162,11 @@ ul.navigation li.arrow-r a { height: 15px; display: block; text-indent: -10000px; + 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; @@ -230,6 +244,9 @@ ul.navigation li a:hover, ul.navigation li.active a { -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; + -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 { @@ -264,6 +281,9 @@ ul.navigation li a:hover, ul.navigation li.active a { border-width: 1px 0px; border-style: solid none; border-color: #FFFFFF; + border-width: 1px 0px; + border-style: solid none; + border-color: #FFFFFF; } #add_towish a:hover { text-decoration: none; @@ -302,6 +322,9 @@ ul.navigation li a:hover, ul.navigation li.active a { border-width: 1px 0px; border-style: solid none; border-color: #FFFFFF; + border-width: 1px 0px; + border-style: solid none; + border-color: #FFFFFF; } #moreinfo a:hover { text-decoration: none; @@ -421,6 +444,8 @@ a.readon span { padding: 0 5px 0 20px; height: 36px; line-height: 36px; + height: 36px; + line-height: 36px; display: block; } a { @@ -462,6 +487,13 @@ a { font-weight: bold; font-size: 13px; letter-spacing: -0.05em; + 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; @@ -472,6 +504,13 @@ a { font-weight: bold; font-size: 13px; letter-spacing: -0.05em; + 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; @@ -518,6 +557,8 @@ a { background: url("/static/images/bg.png") -645px -180px; height: 36px; line-height: 36px; + height: 36px; + line-height: 36px; float: left; color: #6994a3; } @@ -551,6 +592,9 @@ a { -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 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; @@ -617,6 +661,20 @@ div.content-block-content .cols3 .column { margin-right: auto; padding: 5px 15px; } +.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; +} .block-inner { padding-right: 10px; } @@ -682,6 +740,9 @@ span.rounded { -moz-border-radius: 7px 7px 7px 7px; -webkit-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; + -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; @@ -693,17 +754,23 @@ span.rounded > span { -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; + -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; + 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; + 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; + background: #bacfd6 url("/static/images/header-button-grey.png") left bottom repeat-x; } div.check-list { float: left; @@ -731,6 +798,8 @@ a.my-setting { border-radius: 7px; height: 50px; line-height: 50px; + height: 50px; + line-height: 50px; display: block; padding: 0 0 0 10px; font-size: 20px; @@ -739,7 +808,7 @@ a.my-setting.active { background: #d6dde0 url("/static/images/header/collspane.png") 90% center no-repeat; } #tabs { - border-bottom: 4px solid #8DC63F; + border-bottom: 4px solid #8dc63f; clear: both; float: left; margin-left: 10px; @@ -762,9 +831,13 @@ ul.tabs li { float: left; height: 46px; line-height: 46px; + height: 46px; + line-height: 46px; margin-right: 10px; } ul.tabs li a { + height: 46px; + line-height: 46px; height: 46px; line-height: 46px; display: block; @@ -785,7 +858,82 @@ ul.tabs li a:hover, ul.tabs li.active a { .book-list span.rounded > span a { text-transform: capitalize; } -.book_panel { +div.content-block-content { + padding-left: 10px; +} +.js-news-text { + float: left; + width: 70%; + font-size: 16px; + color: #3d4e53; + font-family: lucida grande; +} +.js-news-links { + float: right; + width: 30%; +} +.column-left .item { + margin: 0 10px 10px 0; +} +.column-center .item { + margin: 0 5px 10px 5px; +} +.column-right .item { + margin: 0 0 10px 10px; +} +.column .item { + border: 7px solid #edf3f4; + padding: 10px; +} +.book-image { + padding: 0 0 10px 0; +} +.book-info { + padding: 0 0 10px 0; + line-height: 125%; + position: relative; +} +.book-info span.book-new { + background: url(/static/images/images/icon-new.png) 0 0 no-repeat; + width: 38px; + height: 36px; + display: block; + position: absolute; + right: 10px; + top: 0; +} +.book-name { + color: #3d4e53; + font-weight: bold; +} +.book-author { + color: #6994a3; +} +.book-status { + margin: 0 -10px; + border-top: 1px solid #edf3f4; + padding: 15px 10px 0 10px; + position: relative; +} +.book-status span.unglue { + font-style: italic; +} +.book-status span.status { + position: absolute; + right: 10px; + bottom: -5px; + width: 37px; + height: 25px; + display: block; +} +/* Do I even still need this? +.book-status span.percent99{ background:url(../images/images/icon-book1.png) 0 0 no-repeat;} +.book-status span.percent60{ background:url(../images/images/icon-book2.png) 0 0 no-repeat;} +.book-status span.percent22{ background:url(../images/images/icon-book3.png) 0 0 no-repeat;} +.book-status span.percent7{ background:url(../images/images/icon-book4.png) 0 0 no-repeat;} +.book-status span.percent62{ background:url(../images/images/icon-book5.png) 0 0 no-repeat;} +.book-status span.percent21{ background:url(../images/images/icon-book6.png) 0 0 no-repeat;} +*/.book_panel { margin: 20px auto; padding: 0 5px 5px 5px; height: 300px; @@ -850,6 +998,9 @@ ul.tabs li a:hover, ul.tabs li.active a { -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; + -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 { @@ -884,6 +1035,9 @@ ul.tabs li a:hover, ul.tabs li.active a { border-width: 1px 0px; border-style: solid none; border-color: #FFFFFF; + border-width: 1px 0px; + border-style: solid none; + border-color: #FFFFFF; } #add_towish a:hover { text-decoration: none; @@ -922,6 +1076,9 @@ ul.tabs li a:hover, ul.tabs li.active a { border-width: 1px 0px; border-style: solid none; border-color: #FFFFFF; + border-width: 1px 0px; + border-style: solid none; + border-color: #FFFFFF; } #moreinfo a:hover { text-decoration: none; diff --git a/static/less/supporter_layout.css b/static/less/supporter_layout.css index a43baffe..78724e97 100644 --- a/static/less/supporter_layout.css +++ b/static/less/supporter_layout.css @@ -1,64 +1,187 @@ -@charset "utf-8"; -/* CSS Document */ -body { - background: url(../images/bg-body.png) 0 0 repeat-x; - padding: 0 0 20px 0; - margin: 0; - font-size: 12px; - font-family: Arial, Helvetica, sans-serif; - color: #3d4e53; -} -img { - border: none; -} -.js-main { - width: 960px; - margin: 0 auto; - clear: both; - padding: 0; -} -#js-header { - height: 90px; -} -.js-logo { - float: left; - padding-top: 20px; -} -.js-topmenu { - float: right; - padding-top: 25px; -} -.js-topmenu ul li { - float: left; - padding: 0 10px; -} -.js-topmenu ul li a { +.header-text { height: 36px; line-height: 36px; display: block; - color: #fff; text-decoration: none; font-weight: bold; font-size: 13px; - letter-spacing: 1px; + letter-spacing: -0.05em; +} +.panelborders { + border-width: 1px 0px; + border-style: solid none; + border-color: #FFFFFF; +} +.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; } -.js-topmenu ul li.last a { - background: url(../images/bg.png) right top no-repeat; -} -.js-topmenu ul li.last a span { - background: url(../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: 60%; +div.content-block-content { + padding-left: 10px; } .js-news-text { float: left; @@ -71,122 +194,14 @@ img { float: right; width: 30%; } -.js-search { - float: right; - width: 30%; -} -.js-search-inner { - float: right; -} -.js-search .inputbox { - padding: 0 0 0 15px; - margin: 0; - border: none; - background: url(../images/bg.png) -645px -180px; - height: 36px; - line-height: 36px; - float: left; - color: #6994a3; -} -.js-search .button { - background: url(../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-leftcol { - float: left; - width: 235px; -} -h3.jsmod-title { - background: url(../images/bg.png) 0 0 no-repeat; - padding: 0; - margin: 0; - height: 73px; -} -h3.jsmod-title span { - background: url(../images/icon-h3.png) 90% center no-repeat; - font-size: 17px; - color: #fff; - padding: 26px 40px 27px 20px; - display: block; -} -#js-leftcol .jsmod-content { - border: 1px solid #edf3f4; - margin-left: 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-leftcol a { - font-weight: normal; -} -#js-leftcol a:hover { - text-decoration: underline; -} -#js-maincol-fr { - float: right; - width: 725px; -} -div.content-block { - overflow: hidden; - background: url(../images/bg.png) 100% -223px no-repeat; - padding: 0 0 0 7px; -} -h2.content-heading { - padding: 15px; - margin: 0; - font-size: 19px; - font-weight: normal; - color: #3d4e53; - float: left; - width: 70%; -} -h2.content-heading span { - font-style: italic; -} -.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; -} -div.content-block-content .cols3 .column { - width: 33.33%; - float: left; -} .column-left .item { - margin: 0 10px 10px 0; + margin: 0 10px 10px 0; } .column-center .item { - margin: 0 5px 10px 5px; + margin: 0 5px 10px 5px; } .column-right .item { - margin: 0 0 10px 10px; + margin: 0 0 10px 10px; } .column .item { border: 7px solid #edf3f4; @@ -201,7 +216,7 @@ div.content-block-content .cols3 .column { position: relative; } .book-info span.book-new { - background: url(../images/images/icon-new.png) 0 0 no-repeat; + background: url(/static/images/images/icon-new.png) 0 0 no-repeat; width: 38px; height: 36px; display: block; @@ -233,49 +248,11 @@ div.content-block-content .cols3 .column { height: 25px; display: block; } -.book-status span.percent99 { - background: url(../images/images/icon-book1.png) 0 0 no-repeat; -} -.book-status span.percent60 { - background: url(../images/images/icon-book2.png) 0 0 no-repeat; -} -.book-status span.percent22 { - background: url(../images/images/icon-book3.png) 0 0 no-repeat; -} -.book-status span.percent7 { - background: url(../images/images/icon-book4.png) 0 0 no-repeat; -} -.book-status span.percent62 { - background: url(../images/images/icon-book5.png) 0 0 no-repeat; -} -.book-status span.percent21 { - background: url(../images/images/icon-book6.png) 0 0 no-repeat; -} -ul.menu { - list-style: none; - padding: 0; - margin: 0; -} -a.readon { - background: url(../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(../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; -} +/* Do I even still need this? +.book-status span.percent99{ background:url(../images/images/icon-book1.png) 0 0 no-repeat;} +.book-status span.percent60{ background:url(../images/images/icon-book2.png) 0 0 no-repeat;} +.book-status span.percent22{ background:url(../images/images/icon-book3.png) 0 0 no-repeat;} +.book-status span.percent7{ background:url(../images/images/icon-book4.png) 0 0 no-repeat;} +.book-status span.percent62{ background:url(../images/images/icon-book5.png) 0 0 no-repeat;} +.book-status span.percent21{ background:url(../images/images/icon-book6.png) 0 0 no-repeat;} +*/ \ No newline at end of file diff --git a/static/less/supporter_layout.less b/static/less/supporter_layout.less index aea7f350..e2307e74 100644 --- a/static/less/supporter_layout.less +++ b/static/less/supporter_layout.less @@ -1,3 +1,5 @@ +@import "variables.less"; + .block-inner { padding-right:10px; } @@ -128,7 +130,7 @@ div.profile-save { } input.profile-save { - background: url("/static/images/header/save-setting.png") 0 0 no-repeat; + background: url("@{image-base}header/save-setting.png") 0 0 no-repeat; width: 116px; height: 42px; display: block; @@ -150,7 +152,7 @@ a.my-setting.active { } #tabs{ - border-bottom: 4px solid #8DC63F; + border-bottom: 4px solid @green; clear: both; float: left; margin-left: 10px; @@ -210,6 +212,91 @@ div.content-block-content { padding-left: 10px; } -#tabs { - margin-left: 10px; -} \ No newline at end of file +.js-news-text { + float:left; + width:70%; + font-size:16px; + color:@text-blue; + font-family:lucida grande; +} + +.js-news-links { + float:right; + width:30%; +} + +.column-left .item { + margin:0 10px 10px 0; +} + +.column-center .item { + margin:0 5px 10px 5px; +} + +.column-right .item { + margin:0 0 10px 10px; +} + +.column .item { + border:7px solid @pale-blue; + padding:10px; +} + +.book-image { + padding:0 0 10px 0; +} + +.book-info { + padding:0 0 10px 0; + line-height:125%; + position:relative; + + span.book-new { + background:url(/static/images/images/icon-new.png) 0 0 no-repeat; + width:38px; + height:36px; + display:block; + position:absolute; + right:10px; + top:0; + } +} + +.book-name { + color:@text-blue; + font-weight:bold; +} + +.book-author { + color:@medium-blue; +} + +.book-status { + margin:0 -10px; + border-top:1px solid @pale-blue; + padding:15px 10px 0 10px; + position:relative; + + span.unglue { + font-style:italic; + } + + span.status { + position:absolute; + right:10px; + bottom:-5px; + width:37px; + height:25px; + display:block; + } + +} + +/* Do I even still need this? +.book-status span.percent99{ background:url(../images/images/icon-book1.png) 0 0 no-repeat;} +.book-status span.percent60{ background:url(../images/images/icon-book2.png) 0 0 no-repeat;} +.book-status span.percent22{ background:url(../images/images/icon-book3.png) 0 0 no-repeat;} +.book-status span.percent7{ background:url(../images/images/icon-book4.png) 0 0 no-repeat;} +.book-status span.percent62{ background:url(../images/images/icon-book5.png) 0 0 no-repeat;} +.book-status span.percent21{ background:url(../images/images/icon-book6.png) 0 0 no-repeat;} +*/ \ No newline at end of file From cba17474c9920eba2d635e2952ca8a0aaee109fe Mon Sep 17 00:00:00 2001 From: Andromeda Yelton Date: Sun, 6 Nov 2011 16:16:23 -0500 Subject: [PATCH 2/2] refactoring CSS. now sitewide.css is part of base.html and other files should be applied as appropriate. --- frontend/templates/campaign.html | 2 +- frontend/templates/supporter_panel.html | 4 + static/css/book_list.css | 244 +++-- static/css/book_panel.css | 431 ++++++++ static/css/campaign.css | 302 ++++-- static/css/registration.css | 14 + static/css/sitewide.css | 252 +++++ static/css/supporter_layout.css | 373 +++++-- static/less/book_list.css | 63 +- static/less/book_list.less | 55 +- static/less/book_panel.css | 354 ++++-- static/less/book_panel.less | 626 +++++++---- static/less/campaign.css | 227 ++++ static/less/campaign.less | 284 ++++- static/less/layout.css | 1305 +++++++++++++++++++---- static/less/sitewide.less | 2 + static/supporter_integration_test.html | 6 +- 17 files changed, 3718 insertions(+), 826 deletions(-) create mode 100644 static/css/book_panel.css create mode 100644 static/css/registration.css create mode 100644 static/css/sitewide.css create mode 100644 static/less/campaign.css diff --git a/frontend/templates/campaign.html b/frontend/templates/campaign.html index b2a7876e..e049212f 100644 --- a/frontend/templates/campaign.html +++ b/frontend/templates/campaign.html @@ -57,7 +57,7 @@ Campaign for WORK TITLE GOES HERE {% block content %}
-
+
Campaign in Progress:
${{ work.last_campaign.current_total }}/${{ work.last_campaign.target }} diff --git a/frontend/templates/supporter_panel.html b/frontend/templates/supporter_panel.html index 0f3ce397..cd9b1181 100644 --- a/frontend/templates/supporter_panel.html +++ b/frontend/templates/supporter_panel.html @@ -3,6 +3,10 @@ {% block title %} — {{ supporter.username }}{% endblock %} {% block extra_head %} + + + + diff --git a/static/css/book_list.css b/static/css/book_list.css index 532d9397..b2f26c20 100755 --- a/static/css/book_list.css +++ b/static/css/book_list.css @@ -1,60 +1,184 @@ -div.book-list{ - clear:both; - display:block; - vertical-align: middle; - height:43px; - line-height:43px; - margin:0 5px 0px 0; - padding:7px 0; - overflow:hidden; -} - -div.book-list.row1{ background:#f6f9f9;} -div.book-list.row2{ background:#fff;} - -div.book-list div.book-thumb, -div.book-list div.book-name, -div.book-list div.add-wishlist, -div.book-list div.remove-wishlist, -div.book-list div.create-account, -div.book-list div.booklist-status, -div.book-list div.unglue-this{ float: left;} - -div.book-list div.book-thumb{ margin-right:5px;} -div.book-list div.book-name{ width:260px; margin-right:10px; background:url(../images/booklist/booklist-vline.png) right center no-repeat;} -div.book-list div.book-name span{ display:block; line-height:normal; height:43px; line-height:43px;} -div.book-list div.add-wishlist, div.remove-wishlist, div.create-account span{ font-weight:normal; color:#3d4e53; text-transform: none; background:url(../images/booklist/add-wishlist.png) left center no-repeat; padding-left:20px; cursor: pointer; margin-right: 10px;} - -div.book-list div.booklist-status{ margin-right:7px;} -span.booklist-status-text{ float:left; display:block; padding-right:5px;} - -div.unglue-this.processing .unglue-this-inner1{ background:url(../images/booklist/bg.png) 0 0 no-repeat; height:42px;} -div.unglue-this.processing .unglue-this-inner2{ background:url(../images/booklist/bg.png) 100% -42px no-repeat; margin-left:25px; height:42px; padding-right:10px;} -div.unglue-this a{ text-transform:uppercase; color:#3d4e53; font-size:11px; font-weight:bold;} - -div.unglue-this.complete .unglue-this-inner1{ background:url(../images/booklist/bg.png) 0 -84px no-repeat; height:42px;} -div.unglue-this.complete .unglue-this-inner2{ background:url(../images/booklist/bg.png) 100% -126px no-repeat; margin-left:29px; height:42px; padding-right:10px;} -div.unglue-this.complete a{ color:#fff;} - -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 a:hover, -ul.navigation li.active a{ color:#8ac3d7; text-decoration:underline;} - -ul.navigation li.arrow-l a{ background:url(../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(../images/booklist/bg.png) -1px -185px no-repeat;width:10px; height:15px; display:block; text-indent:-10000px;} - -.unglue-button { display: block; border: 0;} - -.book-thumb img { - height: 50px; -} - -.on-wishlist { - font-weight: bold; -} +.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; +} diff --git a/static/css/book_panel.css b/static/css/book_panel.css new file mode 100644 index 00000000..03c376a8 --- /dev/null +++ b/static/css/book_panel.css @@ -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; +} diff --git a/static/css/campaign.css b/static/css/campaign.css index 4281c08f..09ce6d21 100755 --- a/static/css/campaign.css +++ b/static/css/campaign.css @@ -1,71 +1,231 @@ -#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;} \ No newline at end of file +.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; +} +#js-page-wrap { + overflow: hidden; +} +#main-container { + margin-top: 20px; +} +#js-leftcol .jsmodule { + margin-bottom: 10px; +} +#js-leftcol .jsmodule.rounded { + background: #edf3f4; + -moz-border-radius: 20px 20px 20px 20px; + -webkit-border-radius: 20px 20px 20px 20px; + border-radius: 20px 20px 20px 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; + /* if we want to nix the explore bar, width should be 544ish */ + + 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; + -moz-border-radius: 7px 7px 0 0; + -webkit-border-radius: 7px 7px 0 0; + 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 h3.jsmod-title { + background: #a7c1ca; + -moz-border-radius: 10px 10px 10px 10px; + -webkit-border-radius: 10px 10px 10px 10px; + border-radius: 10px 10px 10px 10px; + padding: 10px; + 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; +} +.js-rightcol-pad { + border: 1px solid #d6dde0; + -moz-border-radius: 10px 10px 10px 10px; + -webkit-border-radius: 10px 10px 10px 10px; + border-radius: 10px 10px 10px 10px; + padding: 10px; +} +#js-maincol { + float: left; + /* If we want to nuke the explore column, width should be 705ish */ + + width: 470px; + margin: 0 10px; +} +#js-maincol div.content-block { + background: none; + padding: 0; +} +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 li span { + display: block; +} +ul.support li span .menu-item-price { + font-size: 18px; +} +/* differs from sitewide.css. should it? */ +a { + color: #3d4e53; + font-size: 12px; +} diff --git a/static/css/registration.css b/static/css/registration.css new file mode 100644 index 00000000..9e71d3ed --- /dev/null +++ b/static/css/registration.css @@ -0,0 +1,14 @@ +.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; +} diff --git a/static/css/sitewide.css b/static/css/sitewide.css new file mode 100644 index 00000000..681858d0 --- /dev/null +++ b/static/css/sitewide.css @@ -0,0 +1,252 @@ +.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; +} +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; +} diff --git a/static/css/supporter_layout.css b/static/css/supporter_layout.css index cafa3ca2..78724e97 100644 --- a/static/css/supporter_layout.css +++ b/static/css/supporter_layout.css @@ -1,115 +1,258 @@ -@charset "utf-8"; -/* CSS Document */ - -body{ - background:url(../images/bg-body.png) 0 0 repeat-x; - padding:0 0 20px 0; - margin:0; - font-size:12px; - font-family: Arial, Helvetica, sans-serif; - color:#3d4e53; -} -img{ border:none;} -.js-main{ - width:960px; - margin:0 auto; - clear:both; - padding:0; -} - -#js-header{ height:90px;} - -.js-logo{ float:left; padding-top:20px;} -.js-topmenu{ float:right; padding-top:25px;} -.js-topmenu ul li{ float:left; padding:0 10px;} -.js-topmenu ul li a{ height:36px; line-height:36px; display:block; color:#fff; text-decoration:none; font-weight:bold; font-size:13px; letter-spacing:1px; text-transform:capitalize;} -.js-topmenu ul li.last a{ background: url(../images/bg.png) right top no-repeat;} -.js-topmenu ul li.last a span{ background:url(../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:60%;} -.js-news-text{ float:left; width:70%; font-size:16px; color:#3d4e53; font-family:lucida grande;} -.js-news-links { float:right; width:30%;} - -.js-search{ float:right; width:30%;} -.js-search-inner{ float:right;} -.js-search .inputbox{ padding:0 0 0 15px; margin:0; border:none; background:url(../images/bg.png) -645px -180px; height:36px; line-height:36px; float: left; color:#6994a3;} -.js-search .button{ background:url(../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-leftcol{ float:left; width:235px;} -h3.jsmod-title{ background:url(../images/bg.png) 0 0 no-repeat; padding:0; margin:0; height:73px;} -h3.jsmod-title span{ background:url(../images/icon-h3.png) 90% center no-repeat; font-size:17px; color:#fff; - padding:26px 40px 27px 20px; - display:block; -} - -#js-leftcol .jsmod-content{ border:1px solid #edf3f4; margin-left: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-leftcol a{ font-weight:normal;} -#js-leftcol a:hover{ text-decoration:underline;} - - -#js-maincol-fr{ float:right; width:725px;} - -div.content-block{ - overflow:hidden; - background:url(../images/bg.png) 100% -223px no-repeat; - padding:0 0 0 7px; -} - -h2.content-heading{ - padding:15px; margin:0; - font-size:19px; - font-weight:normal; - color:#3d4e53; - float:left; width:70%; -} -h2.content-heading span{ font-style:italic;} -.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;} -div.content-block-content .cols3 .column{ width:33.33%; float:left;} - -.column-left .item{ margin:0 10px 10px 0;} -.column-center .item{ margin:0 5px 10px 5px;} -.column-right .item{ margin:0 0 10px 10px;} -.column .item{ border:7px solid #edf3f4; padding:10px;} -.book-image{ padding:0 0 10px 0;} -.book-info{ padding:0 0 10px 0; line-height:125%; position:relative;} -.book-info span.book-new{ background:url(../images/images/icon-new.png) 0 0 no-repeat; width:38px; height:36px; display:block; position:absolute; - right:10px; top:0;} -.book-name{ color:#3d4e53; font-weight:bold;} -.book-author{ color:#6994a3;} - -.book-status{ margin:0 -10px; border-top:1px solid #edf3f4; padding:15px 10px 0 10px; position:relative;} -.book-status span.unglue{ font-style:italic;} -.book-status span.status{ position:absolute; right:10px; bottom:-5px; width:37px; height:25px; display:block;} -.book-status span.percent99{ background:url(../images/images/icon-book1.png) 0 0 no-repeat;} -.book-status span.percent60{ background:url(../images/images/icon-book2.png) 0 0 no-repeat;} -.book-status span.percent22{ background:url(../images/images/icon-book3.png) 0 0 no-repeat;} -.book-status span.percent7{ background:url(../images/images/icon-book4.png) 0 0 no-repeat;} -.book-status span.percent62{ background:url(../images/images/icon-book5.png) 0 0 no-repeat;} -.book-status span.percent21{ background:url(../images/images/icon-book6.png) 0 0 no-repeat;} - -ul.menu{ - list-style:none; - padding:0; - margin:0; -} -a.readon{ background:url(../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(../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; -} \ No newline at end of file +.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; +} +.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; +} +div.content-block-content { + padding-left: 10px; +} +.js-news-text { + float: left; + width: 70%; + font-size: 16px; + color: #3d4e53; + font-family: lucida grande; +} +.js-news-links { + float: right; + width: 30%; +} +.column-left .item { + margin: 0 10px 10px 0; +} +.column-center .item { + margin: 0 5px 10px 5px; +} +.column-right .item { + margin: 0 0 10px 10px; +} +.column .item { + border: 7px solid #edf3f4; + padding: 10px; +} +.book-image { + padding: 0 0 10px 0; +} +.book-info { + padding: 0 0 10px 0; + line-height: 125%; + position: relative; +} +.book-info span.book-new { + background: url(/static/images/images/icon-new.png) 0 0 no-repeat; + width: 38px; + height: 36px; + display: block; + position: absolute; + right: 10px; + top: 0; +} +.book-name { + color: #3d4e53; + font-weight: bold; +} +.book-author { + color: #6994a3; +} +.book-status { + margin: 0 -10px; + border-top: 1px solid #edf3f4; + padding: 15px 10px 0 10px; + position: relative; +} +.book-status span.unglue { + font-style: italic; +} +.book-status span.status { + position: absolute; + right: 10px; + bottom: -5px; + width: 37px; + height: 25px; + display: block; +} +/* Do I even still need this? +.book-status span.percent99{ background:url(../images/images/icon-book1.png) 0 0 no-repeat;} +.book-status span.percent60{ background:url(../images/images/icon-book2.png) 0 0 no-repeat;} +.book-status span.percent22{ background:url(../images/images/icon-book3.png) 0 0 no-repeat;} +.book-status span.percent7{ background:url(../images/images/icon-book4.png) 0 0 no-repeat;} +.book-status span.percent62{ background:url(../images/images/icon-book5.png) 0 0 no-repeat;} +.book-status span.percent21{ background:url(../images/images/icon-book6.png) 0 0 no-repeat;} +*/ \ No newline at end of file diff --git a/static/less/book_list.css b/static/less/book_list.css index c6284528..b2f26c20 100644 --- a/static/less/book_list.css +++ b/static/less/book_list.css @@ -5,71 +5,75 @@ text-decoration: none; font-weight: bold; font-size: 13px; - letter-spacing: 1px; - text-transform: capitalize; + letter-spacing: -0.05em; } .panelborders { border-width: 1px 0px; border-style: solid none; border-color: #FFFFFF; } -div.book-list { +div.book-list.listview { clear: both; display: block; vertical-align: middle; height: 43px; line-height: 43px; - margin: 0 5px 0px 0; + margin: 0 5px 0 0; padding: 7px 0; - overflow: hidden; } -div.book-list.row1 { +div.book-list.listview.row1 { background: #f6f9f9; } -div.book-list.row2 { +div.book-list.listview.row2 { background: #fff; } -div.book-list div.unglue-this { +div.book-list.listview div.unglue-this { float: left; } -div.book-list div.book-thumb { +div.book-list.listview div.book-thumb { margin-right: 5px; float: left; } -div.book-list div.book-name { +div.book-list.listview div.book-name { width: 260px; margin-right: 10px; - background: url("/static/images/booklist/booklist-vline.png") right center no-repeat; + background: url("../images/booklist/booklist-vline.png") right center no-repeat; float: left; } -div.book-list div.book-name span { +div.book-list.listview 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 { +div.book-list.listview div.add-wishlist, div.book-list.listview div.remove-wishlist { margin-right: 10px; padding-right: 10px; - background: url("/static/images/booklist/booklist-vline.png") right center no-repeat; - cursor: pointer; + background: url("../images/booklist/booklist-vline.png") right center no-repeat; float: left; } -div.book-list div.add-wishlist span, div.book-list div.remove-wishlist span { +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("/static/images/booklist/add-wishlist.png") left center no-repeat; + background: url("../images/booklist/add-wishlist.png") left center no-repeat; padding-left: 20px; } -div.book-list div.booklist-status { +div.book-list.listview div.booklist-status { margin-right: 7px; float: left; } -span.booklist-status-text { +.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; @@ -89,6 +93,7 @@ div.unglue-this.complete .unglue-this-inner2 { } 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; @@ -156,6 +161,24 @@ ul.navigation li a:hover, ul.navigation li.active a { display: block; border: 0; } -.book-thumb img { +.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; } diff --git a/static/less/book_list.less b/static/less/book_list.less index f11950b1..28607420 100755 --- a/static/less/book_list.less +++ b/static/less/book_list.less @@ -1,11 +1,13 @@ -div.book-list{ +@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; + // overflow:hidden; &.row1 { background:#f6f9f9; @@ -26,7 +28,7 @@ div.book-list{ &.book-name { width:260px; margin-right:10px; - background:url("@{image-base}booklist/booklist-vline.png") right center no-repeat; + background:url("../images/booklist/booklist-vline.png") right center no-repeat; float: left; span { @@ -38,14 +40,14 @@ div.book-list{ &.add-wishlist, &.remove-wishlist { margin-right: 10px; padding-right: 10px; - background:url("@{image-base}booklist/booklist-vline.png") right center no-repeat; + 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("@{image-base}booklist/add-wishlist.png") left center no-repeat; + background:url("../images/booklist/add-wishlist.png") left center no-repeat; padding-left:20px; } @@ -57,11 +59,21 @@ div.book-list{ } } -span.booklist-status-text { - float:left; - display:block; - padding-right:5px; - text-transform:capitalize; +.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 { @@ -162,6 +174,27 @@ ul.navigation li a:hover, ul.navigation li.active a { border: 0; } -.book-thumb img { +.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; } diff --git a/static/less/book_panel.css b/static/less/book_panel.css index 5d087c9d..03c376a8 100644 --- a/static/less/book_panel.css +++ b/static/less/book_panel.css @@ -5,172 +5,360 @@ text-decoration: none; font-weight: bold; font-size: 13px; - letter-spacing: 1px; - text-transform: capitalize; + letter-spacing: -0.05em; } .panelborders { border-width: 1px 0px; border-style: solid none; border-color: #FFFFFF; } -.book_panel { - margin: 20px auto; - padding: 0px 5px 5px 5px; - height: 300px; +.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; + } + } +*/ + } -.book_panel a { - font-size: 12pt; - color: #73a334; - text-decoration: none; +.panelview.book-list:hover { + color: #3d4e53; } -.book_panel a:hover { - color: #8dc63f; - text-decoration: none; -} -.book_panel p { - margin: 0; -} -.book_panel img { +.panelview.book-list img { padding: 5px 0px; margin: 0px; } -.book_panel:hover { +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; } -.green { +.panelview.booklist-status { color: #8dc63f; text-align: left; } -.book_panel_back { - margin: 0px auto; - padding: 10px; - height: 295px; +.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; } -.book_panel_back a { - font-size: 12px; - font-weight: normal; -} .unglued_white { + font-size: 12px; margin: 0px auto; margin-bottom: 5px; padding: 10px 0px; } -.status { - color: #8dc63f; - text-align: left; -} .read_itbutton { width: 118px; height: 35px; padding: 0px 0px; background: #FFFFFF; margin: 0px; - border-radius: 4px 4px 4px 4px; -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-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; - text-decoration: none; - font-weight: bold; - text-transform: uppercase; } .read_itbutton a:hover { text-decoration: none; } -#add_towish { - width: 130px; +.add_towish { + width: 125px; height: 30px; padding: 0px 0px; - margin: 10px auto; + margin: 15px auto; } -#add_towish a { +.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; + background-repeat: no-repeat; + background-position: left center; font-weight: bold; - color: #FFFFFF; text-decoration: none; text-transform: uppercase; - border-width: 1px 0px; - border-style: solid none; - border-color: #FFFFFF; + 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 { +.add_towish a:hover { text-decoration: none; color: #3d4e53; } -#white_text { +.white_text { width: 130px; height: 40px; padding: 17px 0px; margin: 0px; } -#white_text a { +.white_text a { color: #FFFFFF; text-decoration: none; } -#white_text a:hover { - color: #3d4e53; +.white_text a:hover { text-decoration: none; + color: #3d4e53; } -#moreinfo { +/*more info*/ +.moreinfo { width: 130px; height: 30px; padding: 0px; margin: 15px 0 0; } -#moreinfo a { +.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; + background-repeat: no-repeat; + background-position: left center; 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; + 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 { +.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 { +.graypanel a { + text-decoration: none; color: #3d4e53; +} +.graypanel a:hover { + color: #8dc63f; text-decoration: none; } -.read { +.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; @@ -180,7 +368,7 @@ float: left; } .read img { - padding: 5px; + padding: 5px 0px; margin: 0px; float: left; } @@ -194,18 +382,46 @@ p.right_add { padding: 10px 10px 0 0; width: 24px; } -/* slideout hover state */ -.book_panel_interior { +/**/ +.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; } -.book_panel_interior img { +.panelview.book-thumb img { z-index: 100; + width: 120px; + height: 182px; } -.book_panel_interior span { +.panelview.book-thumb span { position: absolute; bottom: 0; left: -10px; diff --git a/static/less/book_panel.less b/static/less/book_panel.less index 3e87fbf7..2a0734e2 100644 --- a/static/less/book_panel.less +++ b/static/less/book_panel.less @@ -1,229 +1,397 @@ -.book_panel { - margin: 20px auto; - padding: 0 5px 5px 5px; - height: 300px; - width: 120px; - line-height:16px; - background-color: #ffffff; - color: @text-blue; - border: 5px solid @pale-blue; - - a { - font-size: 12pt; - color: @dark-green; - text-decoration: none; - - &:hover { - color: @green; - text-decoration: none; - } - } - - p { - margin: 0; - } - - img { - padding:5px 0; - margin:0; - } - - &:hover { - color: @text-blue; - } -} - -.green { - color: @green; - text-align: left; -} - -.book_panel_back { - margin: 0 auto; - padding: 10px; - height: 295px; - width: 120px; - line-height:16px; - background-color: @green; - color: #ffffff; - position:relative; - - a { - font-size: 12px; - font-weight: normal; - } -} - -.unglued_white { - margin: 0 auto; - margin-bottom:5px; - padding: 10px 0; -} - -.status { - color: @green; - text-align: left; -} - -.read_itbutton { - width:118px; - height:35px; - padding:0 0; - background:#FFFFFF; - margin:0; - .border-radius(4px, 4px, 4px, 4px); - border: 1px solid #81bb38; -} - -.read_itbutton a { - line-height:40px; - font-size:11px; - background: url("@{image-base}book-panel/book_icon.png") no-repeat left center; - background-position: 10px center; - padding:0 0 0 30px; - color:@dark-green; - text-decoration:none; - font-weight:bold; - text-transform: uppercase; - - &:hover { - text-decoration:none; - } -} - -#add_towish { - width:130px; - height:30px; - padding:0 0; - margin:10px auto; - - a { - line-height:40px; - font-size:11px; - background-image: url("@{image-base}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; - .panelborders; - - &:hover { - text-decoration:none; - color:@text-blue; - } - } - -} - -#white_text { - width:130px; - height:40px; - padding:17px 0; - margin:0; - - a { - color:#FFFFFF; - text-decoration:none; - - &:hover { - color:@text-blue; - text-decoration:none; - } - } -} - -#moreinfo { - width:130px; - height:30px; - padding:0; - margin:15px 0 0; - - a { - line-height:40px; - font-size:11px; - background-image: url("@{image-base}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; - .panelborders; - - &:hover { - text-decoration:none; - color:@text-blue; - } - } - -} - -.green { - color: @green; - text-align: left; -} - -#graypanel a { - color: @text-blue; - text-decoration: none; -} - -.read { - margin: 15px auto; - padding: 0; - width: 140px; - color:@green; - height:40px; - line-height:25px; - float:left; - - p { - margin: 0; - padding: 10px 3px; - width: 50px; - font-size:10pt; - float:left; - } - - 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; -} +@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; + } diff --git a/static/less/campaign.css b/static/less/campaign.css new file mode 100644 index 00000000..72d500b5 --- /dev/null +++ b/static/less/campaign.css @@ -0,0 +1,227 @@ +.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; +} +#js-page-wrap { + overflow: hidden; +} +#main-container { + margin-top: 20px; +} +#js-leftcol .jsmodule { + margin-bottom: 10px; +} +#js-leftcol .jsmodule.rounded { + background: #edf3f4; + -moz-border-radius: 20px 20px 20px 20px; + -webkit-border-radius: 20px 20px 20px 20px; + border-radius: 20px 20px 20px 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; + -moz-border-radius: 7px 7px 0 0; + -webkit-border-radius: 7px 7px 0 0; + 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 h3.jsmod-title { + background: #a7c1ca; + -moz-border-radius: 10px 10px 10px 10px; + -webkit-border-radius: 10px 10px 10px 10px; + border-radius: 10px 10px 10px 10px; + padding: 10px; + 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; +} +.js-rightcol-pad { + border: 1px solid #d6dde0; + -moz-border-radius: 10px 10px 10px 10px; + -webkit-border-radius: 10px 10px 10px 10px; + border-radius: 10px 10px 10px 10px; + padding: 10px; +} +#js-maincol { + float: left; + width: 470px; + margin: 0 10px; +} +#js-maincol div.content-block { + background: none; + padding: 0; +} +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 li span { + display: block; +} +ul.support li span .menu-item-price { + font-size: 18px; +} +/* differs from sitewide.css. should it? */ +a { + color: #3d4e53; + font-size: 12px; +} diff --git a/static/less/campaign.less b/static/less/campaign.less index 4281c08f..6ba02869 100644 --- a/static/less/campaign.less +++ b/static/less/campaign.less @@ -1,71 +1,251 @@ -#js-page-wrap{ overflow:hidden;} -#main-container{ margin-top:20px;} +@import "variables.less"; -#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;} +#js-page-wrap { + overflow:hidden; +} -.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;} +#main-container { + margin-top:20px; +} -.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; } +#js-leftcol .jsmodule { + margin-bottom:10px; + + &.rounded { + background:@pale-blue; + .border-radius(20px, 20px, 20px, 20px); + + .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; + + img { + padding:5px; + border: solid 5px @pale-blue; + } +} + +.book-detail-info { + float:left; + /* if we want to nix the explore bar, width should be 544ish */ + width:309px; + + h2.book-name, h3.book-author, h3.book-year { + padding:0; + margin:0; + line-height:normal + } + + h2.book-name { + font-size:18px; + text-transform:capitalize; + font-weight:bold; + color:@text-blue; + } + + h3.book-author, h3.book-year { + font-size:12px; + font-weight:normal; + color:@medium-blue; + } + + > div { + width:100%; + clear:both; + display:block; + overflow:hidden; + border-top:1px solid @pale-blue; + padding:10px 0; + } + + .find-book { + margin-top:15px; + + label { + float:left; + line-height:31px; + } + } + + .find-link { + float:right; + } + + .pledged-info { + padding:0; + } + + .pledged-group { + padding:10px 40px 10px 0; + float:left; + } + + .status { + float: right; + padding-top: 4px; + } + + .btn_support a { + background:url("@{image-base}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; + border-bottom: 4px solid @medium-blue; clear: both; float: left; margin-top: 10px; width: 100%; + + ul.book-list-view { + margin-bottom:4px !important; + } } -#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;} +#tabs-1, #tabs-2, #tabs-3 { + margin-left:10px; +} -#js-rightcol{ float:right; width:235px; } -.js-rightcol-pad{border:1px solid #d6dde0; border-radius:10px; padding:10px;} +#tabs-2, #tabs-3, #tabs-4 { + display:none; +} -#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;} +ul.tabs { + float:left; + padding:0; + margin:0; + list-style:none; + + li { + float: left; + .height(46px); + margin-right:2px; + margin-bottom:1px; + + a { + .height(46px); + display:block; + text-align:center; + padding:0 10px; + min-width:80px; + .border-radius(7px, 7px, 0, 0); + background:#d6dde0; + color:@text-blue; + } + + a:hover, &.active a { + background:@medium-blue; + color:#fff; + } + } + +} + +#js-rightcol { + float:right; + width:235px; + + h3.jsmod-title { + background:#a7c1ca; + .border-radius(10px, 10px, 10px, 10px); + padding:10px; + height:auto; + font-style:normal; + font-size:14px; + margin:0 0 10px 0; + + span { + padding:0; + color:#fff; + font-style:normal; + } + } + + .jsmodule { + margin-bottom:10px; + } + + .jsmod-content { + padding-left:10px; + } +} + +.js-rightcol-pad { + border:1px solid #d6dde0; + .border-radius(10px, 10px, 10px, 10px); + padding:10px; +} + +#js-maincol { + float:left; + /* If we want to nuke the explore column, width should be 705ish */ + width:470px; + margin:0 10px; + + 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); -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;} + &.facebook { + background:url("@{image-base}icons/facebook.png") left center no-repeat; + } + &.twitter { + background:url("@{image-base}icons/twitter.png") left center no-repeat; + } + + &.email { + background:url("@{image-base}icons/email.png") left center no-repeat; + } +} + +ul.support li { + border-bottom:1px solid #d6dde0; + padding:10px 15px 10px 0; + background:url("@{image-base}icons/r-arrow.png") right center no-repeat; + + span { + display:block; + + .menu-item-price { + font-size:18px; + } + } +} + +/* differs from sitewide.css. should it? */ a{ color:#3d4e53; font-size:12px;} \ No newline at end of file diff --git a/static/less/layout.css b/static/less/layout.css index 510e84ab..d2705a7b 100644 --- a/static/less/layout.css +++ b/static/less/layout.css @@ -18,7 +18,21 @@ Changes made directly to layout.css will be overwritten. border-style: solid none; border-color: #FFFFFF; } -div.book-list { +.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; @@ -26,60 +40,81 @@ div.book-list { line-height: 43px; height: 43px; line-height: 43px; + height: 43px; + line-height: 43px; + height: 43px; + line-height: 43px; + height: 43px; + line-height: 43px; + height: 43px; + line-height: 43px; margin: 0 5px 0 0; padding: 7px 0; - overflow: hidden; } -div.book-list.row1 { +div.book-list.listview.row1 { background: #f6f9f9; } -div.book-list.row2 { +div.book-list.listview.row2 { background: #fff; } -div.book-list div.unglue-this { +div.book-list.listview div.unglue-this { float: left; } -div.book-list div.book-thumb { +div.book-list.listview div.book-thumb { margin-right: 5px; float: left; } -div.book-list div.book-name { +div.book-list.listview div.book-name { width: 260px; margin-right: 10px; - background: url("/static/images/booklist/booklist-vline.png") right center no-repeat; + background: url("../images/booklist/booklist-vline.png") right center no-repeat; float: left; } -div.book-list div.book-name span { +div.book-list.listview div.book-name span { display: block; line-height: normal; height: 43px; line-height: 43px; height: 43px; line-height: 43px; + height: 43px; + line-height: 43px; + height: 43px; + line-height: 43px; + height: 43px; + line-height: 43px; + height: 43px; + line-height: 43px; } -div.book-list div.add-wishlist, div.book-list div.remove-wishlist { +div.book-list.listview div.add-wishlist, div.book-list.listview div.remove-wishlist { margin-right: 10px; padding-right: 10px; - background: url("/static/images/booklist/booklist-vline.png") right center no-repeat; + background: url("../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 { +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("/static/images/booklist/add-wishlist.png") left center no-repeat; + background: url("../images/booklist/add-wishlist.png") left center no-repeat; padding-left: 20px; } -div.book-list div.booklist-status { +div.book-list.listview div.booklist-status { margin-right: 7px; float: left; } -span.booklist-status-text { +.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; @@ -155,6 +190,26 @@ ul.navigation li.arrow-l a { height: 15px; display: block; text-indent: -10000px; + background: url("/static/images/booklist/bg.png") 0 -168px no-repeat; + width: 10px; + height: 15px; + display: block; + text-indent: -10000px; + background: url("/static/images/booklist/bg.png") 0 -168px no-repeat; + width: 10px; + height: 15px; + display: block; + text-indent: -10000px; + background: url("/static/images/booklist/bg.png") 0 -168px no-repeat; + width: 10px; + height: 15px; + display: block; + text-indent: -10000px; + 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; @@ -167,6 +222,26 @@ ul.navigation li.arrow-r a { height: 15px; display: block; text-indent: -10000px; + background: url("/static/images/booklist/bg.png") -1px -185px no-repeat; + width: 10px; + height: 15px; + display: block; + text-indent: -10000px; + background: url("/static/images/booklist/bg.png") -1px -185px no-repeat; + width: 10px; + height: 15px; + display: block; + text-indent: -10000px; + background: url("/static/images/booklist/bg.png") -1px -185px no-repeat; + width: 10px; + height: 15px; + display: block; + text-indent: -10000px; + 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; @@ -176,71 +251,175 @@ ul.navigation li a:hover, ul.navigation li.active a { display: block; border: 0; } -.book-thumb img { +.book-thumb.listview a { + display: block; height: 50px; + width: 32px; + overflow: hidden; + position: relative; + z-index: 1; } -.book_panel { - margin: 20px auto; - padding: 0 5px 5px 5px; - height: 300px; +.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; +} +.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; + 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; + } + } +*/ + } -.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 { +.panelview.book-list:hover { color: #3d4e53; } -.green { +.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; } -.book_panel_back { - margin: 0 auto; - padding: 10px; - height: 295px; +.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; + 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; } -.book_panel_back a { - font-size: 12px; - font-weight: normal; -} .unglued_white { - margin: 0 auto; + font-size: 12px; + margin: 0px auto; margin-bottom: 5px; - padding: 10px 0; -} -.status { - color: #8dc63f; - text-align: left; + padding: 10px 0px; } .read_itbutton { width: 118px; height: 35px; - padding: 0 0; + padding: 0px 0px; background: #FFFFFF; - margin: 0; + margin: 0px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; @@ -252,116 +431,333 @@ ul.navigation li a:hover, ul.navigation li.active a { .read_itbutton a { line-height: 40px; font-size: 11px; - background: url("/static/images/book-panel/book_icon.png") no-repeat left center; + background-repeat: no-repeat; background-position: 10px center; - padding: 0 0 0 30px; - color: #73a334; - text-decoration: none; font-weight: bold; + text-decoration: none; text-transform: uppercase; + 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: 130px; +.add_towish { + width: 125px; height: 30px; - padding: 0 0; - margin: 10px auto; + padding: 0px 0px; + margin: 15px auto; } -#add_towish a { +.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; + background-repeat: no-repeat; + background-position: left center; font-weight: bold; - color: #FFFFFF; text-decoration: none; text-transform: uppercase; - border-width: 1px 0px; - border-style: solid none; - border-color: #FFFFFF; - border-width: 1px 0px; - border-style: solid none; - border-color: #FFFFFF; + 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; + 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 { +.add_towish a:hover { + text-decoration: none; + color: #3d4e53; text-decoration: none; color: #3d4e53; } -#white_text { +.white_text { width: 130px; height: 40px; - padding: 17px 0; - margin: 0; + padding: 17px 0px; + margin: 0px; } -#white_text a { +.white_text a { color: #FFFFFF; text-decoration: none; } -#white_text a:hover { +.white_text a:hover { + text-decoration: none; color: #3d4e53; text-decoration: none; + color: #3d4e53; } -#moreinfo { +/*more info*/ +.moreinfo { width: 130px; height: 30px; - padding: 0; + padding: 0px; margin: 15px 0 0; } -#moreinfo a { +.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; + background-repeat: no-repeat; + background-position: left center; 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; - border-width: 1px 0px; - border-style: solid none; - border-color: #FFFFFF; + 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; + 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 { +.moreinfo a:hover { text-decoration: none; color: #3d4e53; + 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 { +.graypanel a { + text-decoration: none; color: #3d4e53; text-decoration: none; + color: #3d4e53; } -.read { +.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; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -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; + 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; - padding: 0; +} +.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; + 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; + 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; + 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; + 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; + 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: 0; + margin: 0px; padding: 10px 3px; width: 50px; font-size: 10pt; float: left; } .read img { - padding: 5px; - margin: 0; + padding: 5px 0px; + margin: 0px; float: left; } .right_add { padding: 10px; - margin: 0; + margin: 0px; float: right; } p.right_add { @@ -369,18 +765,46 @@ p.right_add { padding: 10px 10px 0 0; width: 24px; } -/* slideout hover state */ -.book_panel_interior { +/**/ +.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: 0; - padding: 0; - left: 0; + margin: 0px; + padding: 0px; + left: 0px; } -.book_panel_interior img { +.panelview.book-thumb img { z-index: 100; + width: 120px; + height: 182px; } -.book_panel_interior span { +.panelview.book-thumb span { position: absolute; bottom: 0; left: -10px; @@ -388,6 +812,20 @@ p.right_add { z-index: 1000; height: auto; } +.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; +} body { background: url("/static/images/bg-body.png") 0 0 repeat-x; padding: 0 0 20px 0; @@ -446,6 +884,14 @@ a.readon span { line-height: 36px; height: 36px; line-height: 36px; + height: 36px; + line-height: 36px; + height: 36px; + line-height: 36px; + height: 36px; + line-height: 36px; + height: 36px; + line-height: 36px; display: block; } a { @@ -494,6 +940,34 @@ a { font-weight: bold; font-size: 13px; letter-spacing: -0.05em; + height: 36px; + line-height: 36px; + display: block; + text-decoration: none; + font-weight: bold; + font-size: 13px; + letter-spacing: -0.05em; + height: 36px; + line-height: 36px; + display: block; + text-decoration: none; + font-weight: bold; + font-size: 13px; + letter-spacing: -0.05em; + height: 36px; + line-height: 36px; + display: block; + text-decoration: none; + font-weight: bold; + font-size: 13px; + letter-spacing: -0.05em; + 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; @@ -511,6 +985,34 @@ a { font-weight: bold; font-size: 13px; letter-spacing: -0.05em; + height: 36px; + line-height: 36px; + display: block; + text-decoration: none; + font-weight: bold; + font-size: 13px; + letter-spacing: -0.05em; + height: 36px; + line-height: 36px; + display: block; + text-decoration: none; + font-weight: bold; + font-size: 13px; + letter-spacing: -0.05em; + height: 36px; + line-height: 36px; + display: block; + text-decoration: none; + font-weight: bold; + font-size: 13px; + letter-spacing: -0.05em; + 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; @@ -559,6 +1061,14 @@ a { line-height: 36px; height: 36px; line-height: 36px; + height: 36px; + line-height: 36px; + height: 36px; + line-height: 36px; + height: 36px; + line-height: 36px; + height: 36px; + line-height: 36px; float: left; color: #6994a3; } @@ -595,6 +1105,18 @@ a { -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; + -moz-border-radius: 0 0 10px 10px; + -webkit-border-radius: 0 0 10px 10px; + border-radius: 0 0 10px 10px; + -moz-border-radius: 0 0 10px 10px; + -webkit-border-radius: 0 0 10px 10px; + border-radius: 0 0 10px 10px; + -moz-border-radius: 0 0 10px 10px; + -webkit-border-radius: 0 0 10px 10px; + border-radius: 0 0 10px 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; @@ -743,6 +1265,18 @@ span.rounded { -moz-border-radius: 7px 7px 7px 7px; -webkit-border-radius: 7px 7px 7px 7px; border-radius: 7px 7px 7px 7px; + -moz-border-radius: 7px 7px 7px 7px; + -webkit-border-radius: 7px 7px 7px 7px; + border-radius: 7px 7px 7px 7px; + -moz-border-radius: 7px 7px 7px 7px; + -webkit-border-radius: 7px 7px 7px 7px; + border-radius: 7px 7px 7px 7px; + -moz-border-radius: 7px 7px 7px 7px; + -webkit-border-radius: 7px 7px 7px 7px; + border-radius: 7px 7px 7px 7px; + -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; @@ -757,20 +1291,44 @@ span.rounded > span { -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; + -moz-border-radius: 5px 5px 5px 5px; + -webkit-border-radius: 5px 5px 5px 5px; + border-radius: 5px 5px 5px 5px; + -moz-border-radius: 5px 5px 5px 5px; + -webkit-border-radius: 5px 5px 5px 5px; + border-radius: 5px 5px 5px 5px; + -moz-border-radius: 5px 5px 5px 5px; + -webkit-border-radius: 5px 5px 5px 5px; + border-radius: 5px 5px 5px 5px; + -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; background: #a7d26a url("/static/images/header-button-blue.png") left bottom repeat-x; + background: #a7d26a url("/static/images/header-button-blue.png") left bottom repeat-x; + background: #a7d26a url("/static/images/header-button-blue.png") left bottom repeat-x; + background: #a7d26a url("/static/images/header-button-blue.png") left bottom repeat-x; + 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; background: #eabc7c url("/static/images/header-button-orange.png") left bottom repeat-x; + background: #eabc7c url("/static/images/header-button-orange.png") left bottom repeat-x; + background: #eabc7c url("/static/images/header-button-orange.png") left bottom repeat-x; + background: #eabc7c url("/static/images/header-button-orange.png") left bottom repeat-x; + 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; background: #bacfd6 url("/static/images/header-button-grey.png") left bottom repeat-x; + background: #bacfd6 url("/static/images/header-button-grey.png") left bottom repeat-x; + background: #bacfd6 url("/static/images/header-button-grey.png") left bottom repeat-x; + background: #bacfd6 url("/static/images/header-button-grey.png") left bottom repeat-x; + background: #bacfd6 url("/static/images/header-button-grey.png") left bottom repeat-x; } div.check-list { float: left; @@ -800,6 +1358,14 @@ a.my-setting { line-height: 50px; height: 50px; line-height: 50px; + height: 50px; + line-height: 50px; + height: 50px; + line-height: 50px; + height: 50px; + line-height: 50px; + height: 50px; + line-height: 50px; display: block; padding: 0 0 0 10px; font-size: 20px; @@ -833,9 +1399,25 @@ ul.tabs li { line-height: 46px; height: 46px; line-height: 46px; + height: 46px; + line-height: 46px; + height: 46px; + line-height: 46px; + height: 46px; + line-height: 46px; + height: 46px; + line-height: 46px; margin-right: 10px; } ul.tabs li a { + height: 46px; + line-height: 46px; + height: 46px; + line-height: 46px; + height: 46px; + line-height: 46px; + height: 46px; + line-height: 46px; height: 46px; line-height: 46px; height: 46px; @@ -933,68 +1515,154 @@ div.content-block-content { .book-status span.percent7{ background:url(../images/images/icon-book4.png) 0 0 no-repeat;} .book-status span.percent62{ background:url(../images/images/icon-book5.png) 0 0 no-repeat;} .book-status span.percent21{ background:url(../images/images/icon-book6.png) 0 0 no-repeat;} -*/.book_panel { - margin: 20px auto; - padding: 0 5px 5px 5px; - height: 300px; +*/.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; + 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; + } + } +*/ + } -.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 { +.panelview.book-list:hover { color: #3d4e53; } -.green { +.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; } -.book_panel_back { - margin: 0 auto; - padding: 10px; - height: 295px; +.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; + 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; } -.book_panel_back a { - font-size: 12px; - font-weight: normal; -} .unglued_white { - margin: 0 auto; + font-size: 12px; + margin: 0px auto; margin-bottom: 5px; - padding: 10px 0; -} -.status { - color: #8dc63f; - text-align: left; + padding: 10px 0px; } .read_itbutton { width: 118px; height: 35px; - padding: 0 0; + padding: 0px 0px; background: #FFFFFF; - margin: 0; + margin: 0px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; @@ -1006,116 +1674,333 @@ div.content-block-content { .read_itbutton a { line-height: 40px; font-size: 11px; - background: url("/static/images/book-panel/book_icon.png") no-repeat left center; + background-repeat: no-repeat; background-position: 10px center; - padding: 0 0 0 30px; - color: #73a334; - text-decoration: none; font-weight: bold; + text-decoration: none; text-transform: uppercase; + 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: 130px; +.add_towish { + width: 125px; height: 30px; - padding: 0 0; - margin: 10px auto; + padding: 0px 0px; + margin: 15px auto; } -#add_towish a { +.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; + background-repeat: no-repeat; + background-position: left center; font-weight: bold; - color: #FFFFFF; text-decoration: none; text-transform: uppercase; - border-width: 1px 0px; - border-style: solid none; - border-color: #FFFFFF; - border-width: 1px 0px; - border-style: solid none; - border-color: #FFFFFF; + 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; + 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 { +.add_towish a:hover { + text-decoration: none; + color: #3d4e53; text-decoration: none; color: #3d4e53; } -#white_text { +.white_text { width: 130px; height: 40px; - padding: 17px 0; - margin: 0; + padding: 17px 0px; + margin: 0px; } -#white_text a { +.white_text a { color: #FFFFFF; text-decoration: none; } -#white_text a:hover { +.white_text a:hover { + text-decoration: none; color: #3d4e53; text-decoration: none; + color: #3d4e53; } -#moreinfo { +/*more info*/ +.moreinfo { width: 130px; height: 30px; - padding: 0; + padding: 0px; margin: 15px 0 0; } -#moreinfo a { +.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; + background-repeat: no-repeat; + background-position: left center; 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; - border-width: 1px 0px; - border-style: solid none; - border-color: #FFFFFF; + 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; + 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 { +.moreinfo a:hover { text-decoration: none; color: #3d4e53; + 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 { +.graypanel a { + text-decoration: none; color: #3d4e53; text-decoration: none; + color: #3d4e53; } -.read { +.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; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -moz-border-radius: 4px 4px 4px 4px; + -webkit-border-radius: 4px 4px 4px 4px; + border-radius: 4px 4px 4px 4px; + -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; + 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; - padding: 0; +} +.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; + 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; + 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; + 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; + 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; + 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: 0; + margin: 0px; padding: 10px 3px; width: 50px; font-size: 10pt; float: left; } .read img { - padding: 5px; - margin: 0; + padding: 5px 0px; + margin: 0px; float: left; } .right_add { padding: 10px; - margin: 0; + margin: 0px; float: right; } p.right_add { @@ -1123,18 +2008,46 @@ p.right_add { padding: 10px 10px 0 0; width: 24px; } -/* slideout hover state */ -.book_panel_interior { +/**/ +.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: 0; - padding: 0; - left: 0; + margin: 0px; + padding: 0px; + left: 0px; } -.book_panel_interior img { +.panelview.book-thumb img { z-index: 100; + width: 120px; + height: 182px; } -.book_panel_interior span { +.panelview.book-thumb span { position: absolute; bottom: 0; left: -10px; diff --git a/static/less/sitewide.less b/static/less/sitewide.less index 11ab5a15..3340e033 100644 --- a/static/less/sitewide.less +++ b/static/less/sitewide.less @@ -1,5 +1,7 @@ // For sitewide elements of unglue.it. +@import "variables.less"; + body{ background:url(@background-body) 0 0 repeat-x; padding:0 0 20px 0; diff --git a/static/supporter_integration_test.html b/static/supporter_integration_test.html index b2503649..d82e2930 100644 --- a/static/supporter_integration_test.html +++ b/static/supporter_integration_test.html @@ -4,8 +4,10 @@ - - + + + +