X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/9e41863c3cff14cbbc65b783ee57120fb59fa22c..1a8b33e26200ad64a574c77d7b88ece2d65f8a98:/wolnelektury/static/css/book_box.css diff --git a/wolnelektury/static/css/book_box.css b/wolnelektury/static/css/book_box.css index a959d849c..876bf06b0 100755 --- a/wolnelektury/static/css/book_box.css +++ b/wolnelektury/static/css/book_box.css @@ -1,30 +1,346 @@ -.book-mini-box { +.book-mini-box, .Book-item { display: inline-block; + vertical-align: top; +} + +.book-wide-box, .book-box { margin: 0; - width: 12.5em; vertical-align: top; } -.book-mini-box a { +.book-box { + width: 48.75em; +} + +.book-mini-box { + width: 16.15em; +} + +.book-wide-box { + width: 97.5em; + + /** This is a fullpage box, it must be aligned with the top menu. + This corresponds to a .1em margin below **/ + margin-left: -0.1em; +} + +/* + * A mini-box wraps it's contents (image + label) in an + * other boxes have an inner box as a wrapper. + */ + +.book-box-inner { + /* min, so it can grow */ + min-height: 19.75em; + margin: .5em; +} + +.book-mini-box a, .book-box-inner { display: block; color: black; border: 1px solid #ddd; - height: 20em; - padding: .75em; +/* height: 20em; */ + padding: .8em 1em; margin: .1em; background: #fff; -moz-box-shadow: 2px 2px 2px #ddd; -webkit-box-shadow: 2px 2px 2px #ddd; box-shadow: 2px 2px 2px #ddd; +} + +.book-mini-box a { + height: 27.1em; + margin: .1em; + overflow: hidden; +} + + +.book-wide-box .book-box-inner { + /* min, so it can grow */ + min-height: 24.4em; +} + +.search-result { + width: 97.5em; +} + +.search-result .book-box-body { + width: 31em; +} + +.book-list-header { + width: 97.5em; + padding: 0em; + margin-left: -0.1em; +} + +.book-list-header .book-box-inner { + min-height: 1em; +} + +.book-list-header p { + font-size: 2.4em; + margin: 0.5em; +} + + +/* + * ingenous float containment hack + * http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/ + */ +/* +.search-result .book-box-inner { + height: 1%; overflow: hidden; } +*/ +.book-mini-box img, .book-box img, .book-wide-box img, .search-result img { + width: 13.9em; + height: 19.3em; +} .book-mini-box img { - width: 10.8em; - height: 14.4em; - margin-bottom: .3em; + margin-bottom: 1.8em; +} +.book-box-inner img, .book-wide-box img { + float: left; + margin-right: 1.5em; } +.book-mini-box .desc { + margin-left:0em; +} .book-mini-box .author { - color: #777; -} \ No newline at end of file + font-size: 1.1em; + color: #6d7877; + display: block; + overflow:hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.book-mini-box .title { + font-size: 1.4em; + color: #242424; +} + + +.book-box-body { + height: 17em; + overflow:hidden; + position: relative; +} + +.book-wide-box .book-box-body { + min-height: 17em; +} + +.book-box-head { + min-height: 7em; + padding-top: 1.4em; + margin-bottom: 1em; +} +.book-box-head a { + color: black; +} +.book-box-head .author { + font-size: 1.1em; + max-width: 24em; +} +.book-box-head .title { + font-size: 2.4em; + height: 2.4em; + overflow:hidden; + margin-top: .3em; +} +.book-box-body .tags { + font-size: 1.1em; +} +.book-box-tag { + margin-right: .5em; + margin-left: .4em; +} +.book-box-download { + position: relative; +} + +.book-box-download a { + position: relative; + z-index: 101; +} + +.book-box-formats { + display: none; + position: absolute; + + width: 16.363em; + border: 1px solid #ddd; + padding: 3.454em 1.727em .818em 1.727em; + background: #fff; + -moz-box-shadow: 2px 2px 2px #ddd; + -webkit-box-shadow: 2px 2px 2px #ddd; + box-shadow: 2px 2px 2px #ddd; + + z-index: 100; + top: -1.454em; + left: -1.727em; +} +.book-box-formats span { + display: block; +} + + +.book-box-download:hover .book-box-formats span:first-child { + margin-top: 1.454em; +} + +.book-box-download:hover .book-box-formats { + display: block; +} + +.book-box-tools { + width: 46em; + font-size: 1.1em; +} + +.book-wide-box .book-box-tools { + margin-left: 14em; + width: 32em; +} + +.book-wide-box #theme-list-wrapper { + margin-left: 15.4em; + width: 30em; +} + + + +.book-box-read a:before { + content: "\2609"; + font-family: WL-Nav; + font-size: 2.25em; + margin-right: .15em; + vertical-align: middle; + font-weight: normal; +} + +.book-box-download a.downarrow:before { + content: "\21E9"; + font-family: WL-Nav; + font-size: 2.25em; + margin-right: .15em; + vertical-align: middle; + font-weight: normal; +} + +.book-box-audiobook a:before { + content: "\266B"; + font-family: WL-Nav; + font-size: 2.25em; + margin-right: .15em; + vertical-align: middle; + font-weight: normal; +} + +ul.book-box-tools { + margin: 0; + padding: 0; +} + +.book-box-tools li { + display: inline-block; +} + +.book-box-read { + width: 11.5em; +} +.book-box-download { + width: 8.5em; +} +.book-box-audiobook { + width: 7em; +} + +.book-wide-box .right-column { + float: right; + width: 41.5em; +} + +ul.inline-items, ul.inline-items li { + margin: 0; + padding: 0; +} + +ul.inline-items li { + display: inline-block; +} + +.book-wide-box .other-tools { + float: left; + width: 14.5em; + margin: 5em 0 0 1.5em; + +} + +.book-wide-box .other-download { + float: left; + width: 22em; + margin: 5em 1.5em 0em 1.5em; +} +.book-wide-box .other-tools h2, +.book-wide-box .other-download h2, +.book-wide-box .other-tools ul, +.book-wide-box .other-download ul { + font-size: 1.1em; +} + + + +.star { + font-size: 2.25em; + margin-right: .5em; + position: absolute; + right: 0; +} +.star button::-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; +} + +.snippets { + width: 44em; + float: right; +} + +.snippets .snippet-text { + background: #f7f7f7; + font-size: 1.2em; + margin: 1.083em 0em; + padding: 1em; +} + +.snippets .anchor { + display: none; +}