Add CSS class .mw-code (matching <pre>)
authorTimo Tijhof <ttijhof@wikimedia.org>
Sat, 14 Apr 2012 03:23:16 +0000 (05:23 +0200)
committerTimo Tijhof <ttijhof@wikimedia.org>
Wed, 9 May 2012 14:38:36 +0000 (16:38 +0200)
- 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

skins/chick/main.css
skins/cologneblue/screen.css
skins/common/commonElements.css
skins/common/commonPrint.css
skins/modern/main.css
skins/monobook/main.css
skins/simple/main.css
skins/vector/screen.css

index ba689b0..5e2a2e7 100644 (file)
@@ -151,7 +151,7 @@ q {
        font-style: italic;
 }
 code { background-color: #f9f9f9; }
-pre {
+pre, .mw-code {
        padding: 1em;
        border: 1px dashed #2f6fab;
        color: black;
index cf8ca12..57b5410 100644 (file)
@@ -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;
 }
 
index df50e05..091fef1 100644 (file)
@@ -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;
index 3e3b50b..cf602ea 100644 (file)
@@ -158,7 +158,7 @@ p {
        line-height: 1.2em;
 }
 
-pre {
+pre, .mw-code {
        border: 1pt dashed black;
        white-space: pre;
        font-size: 8pt;
index 5d6eb0b..7149551 100644 (file)
@@ -811,7 +811,7 @@ span.subpages {
        display: block;
 }
 
-pre {
+pre, .mw-code {
        border: solid 1px #3c78b5;
        padding: 0.4em;
        background-color: #f0f0f0;
index 868d32e..2fe259e 100644 (file)
@@ -83,7 +83,7 @@ input.historysubmit {
        margin-left: 1.6em;
 }
 
-pre {
+pre, .mw-code {
        line-height: 1.1em;
 }
 
index dbcf199..7b4f2ae 100644 (file)
@@ -215,7 +215,7 @@ textarea {
        margin-left: 0.5em;
 }
 
-pre {
+pre, .mw-code {
        margin: 2em;
        border: solid 1px black;
 }
index d48b5f8..ef77e61 100644 (file)
@@ -683,7 +683,7 @@ ul {
        list-style-image: url(images/bullet-icon.png);
 }
 
-pre {
+pre, .mw-code {
        line-height: 1.3em;
 }