@import 'mediawiki.mixins';
+/* stylelint-disable selector-class-pattern */
+
// OOUIHTMLForm styles
@ooui-font-size-browser: 16; // assumed browser default of `16px`
@ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`
@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 {
// Flatlist styling for PHP (`.oo-ui-fieldLayout-align-inline`) &
// JS (`.oo-ui-radioOptionWidget, .oo-ui-checkboxMultioptionWidget`) widgets
-.mw-htmlform-flatlist .oo-ui-fieldLayout-align-inline,
-.mw-htmlform-flatlist .oo-ui-radioOptionWidget,
-.mw-htmlform-flatlist .oo-ui-checkboxMultioptionWidget {
- display: inline-block;
- margin-right: @ooui-spacing-medium;
+.mw-htmlform-flatlist {
+ .oo-ui-fieldLayout-align-inline,
+ .oo-ui-radioOptionWidget,
+ .oo-ui-checkboxMultioptionWidget {
+ display: inline-block;
+ margin-right: @ooui-spacing-medium;
+ }
+
+ // Reduce label distance in flatlist
+ &.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
+ padding-bottom: 0;
+ }
}
// First selector is flatlist specific