RTL fixes. RTL in IE6 is still a disaster.
authorTrevor Parscal <tparscal@users.mediawiki.org>
Wed, 24 Jun 2009 21:43:36 +0000 (21:43 +0000)
committerTrevor Parscal <tparscal@users.mediawiki.org>
Wed, 24 Jun 2009 21:43:36 +0000 (21:43 +0000)
skins/vector/main.css

index 4208da4..b421cd2 100644 (file)
@@ -14,7 +14,6 @@ body.rtl {
 body {
        background-image: url(images/page-base.png);
 }
-
 /* Content */
 div#content {
        margin-left: 12em;
@@ -24,6 +23,11 @@ div#content {
        background-repeat: repeat-y;
        background-color: white;
 }
+body.rtl div#content {
+       margin-left: 0;
+       margin-right: 12em;
+       background-position: top right;
+}
 /* Head */
 div#page-base {
        height: 6em;
@@ -32,6 +36,9 @@ div#page-base {
        background-position: bottom left;
        background-repeat: repeat-x;
 }
+body.rtl div#page-base {
+       background-position: bottom left;
+}
 div#head-base {
        margin-top: -6em;
        margin-left: 12em;
@@ -40,6 +47,11 @@ div#head-base {
        background-position: bottom left;
        background-repeat: repeat-x;
 }
+body.rtl div#head-base {
+       margin-left: 0;
+       margin-right: 12em;
+       background-position: bottom right;
+}
 div#head {
        position: absolute;
        top: 0;
@@ -47,6 +59,12 @@ div#head {
        width: 100%;
        margin-right: 0.75em;
 }
+body.rtl div#head {
+       right: auto;
+       left: 0;
+       margin-right: 0;
+       margin-left: 0.75em;
+}
 div#head ul,
 div#head li {
        list-style: none;
@@ -63,6 +81,10 @@ div#head h5 {
                top: 0;
                right: 0;
        }
+       body.rtl div#personal {
+               left: 0;
+               right: auto;
+       }
        div#personal h5 {
                display: none;
        }
@@ -70,16 +92,28 @@ div#head h5 {
                float: left;
                margin-left: 0.75em;
                margin-top: 0.5em;
-               /*font-size: 0.9em;*/
+               font-size: 0.9em;
+       }
+       body.rtl div#personal li {
+               float: right;
+               margin-left: 0;
+               margin-right: 0.75em;
        }
        /* Navigation */
        div#left-navigation {
                margin-top: 3em;
                margin-left: 12.75em;
        }
+       body.rtl div#left-navigation {
+               margin-left: 0;
+               margin-right: 12.75em;
+       }
        div#right-navigation {
                float: right;
        }
+       body.rtl div#right-navigation {
+               float: left;
+       }
        /* Navigation Labels */
        div#namespaces h5,
        div#variants h5,
@@ -97,10 +131,21 @@ div#head h5 {
                background-repeat: no-repeat;
                padding-left: 1px;
        }
+       body.rtl div#namespaces,
+       body.rtl div#views {
+               float: right;
+               background-position: bottom right;
+               padding-left: 0;
+               padding-right: 1px;
+       }
        div#namespaces ul,
        div#views ul {
                float: left;
        }
+       body.rtl div#namespaces ul,
+       body.rtl div#views ul {
+               float: right;
+       }
        div#namespaces li,
        div#views li {
                float: left;
@@ -109,6 +154,11 @@ div#head h5 {
                background-position: bottom left;
                background-repeat: repeat-x;
        }
+       body.rtl div#namespaces li,
+       body.rtl div#views li {
+               float: right;
+               background-position: bottom right;
+       }
        div#namespaces li.selected,
        div#views li.selected {
                background-image: url(images/tab-current-fade.png);
@@ -124,6 +174,10 @@ div#head h5 {
                background-repeat: no-repeat;
                color: #0645ad;
        }
+       body.rtl div#namespaces a,
+       body.rtl div#views a {
+               background-position: bottom left;
+       }
        div#namespaces li.selected a,
        div#views li.selected a:visited {
                color: #333333;
@@ -142,10 +196,18 @@ div#head h5 {
                background-position: center center;
                background-repeat: no-repeat;
        }
+       body.rtl div#variants,
+       body.rtl div#actions {
+               float: right;
+       }
        div#variants h5,
        div#actions h5 {
                float: left;
        }
+       body.rtl div#variants h5,
+       body.rtl div#actions h5 {
+               float: right;
+       }
        div#variants h5 a,
        div#actions h5 a {
                display: inline-block;
@@ -156,6 +218,11 @@ div#head h5 {
                background-position: bottom right;
                background-repeat: no-repeat;
        }
+       body.rtl div#variants h5 a,
+       body.rtl div#actions h5 a {
+               display: inline-block;
+               background-position: bottom left;
+       }
        div#variants div.menu,
        div#actions div.menu {
                display: none;
@@ -175,6 +242,11 @@ div#head h5 {
                margin: 0;
                margin-left: -1px;
        }
+       body.rtl div#variants ul,
+       body.rtl div#actions ul {
+               margin-left: 0;
+               margin-right: -1px;
+       }
        div#variants:hover li a,
        div#actions li a {
                display: inline-block;
@@ -184,18 +256,31 @@ div#head h5 {
        div#search {
                float: left;
        }
+       body.rtl div#search {
+               float: right;
+       }
        div#search form,
        div#search input {
                float: left;
                margin-top: 0.4em;
                margin-left: 0.25em;
        }
+       body.rtl div#search form,
+       body.rtl div#search input {
+               float: right;
+               margin-left: 0;
+               margin-right: 0.25em;
+       }
 /* Panel */
 div#panel {
        position: absolute;
        top: 12em;
        width: 12em;
        left: 0;
+}
+body.rtl div#panel {
+       left: auto;
+       right: 0;
 }
        div#panel div.portal {
                padding-top: 1.5em;
@@ -253,6 +338,11 @@ div#foot {
        background-position: top left;
        background-repeat: repeat-x;
 }
+body.rtl div#foot {
+       margin-left: 0;
+       margin-right: 12em;
+       background-position: top right;
+}
 div#foot ul {
        list-style: none;
        margin: 0;
@@ -269,19 +359,35 @@ div#foot ul li {
 div#foot ul#foot-icons {
        float: right;
 }
+body.rtl div#foot ul#foot-icons {
+       float: left;
+}
 div#foot ul#foot-places {
        float: left;
 }
+body.rtl div#foot ul#foot-places {
+       float: right;
+}
 div#foot ul#foot-icons li {
        float: left;
        margin-left: 0.5em;
        line-height: 2em;
 }
+body.rtl div#foot ul#foot-icons li {
+       float: right;
+       margin-left: 0;
+       margin-right: 0.5em;
+}
 div#foot ul#foot-places li {
        float: left;
        margin-right: 0.5em;
        line-height: 2em;
 }
+body.rtl div#foot ul#foot-places li {
+       float: right;
+       margin-left: 0.5em;
+       margin-right: 0;
+}
 
 /* Logo */
 div#logo {