From d9c5abde3cd2131bd0105252483a874e71307cfc Mon Sep 17 00:00:00 2001 From: Volker E Date: Tue, 29 May 2018 13:50:11 +0200 Subject: [PATCH] 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 --- resources/src/mediawiki.htmlform.ooui.styles.less | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/resources/src/mediawiki.htmlform.ooui.styles.less b/resources/src/mediawiki.htmlform.ooui.styles.less index 61a1c9cc56..0b56df1b00 100644 --- 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 { -- 2.20.1