23575ce99afb629959bb67ec19fcfe369c535ea5
[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, 200px);
399       text-align: center;
400       @include size(margin-bottom, 5px);
401     }
402
403     a:before {
404       content: url("/static/img/read-white.png");
405       @include size(font-size, 25px);
406       @include size(margin-right, 3.71px);
407       vertical-align: middle;
408       font-weight: normal;
409       // ugly quick fix
410       position: relative;
411       bottom: 2px;
412     }
413   }
414
415   .book-box-download {
416     position: relative;
417
418     a {
419       @mixin downarrow {
420         color: #0D7E85;
421
422         &:before {
423           content: url("/static/img/download.png");
424           @include size(font-size, 25px);
425           @include size(margin-right, 3.71px);
426           vertical-align: middle;
427           font-weight: normal;
428           display: inline;
429         }
430       }
431
432       &.downarrow {
433         @include downarrow;
434       }
435     }
436
437     .book-box-formats {
438       display: inline-block;
439       max-width: 220px;
440       vertical-align: top;
441       padding-top: 6px;
442
443       a {
444         display: inline-block;
445         @include size(padding, .2em 1em);
446       }
447     }
448   }
449 }
450
451 .star {
452   @include size(font-size, 22.5px);
453   @include size(margin-right, 11.25px);
454   position: absolute;
455   right: 0;
456   z-index: 10;
457
458   button {
459     cursor: pointer;
460     &::-moz-focus-inner {
461       padding: 0;
462       border: 0
463     }
464   }
465   .if-unlike button {
466     font-size: 1em;
467     font-family: inherit;
468     border: 0;
469     background: none;
470     margin: 0;
471     padding: 0;
472     color: #757575;
473   }
474   .if-like a {
475     display: block;
476     text-align: right;
477     padding: 0;
478   }
479 }
480
481 .like .if-unlike {
482   display: none;
483 }
484
485 .unlike .if-like {
486   display: none;
487 }
488
489 #book-detail .see-also,
490 #picture-detail .see-also {
491   display: inline-block;
492   h1 {
493     @include size(height, 32px);
494     margin: 0;
495     @include size(padding-top, 19px);
496     @include size(padding-left, 10px);
497
498     @include size(font-size, 11px);
499     @include mono;
500     font-weight: normal;
501
502     @media screen and (min-width: 33em) {
503       @include size(padding-left, 19px);
504     }
505   }
506 }