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