Tweak margins for collapsible OOUI HTMLForms some more

* Move the code from mediawiki.action.history.styles, as it's
  theoretically applicable to other similar forms
* Fix it so that it actually only applies when JS is available
* Make top and bottom margins/paddings even

Follow-up to 32bca54dc94b1befcf21483d9f08017a91ad73eb.

Change-Id: Ifde2303f78f971f1e82418c9bd5feddbd6f1f25d

diff --git a/resources/src/mediawiki.action/mediawiki.action.history.styles.less b/resources/src/mediawiki.action/mediawiki.action.history.styles.less
index 1265637..c6f5b49 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.history.styles.less
+++ b/resources/src/mediawiki.action/mediawiki.action.history.styles.less
@@ -4,11 +4,6 @@
 
 /* stylelint-disable selector-class-pattern */
 
-// Trigger only when collapsible & JS is available via `.mw-collapsed`.
-#mw-history-search.mw-collapsed .oo-ui-fieldsetLayout-header .oo-ui-labelElement-label {
-       margin-bottom: 0;
-}
-
 #pagehistory .history-user {
        margin-left: 0.4em;
        margin-right: 0.2em;

diff --git a/resources/src/mediawiki.htmlform.ooui.styles.less b/resources/src/mediawiki.htmlform.ooui.styles.less
index f356fa2..470d826 100644 (file)
--- a/resources/src/mediawiki.htmlform.ooui.styles.less
+++ b/resources/src/mediawiki.htmlform.ooui.styles.less
@@ -12,7 +12,18 @@
 @ooui-padding-vertical: 4 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.285714em`≈`4px`
 
 .mw-htmlform-ooui-wrapper.oo-ui-panelLayout-padded {
+       // Reducing `padding-top`, as the heading's `line-height` provides similar distance.
        padding: @ooui-spacing-medium @ooui-spacing-large @ooui-spacing-large;
+
+       // Trigger only when collapsible & JS is available via `.mw-collapsed`.
+       .client-js & .oo-ui-fieldsetLayout.mw-collapsed .oo-ui-fieldsetLayout-header {
+               // Negative margin to match the reduced distance on the top caused by the previous rule.
+               margin-bottom: -( @ooui-spacing-large - @ooui-spacing-medium );
+
+               .oo-ui-labelElement-label {
+                       margin-bottom: 0;
+               }
+       }
 }
 
 .mw-htmlform-ooui {