@import "../tools"; @import "const"; @mixin inner-box { display: block; color: black; @include size(margin, 1px); @include size(padding, 8px 10px); @include white-box; } .cover-area { float: left; @include size(margin-right, 15px); @include size(margin-bottom, 5px); @include min-screen($S_BOOK_SHORT_FULL) { //position: absolute; //top: 0; //left: 0; //margin-right: 0; } img.cover { @include size(height, 193px / 2); @include size(width, 139px / 2); @include min-screen($S_BOOK_SHORT_MEDIUM) { @include size(height, 193px); @include size(width, 139px); } } } .book-mini-box { /* Original design fits 6 boxes horizontally in 975px (162.5px each), * but we really want to fit 2 boxes on a 320px mobile screen. */ @include size(width, 160px); display: inline-block; vertical-align: top; @include min-screen(350px) { @include size(width, 162.5px); } .book-mini-box-inner { @include inner-box; @include size(height, 271px); @include size(margin, 1px); @include size(padding, 8px 9px); overflow: hidden; @include min-screen(350px) { @include size(padding, 8px 10px); } a { display: block; } } img.cover { @include size(height, 193px); @include size(width, 139px); @include size(margin-bottom, 18px); } .language { color: #aaa; float: right; @include mono; @include size(font-size, 10px); text-transform: uppercase; position: relative; @include size(top, -20px); } .desc { margin-left: 0; } .author { @include size(font-size, 11px); @include mono; color: #6d7877; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .title { @include size(font-size, 14px); color: #242424; white-space: normal; } } .work-list { margin: 0; padding: 0; list-style: none; .Book-item { /*@include min-screen($S_BOOK_SHORT_FULL) { display: inline-block; } vertical-align: top;*/ } } #books-list .plain-list-container .plain-list { p { line-height: 1.2em; margin-bottom: 20px; &.header { font-weight: bold; } } } .book-box { margin: 0; vertical-align: top; /* */ a { color: #0D7E85; } .book-box-inner { position: relative; @include inner-box; @include size(min-height, 197.5px); } } .audiobook-box, .search-result .book-box { .book-left-column { @media screen and (min-width: 1024px) { display: inline-block; @include size(width, 590px); @include size(min-height, 196px); } } .book-right-column { @media screen and (min-width: 1024px) { float: right; @include size(padding-top, 15px); @include size(width, 360px); } } .jp-type-playlist { margin-top: 24px; @media screen and (min-width: 1024px) { float: right; } } } .book-wide-box { margin: 0; vertical-align: top; @media screen and (min-width: 62.5em) { @include size(width, 975px); } .book-box-inner { position: relative; @include size(min-height, 244px); @include inner-box; @include size(margin-left, 0); @include size(margin-right, 0); .book-left-column { /* FIXME */ @media screen and (min-width: 62.5em) { float: left; @include size(width, 536px); @include size(min-height, 196px); } } .license-icon { display: block; @include size(margin-top, 5px); } .project-icon { @include size(max-width, 100px); @include size(max-height, 100px); } @include min-screen($S_BOOK_SHORT_FULL) { // Show full title on the work's page. .book-box-body { height: auto; @include size(min-height, 170px); .book-box-head .title { height: auto; @include size(min-height, 57.6px); } } } .book-box-head, .tags, .book-box-tools { @media screen and (min-width: 62.5em) { @include size(width, 382px); } } #theme-list-wrapper { @include min-screen($S_BOOK_SHORT_MEDIUM) { @include size(margin-left, 154px); @include size(width, 300px); } margin-bottom: 0; p { @include size(margin-top, 10px); @include size(margin-bottom, 10px); } } .right-column { @include size(margin-top, 16px); // Eat the padding @include size(margin-left, -10px); @include size(margin-right, -10px); max-width: none; @media screen and (min-width: 62.5em) { @include size(width, 415px); // Eat the padding @include size(margin-top, -8px); } .other-tools, .other-download { @include size(font-size, 11px); clear: left; @include size(margin-top, 25px); line-height: 1.75em; @include size(margin-left, 15px); h2 { margin: 0; @include size(font-size, 11px); @include mono; } @include min-screen($S_BOOK_SHORT_FULL) { float: left; clear: none; @include size(width, 145px); @include size(margin-top, 50px); @include size(margin-right, 0); @include size(margin-bottom, 0); @include size(margin-left, 5px); } @include min-screen(1000px) { @include size(margin-top, 50px); line-height: 1.2em; } } .other-download { @include min-screen($S_BOOK_SHORT_FULL) { @include size(margin-left, 15px); @include size(width, 220px); } } } } .jp-type-playlist { margin-top: 24px; margin-left: 0.625rem; @media screen and (min-width: 1024px) { float: right; margin-right: 0.625rem; } } } @media screen and (min-width: 50em) { .picture.book-wide-box .right-column { float: none; @include size(width, 415px); top: 0; @include size(margin-left, 550px); margin-top: 0; } } .book-box-body { @include size(margin-bottom, 10px); position: relative; .book-box-head, .tags, .book-box-tools, .abstract { @include min-screen($S_BOOK_SHORT_FULL) { margin-left: 154px; } } .book-box-head { @include size(padding-top, 14px); @include size(margin-bottom, 10px); @include min-screen($S_BOOK_SHORT_FULL) { @include size(min-height, 70px); } .author { @include size(font-size, 11px); @include mono; @include size(line-height, 13.2px); @include size(max-height, 26.4px); overflow: hidden; @include min-screen($S_BOOK_SHORT_FULL) { @include size(max-width, 264px); } } .title { @include size(font-size, 24px); line-height: 1.2em; @include size(margin-top, 7.2px); @include size(margin-bottom, 12px); @include min-screen($S_BOOK_SHORT_FULL) { margin-bottom: 0; @include size(height, 57.6px); overflow: hidden; } a { color: black; } } } .tags { @include size(font-size, 11px); line-height: 1.2em; margin-bottom: 5px; @include min-screen($S_BOOK_SHORT_FULL) { @include size(max-height, 57.6px); overflow: hidden; } .category { display: block; @include size(margin-top, 6px); @include size(margin-bottom, 6px); @include min-screen($S_BOOK_SHORT_FULL) { display: inline-block; @include size(margin-top, 0px); @include size(margin-bottom, 0px); @include size(margin-right, 9px); } .mono { @include mono; } .book-box-tag { @include size(margin-left, 4.4px); @include size(margin-right, 5.5px); } } } } .book-box-tools { @include size(font-size, 11px); margin: 0; padding: 0; list-style: none; clear: left; @include min-screen($S_BOOK_SHORT_MEDIUM) { clear: none; @include size(margin-left, 139px + 15px); } &.book-box-tools-warn { font-size: 1rem; margin-bottom: 1em; max-width: 32em; border: 3px solid #9ACD32; padding: 1em; box-sizing: border-box; } li { @include mono; margin-top: 0; } .book-box-read { a { @include mono; display: inline-block; background: #0D7E85; color: white; @include size(width, 170px); text-align: center; @include size(margin-bottom, 5px); @include size(margin-right, 30px); } a.print { margin-right: 0; } a:before { content: url("/static/img/read-white.png"); @include size(font-size, 25px); @include size(margin-right, 3.71px); vertical-align: middle; font-weight: normal; // ugly quick fix position: relative; bottom: 2px; } a.print:before { content: ""; } } .book-box-download { position: relative; a { @mixin downarrow { color: #0D7E85; &:before { content: url("/static/img/download.png"); @include size(font-size, 25px); @include size(margin-right, 3.71px); vertical-align: middle; font-weight: normal; display: inline; } } &.downarrow { @include downarrow; } } .book-box-formats { max-width: 300px; vertical-align: top; padding-top: 6px; border-collapse: collapse; a { display: table-cell; @include size(padding, .2em 1em); border:1px solid black; line-height: 20px; } } } } .star { @include size(font-size, 22.5px); @include size(margin-right, 11.25px); position: absolute; right: 0; z-index: 10; button { cursor: pointer; &::-moz-focus-inner { padding: 0; border: 0 } } .if-unlike button { font-size: 1em; font-family: inherit; border: 0; background: none; margin: 0; padding: 0; color: #757575; } .if-like a { display: block; text-align: right; padding: 0; } } .like .if-unlike { display: none; } .unlike .if-like { display: none; } #book-detail .see-also, #picture-detail .see-also { display: inline-block; h1 { @include size(height, 32px); margin: 0; @include size(padding-top, 19px); @include size(padding-left, 10px); @include size(font-size, 11px); @include mono; font-weight: normal; @media screen and (min-width: 33em) { @include size(padding-left, 19px); } } } .abstract { @include size(font-size, 16px); line-height: 1.2em; @include size(margin-bottom, 8px); @include size(margin-top, 18px); overflow: hidden; position: relative; clear: left; @media screen and (min-width: 62.5em) { @include size(width, 536px); } p.paragraph { margin-bottom: 0; margin-top: 1.2em; &:first-child { margin-top: 0; } } &.short { height: 3.6em; &:after { content:' '; position:absolute; bottom:0; width:25%; height:20px; background-color:transparent; /* assume ltr */ right:0; background-image:-webkit-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%); background-image:-moz-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%); background-image:-o-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%); background-image:linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%) } } }