Mercurial > public > madeira
comparison media/django/css/widgets.css @ 1:0dcfcdf50c62
Initial import of Madeira project from the private repository.
author | Brian Neal <bgneal@gmail.com> |
---|---|
date | Mon, 06 Apr 2009 03:10:59 +0000 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
0:df0370bfe3f0 | 1:0dcfcdf50c62 |
---|---|
1 /* SELECTOR (FILTER INTERFACE) */ | |
2 | |
3 .selector { | |
4 width: 580px; | |
5 float: left; | |
6 } | |
7 | |
8 .selector select { | |
9 width: 270px; | |
10 height: 17.2em; | |
11 } | |
12 | |
13 .selector-available, .selector-chosen { | |
14 float: left; | |
15 width: 270px; | |
16 text-align: center; | |
17 margin-bottom: 5px; | |
18 } | |
19 | |
20 .selector-available h2, .selector-chosen h2 { | |
21 border: 1px solid #ccc; | |
22 } | |
23 | |
24 .selector .selector-available h2 { | |
25 background: white url(../img/admin/nav-bg.gif) bottom left repeat-x; | |
26 color: #666; | |
27 } | |
28 | |
29 .selector .selector-filter { | |
30 background: white; | |
31 border: 1px solid #ccc; | |
32 border-width: 0 1px; | |
33 padding: 3px; | |
34 color: #999; | |
35 font-size: 10px; | |
36 margin: 0; | |
37 text-align: left; | |
38 } | |
39 | |
40 .selector .selector-chosen .selector-filter { | |
41 padding: 4px 5px; | |
42 } | |
43 | |
44 .selector .selector-available input { | |
45 width: 230px; | |
46 } | |
47 | |
48 .selector ul.selector-chooser { | |
49 float: left; | |
50 width: 22px; | |
51 height: 50px; | |
52 background: url(../img/admin/chooser-bg.gif) top center no-repeat; | |
53 margin: 8em 3px 0 3px; | |
54 padding: 0; | |
55 } | |
56 | |
57 .selector-chooser li { | |
58 margin: 0; | |
59 padding: 3px; | |
60 list-style-type: none; | |
61 } | |
62 | |
63 .selector select { | |
64 margin-bottom: 5px; | |
65 margin-top: 0; | |
66 } | |
67 | |
68 .selector-add, .selector-remove { | |
69 width: 16px; | |
70 height: 16px; | |
71 display: block; | |
72 text-indent: -3000px; | |
73 } | |
74 | |
75 .selector-add { | |
76 background: url(../img/admin/selector-add.gif) top center no-repeat; | |
77 margin-bottom: 2px; | |
78 } | |
79 | |
80 .selector-remove { | |
81 background: url(../img/admin/selector-remove.gif) top center no-repeat; | |
82 } | |
83 | |
84 a.selector-chooseall, a.selector-clearall { | |
85 display: block; | |
86 width: 6em; | |
87 text-align: left; | |
88 margin-left: auto; | |
89 margin-right: auto; | |
90 font-weight: bold; | |
91 color: #666; | |
92 padding: 3px 0 3px 18px; | |
93 } | |
94 | |
95 a.selector-chooseall:hover, a.selector-clearall:hover { | |
96 color: #036; | |
97 } | |
98 | |
99 a.selector-chooseall { | |
100 width: 7em; | |
101 background: url(../img/admin/selector-addall.gif) left center no-repeat; | |
102 } | |
103 | |
104 a.selector-clearall { | |
105 background: url(../img/admin/selector-removeall.gif) left center no-repeat; | |
106 } | |
107 | |
108 | |
109 /* STACKED SELECTORS */ | |
110 | |
111 .stacked { | |
112 float: left; | |
113 width: 500px; | |
114 } | |
115 | |
116 .stacked select { | |
117 width: 480px; | |
118 height: 10.1em; | |
119 } | |
120 | |
121 .stacked .selector-available, .stacked .selector-chosen { | |
122 width: 480px; | |
123 } | |
124 | |
125 .stacked .selector-available { | |
126 margin-bottom: 0; | |
127 } | |
128 | |
129 .stacked .selector-available input { | |
130 width: 442px; | |
131 } | |
132 | |
133 .stacked ul.selector-chooser { | |
134 height: 22px; | |
135 width: 50px; | |
136 margin: 0 0 3px 40%; | |
137 background: url(../img/admin/chooser_stacked-bg.gif) top center no-repeat; | |
138 } | |
139 | |
140 .stacked .selector-chooser li { | |
141 float: left; | |
142 padding: 3px 3px 3px 5px; | |
143 } | |
144 | |
145 .stacked .selector-chooseall, .stacked .selector-clearall { | |
146 display: none; | |
147 } | |
148 | |
149 .stacked .selector-add { | |
150 background-image: url(../img/admin/selector_stacked-add.gif); | |
151 } | |
152 | |
153 .stacked .selector-remove { | |
154 background-image: url(../img/admin/selector_stacked-remove.gif); | |
155 } | |
156 | |
157 | |
158 /* DATE AND TIME */ | |
159 | |
160 p.datetime { | |
161 line-height: 20px; | |
162 margin: 0; | |
163 padding: 0; | |
164 color: #666; | |
165 font-size: 11px; | |
166 font-weight: bold; | |
167 } | |
168 | |
169 .datetime span { | |
170 font-size: 11px; | |
171 color: #ccc; | |
172 font-weight: normal; | |
173 white-space: nowrap; | |
174 } | |
175 | |
176 table p.datetime { | |
177 font-size: 10px; | |
178 margin-left: 0; | |
179 padding-left: 0; | |
180 } | |
181 | |
182 /* FILE UPLOADS */ | |
183 | |
184 p.file-upload { | |
185 line-height: 20px; | |
186 margin: 0; | |
187 padding: 0; | |
188 color: #666; | |
189 font-size: 11px; | |
190 font-weight: bold; | |
191 } | |
192 | |
193 .file-upload a { | |
194 font-weight: normal; | |
195 } | |
196 | |
197 .file-upload .deletelink { | |
198 margin-left: 5px; | |
199 } | |
200 | |
201 /* CALENDARS & CLOCKS */ | |
202 | |
203 .calendarbox, .clockbox { | |
204 margin: 5px auto; | |
205 font-size: 11px; | |
206 width: 16em; | |
207 text-align: center; | |
208 background: white; | |
209 position: relative; | |
210 } | |
211 | |
212 .clockbox { | |
213 width: auto; | |
214 } | |
215 | |
216 .calendar { | |
217 margin: 0; | |
218 padding: 0; | |
219 } | |
220 | |
221 .calendar table { | |
222 margin: 0; | |
223 padding: 0; | |
224 border-collapse: collapse; | |
225 background: white; | |
226 width: 99%; | |
227 } | |
228 | |
229 .calendar caption, .calendarbox h2 { | |
230 margin: 0; | |
231 font-size: 11px; | |
232 text-align: center; | |
233 border-top: none; | |
234 } | |
235 | |
236 .calendar th { | |
237 font-size: 10px; | |
238 color: #666; | |
239 padding: 2px 3px; | |
240 text-align: center; | |
241 background: #e1e1e1 url(../img/admin/nav-bg.gif) 0 50% repeat-x; | |
242 border-bottom: 1px solid #ddd; | |
243 } | |
244 | |
245 .calendar td { | |
246 font-size: 11px; | |
247 text-align: center; | |
248 padding: 0; | |
249 border-top: 1px solid #eee; | |
250 border-bottom: none; | |
251 } | |
252 | |
253 .calendar td.selected a { | |
254 background: #C9DBED; | |
255 } | |
256 | |
257 .calendar td.nonday { | |
258 background: #efefef; | |
259 } | |
260 | |
261 .calendar td.today a { | |
262 background: #ffc; | |
263 } | |
264 | |
265 .calendar td a, .timelist a { | |
266 display: block; | |
267 font-weight: bold; | |
268 padding: 4px; | |
269 text-decoration: none; | |
270 color: #444; | |
271 } | |
272 | |
273 .calendar td a:hover, .timelist a:hover { | |
274 background: #5b80b2; | |
275 color: white; | |
276 } | |
277 | |
278 .calendar td a:active, .timelist a:active { | |
279 background: #036; | |
280 color: white; | |
281 } | |
282 | |
283 .calendarnav { | |
284 font-size: 10px; | |
285 text-align: center; | |
286 color: #ccc; | |
287 margin: 0; | |
288 padding: 1px 3px; | |
289 } | |
290 | |
291 .calendarnav a:link, #calendarnav a:visited, #calendarnav a:hover { | |
292 color: #999; | |
293 } | |
294 | |
295 .calendar-shortcuts { | |
296 background: white; | |
297 font-size: 10px; | |
298 line-height: 11px; | |
299 border-top: 1px solid #eee; | |
300 padding: 3px 0 4px; | |
301 color: #ccc; | |
302 } | |
303 | |
304 .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next { | |
305 display: block; | |
306 position: absolute; | |
307 font-weight: bold; | |
308 font-size: 12px; | |
309 background: #C9DBED url(../img/admin/default-bg.gif) bottom left repeat-x; | |
310 padding: 1px 4px 2px 4px; | |
311 color: white; | |
312 } | |
313 | |
314 .calendarnav-previous:hover, .calendarnav-next:hover { | |
315 background: #036; | |
316 } | |
317 | |
318 .calendarnav-previous { | |
319 top: 0; | |
320 left: 0; | |
321 } | |
322 | |
323 .calendarnav-next { | |
324 top: 0; | |
325 right: 0; | |
326 } | |
327 | |
328 .calendar-cancel { | |
329 margin: 0 !important; | |
330 padding: 0; | |
331 font-size: 10px; | |
332 background: #e1e1e1 url(../img/admin/nav-bg.gif) 0 50% repeat-x; | |
333 border-top: 1px solid #ddd; | |
334 } | |
335 | |
336 .calendar-cancel a { | |
337 padding: 2px; | |
338 color: #999; | |
339 } | |
340 | |
341 ul.timelist, .timelist li { | |
342 list-style-type: none; | |
343 margin: 0; | |
344 padding: 0; | |
345 } | |
346 | |
347 .timelist a { | |
348 padding: 2px; | |
349 } | |
350 | |
351 /* INLINE ORDERER */ | |
352 | |
353 ul.orderer { | |
354 position: relative; | |
355 padding: 0 !important; | |
356 margin: 0 !important; | |
357 list-style-type: none; | |
358 } | |
359 | |
360 ul.orderer li { | |
361 list-style-type: none; | |
362 display: block; | |
363 padding: 0; | |
364 margin: 0; | |
365 border: 1px solid #bbb; | |
366 border-width: 0 1px 1px 0; | |
367 white-space: nowrap; | |
368 overflow: hidden; | |
369 background: #e2e2e2 url(../img/admin/nav-bg-grabber.gif) repeat-y; | |
370 } | |
371 | |
372 ul.orderer li:hover { | |
373 cursor: move; | |
374 background-color: #ddd; | |
375 } | |
376 | |
377 ul.orderer li a.selector { | |
378 margin-left: 12px; | |
379 overflow: hidden; | |
380 width: 83%; | |
381 font-size: 10px !important; | |
382 padding: 0.6em 0; | |
383 } | |
384 | |
385 ul.orderer li a:link, ul.orderer li a:visited { | |
386 color: #333; | |
387 } | |
388 | |
389 ul.orderer li .inline-deletelink { | |
390 position: absolute; | |
391 right: 4px; | |
392 margin-top: 0.6em; | |
393 } | |
394 | |
395 ul.orderer li.selected { | |
396 background-color: #f8f8f8; | |
397 border-right-color: #f8f8f8; | |
398 } | |
399 | |
400 ul.orderer li.deleted { | |
401 background: #bbb url(../img/admin/deleted-overlay.gif); | |
402 } | |
403 | |
404 ul.orderer li.deleted a:link, ul.orderer li.deleted a:visited { | |
405 color: #888; | |
406 } | |
407 | |
408 ul.orderer li.deleted .inline-deletelink { | |
409 background-image: url(../img/admin/inline-restore.png); | |
410 } | |
411 | |
412 ul.orderer li.deleted:hover, ul.orderer li.deleted a.selector:hover { | |
413 cursor: default; | |
414 } | |
415 | |
416 /* EDIT INLINE */ | |
417 | |
418 .inline-deletelink { | |
419 display: block; | |
420 text-indent: -9999px; | |
421 background: transparent url(../img/admin/inline-delete.png) no-repeat; | |
422 width: 15px; | |
423 height: 15px; | |
424 margin: 0.4em 0; | |
425 border: 0px none; | |
426 } | |
427 | |
428 .inline-deletelink:hover { | |
429 background-position: -15px 0; | |
430 cursor: pointer; | |
431 } | |
432 | |
433 .editinline button.addlink { | |
434 border: 0px none; | |
435 color: #5b80b2; | |
436 font-size: 100%; | |
437 cursor: pointer; | |
438 } | |
439 | |
440 .editinline button.addlink:hover { | |
441 color: #036; | |
442 cursor: pointer; | |
443 } | |
444 | |
445 .editinline table .help { | |
446 text-align: right; | |
447 float: right; | |
448 padding-left: 2em; | |
449 } | |
450 | |
451 .editinline tfoot .addlink { | |
452 white-space: nowrap; | |
453 } | |
454 | |
455 .editinline table thead th:last-child { | |
456 border-left: none; | |
457 } | |
458 | |
459 .editinline tr.deleted { | |
460 background: #ddd url(../img/admin/deleted-overlay.gif); | |
461 } | |
462 | |
463 .editinline tr.deleted .inline-deletelink { | |
464 background-image: url(../img/admin/inline-restore.png); | |
465 } | |
466 | |
467 .editinline tr.deleted td:hover { | |
468 cursor: default; | |
469 } | |
470 | |
471 .editinline tr.deleted td:first-child { | |
472 background-image: none !important; | |
473 } | |
474 | |
475 /* EDIT INLINE - STACKED */ | |
476 | |
477 .editinline-stacked { | |
478 min-width: 758px; | |
479 } | |
480 | |
481 .editinline-stacked .inline-object { | |
482 margin-left: 210px; | |
483 background: white; | |
484 } | |
485 | |
486 .editinline-stacked .inline-source { | |
487 float: left; | |
488 width: 200px; | |
489 background: #f8f8f8; | |
490 } | |
491 | |
492 .editinline-stacked .inline-splitter { | |
493 float: left; | |
494 width: 9px; | |
495 background: #f8f8f8 url(../img/admin/inline-splitter-bg.gif) 50% 50% no-repeat; | |
496 border-right: 1px solid #ccc; | |
497 } | |
498 | |
499 .editinline-stacked .controls { | |
500 clear: both; | |
501 background: #e1e1e1 url(../img/admin/nav-bg.gif) top left repeat-x; | |
502 padding: 3px 4px; | |
503 font-size: 11px; | |
504 border-top: 1px solid #ddd; | |
505 } | |
506 |