apps/wolnelektury_core/static/css/book_box.css

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