1 @import 'mediawiki.mixins';
3 /* stylelint-disable selector-class-pattern */
6 @ooui-font-size-browser: 16; // assumed browser default of `16px`
7 @ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`
9 @ooui-spacing-medium: 12 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.8571429em`≈`12px`
10 @ooui-spacing-large: 16 / @ooui-font-size-browser / @ooui-font-size-base; // equals `1.1428571em`≈`16px`
11 @ooui-padding-horizontal: 12 / @ooui-font-size-browser / @ooui-font-size-base;
12 @ooui-padding-vertical: 4 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.285714em`≈`4px`
14 .mw-htmlform-ooui-wrapper.oo-ui-panelLayout-padded {
15 // Reducing `padding-top`, as the heading's `line-height` provides similar distance.
16 padding: @ooui-spacing-medium @ooui-spacing-large @ooui-spacing-large;
18 // Trigger only when collapsible & JS is available via `.mw-collapsed`.
19 .client-js & .oo-ui-fieldsetLayout.mw-collapsed .oo-ui-fieldsetLayout-header {
20 // Negative margin to match the reduced distance on the top caused by the previous rule.
21 margin-bottom: -( @ooui-spacing-large - @ooui-spacing-medium );
23 .oo-ui-labelElement-label {
30 line-height: 1.4; // Override MediaWiki's default of `1.6`
32 .oo-ui-fieldsetLayout-header {
33 font-size: 100%; // Override MediaWiki's generic `legend` styling
36 .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
37 line-height: 16 / @ooui-font-size-browser / @ooui-font-size-base;
40 .mw-htmlform-field-HTMLCheckMatrix {
44 // Default OOUI styles produce a larger margin here
45 .mw-htmlform-field-HTMLSizeFilterField {
46 margin-top: @ooui-spacing-medium;
50 border-spacing: 0 2px;
57 padding: @ooui-padding-vertical @ooui-padding-horizontal;
59 .transition( background-color 250ms );
75 tbody tr:nth-child( even ) td {
76 background-color: #f8f9fa;
80 background-color: #eaecf0;
83 // Specificity needed because of necessary high OOUI specificity due to modularity
84 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
88 .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
94 // Flatlist styling for PHP (`.oo-ui-fieldLayout-align-inline`) &
95 // JS (`.oo-ui-radioOptionWidget, .oo-ui-checkboxMultioptionWidget`) widgets
96 .mw-htmlform-flatlist {
97 .oo-ui-fieldLayout-align-inline,
98 .oo-ui-radioOptionWidget,
99 .oo-ui-checkboxMultioptionWidget {
100 display: inline-block;
101 margin-right: @ooui-spacing-medium;
104 // Reduce label distance in flatlist
105 &.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
110 // First selector is flatlist specific
111 .mw-htmlform-field-HTMLMultiSelectField.oo-ui-fieldLayout,
112 .mw-htmlform-ooui .htmlform-tip,
113 .mw-htmlform-ooui .mw-htmlform-submit-buttons {
114 margin-top: @ooui-spacing-medium;