@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 {
.mw-htmlform-matrix {
border-spacing: 0 2px;
+ th {
+ font-weight: normal;
+ }
+
td {
padding: @ooui-padding-vertical @ooui-padding-horizontal;
text-align: center;
&:first-child {
text-align: left;
}
+
+ &.first {
+ margin-right: 5%;
+ width: 39%;
+ }
+ }
+
+ thead tr td {
+ padding-bottom: 0;
}
tbody tr:nth-child( even ) td {
background-color: #f8f9fa;
}
- tbody tr:not( :first-child ):hover td {
+ tbody tr:hover td {
background-color: #eaecf0;
}
- tbody tr:first-child td {
- background-color: #fff;
- padding-bottom: 0;
+ // Specificity needed because of necessary high OOUI specificity due to modularity
+ .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
+ margin-top: 0;
}
- td.first {
- margin-right: 5%;
- width: 39%;
+ .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
+ padding-bottom: 0;
}
}
}
-// Flatlist styling for PHP widgets...
-.mw-htmlform-flatlist .oo-ui-fieldLayout-align-inline,
-// ...and for JS widgets
-.mw-htmlform-flatlist .oo-ui-radioOptionWidget,
-.mw-htmlform-flatlist .oo-ui-checkboxMultioptionWidget {
- display: inline-block;
- margin-right: @ooui-spacing-medium;
+// 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,
+ .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
+.mw-htmlform-field-HTMLMultiSelectField.oo-ui-fieldLayout,
.mw-htmlform-ooui .htmlform-tip,
.mw-htmlform-ooui .mw-htmlform-submit-buttons {
margin-top: @ooui-spacing-medium;