X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/d0ca88d8941f1596891aa3998ff443894f3f6bf6..a9226097c8eea0591fd3249f62a71becc6d2be93:/src/wolnelektury/static/scss/main/book_box.scss?ds=inline diff --git a/src/wolnelektury/static/scss/main/book_box.scss b/src/wolnelektury/static/scss/main/book_box.scss old mode 100755 new mode 100644 index 084c278b2..b1bfe9341 --- a/src/wolnelektury/static/scss/main/book_box.scss +++ b/src/wolnelektury/static/scss/main/book_box.scss @@ -1,3 +1,6 @@ +@import "../tools"; +@import "const"; + @mixin inner-box { display: block; color: black; @@ -12,10 +15,10 @@ @include size(margin-bottom, 5px); @include min-screen($S_BOOK_SHORT_FULL) { - position: absolute; - top: 0; - left: 0; - margin-right: 0; + //position: absolute; + //top: 0; + //left: 0; + //margin-right: 0; } img.cover { @@ -128,27 +131,39 @@ } } -.audiobook-box { +.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); } } - .audiobook-right-column { + .book-right-column { @media screen and (min-width: 1024px) { float: right; + @include size(padding-top, 15px); @include size(width, 360px); } } + .license-icon { + display: block; + @include size(margin-top, 5px); + } + + .project-icon { + @include size(max-width, 100px); + @include size(max-height, 100px); + } + + .jp-type-playlist { margin-top: 24px; @media screen and (min-width: 1024px) { float: right; - margin-top: 48px; } } } @@ -172,6 +187,7 @@ @media screen and (min-width: 62.5em) { float: left; @include size(width, 536px); + @include size(min-height, 196px); } } @@ -180,6 +196,12 @@ @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. @@ -284,7 +306,7 @@ @include size(width, 415px); top: 0; @include size(margin-left, 550px); - margin-top: 0em; + margin-top: 0; } } @@ -294,7 +316,8 @@ .book-box-head, .tags, - .book-box-tools { + .book-box-tools, + .abstract { @include min-screen($S_BOOK_SHORT_FULL) { margin-left: 154px; } @@ -308,9 +331,6 @@ @include size(min-height, 70px); } - a { - color: black; - } .author { @include size(font-size, 11px); @include mono; @@ -333,6 +353,10 @@ @include size(height, 57.6px); overflow: hidden; } + + a { + color: black; + } } } @@ -352,7 +376,10 @@ @include size(margin-bottom, 6px); @include min-screen($S_BOOK_SHORT_FULL) { - display: inline; + display: inline-block; + @include size(margin-top, 0px); + @include size(margin-bottom, 0px); + @include size(margin-right, 9px); } .mono { @@ -381,6 +408,16 @@ @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; @@ -392,9 +429,13 @@ display: inline-block; background: #0D7E85; color: white; - @include size(width, 200px); + @include size(width, 170px); text-align: center; @include size(margin-bottom, 5px); + @include size(margin-right, 30px); + } + a.print { + margin-right: 0; } a:before { @@ -403,6 +444,13 @@ @include size(margin-right, 3.71px); vertical-align: middle; font-weight: normal; + // ugly quick fix + position: relative; + bottom: 2px; + } + + a.print:before { + content: ""; } } @@ -429,14 +477,16 @@ } .book-box-formats { - display: inline-block; - max-width: 220px; + max-width: 300px; vertical-align: top; padding-top: 6px; + border-collapse: collapse; a { - display: inline-block; + display: table-cell; @include size(padding, .2em 1em); + border:1px solid black; + line-height: 20px; } } } @@ -447,10 +497,14 @@ @include size(margin-right, 11.25px); position: absolute; right: 0; + z-index: 10; - button::-moz-focus-inner { - padding: 0; - border: 0 + button { + cursor: pointer; + &::-moz-focus-inner { + padding: 0; + border: 0 + } } .if-unlike button { font-size: 1em; @@ -478,6 +532,7 @@ #book-detail .see-also, #picture-detail .see-also { + display: inline-block; h1 { @include size(height, 32px); margin: 0; @@ -493,3 +548,44 @@ } } } + +.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%) + } + } +}