'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'],
'localBasePath' => $GLOBALS['wgStyleDirectory'],
),
'skins.vector.collapsibleNav' => array(
- 'styles' => array(
- 'vector/collapsibleNav.less',
- ),
'scripts' => array(
'vector/collapsibleNav.js',
),
*/
function setupSkinUserCss( OutputPage $out ) {
parent::setupSkinUserCss( $out );
- $out->addModuleStyles( 'skins.vector' );
+
+ $styles = array( 'skins.vector' );
+ wfRunHooks( 'SkinVectorStyleModules', array( &$this, &$styles ) );
+ $out->addModuleStyles( $styles );
}
/**
--- /dev/null
+/* 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;
+ }
+}
--- /dev/null
+@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;
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 {
}
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;
/* 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');
}
a {
- color: #0645AD;
+ color: @collapsible-nav-heading-collapsed-color;
}
}
}
+++ /dev/null
-/* Vector screen styles for high definition displays */
-
-div#content {
- margin-left: 11em;
- padding: 1.25em 1.5em 1.5em 1.5em;
-}
-#p-logo {
- left: 0.5em;
-}
-div#footer {
- margin-left: 11em;
- padding: 1.25em;
-}
-#mw-panel {
- padding-left: 0.5em;
-}
-#p-search {
- margin-right: 1em;
-}
-#left-navigation {
- margin-left: 11em;
-}
-#p-personal {
- right: 1em;
-}
-#mw-head-base {
- margin-left: 11em;
-}
--- /dev/null
+/* Vector screen styles for high definition displays */
+
+div#content {
+ margin-left: 11em;
+ padding: 1.25em 1.5em 1.5em 1.5em;
+}
+#p-logo {
+ left: @menu-main-logo-left;
+}
+div#footer {
+ margin-left: 11em;
+ padding: 1.25em;
+}
+#mw-panel {
+ padding-left: 0.5em;
+}
+#p-search {
+ margin-right: 1em;
+}
+#left-navigation {
+ margin-left: 11em;
+}
+#p-personal {
+ right: 1em;
+}
+#mw-head-base {
+ margin-left: 11em;
+}
@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 */
#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 */
height: 1.9em;
padding-left: 0.5em;
padding-right: 0.5em;
- color: #0645ad;
+ color: @menu-link-color;
cursor: pointer;
font-size: 0.8em;
}
display: inline-block;
padding: 0.5em;
white-space: nowrap;
- color: #0645ad;
+ color: @menu-link-color;
cursor: pointer;
font-size: 0.8em;
}
}
/* Panel */
div#mw-panel {
+ font-size: @menu-main-font-size;
position: absolute;
top: 160px;
padding-top: 1em;
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;
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 {
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;
#preftoc a:active {
display: inline-block;
position: relative;
- color: #0645ad;
+ color: @menu-link-color;
padding: 0.5em;
text-decoration: none;
background-image: none;
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');
#firstHeading {
padding-top: 0;
margin-top: 0;
- font-size: 1.6em;
+ font-size: @content-heading-font-size;
}
/* Icon for Usernames */
#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 */
--- /dev/null
+@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";
+}
--- /dev/null
+@import "variables.less";
+@import "screen.less";
+@import "externalLinks.less";
+@import "collapsibleNav.less";
+
+@media screen and (min-width: 982px) {
+ @import "screen-hd.less";
+}
--- /dev/null
+@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;