resources/src/mediawiki.htmlform.ooui.styles.less

   1 @import 'mediawiki.skin.variables.less';
   2 @import 'mediawiki.mixins.less';
   3
   4 /* stylelint-disable selector-class-pattern */
   5 // OOUIHTMLForm styles
   6 @ooui-font-size-browser: 16; // assumed browser default of `16px`
   7 @ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`
   8
   9 // Equals `1.85714286em`≈`26px`.
  10 @ooui-spacing-radio-label: (26 / @ooui-font-size-browser / @ooui-font-size-base);
  11
  12 .mw-htmlform-ooui {
  13         line-height: 1.4; // Override MediaWiki's default of `1.6`
  14
  15         .oo-ui-fieldsetLayout-header {
  16                 font-size: 100%; // Override MediaWiki's generic `legend` styling
  17         }
  18
  19         .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
  20                 line-height: (16 / @ooui-font-size-browser / @ooui-font-size-base);
  21         }
  22
  23         // Default OOUI styles produce a larger margin here
  24         .mw-htmlform-field-HTMLSizeFilterField {
  25                 margin-top: @spacing-75;
  26         }
  27
  28         .mw-htmlform-matrix {
  29                 border-spacing: 0;
  30
  31                 th {
  32                         font-weight: normal;
  33                 }
  34
  35                 td,
  36                 th {
  37                         padding: @spacing-75;
  38                         text-align: center;
  39                         transition: background-color 250ms;
  40
  41                         &:first-child {
  42                                 text-align: left;
  43                         }
  44                 }
  45
  46                 tbody tr:nth-child( even ) td {
  47                         background-color: @background-color-neutral-subtle;
  48                 }
  49
  50                 tbody tr:hover td {
  51                         background-color: @background-color-neutral;
  52                 }
  53
  54                 .oo-ui-fieldLayout-help {
  55                         // Clickable size is much larger than visual size,
  56                         // adjust so that it doesn't affect row height.
  57                         margin-bottom: -6px;
  58                 }
  59
  60                 .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
  61                         padding-bottom: 0;
  62                 }
  63         }
  64
  65         // Allows fields to be visually indented to associate them with a checkbox or
  66         // radio button that enables/disables them.
  67         .oo-ui-fieldLayout.mw-htmlform-checkradio-indent {
  68                 margin-left: @ooui-spacing-radio-label;
  69
  70                 .oo-ui-tagMultiselectWidget,
  71                 .oo-ui-textInputWidget {
  72                         max-width: 50em - @ooui-spacing-radio-label;
  73                 }
  74         }
  75 }
  76
  77 // Flatlist styling for PHP (`.oo-ui-fieldLayout-align-inline`) &
  78 // JS (`.oo-ui-radioOptionWidget, .oo-ui-checkboxMultioptionWidget`) widgets
  79 .mw-htmlform-flatlist {
  80         .oo-ui-fieldLayout-align-inline,
  81         .oo-ui-radioOptionWidget,
  82         .oo-ui-checkboxMultioptionWidget {
  83                 display: inline-block;
  84                 margin-right: @spacing-75;
  85         }
  86
  87         // Reduce label distance in flatlist
  88         &.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
  89                 padding-bottom: 0;
  90         }
  91 }
  92
  93 // First selector is flatlist specific
  94 .mw-htmlform-field-HTMLMultiSelectField.oo-ui-fieldLayout,
  95 .mw-htmlform-ooui .htmlform-tip,
  96 .mw-htmlform-ooui .mw-htmlform-submit-buttons {
  97         margin-top: @spacing-75;
  98 }