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 /* This is needed because add extra buttons in a weird way */
31 .mw-prefs-buttons .mw-htmlform-submit-buttons {
41 * Hide, when not keyboard focussed.
43 .client-js .mw-navigation-hint:not( :focus ) {
49 .mw-prefs-fieldset-wrapper {
63 .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed,
64 .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
65 /* Decrease contrast of `border` slightly as padding/border combination is sufficient
66 * accessibility wise and focus of content is more important here. */
67 border-color: #c8ccd1;
70 /* JavaScript disabled */
72 // Disable .oo-ui-panelLayout-framed on outer wrapper
73 .mw-prefs-tabs-wrapper {
79 // Hide the tab menu when JS is disabled as we can't use this feature
80 > .oo-ui-menuLayout-menu {
84 .mw-prefs-section-fieldset {
85 // <legend> is hard to style, so apply border to top of group
86 > .oo-ui-fieldsetLayout-group {
88 border-top: 1px solid #c8ccd1;
91 // Remove spacing between legend and underline
92 &.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
97 // Spacing between sections
98 > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
104 /* JavaScript enabled */
105 .client-js .mw-prefs-tabs {
106 .oo-ui-tabPanelLayout {
107 // Panels don't need borders as the IndexLayout is inside a framed wrapper.
110 // Hide section legend, only used in nojs mode
111 > fieldset > legend {
116 // Hide all but the first panel before infusion
117 &:not( .mw-prefs-tabs-infused ) {
118 .oo-ui-tabPanelLayout:not( :first-child ) {
124 /* Make the "Basic information" section more compact */
125 /* OOUI's `align: 'left'` for FieldLayouts sucks, so we do our own */
127 > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
128 display: inline-block;
131 vertical-align: middle;
134 > .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
138 > .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
139 display: inline-block;
141 vertical-align: middle;
145 /* Compact number inputs, used at "Display options" on "Recent changes" */
146 .mw-htmlform-field-HTMLFloatField,
147 .mw-htmlform-field-HTMLIntField {
153 /* Expand the dropdown and textfield of "Time zone" field to the */
154 /* usual maximum width and display them on separate lines. */
155 #wpTimeCorrection .oo-ui-dropdownInputWidget,
156 #wpTimeCorrection .oo-ui-textInputWidget {
161 #wpTimeCorrection .oo-ui-textInputWidget {
165 /* HACK: expand width of gadget descriptions.
166 * This should be moved to the Gadgets extension */
167 #mw-htmlform-gadgets .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {