wolnelektury/static/css/book_box.css

   1 .book-mini-box, .Book-item {
   2     display: inline-block;
   3     vertical-align: top;
   4 }
   5
   6 .book-wide-box, .book-box {
   7     margin: 0;
   8     vertical-align: top;
   9 }
  10
  11 .book-box {
  12     width: 48.75em;
  13 }
  14
  15 .book-mini-box {
  16     width: 16.15em;
  17 }
  18
  19 .book-wide-box {
  20     /** This is a fullpage box, it must be aligned with the top menu.
  21         This corresponds to a .1em margin below **/
  22     margin-left: -0.1em;
  23 }
  24
  25 /*
  26  * A mini-box wraps it's contents (image + label) in an <a>
  27  * other boxes have an inner box as a wrapper.
  28  */
  29
  30 .book-box-inner {
  31     /* min, so it can grow */
  32     min-height: 19.75em;
  33     margin: .5em;
  34 }
  35
  36 .book-mini-box a, .book-box-inner {
  37     display: block;
  38     color: black;
  39     border: 1px solid #ddd;
  40 /*    height: 20em; */
  41     padding: .8em 1em;
  42     margin: .1em;
  43     background: #fff;
  44     -moz-box-shadow: 2px 2px 2px #ddd;
  45     -webkit-box-shadow: 2px 2px 2px #ddd;
  46     box-shadow: 2px 2px 2px #ddd;
  47 }
  48
  49 .book-mini-box a {
  50     height: 27.1em;
  51     margin: .1em;
  52     overflow: hidden;
  53 }
  54
  55
  56 .book-wide-box .book-box-inner {
  57    /* min, so it can grow */
  58    min-height: 24.4em;
  59 }
  60
  61 .search-result .book-box-body {
  62     width: 31em;
  63 }
  64
  65 .book-list-header {
  66     padding: 0em;
  67     margin-left: -0.1em;
  68 }
  69
  70 .book-list-header .book-box-inner {
  71     min-height: 1em;
  72 }
  73
  74 .book-list-header p {
  75     font-size: 2.4em;
  76     margin: 0.5em;
  77 }
  78
  79
  80 /*
  81  * ingenous float containment hack
  82  * http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/
  83  */
  84 /*
  85 .search-result .book-box-inner {
  86     height: 1%;
  87     overflow: hidden;
  88 }
  89 */
  90
  91 .book-mini-box img, .book-box img, .book-wide-box img, .search-result img {
  92     width: 13.9em;
  93     height: 19.3em;
  94 }
  95 .book-mini-box img {
  96     margin-bottom: 1.8em;
  97 }
  98 .book-box-inner img, .book-wide-box img {
  99     float: left;
 100     margin-right: 1.5em;
 101 }
 102
 103 .book-mini-box .desc {
 104     margin-left:0em;
 105 }
 106 .book-mini-box .author {
 107     font-size: 1.1em;
 108     color: #6d7877;
 109     display: block;
 110     overflow:hidden;
 111     text-overflow: ellipsis;
 112     white-space: nowrap;
 113 }
 114 .book-mini-box .title {
 115     font-size: 1.4em;
 116     color: #242424;
 117 }
 118
 119
 120 .book-box-body {
 121     height: 17em;
 122     overflow:hidden;
 123     position: relative;
 124 }
 125
 126 .book-wide-box .book-box-body {
 127     min-height: 17em;
 128 }
 129
 130 .book-box-head {
 131     min-height: 7em;
 132     padding-top: 1.4em;
 133     margin-bottom: 1em;
 134 }
 135 .book-box-head a {
 136     color: black;
 137 }
 138 .book-box-head .author {
 139     font-size: 1.1em;
 140     max-width: 24em;
 141 }
 142 .book-box-head .title {
 143     font-size: 2.4em;
 144     height: 2.4em;
 145     overflow:hidden;
 146     margin-top: .3em;
 147 }
 148 .book-box-body .tags {
 149     font-size: 1.1em;
 150 }
 151 .book-box-tag {
 152     margin-right: .5em;
 153     margin-left: .4em;
 154 }
 155 .book-box-download {
 156     position: relative;
 157 }
 158
 159 .book-box-download a {
 160     position: relative;
 161     z-index: 101;
 162 }
 163
 164 .book-box-formats {
 165     display: none;
 166     position: absolute;
 167
 168     width: 16.363em;
 169     border: 1px solid #ddd;
 170     padding: 3.454em 1.727em .818em 1.727em;
 171     background: #fff;
 172     -moz-box-shadow: 2px 2px 2px #ddd;
 173     -webkit-box-shadow: 2px 2px 2px #ddd;
 174     box-shadow: 2px 2px 2px #ddd;
 175
 176     z-index: 100;
 177     top: -1.454em;
 178     left: -1.727em;
 179 }
 180 .book-box-formats span {
 181     display: block;
 182 }
 183
 184
 185 .book-box-download:hover .book-box-formats span:first-child {
 186     margin-top: 1.454em;
 187 }
 188
 189 .book-box-download:hover .book-box-formats {
 190     display: block;
 191 }
 192
 193 .book-box-tools {
 194         width: 46em;
 195     font-size: 1.1em;
 196 }
 197
 198 .book-wide-box {
 199         min-width: 48.75em;
 200 }
 201 .book-wide-box .book-box-tools {
 202     margin-left: 14em;
 203     width: 32em;
 204 }
 205
 206 .book-wide-box #theme-list-wrapper {
 207     margin-left: 15.4em;
 208         margin-bottom: 3em;
 209         width: 30em;
 210 }
 211
 212
 213
 214 .book-box-read a:before {
 215     content: "\2609";
 216     font-family: WL-Nav;
 217     font-size: 2.25em;
 218     margin-right: .15em;
 219     vertical-align: middle;
 220     font-weight: normal;
 221 }
 222
 223 .book-box-download a.downarrow:before {
 224     content: "\21E9";
 225     font-family: WL-Nav;
 226     font-size: 2.25em;
 227     margin-right: .15em;
 228     vertical-align: middle;
 229     font-weight: normal;
 230 }
 231
 232 .book-box-audiobook a:before {
 233     content: "\266B";
 234     font-family: WL-Nav;
 235     font-size: 2.25em;
 236     margin-right: .15em;
 237     vertical-align: middle;
 238     font-weight: normal;
 239 }
 240
 241 ul.book-box-tools {
 242     margin: 0;
 243     padding: 0;
 244 }
 245
 246 .book-box-tools li {
 247     display: inline-block;
 248 }
 249
 250 .book-box-read {
 251     width: 11.5em;
 252 }
 253 .book-box-download {
 254     width: 8.5em;
 255 }
 256 .book-box-audiobook {
 257     width: 7em;
 258 }
 259
 260 ul.inline-items, ul.inline-items li {
 261     margin: 0;
 262     padding: 0;
 263 }
 264
 265 ul.inline-items li {
 266     display: inline-block;
 267 }
 268
 269 .book-wide-box .other-tools {
 270     float: left;
 271     width: 14.5em;
 272     margin: 5em 0 0 1.5em;
 273
 274 }
 275
 276 .book-wide-box .other-download {
 277     float: left;
 278     width: 22em;
 279     margin: 5em 1.5em 0em 1.5em;
 280 }
 281 .book-wide-box .other-tools h2,
 282 .book-wide-box .other-download h2,
 283 .book-wide-box .other-tools ul,
 284 .book-wide-box .other-download ul {
 285         font-size: 1.1em;
 286 }
 287
 288
 289
 290 .star {
 291     font-size: 2.25em;
 292     margin-right: .5em;
 293     position: absolute;
 294     right: 0;
 295 }
 296 .star button::-moz-focus-inner {
 297     padding: 0;
 298     border: 0
 299 }
 300 .if-unlike button {
 301     font-size: 1em;
 302     font-family: inherit;
 303     border: 0;
 304     background: none;
 305     margin: 0;
 306     padding: 0;
 307     color: #757575;
 308 }
 309
 310 .if-like a {
 311     display:block;
 312     text-align:right;
 313     padding: 0;
 314 }
 315
 316 .like .if-unlike {
 317     display: none;
 318 }
 319
 320 .unlike .if-like {
 321     display: none;
 322 }
 323
 324 .snippets .snippet-text {
 325     background: #f7f7f7;
 326     font-size: 1.2em;
 327     margin: 1.083em 0em;
 328     padding: 1em;
 329 }
 330
 331 .snippets .anchor {
 332     display: none;
 333 }