Preferences: Improve visual appearance by “unboxing” sections
[lhc/web/wiklou.git] / resources / src / mediawiki.special / mediawiki.special.preferences.styles.css
1 /* Reuses colors from mediawiki.legacy/shared.css */
2 .mw-email-not-authenticated .oo-ui-labelWidget,
3 .mw-email-none .oo-ui-labelWidget {
4 border: 1px solid #fde29b;
5 background-color: #fdf1d1;
6 color: #000;
7 }
8 /* Authenticated email field has its own class too. Unstyled by default */
9 /*
10 .mw-email-authenticated .oo-ui-labelWidget { }
11 */
12
13 /* This is needed because add extra buttons in a weird way */
14 .mw-prefs-buttons .mw-htmlform-submit-buttons {
15 margin: 0;
16 display: inline;
17 }
18
19 .mw-prefs-buttons {
20 margin-top: 1em;
21 }
22
23 #prefcontrol {
24 margin-right: 0.5em;
25 }
26
27 /*
28 * Hide, but keep accessible for screen-readers.
29 * Like .mw-jump, #jump-to-nav from shared.css
30 */
31 .client-js .mw-navigation-hint {
32 overflow: hidden;
33 height: 0;
34 zoom: 1;
35 }
36
37 /* Override OOUI styles so that dropdowns near the bottom of the form don't get clipped,
38 * e.g.'Appearance' / 'Threshold for stub link formatting'. This is hacky and bad, it would be
39 * better solved by setting overlays for the widgets, but we can't do it from PHP... */
40 #preferences .oo-ui-panelLayout {
41 position: static;
42 overflow: visible;
43 -webkit-transform: none;
44 transform: none;
45 }
46
47 #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
48 border-color: #c8ccd1;
49 border-width: 1px 0 0;
50 border-radius: 0;
51 padding-left: 0;
52 padding-right: 0;
53 }
54
55 /* Tweak the margins to reduce the shifting of form contents
56 * after JS code loads and rearranges the page */
57 .client-js #preferences > .oo-ui-panelLayout {
58 margin: 1em 0;
59 }
60
61 .client-js #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
62 margin-left: 0.25em;
63 }
64
65 .client-js #preferences .oo-ui-tabPanelLayout {
66 padding-top: 0.5em;
67 padding-bottom: 0.5em;
68 }
69
70 .client-js #preferences .oo-ui-tabPanelLayout .oo-ui-panelLayout-framed {
71 margin-left: 0;
72 margin-bottom: 0;
73 border: 0;
74 padding-top: 0;
75 }
76
77 .client-js #preferences > .oo-ui-panelLayout > .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header {
78 margin-bottom: 1em;
79 }