Merge "Vector: New beta module with new typography styles"

diff --combined resources/Resources.php
index 6f4b9f7,ff933f6..c033647
--- 1/resources/Resources.php
--- 2/resources/Resources.php
+++ b/resources/Resources.php
@@@ -92,9 -92,18 +92,18 @@@ return array
                        'common/commonElements.css' => array( 'media' => 'screen' ),
                        'common/commonContent.css' => array( 'media' => 'screen' ),
                        'common/commonInterface.css' => array( 'media' => 'screen' ),
-                       'vector/screen.less' => array( 'media' => 'screen' ),
-                       'vector/externalLinks.less' => array( 'media' => 'screen' ),
-                       'vector/screen-hd.css' => array( 'media' => 'screen and (min-width: 982px)' ),
+                       'vector/styles.less',
+               ),
+               'remoteBasePath' => $GLOBALS['wgStylePath'],
+               'localBasePath' => $GLOBALS['wgStyleDirectory'],
+       ),
+       'skins.vector.beta' => array(
+               // Keep in sync with skins.vector
+               'styles' => array(
+                       'common/commonElements.css' => array( 'media' => 'screen' ),
+                       'common/commonContent.css' => array( 'media' => 'screen' ),
+                       'common/commonInterface.css' => array( 'media' => 'screen' ),
+                       'vector/styles-beta.less' => array( 'media' => 'screen' ),
                ),
                'remoteBasePath' => $GLOBALS['wgStylePath'],
                'localBasePath' => $GLOBALS['wgStyleDirectory'],
@@@ -110,9 -119,6 +119,6 @@@
                'localBasePath' => $GLOBALS['wgStyleDirectory'],
        ),
        'skins.vector.collapsibleNav' => array(
-               'styles' => array(
-                       'vector/collapsibleNav.less',
-               ),
                'scripts' => array(
                        'vector/collapsibleNav.js',
                ),
@@@ -160,7 -166,6 +166,7 @@@
        ),
        'jquery.byteLength' => array(
                'scripts' => 'resources/jquery/jquery.byteLength.js',
 +              'targets' => array( 'desktop', 'mobile' ),
        ),
        'jquery.byteLimit' => array(
                'scripts' => 'resources/jquery/jquery.byteLimit.js',
@@@ -650,7 -655,6 +656,7 @@@
        'mediawiki.inspect' => array(
                'scripts' => 'resources/mediawiki/mediawiki.inspect.js',
                'dependencies' => 'jquery.byteLength',
 +              'targets' => array( 'desktop', 'mobile' ),
        ),
        'mediawiki.feedback' => array(
                'scripts' => 'resources/mediawiki/mediawiki.feedback.js',

diff --combined skins/vector/screen.less
index 97a04c7,f919bda..bfcc35c
--- 1/skins/vector/screen.less
--- 2/skins/vector/screen.less
+++ b/skins/vector/screen.less
@@@ -1,39 -1,44 +1,43 @@@
  /*
   * Any rules which should not be flipped automatically in right-to-left situations should be
 - * prepended with @noflip in a comment block. Images that should be embedded as base64 data-URLs
 - * should be prepended with @embed in a comment block.
 + * prepended with @noflip in a comment block.
   *
 - * This style-sheet employs a few CSS trick to accomplish compatibility with a wide range of web
 + * This stylesheet employs a few CSS trick to accomplish compatibility with a wide range of web
   * browsers. The most common trick is to use some styles in IE6 only. This is accomplished by using
   * a rule that makes things work in IE6, and then following it with a rule that begins with
   * "html > body" or use a child selector ">", which is ignored by IE6 because it does not support
   * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and
   * "IGNORED BY IE6" comments.
   */
 -@import "mediawiki.mixins.less";
 +@import "mediawiki.mixins";
  
  /* Framework */
+ html {
+       font-size: @html-font-size;
+ }
  html,
  body {
        height: 100%;
        margin: 0;
        padding: 0;
-       font-family: sans-serif;
-       font-size: 1em;
+       font-family: @content-font-family;
  }
  body {
        background-color: #f6f6f6;
+       font-size: @body-font-size;
  }
  /* Content */
  div#content {
+       line-height: @content-line-height;
        margin-left: 10em;
-       padding: 1em;
+       padding: @content-padding;
        /* Border on top, left, and bottom side */
        border: 1px solid #a7d7f9;
        border-right-width: 0;
        /* Merge the border with tabs' one (in their background image) */
        margin-top: -1px;
        background-color: white;
-       color: black;
+       color: @body-font-color;
        direction: ltr;
  }
  /* Hide, but keep accessible for screen-readers */
@@@ -94,7 -99,7 +98,7 @@@ div.emptyPortlet 
  #p-personal li {
        margin-left: 0.75em;
        margin-top: 0.5em;
-       font-size: 0.75em;
+       font-size: @menu-personal-font-size;
        white-space: nowrap;
  }
  /* Navigation Containers */
@@@ -173,7 -178,7 +177,7 @@@ div.vectorTabs li a 
        height: 1.9em;
        padding-left: 0.5em;
        padding-right: 0.5em;
-       color: #0645ad;
+       color: @menu-link-color;
        cursor: pointer;
        font-size: 0.8em;
  }
@@@ -339,7 -344,7 +343,7 @@@ div.vectorMenu li a 
        display: inline-block;
        padding: 0.5em;
        white-space: nowrap;
-       color: #0645ad;
+       color: @menu-link-color;
        cursor: pointer;
        font-size: 0.8em;
  }
@@@ -447,6 -452,7 +451,7 @@@ div#simpleSearch button#searchButton > 
  }
  /* Panel */
  div#mw-panel {
+       font-size: @menu-main-font-size;
        position: absolute;
        top: 160px;
        padding-top: 1em;
@@@ -460,17 -466,15 +465,15 @@@ div#mw-panel div.portal 
  div#mw-panel div.portal h3 {
        font-weight: normal;
        color: #444;
-       padding: 0.25em;
-       padding-top: 0;
-       padding-left: 1.75em;
+       padding: @menu-main-heading-padding;
        cursor: default;
        border: none;
-       font-size: 0.75em;
+       font-size: @menu-main-heading-font-size;
  }
  div#mw-panel div.portal div.body {
-       margin: 0;
        padding-top: 0.5em;
-       margin-left: 1.25em;
+       margin: @menu-main-body-margin;
+ 
        .background-image('images/portal-break.png');
        background-repeat: no-repeat;
        background-position: top left;
@@@ -478,7 -482,7 +481,7 @@@
  div#mw-panel div.portal div.body ul {
        list-style-type: none;
        list-style-image: none;
-       padding: 0;
+       padding: @menu-main-body-padding;
        margin: 0;
  }
  div#mw-panel div.portal div.body ul li {
@@@ -486,15 -490,16 +489,16 @@@
        padding: 0;
        padding-bottom: 0.5em;
        margin: 0;
-       font-size: 0.75em;
+       font-size: @menu-main-body-font-size;
        word-wrap: break-word;
  }
  div#mw-panel div.portal div.body ul li a {
-       color: #0645ad;
- }
- div#mw-panel div.portal div.body ul li a:visited {
-       color: #0b0080;
+       color: @menu-main-body-link-color;
+       &:visited {
+               color: @menu-main-body-link-visited-color;
+       }
  }
+ 
  /* Footer */
  div#footer {
        margin-left: 10em;
@@@ -595,7 -600,7 +599,7 @@@ div#footer #footer-places li 
        #preftoc a:active {
                display: inline-block;
                position: relative;
-               color: #0645ad;
+               color: @menu-link-color;
                padding: 0.5em;
                text-decoration: none;
                background-image: none;
@@@ -652,16 -657,6 +656,6 @@@
        margin-right: 0.25em;
  }
  
- /**
-  * The following code is slightly modified from monobook
-  */
- div#content {
-       line-height: 1.5em;
- }
- #bodyContent {
-       font-size: 0.8em;
- }
- 
  ul {
        list-style-type: disc;
        .list-style-image('images/bullet-icon.png');
@@@ -678,7 -673,7 +672,7 @@@ pre, .mw-code 
  #firstHeading {
        padding-top: 0;
        margin-top: 0;
-       font-size: 1.6em;
+       font-size: @content-heading-font-size;
  }
  
  /* Icon for Usernames */
@@@ -704,9 -699,12 +698,12 @@@
  #bodyContent {
        position: relative;
        width: 100%;
- }
- div#bodyContent {
-       line-height: 1.5em;
+ 
+       // FIXME: Seems overly specific. Not sure why this is needed.
+       &div {
+               line-height: 1.5em;
+               font-size: @content-font-size;
+       }
  }
  
  /* mediawiki.notification */
@@@ -782,26 -780,21 +779,26 @@@ body.vector-animateLayout 
        div#content,
        div#footer,
        #left-navigation {
 -              .transition( margin-left 250ms, padding 250ms; );
 +              .transition(margin-left 250ms, padding 250ms;);
        }
 +
        #p-logo {
 -              .transition( left 250ms );
 +              .transition(left 250ms);
        }
 +
        #mw-panel {
 -              .transition( padding-right 250ms );
 +              .transition(padding-right 250ms);
        }
 +
        #p-search {
 -              .transition( margin-right 250ms );
 +              .transition(margin-right 250ms);
        }
 +
        #p-personal {
 -              .transition( right 250ms );
 +              .transition(right 250ms);
        }
 +
        #mw-head-base {
 -              .transition( margin-left 250ms );
 +              .transition(margin-left 250ms);
        }
  }