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         box-shadow: none;
  54 }
  55
  56 /* Tweak the margins to reduce the shifting of form contents
  57  * after JS code loads and rearranges the page */
  58 .client-js #preferences > .oo-ui-panelLayout {
  59         margin: 1em 0;
  60 }
  61
  62 .client-js #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
  63         margin-left: 0.25em;
  64 }
  65
  66 .client-js #preferences .oo-ui-tabPanelLayout {
  67         padding-top: 0.5em;
  68         padding-bottom: 0.5em;
  69 }
  70
  71 .client-js #preferences .oo-ui-tabPanelLayout .oo-ui-panelLayout-framed {
  72         margin-left: 0;
  73         margin-bottom: 0;
  74         border: 0;
  75         padding-top: 0;
  76 }
  77
  78 .client-js #preferences > .oo-ui-panelLayout > .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header {
  79         margin-bottom: 1em;
  80 }
  81
  82 /* Make the "Basic information" section more compact */
  83 /* OOUI's `align: 'left'` for FieldLayouts sucks, so we do our own */
  84 #mw-htmlform-info > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
  85         width: 20%;
  86         display: inline-block;
  87         vertical-align: middle;
  88         padding: 0;
  89 }
  90
  91 #mw-htmlform-info > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
  92         width: 80%;
  93         display: inline-block;
  94         vertical-align: middle;
  95 }
  96
  97 /* Expand the dropdown and textfield of "Time zone" field to the */
  98 /* usual maximum width and display them on separate lines. */
  99 #wpTimeCorrection .oo-ui-dropdownInputWidget,
 100 #wpTimeCorrection .oo-ui-textInputWidget {
 101         display: block;
 102         max-width: 50em;
 103 }
 104
 105 #wpTimeCorrection .oo-ui-textInputWidget {
 106         margin-top: 0.5em;
 107 }