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   li {
 394     @include mono;
 395     margin-top: 0;
 396   }
 397
 398   .book-box-read {
 399     a {
 400       @include mono;
 401       display: inline-block;
 402       background: #0D7E85;
 403       color: white;
 404       @include size(width, 170px);
 405       text-align: center;
 406       @include size(margin-bottom, 5px);
 407       @include  size(margin-right, 30px);
 408     }
 409     a.print {
 410       margin-right: 0;
 411     }
 412
 413     a:before {
 414       content: url("/static/img/read-white.png");
 415       @include size(font-size, 25px);
 416       @include size(margin-right, 3.71px);
 417       vertical-align: middle;
 418       font-weight: normal;
 419       // ugly quick fix
 420       position: relative;
 421       bottom: 2px;
 422     }
 423
 424     a.print:before {
 425       content: "";
 426     }
 427   }
 428
 429   .book-box-download {
 430     position: relative;
 431
 432     a {
 433       @mixin downarrow {
 434         color: #0D7E85;
 435
 436         &:before {
 437           content: url("/static/img/download.png");
 438           @include size(font-size, 25px);
 439           @include size(margin-right, 3.71px);
 440           vertical-align: middle;
 441           font-weight: normal;
 442           display: inline;
 443         }
 444       }
 445
 446       &.downarrow {
 447         @include downarrow;
 448       }
 449     }
 450
 451     .book-box-formats {
 452       display: inline-block;
 453       max-width: 300px;
 454       vertical-align: top;
 455       padding-top: 6px;
 456
 457       a {
 458         display: inline-block;
 459         @include size(padding, .2em 1em);
 460       }
 461     }
 462   }
 463 }
 464
 465 .star {
 466   @include size(font-size, 22.5px);
 467   @include size(margin-right, 11.25px);
 468   position: absolute;
 469   right: 0;
 470   z-index: 10;
 471
 472   button {
 473     cursor: pointer;
 474     &::-moz-focus-inner {
 475       padding: 0;
 476       border: 0
 477     }
 478   }
 479   .if-unlike button {
 480     font-size: 1em;
 481     font-family: inherit;
 482     border: 0;
 483     background: none;
 484     margin: 0;
 485     padding: 0;
 486     color: #757575;
 487   }
 488   .if-like a {
 489     display: block;
 490     text-align: right;
 491     padding: 0;
 492   }
 493 }
 494
 495 .like .if-unlike {
 496   display: none;
 497 }
 498
 499 .unlike .if-like {
 500   display: none;
 501 }
 502
 503 #book-detail .see-also,
 504 #picture-detail .see-also {
 505   display: inline-block;
 506   h1 {
 507     @include size(height, 32px);
 508     margin: 0;
 509     @include size(padding-top, 19px);
 510     @include size(padding-left, 10px);
 511
 512     @include size(font-size, 11px);
 513     @include mono;
 514     font-weight: normal;
 515
 516     @media screen and (min-width: 33em) {
 517       @include size(padding-left, 19px);
 518     }
 519   }
 520 }
 521
 522 .abstract {
 523   @include size(font-size, 16px);
 524   line-height: 1.2em;
 525   @include size(margin-bottom, 8px);
 526   @include size(margin-top, 18px);
 527   overflow: hidden;
 528   position: relative;
 529
 530   @media screen and (min-width: 62.5em) {
 531     @include size(width, 536px);
 532   }
 533
 534   p.paragraph {
 535     margin-bottom: 0;
 536     margin-top: 1.2em;
 537
 538     &:first-child {
 539       margin-top: 0;
 540     }
 541   }
 542
 543   &.short {
 544     height: 3.6em;
 545     &:after {
 546        content:' ';
 547        position:absolute;
 548        bottom:0;
 549        width:25%;
 550        height:20px;
 551        background-color:transparent;
 552        /* assume ltr */
 553        right:0;
 554        background-image:-webkit-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
 555        background-image:-moz-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
 556        background-image:-o-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
 557        background-image:linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%)
 558     }
 559   }
 560 }