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