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