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