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 ) {
48 /* Most outer Panellayout:
49 * Decrease contrast of `border` slightly as padding/border combination is sufficient
50 * accessibility wise and focus of content is more important here. */
51 #preferences .oo-ui-panelLayout-framed {
52 border-color: #c8ccd1;
55 #preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
63 .mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-menu a {
65 text-decoration: none;
68 /* Disabled JavaScript */
70 /* Adjust the borders: frame each prefsection instead of the
71 * whole tabLayout wrapper */
72 #preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:first-child {
73 border-color: #c8ccd1;
74 border-width: 1px 0 0;
77 #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:last-child {
82 /* Fake Tabs to address reflow */
88 > .oo-ui-menuLayout > .oo-ui-menuLayout-content > .oo-ui-stackLayout {
92 /* Hide the tab menu when JS is disabled as we can't use this feature */
93 > .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
100 * Hide top level legends when JS is enabled, as they will not be visible
101 * when the real tabLayout is built */
102 .client-js #preferences {
103 .oo-ui-tabPanelLayout {
106 & > fieldset > legend {
111 .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
112 margin-top: 2.286em; /* equals `32px` at `font-size: 14px;` */
120 margin-top: 0.85714286em;
123 .oo-ui-panelLayout-framed:first-child {
128 > .oo-ui-panelLayout > .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header {
133 /* Make the "Basic information" section more compact */
134 /* OOUI's `align: 'left'` for FieldLayouts sucks, so we do our own */
136 > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
137 display: inline-block;
140 vertical-align: middle;
143 > .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
147 > .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
148 display: inline-block;
150 vertical-align: middle;
154 /* Compact number inputs, used at "Display options" on "Recent changes" */
155 .mw-htmlform-field-HTMLFloatField,
156 .mw-htmlform-field-HTMLIntField {
162 /* Expand the dropdown and textfield of "Time zone" field to the */
163 /* usual maximum width and display them on separate lines. */
164 #wpTimeCorrection .oo-ui-dropdownInputWidget,
165 #wpTimeCorrection .oo-ui-textInputWidget {
170 #wpTimeCorrection .oo-ui-textInputWidget {
174 /* HACK: expand width of gadget descriptions.
175 * This should be moved to the Gadgets extension */
176 #mw-htmlform-gadgets .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {