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