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     .book-box-inner {
 118         position: relative;
 119         @include inner-box;
 120         @include size(min-height, 197.5px);
 121     }
 122
 123     .jp-type-playlist {
 124         margin-top: 24px;
 125
 126         @media screen and (min-width: 1024px) {
 127             position: absolute;
 128             margin-top: 0;
 129             right: 20px;
 130             top: 60px;
 131         }
 132     }
 133
 134 }
 135
 136
 137 .book-wide-box {
 138     margin: 0;
 139     vertical-align: top;
 140
 141     @media screen and (min-width: 62.5em) {
 142         @include size(width, 975px);
 143     }
 144
 145     .book-box-inner {
 146         position: relative;
 147         @include size(min-height, 244px);
 148         @include inner-box;
 149         @include size(margin-left, 0);
 150         @include size(margin-right, 0);
 151
 152         .book-left-column { /* FIXME */
 153             @media screen and (min-width: 62.5em) {
 154                 float: left;
 155                 @include size(width, 536px);
 156             }
 157         }
 158
 159         .license-icon {
 160             display: block;
 161             @include size(margin-top, 5px);
 162         }
 163
 164         @include min-screen($S_BOOK_SHORT_FULL) {
 165              // Show full title on the work's page.
 166
 167             .book-box-body {
 168                 height: auto;
 169                 @include size(min-height, 170px);
 170
 171                 .book-box-head .title {
 172                     height: auto;
 173                     @include size(min-height, 57.6px);
 174                 }
 175             }
 176         }
 177
 178         .book-box-head,
 179         .tags,
 180         .book-box-tools {
 181             @media screen and (min-width: 62.5em) {
 182                 @include size(width, 382px);
 183             }
 184         }
 185
 186         #theme-list-wrapper {
 187             @include min-screen($S_BOOK_SHORT_MEDIUM) {
 188                 @include size(margin-left, 154px);
 189                 @include size(width, 300px);
 190             }
 191             margin-bottom: 0;
 192
 193             p {
 194                 @include size(margin-top, 10px);
 195                 @include size(margin-bottom, 10px);
 196             }
 197         }
 198
 199         .right-column {
 200             @include size(margin-top, 16px);
 201             // Eat the padding
 202             @include size(margin-left, -10px);
 203             @include size(margin-right, -10px);
 204             max-width: none;
 205
 206             @media screen and (min-width: 62.5em) {
 207                 @include size(width, 415px);
 208                 // Eat the padding
 209                 @include size(margin-top, -8px);
 210             }
 211
 212             .other-tools,
 213             .other-download {
 214                 @include size(font-size, 11px);
 215                 clear: left;
 216                 @include size(margin-top, 25px);
 217                 line-height: 1.75em;
 218                 @include size(margin-left, 15px);
 219
 220                 h2 {
 221                     margin: 0;
 222                     @include size(font-size, 11px);
 223                     @include mono;
 224                 }
 225
 226                 @include min-screen($S_BOOK_SHORT_FULL) {
 227                     float: left;
 228                     clear: none;
 229                     @include size(width, 145px);
 230                     @include size(margin-top, 50px);
 231                     @include size(margin-right, 0);
 232                     @include size(margin-bottom, 0);
 233                     @include size(margin-left, 5px);
 234                 }
 235
 236                 @include min-screen(1000px) {
 237                     @include size(margin-top, 50px);
 238                     line-height: 1.2em;
 239                 }
 240             }
 241             .other-download {
 242                 @include min-screen($S_BOOK_SHORT_FULL) {
 243                     @include size(margin-left, 15px);
 244                     @include size(width, 220px);
 245                 }
 246             }
 247         }
 248     }
 249
 250     .jp-type-playlist {
 251         margin-top: 24px;
 252
 253         @media screen and (min-width: 1024px) {
 254             float: right;
 255         }
 256     }
 257
 258 }
 259
 260 @media screen and (min-width: 50em) {
 261     .picture.book-wide-box .right-column {
 262         float: none;
 263         @include size(width, 415px);
 264         top: 0;
 265         @include size(margin-left, 550px);
 266         margin-top: 0em;
 267     }
 268 }
 269
 270
 271 .book-box-body {
 272     @include size(margin-bottom, 10px);
 273     position: relative;
 274
 275     .book-box-head,
 276     .tags,
 277     .book-box-tools {
 278         @include min-screen($S_BOOK_SHORT_FULL) {
 279             margin-left: 154px;
 280         }
 281     }
 282
 283     .book-box-head {
 284         @include size(padding-top, 14px);
 285         @include size(margin-bottom, 10px);
 286
 287         @include min-screen($S_BOOK_SHORT_FULL) {
 288             @include size(min-height, 70px);
 289         }
 290
 291         a {
 292             color: black;
 293         }
 294         .author {
 295             @include size(font-size, 11px);
 296             @include mono;
 297             @include size(line-height, 13.2px);
 298             @include size(max-height, 26.4px);
 299             overflow: hidden;
 300
 301             @include min-screen($S_BOOK_SHORT_FULL) {
 302                 @include size(max-width, 264px);
 303             }
 304         }
 305         .title {
 306             @include size(font-size, 24px);
 307             line-height: 1.2em;
 308             @include size(margin-top, 7.2px);
 309             @include size(margin-bottom, 12px);
 310
 311             @include min-screen($S_BOOK_SHORT_FULL) {
 312                 margin-bottom: 0;
 313                 @include size(height, 57.6px);
 314                 overflow: hidden;
 315             }
 316         }
 317     }
 318
 319     .tags {
 320         @include size(font-size, 11px);
 321         line-height: 1.2em;
 322         margin-bottom: 5px;
 323
 324         @include min-screen($S_BOOK_SHORT_FULL) {
 325             clear: right;
 326             @include size(max-height, 57.6px);
 327             overflow: hidden;
 328         }
 329
 330         .category {
 331             display: block;
 332             @include size(margin-top, 6px);
 333             @include size(margin-bottom, 6px);
 334
 335             @include min-screen($S_BOOK_SHORT_FULL) {
 336                 display: inline;
 337             }
 338
 339             .mono {
 340                 @include mono;
 341             }
 342
 343             .book-box-tag {
 344                 @include size(margin-left, 4.4px);
 345                 @include size(margin-right, 5.5px);
 346             }
 347         }
 348     }
 349
 350 }
 351
 352
 353
 354 .book-box-tools {
 355     @include size(font-size, 11px);
 356     margin: 0;
 357     padding: 0;
 358     list-style: none;
 359
 360     clear: left;
 361
 362     @include min-screen($S_BOOK_SHORT_MEDIUM) {
 363         clear: none;
 364         @include size(margin-left, 139px + 15px);
 365     }
 366
 367     li {
 368         @include mono;
 369         margin-top: 0;
 370     }
 371
 372     .book-box-read {
 373         a {
 374             @include mono;
 375         }
 376
 377         a:before {
 378             content: url("/static/img/read.png");
 379             @include size(font-size, 25px);
 380             @include size(margin-right, 3.71px);
 381             vertical-align: middle;
 382             font-weight: normal;
 383         }
 384     }
 385
 386     .book-box-download {
 387         position: relative;
 388
 389         a {
 390             @mixin downarrow {
 391                 color: #0D7E85;
 392
 393                 &:before {
 394                     content: url("/static/img/download.png");
 395                     @include size(font-size, 25px);
 396                     @include size(margin-right, 3.71px);
 397                     vertical-align: middle;
 398                     font-weight: normal;
 399                     display: inline;
 400                 }
 401             }
 402
 403             &.downarrow {
 404                 @include downarrow;
 405             }
 406         }
 407
 408         .book-box-formats {
 409             display: inline-block;
 410             max-width: 220px;
 411             vertical-align: top;
 412             padding-top: 6px;
 413
 414                 a {
 415                     display: inline-block;
 416                     @include size(padding, .2em 1em);
 417                 }
 418         }
 419     }
 420 }
 421
 422
 423
 424
 425 .star {
 426     @include size(font-size, 22.5px);
 427     @include size(margin-right, 11.25px);
 428     position: absolute;
 429     right: 0;
 430
 431     button::-moz-focus-inner {
 432         padding: 0;
 433         border: 0
 434     }
 435     .if-unlike button {
 436         font-size: 1em;
 437         font-family: inherit;
 438         border: 0;
 439         background: none;
 440         margin: 0;
 441         padding: 0;
 442         color: #757575;
 443     }
 444     .if-like a {
 445         display:block;
 446         text-align:right;
 447         padding: 0;
 448     }
 449 }
 450 .like .if-unlike {
 451     display: none;
 452 }
 453 .unlike .if-like {
 454     display: none;
 455 }
 456
 457
 458 #book-detail .see-also,
 459 #picture-detail .see-also {
 460     h1 {
 461         @include size(height, 32px);
 462         margin: 0;
 463         @include size(padding-top, 19px);
 464         @include size(padding-left, 10px);
 465
 466         @include size(font-size, 11px);
 467         @include mono;
 468         font-weight: normal;
 469
 470         @media screen and (min-width: 33em) {
 471             @include size(padding-left, 19px);
 472         }
 473     }
 474 }