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