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 .mw-special-Contributions {
  15         .oo-ui-fieldsetLayout-group {
  16                 max-width: 50em;
  17
  18                 .oo-ui-panelLayout-padded.oo-ui-panelLayout-framed {
  19                         margin: 0;
  20                         border: 0;
  21                         padding: 0;
  22                 }
  23
  24                 // Hide extra `legend`s when grouping form in sections.
  25                 .oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header {
  26                         display: none;
  27                 }
  28         }
  29
  30         .mw-autocomplete-user.oo-ui-fieldLayout {
  31                 margin-top: @ooui-spacing-small;
  32         }
  33
  34         // Higher specificity needed to override OOUIHTMLForm styles.
  35         .mw-htmlform-field-HTMLMultiSelectField.mw-htmlform-flatlist.oo-ui-fieldLayout {
  36                 margin-top: @ooui-spacing-small;
  37         }
  38
  39         .mw-htmlform-field-HTMLTagFilter ~ .mw-htmlform-field-HTMLCheckField.oo-ui-fieldLayout {
  40                 display: inline-block;
  41                 padding-right: @ooui-spacing-large;
  42         }
  43
  44         // Clearfix for floated `.mw-htmlform-field-HTMLDateTimeField` below.
  45         #mw-htmlform-contribs-date:after {
  46                 content: '';
  47                 clear: both;
  48                 display: block;
  49         }
  50
  51         .mw-htmlform-field-HTMLDateTimeField {
  52                 margin-right: @ooui-spacing-large;
  53                 margin-bottom: @ooui-spacing-small;
  54         }
  55
  56         .oo-ui-fieldLayout.oo-ui-labelElement.mw-htmlform-field-HTMLDateTimeField:first-child {
  57                 margin-top: @ooui-spacing-medium;
  58         }
  59
  60         @media all and ( min-width: @width-breakpoint-tablet ) {
  61                 .mw-htmlform-field-HTMLDateTimeField {
  62                         float: left;
  63                         // Same `width` as DateInputWidget.
  64                         width: 21em;
  65                 }
  66         }
  67 }