API links fixes.
[wolnelektury.git] / src / wolnelektury / static / scss / main / book_box.scss
1 @import "../tools";
2 @import "const";
3
4 @mixin inner-box {
5   display: block;
6   color: black;
7   @include size(margin, 1px);
8   @include size(padding, 8px 10px);
9   @include white-box;
10 }
11
12 .cover-area {
13   float: left;
14   @include size(margin-right, 15px);
15   @include size(margin-bottom, 5px);
16
17   @include min-screen($S_BOOK_SHORT_FULL) {
18     //position: absolute;
19     //top: 0;
20     //left: 0;
21     //margin-right: 0;
22   }
23
24   img.cover {
25     @include size(height, 193px / 2);
26     @include size(width, 139px / 2);
27
28     @include min-screen($S_BOOK_SHORT_MEDIUM) {
29       @include size(height, 193px);
30       @include size(width, 139px);
31     }
32   }
33 }
34
35 .book-mini-box {
36   /* Original design fits 6 boxes horizontally in 975px (162.5px each),
37    * but we really want to fit 2 boxes on a 320px mobile screen. */
38
39   @include size(width, 160px);
40   display: inline-block;
41   vertical-align: top;
42
43   @include min-screen(350px) {
44     @include size(width, 162.5px);
45   }
46
47   .book-mini-box-inner {
48     @include inner-box;
49     @include size(height, 271px);
50     @include size(margin, 1px);
51     @include size(padding, 8px 9px);
52     overflow: hidden;
53
54     @include min-screen(350px) {
55       @include size(padding, 8px 10px);
56     }
57
58     a {
59       display: block;
60     }
61   }
62   img.cover {
63     @include size(height, 193px);
64     @include size(width, 139px);
65     @include size(margin-bottom, 18px);
66   }
67   .language {
68     color: #aaa;
69     float: right;
70     @include mono;
71     @include size(font-size, 10px);
72     text-transform: uppercase;
73     position: relative;
74     @include size(top, -20px);
75   }
76   .desc {
77     margin-left: 0;
78   }
79   .author {
80     @include size(font-size, 11px);
81     @include mono;
82     color: #6d7877;
83     display: block;
84     overflow: hidden;
85     text-overflow: ellipsis;
86     white-space: nowrap;
87   }
88   .title {
89     @include size(font-size, 14px);
90     color: #242424;
91     white-space: normal;
92   }
93 }
94
95 .work-list {
96   margin: 0;
97   padding: 0;
98   list-style: none;
99
100   .Book-item {
101     /*@include min-screen($S_BOOK_SHORT_FULL) {
102         display: inline-block;
103     }
104     vertical-align: top;*/
105   }
106 }
107
108 #books-list .plain-list-container .plain-list {
109   p {
110     line-height: 1.2em;
111     margin-bottom: 20px;
112     &.header {
113       font-weight: bold;
114     }
115   }
116 }
117
118 .book-box {
119   margin: 0;
120   vertical-align: top;
121
122   /* */
123   a {
124     color: #0D7E85;
125   }
126
127   .book-box-inner {
128     position: relative;
129     @include inner-box;
130     @include size(min-height, 197.5px);
131   }
132 }
133
134 .audiobook-box, .search-result .book-box {
135   .book-left-column {
136     @media screen and (min-width: 1024px) {
137       display: inline-block;
138       @include size(width, 590px);
139       @include size(min-height, 196px);
140     }
141   }
142
143   .book-right-column {
144     @media screen and (min-width: 1024px) {
145       float: right;
146       @include size(padding-top, 15px);
147       @include size(width, 360px);
148     }
149   }
150
151   .jp-type-playlist {
152     margin-top: 24px;
153
154     @media screen and (min-width: 1024px) {
155       float: right;
156     }
157   }
158 }
159
160 .book-wide-box {
161   margin: 0;
162   vertical-align: top;
163
164   @media screen and (min-width: 62.5em) {
165     @include size(width, 975px);
166   }
167
168   .book-box-inner {
169     position: relative;
170     @include size(min-height, 244px);
171     @include inner-box;
172     @include size(margin-left, 0);
173     @include size(margin-right, 0);
174
175     .book-left-column { /* FIXME */
176       @media screen and (min-width: 62.5em) {
177         float: left;
178         @include size(width, 536px);
179         @include size(min-height, 196px);
180       }
181     }
182
183     .license-icon {
184       display: block;
185       @include size(margin-top, 5px);
186     }
187
188     @include min-screen($S_BOOK_SHORT_FULL) {
189       // Show full title on the work's page.
190
191       .book-box-body {
192         height: auto;
193         @include size(min-height, 170px);
194
195         .book-box-head .title {
196           height: auto;
197           @include size(min-height, 57.6px);
198         }
199       }
200     }
201
202     .book-box-head,
203     .tags,
204     .book-box-tools {
205       @media screen and (min-width: 62.5em) {
206         @include size(width, 382px);
207       }
208     }
209
210     #theme-list-wrapper {
211       @include min-screen($S_BOOK_SHORT_MEDIUM) {
212         @include size(margin-left, 154px);
213         @include size(width, 300px);
214       }
215       margin-bottom: 0;
216
217       p {
218         @include size(margin-top, 10px);
219         @include size(margin-bottom, 10px);
220       }
221     }
222
223     .right-column {
224       @include size(margin-top, 16px);
225       // Eat the padding
226       @include size(margin-left, -10px);
227       @include size(margin-right, -10px);
228       max-width: none;
229
230       @media screen and (min-width: 62.5em) {
231         @include size(width, 415px);
232         // Eat the padding
233         @include size(margin-top, -8px);
234       }
235
236       .other-tools,
237       .other-download {
238         @include size(font-size, 11px);
239         clear: left;
240         @include size(margin-top, 25px);
241         line-height: 1.75em;
242         @include size(margin-left, 15px);
243
244         h2 {
245           margin: 0;
246           @include size(font-size, 11px);
247           @include mono;
248         }
249
250         @include min-screen($S_BOOK_SHORT_FULL) {
251           float: left;
252           clear: none;
253           @include size(width, 145px);
254           @include size(margin-top, 50px);
255           @include size(margin-right, 0);
256           @include size(margin-bottom, 0);
257           @include size(margin-left, 5px);
258         }
259
260         @include min-screen(1000px) {
261           @include size(margin-top, 50px);
262           line-height: 1.2em;
263         }
264       }
265       .other-download {
266         @include min-screen($S_BOOK_SHORT_FULL) {
267           @include size(margin-left, 15px);
268           @include size(width, 220px);
269         }
270       }
271     }
272   }
273
274   .jp-type-playlist {
275     margin-top: 24px;
276     margin-left: 0.625rem;
277
278     @media screen and (min-width: 1024px) {
279       float: right;
280       margin-right: 0.625rem;
281     }
282   }
283
284 }
285
286 @media screen and (min-width: 50em) {
287   .picture.book-wide-box .right-column {
288     float: none;
289     @include size(width, 415px);
290     top: 0;
291     @include size(margin-left, 550px);
292     margin-top: 0;
293   }
294 }
295
296 .book-box-body {
297   @include size(margin-bottom, 10px);
298   position: relative;
299
300   .book-box-head,
301   .tags,
302   .book-box-tools,
303   .abstract {
304     @include min-screen($S_BOOK_SHORT_FULL) {
305       margin-left: 154px;
306     }
307   }
308
309   .book-box-head {
310     @include size(padding-top, 14px);
311     @include size(margin-bottom, 10px);
312
313     @include min-screen($S_BOOK_SHORT_FULL) {
314       @include size(min-height, 70px);
315     }
316
317     a {
318       color: black;
319     }
320     .author {
321       @include size(font-size, 11px);
322       @include mono;
323       @include size(line-height, 13.2px);
324       @include size(max-height, 26.4px);
325       overflow: hidden;
326
327       @include min-screen($S_BOOK_SHORT_FULL) {
328         @include size(max-width, 264px);
329       }
330     }
331     .title {
332       @include size(font-size, 24px);
333       line-height: 1.2em;
334       @include size(margin-top, 7.2px);
335       @include size(margin-bottom, 12px);
336
337       @include min-screen($S_BOOK_SHORT_FULL) {
338         margin-bottom: 0;
339         @include size(height, 57.6px);
340         overflow: hidden;
341       }
342     }
343   }
344
345   .tags {
346     @include size(font-size, 11px);
347     line-height: 1.2em;
348     margin-bottom: 5px;
349
350     @include min-screen($S_BOOK_SHORT_FULL) {
351       @include size(max-height, 57.6px);
352       overflow: hidden;
353     }
354
355     .category {
356       display: block;
357       @include size(margin-top, 6px);
358       @include size(margin-bottom, 6px);
359
360       @include min-screen($S_BOOK_SHORT_FULL) {
361         display: inline-block;
362         @include size(margin-top, 0px);
363         @include size(margin-bottom, 0px);
364         @include size(margin-right, 9px);
365       }
366
367       .mono {
368         @include mono;
369       }
370
371       .book-box-tag {
372         @include size(margin-left, 4.4px);
373         @include size(margin-right, 5.5px);
374       }
375     }
376   }
377
378 }
379
380 .book-box-tools {
381   @include size(font-size, 11px);
382   margin: 0;
383   padding: 0;
384   list-style: none;
385
386   clear: left;
387
388   @include min-screen($S_BOOK_SHORT_MEDIUM) {
389     clear: none;
390     @include size(margin-left, 139px + 15px);
391   }
392
393   li {
394     @include mono;
395     margin-top: 0;
396   }
397
398   .book-box-read {
399     a {
400       @include mono;
401       display: inline-block;
402       background: #0D7E85;
403       color: white;
404       @include size(width, 170px);
405       text-align: center;
406       @include size(margin-bottom, 5px);
407       @include  size(margin-right, 30px);
408     }
409     a.print {
410       margin-right: 0;
411     }
412
413     a:before {
414       content: url("/static/img/read-white.png");
415       @include size(font-size, 25px);
416       @include size(margin-right, 3.71px);
417       vertical-align: middle;
418       font-weight: normal;
419       // ugly quick fix
420       position: relative;
421       bottom: 2px;
422     }
423
424     a.print:before {
425       content: "";
426     }
427   }
428
429   .book-box-download {
430     position: relative;
431
432     a {
433       @mixin downarrow {
434         color: #0D7E85;
435
436         &:before {
437           content: url("/static/img/download.png");
438           @include size(font-size, 25px);
439           @include size(margin-right, 3.71px);
440           vertical-align: middle;
441           font-weight: normal;
442           display: inline;
443         }
444       }
445
446       &.downarrow {
447         @include downarrow;
448       }
449     }
450
451     .book-box-formats {
452       display: inline-block;
453       max-width: 300px;
454       vertical-align: top;
455       padding-top: 6px;
456
457       a {
458         display: inline-block;
459         @include size(padding, .2em 1em);
460       }
461     }
462   }
463 }
464
465 .star {
466   @include size(font-size, 22.5px);
467   @include size(margin-right, 11.25px);
468   position: absolute;
469   right: 0;
470   z-index: 10;
471
472   button {
473     cursor: pointer;
474     &::-moz-focus-inner {
475       padding: 0;
476       border: 0
477     }
478   }
479   .if-unlike button {
480     font-size: 1em;
481     font-family: inherit;
482     border: 0;
483     background: none;
484     margin: 0;
485     padding: 0;
486     color: #757575;
487   }
488   .if-like a {
489     display: block;
490     text-align: right;
491     padding: 0;
492   }
493 }
494
495 .like .if-unlike {
496   display: none;
497 }
498
499 .unlike .if-like {
500   display: none;
501 }
502
503 #book-detail .see-also,
504 #picture-detail .see-also {
505   display: inline-block;
506   h1 {
507     @include size(height, 32px);
508     margin: 0;
509     @include size(padding-top, 19px);
510     @include size(padding-left, 10px);
511
512     @include size(font-size, 11px);
513     @include mono;
514     font-weight: normal;
515
516     @media screen and (min-width: 33em) {
517       @include size(padding-left, 19px);
518     }
519   }
520 }
521
522 .abstract {
523   @include size(font-size, 16px);
524   line-height: 1.2em;
525   @include size(margin-bottom, 8px);
526   @include size(margin-top, 18px);
527   overflow: hidden;
528   position: relative;
529   clear: left;
530
531   @media screen and (min-width: 62.5em) {
532     @include size(width, 536px);
533   }
534
535   p.paragraph {
536     margin-bottom: 0;
537     margin-top: 1.2em;
538
539     &:first-child {
540       margin-top: 0;
541     }
542   }
543
544   &.short {
545     height: 3.6em;
546     &:after {
547        content:' ';
548        position:absolute;
549        bottom:0;
550        width:25%;
551        height:20px;
552        background-color:transparent;
553        /* assume ltr */
554        right:0;
555        background-image:-webkit-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
556        background-image:-moz-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
557        background-image:-o-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
558        background-image:linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%)
559     }
560   }
561 }