resources/src/mediawiki.special.preferences.styles.ooui.less

   1 @import 'mediawiki.mixins';
   2
   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;
   7         color: #000;
   8         border: 1px solid #fde29b;
   9         padding: 0.5em;
  10 }
  11 /* Authenticated email field has its own class too. Unstyled by default */
  12 /*
  13 .mw-email-authenticated .oo-ui-labelWidget { }
  14 */
  15
  16 /* This is needed because add extra buttons in a weird way */
  17 .mw-prefs-buttons .mw-htmlform-submit-buttons {
  18         display: inline;
  19         margin: 0;
  20 }
  21
  22 .mw-prefs-buttons {
  23         margin-top: 1em;
  24 }
  25
  26 #prefcontrol {
  27         margin-right: 0.5em;
  28 }
  29
  30 /*
  31  * Hide, but keep accessible for screen-readers.
  32  */
  33 .client-js .mw-navigation-hint:not( :focus ) {
  34         .mixin-screen-reader-text;
  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
  43         overflow: visible;
  44         .transform( none );
  45
  46         /* Most outer Panellayout:
  47          * Decrease contrast of `border` slightly as padding/border combination is sufficient
  48          * accessibility wise and focus of content is more important here. */
  49         &-framed {
  50                 border-color: #c8ccd1;
  51         }
  52 }
  53
  54 #preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
  55         border-width: 0;
  56         border-radius: 0;
  57         padding-left: 0;
  58         padding-right: 0;
  59         box-shadow: none;
  60 }
  61
  62 .mw-prefs-faketabs > .oo-ui-menuLayout > .oo-ui-menuLayout-menu a {
  63         color: inherit;
  64         text-decoration: none;
  65 }
  66
  67 /* Disabled JavaScript */
  68 .client-nojs {
  69         /* Adjust the borders: frame each prefsection instead of the
  70          * whole tabLayout wrapper */
  71         #preferences .oo-ui-menuLayout .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:first-child {
  72                 border-color: #c8ccd1;
  73                 border-width: 1px 0 0;
  74         }
  75
  76         #preferences .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed:last-child {
  77                 padding-bottom: 0;
  78                 margin-bottom: 0;
  79         }
  80
  81         /* Fake Tabs to address reflow */
  82         .mw-prefs-faketabs {
  83                 border-width: 0;
  84                 border-radius: 0;
  85                 .box-shadow( none );
  86
  87                 > .oo-ui-menuLayout > .oo-ui-menuLayout-content > .oo-ui-stackLayout {
  88                         margin-bottom: 1em;
  89                 }
  90
  91                 /* Hide the tab menu when JS is disabled as we can't use this feature */
  92                 > .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
  93                         display: none;
  94                 }
  95         }
  96 }
  97
  98 /* Enabled JavaScript
  99  * Hide top level legends when JS is enabled, as they will not be visible
 100  * when the real tabLayout is built */
 101 .client-js #preferences {
 102         .oo-ui-tabPanelLayout {
 103                 padding-top: 0.5em;
 104
 105                 & > fieldset > legend {
 106                         display: none;
 107                 }
 108         }
 109
 110         .oo-ui-panelLayout-framed .oo-ui-panelLayout-framed {
 111                 margin-top: 2.286em; /* equals `32px` at `font-size: 14px;` */
 112                 margin-bottom: 0;
 113                 border-width: 0;
 114                 border-radius: 0;
 115                 padding: 0;
 116                 box-shadow: none;
 117
 118                 &:first-child {
 119                         margin-top: 0.85714286em;
 120                 }
 121
 122                 .oo-ui-panelLayout-framed:first-child {
 123                         margin-top: 0;
 124                 }
 125         }
 126
 127         > .oo-ui-panelLayout > .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header {
 128                 margin-bottom: 1em;
 129         }
 130 }
 131
 132 /* Make the "Basic information" section more compact */
 133 /* OOUI's `align: 'left'` for FieldLayouts sucks, so we do our own */
 134 #mw-htmlform-info {
 135         > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
 136                 display: inline-block;
 137                 width: 20%;
 138                 padding: 0;
 139                 vertical-align: middle;
 140         }
 141
 142         > .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
 143                 margin-right: 0;
 144         }
 145
 146         > .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
 147                 display: inline-block;
 148                 width: 80%;
 149                 vertical-align: middle;
 150         }
 151 }
 152
 153 /* Compact number inputs, used at "Display options" on "Recent changes" */
 154 .mw-htmlform-field-HTMLFloatField,
 155 .mw-htmlform-field-HTMLIntField {
 156         .oo-ui-inputWidget {
 157                 max-width: 10em;
 158         }
 159 }
 160
 161 /* Expand the dropdown and textfield of "Time zone" field to the */
 162 /* usual maximum width and display them on separate lines. */
 163 #wpTimeCorrection .oo-ui-dropdownInputWidget,
 164 #wpTimeCorrection .oo-ui-textInputWidget {
 165         display: block;
 166         max-width: 50em;
 167 }
 168
 169 #wpTimeCorrection .oo-ui-textInputWidget {
 170         margin-top: 0.5em;
 171 }
 172
 173 /* HACK: expand width of gadget descriptions.
 174  * This should be moved to the Gadgets extension */
 175 #mw-htmlform-gadgets .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
 176         max-width: none;
 177 }