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-small: 8 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.57142857em`≈`8px`
10 @ooui-spacing-medium: 12 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.8571429em`≈`12px`
11 @ooui-spacing-large: 16 / @ooui-font-size-browser / @ooui-font-size-base; // equals `1.1428571em`≈`16px`
12 @ooui-padding-horizontal: 12 / @ooui-font-size-browser / @ooui-font-size-base;
13 @ooui-padding-vertical: 4 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.285714em`≈`4px`
15 .mw-htmlform-ooui-wrapper.oo-ui-panelLayout-padded {
16 // Reducing `padding-top`, as the heading's `line-height` provides similar distance.
17 padding: @ooui-spacing-medium @ooui-spacing-large @ooui-spacing-large;
19 .client-js & .oo-ui-fieldsetLayout.mw-collapsible .oo-ui-fieldsetLayout-header {
20 // Push legend up when JS is on, to increase clickable area.
21 margin-top: -@ooui-spacing-small;
22 margin-bottom: @ooui-spacing-small;
23 // Add `padding-top` to make up for negative `margin` above.
24 padding: @ooui-spacing-small;
25 // Make space for toggle icon defined below.
26 padding-left: 24 / @ooui-font-size-browser / @ooui-font-size-base;
28 .oo-ui-labelElement-label {
33 // Trigger only when collapsible & JS is available via `.mw-collapsed`.
34 .client-js & .oo-ui-fieldsetLayout.mw-collapsed .oo-ui-fieldsetLayout-header {
36 // Negative margin to match the reduced distance on the top caused by the previous rule.
37 margin-bottom: -@ooui-spacing-medium;
42 line-height: 1.4; // Override MediaWiki's default of `1.6`
44 .oo-ui-fieldsetLayout-header {
45 font-size: 100%; // Override MediaWiki's generic `legend` styling
48 .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
49 line-height: 16 / @ooui-font-size-browser / @ooui-font-size-base;
52 .mw-htmlform-field-HTMLCheckMatrix {
56 // Default OOUI styles produce a larger margin here
57 .mw-htmlform-field-HTMLSizeFilterField {
58 margin-top: @ooui-spacing-medium;
62 border-spacing: 0 2px;
69 padding: @ooui-padding-vertical @ooui-padding-horizontal;
71 .transition( background-color 250ms );
87 tbody tr:nth-child( even ) td {
88 background-color: #f8f9fa;
92 background-color: #eaecf0;
95 // Specificity needed because of necessary high OOUI specificity due to modularity
96 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
100 .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
106 // Flatlist styling for PHP (`.oo-ui-fieldLayout-align-inline`) &
107 // JS (`.oo-ui-radioOptionWidget, .oo-ui-checkboxMultioptionWidget`) widgets
108 .mw-htmlform-flatlist {
109 .oo-ui-fieldLayout-align-inline,
110 .oo-ui-radioOptionWidget,
111 .oo-ui-checkboxMultioptionWidget {
112 display: inline-block;
113 margin-right: @ooui-spacing-medium;
116 // Reduce label distance in flatlist
117 &.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
122 // First selector is flatlist specific
123 .mw-htmlform-field-HTMLMultiSelectField.oo-ui-fieldLayout,
124 .mw-htmlform-ooui .htmlform-tip,
125 .mw-htmlform-ooui .mw-htmlform-submit-buttons {
126 margin-top: @ooui-spacing-medium;
129 .oo-ui-fieldsetLayout.mw-collapsible {
130 .oo-ui-fieldsetLayout-header {
134 .mw-collapsible-toggle .oo-ui-iconElement-icon {
138 // Special case: Reduce to `16px` icon size here.
140 width: 16 / @ooui-font-size-browser / @ooui-font-size-base;
144 // When expanded: only 'collapse' icon visible
145 .mw-collapsible-toggle .oo-ui-icon-expand {
149 // When collapsed: only 'expand' icon visible
151 .mw-collapsible-toggle .oo-ui-icon-expand {
152 display: inline-block;
155 .mw-collapsible-toggle .oo-ui-icon-collapse {