From: Gabriel Wicke <gwicke@wikimedia.org>
Date: Sat, 7 Jun 2014 05:10:49 +0000 (-0700)
Subject: Bug 66287: Proper caption styling
X-Git-Tag: 1.31.0-rc.0~15449
X-Git-Url: http://git.cyclocoop.org/%7B%24admin_url%7Dcompta/comptes/journal.php?a=commitdiff_plain;h=7086dadc1874da59d31c742d49c8ead2e5328f7c;p=lhc%2Fweb%2Fwiklou.git

Bug 66287: Proper caption styling

* Make sure borders render properly even in Chrome & with zoom on high-dpi
  devices. overflow: auto is important for this.

* Set borders & background on imagecaption

* Enable border-collapsing; we are rendering this as a table & want the
  caption & figure to show a single border

* Add appropriate margin on the image to create some padding inside the figure
  despite border-collapsing

Tested in Chrome & Firefox.

Change-Id: Ibb46b682138ac703bea364efaeefc376e60c2d5f
---

diff --git a/resources/src/mediawiki.skinning/content.parsoid.less b/resources/src/mediawiki.skinning/content.parsoid.less
index a9f0ab4d87..dd403a0bef 100644
--- a/resources/src/mediawiki.skinning/content.parsoid.less
+++ b/resources/src/mediawiki.skinning/content.parsoid.less
@@ -63,18 +63,24 @@ figure[typeof*='mw:Image'] {
 		line-height: 1.4em;
 		text-align: left;
 
-		/* taken from .thumbcaption */
-		padding: 3px;
+		border: 1px solid #ccc;
+		border-top: 0;
+
+		/* taken from .thumbcaption, plus .thumbinner */
+		padding: 1px 5px 5px;
+		background-color: #f9f9f9;
 	}
 }
 
 figure[typeof~='mw:Image/Thumb'],
 figure[typeof~='mw:Image/Frame'] {
 	display: table;
-	overflow: hidden;
+	overflow: auto;
 	text-align: center;
 	padding: 3px;
 	border: 1px solid #ccc;
+	border-bottom: 0; // No border to caption
+	border-collapse: collapse;
 	background-color: #f9f9f9;
 	// Default to right alignment. This is needed since Parsoid only specifies the
 	// alignment class when the alignment is explicitly set.
@@ -84,6 +90,13 @@ figure[typeof~='mw:Image/Frame'] {
 }
 
 figure[typeof~='mw:Image/Thumb'] img,
+figure[typeof~='mw:Image/Frame'] img,
 .mw-image-border img {
 	border: 1px solid #cccccc;
-}
\ No newline at end of file
+	margin: 4px;
+}
+
+// temporary hack for testing
+body[data-parsoid] {
+	background-color: #fff;
+}