resources/src/mediawiki.special.preferences.styles.ooui.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         padding: 0.5em;
   8 }
   9 /* Authenticated email field has its own class too. Unstyled by default */
  10 /*
  11 .mw-email-authenticated .oo-ui-labelWidget { }
  12 */
  13
  14 /* This is needed because add extra buttons in a weird way */
  15 .mw-prefs-buttons .mw-htmlform-submit-buttons {
  16         margin: 0;
  17         display: inline;
  18 }
  19
  20 .mw-prefs-buttons {
  21         margin-top: 1em;
  22 }
  23
  24 #prefcontrol {
  25         margin-right: 0.5em;
  26 }
  27
  28 /*
  29  * Hide, but keep accessible for screen-readers.
  30  * Like .mw-jump, #jump-to-nav from shared.css
  31  */
  32 .client-js .mw-navigation-hint {
  33         overflow: hidden;
  34         height: 0;
  35         zoom: 1;
  36 }
  37
  38 /* Override OOUI styles so that dropdowns near the bottom of the form don't get clipped,
  39  * e.g.'Appearance' / 'Threshold for stub link formatting'. This is hacky and bad, it would be
  40  * better solved by setting overlays for the widgets, but we can't do it from PHP... */
  41 #preferences .oo-ui-panelLayout {
  42         position: static;
  43         overflow: visible;
  44         -webkit-transform: none;
  45         transform: none;
  46 }
  47
  48 #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
  49         border-color: #c8ccd1;
  50         border-width: 1px 0 0;
  51         border-radius: 0;
  52         padding-left: 0;
  53         padding-right: 0;
  54         box-shadow: none;
  55 }
  56
  57 /* Tweak the margins to reduce the shifting of form contents
  58  * after JS code loads and rearranges the page */
  59 .client-js #preferences > .oo-ui-panelLayout {
  60         margin: 1em 0;
  61 }
  62
  63 .client-js #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
  64         margin-left: 0.25em;
  65 }
  66
  67 .client-js #preferences .oo-ui-tabPanelLayout {
  68         padding-top: 0.5em;
  69         padding-bottom: 0.5em;
  70 }
  71
  72 .client-js #preferences .oo-ui-tabPanelLayout .oo-ui-panelLayout-framed {
  73         margin-left: 0;
  74         margin-bottom: 0;
  75         border: 0;
  76         padding-top: 0;
  77 }
  78
  79 .client-js #preferences > .oo-ui-panelLayout > .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header {
  80         margin-bottom: 1em;
  81 }
  82
  83 /* Make the "Basic information" section more compact */
  84 /* OOUI's `align: 'left'` for FieldLayouts sucks, so we do our own */
  85 #mw-htmlform-info > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
  86         width: 20%;
  87         display: inline-block;
  88         vertical-align: middle;
  89         padding: 0;
  90 }
  91
  92 #mw-htmlform-info > .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
  93         margin-right: 0;
  94 }
  95
  96 #mw-htmlform-info > .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
  97         width: 80%;
  98         display: inline-block;
  99         vertical-align: middle;
 100 }
 101
 102 /* Expand the dropdown and textfield of "Time zone" field to the */
 103 /* usual maximum width and display them on separate lines. */
 104 #wpTimeCorrection .oo-ui-dropdownInputWidget,
 105 #wpTimeCorrection .oo-ui-textInputWidget {
 106         display: block;
 107         max-width: 50em;
 108 }
 109
 110 #wpTimeCorrection .oo-ui-textInputWidget {
 111         margin-top: 0.5em;
 112 }
 113
 114 /* HACK: expand width of gadget descriptions.
 115  * This should be moved to the Gadgets extension */
 116 #mw-htmlform-gadgets .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
 117         max-width: none;
 118 }