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 }