r52581 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r52580‎ | r52581 | r52582 >
Date:21:32, 29 June 2009
Author:tparscal
Status:ok (Comments)
Tags:
Comment:
Divided stylesheets into LTR and RTL versions, but also reverted strange hacks to make things sort of work in may browsers. Still need to solve RTL problems in browsers with certain CSS limitations.
Modified paths:
  • /trunk/phase3/skins/vector/images/portal-break-ltr.png (added) (history)
  • /trunk/phase3/skins/vector/images/portal-break-rtl.png (added) (history)
  • /trunk/phase3/skins/vector/images/portal-break.png (deleted) (history)
  • /trunk/phase3/skins/vector/main-ltr.css (added) (history)
  • /trunk/phase3/skins/vector/main.css (deleted) (history)

Diff [purge]

Index: trunk/phase3/skins/vector/main.css
@@ -1,1117 +0,0 @@
2 -/* Framework */
3 -html,
4 -body {
5 - height: 100%;
6 - margin: 0;
7 - padding: 0;
8 - font-family: sans-serif;
9 - font-size: small;
10 -}
11 -body.rtl {
12 - direction: rtl;
13 - unicode-bidi: embed;
14 -}
15 -body {
16 - background-image: url(images/page-base.png);
17 -}
18 -/* Content */
19 -div#content {
20 - margin-left: 12em;
21 - padding: 1em;
22 - background-image: url(images/content-base.png);
23 - background-position: top left;
24 - background-repeat: repeat-y;
25 - background-color: white;
26 -}
27 -body.rtl div#content {
28 - margin-left: auto;
29 - margin-right: 12em;
30 - background-position: top right;
31 -}
32 -/* Head */
33 -div#page-base {
34 - height: 6em;
35 - background-color: white;
36 - background-image: url(images/page-fade.png);
37 - background-position: bottom left;
38 - background-repeat: repeat-x;
39 -}
40 -body.rtl div#page-base {
41 - background-position: bottom left;
42 -}
43 -div#head-base {
44 - margin-top: -6em;
45 - margin-left: 12em;
46 - height: 6em;
47 - background-image: url(images/head-base.png);
48 - background-position: bottom left;
49 - background-repeat: repeat-x;
50 -}
51 -body.rtl div#head-base {
52 - margin-left: auto;
53 - margin-right: 12em;
54 - background-position: bottom right;
55 -}
56 -div#head {
57 - position: absolute;
58 - top: 0;
59 - right: 0;
60 - width: 100%;
61 -}
62 -body.rtl div#head {
63 - right: auto;
64 - left: 0;
65 - margin-right: auto;
66 -}
67 -div#head ul,
68 -div#head li {
69 - list-style: none;
70 - margin: 0;
71 - padding: 0;
72 -}
73 -div#head h5 {
74 - margin: 0;
75 - padding: 0;
76 -}
77 - /* Personal */
78 - div#personal {
79 - position: absolute;
80 - top: 0;
81 - right: 0.75em;
82 - }
83 - body.rtl div#personal {
84 - left: 0.75em;
85 - right: auto;
86 - }
87 - div#personal h5 {
88 - display: none;
89 - }
90 - div#personal li {
91 - float: left;
92 - margin-left: 0.75em;
93 - margin-top: 0.5em;
94 - font-size: 0.9em;
95 - }
96 - body.rtl div#personal li {
97 - margin-left: auto;
98 - margin-right: 0.75em;
99 - }
100 - body.rtl div#personal > ul > li {
101 - float: right;
102 - margin-left: 0;
103 - margin-right: 0.75em;
104 - }
105 - /* Navigation */
106 - div#left-navigation {
107 - margin-top: 3em;
108 - margin-left: 12em;
109 - }
110 - /* OVERRIDDEN BY COMPLIANT BROWSERS */
111 - body.rtl div#left-navigation {
112 - margin-left: 0;
113 - }
114 - /* IGNORED BY IE6 */
115 - body.rtl div#head > div#left-navigation {
116 - margin-left: auto;
117 - margin-right: 12em;
118 - }
119 - div#right-navigation {
120 - float: right;
121 - }
122 - /* OVERRIDDEN BY COMPLIANT BROWSERS */
123 - body.rtl div#right-navigation {
124 - margin-right: 6em;
125 - }
126 - /* IGNORED BY IE6 */
127 - body.rtl div#head > div#right-navigation {
128 - margin-right: auto;
129 - float: left;
130 - }
131 - /* Navigation Labels */
132 - div#namespaces h5,
133 - div#variants h5,
134 - div#views h5,
135 - div#actions h5 span,
136 - div#search h5 {
137 - display: none;
138 - }
139 - /* Namespaces and Views */
140 - div#namespaces,
141 - div#views {
142 - float: left;
143 - background-image: url(images/tab-break.png);
144 - background-position: bottom left;
145 - background-repeat: no-repeat;
146 - padding-left: 1px;
147 - }
148 - /* OVERRIDDEN BY COMPLIANT BROWSERS */
149 - body.rtl div#left-navigation div#namespaces {
150 - padding-left: 0;
151 - }
152 - /* IGNORED BY IE6 */
153 - body.rtl div#left-navigation > div#namespaces,
154 - body.rtl div#right-navigation > div#views {
155 - float: right;
156 - background-position: bottom right;
157 - padding-left: 0;
158 - padding-right: 1px;
159 - }
160 - /* OVERRIDDEN BY COMPLIANT BROWSERS */
161 - div#namespaces ul,
162 - div#views ul {
163 - float: left;
164 - height: 100%;
165 - }
166 - /* IGNORED BY IE6 */
167 - body.rtl div#left-navigation > div#namespaces ul,
168 - body.rtl div#right-navigation > div#views ul {
169 - float: right;
170 - }
171 - /* OVERRIDDEN BY COMPLIANT BROWSERS */
172 - div#namespaces ul li,
173 - div#views ul li {
174 - display: inline-block;
175 - float: left;
176 - height: 100%;
177 - background-image: url(images/tab-normal-fade.png);
178 - background-position: bottom left;
179 - background-repeat: repeat-x;
180 - }
181 - /* IGNORED BY IE6 */
182 - div#namespaces ul > li,
183 - div#views ul > li {
184 - display: block;
185 - }
186 - /* IGNORED BY IE6 */
187 - body.rtl div#namespaces > ul > li,
188 - body.rtl div#views > ul > li {
189 - float: right;
190 - background-position: bottom right;
191 - }
192 - div#namespaces li.selected,
193 - div#views li.selected {
194 - background-image: url(images/tab-current-fade.png);
195 - }
196 - /* OVERRIDDEN BY COMPLIANT BROWSERS */
197 - div#namespaces li a,
198 - div#views li a {
199 - display: inline-block;
200 - height: 3em;
201 - padding-left: 0.5em;
202 - padding-right: 0.5em;
203 - background-image: url(images/tab-break.png);
204 - background-position: bottom right;
205 - background-repeat: no-repeat;
206 - }
207 - /* IGNORED BY IE6 */
208 - div#namespaces li > a,
209 - div#views li > a {
210 - display: block;
211 - }
212 - /* IGNORED BY IE6 */
213 - body.rtl div#namespaces li > a,
214 - body.rtl div#views li > a {
215 - background-position: bottom left;
216 - }
217 - /* OVERRIDDEN BY COMPLIANT BROWSERS */
218 - div#namespaces a span,
219 - div#views a span {
220 - color: #0645ad;
221 - display: inline-block;
222 - padding-top: 1.25em;
223 - cursor: pointer;
224 - }
225 - /* IGNORED BY IE6 */
226 - div#namespaces a > span,
227 - div#views a > span {
228 - float: left;
229 - display: block;
230 - }
231 - div#namespaces li.selected a span,
232 - div#views li.selected a:visited span {
233 - color: #333333;
234 - cursor: default;
235 - text-decoration: none;
236 - }
237 - div#namespaces li.new a span,
238 - div#namespaces li.new a:visited span{
239 - color: #a55858;
240 - }
241 - /* Variants and Actions */
242 - div#variants,
243 - div#actions {
244 - float: left;
245 - background-image: url(images/arrow-down-icon.png);
246 - background-position: center center;
247 - background-repeat: no-repeat;
248 - }
249 - /* IGNORED BY IE6 */
250 - body.rtl div#left-navigation > div#variants,
251 - body.rtl div#right-navigation > div#actions {
252 - float: right;
253 - }
254 - div#variants h5,
255 - div#actions h5 {
256 - float: left;
257 - }
258 - /* IGNORED BY IE6 */
259 - body.rtl div#variants > h5,
260 - body.rtl div#actions > h5 {
261 - float: right;
262 - }
263 - /* OVERRIDDEN BY COMPLIANT BROWSERS */
264 - div#variants h5 a,
265 - div#actions h5 a {
266 - display: inline-block;
267 - width: 24px;
268 - height: 3em;
269 - text-decoration: none;
270 - background-image: url(images/tab-break.png);
271 - background-position: bottom right;
272 - background-repeat: no-repeat;
273 - }
274 - /* IGNORED BY IE6 */
275 - div#variants h5 > a,
276 - div#actions h5 > a {
277 - display: block;
278 - }
279 - /* IGNORED BY IE6 */
280 - body.rtl div#variants > h5 a,
281 - body.rtl div#actions > h5 a {
282 - display: inline-block;
283 - background-position: bottom left;
284 - }
285 - div#variants div.menu,
286 - div#actions div.menu {
287 - display: none;
288 - clear: both;
289 - }
290 - div#variants:hover div.menu,
291 - div#actions:hover div.menu {
292 - display: block;
293 - }
294 - div#variants ul,
295 - div#actions ul {
296 - position: absolute;
297 - background-color: white;
298 - border: solid 1px silver;
299 - border-top-width: 0;
300 - padding: 0;
301 - margin: 0;
302 - margin-left: -1px;
303 - }
304 - /* OVERRIDDEN BY COMPLIANT BROWSERS */
305 - body.rtl div#variants ul,
306 - body.rtl div#actions ul {
307 - margin-left: 0;
308 - margin-right: -24px;
309 - }
310 - /* IGNORED BY IE6 */
311 - body.rtl div#variants div.menu > ul,
312 - body.rtl div#actions div.menu > ul {
313 - margin-left: 0;
314 - margin-right: -1px;
315 - }
316 - /* OVERRIDDEN BY COMPLIANT BROWSERS */
317 - div#variants:hover li a,
318 - div#actions li a {
319 - display: inline-block;
320 - padding: 0.5em;
321 - }
322 - /* IGNORED BY IE6 */
323 - div#variants:hover li > a,
324 - div#actions li > a {
325 - display: block;
326 - }
327 - /* Search */
328 - div#search {
329 - float: left;
330 - margin-right: 0.75em;
331 - }
332 - /* OVERRIDDEN BY COMPLIANT BROWSERS */
333 - body.rtl div#right-navigation div#search {
334 - margin-right: 0;
335 - }
336 - /* IGNORED BY IE6 */
337 - body.rtl div#right-navigation > div#search {
338 - float: right;
339 - margin-left: 0.75em;
340 - }
341 - div#search form,
342 - div#search input {
343 - float: left;
344 - margin-top: 0.4em;
345 - margin-left: 0.25em;
346 - }
347 - /* IGNORED BY IE6 */
348 - body.rtl div#search > form,
349 - body.rtl div#search > form > input {
350 - float: right;
351 - margin-left: 0;
352 - margin-right: 0.25em;
353 - }
354 -/* Panel */
355 -div#panel {
356 - position: absolute;
357 - top: 12em;
358 - width: 12em;
359 - left: 0;
360 -}
361 -body.rtl div#panel {
362 - left: auto;
363 - right: 0;
364 -}
365 - div#panel div.portal {
366 - padding-top: 1.5em;
367 - }
368 - div#panel div.portal h5 {
369 - font-weight: normal;
370 - color: #666666;
371 - padding: 0.5em;
372 - padding-top: 0;
373 - padding-left: 1.25em;
374 - cursor: default;
375 - }
376 - body.rtl div#panel div.portal h5 {
377 - padding: 0;
378 - margin: 0;
379 - padding-left: 0;
380 - padding-right: 1.25em;
381 - }
382 - div#panel div.portal div.body {
383 - margin-top: 0.25em;
384 - padding-top: 0.5em;
385 - margin-left: 1.25em;
386 - background-image: url(images/portal-break.png);
387 - background-repeat: no-repeat;
388 - background-position: top left;
389 - }
390 - body.rtl div#panel div.portal div.body {
391 - padding-left: 0;
392 - margin-right: 1.25em;
393 - background-position: top right;
394 - }
395 - div#panel div.portal div.body ul {
396 - list-style: none;
397 - padding: 0;
398 - margin: 0;
399 - }
400 - div#panel div.portal div.body ul li {
401 - padding: 0;
402 - padding-bottom: 0.5em;
403 - margin: 0;
404 - overflow: hidden;
405 - }
406 - div#panel div.portal div.body ul li a {
407 - color: #0645ad;
408 - }
409 - div#panel div.portal div.body ul li a:visited {
410 - color: #0b0080;
411 - }
412 -/* Foot */
413 -div#foot {
414 - margin-left: 12em;
415 - margin-top: 0;
416 - padding: 0.75em;
417 - background-image: url(images/foot-base.png);
418 - background-position: top left;
419 - background-repeat: repeat-x;
420 -}
421 -body.rtl div#foot {
422 - margin-left: 0;
423 - margin-right: 12em;
424 - background-position: top right;
425 -}
426 -div#foot ul {
427 - list-style: none;
428 - margin: 0;
429 - padding: 0;
430 -}
431 -div#foot ul li {
432 - margin: 0;
433 - padding: 0;
434 - padding-top: 0.5em;
435 - padding-bottom: 0.5em;
436 - color: #333333;
437 - font-size: 0.9em;
438 -}
439 -div#foot ul#foot-icons {
440 - float: right;
441 -}
442 -body.rtl div#foot ul#foot-icons {
443 - float: left;
444 -}
445 -div#foot ul#foot-places {
446 - float: left;
447 -}
448 -body.rtl div#foot ul#foot-places {
449 - float: right;
450 -}
451 -div#foot ul#foot-icons li {
452 - float: left;
453 - margin-left: 0.5em;
454 - line-height: 2em;
455 -}
456 -body.rtl div#foot ul#foot-icons li {
457 - float: right;
458 - margin-left: 0;
459 - margin-right: 0.5em;
460 -}
461 -div#foot ul#foot-places li {
462 - float: left;
463 - margin-right: 0.5em;
464 - line-height: 2em;
465 -}
466 -body.rtl div#foot ul#foot-places li {
467 - float: right;
468 - margin-left: 0.5em;
469 - margin-right: 0;
470 -}
471 -
472 -/* Logo */
473 -div#logo {
474 - position: absolute;
475 - top: 0;
476 - left: 0;
477 - height: 12em;
478 - width: 12em;
479 -}
480 -body.rtl #logo {
481 - left: auto;
482 - right: 0;
483 -}
484 -div#logo a {
485 - display: block;
486 - width: 12em;
487 - height: 12em;
488 - background-repeat: no-repeat;
489 - background-position: 50% 50%;
490 - text-decoration: none;
491 -}
492 -
493 -/*
494 - *
495 - * The following code is highly modified from monobook. It would be nice if the
496 - * preftoc id was more human readable like preferences-toc for instance,
497 - * howerver this would require backporting the other skins.
498 - */
499 -
500 -/* Preferences */
501 -#preftoc {
502 - /* Tabs */
503 - float: left;
504 - clear: both;
505 - margin: 0 !important;
506 - padding: 0 !important;
507 - height: 2.25em;
508 - background-image: url(images/preferences-break.png);
509 - background-position: bottom left;
510 - background-repeat: no-repeat;
511 -}
512 -/* IGNORED BY IE6 */
513 -body.rtl form > #preftoc {
514 - float: right;
515 - background-position: bottom right;
516 -}
517 - #preftoc li {
518 - /* Tab */
519 - float: left;
520 - margin: 0;
521 - padding: 0;
522 - padding-right: 1px;
523 - height: 2.25em;
524 - white-space: nowrap;
525 - list-style-type: none;
526 - list-style-image: none;
527 - background-image: url(images/preferences-break.png);
528 - background-position: bottom right;
529 - background-repeat: no-repeat;
530 - }
531 - /* IGNORED BY IE6 */
532 - #preftoc li:first-child {
533 - margin-left: 1px;
534 - }
535 - /* IGNORED BY IE6 */
536 - body.rtl #preftoc li:first-child {
537 - margin-left: 0;
538 - margin-right: 1px;
539 - }
540 - /* IGNORED BY IE6 */
541 - body.rtl #preftoc > li {
542 - float: right;
543 - padding-right: 0;
544 - padding-left: 1px;
545 - background-position: bottom left;
546 - }
547 - #preftoc a,
548 - #preftoc a:active {
549 - display: inline-block;
550 - position: relative;
551 - color: #0645ad;
552 - padding: 0.5em;
553 - text-decoration: none;
554 - background-image: none;
555 - }
556 - #preftoc a:hover {
557 - text-decoration: underline;
558 - }
559 - #preftoc li.selected a {
560 - cursor: default;
561 - background-image: url(images/preferences-fade.png);
562 - background-position: bottom;
563 - background-repeat: repeat-x;
564 - color: #333333;
565 - cursor: default;
566 - text-decoration: none;
567 - }
568 -#preferences {
569 - float: left;
570 - zoom: 1;
571 - width: 100%;
572 - margin: 0;
573 - clear: both;
574 - border: solid 1px #cccccc;
575 - background-color: #f9f9f9;
576 - background-image: url(images/preferences-base.png);
577 -}
578 -#preferences fieldset.prefsection {
579 - border: none;
580 - padding: 0;
581 - margin: 1em;
582 -}
583 -#preferences fieldset.prefsection fieldset {
584 - border: none;
585 - border-top: solid 1px #cccccc;
586 -}
587 -#preferences legend {
588 - color: #666666;
589 -}
590 -#preferences fieldset.prefsection legend.mainLegend {
591 - display: none;
592 -}
593 -#preferences td {
594 - padding-left: 0.5em;
595 - padding-right: 0.5em;
596 -}
597 -#preferences td.htmlform-tip {
598 - font-size: x-small;
599 - padding: .2em 2em;
600 - color: #666666;
601 -}
602 -#preferences div.mw-prefs-buttons {
603 - padding: 1em;
604 -}
605 -#preferences div.mw-prefs-buttons input {
606 - margin-right: 0.25em;
607 -}
608 -
609 -/*
610 - *
611 - * The following code is slightly modified from monobook
612 - *
613 - */
614 -
615 -/* Links */
616 -a {
617 - text-decoration: none;
618 - color: #0645ad;
619 - background: none;
620 -}
621 -a:visited {
622 - color: #0b0080;
623 -}
624 -a:active {
625 - color: #faa700;
626 -}
627 -a:hover {
628 - text-decoration: underline;
629 -}
630 -a.stub {
631 - color: #772233;
632 -}
633 -a.new, #p-personal a.new {
634 - color: #ba0000;
635 -}
636 -a.new:visited, #p-personal a.new:visited {
637 - color: #a55858;
638 -}
639 -
640 -/* Inline Elements */
641 -img {
642 - border: none;
643 - vertical-align: middle;
644 -}
645 -hr {
646 - height: 1px;
647 - color: #aaa;
648 - background-color: #aaa;
649 - border: 0;
650 - margin: .2em 0 .2em 0;
651 -}
652 -
653 -/* Structural Elements */
654 -h1,
655 -h2,
656 -h3,
657 -h4,
658 -h5,
659 -h6 {
660 - color: black;
661 - background: none;
662 - font-weight: normal;
663 - margin: 0;
664 - padding-top: .5em;
665 - padding-bottom: .17em;
666 - border-bottom: 1px solid #aaa;
667 - width: auto;
668 -}
669 -h1 { font-size: 188%; }
670 -h1 .editsection { font-size: 53%; }
671 -h2 { font-size: 150%; }
672 -h2 .editsection { font-size: 67%; }
673 -h3,
674 -h4,
675 -h5,
676 -h6 {
677 - border-bottom: none;
678 - font-weight: bold;
679 -}
680 -h3 { font-size: 132%; }
681 -h3 .editsection { font-size: 76%; font-weight: normal; }
682 -h4 { font-size: 116%; }
683 -h4 .editsection { font-size: 86%; font-weight: normal; }
684 -h5 { font-size: 100%; }
685 -h5 .editsection { font-weight: normal; }
686 -h6 { font-size: 80%; }
687 -h6 .editsection { font-size: 125%; font-weight: normal; }
688 -body.rtl .editsection {
689 - float: left;
690 - margin-right: 5px;
691 - margin-left: 0; /* bug 9122: undo default LTR */
692 -}
693 -p {
694 - margin: .4em 0 .5em 0;
695 - line-height: 1.5em;
696 -}
697 - p img {
698 - margin: 0;
699 - }
700 -abbr,
701 -acronym,
702 -.explain {
703 - border-bottom: 1px dotted black;
704 - color: black;
705 - background: none;
706 - cursor: help;
707 -}
708 -q {
709 - font-family: Times, "Times New Roman", serif;
710 - font-style: italic;
711 -}
712 -/* Disabled for now
713 -blockquote {
714 - font-family: Times, "Times New Roman", serif;
715 - font-style: italic;
716 -}*/
717 -code {
718 - background-color: #f9f9f9;
719 -}
720 -pre {
721 - padding: 1em;
722 - border: 1px dashed #2f6fab;
723 - color: black;
724 - background-color: #f9f9f9;
725 - line-height: 1.1em;
726 -}
727 -div#content ul {
728 - line-height: 1.5em;
729 - list-style-type: square;
730 - margin: .3em 0 0 1.5em;
731 - padding: 0;
732 - list-style-image: url(images/bullet-icon.png);
733 -}
734 -body.rtl div#content ul {
735 - margin-left: 0;
736 - margin-right: 1.5em;
737 -}
738 -div#content ol {
739 - line-height: 1.5em;
740 - margin: .3em 0 0 3.2em;
741 - padding: 0;
742 - list-style-image: none;
743 -}
744 -body.rtl div#content ol {
745 - margin-left: 0;
746 - margin-right: 2.4em;
747 -}
748 -div#content li {
749 - margin-bottom: .1em;
750 -}
751 -div#content dt {
752 - font-weight: bold;
753 - margin-bottom: .1em;
754 -}
755 -div#content dl {
756 - margin-top: .2em;
757 - margin-bottom: .5em;
758 -}
759 -div#content dd {
760 - line-height: 1.5em;
761 - margin-left: 2em;
762 - margin-bottom: .1em;
763 -}
764 -body.rtl div#content dd {
765 - margin-left: 0;
766 - margin-right: 1.6em;
767 -}
768 -/**
769 - * The following lines don't have a visible effect on non-Gecko browsers
770 - * They fix a problem ith Gecko browsers rendering lists to the right of
771 - * left-floated objects in an RTL layout.
772 - */
773 -body.rtl div#content ul {
774 - display: table;
775 - text-align: right;
776 - margin-left: 0;
777 - margin-right: 1.5em;
778 -}
779 -body.rtl div#content ul#filetoc {
780 - display: block;
781 - text-align: right;
782 -}
783 -
784 -/* Tables */
785 -div#content table {
786 - font-size: 100%;
787 - color: black;
788 - /* we don't want the bottom borders of <h2>s to be visible through
789 - * floated tables */
790 - background-color: white;
791 -}
792 -div#content fieldset table {
793 - /* but keep table layouts in forms clean... */
794 - background: none;
795 -}
796 -
797 -/* Forms */
798 -div#content fieldset {
799 - border: 1px solid #2f6fab;
800 - margin: 1em 0 1em 0;
801 - padding: 0 1em 1em;
802 - line-height: 1.5em;
803 -}
804 - fieldset.nested {
805 - margin: 0 0 0.5em 0;
806 - padding: 0 0.5em 0.5em;
807 - }
808 -div#content legend {
809 - padding: .5em;
810 - font-size: 95%;
811 -}
812 -div#content form {
813 - border: none;
814 - margin: 0;
815 -}
816 -div#content textarea {
817 - width: 100%;
818 - padding: .1em;
819 -}
820 -div#content select {
821 - vertical-align: top;
822 -}
823 -
824 -/* Table of Contents */
825 -#toc,
826 -.toc,
827 -.mw-warning {
828 - border: 1px solid #aaa;
829 - background-color: #f9f9f9;
830 - padding: 5px;
831 - font-size: 95%;
832 -}
833 -#toc h2,
834 -.toc h2 {
835 - display: inline;
836 - border: none;
837 - padding: 0;
838 - font-size: 100%;
839 - font-weight: bold;
840 -}
841 -#toc #toctitle,
842 -.toc #toctitle,
843 -#toc .toctitle,
844 -.toc .toctitle {
845 - text-align: center;
846 -}
847 -#toc ul,
848 -.toc ul {
849 - list-style-type: none;
850 - list-style-image: none;
851 - margin-left: 0;
852 - padding-left: 0;
853 - text-align: left;
854 -}
855 -#toc ul ul,
856 -.toc ul ul {
857 - margin: 0 0 0 2em;
858 -}
859 -#toc .toctoggle,
860 -.toc .toctoggle {
861 - font-size: 94%;
862 -}
863 -
864 -/* Images */
865 -div.floatright, table.floatright {
866 - clear: right;
867 - float: right;
868 - position: relative;
869 - margin: 0 0 .5em .5em;
870 - border: 0;
871 -}
872 -div.floatright p { font-style: italic; }
873 -div.floatleft, table.floatleft {
874 - float: left;
875 - clear: left;
876 - position: relative;
877 - margin: 0 .5em .5em 0;
878 - border: 0;
879 -}
880 -div.floatleft p { font-style: italic; }
881 -
882 -/* Thumbnails */
883 -div.thumb {
884 - margin-bottom: .5em;
885 - border-style: solid;
886 - border-color: white;
887 - width: auto;
888 -}
889 -div.thumbinner {
890 - border: 1px solid #ccc;
891 - padding: 3px !important;
892 - background-color: #f9f9f9;
893 - font-size: 94%;
894 - text-align: center;
895 - overflow: hidden;
896 -}
897 -html .thumbimage {
898 - border: 1px solid #ccc;
899 -}
900 -html .thumbcaption {
901 - border: none;
902 - text-align: left;
903 - line-height: 1.4em;
904 - padding: 3px !important;
905 - font-size: 94%;
906 -}
907 -div.magnify {
908 - float: right;
909 - border: none !important;
910 - background: none !important;
911 -}
912 -div.magnify a, div.magnify img {
913 - display: block;
914 - border: none !important;
915 - background: none !important;
916 -}
917 -div.tright {
918 - clear: right;
919 - float: right;
920 - border-width: .5em 0 .8em 1.4em;
921 -}
922 -div.tleft {
923 - float: left;
924 - clear: left;
925 - margin-right: .5em;
926 - border-width: .5em 1.4em .8em 0;
927 -}
928 -img.thumbborder {
929 - border: 1px solid #dddddd;
930 -}
931 -.hiddenStructure {
932 - display: none;
933 -}
934 -
935 -/* Warning */
936 -.mw-warning {
937 - margin-left: 50px;
938 - margin-right: 50px;
939 - text-align: center;
940 -}
941 -
942 -/* User Message */
943 -.usermessage {
944 - background-color: #ffce7b;
945 - border: 1px solid #ffa500;
946 - color: black;
947 - font-weight: bold;
948 - margin: 2em 0 1em;
949 - padding: .5em 1em;
950 - vertical-align: middle;
951 -}
952 -
953 -/* Site Notice */
954 -#siteNotice {
955 - text-align: center;
956 - font-size: 95%;
957 - padding-top: 0.9em;
958 -}
959 - #siteNotice p {
960 - margin: 0;
961 - padding: 0;
962 - }
963 -
964 -/* Categories */
965 -.catlinks {
966 - border: 1px solid #aaa;
967 - background-color: #f9f9f9;
968 - padding: 5px;
969 - margin-top: 1em;
970 - clear: both;
971 -}
972 -
973 -/* Sub-navigation */
974 -#siteSub {
975 - display: none;
976 -}
977 -#jump-to-nav {
978 - display: none;
979 -}
980 -#contentSub, #contentSub2 {
981 - font-size: 84%;
982 - line-height: 1.2em;
983 - margin: 0 0 1.4em 1em;
984 - color: #7d7d7d;
985 - width: auto;
986 -}
987 -span.subpages {
988 - display: block;
989 -}
990 -
991 -/* Emulate Center */
992 -.center {
993 - width: 100%;
994 - text-align: center;
995 -}
996 -*.center * {
997 - margin-left: auto;
998 - margin-right: auto;
999 -}
1000 -
1001 -/* Small for tables and similar */
1002 -.small, .small * {
1003 - font-size: 94%;
1004 -}
1005 -table.small {
1006 - font-size: 100%;
1007 -}
1008 -
1009 -/* Edge Cases for Content */
1010 -#content h1, #content h2 {
1011 - margin-bottom: .6em;
1012 -}
1013 -#content h3, #content h4, #content h5 {
1014 - margin-bottom: .3em;
1015 -}
1016 -div.firstHeading {
1017 - padding-top: 0;
1018 - margin-top: 0;
1019 -}
1020 -div.firstHeading h1 {
1021 - padding-top: 0;
1022 - margin-top: 0;
1023 - padding-top: 0;
1024 - margin-bottom: 0.1em;
1025 - line-height: 1.2em;
1026 - padding-bottom: 0;
1027 -}
1028 -#content a.external,
1029 -#content a[href ^="gopher://"] {
1030 - background: url(images/external-link-ltr-icon.png) center right no-repeat;
1031 - padding: 0 13px;
1032 -}
1033 -.rtl #content a.external,
1034 -.rtl #content a[href ^="gopher://"] {
1035 - background-image: url(images/external-link-rtl-icon.png);
1036 -}
1037 -#content a[href ^="https://"],
1038 -.link-https {
1039 - background: url(images/lock-icon.png) center right no-repeat;
1040 - padding: 0 18px;
1041 -}
1042 -#content a[href ^="mailto:"],
1043 -.link-mailto {
1044 - background: url(images/mail-icon.png) center right no-repeat;
1045 - padding: 0 18px;
1046 -}
1047 -#content a[href ^="news://"] {
1048 - background: url(images/news-icon.png) center right no-repeat;
1049 - padding: 0 18px;
1050 -}
1051 -#content a[href ^="ftp://"],
1052 -.link-ftp {
1053 - background: url(images/file-icon.png) center right no-repeat;
1054 - padding: 0 18px;
1055 -}
1056 -#content a[href ^="irc://"],
1057 -#content a.extiw[href ^="irc://"],
1058 -.link-irc {
1059 - background: url(images/talk-icon.png) center right no-repeat;
1060 - padding: 0 18px;
1061 -}
1062 -#content a.external[href $=".ogg"], #content a.external[href $=".OGG"],
1063 -#content a.external[href $=".mid"], #content a.external[href $=".MID"],
1064 -#content a.external[href $=".midi"], #content a.external[href $=".MIDI"],
1065 -#content a.external[href $=".mp3"], #content a.external[href $=".MP3"],
1066 -#content a.external[href $=".wav"], #content a.external[href $=".WAV"],
1067 -#content a.external[href $=".wma"], #content a.external[href $=".WMA"],
1068 -.link-audio {
1069 - background: url("images/audio-icon.png") center right no-repeat;
1070 - padding: 0 18px;
1071 -}
1072 -#content a.external[href $=".ogm"], #content a.external[href $=".OGM"],
1073 -#content a.external[href $=".avi"], #content a.external[href $=".AVI"],
1074 -#content a.external[href $=".mpeg"], #content a.external[href $=".MPEG"],
1075 -#content a.external[href $=".mpg"], #content a.external[href $=".MPG"],
1076 -.link-video {
1077 - background: url("images/video-icon.png") center right no-repeat;
1078 - padding: 0 18px;
1079 -}
1080 -#content a.external[href $=".pdf"], #content a.external[href $=".PDF"],
1081 -#content a.external[href *=".pdf#"], #content a.external[href *=".PDF#"],
1082 -#content a.external[href *=".pdf?"], #content a.external[href *=".PDF?"],
1083 -.link-document {
1084 - background: url("images/document-icon.png") center right no-repeat;
1085 - padding: 0 18px;
1086 -}
1087 -.rtl #content a.external {
1088 - background-position: left;
1089 - padding-right: 0;
1090 -}
1091 -.rtl #panel a.feedlink {
1092 - background-position: right;
1093 - padding-right: 16px;
1094 - padding-left: 0;
1095 -}
1096 -.ltr #content a.external {
1097 - padding-left: 0;
1098 -}
1099 -
1100 -/* Interwiki Styling (Disabled) */
1101 -#content a.extiw,
1102 -#content a.extiw:active {
1103 - color: #36b;
1104 - background: none;
1105 - padding: 0;
1106 -}
1107 -#content a.external {
1108 - color: #36b;
1109 -}
1110 -#content .plainlinks a {
1111 - /* this can be used in the content area to switch off special external link
1112 - * styling */
1113 - background: none !important;
1114 - padding: 0 !important;
1115 -}
1116 -#content .printfooter {
1117 - display: none;
1118 -}
Index: trunk/phase3/skins/vector/images/portal-break.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Index: trunk/phase3/skins/vector/images/portal-break-ltr.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/phase3/skins/vector/images/portal-break-ltr.png
___________________________________________________________________
Name: svn:mime-type
11191 + application/octet-stream
Index: trunk/phase3/skins/vector/images/portal-break-rtl.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/phase3/skins/vector/images/portal-break-rtl.png
___________________________________________________________________
Name: svn:mime-type
11202 + application/octet-stream
Index: trunk/phase3/skins/vector/main-ltr.css
@@ -0,0 +1,872 @@
 2+/* Framework */
 3+html,
 4+body {
 5+ height: 100%;
 6+ margin: 0;
 7+ padding: 0;
 8+ font-family: sans-serif;
 9+ font-size: small;
 10+}
 11+body {
 12+ background-image: url(images/page-base.png);
 13+}
 14+/* Content */
 15+div#content {
 16+ margin-left: 12em;
 17+ padding: 1em;
 18+ background-image: url(images/content-base.png);
 19+ background-position: top left;
 20+ background-repeat: repeat-y;
 21+ background-color: white;
 22+}
 23+/* Head */
 24+div#page-base {
 25+ height: 6em;
 26+ background-color: white;
 27+ background-image: url(images/page-fade.png);
 28+ background-position: bottom left;
 29+ background-repeat: repeat-x;
 30+}
 31+div#head-base {
 32+ margin-top: -6em;
 33+ margin-left: 12em;
 34+ height: 6em;
 35+ background-image: url(images/head-base.png);
 36+ background-position: bottom left;
 37+ background-repeat: repeat-x;
 38+}
 39+div#head {
 40+ position: absolute;
 41+ top: 0;
 42+ right: 0;
 43+ width: 100%;
 44+}
 45+div#head ul,
 46+div#head li {
 47+ list-style: none;
 48+ margin: 0;
 49+ padding: 0;
 50+}
 51+div#head h5 {
 52+ margin: 0;
 53+ padding: 0;
 54+}
 55+ /* Personal */
 56+ div#personal {
 57+ position: absolute;
 58+ top: 0;
 59+ right: 0.75em;
 60+ }
 61+ div#personal h5 {
 62+ display: none;
 63+ }
 64+ div#personal li {
 65+ float: left;
 66+ margin-left: 0.75em;
 67+ margin-top: 0.5em;
 68+ font-size: 0.9em;
 69+ }
 70+ div#left-navigation {
 71+ position: absolute;
 72+ left: 12em;
 73+ top: 3em;
 74+ }
 75+ div#right-navigation {
 76+ float: right;
 77+ margin-top: 3em;
 78+ }
 79+ /* Navigation Labels */
 80+ div#namespaces h5,
 81+ div#variants h5,
 82+ div#views h5,
 83+ div#actions h5 span,
 84+ div#search h5 {
 85+ display: none;
 86+ }
 87+ /* Namespaces and Views */
 88+ div#namespaces,
 89+ div#views {
 90+ float: left;
 91+ background-image: url(images/tab-break.png);
 92+ background-position: bottom left;
 93+ background-repeat: no-repeat;
 94+ padding-left: 1px;
 95+ }
 96+ div#namespaces ul,
 97+ div#views ul {
 98+ float: left;
 99+ height: 100%;
 100+ }
 101+ /* OVERRIDDEN BY COMPLIANT BROWSERS */
 102+ div#namespaces ul li,
 103+ div#views ul li {
 104+ display: inline-block;
 105+ float: left;
 106+ height: 100%;
 107+ background-image: url(images/tab-normal-fade.png);
 108+ background-position: bottom left;
 109+ background-repeat: repeat-x;
 110+ }
 111+ /* IGNORED BY IE6 */
 112+ div#namespaces ul > li,
 113+ div#views ul > li {
 114+ display: block;
 115+ }
 116+ div#namespaces li.selected,
 117+ div#views li.selected {
 118+ background-image: url(images/tab-current-fade.png);
 119+ }
 120+ /* OVERRIDDEN BY COMPLIANT BROWSERS */
 121+ div#namespaces li a,
 122+ div#views li a {
 123+ display: inline-block;
 124+ height: 3em;
 125+ padding-left: 0.5em;
 126+ padding-right: 0.5em;
 127+ background-image: url(images/tab-break.png);
 128+ background-position: bottom right;
 129+ background-repeat: no-repeat;
 130+ }
 131+ /* IGNORED BY IE6 */
 132+ div#namespaces li > a,
 133+ div#views li > a {
 134+ display: block;
 135+ }
 136+ /* OVERRIDDEN BY COMPLIANT BROWSERS */
 137+ div#namespaces a span,
 138+ div#views a span {
 139+ color: #0645ad;
 140+ display: inline-block;
 141+ padding-top: 1.25em;
 142+ cursor: pointer;
 143+ }
 144+ /* IGNORED BY IE6 */
 145+ div#namespaces a > span,
 146+ div#views a > span {
 147+ float: left;
 148+ display: block;
 149+ }
 150+ div#namespaces li.selected a span,
 151+ div#views li.selected a:visited span {
 152+ color: #333333;
 153+ cursor: default;
 154+ text-decoration: none;
 155+ }
 156+ div#namespaces li.new a span,
 157+ div#namespaces li.new a:visited span{
 158+ color: #a55858;
 159+ }
 160+ /* Variants and Actions */
 161+ div#variants,
 162+ div#actions {
 163+ float: left;
 164+ background-image: url(images/arrow-down-icon.png);
 165+ background-position: center center;
 166+ background-repeat: no-repeat;
 167+ }
 168+ div#variants h5,
 169+ div#actions h5 {
 170+ float: left;
 171+ }
 172+ /* OVERRIDDEN BY COMPLIANT BROWSERS */
 173+ div#variants h5 a,
 174+ div#actions h5 a {
 175+ display: inline-block;
 176+ width: 24px;
 177+ height: 3em;
 178+ text-decoration: none;
 179+ background-image: url(images/tab-break.png);
 180+ background-position: bottom right;
 181+ background-repeat: no-repeat;
 182+ }
 183+ /* IGNORED BY IE6 */
 184+ div#variants h5 > a,
 185+ div#actions h5 > a {
 186+ display: block;
 187+ }
 188+ div#variants div.menu,
 189+ div#actions div.menu {
 190+ display: none;
 191+ clear: both;
 192+ }
 193+ div#variants:hover div.menu,
 194+ div#actions:hover div.menu {
 195+ display: block;
 196+ }
 197+ div#variants ul,
 198+ div#actions ul {
 199+ position: absolute;
 200+ background-color: white;
 201+ border: solid 1px silver;
 202+ border-top-width: 0;
 203+ padding: 0;
 204+ margin: 0;
 205+ margin-left: -1px;
 206+ }
 207+ /* OVERRIDDEN BY COMPLIANT BROWSERS */
 208+ div#variants:hover li a,
 209+ div#actions li a {
 210+ display: inline-block;
 211+ padding: 0.5em;
 212+ }
 213+ /* IGNORED BY IE6 */
 214+ div#variants:hover li > a,
 215+ div#actions li > a {
 216+ display: block;
 217+ }
 218+ /* Search */
 219+ div#search {
 220+ float: left;
 221+ margin-right: 0.75em;
 222+ }
 223+ div#search form,
 224+ div#search input {
 225+ float: left;
 226+ margin-top: 0.4em;
 227+ margin-left: 0.25em;
 228+ }
 229+/* Panel */
 230+div#panel {
 231+ position: absolute;
 232+ top: 12em;
 233+ width: 12em;
 234+ left: 0;
 235+}
 236+ div#panel div.portal {
 237+ padding-top: 1.5em;
 238+ }
 239+ div#panel div.portal h5 {
 240+ font-weight: normal;
 241+ color: #666666;
 242+ padding: 0.5em;
 243+ padding-top: 0;
 244+ padding-left: 1.25em;
 245+ cursor: default;
 246+ }
 247+ div#panel div.portal div.body {
 248+ margin-top: 0.25em;
 249+ padding-top: 0.5em;
 250+ margin-left: 1.25em;
 251+ background-image: url(images/portal-break-ltr.png);
 252+ background-repeat: no-repeat;
 253+ background-position: top left;
 254+ }
 255+ div#panel div.portal div.body ul {
 256+ list-style: none;
 257+ padding: 0;
 258+ margin: 0;
 259+ }
 260+ div#panel div.portal div.body ul li {
 261+ padding: 0;
 262+ padding-bottom: 0.5em;
 263+ margin: 0;
 264+ overflow: hidden;
 265+ }
 266+ div#panel div.portal div.body ul li a {
 267+ color: #0645ad;
 268+ }
 269+ div#panel div.portal div.body ul li a:visited {
 270+ color: #0b0080;
 271+ }
 272+/* Foot */
 273+div#foot {
 274+ margin-left: 12em;
 275+ margin-top: 0;
 276+ padding: 0.75em;
 277+ background-image: url(images/foot-base.png);
 278+ background-position: top left;
 279+ background-repeat: repeat-x;
 280+}
 281+div#foot ul {
 282+ list-style: none;
 283+ margin: 0;
 284+ padding: 0;
 285+}
 286+div#foot ul li {
 287+ margin: 0;
 288+ padding: 0;
 289+ padding-top: 0.5em;
 290+ padding-bottom: 0.5em;
 291+ color: #333333;
 292+ font-size: 0.9em;
 293+}
 294+div#foot ul#foot-icons {
 295+ float: right;
 296+}
 297+div#foot ul#foot-places {
 298+ float: left;
 299+}
 300+div#foot ul#foot-icons li {
 301+ float: left;
 302+ margin-left: 0.5em;
 303+ line-height: 2em;
 304+}
 305+div#foot ul#foot-places li {
 306+ float: left;
 307+ margin-right: 0.5em;
 308+ line-height: 2em;
 309+}
 310+/* Logo */
 311+div#logo {
 312+ position: absolute;
 313+ top: 0;
 314+ left: 0;
 315+ height: 12em;
 316+ width: 12em;
 317+}
 318+div#logo a {
 319+ display: block;
 320+ width: 12em;
 321+ height: 12em;
 322+ background-repeat: no-repeat;
 323+ background-position: 50% 50%;
 324+ text-decoration: none;
 325+}
 326+
 327+/*
 328+ *
 329+ * The following code is highly modified from monobook. It would be nice if the
 330+ * preftoc id was more human readable like preferences-toc for instance,
 331+ * howerver this would require backporting the other skins.
 332+ */
 333+
 334+/* Preferences */
 335+#preftoc {
 336+ /* Tabs */
 337+ float: left;
 338+ clear: both;
 339+ margin: 0 !important;
 340+ padding: 0 !important;
 341+ height: 2.25em;
 342+ background-image: url(images/preferences-break.png);
 343+ background-position: bottom left;
 344+ background-repeat: no-repeat;
 345+}
 346+ #preftoc li {
 347+ /* Tab */
 348+ float: left;
 349+ margin: 0;
 350+ padding: 0;
 351+ padding-right: 1px;
 352+ height: 2.25em;
 353+ white-space: nowrap;
 354+ list-style-type: none;
 355+ list-style-image: none;
 356+ background-image: url(images/preferences-break.png);
 357+ background-position: bottom right;
 358+ background-repeat: no-repeat;
 359+ }
 360+ /* IGNORED BY IE6 */
 361+ #preftoc li:first-child {
 362+ margin-left: 1px;
 363+ }
 364+ #preftoc a,
 365+ #preftoc a:active {
 366+ display: inline-block;
 367+ position: relative;
 368+ color: #0645ad;
 369+ padding: 0.5em;
 370+ text-decoration: none;
 371+ background-image: none;
 372+ }
 373+ #preftoc a:hover {
 374+ text-decoration: underline;
 375+ }
 376+ #preftoc li.selected a {
 377+ cursor: default;
 378+ background-image: url(images/preferences-fade.png);
 379+ background-position: bottom;
 380+ background-repeat: repeat-x;
 381+ color: #333333;
 382+ cursor: default;
 383+ text-decoration: none;
 384+ }
 385+#preferences {
 386+ float: left;
 387+ zoom: 1;
 388+ width: 100%;
 389+ margin: 0;
 390+ clear: both;
 391+ border: solid 1px #cccccc;
 392+ background-color: #f9f9f9;
 393+ background-image: url(images/preferences-base.png);
 394+}
 395+#preferences fieldset.prefsection {
 396+ border: none;
 397+ padding: 0;
 398+ margin: 1em;
 399+}
 400+#preferences fieldset.prefsection fieldset {
 401+ border: none;
 402+ border-top: solid 1px #cccccc;
 403+}
 404+#preferences legend {
 405+ color: #666666;
 406+}
 407+#preferences fieldset.prefsection legend.mainLegend {
 408+ display: none;
 409+}
 410+#preferences td {
 411+ padding-left: 0.5em;
 412+ padding-right: 0.5em;
 413+}
 414+#preferences td.htmlform-tip {
 415+ font-size: x-small;
 416+ padding: .2em 2em;
 417+ color: #666666;
 418+}
 419+#preferences div.mw-prefs-buttons {
 420+ padding: 1em;
 421+}
 422+#preferences div.mw-prefs-buttons input {
 423+ margin-right: 0.25em;
 424+}
 425+
 426+/*
 427+ *
 428+ * The following code is slightly modified from monobook
 429+ *
 430+ */
 431+
 432+/* Links */
 433+a {
 434+ text-decoration: none;
 435+ color: #0645ad;
 436+ background: none;
 437+}
 438+a:visited {
 439+ color: #0b0080;
 440+}
 441+a:active {
 442+ color: #faa700;
 443+}
 444+a:hover {
 445+ text-decoration: underline;
 446+}
 447+a.stub {
 448+ color: #772233;
 449+}
 450+a.new, #p-personal a.new {
 451+ color: #ba0000;
 452+}
 453+a.new:visited, #p-personal a.new:visited {
 454+ color: #a55858;
 455+}
 456+
 457+/* Inline Elements */
 458+img {
 459+ border: none;
 460+ vertical-align: middle;
 461+}
 462+hr {
 463+ height: 1px;
 464+ color: #aaa;
 465+ background-color: #aaa;
 466+ border: 0;
 467+ margin: .2em 0 .2em 0;
 468+}
 469+
 470+/* Structural Elements */
 471+h1,
 472+h2,
 473+h3,
 474+h4,
 475+h5,
 476+h6 {
 477+ color: black;
 478+ background: none;
 479+ font-weight: normal;
 480+ margin: 0;
 481+ padding-top: .5em;
 482+ padding-bottom: .17em;
 483+ border-bottom: 1px solid #aaa;
 484+ width: auto;
 485+}
 486+h1 { font-size: 188%; }
 487+h1 .editsection { font-size: 53%; }
 488+h2 { font-size: 150%; }
 489+h2 .editsection { font-size: 67%; }
 490+h3,
 491+h4,
 492+h5,
 493+h6 {
 494+ border-bottom: none;
 495+ font-weight: bold;
 496+}
 497+h3 { font-size: 132%; }
 498+h3 .editsection { font-size: 76%; font-weight: normal; }
 499+h4 { font-size: 116%; }
 500+h4 .editsection { font-size: 86%; font-weight: normal; }
 501+h5 { font-size: 100%; }
 502+h5 .editsection { font-weight: normal; }
 503+h6 { font-size: 80%; }
 504+h6 .editsection { font-size: 125%; font-weight: normal; }
 505+p {
 506+ margin: .4em 0 .5em 0;
 507+ line-height: 1.5em;
 508+}
 509+ p img {
 510+ margin: 0;
 511+ }
 512+abbr,
 513+acronym,
 514+.explain {
 515+ border-bottom: 1px dotted black;
 516+ color: black;
 517+ background: none;
 518+ cursor: help;
 519+}
 520+q {
 521+ font-family: Times, "Times New Roman", serif;
 522+ font-style: italic;
 523+}
 524+/* Disabled for now
 525+blockquote {
 526+ font-family: Times, "Times New Roman", serif;
 527+ font-style: italic;
 528+}*/
 529+code {
 530+ background-color: #f9f9f9;
 531+}
 532+pre {
 533+ padding: 1em;
 534+ border: 1px dashed #2f6fab;
 535+ color: black;
 536+ background-color: #f9f9f9;
 537+ line-height: 1.1em;
 538+}
 539+div#content ul {
 540+ line-height: 1.5em;
 541+ list-style-type: square;
 542+ margin: .3em 0 0 1.5em;
 543+ padding: 0;
 544+ list-style-image: url(images/bullet-icon.png);
 545+}
 546+div#content ol {
 547+ line-height: 1.5em;
 548+ margin: .3em 0 0 3.2em;
 549+ padding: 0;
 550+ list-style-image: none;
 551+}
 552+div#content li {
 553+ margin-bottom: .1em;
 554+}
 555+div#content dt {
 556+ font-weight: bold;
 557+ margin-bottom: .1em;
 558+}
 559+div#content dl {
 560+ margin-top: .2em;
 561+ margin-bottom: .5em;
 562+}
 563+div#content dd {
 564+ line-height: 1.5em;
 565+ margin-left: 2em;
 566+ margin-bottom: .1em;
 567+}
 568+/* Tables */
 569+div#content table {
 570+ font-size: 100%;
 571+ color: black;
 572+ /* we don't want the bottom borders of <h2>s to be visible through
 573+ * floated tables */
 574+ background-color: white;
 575+}
 576+div#content fieldset table {
 577+ /* but keep table layouts in forms clean... */
 578+ background: none;
 579+}
 580+/* Forms */
 581+div#content fieldset {
 582+ border: 1px solid #2f6fab;
 583+ margin: 1em 0 1em 0;
 584+ padding: 0 1em 1em;
 585+ line-height: 1.5em;
 586+}
 587+ fieldset.nested {
 588+ margin: 0 0 0.5em 0;
 589+ padding: 0 0.5em 0.5em;
 590+ }
 591+div#content legend {
 592+ padding: .5em;
 593+ font-size: 95%;
 594+}
 595+div#content form {
 596+ border: none;
 597+ margin: 0;
 598+}
 599+div#content textarea {
 600+ width: 100%;
 601+ padding: .1em;
 602+}
 603+div#content select {
 604+ vertical-align: top;
 605+}
 606+/* Table of Contents */
 607+#toc,
 608+.toc,
 609+.mw-warning {
 610+ border: 1px solid #aaa;
 611+ background-color: #f9f9f9;
 612+ padding: 5px;
 613+ font-size: 95%;
 614+}
 615+#toc h2,
 616+.toc h2 {
 617+ display: inline;
 618+ border: none;
 619+ padding: 0;
 620+ font-size: 100%;
 621+ font-weight: bold;
 622+}
 623+#toc #toctitle,
 624+.toc #toctitle,
 625+#toc .toctitle,
 626+.toc .toctitle {
 627+ text-align: center;
 628+}
 629+#toc ul,
 630+.toc ul {
 631+ list-style-type: none;
 632+ list-style-image: none;
 633+ margin-left: 0;
 634+ padding-left: 0;
 635+ text-align: left;
 636+}
 637+#toc ul ul,
 638+.toc ul ul {
 639+ margin: 0 0 0 2em;
 640+}
 641+#toc .toctoggle,
 642+.toc .toctoggle {
 643+ font-size: 94%;
 644+}
 645+/* Images */
 646+div.floatright, table.floatright {
 647+ clear: right;
 648+ float: right;
 649+ position: relative;
 650+ margin: 0 0 .5em .5em;
 651+ border: 0;
 652+}
 653+div.floatright p { font-style: italic; }
 654+div.floatleft, table.floatleft {
 655+ float: left;
 656+ clear: left;
 657+ position: relative;
 658+ margin: 0 .5em .5em 0;
 659+ border: 0;
 660+}
 661+div.floatleft p { font-style: italic; }
 662+/* Thumbnails */
 663+div.thumb {
 664+ margin-bottom: .5em;
 665+ border-style: solid;
 666+ border-color: white;
 667+ width: auto;
 668+}
 669+div.thumbinner {
 670+ border: 1px solid #ccc;
 671+ padding: 3px !important;
 672+ background-color: #f9f9f9;
 673+ font-size: 94%;
 674+ text-align: center;
 675+ overflow: hidden;
 676+}
 677+html .thumbimage {
 678+ border: 1px solid #ccc;
 679+}
 680+html .thumbcaption {
 681+ border: none;
 682+ text-align: left;
 683+ line-height: 1.4em;
 684+ padding: 3px !important;
 685+ font-size: 94%;
 686+}
 687+div.magnify {
 688+ float: right;
 689+ border: none !important;
 690+ background: none !important;
 691+}
 692+div.magnify a, div.magnify img {
 693+ display: block;
 694+ border: none !important;
 695+ background: none !important;
 696+}
 697+div.tright {
 698+ clear: right;
 699+ float: right;
 700+ border-width: .5em 0 .8em 1.4em;
 701+}
 702+div.tleft {
 703+ float: left;
 704+ clear: left;
 705+ margin-right: .5em;
 706+ border-width: .5em 1.4em .8em 0;
 707+}
 708+img.thumbborder {
 709+ border: 1px solid #dddddd;
 710+}
 711+.hiddenStructure {
 712+ display: none;
 713+}
 714+/* Warning */
 715+.mw-warning {
 716+ margin-left: 50px;
 717+ margin-right: 50px;
 718+ text-align: center;
 719+}
 720+/* User Message */
 721+.usermessage {
 722+ background-color: #ffce7b;
 723+ border: 1px solid #ffa500;
 724+ color: black;
 725+ font-weight: bold;
 726+ margin: 2em 0 1em;
 727+ padding: .5em 1em;
 728+ vertical-align: middle;
 729+}
 730+/* Site Notice */
 731+#siteNotice {
 732+ text-align: center;
 733+ font-size: 95%;
 734+ padding-top: 0.9em;
 735+}
 736+ #siteNotice p {
 737+ margin: 0;
 738+ padding: 0;
 739+ }
 740+/* Categories */
 741+.catlinks {
 742+ border: 1px solid #aaa;
 743+ background-color: #f9f9f9;
 744+ padding: 5px;
 745+ margin-top: 1em;
 746+ clear: both;
 747+}
 748+/* Sub-navigation */
 749+#siteSub {
 750+ display: none;
 751+}
 752+#jump-to-nav {
 753+ display: none;
 754+}
 755+#contentSub, #contentSub2 {
 756+ font-size: 84%;
 757+ line-height: 1.2em;
 758+ margin: 0 0 1.4em 1em;
 759+ color: #7d7d7d;
 760+ width: auto;
 761+}
 762+span.subpages {
 763+ display: block;
 764+}
 765+/* Emulate Center */
 766+.center {
 767+ width: 100%;
 768+ text-align: center;
 769+}
 770+*.center * {
 771+ margin-left: auto;
 772+ margin-right: auto;
 773+}
 774+/* Small for tables and similar */
 775+.small, .small * {
 776+ font-size: 94%;
 777+}
 778+table.small {
 779+ font-size: 100%;
 780+}
 781+/* Edge Cases for Content */
 782+#content h1, #content h2 {
 783+ margin-bottom: .6em;
 784+}
 785+#content h3, #content h4, #content h5 {
 786+ margin-bottom: .3em;
 787+}
 788+div.firstHeading {
 789+ padding-top: 0;
 790+ margin-top: 0;
 791+}
 792+div.firstHeading h1 {
 793+ padding-top: 0;
 794+ margin-top: 0;
 795+ padding-top: 0;
 796+ margin-bottom: 0.1em;
 797+ line-height: 1.2em;
 798+ padding-bottom: 0;
 799+}
 800+#content a.external,
 801+#content a[href ^="gopher://"] {
 802+ background: url(images/external-link-ltr-icon.png) center right no-repeat;
 803+ padding: 0 13px;
 804+}
 805+#content a[href ^="https://"],
 806+.link-https {
 807+ background: url(images/lock-icon.png) center right no-repeat;
 808+ padding: 0 18px;
 809+}
 810+#content a[href ^="mailto:"],
 811+.link-mailto {
 812+ background: url(images/mail-icon.png) center right no-repeat;
 813+ padding: 0 18px;
 814+}
 815+#content a[href ^="news://"] {
 816+ background: url(images/news-icon.png) center right no-repeat;
 817+ padding: 0 18px;
 818+}
 819+#content a[href ^="ftp://"],
 820+.link-ftp {
 821+ background: url(images/file-icon.png) center right no-repeat;
 822+ padding: 0 18px;
 823+}
 824+#content a[href ^="irc://"],
 825+#content a.extiw[href ^="irc://"],
 826+.link-irc {
 827+ background: url(images/talk-icon.png) center right no-repeat;
 828+ padding: 0 18px;
 829+}
 830+#content a.external[href $=".ogg"], #content a.external[href $=".OGG"],
 831+#content a.external[href $=".mid"], #content a.external[href $=".MID"],
 832+#content a.external[href $=".midi"], #content a.external[href $=".MIDI"],
 833+#content a.external[href $=".mp3"], #content a.external[href $=".MP3"],
 834+#content a.external[href $=".wav"], #content a.external[href $=".WAV"],
 835+#content a.external[href $=".wma"], #content a.external[href $=".WMA"],
 836+.link-audio {
 837+ background: url("images/audio-icon.png") center right no-repeat;
 838+ padding: 0 18px;
 839+}
 840+#content a.external[href $=".ogm"], #content a.external[href $=".OGM"],
 841+#content a.external[href $=".avi"], #content a.external[href $=".AVI"],
 842+#content a.external[href $=".mpeg"], #content a.external[href $=".MPEG"],
 843+#content a.external[href $=".mpg"], #content a.external[href $=".MPG"],
 844+.link-video {
 845+ background: url("images/video-icon.png") center right no-repeat;
 846+ padding: 0 18px;
 847+}
 848+#content a.external[href $=".pdf"], #content a.external[href $=".PDF"],
 849+#content a.external[href *=".pdf#"], #content a.external[href *=".PDF#"],
 850+#content a.external[href *=".pdf?"], #content a.external[href *=".PDF?"],
 851+.link-document {
 852+ background: url("images/document-icon.png") center right no-repeat;
 853+ padding: 0 18px;
 854+}
 855+/* Interwiki Styling (Disabled) */
 856+#content a.extiw,
 857+#content a.extiw:active {
 858+ color: #36b;
 859+ background: none;
 860+ padding: 0;
 861+}
 862+#content a.external {
 863+ color: #36b;
 864+}
 865+#content .plainlinks a {
 866+ /* this can be used in the content area to switch off special external link
 867+ * styling */
 868+ background: none !important;
 869+ padding: 0 !important;
 870+}
 871+#content .printfooter {
 872+ display: none;
 873+}
Property changes on: trunk/phase3/skins/vector/main-ltr.css
___________________________________________________________________
Name: svn:eol-style
1874 + native

Comments

#Comment by Nikerabbit (talk | contribs)   09:27, 30 June 2009

May I wonder why? To me it seems just to be a maintenance hell and one of the reasons why we cannot have ltr interface in rtl wiki and vice versa.

#Comment by Trevor Parscal (WMF) (talk | contribs)   16:46, 30 June 2009

So basically there's many ways to handle right to left support. One of these ways, lets call solution X, is to have a main style sheet, and then a secondary style sheet which overrides the left to right specific rules (this is what's been done so far with monobook). Another way, solution Y is to integrate such overriding rules into the same style sheet (this is what I was previously doing here and am still doing in the UsabilityInitiative/EditToolbar extension). Another solution, solution Z, is to have 2 separate complete style sheets, one for LTR and the other for RTL (which I am using here now).

In solution X and Y, there is less total code to maintain, but more total code actually sent to the client. In solution Z there is more total code to maintain, but the right to left code can be automatically generated (as it was done in this case and then only slightly modified), using a tool such as CSSJanus. Additionally, making estimations about how browsers handle CSS overriding rules is a tricky business, and it's even more difficult to maintain code when you have a long string of complex overriding rules, some of which are only applicable to a subset of browsers.

My current approach is not perfect. RTL is still broken in: IE5.5, IE6, IE7, FF1 and FF2. This is because I am currently using a pure CSS driven RTL flip, and these browsers are incompatible with some key features needed to pull this off such as rendering a list backwards (li{float:right}) yet aligned left (ul{float:left}).

In conclusion, this is actually the more clean and elegant way to do this. One idea is to have something like CSSJanus as a part of a tool-chain which generates these style-sheets on the fly (as part of the script server).

Status & tagging log