From 2a9f1e75d4d3c06da1e28fd7db16e3fb72f8209a Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Fri, 16 Dec 2016 13:40:55 -0800
Subject: [PATCH] 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
---
 .../src/mediawiki/htmlform/ooui.styles.css    | 36 +++++++++++++++----
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/resources/src/mediawiki/htmlform/ooui.styles.css b/resources/src/mediawiki/htmlform/ooui.styles.css
index 40f4f5242e..dbf2b6b461 100644
--- 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;
+}
-- 
2.20.1