apps/wolnelektury_core/static/css/main/book_box.scss

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