/*
* 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: @content-font-color;
direction: ltr;
}
/* Hide, but keep accessible for screen-readers */
margin: 0;
padding-left: 10em; /* Keep from overlapping logo */
}
-/* @noflip */
#p-personal li {
line-height: 1.125em;
+ /* @noflip */
float: left;
-}
-/* This one flips! */
-#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 */
display: none;
}
/* Namespaces and Views */
-/* @noflip */
div.vectorTabs {
+ /* @noflip */
float: left;
height: 2.5em;
}
background-repeat: no-repeat;
padding-left: 1px;
}
-/* @noflip */
div.vectorTabs ul {
+ /* @noflip */
float: left;
-}
-div.vectorTabs ul {
height: 100%;
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0;
}
-/* @noflip */
-div.vectorTabs ul li {
- float: left;
-}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorTabs ul li {
+ /* @noflip */
+ float: left;
line-height: 1.125em;
display: inline-block;
height: 100%;
height: 1.9em;
padding-left: 0.5em;
padding-right: 0.5em;
- color: #0645ad;
+ color: @menu-link-color;
cursor: pointer;
font-size: 0.8em;
}
padding-top: 1.25em;
}
/* IGNORED BY IE6 */
-/* @noflip */
div.vectorTabs span > a {
+ /* @noflip */
float: left;
display: block;
}
color: #a55858;
}
/* Variants and Actions */
-/* @noflip */
div.vectorMenu {
+ /* @noflip */
direction: ltr;
+ /* @noflip */
float: left;
/* SVG support using a transparent gradient to guarantee cross-browser
* compatibility (browsers able to understand gradient syntax support also SVG) */
.background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
+ /* @noflip */
background-position: 100% 60%;
background-repeat: no-repeat;
cursor: pointer;
.background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
background-position: 100% 60%;
}
-/* @noflip */
body.rtl div.vectorMenu {
+ /* @noflip */
direction: rtl;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
-/* @noflip */
div#mw-head div.vectorMenu h3 {
+ /* @noflip */
float: left;
.background-image('images/tab-break.png');
background-repeat: no-repeat;
-}
-/* This will be flipped - unlike the one above it */
-div#mw-head div.vectorMenu h3 {
background-position: bottom left;
margin-left: -1px;
}
border: none;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
-/* @noflip */
div.vectorMenu h3 a {
display: inline-block;
width: 24px;
text-decoration: none;
.background-image('images/tab-break.png');
background-repeat: no-repeat;
-}
-/* This will be flipped - unlike the one above it */
-div.vectorMenu h3 a {
background-position: bottom right;
}
/* IGNORED BY IE6 */
text-align: left;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
-/* @noflip */
body.rtl div.vectorMenu div.menu {
+ /* @noflip */
margin-left: 24px;
}
/* IGNORED BY IE6 */
-/* @noflip */
body.rtl div.vectorMenu > div.menu {
+ /* @noflip */
margin-left: auto;
}
/* IGNORED BY IE6 */
/* Also fixes old versions of FireFox */
-/* @noflip */
body.rtl div.vectorMenu > div.menu,
x:-moz-any-link {
+ /* @noflip */
margin-left: 23px;
}
/* Enable forcing showing of the menu for accessibility */
display: inline-block;
padding: 0.5em;
white-space: nowrap;
- color: #0645ad;
+ color: @menu-link-color;
cursor: pointer;
font-size: 0.8em;
}
#p-search h3 {
display: none;
}
-/* @noflip */
#p-search {
+ /* @noflip */
float: left;
}
#p-search {
div#simpleSearch input:focus {
outline: none;
}
+div#simpleSearch input {
+ color: black;
+}
div#simpleSearch input.placeholder {
color: #999;
}
* this from ever being shown anyways.
*/
font-size: 13px;
- color: black;
background-color: transparent;
direction: ltr;
}
}
/* 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;
div#footer #footer-icons {
float: right;
}
-/* @noflip */
+
body.ltr div#footer #footer-places {
+ /* @noflip */
float: left;
}
div#footer #footer-info li {
text-decoration: none;
}
-/*
- *
- * The following code is highly modified from monobook. It would be nice if the
- * preftoc id was more human readable like preferences-toc for instance,
- * howerver this would require backporting the other skins.
- */
-
-/* Preferences */
-#preftoc {
- /* Tabs */
- width: 100%;
- float: left;
- clear: both;
- margin: 0 !important;
- padding: 0 !important;
- .background-image('images/preferences-break.png');
- background-position: bottom left;
- background-repeat: no-repeat;
-}
- #preftoc li {
- /* Tab */
- float: left;
- margin: 0;
- padding: 0;
- padding-right: 1px;
- height: 2.25em;
- white-space: nowrap;
- list-style-type: none;
- list-style-image: none;
- .background-image('images/preferences-break.png');
- background-position: bottom right;
- background-repeat: no-repeat;
- }
- /* Sadly, IE6 won't understand this */
- #preftoc li:first-child {
- margin-left: 1px;
- }
- #preftoc a,
- #preftoc a:active {
- display: inline-block;
- position: relative;
- color: #0645ad;
- padding: 0.5em;
- text-decoration: none;
- background-image: none;
- font-size: 0.9em;
- }
- #preftoc a:hover,
- #preftoc a:focus {
- text-decoration: underline;
- }
- #preftoc li.selected a {
- .background-image('images/preferences-fade.png');
- background-position: bottom;
- background-repeat: repeat-x;
- color: #333;
- text-decoration: none;
- }
-#preferences {
- float: left;
- width: 100%;
- margin: 0;
- margin-top: -2px;
- clear: both;
- border: solid 1px #ccc;
- background-color: #fafafa;
-}
-#preferences fieldset {
- border: none;
- border-top: solid 1px #ccc;
-}
-#preferences fieldset.prefsection {
- border: none;
- padding: 0;
- margin: 1em;
-}
-#preferences legend {
- color: #666;
-}
-#preferences fieldset.prefsection legend.mainLegend {
- display: none;
-}
-#preferences td {
- padding-left: 0.5em;
- padding-right: 0.5em;
-}
-.htmlform-tip {
- font-size: x-small;
- padding: .2em 2em;
- color: #666;
-}
-#preferences div.mw-prefs-buttons {
- padding: 1em;
-}
-#preferences div.mw-prefs-buttons input {
- 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;
+ font-size: @content-font-size;
}
/* mediawiki.notification */
}
/* Animate between standard and high definition layouts */
+body.vector-animateLayout {
+ div#content,
+ div#footer,
+ #left-navigation {
+ .transition(margin-left 250ms, padding 250ms;);
+ }
-body.vector-animateLayout div#content,
-body.vector-animateLayout div#footer,
-body.vector-animateLayout #left-navigation {
- -moz-transition: margin-left 250ms, padding 250ms;
- -webkit-transition: margin-left 250ms, padding 250ms;
- -o-transition: margin-left 250ms, padding 250ms;
- transition: margin-left 250ms, padding 250ms;
-}
-body.vector-animateLayout #p-logo {
- -moz-transition: left 250ms;
- -webkit-transition: left 250ms;
- -o-transition: left 250ms;
- transition: left 250ms;
-}
-body.vector-animateLayout #mw-panel {
- -moz-transition: padding-left 250ms;
- -webkit-transition: padding-left 250ms;
- -o-transition: padding-left 250ms;
- transition: padding-left 250ms;
-}
-body.vector-animateLayout #p-search {
- -moz-transition: margin-right 250ms;
- -webkit-transition: margin-right 250ms;
- -o-transition: margin-right 250ms;
- transition: margin-right 250ms;
-}
-body.vector-animateLayout #p-personal {
- -moz-transition: right 250ms;
- -webkit-transition: right 250ms;
- -o-transition: right 250ms;
- transition: right 250ms;
-}
-body.vector-animateLayout #mw-head-base {
- -moz-transition: margin-left 250ms;
- -webkit-transition: margin-left 250ms;
- -o-transition: margin-left 250ms;
- transition: margin-left 250ms;
+ #p-logo {
+ .transition(left 250ms);
+ }
+
+ #mw-panel {
+ .transition(padding-right 250ms);
+ }
+
+ #p-search {
+ .transition(margin-right 250ms);
+ }
+
+ #p-personal {
+ .transition(right 250ms);
+ }
+
+ #mw-head-base {
+ .transition(margin-left 250ms);
+ }
}
dépôts / lhc / web / wiklou.git / blobdiff