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

   1 // OOUIHTMLForm styles
   2 @ooui-font-size-browser: 16; // assumed browser default of `16px`
   3 @ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`
   4
   5 @ooui-spacing-medium: 12 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.8571429em`≈`12px`
   6 @ooui-spacing-large: 16 / @ooui-font-size-browser / @ooui-font-size-base; // equals `1.1428571em`≈`16px`
   7
   8 .mw-htmlform-ooui-wrapper.oo-ui-panelLayout-padded {
   9         padding: @ooui-spacing-medium @ooui-spacing-large @ooui-spacing-large;
  10 }
  11
  12 .mw-htmlform-ooui {
  13         line-height: 1.4; // Override MediaWiki's default of `1.6`
  14
  15         .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
  16                 line-height: 16 / @ooui-font-size-browser / @ooui-font-size-base;
  17         }
  18
  19         .mw-htmlform-field-HTMLCheckMatrix {
  20                 width: 100%;
  21         }
  22
  23         .mw-htmlform-matrix {
  24                 border-spacing: 0;
  25
  26                 td {
  27                         padding: 0.35em 0.7em;
  28                         -webkit-transition: background-color 250ms;
  29                         -moz-transition: background-color 250ms;
  30                         transition: background-color 250ms;
  31                 }
  32
  33                 tbody tr:nth-child( even ) td {
  34                         background-color: #f8f9fa;
  35                 }
  36
  37                 tbody tr:not( :first-child ):hover td {
  38                         background-color: #eaecf0;
  39                 }
  40
  41                 tbody tr:first-child td {
  42                         background-color: #fff;
  43                 }
  44
  45                 td.first {
  46                         margin-right: 5%;
  47                         width: 39%;
  48                 }
  49         }
  50 }
  51
  52 // Flatlist styling for PHP widgets...
  53 .mw-htmlform-flatlist .oo-ui-fieldLayout-align-inline,
  54 // ...and for JS widgets
  55 .mw-htmlform-flatlist .oo-ui-radioOptionWidget,
  56 .mw-htmlform-flatlist .oo-ui-checkboxMultioptionWidget {
  57         display: inline-block;
  58         margin-right: @ooui-spacing-medium;
  59 }
  60
  61 .mw-htmlform-ooui .htmlform-tip,
  62 .mw-htmlform-ooui .mw-htmlform-submit-buttons {
  63         margin-top: @ooui-spacing-medium;
  64 }