1 @import 'mediawiki.mixins';
3 /* Reuses colors from mediawiki.legacy/shared.css */
4 .mw-email-not-authenticated .oo-ui-labelWidget,
5 .mw-email-none .oo-ui-labelWidget {
6 background-color: #fdf1d1;
8 border: 1px solid #fde29b;
11 /* Authenticated email field has its own class too. Unstyled by default */
13 .mw-email-authenticated .oo-ui-labelWidget { }
17 * Use `position: sticky` on supported browsers, degrades gracefully in
18 * all others, therefore no `@supports` feature query to reduce code complexity.
21 background-color: #fff;
22 position: -webkit-sticky;
26 border-top: 1px solid #c8ccd1;
30 // Support Edge: The `position: sticky` rule above causes the buttons to
31 // disappear in RTL languages on Microsoft Edge. This magically fixes the issue. See T220706.
33 filter: brightness( 1 );
36 /* This is needed because add extra buttons in a weird way */
37 .mw-prefs-buttons .mw-htmlform-submit-buttons {
47 * Hide, when not keyboard focussed.
49 .client-js .mw-navigation-hint:not( :focus ) {
55 .mw-prefs-fieldset-wrapper {
69 .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed,
70 .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
71 /* Decrease contrast of `border` slightly as padding/border combination is sufficient
72 * accessibility wise and focus of content is more important here. */
73 border-color: #c8ccd1;
76 /* JavaScript disabled */
78 // Disable .oo-ui-panelLayout-framed on outer wrapper
79 .mw-prefs-tabs-wrapper {
85 // Hide the tab menu when JS is disabled as we can't use this feature
86 > .oo-ui-menuLayout-menu {
90 .mw-prefs-section-fieldset {
91 // <legend> is hard to style, so apply border to top of group
92 > .oo-ui-fieldsetLayout-group {
94 border-top: 1px solid #c8ccd1;
97 // Remove spacing between legend and underline
98 &.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
103 // Spacing between sections
104 > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
110 /* JavaScript enabled */
111 .client-js .mw-prefs-tabs {
112 .oo-ui-tabPanelLayout {
113 // Panels don't need borders as the IndexLayout is inside a framed wrapper.
116 // Hide section legend, only used in nojs mode
117 > fieldset > legend {
122 // Hide all but the first panel before infusion
123 &:not( .mw-prefs-tabs-infused ) {
124 .oo-ui-tabPanelLayout:not( :first-child ) {
130 /* Make the "Basic information" section more compact */
131 /* OOUI's `align: 'left'` for FieldLayouts sucks, so we do our own */
133 > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
134 display: inline-block;
137 vertical-align: middle;
140 > .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
144 > .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
145 display: inline-block;
147 vertical-align: middle;
151 /* Compact number inputs, used at "Display options" on "Recent changes" */
152 .mw-htmlform-field-HTMLFloatField,
153 .mw-htmlform-field-HTMLIntField {
159 /* Expand the dropdown and textfield of "Time zone" field to the */
160 /* usual maximum width and display them on separate lines. */
161 #wpTimeCorrection .oo-ui-dropdownInputWidget,
162 #wpTimeCorrection .oo-ui-textInputWidget {
167 #wpTimeCorrection .oo-ui-textInputWidget {
171 /* HACK: expand width of gadget descriptions.
172 * This should be moved to the Gadgets extension */
173 #mw-htmlform-gadgets .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {