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