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

diff --git a/skins/common/commonContent.css b/skins/common/commonContent.css
index 2ee787b..a030992 100644 (file)
--- 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 250f15c..d72996e 100644 (file)
--- 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 acb3112..9aa1e3e 100644 (file)
--- 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;
 }
 
 /**