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

   1 @import "tools";
   2
   3 @mixin inner-box {
   4     display: block;
   5     color: black;
   6     border-style: solid;
   7     border-color: #ddd;
   8     @include size-px(border-width, 1);
   9     @include size-px(margin, 1);
  10     @include size-px(padding-top, 8);
  11     @include size-px(padding-bottom, 8);
  12     @include size-px(padding-left, 10);
  13     @include size-px(padding-right, 10);
  14     background: #fff;
  15     -moz-box-shadow: 2px 2px 2px #ddd;
  16     -webkit-box-shadow: 2px 2px 2px #ddd;
  17     box-shadow: 2px 2px 2px #ddd;
  18 }
  19
  20 img.cover {
  21     @include size-px(height, 193);
  22     @include size-px(width, 139);
  23 }
  24 .cover-area {
  25     float: left;
  26     @include size-px(margin-right, 15);
  27 }
  28
  29
  30 .book-mini-box {
  31     @include size-px(width, 161.5);
  32     display: inline-block;
  33     vertical-align: top;
  34
  35     a {
  36         @include inner-box;
  37         @include size-px(height, 271);
  38         @include size-px(margin, 1);
  39         overflow: hidden;
  40     }
  41     img.cover {
  42         @include size-px(margin-bottom, 18);
  43     }
  44     .desc {
  45         margin-left: 0;
  46     }
  47     .author {
  48         @include size-px(font-size, 11);
  49         @include mono;
  50         color: #6d7877;
  51         display: block;
  52         overflow: hidden;
  53         text-overflow: ellipsis;
  54         white-space: nowrap;
  55     }
  56     .title {
  57         @include size-px(font-size, 14);
  58         color: #242424;
  59     }
  60 }
  61
  62
  63
  64 .work-list {
  65     margin: 0;
  66     padding: 0;
  67     list-style: none;
  68
  69     .Book-item {
  70         display: inline-block;
  71         vertical-align: top;
  72     }
  73 }
  74
  75 .book-box {
  76     @include size-px(width, 487.5);
  77     margin: 0;
  78     vertical-align: top;
  79
  80     .book-box-inner {
  81         @include inner-box;
  82         @include size-px(min-height, 197.5);
  83     }
  84 }
  85
  86 .book-box-body {
  87     @include size-px(height, 170);
  88     overflow:hidden;
  89     position: relative;
  90
  91     .book-box-head {
  92         @include size-px(min-height, 70);
  93         @include size-px(padding-top, 14);
  94         @include size-px(margin-bottom, 10);
  95
  96         a {
  97             color: black;
  98         }
  99         .author {
 100             @include size-px(font-size, 11);
 101             @include size-px(max-width, 264);
 102             @include mono;
 103         }
 104         .title {
 105             @include size-px(font-size, 24);
 106             @include size-px(height, 57.6);
 107             @include size-px(margin-top, 7.2);
 108             overflow:hidden;
 109         }
 110     }
 111
 112     .tags {
 113         @include size-px(font-size, 11);
 114
 115         .mono {
 116             @include mono;
 117         }
 118
 119         .book-box-tag {
 120             @include size-px(margin-left, 4.4);
 121             @include size-px(margin-right, 5.5);
 122         }
 123     }
 124
 125 }
 126
 127
 128
 129 .book-box-tools {
 130     @include size-px(font-size, 11);
 131     @include size-px(width, 506);
 132     margin: 0;
 133     padding: 0;
 134     @include mono;
 135
 136     li {
 137         display: inline-block;
 138     }
 139
 140     .book-box-read {
 141         @include size-px(width, 126.5);
 142
 143         a {
 144             @include mono;
 145         }
 146
 147         a:before {
 148             content: url("/static/img/read.png");
 149             @include size-px(font-size, 25);
 150             @include size-px(margin-right, 3.71);
 151             vertical-align: middle;
 152             font-weight: normal;
 153         }
 154     }
 155
 156     .book-box-download {
 157         position: relative;
 158         @include size-px(width, 93.5);
 159
 160         a {
 161             position: relative;
 162             z-index: 101;
 163
 164             &.downarrow:before {
 165                 content: url("/static/img/download.png");
 166                 @include size-px(font-size, 25);
 167                 @include size-px(margin-right, 3.71);
 168                 vertical-align: middle;
 169                 font-weight: normal;
 170             }
 171         }
 172
 173         .book-box-formats {
 174             display: none;
 175             position: absolute;
 176
 177             @include size-px(width, 180);
 178             border-color: #ddd;
 179             border-style: solid;
 180             @include size-px(border-width, 1);
 181             @include size-px(padding-top, 38);
 182             @include size-px(padding-bottom, 9);
 183             @include size-px(padding-left, 19);
 184             @include size-px(padding-right, 19);
 185             background: #fff;
 186             -moz-box-shadow: 2px 2px 2px #ddd;
 187             -webkit-box-shadow: 2px 2px 2px #ddd;
 188             box-shadow: 2px 2px 2px #ddd;
 189
 190             z-index: 100;
 191
 192             @include size-px(top, -16);
 193             @include size-px(left, -19);
 194
 195             span {
 196                 display: block;
 197
 198                 &:first-child {
 199                     @include size-px(margin-top, 16);
 200                 }
 201             }
 202         }
 203
 204         &:hover .book-box-formats,
 205         &.hover .book-box-formats {
 206             display: block;
 207         }
 208     }
 209
 210     .book-box-audiobook {
 211         @include size-px(width, 77);
 212
 213         a:before {
 214             content: url("/static/img/listen.png");
 215             @include size-px(font-size, 25);
 216             @include size-px(margin-right, 3.71);
 217             vertical-align: middle;
 218             font-weight: normal;
 219         }
 220
 221     }
 222 }
 223
 224
 225
 226
 227 .star {
 228     @include size-px(font-size, 22.5);
 229     @include size-px(margin-right, 11.25);
 230     position: absolute;
 231     right: 0;
 232
 233     button::-moz-focus-inner {
 234         padding: 0;
 235         border: 0
 236     }
 237     .if-unlike button {
 238         font-size: 1em;
 239         font-family: inherit;
 240         border: 0;
 241         background: none;
 242         margin: 0;
 243         padding: 0;
 244         color: #757575;
 245     }
 246     .if-like a {
 247         display:block;
 248         text-align:right;
 249         padding: 0;
 250     }
 251 }
 252 .like .if-unlike {
 253     display: none;
 254 }
 255 .unlike .if-like {
 256     display: none;
 257 }