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