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  */
  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-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
  48         border-width: 0;
  49         border-radius: 0;
  50         box-shadow: none;
  51         padding-left: 0;
  52         padding-right: 0;
  53 }
  54
  55 .mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-menu a {
  56         color: inherit;
  57         text-decoration: none;
  58 }
  59
  60 /* Adjust the borders when JS is disabled: frame each prefsection instead of the
  61  * whole tabLayout wrapper */
  62 .client-nojs #preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:first-child {
  63         border-color: #c8ccd1;
  64         border-width: 1px 0 0;
  65 }
  66
  67 .client-nojs .mw-prefs-faketabs {
  68         border-width: 0;
  69         border-radius: 0;
  70         box-shadow: none;
  71 }
  72
  73 .client-nojs .mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-content > .oo-ui-stackLayout {
  74         margin-bottom: 1em;
  75 }
  76
  77 /* Hide the tab menu when JS is disabled as we can't use this feature */
  78 .client-nojs .mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
  79         display: none;
  80 }
  81
  82 .client-nojs #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:last-child {
  83         padding-bottom: 0;
  84         margin-bottom: 0;
  85 }
  86
  87 /* Hide top level legends when JS is enabled, as they will not be visible
  88  * when the real tabLayout is built */
  89 .client-js #preferences .oo-ui-tabPanelLayout > fieldset > legend {
  90         display: none;
  91 }
  92
  93 .client-js #preferences .oo-ui-tabPanelLayout {
  94         padding-top: 0.5em;
  95 }
  96
  97 .client-js #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
  98         margin-top: 2.286em; /* equals `32px` at `font-size: 14px;` */
  99         margin-bottom: 0;
 100         border-width: 0;
 101         border-radius: 0;
 102         padding: 0;
 103         box-shadow: none;
 104 }
 105
 106 .client-js #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:first-child {
 107         margin-top: 0.85714286em;
 108 }
 109
 110 .client-js #preferences > .oo-ui-panelLayout > .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header {
 111         margin-bottom: 1em;
 112 }
 113
 114 /* Make the "Basic information" section more compact */
 115 /* OOUI's `align: 'left'` for FieldLayouts sucks, so we do our own */
 116 #mw-htmlform-info > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
 117         width: 20%;
 118         display: inline-block;
 119         vertical-align: middle;
 120         padding: 0;
 121 }
 122
 123 #mw-htmlform-info > .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
 124         margin-right: 0;
 125 }
 126
 127 #mw-htmlform-info > .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
 128         width: 80%;
 129         display: inline-block;
 130         vertical-align: middle;
 131 }
 132
 133 /* Expand the dropdown and textfield of "Time zone" field to the */
 134 /* usual maximum width and display them on separate lines. */
 135 #wpTimeCorrection .oo-ui-dropdownInputWidget,
 136 #wpTimeCorrection .oo-ui-textInputWidget {
 137         display: block;
 138         max-width: 50em;
 139 }
 140
 141 #wpTimeCorrection .oo-ui-textInputWidget {
 142         margin-top: 0.5em;
 143 }
 144
 145 /* HACK: expand width of gadget descriptions.
 146  * This should be moved to the Gadgets extension */
 147 #mw-htmlform-gadgets .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
 148         max-width: none;
 149 }