|
1 /* $Id: system.css,v 1.48 2008/01/09 09:56:39 goba Exp $ */ |
|
2 |
|
3 /* |
|
4 ** HTML elements |
|
5 */ |
|
6 body.drag { |
|
7 cursor: move; |
|
8 } |
|
9 th.active img { |
|
10 display: inline; |
|
11 } |
|
12 tr.even, tr.odd { |
|
13 background-color: #eee; |
|
14 border-bottom: 1px solid #ccc; |
|
15 padding: 0.1em 0.6em; |
|
16 } |
|
17 tr.drag { |
|
18 background-color: #fffff0; |
|
19 } |
|
20 tr.drag-previous { |
|
21 background-color: #ffd; |
|
22 } |
|
23 td.active { |
|
24 background-color: #ddd; |
|
25 } |
|
26 td.checkbox, th.checkbox { |
|
27 text-align: center; |
|
28 } |
|
29 tbody { |
|
30 border-top: 1px solid #ccc; |
|
31 } |
|
32 tbody th { |
|
33 border-bottom: 1px solid #ccc; |
|
34 } |
|
35 thead th { |
|
36 text-align: left; /* LTR */ |
|
37 padding-right: 1em; /* LTR */ |
|
38 border-bottom: 3px solid #ccc; |
|
39 } |
|
40 |
|
41 /* |
|
42 ** Other common styles |
|
43 */ |
|
44 .breadcrumb { |
|
45 padding-bottom: .5em |
|
46 } |
|
47 div.indentation { |
|
48 width: 20px; |
|
49 height: 1.7em; |
|
50 margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */ |
|
51 padding: 0.42em 0 0.42em 0.6em; /* LTR */ |
|
52 float: left; /* LTR */ |
|
53 } |
|
54 div.tree-child { |
|
55 background: url(../../misc/tree.png) no-repeat 11px center; /* LTR */ |
|
56 } |
|
57 div.tree-child-last { |
|
58 background: url(../../misc/tree-bottom.png) no-repeat 11px center; /* LTR */ |
|
59 } |
|
60 div.tree-child-horizontal { |
|
61 background: url(../../misc/tree.png) no-repeat -11px center; |
|
62 } |
|
63 .error { |
|
64 color: #e55; |
|
65 } |
|
66 div.error { |
|
67 border: 1px solid #d77; |
|
68 } |
|
69 div.error, tr.error { |
|
70 background: #fcc; |
|
71 color: #200; |
|
72 padding: 2px; |
|
73 } |
|
74 .warning { |
|
75 color: #e09010; |
|
76 } |
|
77 div.warning { |
|
78 border: 1px solid #f0c020; |
|
79 } |
|
80 div.warning, tr.warning { |
|
81 background: #ffd; |
|
82 color: #220; |
|
83 padding: 2px; |
|
84 } |
|
85 .ok { |
|
86 color: #008000; |
|
87 } |
|
88 div.ok { |
|
89 border: 1px solid #00aa00; |
|
90 } |
|
91 div.ok, tr.ok { |
|
92 background: #dfd; |
|
93 color: #020; |
|
94 padding: 2px; |
|
95 } |
|
96 .item-list .icon { |
|
97 color: #555; |
|
98 float: right; /* LTR */ |
|
99 padding-left: 0.25em; /* LTR */ |
|
100 clear: right; /* LTR */ |
|
101 } |
|
102 .item-list .title { |
|
103 font-weight: bold; |
|
104 } |
|
105 .item-list ul { |
|
106 margin: 0 0 0.75em 0; |
|
107 padding: 0; |
|
108 } |
|
109 .item-list ul li { |
|
110 margin: 0 0 0.25em 1.5em; /* LTR */ |
|
111 padding: 0; |
|
112 list-style: disc; |
|
113 } |
|
114 ol.task-list li.active { |
|
115 font-weight: bold; |
|
116 } |
|
117 .form-item { |
|
118 margin-top: 1em; |
|
119 margin-bottom: 1em; |
|
120 } |
|
121 tr.odd .form-item, tr.even .form-item { |
|
122 margin-top: 0; |
|
123 margin-bottom: 0; |
|
124 white-space: nowrap; |
|
125 } |
|
126 tr.merge-down, tr.merge-down td, tr.merge-down th { |
|
127 border-bottom-width: 0 !important; |
|
128 } |
|
129 tr.merge-up, tr.merge-up td, tr.merge-up th { |
|
130 border-top-width: 0 !important; |
|
131 } |
|
132 .form-item input.error, .form-item textarea.error, .form-item select.error { |
|
133 border: 2px solid red; |
|
134 } |
|
135 .form-item .description { |
|
136 font-size: 0.85em; |
|
137 } |
|
138 .form-item label { |
|
139 display: block; |
|
140 font-weight: bold; |
|
141 } |
|
142 .form-item label.option { |
|
143 display: inline; |
|
144 font-weight: normal; |
|
145 } |
|
146 .form-checkboxes, .form-radios { |
|
147 margin: 1em 0; |
|
148 } |
|
149 .form-checkboxes .form-item, .form-radios .form-item { |
|
150 margin-top: 0.4em; |
|
151 margin-bottom: 0.4em; |
|
152 } |
|
153 .marker, .form-required { |
|
154 color: #f00; |
|
155 } |
|
156 .more-link { |
|
157 text-align: right; /* LTR */ |
|
158 } |
|
159 .more-help-link { |
|
160 font-size: 0.85em; |
|
161 text-align: right; /* LTR */ |
|
162 } |
|
163 .nowrap { |
|
164 white-space: nowrap; |
|
165 } |
|
166 .item-list .pager { |
|
167 clear: both; |
|
168 text-align: center; |
|
169 } |
|
170 .item-list .pager li { |
|
171 background-image:none; |
|
172 display:inline; |
|
173 list-style-type:none; |
|
174 padding: 0.5em; |
|
175 } |
|
176 .pager-current { |
|
177 font-weight:bold; |
|
178 } |
|
179 .tips { |
|
180 margin-top: 0; |
|
181 margin-bottom: 0; |
|
182 padding-top: 0; |
|
183 padding-bottom: 0; |
|
184 font-size: 0.9em; |
|
185 } |
|
186 dl.multiselect dd.b, dl.multiselect dd.b .form-item, dl.multiselect dd.b select { |
|
187 font-family: inherit; |
|
188 font-size: inherit; |
|
189 width: 14em; |
|
190 } |
|
191 dl.multiselect dd.a, dl.multiselect dd.a .form-item { |
|
192 width: 8em; |
|
193 } |
|
194 dl.multiselect dt, dl.multiselect dd { |
|
195 float: left; /* LTR */ |
|
196 line-height: 1.75em; |
|
197 padding: 0; |
|
198 margin: 0 1em 0 0; /* LTR */ |
|
199 } |
|
200 dl.multiselect .form-item { |
|
201 height: 1.75em; |
|
202 margin: 0; |
|
203 } |
|
204 |
|
205 /* |
|
206 ** Inline items (need to override above) |
|
207 */ |
|
208 .container-inline div, .container-inline label { |
|
209 display: inline; |
|
210 } |
|
211 |
|
212 /* |
|
213 ** Tab navigation |
|
214 */ |
|
215 ul.primary { |
|
216 border-collapse: collapse; |
|
217 padding: 0 0 0 1em; /* LTR */ |
|
218 white-space: nowrap; |
|
219 list-style: none; |
|
220 margin: 5px; |
|
221 height: auto; |
|
222 line-height: normal; |
|
223 border-bottom: 1px solid #bbb; |
|
224 } |
|
225 ul.primary li { |
|
226 display: inline; |
|
227 } |
|
228 ul.primary li a { |
|
229 background-color: #ddd; |
|
230 border-color: #bbb; |
|
231 border-width: 1px; |
|
232 border-style: solid solid none solid; |
|
233 height: auto; |
|
234 margin-right: 0.5em; /* LTR */ |
|
235 padding: 0 1em; |
|
236 text-decoration: none; |
|
237 } |
|
238 ul.primary li.active a { |
|
239 background-color: #fff; |
|
240 border: 1px solid #bbb; |
|
241 border-bottom: #fff 1px solid; |
|
242 } |
|
243 ul.primary li a:hover { |
|
244 background-color: #eee; |
|
245 border-color: #ccc; |
|
246 border-bottom-color: #eee; |
|
247 } |
|
248 ul.secondary { |
|
249 border-bottom: 1px solid #bbb; |
|
250 padding: 0.5em 1em; |
|
251 margin: 5px; |
|
252 } |
|
253 ul.secondary li { |
|
254 display: inline; |
|
255 padding: 0 1em; |
|
256 border-right: 1px solid #ccc; /* LTR */ |
|
257 } |
|
258 ul.secondary a { |
|
259 padding: 0; |
|
260 text-decoration: none; |
|
261 } |
|
262 ul.secondary a.active { |
|
263 border-bottom: 4px solid #999; |
|
264 } |
|
265 |
|
266 /* |
|
267 ** Autocomplete styles |
|
268 */ |
|
269 /* Suggestion list */ |
|
270 #autocomplete { |
|
271 position: absolute; |
|
272 border: 1px solid; |
|
273 overflow: hidden; |
|
274 z-index: 100; |
|
275 } |
|
276 #autocomplete ul { |
|
277 margin: 0; |
|
278 padding: 0; |
|
279 list-style: none; |
|
280 } |
|
281 #autocomplete li { |
|
282 background: #fff; |
|
283 color: #000; |
|
284 white-space: pre; |
|
285 cursor: default; |
|
286 } |
|
287 #autocomplete li.selected { |
|
288 background: #0072b9; |
|
289 color: #fff; |
|
290 } |
|
291 /* Animated throbber */ |
|
292 html.js input.form-autocomplete { |
|
293 background-image: url(../../misc/throbber.gif); |
|
294 background-repeat: no-repeat; |
|
295 background-position: 100% 2px; /* LTR */ |
|
296 } |
|
297 html.js input.throbbing { |
|
298 background-position: 100% -18px; /* LTR */ |
|
299 } |
|
300 |
|
301 /* |
|
302 ** Collapsing fieldsets |
|
303 */ |
|
304 html.js fieldset.collapsed { |
|
305 border-bottom-width: 0; |
|
306 border-left-width: 0; |
|
307 border-right-width: 0; |
|
308 margin-bottom: 0; |
|
309 height: 1em; |
|
310 } |
|
311 html.js fieldset.collapsed * { |
|
312 display: none; |
|
313 } |
|
314 html.js fieldset.collapsed legend { |
|
315 display: block; |
|
316 } |
|
317 html.js fieldset.collapsible legend a { |
|
318 padding-left: 15px; /* LTR */ |
|
319 background: url(../../misc/menu-expanded.png) 5px 75% no-repeat; /* LTR */ |
|
320 } |
|
321 html.js fieldset.collapsed legend a { |
|
322 background-image: url(../../misc/menu-collapsed.png); /* LTR */ |
|
323 background-position: 5px 50%; /* LTR */ |
|
324 } |
|
325 /* Note: IE-only fix due to '* html' (breaks Konqueror otherwise). */ |
|
326 * html.js fieldset.collapsed legend, |
|
327 * html.js fieldset.collapsed legend *, |
|
328 * html.js fieldset.collapsed table * { |
|
329 display: inline; |
|
330 } |
|
331 /* For Safari 2 to prevent collapsible fieldsets containing tables from dissapearing due to tableheader.js. */ |
|
332 html.js fieldset.collapsible { |
|
333 position: relative; |
|
334 } |
|
335 html.js fieldset.collapsible legend a { |
|
336 display: block; |
|
337 } |
|
338 /* Avoid jumping around due to margins collapsing into collapsible fieldset border */ |
|
339 html.js fieldset.collapsible .fieldset-wrapper { |
|
340 overflow: auto; |
|
341 } |
|
342 |
|
343 /* |
|
344 ** Resizable text areas |
|
345 */ |
|
346 .resizable-textarea { |
|
347 width: 95%; |
|
348 } |
|
349 .resizable-textarea .grippie { |
|
350 height: 9px; |
|
351 overflow: hidden; |
|
352 background: #eee url(../../misc/grippie.png) no-repeat center 2px; |
|
353 border: 1px solid #ddd; |
|
354 border-top-width: 0; |
|
355 cursor: s-resize; |
|
356 } |
|
357 html.js .resizable-textarea textarea { |
|
358 margin-bottom: 0; |
|
359 width: 100%; |
|
360 display: block; |
|
361 } |
|
362 |
|
363 /* |
|
364 ** Table drag and drop. |
|
365 */ |
|
366 .draggable a.tabledrag-handle { |
|
367 cursor: move; |
|
368 float: left; /* LTR */ |
|
369 height: 1.7em; |
|
370 margin: -0.4em 0 -0.4em -0.5em; /* LTR */ |
|
371 padding: 0.42em 1.5em 0.42em 0.5em; /* LTR */ |
|
372 text-decoration: none; |
|
373 } |
|
374 a.tabledrag-handle:hover { |
|
375 text-decoration: none; |
|
376 } |
|
377 a.tabledrag-handle .handle { |
|
378 margin-top: 4px; |
|
379 height: 13px; |
|
380 width: 13px; |
|
381 background: url(../../misc/draggable.png) no-repeat 0 0; |
|
382 } |
|
383 a.tabledrag-handle-hover .handle { |
|
384 background-position: 0 -20px; |
|
385 } |
|
386 |
|
387 /* |
|
388 ** Teaser splitter |
|
389 */ |
|
390 .joined + .grippie { |
|
391 height: 5px; |
|
392 background-position: center 1px; |
|
393 margin-bottom: -2px; |
|
394 } |
|
395 /* Keeps inner content contained in Opera 9. */ |
|
396 .teaser-checkbox { |
|
397 padding-top: 1px; |
|
398 } |
|
399 div.teaser-button-wrapper { |
|
400 float: right; /* LTR */ |
|
401 padding-right: 5%; /* LTR */ |
|
402 margin: 0; |
|
403 } |
|
404 .teaser-checkbox div.form-item { |
|
405 float: right; /* LTR */ |
|
406 margin: 0 5% 0 0; /* LTR */ |
|
407 padding: 0; |
|
408 } |
|
409 textarea.teaser { |
|
410 display: none; |
|
411 } |
|
412 html.js .no-js { |
|
413 display: none; |
|
414 } |
|
415 |
|
416 /* |
|
417 ** Progressbar styles |
|
418 */ |
|
419 .progress { |
|
420 font-weight: bold; |
|
421 } |
|
422 .progress .bar { |
|
423 background: #fff url(../../misc/progress.gif); |
|
424 border: 1px solid #00375a; |
|
425 height: 1.5em; |
|
426 margin: 0 0.2em; |
|
427 } |
|
428 .progress .filled { |
|
429 background: #0072b9; |
|
430 height: 1em; |
|
431 border-bottom: 0.5em solid #004a73; |
|
432 width: 0%; |
|
433 } |
|
434 .progress .percentage { |
|
435 float: right; /* LTR */ |
|
436 } |
|
437 .progress-disabled { |
|
438 float: left; /* LTR */ |
|
439 } |
|
440 .ahah-progress { |
|
441 float: left; /* LTR */ |
|
442 } |
|
443 .ahah-progress .throbber { |
|
444 width: 15px; |
|
445 height: 15px; |
|
446 margin: 2px; |
|
447 background: transparent url(../../misc/throbber.gif) no-repeat 0px -18px; |
|
448 float: left; /* LTR */ |
|
449 } |
|
450 tr .ahah-progress .throbber { |
|
451 margin: 0 2px; |
|
452 } |
|
453 .ahah-progress-bar { |
|
454 width: 16em; |
|
455 } |
|
456 |
|
457 /* |
|
458 ** Formatting for welcome page |
|
459 */ |
|
460 #first-time strong { |
|
461 display: block; |
|
462 padding: 1.5em 0 .5em; |
|
463 } |
|
464 |
|
465 /* |
|
466 ** To be used with tableselect.js |
|
467 */ |
|
468 tr.selected td { |
|
469 background: #ffc; |
|
470 } |
|
471 |
|
472 /* |
|
473 ** Floating header for tableheader.js |
|
474 */ |
|
475 table.sticky-header { |
|
476 margin-top: 0; |
|
477 background: #fff; |
|
478 } |
|
479 |
|
480 /* |
|
481 ** Installation clean URLs |
|
482 */ |
|
483 #clean-url.install { |
|
484 display: none; |
|
485 } |
|
486 |
|
487 /* |
|
488 ** For anything you want to hide on page load when JS is enabled, so |
|
489 ** that you can use the JS to control visibility and avoid flicker. |
|
490 */ |
|
491 html.js .js-hide { |
|
492 display: none; |
|
493 } |
|
494 |
|
495 /* |
|
496 ** Styles for the system modules page (admin/build/modules) |
|
497 */ |
|
498 #system-modules div.incompatible { |
|
499 font-weight: bold; |
|
500 } |
|
501 |
|
502 /* |
|
503 ** Styles for the system themes page (admin/build/themes) |
|
504 */ |
|
505 #system-themes-form div.incompatible { |
|
506 font-weight: bold; |
|
507 } |
|
508 |
|
509 /* |
|
510 ** Password strength indicator |
|
511 */ |
|
512 span.password-strength { |
|
513 visibility: hidden; |
|
514 } |
|
515 input.password-field { |
|
516 margin-right: 10px; /* LTR */ |
|
517 } |
|
518 div.password-description { |
|
519 padding: 0 2px; |
|
520 margin: 4px 0 0 0; |
|
521 font-size: 0.85em; |
|
522 max-width: 500px; |
|
523 } |
|
524 div.password-description ul { |
|
525 margin-bottom: 0; |
|
526 } |
|
527 .password-parent { |
|
528 margin: 0 0 0 0; |
|
529 } |
|
530 /* |
|
531 ** Password confirmation checker |
|
532 */ |
|
533 input.password-confirm { |
|
534 margin-right: 10px; /* LTR */ |
|
535 } |
|
536 .confirm-parent { |
|
537 margin: 5px 0 0 0; |
|
538 } |
|
539 span.password-confirm { |
|
540 visibility: hidden; |
|
541 } |
|
542 span.password-confirm span { |
|
543 font-weight: normal; |
|
544 } |