OOUIHTMLForm: Improve HTMLCheckMatrix for further clarity

Increase distance between rows slightly and use white to
emphasise row `:hover` color contrast.
Also
- amend `padding` to full pixel widths and
- center-align all but the checkbox labels for better orientation.

Bug: T194536
Change-Id: I03e193beaa8c6479a710056d095cb79098544389

diff --git a/resources/src/mediawiki.htmlform.ooui.styles.less b/resources/src/mediawiki.htmlform.ooui.styles.less
index 61a1c9c..0b56df1 100644 (file)
--- a/resources/src/mediawiki.htmlform.ooui.styles.less
+++ b/resources/src/mediawiki.htmlform.ooui.styles.less
@@ -6,6 +6,8 @@
 
 @ooui-spacing-medium: 12 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.8571429em`≈`12px`
 @ooui-spacing-large: 16 / @ooui-font-size-browser / @ooui-font-size-base; // equals `1.1428571em`≈`16px`
+@ooui-padding-horizontal: 12 / @ooui-font-size-browser / @ooui-font-size-base;
+@ooui-padding-vertical: 4 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.285714em`≈`4px`
 
 .mw-htmlform-ooui-wrapper.oo-ui-panelLayout-padded {
        padding: @ooui-spacing-medium @ooui-spacing-large @ooui-spacing-large;
@@ -23,11 +25,16 @@
        }
 
        .mw-htmlform-matrix {
-               border-spacing: 0;
+               border-spacing: 0 2px;
 
                td {
-                       padding: 0.35em 0.7em;
+                       padding: @ooui-padding-vertical @ooui-padding-horizontal;
+                       text-align: center;
                        .transition( background-color 250ms );
+
+                       &:first-child {
+                               text-align: left;
+                       }
                }
 
                tbody tr:nth-child( even ) td {
@@ -40,6 +47,7 @@
 
                tbody tr:first-child td {
                        background-color: #fff;
+                       padding-bottom: 0;
                }
 
                td.first {