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