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