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