regluit/static/scss/supporter_layout.scss

494 lines
7.4 KiB
SCSS

@import "variables.scss";
.block-inner {
padding-right:10px;
}
.user-block {
width:100%;
clear:both;
}
.user-block-hide {
float: left;
width:100%;
clear:both;
padding-top: 10px;
.block {
float:left;
}
.block1, .block3 {
width:25%;
}
.block2 {
width:50%;
div {
float: left;
max-width: 340px;
}
input {
margin-left: 5px;
}
}
input {
float:left;
margin:3px 10px 0 0;
width: 45%;
&[type=checkbox] {
float: none;
width: auto;
}
&#librarything_input, &#goodreads_input {
width: auto;
cursor: pointer;
background: $pale-blue;
color: $text-blue;
cursor: pointer;
}
&.profile-save {
width: 116px;
cursor: pointer;
}
}
label {
float:left;
width:90%;
}
textarea {
width:95%;
}
select {
margin-bottom: 5px;
}
}
#user-block1 {
float:left;
width:25%;
position: relative;
}
.user-block2 {
color:$medium-blue;
font-size: $font-size-default;
line-height:normal;
float:left;
width:25%;
}
.user-block23 {
color:$medium-blue;
font-size: $font-size-larger;
line-height:normal;
float:left;
width:50%;
}
.user-block24 {
color:$medium-blue;
font-size: $font-size-larger;
line-height:normal;
float:left;
width:75%;
}
.user-block3,
.user-block4 {
float:left;
width:25%;
&.recommended {
margin-top: auto;
img {
margin-right: 7px;
}
}
}
.user-block3 {
margin-top:8px;
.ungluingtext {
@include height(29px);
float: left;
color: $text-blue;
padding-right: 5px;
}
}
.user-block4 {
margin-top: 7px;
}
.user-badges {
position: absolute;
bottom: 0;
left: 60px;
img {
vertical-align:text-bottom;
border:1px solid #d4d4d4;
@include one-border-radius(5px);
}
}
.social {
width:100%;
}
#edit_profile {
float: right;
margin-top: -12px;
margin-right: -5px;
border: 2px solid white;
padding: 3px 2px 2px 3px;
&:hover {
border: 2px solid $call-to-action;
@include one-border-radius(5px);
}
}
span.special-user-name {
display: block;
font-size: $font-size-header;
color:$text-blue;
margin-left:10px;
font-weight:bold;
height:50px;
line-height: 24px;
}
span.user-name,
span.user-short-info {
display: block;
}
.user-block2 .user-short-info {
padding-right:10px;
}
span.user-name,
span.user-name a {
font-size: $font-size-default;
color:$text-blue;
}
span.user-status-title {
float:left;
margin-right: 8px;
padding-top: 5px;
}
span.rounded {
@include roundedspan;
}
span.blue {
@include supporter-color-span(#a7d26a, "blue");
}
span.orange {
@include supporter-color-span(#eabc7c, "orange");
}
span.grey {
@include supporter-color-span(#bacfd6, "grey");
}
div.check-list {
float: left;
padding-bottom:7px;
clear: both;
}
a.profile-edit {
display:block;
// background:url("#{$image-base}header/icon-edit.png") right top no-repeat;
}
div.profile-save {
padding-top:15px;
border: none;
}
input.profile-save {
background: url("#{$image-base}header/save-setting.png") 0 0 no-repeat;
width: 116px;
height: 42px;
display: block;
text-indent: -100000px;
border:none;
cursor: pointer;
}
#loadgr {
background: url("#{$image-base}supporter_icons/goodreads_square.png") left center no-repeat;
min-height: 33px;
margin: 12px auto;
span {
display: inline-block;
vertical-align: middle;
}
div, input {
margin: auto 10px auto 36px;
}
#goodreads_shelves {
margin: auto 10px auto 36px;
display: block;
}
}
#loadlt {
background: url("#{$image-base}supporter_icons/librarything_square.png") left center no-repeat;
min-height: 32px;
padding-top: 4px;
div, input {
margin: auto 10px auto 36px;
}
}
.weareonthat {
background: url("#{$image-base}checkmark_small.png") left center no-repeat;
}
span.my-setting {
@include height(40px);
display:block;
padding:0 0 10px 10px;
font-size: $font-size-header;
font-weight: bold;
cursor:pointer;
}
span.my-setting.active {
background:$blue-grey url("#{$image-base}header/collspane.png") 90% center no-repeat;
}
#tabs {
clear: both;
float: left;
margin-left: 10px;
margin-top: 10px;
width: 100%;
border-bottom: 4px solid $blue-grey;
ul.tabs li a:hover {
text-decoration: none;
}
&.wantto {
ul.tabs li.tabs3.active a {
background: $blue-grey;
color: $text-blue;
}
}
&.ungluing {
ul.tabs li.tabs2.active a {
background: #eabc7c;
color: #fff;
}
}
&.unglued {
ul.tabs li.tabs1.active a {
background: $green;
color: #fff;
}
}
}
#tabs ul.book-list-view {
margin-bottom:0 !important;
}
#tabs-1,
#tabs-2,
#tabs-3 {
margin-left:10px;
}
ul.tabs {
float:left;
padding:0;
margin:0;
list-style:none;
li {
float: left;
@include height(46px);
margin-right:2px;
&.tabs1, &.tabs2, &.tabs3 {
width:112px;
}
a {
@include height(46px);
display:block;
text-align:center;
padding:0 10px;
min-width:80px;
@include border-radius(7px, 7px, 0, 0);
background:$medium-blue;
color:#fff;
}
&.tabs1 a:hover, &.tabs1.active a {
background:$green;
color:#fff
}
&.tabs2 a:hover, &.tabs2.active a {
background:#eabc7c;
color:#fff;
}
&.tabs3 a:hover, &.tabs3.active a {
background:$blue-grey;
color:$text-blue;
}
}
}
#rss {
height: 46px;
img {
padding: 16px 0 0 14px;
}
span {
margin-left: 3px;
font-size: $font-size-default;
}
}
.listview .rounded {
// cancelling out styles that would otherwise apply
line-height: normal;
margin-right: 0;
}
div#content-block-content {
padding-left: 10px;
}
.empty-wishlist {
margin-top: 10px;
}
.js-news-text {
float:left;
width:70%;
font-size: $font-size-larger;
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;
}
.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;
}
}
#js-slide .jsmodule {
width: 660px !important;
}
#js-maincontainer-bot-block {
padding-left: 16px;
}
.anon_about {
@include height(43px);
font-size: $font-size-larger;
padding-left: 37px;
border: solid 3px $blue-grey;
@include one-border-radius(5px);
width: 665px;
margin: 7px 0;
a {
font-size: $font-size-larger;
color: $call-to-action;
}
}