Vector: New beta module with new typography styles
To enable install Extension:BetaFeatures and Extension:VectorBeta in LocalSettings.php Changes to core: * Refactor screen.less to make use of variables Introduce dormant skins.vector.beta module * Activated by https://gerrit.wikimedia.org/r/#/admin/projects/mediawiki/extensions/VectorBeta * Load different environment variables depending on whether in a beta experiment or not * Switch global fonts for text from browser default sans-serif to a specific sans-serif stack. * Switch global fonts for headings to Georgia/serif * Cleanup over-specific specifiers in process * Adjust styling of navigation menus to focus on content * Adjust styling of collapsible navigation menu to be less prominent See https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Typography Change-Id: Ica0b69ad95051e15cd8ed9888927e034c13fbf92
This commit is contained in:
jrobson
Krinkle
parent
415880ce2f
commit
8b6ed4d08f
10 changed files with 221 additions and 47 deletions
|
|
@ -92,9 +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 @@ return array(
|
|||
'localBasePath' => $GLOBALS['wgStyleDirectory'],
|
||||
),
|
||||
'skins.vector.collapsibleNav' => array(
|
||||
'styles' => array(
|
||||
'vector/collapsibleNav.less',
|
||||
),
|
||||
'scripts' => array(
|
||||
'vector/collapsibleNav.js',
|
||||
),
|
||||
|
|
|
|||
|
|
@ -66,7 +66,10 @@ class SkinVector extends SkinTemplate {
|
|||
*/
|
||||
function setupSkinUserCss( OutputPage $out ) {
|
||||
parent::setupSkinUserCss( $out );
|
||||
$out->addModuleStyles( 'skins.vector' );
|
||||
|
||||
$styles = array( 'skins.vector' );
|
||||
wfRunHooks( 'SkinVectorStyleModules', array( &$this, &$styles ) );
|
||||
$out->addModuleStyles( $styles );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
75
skins/vector/beta/screen.less
Normal file
75
skins/vector/beta/screen.less
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
/* Content */
|
||||
#content {
|
||||
line-height: 1.5em;
|
||||
.mw-editsection {
|
||||
font-family: @content-font-family;
|
||||
}
|
||||
|
||||
h1,
|
||||
#firstHeading {
|
||||
font-family: @content-heading-font-family;
|
||||
font-size: 1.833em;
|
||||
line-height: 22pt;
|
||||
padding: 0;
|
||||
margin-bottom: 4pt;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
line-height: 22pt;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: @content-heading-font-family;
|
||||
padding: 0;
|
||||
margin-bottom: 4pt;
|
||||
margin-top: 14pt;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.17em;
|
||||
line-height: 22pt;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%; /* (reset) */
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 8pt;
|
||||
}
|
||||
|
||||
// FIXME: this is hacky
|
||||
#toc h2 {
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Personal menu */
|
||||
#p-personal a {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Main menu */
|
||||
div#mw-panel div.portal {
|
||||
margin-left: 1.25em;
|
||||
h3 {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
37
skins/vector/beta/variables.less
Normal file
37
skins/vector/beta/variables.less
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
@html-font-size: 90%;
|
||||
|
||||
@body-font-size: inherit;
|
||||
@body-font-color: inherit;
|
||||
|
||||
// Page content
|
||||
@content-font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif;
|
||||
@content-font-size: 0.9em;
|
||||
@content-line-height: inherit;
|
||||
@content-padding: 1em;
|
||||
@content-heading-font-size: 1.6em;
|
||||
@content-heading-font-family: Georgia, "DejaVu Serif", serif;
|
||||
|
||||
// Common menu
|
||||
@menu-link-color: #555;
|
||||
|
||||
// Main menu
|
||||
@menu-main-font-size: 0.82em;
|
||||
@menu-main-heading-font-size: 100%;
|
||||
@menu-main-heading-padding: 5px 0;
|
||||
|
||||
@menu-main-body-font-size: inherit;
|
||||
@menu-main-body-link-color: inherit;
|
||||
@menu-main-body-link-visited-color: inherit;
|
||||
@menu-main-body-margin: 0;
|
||||
@menu-main-body-padding: 0 0 10px;
|
||||
@menu-main-logo-left: 1.6em;
|
||||
|
||||
// Personal menu
|
||||
@menu-personal-font-size: 0.75em;
|
||||
|
||||
// Collapsible nav
|
||||
@collapsible-nav-heading-color: #555;
|
||||
@collapsible-nav-heading-collapsed-color: inherit;
|
||||
|
||||
@collapsible-nav-heading-padding: 4px 0 3px 1.5em;
|
||||
@collapsible-nav-body-margin: 0 0 0 1.25em;
|
||||
|
|
@ -12,12 +12,13 @@
|
|||
margin: -11px 9px 10px 11px;
|
||||
|
||||
h3 {
|
||||
color: #4D4D4D;
|
||||
font-size: @menu-main-heading-font-size;
|
||||
color: @collapsible-nav-heading-color;
|
||||
font-weight: normal;
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
.background-image-svg('images/arrow-expanded.svg', 'images/arrow-expanded.png');
|
||||
padding: 4px 0 3px 1.5em;
|
||||
padding: @collapsible-nav-heading-padding;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -26,12 +27,13 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: #4D4D4D;
|
||||
color: @collapsible-nav-heading-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
margin: @collapsible-nav-body-margin;
|
||||
background-image: none !important;
|
||||
padding-top: 0;
|
||||
display: none;
|
||||
|
|
@ -70,7 +72,7 @@
|
|||
/* Collapsed */
|
||||
&.collapsed {
|
||||
h3 {
|
||||
color: #0645AD;
|
||||
color: @collapsible-nav-heading-collapsed-color;
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
.background-image-svg('images/arrow-collapsed-ltr.svg', 'images/arrow-collapsed-ltr.png');
|
||||
|
|
@ -81,7 +83,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: #0645AD;
|
||||
color: @collapsible-nav-heading-collapsed-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ div#content {
|
|||
padding: 1.25em 1.5em 1.5em 1.5em;
|
||||
}
|
||||
#p-logo {
|
||||
left: 0.5em;
|
||||
left: @menu-main-logo-left;
|
||||
}
|
||||
div#footer {
|
||||
margin-left: 11em;
|
||||
|
|
@ -13,28 +13,32 @@
|
|||
@import "mediawiki.mixins.less";
|
||||
|
||||
/* 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 */
|
||||
|
|
@ -95,7 +99,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 */
|
||||
|
|
@ -174,7 +178,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;
|
||||
}
|
||||
|
|
@ -340,7 +344,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;
|
||||
}
|
||||
|
|
@ -448,6 +452,7 @@ div#simpleSearch button#searchButton > img {
|
|||
}
|
||||
/* Panel */
|
||||
div#mw-panel {
|
||||
font-size: @menu-main-font-size;
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
padding-top: 1em;
|
||||
|
|
@ -461,17 +466,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;
|
||||
|
|
@ -479,7 +482,7 @@ div#mw-panel div.portal div.body {
|
|||
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 {
|
||||
|
|
@ -487,15 +490,16 @@ div#mw-panel div.portal div.body ul li {
|
|||
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;
|
||||
|
|
@ -596,7 +600,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;
|
||||
|
|
@ -653,16 +657,6 @@ div#footer #footer-places li {
|
|||
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');
|
||||
|
|
@ -679,7 +673,7 @@ pre, .mw-code {
|
|||
#firstHeading {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
font-size: 1.6em;
|
||||
font-size: @content-heading-font-size;
|
||||
}
|
||||
|
||||
/* Icon for Usernames */
|
||||
|
|
@ -705,9 +699,12 @@ pre, .mw-code {
|
|||
#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 */
|
||||
|
|
|
|||
9
skins/vector/styles-beta.less
Normal file
9
skins/vector/styles-beta.less
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@import "variables.less";
|
||||
@import "beta/variables.less";
|
||||
@import "screen.less";
|
||||
@import "beta/screen.less";
|
||||
@import "externalLinks.less";
|
||||
@import "collapsibleNav.less";
|
||||
@media screen and (min-width: 982px) {
|
||||
@import "screen-hd.less";
|
||||
}
|
||||
8
skins/vector/styles.less
Normal file
8
skins/vector/styles.less
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
@import "variables.less";
|
||||
@import "screen.less";
|
||||
@import "externalLinks.less";
|
||||
@import "collapsibleNav.less";
|
||||
|
||||
@media screen and (min-width: 982px) {
|
||||
@import "screen-hd.less";
|
||||
}
|
||||
37
skins/vector/variables.less
Normal file
37
skins/vector/variables.less
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
@html-font-size: 1em;
|
||||
|
||||
@body-font-size: 1em;
|
||||
@body-font-color: #252525;
|
||||
|
||||
// Page content
|
||||
@content-font-family: sans-serif;
|
||||
@content-font-size: 0.8em;
|
||||
@content-line-height: 1.5em;
|
||||
@content-padding: 1.5em 1.5em 1.5em 1.75em;
|
||||
@content-heading-font-size: 1.6em;
|
||||
@content-heading-font-family: sans-serif;
|
||||
|
||||
// Common menu
|
||||
@menu-link-color: #0645ad;
|
||||
|
||||
// Main menu
|
||||
@menu-main-font-size: inherit;
|
||||
@menu-main-heading-font-size: 0.75em;
|
||||
@menu-main-heading-padding: 0 1.75em 0.25em 0.25em;
|
||||
|
||||
@menu-main-body-font-size: 0.75em;
|
||||
@menu-main-body-link-color: #0645ad;
|
||||
@menu-main-body-link-visited-color: #0b0080;
|
||||
@menu-main-body-margin: 0 0 0 1.25em;
|
||||
@menu-main-body-padding: 0;
|
||||
@menu-main-logo-left: 0.5em;
|
||||
|
||||
// Personal menu
|
||||
@menu-personal-font-size: 0.75em;
|
||||
|
||||
// Collapsible nav
|
||||
@collapsible-nav-heading-color: #4D4D4D;
|
||||
@collapsible-nav-heading-collapsed-color: #0645AD;
|
||||
|
||||
@collapsible-nav-heading-padding: 4px 0 3px 1.5em;
|
||||
@collapsible-nav-body-margin: 0 0 0 1.25em;
|
||||
Loading…
Reference in a new issue