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