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