src/wolnelektury/static/scss/main/book_box.scss

   1 @mixin inner-box {
   2   display: block;
   3   color: black;
   4   @include size(margin, 1px);
   5   @include size(padding, 8px 10px);
   6   @include white-box;
   7 }
   8
   9 .cover-area {
  10   float: left;
  11   @include size(margin-right, 15px);
  12   @include size(margin-bottom, 5px);
  13
  14   @include min-screen($S_BOOK_SHORT_FULL) {
  15     position: absolute;
  16     top: 0;
  17     left: 0;
  18     margin-right: 0;
  19   }
  20
  21   img.cover {
  22     @include size(height, 193px / 2);
  23     @include size(width, 139px / 2);
  24
  25     @include min-screen($S_BOOK_SHORT_MEDIUM) {
  26       @include size(height, 193px);
  27       @include size(width, 139px);
  28     }
  29   }
  30 }
  31
  32 .book-mini-box {
  33   /* Original design fits 6 boxes horizontally in 975px (162.5px each),
  34    * but we really want to fit 2 boxes on a 320px mobile screen. */
  35
  36   @include size(width, 160px);
  37   display: inline-block;
  38   vertical-align: top;
  39
  40   @include min-screen(350px) {
  41     @include size(width, 162.5px);
  42   }
  43
  44   .book-mini-box-inner {
  45     @include inner-box;
  46     @include size(height, 271px);
  47     @include size(margin, 1px);
  48     @include size(padding, 8px 9px);
  49     overflow: hidden;
  50
  51     @include min-screen(350px) {
  52       @include size(padding, 8px 10px);
  53     }
  54
  55     a {
  56       display: block;
  57     }
  58   }
  59   img.cover {
  60     @include size(height, 193px);
  61     @include size(width, 139px);
  62     @include size(margin-bottom, 18px);
  63   }
  64   .language {
  65     color: #aaa;
  66     float: right;
  67     @include mono;
  68     @include size(font-size, 10px);
  69     text-transform: uppercase;
  70     position: relative;
  71     @include size(top, -20px);
  72   }
  73   .desc {
  74     margin-left: 0;
  75   }
  76   .author {
  77     @include size(font-size, 11px);
  78     @include mono;
  79     color: #6d7877;
  80     display: block;
  81     overflow: hidden;
  82     text-overflow: ellipsis;
  83     white-space: nowrap;
  84   }
  85   .title {
  86     @include size(font-size, 14px);
  87     color: #242424;
  88     white-space: normal;
  89   }
  90 }
  91
  92 .work-list {
  93   margin: 0;
  94   padding: 0;
  95   list-style: none;
  96
  97   .Book-item {
  98     /*@include min-screen($S_BOOK_SHORT_FULL) {
  99         display: inline-block;
 100     }
 101     vertical-align: top;*/
 102   }
 103 }
 104
 105 #books-list .plain-list-container .plain-list {
 106   p {
 107     line-height: 1em;
 108     &.header {
 109       font-weight: bold;
 110     }
 111   }
 112 }
 113
 114 .book-box {
 115   margin: 0;
 116   vertical-align: top;
 117
 118   /* */
 119   a {
 120     color: #0D7E85;
 121   }
 122
 123   .book-box-inner {
 124     position: relative;
 125     @include inner-box;
 126     @include size(min-height, 197.5px);
 127   }
 128 }
 129
 130 .audiobook-box {
 131   .book-left-column {
 132     @media screen and (min-width: 1024px) {
 133       display: inline-block;
 134       @include size(width, 590px);
 135     }
 136   }
 137
 138   .audiobook-right-column {
 139     @media screen and (min-width: 1024px) {
 140       float: right;
 141       @include size(width, 360px);
 142     }
 143   }
 144
 145   .jp-type-playlist {
 146     margin-top: 24px;
 147
 148     @media screen and (min-width: 1024px) {
 149       float: right;
 150       margin-top: 48px;
 151     }
 152   }
 153 }
 154
 155 .book-wide-box {
 156   margin: 0;
 157   vertical-align: top;
 158
 159   @media screen and (min-width: 62.5em) {
 160     @include size(width, 975px);
 161   }
 162
 163   .book-box-inner {
 164     position: relative;
 165     @include size(min-height, 244px);
 166     @include inner-box;
 167     @include size(margin-left, 0);
 168     @include size(margin-right, 0);
 169
 170     .book-left-column { /* FIXME */
 171       @media screen and (min-width: 62.5em) {
 172         float: left;
 173         @include size(width, 536px);
 174       }
 175     }
 176
 177     .license-icon {
 178       display: block;
 179       @include size(margin-top, 5px);
 180     }
 181
 182     @include min-screen($S_BOOK_SHORT_FULL) {
 183       // Show full title on the work's page.
 184
 185       .book-box-body {
 186         height: auto;
 187         @include size(min-height, 170px);
 188
 189         .book-box-head .title {
 190           height: auto;
 191           @include size(min-height, 57.6px);
 192         }
 193       }
 194     }
 195
 196     .book-box-head,
 197     .tags,
 198     .book-box-tools {
 199       @media screen and (min-width: 62.5em) {
 200         @include size(width, 382px);
 201       }
 202     }
 203
 204     #theme-list-wrapper {
 205       @include min-screen($S_BOOK_SHORT_MEDIUM) {
 206         @include size(margin-left, 154px);
 207         @include size(width, 300px);
 208       }
 209       margin-bottom: 0;
 210
 211       p {
 212         @include size(margin-top, 10px);
 213         @include size(margin-bottom, 10px);
 214       }
 215     }
 216
 217     .right-column {
 218       @include size(margin-top, 16px);
 219       // Eat the padding
 220       @include size(margin-left, -10px);
 221       @include size(margin-right, -10px);
 222       max-width: none;
 223
 224       @media screen and (min-width: 62.5em) {
 225         @include size(width, 415px);
 226         // Eat the padding
 227         @include size(margin-top, -8px);
 228       }
 229
 230       .other-tools,
 231       .other-download {
 232         @include size(font-size, 11px);
 233         clear: left;
 234         @include size(margin-top, 25px);
 235         line-height: 1.75em;
 236         @include size(margin-left, 15px);
 237
 238         h2 {
 239           margin: 0;
 240           @include size(font-size, 11px);
 241           @include mono;
 242         }
 243
 244         @include min-screen($S_BOOK_SHORT_FULL) {
 245           float: left;
 246           clear: none;
 247           @include size(width, 145px);
 248           @include size(margin-top, 50px);
 249           @include size(margin-right, 0);
 250           @include size(margin-bottom, 0);
 251           @include size(margin-left, 5px);
 252         }
 253
 254         @include min-screen(1000px) {
 255           @include size(margin-top, 50px);
 256           line-height: 1.2em;
 257         }
 258       }
 259       .other-download {
 260         @include min-screen($S_BOOK_SHORT_FULL) {
 261           @include size(margin-left, 15px);
 262           @include size(width, 220px);
 263         }
 264       }
 265     }
 266   }
 267
 268   .jp-type-playlist {
 269     margin-top: 24px;
 270     margin-left: 0.625rem;
 271
 272     @media screen and (min-width: 1024px) {
 273       float: right;
 274       margin-right: 0.625rem;
 275     }
 276   }
 277
 278 }
 279
 280 @media screen and (min-width: 50em) {
 281   .picture.book-wide-box .right-column {
 282     float: none;
 283     @include size(width, 415px);
 284     top: 0;
 285     @include size(margin-left, 550px);
 286     margin-top: 0em;
 287   }
 288 }
 289
 290 .book-box-body {
 291   @include size(margin-bottom, 10px);
 292   position: relative;
 293
 294   .book-box-head,
 295   .tags,
 296   .book-box-tools {
 297     @include min-screen($S_BOOK_SHORT_FULL) {
 298       margin-left: 154px;
 299     }
 300   }
 301
 302   .book-box-head {
 303     @include size(padding-top, 14px);
 304     @include size(margin-bottom, 10px);
 305
 306     @include min-screen($S_BOOK_SHORT_FULL) {
 307       @include size(min-height, 70px);
 308     }
 309
 310     a {
 311       color: black;
 312     }
 313     .author {
 314       @include size(font-size, 11px);
 315       @include mono;
 316       @include size(line-height, 13.2px);
 317       @include size(max-height, 26.4px);
 318       overflow: hidden;
 319
 320       @include min-screen($S_BOOK_SHORT_FULL) {
 321         @include size(max-width, 264px);
 322       }
 323     }
 324     .title {
 325       @include size(font-size, 24px);
 326       line-height: 1.2em;
 327       @include size(margin-top, 7.2px);
 328       @include size(margin-bottom, 12px);
 329
 330       @include min-screen($S_BOOK_SHORT_FULL) {
 331         margin-bottom: 0;
 332         @include size(height, 57.6px);
 333         overflow: hidden;
 334       }
 335     }
 336   }
 337
 338   .tags {
 339     @include size(font-size, 11px);
 340     line-height: 1.2em;
 341     margin-bottom: 5px;
 342
 343     @include min-screen($S_BOOK_SHORT_FULL) {
 344       @include size(max-height, 57.6px);
 345       overflow: hidden;
 346     }
 347
 348     .category {
 349       display: block;
 350       @include size(margin-top, 6px);
 351       @include size(margin-bottom, 6px);
 352
 353       @include min-screen($S_BOOK_SHORT_FULL) {
 354         display: inline;
 355       }
 356
 357       .mono {
 358         @include mono;
 359       }
 360
 361       .book-box-tag {
 362         @include size(margin-left, 4.4px);
 363         @include size(margin-right, 5.5px);
 364       }
 365     }
 366   }
 367
 368 }
 369
 370 .book-box-tools {
 371   @include size(font-size, 11px);
 372   margin: 0;
 373   padding: 0;
 374   list-style: none;
 375
 376   clear: left;
 377
 378   @include min-screen($S_BOOK_SHORT_MEDIUM) {
 379     clear: none;
 380     @include size(margin-left, 139px + 15px);
 381   }
 382
 383   li {
 384     @include mono;
 385     margin-top: 0;
 386   }
 387
 388   .book-box-read {
 389     a {
 390       @include mono;
 391       display: inline-block;
 392       background: #0D7E85;
 393       color: white;
 394       @include size(width, 200px);
 395       text-align: center;
 396       @include size(margin-bottom, 5px);
 397     }
 398
 399     a:before {
 400       content: url("/static/img/read-white.png");
 401       @include size(font-size, 25px);
 402       @include size(margin-right, 3.71px);
 403       vertical-align: middle;
 404       font-weight: normal;
 405     }
 406   }
 407
 408   .book-box-download {
 409     position: relative;
 410
 411     a {
 412       @mixin downarrow {
 413         color: #0D7E85;
 414
 415         &:before {
 416           content: url("/static/img/download.png");
 417           @include size(font-size, 25px);
 418           @include size(margin-right, 3.71px);
 419           vertical-align: middle;
 420           font-weight: normal;
 421           display: inline;
 422         }
 423       }
 424
 425       &.downarrow {
 426         @include downarrow;
 427       }
 428     }
 429
 430     .book-box-formats {
 431       display: inline-block;
 432       max-width: 220px;
 433       vertical-align: top;
 434       padding-top: 6px;
 435
 436       a {
 437         display: inline-block;
 438         @include size(padding, .2em 1em);
 439       }
 440     }
 441   }
 442 }
 443
 444 .star {
 445   @include size(font-size, 22.5px);
 446   @include size(margin-right, 11.25px);
 447   position: absolute;
 448   right: 0;
 449
 450   button::-moz-focus-inner {
 451     padding: 0;
 452     border: 0
 453   }
 454   .if-unlike button {
 455     font-size: 1em;
 456     font-family: inherit;
 457     border: 0;
 458     background: none;
 459     margin: 0;
 460     padding: 0;
 461     color: #757575;
 462   }
 463   .if-like a {
 464     display: block;
 465     text-align: right;
 466     padding: 0;
 467   }
 468 }
 469
 470 .like .if-unlike {
 471   display: none;
 472 }
 473
 474 .unlike .if-like {
 475   display: none;
 476 }
 477
 478 #book-detail .see-also,
 479 #picture-detail .see-also {
 480   h1 {
 481     @include size(height, 32px);
 482     margin: 0;
 483     @include size(padding-top, 19px);
 484     @include size(padding-left, 10px);
 485
 486     @include size(font-size, 11px);
 487     @include mono;
 488     font-weight: normal;
 489
 490     @media screen and (min-width: 33em) {
 491       @include size(padding-left, 19px);
 492     }
 493   }
 494 }