Improve visual association of elements in OOjs UI HTMLForm matrix

Improving visual association of checkboxes and their descriptions
in OOjs UI HTMLForm matrix by introducing row `background-color`
cue and decreasing distance between elements.
Also increasing top margin of `.htmlform-tip`.

Bug: T152532
Change-Id: I84f64e54b242efef897073eed8afb2555614116b

diff --git a/resources/src/mediawiki/htmlform/ooui.styles.css b/resources/src/mediawiki/htmlform/ooui.styles.css
index 40f4f52..dbf2b6b 100644 (file)
--- a/resources/src/mediawiki/htmlform/ooui.styles.css
+++ b/resources/src/mediawiki/htmlform/ooui.styles.css
@@ -1,16 +1,33 @@
 /* OOUIHTMLForm styles */
 
-.mw-htmlform-ooui .mw-htmlform-submit-buttons {
-       margin-top: 1em;
+.mw-htmlform-ooui .mw-htmlform-field-HTMLCheckMatrix {
+       width: 100%;
 }
 
-.mw-htmlform-ooui .mw-htmlform-field-HTMLCheckMatrix,
-.mw-htmlform-ooui .mw-htmlform-matrix,
-.mw-htmlform-ooui .mw-htmlform-matrix tr {
-       width: 100%;
+.mw-htmlform-ooui .mw-htmlform-matrix {
+       border-spacing: 0;
+}
+
+.mw-htmlform-ooui .mw-htmlform-matrix td {
+       padding: 0.35em 0.7em;
+       -webkit-transition: background-color 250ms;
+       -moz-transition: background-color 250ms;
+       transition: background-color 250ms;
+}
+
+.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child( even ) td {
+       background-color: #f8f9fa;
 }
 
-.mw-htmlform-ooui .mw-htmlform-matrix tr td.first {
+.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:not( :first-child ):hover td {
+       background-color: #eaecf0;
+}
+
+.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:first-child td {
+       background-color: #fff;
+}
+
+.mw-htmlform-ooui .mw-htmlform-matrix td.first {
        margin-right: 5%;
        width: 39%;
 }
@@ -23,3 +40,8 @@
        display: inline-block;
        margin-right: 1em;
 }
+
+.mw-htmlform-ooui .htmlform-tip,
+.mw-htmlform-ooui .mw-htmlform-submit-buttons {
+       margin-top: 1em;
+}