From 27c8c9443c857f286fde6ae79acd1157f305c516 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= <matma.rex@gmail.com>
Date: Mon, 18 Aug 2014 14:15:19 +0200
Subject: [PATCH] Sanitize thumbnails and captions styles

No design changes, just cleaning up.

* Remove dead rules (equivalent to default styles).
* Remove unnecessary !importants (added in r3300 (!), apparently to
  intentionally override styles in skins at the time).
* Make commonContent.css's directionality-specific styling not depend
  on shared.css (these don't have to be loaded together).
* Fix double margins for .magnify in mixed directionalities.
* Clarify that shared.css should only contain basic layout styles.
* Group together directionality-specific styles in commonContent.css,
  comment about them. oldshared.css seems to intentionally not use them.
* Align commonContent.css and oldshared.css where applicable.

Change-Id: I2176d5ee73e37030c15ee5e16ba4eb0660349e15
---
 skins/common/commonContent.css | 56 +++++++++++++++++++++++++---------
 skins/common/oldshared.css     | 11 +++----
 skins/common/shared.css        | 15 ++++-----
 3 files changed, 54 insertions(+), 28 deletions(-)

diff --git a/skins/common/commonContent.css b/skins/common/commonContent.css
index 2ee787bf7d..a030992bee 100644
--- a/skins/common/commonContent.css
+++ b/skins/common/commonContent.css
@@ -129,7 +129,7 @@ div.thumb {
 
 div.thumbinner {
 	border: 1px solid #ccc;
-	padding: 3px !important;
+	padding: 3px;
 	background-color: #f9f9f9;
 	font-size: 94%;
 	text-align: center;
@@ -143,32 +143,60 @@ html .thumbimage {
 html .thumbcaption {
 	border: none;
 	line-height: 1.4em;
-	padding: 3px !important;
-	text-align: left;
+	padding: 3px;
 	font-size: 94%;
+	/* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
+	text-align: left;
 }
 
 div.magnify {
-	border: none !important;
-	background: none !important;
+	/* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */
 	float: right;
 	margin-left: 3px;
 }
 
-div.magnify a, div.magnify img {
+div.magnify a,
+div.magnify img {
 	display: block;
-	border: none !important;
-	background: none !important;
+	border: none;
 }
 
-/* @noflip */div.tright {
-	margin: .5em 0 1.3em 1.4em;
+img.thumbborder {
+	border: 1px solid #dddddd;
 }
 
-/* @noflip */div.tleft {
-	margin: .5em 1.4em 1.3em 0;
+/* Directionality-specific styles for thumbnails - their positioning depends on content language */
+
+/* @noflip */
+.mw-content-ltr .thumbcaption {
+	text-align: left;
 }
 
-img.thumbborder {
-	border: 1px solid #dddddd;
+/* @noflip */
+.mw-content-ltr .magnify {
+	float: right;
+	margin-left: 3px;
+	margin-right: 0;
+}
+
+/* @noflip */
+.mw-content-rtl .thumbcaption {
+	text-align: right;
+}
+
+/* @noflip */
+.mw-content-rtl .magnify {
+	float: left;
+	margin-left: 0;
+	margin-right: 3px;
+}
+
+/* @noflip */
+div.tright {
+	margin: .5em 0 1.3em 1.4em;
+}
+
+/* @noflip */
+div.tleft {
+	margin: .5em 1.4em 1.3em 0;
 }
diff --git a/skins/common/oldshared.css b/skins/common/oldshared.css
index 250f15c8d7..d72996ea5a 100644
--- a/skins/common/oldshared.css
+++ b/skins/common/oldshared.css
@@ -86,7 +86,7 @@ div.thumb {
 
 div.thumbinner {
 	border: 1px solid #ccc;
-	padding: 3px !important;
+	padding: 3px;
 	background-color: #f9f9f9;
 	font-size: 94%;
 	text-align: center;
@@ -99,24 +99,21 @@ html .thumbimage {
 
 html .thumbcaption {
 	border: none;
-	text-align: left;
 	line-height: 1.4em;
-	padding: 3px !important;
+	padding: 3px;
 	font-size: 94%;
+	text-align: left;
 }
 
 div.magnify {
 	float: right;
-	border: none !important;
-	background: none !important;
 	margin-left: 3px;
 }
 
 div.magnify a,
 div.magnify img {
 	display: block;
-	border: none !important;
-	background: none !important;
+	border: none;
 }
 
 /* @noflip */
diff --git a/skins/common/shared.css b/skins/common/shared.css
index acb31129a5..9aa1e3ecfc 100644
--- a/skins/common/shared.css
+++ b/skins/common/shared.css
@@ -298,28 +298,29 @@ input#wpSummary {
 }
 
 /**
- * Image captions
+ * Image captions.
+ *
+ * This is only meant to provide the most basic of styles, visual settings shouldn't be added here.
  */
+
 /* @noflip */
 .mw-content-ltr .thumbcaption {
 	text-align: left;
 }
 
 /* @noflip */
-.mw-content-rtl .thumbcaption {
-	text-align: right;
+.mw-content-ltr .magnify {
+	float: right;
 }
 
 /* @noflip */
-.mw-content-ltr .magnify {
-	float: right;
-	margin-left: 3px;
+.mw-content-rtl .thumbcaption {
+	text-align: right;
 }
 
 /* @noflip */
 .mw-content-rtl .magnify {
 	float: left;
-	margin-right: 3px;
 }
 
 /**
-- 
2.20.1