incorporating latest round of css changes
Andromeda Yelton
parent
206b722c5d
commit
d92fedcdb1
|
|
@ -2,8 +2,7 @@ div.book-list{
|
|||
clear:both;
|
||||
display:block;
|
||||
vertical-align: middle;
|
||||
height:43px;
|
||||
line-height:43px;
|
||||
.height(43px);
|
||||
margin:0 5px 0 0;
|
||||
padding:7px 0;
|
||||
overflow:hidden;
|
||||
|
|
@ -33,18 +32,16 @@ div.book-list{
|
|||
span {
|
||||
display:block;
|
||||
line-height:normal;
|
||||
height:43px;
|
||||
line-height:43px;
|
||||
.height(43px);
|
||||
}
|
||||
}
|
||||
&.add-wishlist, &.remove-wishlist {
|
||||
&.add-wishlist {
|
||||
margin-right: 10px;
|
||||
padding-right: 10px;
|
||||
background:url("@{image-base}booklist/booklist-vline.png") right center no-repeat;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
|
||||
span {
|
||||
a {
|
||||
font-weight:normal;
|
||||
color:@text-blue;
|
||||
text-transform: none;
|
||||
|
|
@ -87,6 +84,7 @@ div.unglue-this {
|
|||
}
|
||||
a {
|
||||
color:#fff;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -154,7 +152,7 @@ ul.navigation {
|
|||
}
|
||||
|
||||
ul.navigation li a:hover, ul.navigation li.active a {
|
||||
color:#8ac3d7;
|
||||
color: #8ac3d7;
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
@import "book_panel.less";
|
||||
@import "sitewide.less";
|
||||
@import "registration.less";
|
||||
@import "supporter_layout.less";
|
||||
|
||||
// I am going to need to draw out the page on a white board and get a sense of how this content wants to be structured for reusability.
|
||||
// What might I need to look at...
|
||||
|
|
@ -14,3 +15,5 @@
|
|||
|
||||
// what's up with all the font sizes?
|
||||
// should I encode grid size stuff into variables?
|
||||
|
||||
// use extra_head block to minify css better! think about file structure...
|
||||
|
|
@ -14,7 +14,7 @@ img {
|
|||
}
|
||||
|
||||
h2 {
|
||||
.content-heading {
|
||||
&.content-heading {
|
||||
padding:15px;
|
||||
margin:0;
|
||||
font-size:19px;
|
||||
|
|
@ -30,14 +30,14 @@ h2 {
|
|||
}
|
||||
|
||||
h3 {
|
||||
.jsmod-title {
|
||||
&.jsmod-title {
|
||||
background:url(@background-header) 0 0 no-repeat;
|
||||
padding:0;
|
||||
margin:0;
|
||||
height:73px;
|
||||
|
||||
span {
|
||||
background:url(../images/icon-h3.png) 90% center no-repeat;
|
||||
background:url("@{image-base}icon-h3.png") 90% center no-repeat;
|
||||
font-size:17px;
|
||||
color:#fff;
|
||||
padding:26px 40px 27px 20px;
|
||||
|
|
@ -50,7 +50,6 @@ ul.menu{
|
|||
list-style:none;
|
||||
padding:0;
|
||||
margin:0;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
a.readon {
|
||||
|
|
@ -66,8 +65,7 @@ a.readon {
|
|||
background:url(@background-header) -770px -108px no-repeat;
|
||||
margin-right:34px;
|
||||
padding:0 5px 0 20px;
|
||||
height:36px;
|
||||
line-height:36px;
|
||||
.height(36px);
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
|
@ -94,7 +92,7 @@ a {
|
|||
|
||||
.js-logo {
|
||||
float:left;
|
||||
padding-top:20px;
|
||||
padding-top:10px;
|
||||
|
||||
a {
|
||||
img { border: none;}
|
||||
|
|
@ -111,12 +109,12 @@ a {
|
|||
padding:0 10px;
|
||||
|
||||
a {
|
||||
color:#fff;
|
||||
color:@text-blue;
|
||||
.header-text;
|
||||
}
|
||||
|
||||
span#welcome {
|
||||
color:yellow;
|
||||
color:@green;
|
||||
.header-text;
|
||||
}
|
||||
|
||||
|
|
@ -141,26 +139,31 @@ a {
|
|||
}
|
||||
|
||||
.js-topnews {
|
||||
float:left; width:60%;
|
||||
}
|
||||
|
||||
.js-news-text {
|
||||
float:left;
|
||||
width:70%;
|
||||
font-size:16px;
|
||||
color:@text-blue;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.js-news-links {
|
||||
float:right;
|
||||
width:30%;
|
||||
.js-topnews1 {
|
||||
background:url("@{image-base}header/header-m.png") 0 0 repeat-y;
|
||||
}
|
||||
.js-topnews2 {
|
||||
background:url("@{image-base}header/header-t.png") 0 0 no-repeat;
|
||||
}
|
||||
.js-topnews3 {
|
||||
background:url("@{image-base}header/header-b.png") 0 100% no-repeat;
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
.js-search {
|
||||
width:960px;
|
||||
margin:0 auto;
|
||||
clear:both;
|
||||
padding:0;
|
||||
float:right;
|
||||
width:30%;
|
||||
padding-top:25px;
|
||||
|
||||
input {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.inputbox {
|
||||
padding:0 0 0 15px;
|
||||
|
|
@ -168,8 +171,7 @@ a {
|
|||
border:none;
|
||||
outline: none;
|
||||
background:url(@background-header) -645px -180px;
|
||||
height:36px;
|
||||
line-height:36px;
|
||||
.height(36px);
|
||||
float: left;
|
||||
color:@medium-blue;
|
||||
}
|
||||
|
|
@ -188,7 +190,7 @@ a {
|
|||
}
|
||||
|
||||
.js-search-inner {
|
||||
margin:0 auto;
|
||||
float:right;
|
||||
}
|
||||
|
||||
// Explore column
|
||||
|
|
@ -227,7 +229,6 @@ a {
|
|||
|
||||
a {
|
||||
color:@medium-blue;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -235,7 +236,7 @@ a {
|
|||
|
||||
// Main content
|
||||
#js-maincol-fr {
|
||||
float:left;
|
||||
float:right;
|
||||
width:725px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,107 +1,205 @@
|
|||
@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;
|
||||
.block-inner {
|
||||
padding-right:10px;
|
||||
}
|
||||
img{ border:none;}
|
||||
.js-main{
|
||||
width:960px;
|
||||
margin:0 auto;
|
||||
|
||||
.user-block {
|
||||
width:100%;
|
||||
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;
|
||||
.user-block-hide {
|
||||
float: left;
|
||||
width:100%;
|
||||
clear:both;
|
||||
|
||||
.block {
|
||||
float:left;
|
||||
width:25%;
|
||||
}
|
||||
|
||||
input {
|
||||
float:left;
|
||||
margin:3px 10px 0 0;
|
||||
}
|
||||
|
||||
label {
|
||||
float:left;
|
||||
width:90%;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
.user-block1 {
|
||||
float:left;
|
||||
width:25%;
|
||||
}
|
||||
|
||||
h2.content-heading{
|
||||
padding:15px; margin:0;
|
||||
font-size:19px;
|
||||
font-weight:normal;
|
||||
color:#3d4e53;
|
||||
float:left; width:70%;
|
||||
.user-block-inner {
|
||||
|
||||
}
|
||||
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;}
|
||||
.user-block2 {
|
||||
color:@medium-blue;
|
||||
font-size:11px;
|
||||
line-height:normal;
|
||||
float:left;
|
||||
width:25%;
|
||||
}
|
||||
|
||||
.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;}
|
||||
.user-block3,
|
||||
.user-block4 {
|
||||
float:right;
|
||||
width:25%;
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
.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;}
|
||||
img.user-avatar {
|
||||
float:left;
|
||||
margin-right:10px;
|
||||
}
|
||||
|
||||
ul.menu{
|
||||
.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:@text-blue;
|
||||
}
|
||||
|
||||
span.user-status-title {
|
||||
float:left;
|
||||
margin-right: 8px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
span.rounded {
|
||||
border:1px solid #d4d4d4;
|
||||
.border-radius(7px, 7px, 7px, 7px);
|
||||
padding:1px;
|
||||
color:#fff;
|
||||
margin:0 8px 0 0;
|
||||
display:inline-block;
|
||||
|
||||
> span {
|
||||
padding:7px 10px;
|
||||
min-width:15px;
|
||||
.border-radius(5px, 5px, 5px, 5px);
|
||||
text-align:center;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span.blue {
|
||||
.supporter-color-span(#a7d26a, blue);
|
||||
}
|
||||
|
||||
span.orange {
|
||||
.supporter-color-span(#eabc7c, orange);
|
||||
}
|
||||
|
||||
span.grey {
|
||||
.supporter-color-span(#bacfd6, grey);
|
||||
}
|
||||
|
||||
div.check-list {
|
||||
float: left;
|
||||
width:100%;
|
||||
padding-bottom:7px;
|
||||
}
|
||||
|
||||
a.profile-edit {
|
||||
display:block;
|
||||
background:url("@{image-base}header/icon-edit.png") right top no-repeat;
|
||||
}
|
||||
|
||||
div.profile-save {
|
||||
padding-top:15px;
|
||||
}
|
||||
|
||||
a.profile-save {
|
||||
background:url("@{image-base}header/save-setting.png") 0 0 no-repeat;
|
||||
width:116px;
|
||||
height:42px;
|
||||
display:block;
|
||||
text-indent:-100000px;
|
||||
}
|
||||
|
||||
a.my-setting {
|
||||
background:#d6dde0 url("@{image-base}header/explane.png") 90% center no-repeat;
|
||||
border-radius:7px;
|
||||
.height(50px);
|
||||
display:block;
|
||||
padding:0 0 0 10px;
|
||||
font-size:20px;
|
||||
}
|
||||
|
||||
a.my-setting.active {
|
||||
background:#d6dde0 url("@{image-base}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;
|
||||
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;}
|
||||
li {
|
||||
float: left;
|
||||
.height(46px);
|
||||
margin-right:10px;
|
||||
|
||||
a {
|
||||
.height(46px);
|
||||
display:block;
|
||||
text-align:center;
|
||||
padding:0 10px;
|
||||
min-width:80px;
|
||||
border-radius:7px 7px 0 0;
|
||||
background:url("@{image-base}header/bg-tabs1.png") left bottom repeat-x;
|
||||
}
|
||||
|
||||
a:hover, &.active a {
|
||||
background:url("@{image-base}header/bg-tabs.png") left bottom repeat-x;
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.book-list span.rounded > span {
|
||||
line-height:normal;
|
||||
width:75px;
|
||||
|
||||
a {
|
||||
text-transform:capitalize;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: -0.05em;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.panelborders {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
font-size:13px;
|
||||
letter-spacing:1px;
|
||||
letter-spacing: -.05em;
|
||||
text-transform:capitalize;
|
||||
}
|
||||
|
||||
|
|
@ -39,4 +39,14 @@
|
|||
height:15px;
|
||||
display:block;
|
||||
text-indent:-10000px;
|
||||
}
|
||||
}
|
||||
|
||||
.supporter-color-span(@hex, @color) {
|
||||
@url: %("%sheader-button-%s.png", @image-base, @color);
|
||||
background:@hex url(@url) left bottom repeat-x;
|
||||
}
|
||||
|
||||
.height(@x) {
|
||||
height:@x;
|
||||
line-height:@x;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue