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 // Support Edge: The `position: sticky` rule above causes the buttons to
  31 // disappear in RTL languages on Microsoft Edge. This magically fixes the issue. See T220706.
  32 #preferences {
  33         filter: brightness( 1 );
  34 }
  35
  36 /* This is needed because add extra buttons in a weird way */
  37 .mw-prefs-buttons .mw-htmlform-submit-buttons {
  38         display: inline;
  39         margin: 0;
  40 }
  41
  42 #prefcontrol {
  43         margin-right: 0.5em;
  44 }
  45
  46 /*
  47  * Hide, when not keyboard focussed.
  48  */
  49 .client-js .mw-navigation-hint:not( :focus ) {
  50         height: 0;
  51         overflow: hidden;
  52 }
  53
  54 .mw-prefs-tabs {
  55         .mw-prefs-fieldset-wrapper {
  56                 padding-left: 0;
  57                 padding-right: 0;
  58
  59                 &:first-child {
  60                         padding-top: 0;
  61                 }
  62
  63                 &:last-child {
  64                         padding-bottom: 0;
  65                 }
  66         }
  67 }
  68
  69 .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed,
  70 .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
  71         /* Decrease contrast of `border` slightly as padding/border combination is sufficient
  72          * accessibility wise and focus of content is more important here. */
  73         border-color: #c8ccd1;
  74 }
  75
  76 /* JavaScript disabled */
  77 .client-nojs {
  78         // Disable .oo-ui-panelLayout-framed on outer wrapper
  79         .mw-prefs-tabs-wrapper {
  80                 border-width: 0;
  81                 border-radius: 0;
  82         }
  83
  84         .mw-prefs-tabs {
  85                 // Hide the tab menu when JS is disabled as we can't use this feature
  86                 > .oo-ui-menuLayout-menu {
  87                         display: none;
  88                 }
  89
  90                 .mw-prefs-section-fieldset {
  91                         // <legend> is hard to style, so apply border to top of group
  92                         > .oo-ui-fieldsetLayout-group {
  93                                 padding-top: 1.5em;
  94                                 border-top: 1px solid #c8ccd1;
  95                         }
  96
  97                         // Remove spacing between legend and underline
  98                         &.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
  99                                 margin-bottom: 0;
 100                         }
 101                 }
 102
 103                 // Spacing between sections
 104                 > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout {
 105                         margin-bottom: 1em;
 106                 }
 107         }
 108 }
 109
 110 /* JavaScript enabled */
 111 .client-js .mw-prefs-tabs {
 112         .oo-ui-tabPanelLayout {
 113                 // Panels don't need borders as the IndexLayout is inside a framed wrapper.
 114                 border: 0;
 115
 116                 // Hide section legend, only used in nojs mode
 117                 > fieldset > legend {
 118                         display: none;
 119                 }
 120         }
 121
 122         // Hide all but the first panel before infusion
 123         &:not( .mw-prefs-tabs-infused ) {
 124                 .oo-ui-tabPanelLayout:not( :first-child ) {
 125                         display: none;
 126                 }
 127         }
 128 }
 129
 130 /* Make the "Basic information" section more compact */
 131 /* OOUI's `align: 'left'` for FieldLayouts sucks, so we do our own */
 132 #mw-htmlform-info {
 133         > .oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
 134                 display: inline-block;
 135                 width: 20%;
 136                 padding: 0;
 137                 vertical-align: middle;
 138         }
 139
 140         > .oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
 141                 margin-right: 0;
 142         }
 143
 144         > .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
 145                 display: inline-block;
 146                 width: 80%;
 147                 vertical-align: middle;
 148         }
 149 }
 150
 151 /* Compact number inputs, used at "Display options" on "Recent changes" */
 152 .mw-htmlform-field-HTMLFloatField,
 153 .mw-htmlform-field-HTMLIntField {
 154         .oo-ui-inputWidget {
 155                 max-width: 10em;
 156         }
 157 }
 158
 159 /* Expand the dropdown and textfield of "Time zone" field to the */
 160 /* usual maximum width and display them on separate lines. */
 161 #wpTimeCorrection .oo-ui-dropdownInputWidget,
 162 #wpTimeCorrection .oo-ui-textInputWidget {
 163         display: block;
 164         max-width: 50em;
 165 }
 166
 167 #wpTimeCorrection .oo-ui-textInputWidget {
 168         margin-top: 0.5em;
 169 }
 170
 171 /* HACK: expand width of gadget descriptions.
 172  * This should be moved to the Gadgets extension */
 173 #mw-htmlform-gadgets .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
 174         max-width: none;
 175 }