Patch by Aryeh Gregor, updated by Roan Kattouw, and updated again by me. I also fixed one bug with modern.css.
Tested in IE6,7,8, Chrome & FF in all skins and both LTR and RTL contexts. I tested with floating images above and below the headers and couldn't find regressions.
* to ensure that client-side caches do not keep obsolete copies of global
* styles.
*/
-$wgStyleVersion = '303';
+$wgStyleVersion = '304';
/**
* This will cache static pages for non-logged-in users to reduce
* @return String: HTML headline
*/
public static function makeHeadline( $level, $attribs, $anchor, $text, $link, $legacyAnchor = false ) {
- $ret = "<h$level$attribs"
- . $link
+ $ret = "<div class=\"mw-h$level\">"
+ . "<h$level$attribs"
. " <span class=\"mw-headline\" id=\"$anchor\">$text</span>"
- . "</h$level>";
+ . "</h$level>"
+ . "$link </div>";
if ( $legacyAnchor !== false ) {
$ret = "<div id=\"$legacyAnchor\"></div>$ret";
}
<a id="top"></a>
<?php if($this->data['sitenotice']) { ?><div id="siteNotice"><?php $this->html('sitenotice') ?></div><?php } ?>
- <h1 id="firstHeading" class="firstHeading"><?php $this->html('title') ?></h1>
+ <div class="mw-h1 firstHeading"><h1><?php $this->html('title') ?></h1></div>
<div id="bodyContent">
<div id="siteSub"><?php $this->msg('tagline') ?></div>
<div id="contentSub"<?php $this->html('userlangattributes') ?>><?php $this->html('subtitle') ?></div>
<!-- /sitenotice -->
<?php endif; ?>
<!-- firstHeading -->
- <h1 id="firstHeading" class="firstHeading"><?php $this->html( 'title' ) ?></h1>
+ <div class="mw-h1 firstHeading"><h1><?php $this->html( 'title' ) ?></h1></div>
<!-- /firstHeading -->
<!-- bodyContent -->
<div id="bodyContent">
width: 96%;
}
-div.editsection,
#catlinks,
div.tright,
div.tleft {
margin: 0.2em 0 0.2em 0;
}
-h1, h2, h3, h4, h5, h6 {
+/* Headers */
+.mw-h1, .mw-h2, .mw-h3, .mw-h4, .mw-h5, .mw-h6 {
color: black;
background: none;
- font-weight: normal;
margin: 0;
- overflow: hidden;
- padding-top: 0.5em;
- padding-bottom: 0.17em;
- border-bottom: 1px solid #aaaaaa;
+ border-bottom: 1px solid #aaa;
}
-.editsection {
+.mw-h3, .mw-h4, .mw-h5, .mw-h6 {
+ border-bottom: none;
+}
+h1, h2 {
font-weight: normal;
}
h1 { font-size: 188%; }
-h1 .editsection { font-size: 53.2%; }
h2 { font-size: 150%; }
-h2 .editsection { font-size: 66.7%; }
-h3, h4, h5, h6 {
- border-bottom: none;
- font-weight: bold;
-}
h3 { font-size: 132%; }
-h3 .editsection { font-size: 75.8%; }
h4 { font-size: 116%; }
-h4 .editsection { font-size: 86.2%; }
h5 { font-size: 100%; }
h6 { font-size: 80%; }
-h6 .editsection { font-size: 125%; }
+
+/* To replicate the old padding, where h# were block-level elements and edit
+ * links were floated, we need to multiply .5em top padding and .17em bottom
+ * padding by the header text sizes. */
+.mw-h1 { padding: .94em 0 .32em; } /* (0.5*1.88)em 0 (0.17*1.88)em */
+.mw-h2 { padding: .75em 0 .26em; } /* (0.5*1.50)em 0 (0.17*1.50)em */
+.mw-h3 { padding: .66em 0 .22em; } /* etc. */
+.mw-h4 { padding: .58em 0 .20em; }
+.mw-h5 { padding: .50em 0 .17em; }
+.mw-h6 { padding: .40em 0 .14em; }
+
ul {
line-height: 1.5em;
line-height: 21pt;
}
-h1 .editsection {
- font-size: 55.6%;
-}
-
h1.pagetitle {
padding-bottom: 0;
margin-bottom: 0;
color: #CC2200;
}
-h2, h3, h4, h5, h6 {
+.mw-h2, .mw-h3, .mw-h4, .mw-h5, .mw-h6 {
margin-bottom: 0;
}
* CologneBlue, the old pre-Monobook skins
*/
-/* For clarity, explicitly state some recommendations from <http://www.w3.org/
- TR/CSS21/sample.html> to make sure the editsection links scale right */
-
-h1 { font-size: 2em; }
-h2 { font-size: 1.5em; }
-h3 { font-size: 1.17em; }
-h5 { font-size: .83em; }
-h6 { font-size: .75em; }
-h1, h2, h3, h4, h5, h6 {
- font-weight: bolder;
-}
-
-/* Now the custom parts */
-
-/* Make edit sections (which are inside h# tags) normal-sized */
-.editsection {
- font-weight: normal;
-}
-h1 .editsection { font-size: 50%; }
-h2 .editsection { font-size: 66.7%; }
-h3 .editsection { font-size: 85.5%; }
-h5 .editsection { font-size: 120%; }
-h6 .editsection { font-size: 133%; }
-
#footer { clear: both }
/* images */
/* @noflip */
background-color: #fcfcfc;
}
-/* Edit section links */
+/* Display headings on the same line as edit link */
+h1, h2, h3, h4, h5, h6 { display: inline; margin: 0; }
+/* But then we have to reintroduce the margin. We use the W3 recommended mar-
+ * gins <http://www.w3.org/TR/CSS21/sample.html>, multiplying by the recom-
+ * mended font-size. */
+.mw-h1 { margin: 1.34em 0; }
+.mw-h2 { margin: 1.13em 0; }
+.mw-h3 { margin: 0.97em 0; }
+.mw-h4 { margin: 1.12em 0; }
+.mw-h5 { margin: 1.25em 0; }
+.mw-h6 { margin: 1.25em 0; }
+
+/* Give edi section link some space */
.editsection {
- float: right;
- margin-left: 5px;
+ margin: 0 .8em;
}
-/* Correct directionality when page dir is different from site/user dir */
-/* @noflip */.mw-content-ltr .editsection, .mw-content-rtl .mw-content-ltr .editsection { float: right; }
-/* @noflip */.mw-content-rtl .editsection, .mw-content-ltr .mw-content-rtl .editsection { float: left; }
/**
* File histories
*/
font-size: 150%;
}
-h1.pagetitle .editsection {
- font-size: 66.7%;
-}
-
h2 {
font-size: 120%;
}
-h2 .editsection {
- font-size: 83.3%;
-}
-
h2, h3, h4, h5, h6 {
margin-bottom: 0;
}
font-size: 106.25%;
}
-h3 .editsection {
- font-size: 94.1%;
-}
-
h4 {
font-size: 103.125%;
}
-h4 .editsection {
- font-size: 97.0%;
-}
-
h5 {
font-size: 100%;
}
-h5 .editsection {
- font-size: 100%;
-}
-
h6 {
font-size: 95%;
}
-h6 .editsection {
- font-size: 105.3%;
-}
-
hr.sep {
color: gray;
height: 1px;
font-size: small;
}
-h1, h2 {
+.mw-h1,
+.mw-h2,
+.mw-h3,
+.mw-h4,
+.mw-h5,
+.mw-h6 {
+ overflow: hidden;
border-bottom: solid 1px #036;
}
-
-h1, h2, h3, h4, h5, h6 {
- overflow: hidden;
+.mw-h3, .mw-h4, .mw-h5, .mw-h6 {
+ border-bottom: none;
}
#preftoc {
margin: .2em 0 .2em 0;
}
-h1, h2, h3, h4, h5, h6 {
+/* Headers */
+.mw-h1, .mw-h2, .mw-h3, .mw-h4, .mw-h5, .mw-h6 {
color: black;
background: none;
- font-weight: normal;
margin: 0;
overflow: hidden;
- padding-top: .5em;
- padding-bottom: .17em;
border-bottom: 1px solid #aaa;
}
+.mw-h3, .mw-h4, .mw-h5, .mw-h6 {
+ border-bottom: none;
+}
+h1, h2 { font-weight: normal; }
+
h1 { font-size: 188%; }
-h1 .editsection { font-size: 53%; }
h2 { font-size: 150%; }
-h2 .editsection { font-size: 67%; }
h3, h4, h5, h6 {
border-bottom: none;
font-weight: bold;
}
h3 { font-size: 132%; }
-h3 .editsection { font-size: 76%; font-weight: normal; }
h4 { font-size: 116%; }
-h4 .editsection { font-size: 86%; font-weight: normal; }
h5 { font-size: 100%; }
-h5 .editsection { font-weight: normal; }
h6 { font-size: 80%; }
-h6 .editsection { font-size: 125%; font-weight: normal; }
+
+/* To replicate the old padding, where h# were block-level elements and edit
+ * links were floated, we need to multiply .5em top padding and .17em bottom
+ * padding by the header text sizes. */
+.mw-h1 { padding: .94em 0 .32em; } /* (0.5*1.88)em 0 (0.17*1.88)em */
+.mw-h2 { padding: .75em 0 .26em; } /* (0.5*1.50)em 0 (0.17*1.50)em */
+.mw-h3 { padding: .66em 0 .22em; } /* etc. */
+.mw-h4 { padding: .58em 0 .20em; }
+.mw-h5 { padding: .50em 0 .17em; }
+.mw-h6 { padding: .40em 0 .14em; }
+
ul {
line-height: 1.5em;
-/* For clarity, explicitly state some recommendations from <http://www.w3.org/
- TR/CSS21/sample.html> to make sure the editsection links scale right */
-
-h1 { font-size: 2em; }
-h2 { font-size: 1.5em; }
-h3 { font-size: 1.17em; }
-h5 { font-size: .83em; }
-h6 { font-size: .75em; }
-h1, h2, h3, h4, h5, h6 { font-weight: bolder }
-
-/* Now the custom parts */
-
-/* Make edit sections (which are inside h# tags) normal-sized */
-.editsection {
- font-weight: normal;
-}
-h1 .editsection { font-size: 50% }
-h2 .editsection { font-size: 66.7% }
-h3 .editsection { font-size: 85.5% }
-h5 .editsection { font-size: 120% }
-h6 .editsection { font-size: 133% }
-
-
#toolbar {
display: none;
}
}
p img { margin: 0; }
-h1, h2, h3, h4, h5, h6 {
- margin: 0;
- padding-top: 0.5em;
- padding-bottom: 0.17em;
-}
+.mw-h1, .mw-h2, .mw-h3, .mw-h4, .mw-h5, .mw-h6 {
+ margin: 0;
+}
+/* To replicate the old padding, where h# were block-level elements and edit
+ * links were floated, we need to multiply .5em top padding and .17em bottom
+ * padding by the header text sizes. We assume the W3 recommendations are
+ * used: 200%, 150%, 117%, 100%, 83%, 75% size in that order
+ * <http://www.w3.org/TR/CSS21/sample.html>. If not the padding may be margin-
+ * ally off. */
+.mw-h1 { padding: .94em 0 .32em; } /* (0.5*1.88)em 0 (0.17*1.88)em */
+.mw-h2 { padding: .75em 0 .26em; } /* (0.5*1.50)em 0 (0.17*1.50)em */
+.mw-h3 { padding: .66em 0 .22em; } /* etc. */
+.mw-h4 { padding: .58em 0 .20em; }
+.mw-h5 { padding: .50em 0 .17em; }
+.mw-h6 { padding: .40em 0 .14em; }
+
fieldset {
margin: 1em 0em 1em 0em;
padding: 0em 1em 1em 1em;
border: solid 1px black;
}
-h1.firstHeading, h2 {
+.firstHeading, .mw-h2 {
border-bottom: solid 1px black;
}
#bodyContent a[href ^="http://"],
}
/* Structural Elements */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+.mw-h1,
+.mw-h2,
+.mw-h3,
+.mw-h4,
+.mw-h5,
+.mw-h6 {
color: black;
background: none;
- font-weight: normal;
margin: 0;
overflow: hidden;
- padding-top: .5em;
- padding-bottom: .17em;
border-bottom: 1px solid #aaa;
width: auto;
}
-h1 { font-size: 188%; }
-h1 .editsection { font-size: 53%; }
-h2 { font-size: 150%; }
-h2 .editsection { font-size: 67%; }
-h3,
-h4,
-h5,
-h6 {
+.mw-h3, .mw-h4, .mw-h5, .mw-h6 {
border-bottom: none;
- font-weight: bold;
}
+h1, h2 { font-weight: normal; }
+h1 { font-size: 188%; }
+h2 { font-size: 150%; }
h3 { font-size: 132%; }
-h3 .editsection { font-size: 76%; font-weight: normal; }
h4 { font-size: 116%; }
-h4 .editsection { font-size: 86%; font-weight: normal; }
h5 { font-size: 100%; }
-h5 .editsection { font-weight: normal; }
h6 { font-size: 80%; }
-h6 .editsection { font-size: 125%; font-weight: normal; }
-.editsection { float: right; }
+
+/* To replicate the old padding, where h# were block-level elements and edit
+ * links were floated, we need to multiply .5em top padding and .17em bottom
+ * padding by the header text sizes. */
+.mw-h1 { padding: .94em 0 .32em; } /* (0.5*1.88)em 0 (0.17*1.88)em */
+.mw-h2 { padding: .75em 0 .26em; } /* (0.5*1.50)em 0 (0.17*1.50)em */
+.mw-h3 { padding: .66em 0 .22em; } /* etc. */
+.mw-h4 { padding: .58em 0 .20em; }
+.mw-h5 { padding: .50em 0 .17em; }
+.mw-h6 { padding: .40em 0 .14em; }
+
+
p {
margin: .4em 0 .5em 0;
line-height: 1.5em;