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