From eff0207199dca60bbb4f0b82bd8ed4d94521b0dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20Tisza?= Date: Sat, 28 Jun 2014 01:03:16 +0000 Subject: [PATCH] RTL positioning tweaks * partially undo the RTL fix from mingle #512 which looks bad, and use four-value syyntax for background-position instead. * use noflip on :before rule as :before itself is not flipped * handle better the uncertainty resulting from image name usually not being RTL Change-Id: If4aa7240e9bee5c0a06f1785edb9c72964dfc60f --- resources/mmv/ui/mmv.ui.metadataPanel.less | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.less b/resources/mmv/ui/mmv.ui.metadataPanel.less index 3e4d84772..786874f9c 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanel.less +++ b/resources/mmv/ui/mmv.ui.metadataPanel.less @@ -137,7 +137,12 @@ background-image: url(img/repo.svg); background-repeat: no-repeat; background-size: auto @icon-size; + // icon should be positioned with consistent padding, but using absolute lengths is not RTL-compatible + // so we use percentages (looks a bit off) for older browsers and four-value syntax for newer ones; + // MediaWiki flips 'left' keywords automatically background-position: 2% center; + background-position: left @padding center; + background-color: @info-box-color; line-height: 1.3; @@ -150,6 +155,7 @@ padding-left: @icon-size + 2 * @padding; background-size: auto @icon-size; background-position: 3% center; + background-position: left @padding+4px center; } .mw-mmv-repo, @@ -173,7 +179,7 @@ .mw-mmv-license { color: #888888; font-size: 0.9em; - padding-left: 10px; + padding: 0 10px; // pad both sides; depending on the language of the image name, this might end up on either side &.empty { display: none; @@ -188,7 +194,7 @@ height: 20px; width: 20px; content: ' '; - margin-right: 5px; + /* @noflip */ margin-right: 5px; // :before is not flipped either } }