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 }