+@mixin inner-box {
+ display: block;
+ color: black;
+ @include size(margin, 1px);
+ @include size(padding, 8px 10px);
+ @include white-box;
+}
+
+.book-mini-box img.cover {
+ @include size(height, 193px);
+ @include size(width, 139px);
+}
+
+
+.cover-area {
+ float: left;
+ @include size(margin-right, 15px);
+ @include size(margin-bottom, 5px);
+
+ @media screen and (min-width: 32em) {
+ position: absolute;
+ top: 0;
+ left: 0;
+ margin-right: 0;
+ }
+
+ img.cover {
+ @include size(height, 193px / 2);
+ @include size(width, 139px / 2);
+
+ @media screen and (min-width: 20em) {
+ @include size(height, 193px);
+ @include size(width, 139px);
+ }
+ }
+}
+
+.book-mini-box {
+ @include size(width, 161.5px);
+ display: inline-block;
+ vertical-align: top;
+
+ a {
+ @include inner-box;
+ @include size(height, 271px);
+ @include size(margin, 1px);
+ overflow: hidden;
+ }
+ img.cover {
+ @include size(margin-bottom, 18px);
+ }
+ .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;
+ }
+}
+
+
+
+.work-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ .Book-item {
+ @media screen and (min-width: 32em) {
+ display: inline-block;
+ }
+ vertical-align: top;
+ }
+}
+
+
+.book-box {
+ margin: 0;
+ vertical-align: top;
+
+ @media screen and (min-width: 32em) {
+ @include size(width, 487.5px);
+ }
+
+ .book-box-inner {
+ position: relative;
+ @include inner-box;
+ @include size(min-height, 197.5px);
+ }
+}
+
+
+.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 */
+ @include size(max-width, 600px);
+
+ @media screen and (min-width: 62.5em) {
+ float: left;
+ @include size(width, 536px);
+ }
+ }
+
+ .license-icon {
+ display: block;
+ @include size(margin-top, 5px);
+ }
+
+ @media screen and (min-width: 62.5em) {
+ .book-box-head,
+ .tags,
+ .book-box-tools {
+ @include size(width, 382px);
+ }
+ }
+
+ #theme-list-wrapper {
+ @include size(margin-left, 154px);
+ margin-bottom: 0;
+ @include size(width, 300px);
+
+ p {
+ @include size(margin-top, 10px);
+ @include size(margin-bottom, 10px);
+ }
+ }
+
+ .right-column {
+ @include size(margin-top, 16px);
+
+ @media screen and (min-width: 62.5em) {
+ @include size(width, 415px);
+ // Eat the padding
+ @include size(margin-top, -8px);
+ @include size(margin-right, -10px);
+ }
+
+ .other-tools,
+ .other-download {
+ float: left;
+ @include size(width, 145px);
+ @include size(margin-top, 50px);
+ @include size(margin-bottom, 0);
+ @include size(margin-left, 5px);
+ @include size(margin-right, 0);
+ @include size(font-size, 11px);
+
+ h2 {
+ margin: 0;
+ @include size(font-size, 11px);
+ @include mono;
+ }
+ }
+ .other-download {
+ @include size(margin-left, 15px);
+ @include size(width, 220px);
+ }
+ }
+ }
+}
+
+
+.book-box-body {
+ @include size(margin-bottom, 10px);
+ @media screen and (min-width: 32em) {
+ margin-bottom: 0;
+ @include size(height, 170px);
+ }
+ position: relative;
+
+ .book-box-head {
+ @include size(padding-top, 14px);
+ @include size(margin-bottom, 10px);
+
+ @media screen and (min-width: 32em) {
+ @include size(min-height, 70px);
+ @include size(width, 310px);
+ float: right;
+ }
+
+ a {
+ color: black;
+ }
+ .author {
+ @include size(font-size, 11px);
+ @include mono;
+ @include size(line-height, 13.2px);
+ @include size(max-height, 26.4px);
+ overflow: hidden;
+
+ @media screen and (min-width: 32em) {
+ @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);
+
+ @media screen and (min-width: 32em) {
+ margin-bottom: 0;
+ @include size(height, 57.6px);
+ overflow: hidden;
+ }
+ }
+ }
+
+ .tags {
+ @include size(font-size, 11px);
+ line-height: 1.2em;
+
+ @media screen and (min-width: 32em) {
+ @include size(width, 310px);
+ float: right;
+ clear: right;
+ @include size(max-height, 57.6px);
+ overflow: hidden;
+ }
+
+ .category {
+ display: block;
+ @include size(margin-top, 6px);
+ @include size(margin-bottom, 6px);
+
+ @media screen and (min-width: 32em) {
+ display: inline;
+ }
+
+ .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;
+
+ @media screen and (min-width: 20em) {
+ clear: none;
+ @include size(margin-left, 139px + 15px);
+ }
+
+ @media screen and (min-width: 32em) {
+ @include size(width, 310px);
+ float: right;
+ clear: right;
+ }
+
+ li {
+ @include mono;
+
+ @media screen and (min-width: 32em) {
+ display: inline-block;
+ }
+ }
+
+ .book-box-read {
+ @media screen and (min-width: 32em) {
+ @include size(width, 126.5px);
+ }
+
+ a {
+ @include mono;
+ }
+
+ a:before {
+ content: url("/static/img/read.png");
+ @include size(font-size, 25px);
+ @include size(margin-right, 3.71px);
+ vertical-align: middle;
+ font-weight: normal;
+ }
+ }
+
+ .book-box-download {
+ position: relative;
+
+ @media screen and (min-width: 32em) {
+ @include size(width, 93.5px);
+ }
+
+ a {
+ position: relative;
+ z-index: 101;
+
+ &.downarrow {
+ color: black;
+
+ @media screen and (min-width: 32em) {
+ 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;
+ }
+ }
+ }
+
+ .book-box-formats {
+ @include size(padding-left, 25px);
+
+ @media screen and (min-width: 32em) {
+ display: none;
+ position: absolute;
+
+ @include size(width, 180px);
+ @include size(padding-top, 38px);
+ @include size(padding-bottom, 9px);
+ @include size(padding-left, 19px);
+ @include size(padding-right, 19px);
+
+ @include white-box;
+
+ z-index: 100;
+
+ @include size(top, -16px);
+ @include size(left, -19px);
+ }
+
+ span {
+ display: block;
+ @include size(margin-top, 16px);
+
+ @media screen and (min-width: 32em) {
+ @include size(margin-top, 0);
+
+ &:first-child {
+ @include size(margin-top, 16px);
+ }
+ }
+ }
+ }
+
+ &:hover .book-box-formats,
+ &.hover .book-box-formats {
+ display: block;
+ }
+ }
+
+ .book-box-audiobook {
+ @media screen and (min-width: 32em) {
+ @include size(width, 77px);
+ }
+
+ a:before {
+ content: url("/static/img/listen.png");
+ @include size(font-size, 25px);
+ @include size(margin-right, 3.71px);
+ vertical-align: middle;
+ font-weight: normal;
+ }
+
+ }
+}
+
+
+
+
+.star {
+ @include size(font-size, 22.5px);
+ @include size(margin-right, 11.25px);
+ position: absolute;
+ right: 0;
+
+ 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;
+}
+
+
+#book-detail .see-also {
+ 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);
+ }
+ }
+}
fnp / wolnelektury.git / commitdiff