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