From: Timo Tijhof <ttijhof@wikimedia.org>
Date: Sat, 14 Apr 2012 03:23:16 +0000 (+0200)
Subject: Add CSS class .mw-code (matching <pre>)
X-Git-Tag: 1.31.0-rc.0~23669^2
X-Git-Url: http://git.cyclocoop.org/url?a=commitdiff_plain;h=7c9b2273c9cbdae90c9f4e3890a13619f769c5d0;p=lhc%2Fweb%2Fwiklou.git

Add CSS class .mw-code (matching <pre>)

- Add CSS class .mw-code.
  All skins that stye <pre> now also style .mw-code.
  This is because there are situations where a <pre> element is not
  allowed (e.g. when the child code contains <div>) by Tidy and W3C, but
  should still be styled as such.

- Required for fixing bug 19416 and bug 35875.
  SyntaxHighlighter Geshi has it's own custom markup that can't be relied on
  for both consistency (it can change over time) and due to its own
  over "!important"-ized css reset on it's own classes, so although it
  (sometimes!) does use a <pre>, that <pre> is completely reset so the skins
  css doesn't (and frankly shouldn't) apply to that.

  Up until last year this extension wrapped all of Geshi's internal output in
  a <div class="mw-geshi" />. Leaving all wmf wikis to have to create a hack
  in their local css (for every skins!) to reproduce the skins's <pre> style
  on .mw-geshi.

  Previously this was attempted to be fixed inside Geshi itself by wrapping
  all of Geshi's internal output in a <PRE class="mw-geshi"> instead of a
  <DIV class="mw-geshi">. That worked fine because that element didn't have
  any of geshi's internal classes on it so it was outside the scope of the
  reset and the skins' css applied fine.

  However when Tidy is enabled this got messed up badly and (part) of the
  Geshi output was ripped out of the containing <pre> by Tidy because the W3C
  doesn't allow a <div> to be inside a <pre>.

  Now fixed in a different way by instead providing a css class in all skins
  that when given to any element will give it the same styling that it does
  to <pre>. Separation of content and styling.

  Tested in all core skins, works great. The style of the geshi output is
  preserved and the container looks like any other <pre> in that skin.

Change-Id: I4ff5d0197ba8dc0dad3cafd03f2b120bc22e75cb
---

diff --git a/skins/chick/main.css b/skins/chick/main.css
index ba689b0014..5e2a2e7a97 100644
--- a/skins/chick/main.css
+++ b/skins/chick/main.css
@@ -151,7 +151,7 @@ q {
 	font-style: italic;
 }
 code { background-color: #f9f9f9; }
-pre {
+pre, .mw-code {
 	padding: 1em;
 	border: 1px dashed #2f6fab;
 	color: black;
diff --git a/skins/cologneblue/screen.css b/skins/cologneblue/screen.css
index cf8ca12e56..57b5410e5f 100644
--- a/skins/cologneblue/screen.css
+++ b/skins/cologneblue/screen.css
@@ -52,7 +52,7 @@ body {
 	margin-bottom: 0;
 }
 
-p, pre, td, th, li, dd, dt {
+p, pre, .mw-code, td, th, li, dd, dt {
 	line-height: 12pt;
 }
 
diff --git a/skins/common/commonElements.css b/skins/common/commonElements.css
index df50e055b7..091fef1a4d 100644
--- a/skins/common/commonElements.css
+++ b/skins/common/commonElements.css
@@ -184,7 +184,7 @@ blockquote {
 	font-family: Times, "Times New Roman", serif;
 	font-style: italic;
 }*/
-pre, code, tt, kbd, samp {
+pre, code, tt, kbd, samp, .mw-code {
 	/*
 	 * Some browsers will render the monospace text too small, namely Firefox, Chrome and Safari.
 	 * Specifying any valid, second value will trigger correct behaviour without forcing a different font.
@@ -194,7 +194,7 @@ pre, code, tt, kbd, samp {
 code {
 	background-color: #f9f9f9;
 }
-pre {
+pre, .mw-code {
 	padding: 1em;
 	border: 1px dashed #2f6fab;
 	color: black;
diff --git a/skins/common/commonPrint.css b/skins/common/commonPrint.css
index 3e3b50b40e..cf602ea98f 100644
--- a/skins/common/commonPrint.css
+++ b/skins/common/commonPrint.css
@@ -158,7 +158,7 @@ p {
 	line-height: 1.2em;
 }
 
-pre {
+pre, .mw-code {
 	border: 1pt dashed black;
 	white-space: pre;
 	font-size: 8pt;
diff --git a/skins/modern/main.css b/skins/modern/main.css
index 5d6eb0b73d..7149551f2b 100644
--- a/skins/modern/main.css
+++ b/skins/modern/main.css
@@ -811,7 +811,7 @@ span.subpages {
 	display: block;
 }
 
-pre {
+pre, .mw-code {
 	border: solid 1px #3c78b5;
 	padding: 0.4em;
 	background-color: #f0f0f0;
diff --git a/skins/monobook/main.css b/skins/monobook/main.css
index 868d32ea30..2fe259e22c 100644
--- a/skins/monobook/main.css
+++ b/skins/monobook/main.css
@@ -83,7 +83,7 @@ input.historysubmit {
 	margin-left: 1.6em;
 }
 
-pre {
+pre, .mw-code {
 	line-height: 1.1em;
 }
 
diff --git a/skins/simple/main.css b/skins/simple/main.css
index dbcf199c80..7b4f2ae5f5 100644
--- a/skins/simple/main.css
+++ b/skins/simple/main.css
@@ -215,7 +215,7 @@ textarea {
 	margin-left: 0.5em;
 }
 
-pre {
+pre, .mw-code {
 	margin: 2em;
 	border: solid 1px black;
 }
diff --git a/skins/vector/screen.css b/skins/vector/screen.css
index d48b5f81e5..ef77e6158a 100644
--- a/skins/vector/screen.css
+++ b/skins/vector/screen.css
@@ -683,7 +683,7 @@ ul {
 	list-style-image: url(images/bullet-icon.png);
 }
 
-pre {
+pre, .mw-code {
 	line-height: 1.3em;
 }