Special:Preferences: Replace OOUI preferences CSS by LESS file

Also use 'mediawiki.mixins' and structure file in LESS way.

Change-Id: I3de02eb3996c1ebe9536067df593d3096a5f1eaa

diff --git a/resources/Resources.php b/resources/Resources.php
index cafc1bc..b724306 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -2184,7 +2184,7 @@ return [
        ],
        'mediawiki.special.preferences.styles.ooui' => [
                'targets' => [ 'desktop', 'mobile' ],
-               'styles' => 'resources/src/mediawiki.special.preferences.styles.ooui.css',
+               'styles' => 'resources/src/mediawiki.special.preferences.styles.ooui.less',
        ],
        'mediawiki.special.recentchanges' => [
                'scripts' => 'resources/src/mediawiki.special.recentchanges.js',

diff --git a/resources/src/mediawiki.special.preferences.styles.ooui.css b/resources/src/mediawiki.special.preferences.styles.ooui.css
deleted file mode 100644 (file)
index fda049b..0000000
--- a/resources/src/mediawiki.special.preferences.styles.ooui.css
+++ /dev/null
@@ -1,149 +0,0 @@
-/* Reuses colors from mediawiki.legacy/shared.css */
-.mw-email-not-authenticated .oo-ui-labelWidget,
-.mw-email-none .oo-ui-labelWidget {
-       border: 1px solid #fde29b;
-       background-color: #fdf1d1;
-       color: #000;
-       padding: 0.5em;
-}
-/* Authenticated email field has its own class too. Unstyled by default */
-/*
-.mw-email-authenticated .oo-ui-labelWidget { }
-*/
-
-/* This is needed because add extra buttons in a weird way */
-.mw-prefs-buttons .mw-htmlform-submit-buttons {
-       margin: 0;
-       display: inline;
-}
-
-.mw-prefs-buttons {
-       margin-top: 1em;
-}
-
-#prefcontrol {
-       margin-right: 0.5em;
-}
-
-/*
- * Hide, but keep accessible for screen-readers.
- */
-.client-js .mw-navigation-hint {
-       overflow: hidden;
-       height: 0;
-       zoom: 1;
-}
-
-/* Override OOUI styles so that dropdowns near the bottom of the form don't get clipped,
- * e.g.'Appearance' / 'Threshold for stub link formatting'. This is hacky and bad, it would be
- * better solved by setting overlays for the widgets, but we can't do it from PHP... */
-#preferences .oo-ui-panelLayout {
-       position: static;
-       overflow: visible;
-       -webkit-transform: none;
-       transform: none;
-}
-
-#preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
-       border-width: 0;
-       border-radius: 0;
-       box-shadow: none;
-       padding-left: 0;
-       padding-right: 0;
-}
-
-.mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-menu a {
-       color: inherit;
-       text-decoration: none;
-}
-
-/* Adjust the borders when JS is disabled: frame each prefsection instead of the
- * whole tabLayout wrapper */
-.client-nojs #preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:first-child {
-       border-color: #c8ccd1;
-       border-width: 1px 0 0;
-}
-
-.client-nojs .mw-prefs-faketabs {
-       border-width: 0;
-       border-radius: 0;
-       box-shadow: none;
-}
-
-.client-nojs .mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-content > .oo-ui-stackLayout {
-       margin-bottom: 1em;
-}
-
-/* Hide the tab menu when JS is disabled as we can't use this feature */
-.client-nojs .mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
-       display: none;
-}
-
-.client-nojs #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:last-child {
-       padding-bottom: 0;
-       margin-bottom: 0;
-}
-
-/* Hide top level legends when JS is enabled, as they will not be visible
- * when the real tabLayout is built */
-.client-js #preferences .oo-ui-tabPanelLayout > fieldset > legend {
-       display: none;
-}
-
-.client-js #preferences .oo-ui-tabPanelLayout {
-       padding-top: 0.5em;
-}
-
-.client-js #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
-       margin-top: 2.286em; /* equals `32px` at `font-size: 14px;` */
-       margin-bottom: 0;
-       border-width: 0;
-       border-radius: 0;
-       padding: 0;
-       box-shadow: none;
-}
-
-.client-js #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:first-child {
-       margin-top: 0.85714286em;
-}
-
-.client-js #preferences > .oo-ui-panelLayout > .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header {
-       margin-bottom: 1em;
-}
-
-/* Make the "Basic information" section more compact */
-/* OOUI's `align: 'left'` for FieldLayouts sucks, so we do our own */
-#mw-htmlform-info > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
-       width: 20%;
-       display: inline-block;
-       vertical-align: middle;
-       padding: 0;
-}
-
-#mw-htmlform-info > .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
-       margin-right: 0;
-}
-
-#mw-htmlform-info > .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
-       width: 80%;
-       display: inline-block;
-       vertical-align: middle;
-}
-
-/* Expand the dropdown and textfield of "Time zone" field to the */
-/* usual maximum width and display them on separate lines. */
-#wpTimeCorrection .oo-ui-dropdownInputWidget,
-#wpTimeCorrection .oo-ui-textInputWidget {
-       display: block;
-       max-width: 50em;
-}
-
-#wpTimeCorrection .oo-ui-textInputWidget {
-       margin-top: 0.5em;
-}
-
-/* HACK: expand width of gadget descriptions.
- * This should be moved to the Gadgets extension */
-#mw-htmlform-gadgets .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
-       max-width: none;
-}

diff --git a/resources/src/mediawiki.special.preferences.styles.ooui.less b/resources/src/mediawiki.special.preferences.styles.ooui.less
new file mode 100644 (file)
index 0000000..ecf6887
--- /dev/null
+++ b/resources/src/mediawiki.special.preferences.styles.ooui.less
@@ -0,0 +1,159 @@
+@import 'mediawiki.mixins';
+
+/* Reuses colors from mediawiki.legacy/shared.css */
+.mw-email-not-authenticated .oo-ui-labelWidget,
+.mw-email-none .oo-ui-labelWidget {
+       background-color: #fdf1d1;
+       color: #000;
+       border: 1px solid #fde29b;
+       padding: 0.5em;
+}
+/* Authenticated email field has its own class too. Unstyled by default */
+/*
+.mw-email-authenticated .oo-ui-labelWidget { }
+*/
+
+/* This is needed because add extra buttons in a weird way */
+.mw-prefs-buttons .mw-htmlform-submit-buttons {
+       display: inline;
+       margin: 0;
+}
+
+.mw-prefs-buttons {
+       margin-top: 1em;
+}
+
+#prefcontrol {
+       margin-right: 0.5em;
+}
+
+/*
+ * Hide, but keep accessible for screen-readers.
+ */
+.client-js .mw-navigation-hint {
+       overflow: hidden;
+       height: 0;
+       zoom: 1;
+}
+
+/* Override OOUI styles so that dropdowns near the bottom of the form don't get clipped,
+ * e.g.'Appearance' / 'Threshold for stub link formatting'. This is hacky and bad, it would be
+ * better solved by setting overlays for the widgets, but we can't do it from PHP... */
+#preferences .oo-ui-panelLayout {
+       position: static;
+       overflow: visible;
+       .transform( none );
+}
+
+#preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
+       border-width: 0;
+       border-radius: 0;
+       padding-left: 0;
+       padding-right: 0;
+       box-shadow: none;
+}
+
+.mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-menu a {
+       color: inherit;
+       text-decoration: none;
+}
+
+/* Disabled JavaScript */
+.client-nojs {
+       /* Adjust the borders: frame each prefsection instead of the
+        * whole tabLayout wrapper */
+       #preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:first-child {
+               border-color: #c8ccd1;
+               border-width: 1px 0 0;
+       }
+
+       #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:last-child {
+               padding-bottom: 0;
+               margin-bottom: 0;
+       }
+
+       /* Fake Tabs to address reflow */
+       .mw-prefs-faketabs {
+               border-width: 0;
+               border-radius: 0;
+               .box-shadow( none );
+
+               > .oo-ui-menuLayout > .oo-ui-menuLayout-content > .oo-ui-stackLayout {
+                       margin-bottom: 1em;
+               }
+
+               /* Hide the tab menu when JS is disabled as we can't use this feature */
+               > .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
+                       display: none;
+               }
+       }
+}
+
+/* Enabled JavaScript
+ * Hide top level legends when JS is enabled, as they will not be visible
+ * when the real tabLayout is built */
+.client-js #preferences {
+       .oo-ui-tabPanelLayout {
+               padding-top: 0.5em;
+
+               & > fieldset > legend {
+                       display: none;
+               }
+       }
+
+       .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
+               margin-top: 2.286em; /* equals `32px` at `font-size: 14px;` */
+               margin-bottom: 0;
+               border-width: 0;
+               border-radius: 0;
+               padding: 0;
+               box-shadow: none;
+
+               &:first-child {
+                       margin-top: 0.85714286em;
+               }
+       }
+
+       > .oo-ui-panelLayout > .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header {
+               margin-bottom: 1em;
+       }
+}
+
+/* Make the "Basic information" section more compact */
+/* OOUI's `align: 'left'` for FieldLayouts sucks, so we do our own */
+#mw-htmlform-info {
+       > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
+               display: inline-block;
+               width: 20%;
+               padding: 0;
+               vertical-align: middle;
+       }
+
+       > .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
+               margin-right: 0;
+       }
+
+       > .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
+               display: inline-block;
+               width: 80%;
+               vertical-align: middle;
+       }
+}
+
+/* Expand the dropdown and textfield of "Time zone" field to the */
+/* usual maximum width and display them on separate lines. */
+#wpTimeCorrection .oo-ui-dropdownInputWidget,
+#wpTimeCorrection .oo-ui-textInputWidget {
+       display: block;
+       max-width: 50em;
+}
+
+#wpTimeCorrection .oo-ui-textInputWidget {
+       margin-top: 0.5em;
+}
+
+/* HACK: expand width of gadget descriptions.
+ * This should be moved to the Gadgets extension */
+#mw-htmlform-gadgets .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
+       max-width: none;
+}