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