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

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