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

   1 @import 'mediawiki.mixins';
   2
   3 /* stylelint-disable selector-class-pattern */
   4
   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 @ooui-spacing-medium: 12 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.8571429em`≈`12px`
  10 @ooui-spacing-large: 16 / @ooui-font-size-browser / @ooui-font-size-base; // equals `1.1428571em`≈`16px`
  11 @ooui-padding-horizontal: 12 / @ooui-font-size-browser / @ooui-font-size-base;
  12 @ooui-padding-vertical: 4 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.285714em`≈`4px`
  13
  14 .mw-htmlform-ooui-wrapper.oo-ui-panelLayout-padded {
  15         // Reducing `padding-top`, as the heading's `line-height` provides similar distance.
  16         padding: @ooui-spacing-medium @ooui-spacing-large @ooui-spacing-large;
  17
  18         // Trigger only when collapsible & JS is available via `.mw-collapsed`.
  19         .client-js & .oo-ui-fieldsetLayout.mw-collapsed .oo-ui-fieldsetLayout-header {
  20                 // Negative margin to match the reduced distance on the top caused by the previous rule.
  21                 margin-bottom: -( @ooui-spacing-large - @ooui-spacing-medium );
  22
  23                 .oo-ui-labelElement-label {
  24                         margin-bottom: 0;
  25                 }
  26         }
  27 }
  28
  29 .mw-htmlform-ooui {
  30         line-height: 1.4; // Override MediaWiki's default of `1.6`
  31
  32         .oo-ui-fieldsetLayout-header {
  33                 font-size: 100%; // Override MediaWiki's generic `legend` styling
  34         }
  35
  36         .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
  37                 line-height: 16 / @ooui-font-size-browser / @ooui-font-size-base;
  38         }
  39
  40         .mw-htmlform-field-HTMLCheckMatrix {
  41                 width: 100%;
  42         }
  43
  44         // Default OOUI styles produce a larger margin here
  45         .mw-htmlform-field-HTMLSizeFilterField {
  46                 margin-top: @ooui-spacing-medium;
  47         }
  48
  49         .mw-htmlform-matrix {
  50                 border-spacing: 0 2px;
  51
  52                 th {
  53                         font-weight: normal;
  54                 }
  55
  56                 td {
  57                         padding: @ooui-padding-vertical @ooui-padding-horizontal;
  58                         text-align: center;
  59                         .transition( background-color 250ms );
  60
  61                         &:first-child {
  62                                 text-align: left;
  63                         }
  64
  65                         &.first {
  66                                 margin-right: 5%;
  67                                 width: 39%;
  68                         }
  69                 }
  70
  71                 thead tr td {
  72                         padding-bottom: 0;
  73                 }
  74
  75                 tbody tr:nth-child( even ) td {
  76                         background-color: #f8f9fa;
  77                 }
  78
  79                 tbody tr:hover td {
  80                         background-color: #eaecf0;
  81                 }
  82
  83                 // Specificity needed because of necessary high OOUI specificity due to modularity
  84                 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
  85                         margin-top: 0;
  86                 }
  87
  88                 .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
  89                         padding-bottom: 0;
  90                 }
  91         }
  92 }
  93
  94 // Flatlist styling for PHP (`.oo-ui-fieldLayout-align-inline`) &
  95 // JS (`.oo-ui-radioOptionWidget, .oo-ui-checkboxMultioptionWidget`) widgets
  96 .mw-htmlform-flatlist {
  97         .oo-ui-fieldLayout-align-inline,
  98         .oo-ui-radioOptionWidget,
  99         .oo-ui-checkboxMultioptionWidget {
 100                 display: inline-block;
 101                 margin-right: @ooui-spacing-medium;
 102         }
 103
 104         // Reduce label distance in flatlist
 105         &.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
 106                 padding-bottom: 0;
 107         }
 108 }
 109
 110 // First selector is flatlist specific
 111 .mw-htmlform-field-HTMLMultiSelectField.oo-ui-fieldLayout,
 112 .mw-htmlform-ooui .htmlform-tip,
 113 .mw-htmlform-ooui .mw-htmlform-submit-buttons {
 114         margin-top: @ooui-spacing-medium;
 115 }