Prevents sidebar links from jumping on page load

When I added an HD style sheet to the Vector skin, I styled the side
bar h5 and .body elements directly to increase padding on the left.
These properties were also set to transition over 250ms. When the
Vector extension modified those same properties with it's own
stylesheet which loads a little later than the Vector skin stylesheet,
the difference was especially visible because of the transitions. This
patch prevents this by adding transitioned padding to #mw-panel
instead, which is not modified by the Vector extension.

Change-Id: I9dfdd791bdcbb38806276852e17348e710f39f86

diff --git a/skins/vector/screen-hd.css b/skins/vector/screen-hd.css
index ebb639b..b90fd63 100644 (file)
--- a/skins/vector/screen-hd.css
+++ b/skins/vector/screen-hd.css
@@ -11,12 +11,9 @@ div#footer {
        margin-left: 11em;
        padding: 1.25em;
 }
-div#mw-panel div.portal div.body {
+#mw-panel {
        padding-left: 0.5em;
 }
-div#mw-panel div.portal h5 {
-       padding-left: 2.25em;
-}
 #p-search {
        margin-right: 1em;
 }

diff --git a/skins/vector/screen.css b/skins/vector/screen.css
index b309d15..4a7a9a0 100644 (file)
--- a/skins/vector/screen.css
+++ b/skins/vector/screen.css
@@ -861,8 +861,7 @@ div#footer {
        -webkit-transition: left 250ms;
        -o-transition: left 250ms;
 }
-div#mw-panel div.portal div.body,
-div#mw-panel div.portal h5 {
+#mw-panel {
        transition: padding-left 250ms;
        -moz-transition: padding-left 250ms;
        -webkit-transition: padding-left 250ms;