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