vector: Apply content text style via .mw-body-content instead of #bodyContent

Font size, line height and positioning styles related to content
rendering should be re-usable for applying in other contexts.
Not just the #bodyContent div.

The use of classes for content styling has been recommended and generally
agreed upon, specifically in the context of the RFC about scoping site CSS:
    https://www.mediawiki.org/wiki/Requests_for_comment/Scoping_site_CSS

This change takes the first step toward introducing a reusable class
throughout the UI to apply content-specific styles where needed.

This also makes it possible to resolve a bug in which VisualEditor
does not receive the correct styles because it creates the edit surface
outside the #bodyContent (but within #content) and had no way to
receive the same styling.

Bug: 63985
Change-Id: I66c56c577bad064261c3e4a62a1c1b2566d53972

diff --git a/skins/Vector.php b/skins/Vector.php
index 0fad5cc..ee61272 100644 (file)
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -177,7 +177,7 @@ class VectorTemplate extends BaseTemplate {
                        $this->text( 'pageLanguage' );
                        ?>"><span dir="auto"><?php $this->html( 'title' ) ?></span></h1>
                        <?php $this->html( 'prebodyhtml' ) ?>
-                       <div id="bodyContent">
+                       <div id="bodyContent" class="mw-body-content">
                                <?php
                                if ( $this->data['isarticle'] ) {
                                        ?>

diff --git a/skins/vector/components/common.less b/skins/vector/components/common.less
index 76d1873..f70c7a4 100644 (file)
--- a/skins/vector/components/common.less
+++ b/skins/vector/components/common.less
@@ -127,7 +127,9 @@ pre, .mw-code {
        vertical-align: text-bottom;
 }
 
-#bodyContent {
+/* TODO: Remove #bodyContent selector (kept for backwards compatibility with cached html) */
+#bodyContent,
+.mw-body-content {
        position: relative;
        line-height: @content-line-height;
        font-size: @content-font-size;