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

[lhc/web/wiklou.git] / skins / vector / screen.less

diff --git a/skins/vector/screen.less b/skins/vector/screen.less
index 97a04c7..bfcc35c 100644 (file)
--- a/skins/vector/screen.less
+++ b/skins/vector/screen.less
@@ -12,28 +12,32 @@
 @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 +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 +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 +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 +451,7 @@ div#simpleSearch button#searchButton > img {
 }
 /* Panel */
 div#mw-panel {
+       font-size: @menu-main-font-size;
        position: absolute;
        top: 160px;
        padding-top: 1em;
@@ -460,17 +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 +481,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 {
@@ -486,15 +489,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;
@@ -595,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 +656,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');
@@ -678,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 +698,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 */