a1915b9d18bff8fb9d74b98fefdc12d77054f8e9
[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 {
135   .book-left-column {
136     @media screen and (min-width: 1024px) {
137       display: inline-block;
138       @include size(width, 590px);
139     }
140   }
141
142   .audiobook-right-column {
143     @media screen and (min-width: 1024px) {
144       float: right;
145       @include size(width, 360px);
146     }
147   }
148
149   .jp-type-playlist {
150     margin-top: 24px;
151
152     @media screen and (min-width: 1024px) {
153       float: right;
154       margin-top: 48px;
155     }
156   }
157 }
158
159 .book-wide-box {
160   margin: 0;
161   vertical-align: top;
162
163   @media screen and (min-width: 62.5em) {
164     @include size(width, 975px);
165   }
166
167   .book-box-inner {
168     position: relative;
169     @include size(min-height, 244px);
170     @include inner-box;
171     @include size(margin-left, 0);
172     @include size(margin-right, 0);
173
174     .book-left-column { /* FIXME */
175       @media screen and (min-width: 62.5em) {
176         float: left;
177         @include size(width, 536px);
178       }
179     }
180
181     .license-icon {
182       display: block;
183       @include size(margin-top, 5px);
184     }
185
186     @include min-screen($S_BOOK_SHORT_FULL) {
187       // Show full title on the work's page.
188
189       .book-box-body {
190         height: auto;
191         @include size(min-height, 170px);
192
193         .book-box-head .title {
194           height: auto;
195           @include size(min-height, 57.6px);
196         }
197       }
198     }
199
200     .book-box-head,
201     .tags,
202     .book-box-tools {
203       @media screen and (min-width: 62.5em) {
204         @include size(width, 382px);
205       }
206     }
207
208     #theme-list-wrapper {
209       @include min-screen($S_BOOK_SHORT_MEDIUM) {
210         @include size(margin-left, 154px);
211         @include size(width, 300px);
212       }
213       margin-bottom: 0;
214
215       p {
216         @include size(margin-top, 10px);
217         @include size(margin-bottom, 10px);
218       }
219     }
220
221     .right-column {
222       @include size(margin-top, 16px);
223       // Eat the padding
224       @include size(margin-left, -10px);
225       @include size(margin-right, -10px);
226       max-width: none;
227
228       @media screen and (min-width: 62.5em) {
229         @include size(width, 415px);
230         // Eat the padding
231         @include size(margin-top, -8px);
232       }
233
234       .other-tools,
235       .other-download {
236         @include size(font-size, 11px);
237         clear: left;
238         @include size(margin-top, 25px);
239         line-height: 1.75em;
240         @include size(margin-left, 15px);
241
242         h2 {
243           margin: 0;
244           @include size(font-size, 11px);
245           @include mono;
246         }
247
248         @include min-screen($S_BOOK_SHORT_FULL) {
249           float: left;
250           clear: none;
251           @include size(width, 145px);
252           @include size(margin-top, 50px);
253           @include size(margin-right, 0);
254           @include size(margin-bottom, 0);
255           @include size(margin-left, 5px);
256         }
257
258         @include min-screen(1000px) {
259           @include size(margin-top, 50px);
260           line-height: 1.2em;
261         }
262       }
263       .other-download {
264         @include min-screen($S_BOOK_SHORT_FULL) {
265           @include size(margin-left, 15px);
266           @include size(width, 220px);
267         }
268       }
269     }
270   }
271
272   .jp-type-playlist {
273     margin-top: 24px;
274     margin-left: 0.625rem;
275
276     @media screen and (min-width: 1024px) {
277       float: right;
278       margin-right: 0.625rem;
279     }
280   }
281
282 }
283
284 @media screen and (min-width: 50em) {
285   .picture.book-wide-box .right-column {
286     float: none;
287     @include size(width, 415px);
288     top: 0;
289     @include size(margin-left, 550px);
290     margin-top: 0;
291   }
292 }
293
294 .book-box-body {
295   @include size(margin-bottom, 10px);
296   position: relative;
297
298   .book-box-head,
299   .tags,
300   .book-box-tools {
301     @include min-screen($S_BOOK_SHORT_FULL) {
302       margin-left: 154px;
303     }
304   }
305
306   .book-box-head {
307     @include size(padding-top, 14px);
308     @include size(margin-bottom, 10px);
309
310     @include min-screen($S_BOOK_SHORT_FULL) {
311       @include size(min-height, 70px);
312     }
313
314     a {
315       color: black;
316     }
317     .author {
318       @include size(font-size, 11px);
319       @include mono;
320       @include size(line-height, 13.2px);
321       @include size(max-height, 26.4px);
322       overflow: hidden;
323
324       @include min-screen($S_BOOK_SHORT_FULL) {
325         @include size(max-width, 264px);
326       }
327     }
328     .title {
329       @include size(font-size, 24px);
330       line-height: 1.2em;
331       @include size(margin-top, 7.2px);
332       @include size(margin-bottom, 12px);
333
334       @include min-screen($S_BOOK_SHORT_FULL) {
335         margin-bottom: 0;
336         @include size(height, 57.6px);
337         overflow: hidden;
338       }
339     }
340   }
341
342   .tags {
343     @include size(font-size, 11px);
344     line-height: 1.2em;
345     margin-bottom: 5px;
346
347     @include min-screen($S_BOOK_SHORT_FULL) {
348       @include size(max-height, 57.6px);
349       overflow: hidden;
350     }
351
352     .category {
353       display: block;
354       @include size(margin-top, 6px);
355       @include size(margin-bottom, 6px);
356
357       @include min-screen($S_BOOK_SHORT_FULL) {
358         display: inline;
359       }
360
361       .mono {
362         @include mono;
363       }
364
365       .book-box-tag {
366         @include size(margin-left, 4.4px);
367         @include size(margin-right, 5.5px);
368       }
369     }
370   }
371
372 }
373
374 .book-box-tools {
375   @include size(font-size, 11px);
376   margin: 0;
377   padding: 0;
378   list-style: none;
379
380   clear: left;
381
382   @include min-screen($S_BOOK_SHORT_MEDIUM) {
383     clear: none;
384     @include size(margin-left, 139px + 15px);
385   }
386
387   li {
388     @include mono;
389     margin-top: 0;
390   }
391
392   .book-box-read {
393     a {
394       @include mono;
395       display: inline-block;
396       background: #0D7E85;
397       color: white;
398       @include size(width, 170px);
399       text-align: center;
400       @include size(margin-bottom, 5px);
401       @include  size(margin-right, 30px);
402     }
403     a.print {
404       margin-right: 0;
405     }
406
407     a:before {
408       content: url("/static/img/read-white.png");
409       @include size(font-size, 25px);
410       @include size(margin-right, 3.71px);
411       vertical-align: middle;
412       font-weight: normal;
413       // ugly quick fix
414       position: relative;
415       bottom: 2px;
416     }
417
418     a.print:before {
419       content: url("/static/img/print-white.png");
420     }
421   }
422
423   .book-box-download {
424     position: relative;
425
426     a {
427       @mixin downarrow {
428         color: #0D7E85;
429
430         &:before {
431           content: url("/static/img/download.png");
432           @include size(font-size, 25px);
433           @include size(margin-right, 3.71px);
434           vertical-align: middle;
435           font-weight: normal;
436           display: inline;
437         }
438       }
439
440       &.downarrow {
441         @include downarrow;
442       }
443     }
444
445     .book-box-formats {
446       display: inline-block;
447       max-width: 220px;
448       vertical-align: top;
449       padding-top: 6px;
450
451       a {
452         display: inline-block;
453         @include size(padding, .2em 1em);
454       }
455     }
456   }
457 }
458
459 .star {
460   @include size(font-size, 22.5px);
461   @include size(margin-right, 11.25px);
462   position: absolute;
463   right: 0;
464   z-index: 10;
465
466   button {
467     cursor: pointer;
468     &::-moz-focus-inner {
469       padding: 0;
470       border: 0
471     }
472   }
473   .if-unlike button {
474     font-size: 1em;
475     font-family: inherit;
476     border: 0;
477     background: none;
478     margin: 0;
479     padding: 0;
480     color: #757575;
481   }
482   .if-like a {
483     display: block;
484     text-align: right;
485     padding: 0;
486   }
487 }
488
489 .like .if-unlike {
490   display: none;
491 }
492
493 .unlike .if-like {
494   display: none;
495 }
496
497 #book-detail .see-also,
498 #picture-detail .see-also {
499   display: inline-block;
500   h1 {
501     @include size(height, 32px);
502     margin: 0;
503     @include size(padding-top, 19px);
504     @include size(padding-left, 10px);
505
506     @include size(font-size, 11px);
507     @include mono;
508     font-weight: normal;
509
510     @media screen and (min-width: 33em) {
511       @include size(padding-left, 19px);
512     }
513   }
514 }