Rewrite Vector's special.preferences.less with LESS nesting

Take advantage of LESS syntax to make this file more readable.

Change-Id: I8e77cd181a0b57a74aaac7c4dd45674bc3869ff3

diff --git a/skins/vector/special.preferences.less b/skins/vector/special.preferences.less
index 202c877..a9b1006 100644 (file)
--- a/skins/vector/special.preferences.less
+++ b/skins/vector/special.preferences.less
@@ -7,7 +7,6 @@
  * howerver this would require backporting the other skins.
  */
 
-/* Preferences */
 #preftoc {
        /* Tabs */
        width: 100%;
@@ -18,8 +17,8 @@
        .background-image('images/preferences/break.png');
        background-position: bottom left;
        background-repeat: no-repeat;
-}
-       #preftoc li {
+
+       li {
                /* Tab */
                float: left;
                margin: 0;
@@ -32,13 +31,25 @@
                .background-image('images/preferences/break.png');
                background-position: bottom right;
                background-repeat: no-repeat;
+
+               /* Sadly, IE6 won't understand this */
+               &:first-child {
+                       margin-left: 1px;
+               }
+
+               &.selected {
+                       a {
+                               .background-image('images/preferences/fade.png');
+                               background-position: bottom;
+                               background-repeat: repeat-x;
+                               color: #333;
+                               text-decoration: none;
+                       }
+               }
        }
-       /* Sadly, IE6 won't understand this */
-       #preftoc li:first-child {
-               margin-left: 1px;
-       }
-       #preftoc a,
-       #preftoc a:active {
+
+       a,
+       a:active {
                display: inline-block;
                position: relative;
                color: @menu-link-color;
@@ -47,17 +58,13 @@
                background-image: none;
                font-size: 0.9em;
        }
-       #preftoc a:hover,
-       #preftoc a:focus {
+
+       a:hover,
+       a:focus {
                text-decoration: underline;
        }
-       #preftoc li.selected a {
-               .background-image('images/preferences/fade.png');
-               background-position: bottom;
-               background-repeat: repeat-x;
-               color: #333;
-               text-decoration: none;
-       }
+}
+
 #preferences {
        float: left;
        width: 100%;
@@ -66,34 +73,42 @@
        clear: both;
        border: solid 1px #ccc;
        background-color: #fafafa;
+
+       fieldset {
+               border: none;
+               border-top: solid 1px #ccc;
+
+               &.prefsection {
+                       border: none;
+                       padding: 0;
+                       margin: 1em;
+
+                       legend.mainLegend {
+                               display: none;
+                       }
+               }
+       }
+
+       legend {
+               color: #666;
+       }
+
+       td {
+               padding-left: 0.5em;
+               padding-right: 0.5em;
+       }
+
+       div.mw-prefs-buttons {
+               padding: 1em;
+
+               input {
+                       margin-right: 0.25em;
+               }
+       }
 }
-#preferences fieldset {
-       border: none;
-       border-top: solid 1px #ccc;
-}
-#preferences fieldset.prefsection {
-       border: none;
-       padding: 0;
-       margin: 1em;
-}
-#preferences legend {
-       color: #666;
-}
-#preferences fieldset.prefsection legend.mainLegend {
-       display: none;
-}
-#preferences td {
-       padding-left: 0.5em;
-       padding-right: 0.5em;
-}
+
 .htmlform-tip {
        font-size: x-small;
        padding: .2em 2em;
        color: #666;
 }
-#preferences div.mw-prefs-buttons {
-       padding: 1em;
-}
-#preferences div.mw-prefs-buttons input {
-       margin-right: 0.25em;
-}