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         padding: @ooui-spacing-medium @ooui-spacing-large @ooui-spacing-large;
  16 }
  17
  18 .mw-htmlform-ooui {
  19         line-height: 1.4; // Override MediaWiki's default of `1.6`
  20
  21         .oo-ui-fieldsetLayout-header {
  22                 font-size: 100%; // Override MediaWiki's generic `legend` styling
  23         }
  24
  25         .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
  26                 line-height: 16 / @ooui-font-size-browser / @ooui-font-size-base;
  27         }
  28
  29         .mw-htmlform-field-HTMLCheckMatrix {
  30                 width: 100%;
  31         }
  32
  33         // Default OOUI styles produce a larger margin here
  34         .mw-htmlform-field-HTMLSizeFilterField {
  35                 margin-top: @ooui-spacing-medium;
  36         }
  37
  38         .mw-htmlform-matrix {
  39                 border-spacing: 0 2px;
  40
  41                 th {
  42                         font-weight: normal;
  43                 }
  44
  45                 td {
  46                         padding: @ooui-padding-vertical @ooui-padding-horizontal;
  47                         text-align: center;
  48                         .transition( background-color 250ms );
  49
  50                         &:first-child {
  51                                 text-align: left;
  52                         }
  53
  54                         &.first {
  55                                 margin-right: 5%;
  56                                 width: 39%;
  57                         }
  58                 }
  59
  60                 thead tr td {
  61                         padding-bottom: 0;
  62                 }
  63
  64                 tbody tr:nth-child( even ) td {
  65                         background-color: #f8f9fa;
  66                 }
  67
  68                 tbody tr:hover td {
  69                         background-color: #eaecf0;
  70                 }
  71
  72                 // Specificity needed because of necessary high OOUI specificity due to modularity
  73                 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help {
  74                         margin-top: 0;
  75                 }
  76
  77                 .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
  78                         padding-bottom: 0;
  79                 }
  80         }
  81 }
  82
  83 // Flatlist styling for PHP (`.oo-ui-fieldLayout-align-inline`) &
  84 // JS (`.oo-ui-radioOptionWidget, .oo-ui-checkboxMultioptionWidget`) widgets
  85 .mw-htmlform-flatlist {
  86         .oo-ui-fieldLayout-align-inline,
  87         .oo-ui-radioOptionWidget,
  88         .oo-ui-checkboxMultioptionWidget {
  89                 display: inline-block;
  90                 margin-right: @ooui-spacing-medium;
  91         }
  92
  93         // Reduce label distance in flatlist
  94         &.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
  95                 padding-bottom: 0;
  96         }
  97 }
  98
  99 // First selector is flatlist specific
 100 .mw-htmlform-field-HTMLMultiSelectField.oo-ui-fieldLayout,
 101 .mw-htmlform-ooui .htmlform-tip,
 102 .mw-htmlform-ooui .mw-htmlform-submit-buttons {
 103         margin-top: @ooui-spacing-medium;
 104 }