resources/src/mediawiki.special/contributions.less

   1 /*!
   2  * Styling for Special:Contributions
   3  */
   4 @import 'mediawiki.ui/variables.less';
   5
   6 // OOUIHTMLForm styles.
   7 @ooui-font-size-browser: 16; // Assumed browser default of `16px`.
   8 @ooui-font-size-base: 0.875em; // Equals `14px` at browser default of `16px`.
   9
  10 @ooui-spacing-small: 8 / @ooui-font-size-browser / @ooui-font-size-base; // Equals `0.57142857em`≈`8px`.
  11 @ooui-spacing-medium: 12 / @ooui-font-size-browser / @ooui-font-size-base; // Equals `0.8571429em`≈`12px`.
  12 @ooui-spacing-large: 16 / @ooui-font-size-browser / @ooui-font-size-base; // Equals `1.1428571em`≈`16px`.
  13
  14 .oo-ui-fieldsetLayout-group {
  15         max-width: 50em;
  16
  17         .oo-ui-panelLayout-padded.oo-ui-panelLayout-framed {
  18                 margin: 0;
  19                 border: 0;
  20                 padding: 0;
  21         }
  22
  23         // Hide extra `legend`s when grouping form in sections.
  24         .oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header {
  25                 display: none;
  26         }
  27 }
  28
  29 .mw-autocomplete-user.oo-ui-fieldLayout {
  30         margin-top: @ooui-spacing-small;
  31 }
  32
  33 // Higher specificity needed to override OOUIHTMLForm styles.
  34 .mw-htmlform-field-HTMLMultiSelectField.mw-htmlform-flatlist.oo-ui-fieldLayout {
  35         margin-top: @ooui-spacing-small;
  36 }
  37
  38 .mw-htmlform-field-HTMLTagFilter ~ .mw-htmlform-field-HTMLCheckField.oo-ui-fieldLayout {
  39         display: inline-block;
  40         padding-right: @ooui-spacing-large;
  41 }
  42
  43 // Clearfix for floated `.mw-htmlform-field-HTMLDateTimeField` below.
  44 #mw-htmlform-contribs-date:after {
  45         content: '';
  46         clear: both;
  47         display: block;
  48 }
  49
  50 .mw-htmlform-field-HTMLDateTimeField {
  51         margin-right: @ooui-spacing-large;
  52         margin-bottom: @ooui-spacing-small;
  53
  54         .oo-ui-fieldLayout.oo-ui-labelElement&:first-child {
  55                 margin-top: @ooui-spacing-medium;
  56         }
  57 }
  58
  59 @media all and ( min-width: @width-breakpoint-tablet ) {
  60         .mw-htmlform-field-HTMLDateTimeField {
  61                 float: left;
  62                 // Same `width` as DateInputWidget.
  63                 width: 21em;
  64         }
  65 }