wikimedia/mediawiki-extensions-MultimediaViewer
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer synced 2024-09-29 13:17:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

RTL positioning tweaks

Browse source 
* 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
This commit is contained in:
Gergő Tisza 2014-06-28 01:03:16 +00:00
parent b79f3a8392
commit eff0207199
1 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/mmv/ui/mmv.ui.metadataPanel.less
View file

@ -137,7 +137,12 @@
background-image: url(img/repo.svg); background-image: url(img/repo.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: auto @icon-size; 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: 2% center;
background-position: left @padding center;
background-color: @info-box-color; background-color: @info-box-color;
line-height: 1.3; line-height: 1.3;
@ -150,6 +155,7 @@
padding-left: @icon-size + 2 * @padding; padding-left: @icon-size + 2 * @padding;
background-size: auto @icon-size; background-size: auto @icon-size;
background-position: 3% center; background-position: 3% center;
background-position: left @padding+4px center;
} }
.mw-mmv-repo, .mw-mmv-repo,
@ -173,7 +179,7 @@
.mw-mmv-license { .mw-mmv-license {
color: #888888; color: #888888;
font-size: 0.9em; 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 { &.empty {
display: none; display: none;
@ -188,7 +194,7 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
content: ' '; content: ' ';
margin-right: 5px; /* @noflip */ margin-right: 5px; // :before is not flipped either
} }
} }