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