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