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