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