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