This is a bold but much needed move.
I've not changed any of the css, I've simply separated it into separate
LESS files. This arguably makes the code much more readable and organised.
This is step 1 of a big cleanup of the Vector skin. A +2 is much appreciated.
Change-Id: I22e100bb0f9566af6ddccd88bc310f8902c5ff70
+++ /dev/null
-/**
- * LESS Stylesheet for collapsible nav
- */
-@import "mediawiki.mixins.less";
-
-#mw-panel.collapsible-nav {
- .portal {
- background-position: left top;
- background-repeat: no-repeat;
- .background-image('images/portal-break.png');
- padding: 0.25em 0 !important;
- margin: -11px 9px 10px 11px;
-
- h3 {
- 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: @collapsible-nav-heading-padding;
- margin-bottom: 0;
-
- &:hover {
- cursor: pointer;
- text-decoration: none;
- }
-
- a {
- color: @collapsible-nav-heading-color;
- text-decoration: none;
- }
- }
-
- .body {
- margin: @collapsible-nav-body-margin;
- background-image: none !important;
- padding-top: 0;
- display: none;
-
- ul {
- li {
- padding: 0.25em 0;
- }
- }
- }
-
-
- /* First */
- &.first {
- background-image: none;
- margin-top: 0;
- h3 {
- display: none;
- }
- }
-
- /* Persistent */
- &.persistent {
- .body {
- display: block;
- margin-left: 0.5em;
- }
-
- h3 {
- background-image: none !important;
- padding-left: 0.7em;
- cursor: default;
- }
- }
-
- /* Collapsed */
- &.collapsed {
- h3 {
- 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');
- margin-bottom: 0;
-
- &:hover {
- text-decoration: underline;
- }
-
- a {
- color: @collapsible-nav-heading-collapsed-color;
- }
- }
- }
- }
-}
--- /dev/null
+/**
+ * LESS Stylesheet for collapsible nav
+ */
+@import "mediawiki.mixins.less";
+
+#mw-panel.collapsible-nav {
+ .portal {
+ background-position: left top;
+ background-repeat: no-repeat;
+ .background-image('images/portal-break.png');
+ padding: 0.25em 0 !important;
+ margin: -11px 9px 10px 11px;
+
+ h3 {
+ 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: @collapsible-nav-heading-padding;
+ margin-bottom: 0;
+
+ &:hover {
+ cursor: pointer;
+ text-decoration: none;
+ }
+
+ a {
+ color: @collapsible-nav-heading-color;
+ text-decoration: none;
+ }
+ }
+
+ .body {
+ margin: @collapsible-nav-body-margin;
+ background-image: none !important;
+ padding-top: 0;
+ display: none;
+
+ ul {
+ li {
+ padding: 0.25em 0;
+ }
+ }
+ }
+
+
+ /* First */
+ &.first {
+ background-image: none;
+ margin-top: 0;
+ h3 {
+ display: none;
+ }
+ }
+
+ /* Persistent */
+ &.persistent {
+ .body {
+ display: block;
+ margin-left: 0.5em;
+ }
+
+ h3 {
+ background-image: none !important;
+ padding-left: 0.7em;
+ cursor: default;
+ }
+ }
+
+ /* Collapsed */
+ &.collapsed {
+ h3 {
+ 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');
+ margin-bottom: 0;
+
+ &:hover {
+ text-decoration: underline;
+ }
+
+ a {
+ color: @collapsible-nav-heading-collapsed-color;
+ }
+ }
+ }
+ }
+}
--- /dev/null
+/*
+ * Any rules which should not be flipped automatically in right-to-left situations should be
+ * prepended with @noflip in a comment block.
+ *
+ * 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";
+
+/* Framework */
+html {
+ font-size: @html-font-size;
+}
+html,
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ 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: @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: @content-font-color;
+ direction: ltr;
+}
+
+/* Hide empty portlets */
+div.emptyPortlet {
+ display: none;
+}
+
+ul {
+ list-style-type: disc;
+ .list-style-image('images/bullet-icon.png');
+}
+
+pre, .mw-code {
+ line-height: 1.3em;
+}
+
+/* Site Notice (includes notices from CentralNotice extension) */
+#siteNotice {
+ font-size: 0.8em;
+}
+
+#firstHeading {
+ padding-top: 0;
+ margin-top: 0;
+ font-size: @content-heading-font-size;
+}
+
+.redirectText {
+ font-size: 140%;
+}
+
+.redirectMsg img {
+ vertical-align: text-bottom;
+}
+
+#bodyContent {
+ position: relative;
+ width: 100%;
+ line-height: 1.5em;
+ font-size: @content-font-size;
+}
+
+/* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
+// FIXME: Should be part of jquery.tipsy.css
+.tipsy {
+ font-size: 0.8em;
+}
+
+/* Animate between standard and high definition layouts */
+body.vector-animateLayout {
+ div#content,
+ div#footer,
+ #left-navigation {
+ .transition(margin-left 250ms, padding 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);
+ }
+}
--- /dev/null
+// FIXME: This size of this CSS is ridiculous. Please refactor (see bug 54604)
+@import "mediawiki.mixins.less";
+
+div#content a.external {
+ background-position: center right;
+ background-repeat: no-repeat;
+ .background-image-svg('images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png');
+ padding-right: 13px;
+}
+div#content a.external[href ^="https://"],
+.link-https {
+ background-position: center right;
+ background-repeat: no-repeat;
+ .background-image-svg('images/lock-icon.svg', 'images/lock-icon.png');
+ padding-right: 13px;
+}
+div#content a.external[href ^="mailto:"],
+.link-mailto {
+ background-position: center right;
+ background-repeat: no-repeat;
+ .background-image-svg('images/mail-icon.svg', 'images/mail-icon.png');
+ padding-right: 13px;
+}
+div#content a.external[href ^="news:"] {
+ background-position: center right;
+ background-repeat: no-repeat;
+ .background-image-svg('images/news-icon.svg', 'images/news-icon.png');
+ padding-right: 13px;
+}
+div#content a.external[href ^="ftp://"],
+.link-ftp {
+ background-position: center right;
+ background-repeat: no-repeat;
+ .background-image-svg('images/file-icon.svg', 'images/file-icon.png');
+ padding-right: 13px;
+}
+div#content a.external[href ^="irc://"],
+div#content a.external[href ^="ircs://"],
+.link-irc {
+ background-position: center right;
+ background-repeat: no-repeat;
+ .background-image-svg('images/talk-icon.svg', 'images/talk-icon.png');
+ padding-right: 13px;
+}
+div#content a.external[href $=".ogg"], div#content a.external[href $=".OGG"],
+div#content a.external[href $=".mid"], div#content a.external[href $=".MID"],
+div#content a.external[href $=".midi"], div#content a.external[href $=".MIDI"],
+div#content a.external[href $=".mp3"], div#content a.external[href $=".MP3"],
+div#content a.external[href $=".wav"], div#content a.external[href $=".WAV"],
+div#content a.external[href $=".wma"], div#content a.external[href $=".WMA"],
+.link-audio {
+ background-position: center right;
+ background-repeat: no-repeat;
+ .background-image-svg('images/audio-icon.svg', 'images/audio-icon.png');
+ padding-right: 13px;
+}
+div#content a.external[href $=".ogm"], div#content a.external[href $=".OGM"],
+div#content a.external[href $=".avi"], div#content a.external[href $=".AVI"],
+div#content a.external[href $=".mpeg"], div#content a.external[href $=".MPEG"],
+div#content a.external[href $=".mpg"], div#content a.external[href $=".MPG"],
+.link-video {
+ background-position: center right;
+ background-repeat: no-repeat;
+ .background-image-svg('images/video-icon.svg', 'images/video-icon.png');
+ padding-right: 13px;
+}
+div#content a.external[href $=".pdf"], div#content a.external[href $=".PDF"],
+div#content a.external[href *=".pdf#"], div#content a.external[href *=".PDF#"],
+div#content a.external[href *=".pdf?"], div#content a.external[href *=".PDF?"],
+.link-document {
+ background-position: center right;
+ background-repeat: no-repeat;
+ .background-image-svg('images/document-icon.svg', 'images/document-icon.png');
+ padding-right: 13px;
+}
--- /dev/null
+/* Footer */
+div#footer {
+ margin-left: 10em;
+ margin-top: 0;
+ padding: 0.75em;
+ direction: ltr;
+}
+div#footer ul {
+ list-style-type: none;
+ list-style-image: none;
+ margin: 0;
+ padding: 0;
+}
+div#footer ul li {
+ margin: 0;
+ padding: 0;
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
+ color: #333;
+ font-size: 0.7em;
+}
+div#footer #footer-icons {
+ float: right;
+}
+
+body.ltr div#footer #footer-places {
+ /* @noflip */
+ float: left;
+}
+div#footer #footer-info li {
+ line-height: 1.4em;
+}
+div#footer #footer-icons li {
+ float: left;
+ margin-left: 0.5em;
+ line-height: 2em;
+ text-align: right;
+}
+div#footer #footer-places li {
+ float: left;
+ margin-right: 1em;
+ line-height: 2em;
+}
--- /dev/null
+@import "mediawiki.mixins";
+@import "personalMenu";
+@import "collapsibleNav";
+@import "search";
+@import "tabs";
+
+/* Hide, but keep accessible for screen-readers */
+#mw-navigation h2 {
+ position: absolute;
+ top: -9999px;
+}
+
+/* Head */
+#mw-page-base {
+ height: 5em;
+ background-color: white;
+ .background-image('images/page-fade.png');
+ background-position: bottom left;
+ background-repeat: repeat-x;
+}
+
+#mw-head-base {
+ margin-top: -5em;
+ margin-left: 10em;
+ height: 5em;
+}
+
+div#mw-head {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 100%;
+}
+
+div#mw-head h3 {
+ margin: 0;
+ padding: 0;
+}
+
+/* Navigation Containers */
+#left-navigation {
+ float: left;
+ margin-left: 10em;
+ margin-top: 2.5em;
+ /* When right nav would overlap left nav, it's placed below it
+ (normal CSS floats behavior). This rule ensures that no empty space
+ is shown between them due to right nav's margin-top. Page layout
+ is still broken, but at least the nav overlaps only the page title
+ instead of half the content. */
+ margin-bottom: -2.5em;
+ /* IE 6 double-margin bug fix */
+ display: inline;
+}
+
+#right-navigation {
+ float: right;
+ margin-top: 2.5em;
+}
+
+/* Logo */
+#p-logo {
+ position: absolute;
+ top: -160px;
+ left: 0;
+ width: 10em;
+ height: 160px;
+}
+
+#p-logo a {
+ display: block;
+ width: 10em;
+ height: 160px;
+ background-repeat: no-repeat;
+ background-position: center center;
+ text-decoration: none;
+}
+
+/* Panel */
+div#mw-panel {
+ font-size: @menu-main-font-size;
+ position: absolute;
+ top: 160px;
+ padding-top: 1em;
+ width: 10em;
+ left: 0;
+}
+
+div#mw-panel div.portal {
+ padding-bottom: 1.5em;
+ direction: ltr;
+}
+
+div#mw-panel div.portal h3 {
+ font-weight: normal;
+ color: #444;
+ padding: @menu-main-heading-padding;
+ cursor: default;
+ border: none;
+ font-size: @menu-main-heading-font-size;
+}
+
+div#mw-panel div.portal div.body {
+ padding-top: 0.5em;
+ 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: @menu-main-body-padding;
+ margin: 0;
+}
+
+div#mw-panel div.portal div.body ul li {
+ line-height: 1.125em;
+ padding: 0;
+ padding-bottom: 0.5em;
+ margin: 0;
+ font-size: @menu-main-body-font-size;
+ word-wrap: break-word;
+}
+
+div#mw-panel div.portal div.body ul li a {
+ color: @menu-main-body-link-color;
+ &:visited {
+ color: @menu-main-body-link-visited-color;
+ }
+}
+
--- /dev/null
+/* mediawiki.notification */
+.skin-vector .mw-notification-area {
+ font-size: 0.8em;
+}
+.skin-vector .mw-notification-area-layout {
+ top: 7em;
+}
+.skin-vector .mw-notification {
+ background-color: #fff;
+ background-color: rgba(255, 255, 255, 0.93);
+ padding: 0.75em 1.5em;
+ border: solid 1px #a7d7f9;
+ border-radius: 0.75em;
+ -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
+ box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
+}
--- /dev/null
+/* Personal */
+#p-personal {
+ position: absolute;
+ top: 0.33em;
+ right: 0.75em;
+ /* Display on top of page tabs - bugs 37158, 48078 */
+ z-index: 100;
+}
+
+#p-personal h3 {
+ display: none;
+}
+
+#p-personal ul {
+ list-style-type: none;
+ list-style-image: none;
+ margin: 0;
+ padding-left: 10em; /* Keep from overlapping logo */
+}
+
+#p-personal li {
+ line-height: 1.125em;
+ /* @noflip */
+ float: left;
+ margin-left: 0.75em;
+ margin-top: 0.5em;
+ font-size: @menu-personal-font-size;
+ white-space: nowrap;
+}
+
+/* Icon for Usernames */
+#pt-userpage,
+#pt-anonuserpage,
+#pt-login {
+ background-position: left top;
+ background-repeat: no-repeat;
+ /* SVG support using a transparent gradient to guarantee cross-browser
+ * compatibility (browsers able to understand gradient syntax support also SVG) */
+ .background-image-svg('images/user-icon.svg', 'images/user-icon.png');
+ padding-left: 15px !important;
+}
--- /dev/null
+/* Search */
+#p-search h3 {
+ display: none;
+}
+#p-search {
+ /* @noflip */
+ float: left;
+}
+#p-search {
+ margin-right: 0.5em;
+ margin-left: 0.5em;
+}
+#p-search form,
+#p-search input {
+ margin: 0;
+ margin-top: 0.4em;
+}
+div#simpleSearch {
+ display: block;
+ width: 14em;
+ height: 1.4em;
+ margin-top: 0.65em;
+ position: relative;
+ min-height: 1px; /* Gotta trigger hasLayout for IE7 */
+ border: solid 1px #aaa;
+ color: black;
+ background-color: white;
+ .background-image('images/search-fade.png');
+ background-position: top left;
+ background-repeat: repeat-x;
+}
+div#simpleSearch input:focus {
+ outline: none;
+}
+div#simpleSearch input {
+ color: black;
+}
+div#simpleSearch input.placeholder {
+ color: #999;
+}
+div#simpleSearch input::-webkit-input-placeholder {
+ color: #999;
+}
+div#simpleSearch input:-moz-placeholder {
+ color: #999;
+}
+div#simpleSearch input:-ms-input-placeholder {
+ color: #999;
+}
+div#simpleSearch input#searchInput {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 90%;
+ margin: 0;
+ padding: 0;
+ padding-left: 0.2em;
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+ outline: none;
+ border: none;
+ /*
+ * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
+ * this from ever being shown anyways.
+ */
+ font-size: 13px;
+ background-color: transparent;
+ direction: ltr;
+}
+div#simpleSearch button#searchButton {
+ position: absolute;
+ width: 10%;
+ right: 0;
+ top: 0;
+ padding: 0;
+ padding-top: 0.3em;
+ padding-bottom: 0.2em;
+ padding-right: 0.4em;
+ margin: 0;
+ border: none;
+ cursor: pointer;
+ background-color: transparent;
+ background-image: none;
+}
+/* OVERRIDDEN BY COMPLIANT BROWSERS */
+div#simpleSearch button#searchButton img {
+ border: none;
+ margin: 0;
+ margin-top: -3px;
+ padding: 0;
+}
+/* IGNORED BY IE6 */
+div#simpleSearch button#searchButton > img {
+ margin: 0;
+}
--- /dev/null
+/*
+Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
+*/
+
+/* Navigation Labels */
+div.vectorTabs h3,
+div.vectorMenu h3 span {
+ display: none;
+}
+
+/* Namespaces and Views */
+div.vectorTabs {
+ /* @noflip */
+ float: left;
+ height: 2.5em;
+}
+
+div.vectorTabs {
+ .background-image('images/tab-break.png');
+ background-position: bottom left;
+ background-repeat: no-repeat;
+ padding-left: 1px;
+}
+
+div.vectorTabs ul {
+ /* @noflip */
+ float: left;
+ height: 100%;
+ list-style-type: none;
+ list-style-image: none;
+ margin: 0;
+ padding: 0;
+}
+
+/* OVERRIDDEN BY COMPLIANT BROWSERS */
+div.vectorTabs ul li {
+ /* @noflip */
+ float: left;
+ line-height: 1.125em;
+ display: inline-block;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ background-color: #f3f3f3;
+ .background-image('images/tab-normal-fade.png');
+ background-position: bottom left;
+ background-repeat: repeat-x;
+ white-space: nowrap;
+}
+
+/* IGNORED BY IE6 */
+div.vectorTabs ul > li {
+ display: block;
+}
+
+div.vectorTabs li.selected {
+ .background-image('images/tab-current-fade.png');
+}
+
+/* OVERRIDDEN BY COMPLIANT BROWSERS */
+div.vectorTabs li a {
+ display: inline-block;
+ height: 1.9em;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+ color: @menu-link-color;
+ cursor: pointer;
+ font-size: 0.8em;
+}
+
+/* IGNORED BY IE6 */
+div.vectorTabs li > a {
+ display: block;
+}
+
+div.vectorTabs li.icon a {
+ background-position: bottom right;
+ background-repeat: no-repeat;
+}
+
+/* OVERRIDDEN BY COMPLIANT BROWSERS */
+div.vectorTabs span a {
+ display: inline-block;
+ padding-top: 1.25em;
+}
+
+/* IGNORED BY IE6 */
+div.vectorTabs span > a {
+ /* @noflip */
+ float: left;
+ display: block;
+}
+
+div.vectorTabs span {
+ display: inline-block;
+ .background-image('images/tab-break.png');
+ background-position: bottom right;
+ background-repeat: no-repeat;
+}
+
+div.vectorTabs li.selected a,
+div.vectorTabs li.selected a:visited{
+ color: #333;
+ text-decoration: none;
+}
+
+div.vectorTabs li.new a,
+div.vectorTabs li.new a:visited{
+ color: #a55858;
+}
+
+/* Variants and Actions */
+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;
+}
+
+div.vectorMenuFocus {
+ /* 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-focus-icon.svg', 'images/arrow-down-focus-icon.png');
+ background-position: 100% 60%;
+}
+
+body.rtl div.vectorMenu {
+ /* @noflip */
+ direction: rtl;
+}
+
+/* OVERRIDDEN BY COMPLIANT BROWSERS */
+div#mw-head div.vectorMenu h3 {
+ /* @noflip */
+ float: left;
+ .background-image('images/tab-break.png');
+ background-repeat: no-repeat;
+ background-position: bottom left;
+ margin-left: -1px;
+}
+
+/* IGNORED BY IE6 */
+div#mw-head div.vectorMenu > h3 {
+ background-image: none;
+}
+
+div#mw-head div.vectorMenu h4,
+div.vectorMenu#p-variants #mw-vector-current-variant {
+ display: inline-block;
+ float: left;
+ font-size: 0.8em;
+ padding-left: 0.5em;
+ padding-top: 1.375em;
+ font-weight: normal;
+ border: none;
+}
+
+/* OVERRIDDEN BY COMPLIANT BROWSERS */
+div.vectorMenu h3 a {
+ display: inline-block;
+ width: 24px;
+ height: 1.9em;
+ text-decoration: none;
+ .background-image('images/tab-break.png');
+ background-repeat: no-repeat;
+ background-position: bottom right;
+}
+
+/* IGNORED BY IE6 */
+div.vectorMenu h3 > a {
+ display: block;
+}
+
+div.vectorMenu div.menu {
+ position: relative;
+ display: none;
+ clear: both;
+ text-align: left;
+}
+
+/* OVERRIDDEN BY COMPLIANT BROWSERS */
+body.rtl div.vectorMenu div.menu {
+ /* @noflip */
+ margin-left: 24px;
+}
+
+/* IGNORED BY IE6 */
+body.rtl div.vectorMenu > div.menu {
+ /* @noflip */
+ margin-left: auto;
+}
+
+/* IGNORED BY IE6 */
+/* Also fixes old versions of FireFox */
+body.rtl div.vectorMenu > div.menu,
+x:-moz-any-link {
+ /* @noflip */
+ margin-left: 23px;
+}
+
+/* Enable forcing showing of the menu for accessibility */
+div.vectorMenu:hover div.menu,
+div.vectorMenu div.menuForceShow {
+ display: block;
+}
+
+div.vectorMenu ul {
+ position: absolute;
+ background-color: white;
+ border: solid 1px silver;
+ border-top-width: 0;
+ list-style-type: none;
+ list-style-image: none;
+ padding: 0;
+ margin: 0;
+ margin-left: -1px;
+ text-align: left;
+}
+
+/* Fixes old versions of FireFox */
+div.vectorMenu ul,
+x:-moz-any-link {
+ min-width: 5em;
+}
+
+/* Returns things back to normal in modern versions of FireFox */
+div.vectorMenu ul,
+x:-moz-any-link,
+x:default {
+ min-width: 0;
+}
+
+div.vectorMenu li {
+ padding: 0;
+ margin: 0;
+ text-align: left;
+ line-height: 1em;
+}
+
+/* OVERRIDDEN BY COMPLIANT BROWSERS */
+div.vectorMenu li a {
+ display: inline-block;
+ padding: 0.5em;
+ white-space: nowrap;
+ color: @menu-link-color;
+ cursor: pointer;
+ font-size: 0.8em;
+}
+
+/* IGNORED BY IE6 */
+div.vectorMenu li > a {
+ display: block;
+}
+
+div.vectorMenu li.selected a,
+div.vectorMenu li.selected a:visited {
+ color: #333;
+ text-decoration: none;
+}
+
+div.vectorTabs ul {
+ .background-image('images/tab-break.png');
+ background-position: right bottom;
+ background-repeat: no-repeat;
+}
+
+@import 'watchstar.less';
--- /dev/null
+/* Watch/Unwatch Icon Styling */
+#ca-unwatch.icon a,
+#ca-watch.icon a {
+ margin: 0;
+ padding: 0;
+ outline: none;
+ display: block;
+ width: 26px;
+ /* This hides the text but shows the background image */
+ padding-top: 3.1em;
+ margin-top: 0;
+ /* Only applied in IE6 */
+ margin-top: -0.8em !ie;
+ height: 0;
+ overflow: hidden;
+ .background-image('images/watch-icons.png');
+}
+#ca-unwatch.icon a {
+ background-position: -43px 60%;
+}
+#ca-watch.icon a {
+ background-position: 5px 60%;
+}
+#ca-unwatch.icon a:hover,
+#ca-unwatch.icon a:focus {
+ background-position: -67px 60%;
+}
+#ca-watch.icon a:hover,
+#ca-watch.icon a:focus {
+ background-position: -19px 60%;
+}
+#ca-unwatch.icon a.loading,
+#ca-watch.icon a.loading {
+ .background-image('images/watch-icon-loading.gif');
+ background-position: 5px 60%;
+}
+#ca-unwatch.icon a span,
+#ca-watch.icon a span {
+ display: none;
+}
+++ /dev/null
-// FIXME: This size of this CSS is ridiculous. Please refactor (see bug 54604)
-@import "mediawiki.mixins.less";
-
-div#content a.external {
- background-position: center right;
- background-repeat: no-repeat;
- .background-image-svg('images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png');
- padding-right: 13px;
-}
-div#content a.external[href ^="https://"],
-.link-https {
- background-position: center right;
- background-repeat: no-repeat;
- .background-image-svg('images/lock-icon.svg', 'images/lock-icon.png');
- padding-right: 13px;
-}
-div#content a.external[href ^="mailto:"],
-.link-mailto {
- background-position: center right;
- background-repeat: no-repeat;
- .background-image-svg('images/mail-icon.svg', 'images/mail-icon.png');
- padding-right: 13px;
-}
-div#content a.external[href ^="news:"] {
- background-position: center right;
- background-repeat: no-repeat;
- .background-image-svg('images/news-icon.svg', 'images/news-icon.png');
- padding-right: 13px;
-}
-div#content a.external[href ^="ftp://"],
-.link-ftp {
- background-position: center right;
- background-repeat: no-repeat;
- .background-image-svg('images/file-icon.svg', 'images/file-icon.png');
- padding-right: 13px;
-}
-div#content a.external[href ^="irc://"],
-div#content a.external[href ^="ircs://"],
-.link-irc {
- background-position: center right;
- background-repeat: no-repeat;
- .background-image-svg('images/talk-icon.svg', 'images/talk-icon.png');
- padding-right: 13px;
-}
-div#content a.external[href $=".ogg"], div#content a.external[href $=".OGG"],
-div#content a.external[href $=".mid"], div#content a.external[href $=".MID"],
-div#content a.external[href $=".midi"], div#content a.external[href $=".MIDI"],
-div#content a.external[href $=".mp3"], div#content a.external[href $=".MP3"],
-div#content a.external[href $=".wav"], div#content a.external[href $=".WAV"],
-div#content a.external[href $=".wma"], div#content a.external[href $=".WMA"],
-.link-audio {
- background-position: center right;
- background-repeat: no-repeat;
- .background-image-svg('images/audio-icon.svg', 'images/audio-icon.png');
- padding-right: 13px;
-}
-div#content a.external[href $=".ogm"], div#content a.external[href $=".OGM"],
-div#content a.external[href $=".avi"], div#content a.external[href $=".AVI"],
-div#content a.external[href $=".mpeg"], div#content a.external[href $=".MPEG"],
-div#content a.external[href $=".mpg"], div#content a.external[href $=".MPG"],
-.link-video {
- background-position: center right;
- background-repeat: no-repeat;
- .background-image-svg('images/video-icon.svg', 'images/video-icon.png');
- padding-right: 13px;
-}
-div#content a.external[href $=".pdf"], div#content a.external[href $=".PDF"],
-div#content a.external[href *=".pdf#"], div#content a.external[href *=".PDF#"],
-div#content a.external[href *=".pdf?"], div#content a.external[href *=".PDF?"],
-.link-document {
- background-position: center right;
- background-repeat: no-repeat;
- .background-image-svg('images/document-icon.svg', 'images/document-icon.png');
- padding-right: 13px;
-}
+++ /dev/null
-/*
- * Any rules which should not be flipped automatically in right-to-left situations should be
- * prepended with @noflip in a comment block.
- *
- * 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";
-
-/* Framework */
-html {
- font-size: @html-font-size;
-}
-html,
-body {
- height: 100%;
- margin: 0;
- padding: 0;
- 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: @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: @content-font-color;
- direction: ltr;
-}
-/* Hide, but keep accessible for screen-readers */
-#mw-navigation h2 {
- position: absolute;
- top: -9999px;
-}
-/* Head */
-#mw-page-base {
- height: 5em;
- background-color: white;
- .background-image('images/page-fade.png');
- background-position: bottom left;
- background-repeat: repeat-x;
-}
-#mw-head-base {
- margin-top: -5em;
- margin-left: 10em;
- height: 5em;
-}
-div#mw-head {
- position: absolute;
- top: 0;
- right: 0;
- width: 100%;
-}
-div#mw-head h3 {
- margin: 0;
- padding: 0;
-}
-/* Hide empty portlets */
-div.emptyPortlet {
- display: none;
-}
-/* Personal */
-#p-personal {
- position: absolute;
- top: 0.33em;
- right: 0.75em;
- /* Display on top of page tabs - bugs 37158, 48078 */
- z-index: 100;
-}
-#p-personal h3 {
- display: none;
-}
-#p-personal ul {
- list-style-type: none;
- list-style-image: none;
- margin: 0;
- padding-left: 10em; /* Keep from overlapping logo */
-}
-#p-personal li {
- line-height: 1.125em;
- /* @noflip */
- float: left;
- margin-left: 0.75em;
- margin-top: 0.5em;
- font-size: @menu-personal-font-size;
- white-space: nowrap;
-}
-/* Navigation Containers */
-#left-navigation {
- float: left;
- margin-left: 10em;
- margin-top: 2.5em;
- /* When right nav would overlap left nav, it's placed below it
- (normal CSS floats behavior). This rule ensures that no empty space
- is shown between them due to right nav's margin-top. Page layout
- is still broken, but at least the nav overlaps only the page title
- instead of half the content. */
- margin-bottom: -2.5em;
- /* IE 6 double-margin bug fix */
- display: inline;
-}
-#right-navigation {
- float: right;
- margin-top: 2.5em;
-}
-/* Navigation Labels */
-div.vectorTabs h3,
-div.vectorMenu h3 span {
- display: none;
-}
-/* Namespaces and Views */
-div.vectorTabs {
- /* @noflip */
- float: left;
- height: 2.5em;
-}
-div.vectorTabs {
- .background-image('images/tab-break.png');
- background-position: bottom left;
- background-repeat: no-repeat;
- padding-left: 1px;
-}
-div.vectorTabs ul {
- /* @noflip */
- float: left;
- height: 100%;
- list-style-type: none;
- list-style-image: none;
- margin: 0;
- padding: 0;
-}
-/* OVERRIDDEN BY COMPLIANT BROWSERS */
-div.vectorTabs ul li {
- /* @noflip */
- float: left;
- line-height: 1.125em;
- display: inline-block;
- height: 100%;
- margin: 0;
- padding: 0;
- background-color: #f3f3f3;
- .background-image('images/tab-normal-fade.png');
- background-position: bottom left;
- background-repeat: repeat-x;
- white-space: nowrap;
-}
-/* IGNORED BY IE6 */
-div.vectorTabs ul > li {
- display: block;
-}
-div.vectorTabs li.selected {
- .background-image('images/tab-current-fade.png');
-}
-/* OVERRIDDEN BY COMPLIANT BROWSERS */
-div.vectorTabs li a {
- display: inline-block;
- height: 1.9em;
- padding-left: 0.5em;
- padding-right: 0.5em;
- color: @menu-link-color;
- cursor: pointer;
- font-size: 0.8em;
-}
-/* IGNORED BY IE6 */
-div.vectorTabs li > a {
- display: block;
-}
-div.vectorTabs li.icon a {
- background-position: bottom right;
- background-repeat: no-repeat;
-}
-/* OVERRIDDEN BY COMPLIANT BROWSERS */
-div.vectorTabs span a {
- display: inline-block;
- padding-top: 1.25em;
-}
-/* IGNORED BY IE6 */
-div.vectorTabs span > a {
- /* @noflip */
- float: left;
- display: block;
-}
-div.vectorTabs span {
- display: inline-block;
- .background-image('images/tab-break.png');
- background-position: bottom right;
- background-repeat: no-repeat;
-}
-div.vectorTabs li.selected a,
-div.vectorTabs li.selected a:visited{
- color: #333;
- text-decoration: none;
-}
-div.vectorTabs li.new a,
-div.vectorTabs li.new a:visited{
- color: #a55858;
-}
-/* Variants and Actions */
-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;
-}
-div.vectorMenuFocus {
- /* 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-focus-icon.svg', 'images/arrow-down-focus-icon.png');
- background-position: 100% 60%;
-}
-body.rtl div.vectorMenu {
- /* @noflip */
- direction: rtl;
-}
-/* OVERRIDDEN BY COMPLIANT BROWSERS */
-div#mw-head div.vectorMenu h3 {
- /* @noflip */
- float: left;
- .background-image('images/tab-break.png');
- background-repeat: no-repeat;
- background-position: bottom left;
- margin-left: -1px;
-}
-/* IGNORED BY IE6 */
-div#mw-head div.vectorMenu > h3 {
- background-image: none;
-}
-div#mw-head div.vectorMenu h4,
-div.vectorMenu#p-variants #mw-vector-current-variant {
- display: inline-block;
- float: left;
- font-size: 0.8em;
- padding-left: 0.5em;
- padding-top: 1.375em;
- font-weight: normal;
- border: none;
-}
-/* OVERRIDDEN BY COMPLIANT BROWSERS */
-div.vectorMenu h3 a {
- display: inline-block;
- width: 24px;
- height: 1.9em;
- text-decoration: none;
- .background-image('images/tab-break.png');
- background-repeat: no-repeat;
- background-position: bottom right;
-}
-/* IGNORED BY IE6 */
-div.vectorMenu h3 > a {
- display: block;
-}
-div.vectorMenu div.menu {
- position: relative;
- display: none;
- clear: both;
- text-align: left;
-}
-/* OVERRIDDEN BY COMPLIANT BROWSERS */
-body.rtl div.vectorMenu div.menu {
- /* @noflip */
- margin-left: 24px;
-}
-/* IGNORED BY IE6 */
-body.rtl div.vectorMenu > div.menu {
- /* @noflip */
- margin-left: auto;
-}
-/* IGNORED BY IE6 */
-/* Also fixes old versions of FireFox */
-body.rtl div.vectorMenu > div.menu,
-x:-moz-any-link {
- /* @noflip */
- margin-left: 23px;
-}
-/* Enable forcing showing of the menu for accessibility */
-div.vectorMenu:hover div.menu,
-div.vectorMenu div.menuForceShow {
- display: block;
-}
-div.vectorMenu ul {
- position: absolute;
- background-color: white;
- border: solid 1px silver;
- border-top-width: 0;
- list-style-type: none;
- list-style-image: none;
- padding: 0;
- margin: 0;
- margin-left: -1px;
- text-align: left;
-}
-/* Fixes old versions of FireFox */
-div.vectorMenu ul,
-x:-moz-any-link {
- min-width: 5em;
-}
-/* Returns things back to normal in modern versions of FireFox */
-div.vectorMenu ul,
-x:-moz-any-link,
-x:default {
- min-width: 0;
-}
-div.vectorMenu li {
- padding: 0;
- margin: 0;
- text-align: left;
- line-height: 1em;
-}
-/* OVERRIDDEN BY COMPLIANT BROWSERS */
-div.vectorMenu li a {
- display: inline-block;
- padding: 0.5em;
- white-space: nowrap;
- color: @menu-link-color;
- cursor: pointer;
- font-size: 0.8em;
-}
-/* IGNORED BY IE6 */
-div.vectorMenu li > a {
- display: block;
-}
-div.vectorMenu li.selected a,
-div.vectorMenu li.selected a:visited {
- color: #333;
- text-decoration: none;
-}
-/* Search */
-#p-search h3 {
- display: none;
-}
-#p-search {
- /* @noflip */
- float: left;
-}
-#p-search {
- margin-right: 0.5em;
- margin-left: 0.5em;
-}
-#p-search form,
-#p-search input {
- margin: 0;
- margin-top: 0.4em;
-}
-div#simpleSearch {
- display: block;
- width: 14em;
- height: 1.4em;
- margin-top: 0.65em;
- position: relative;
- min-height: 1px; /* Gotta trigger hasLayout for IE7 */
- border: solid 1px #aaa;
- color: black;
- background-color: white;
- .background-image('images/search-fade.png');
- background-position: top left;
- background-repeat: repeat-x;
-}
-div#simpleSearch input:focus {
- outline: none;
-}
-div#simpleSearch input {
- color: black;
-}
-div#simpleSearch input.placeholder {
- color: #999;
-}
-div#simpleSearch input::-webkit-input-placeholder {
- color: #999;
-}
-div#simpleSearch input:-moz-placeholder {
- color: #999;
-}
-div#simpleSearch input:-ms-input-placeholder {
- color: #999;
-}
-div#simpleSearch input#searchInput {
- position: absolute;
- top: 0;
- left: 0;
- width: 90%;
- margin: 0;
- padding: 0;
- padding-left: 0.2em;
- padding-top: 0.2em;
- padding-bottom: 0.2em;
- outline: none;
- border: none;
- /*
- * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent
- * this from ever being shown anyways.
- */
- font-size: 13px;
- background-color: transparent;
- direction: ltr;
-}
-div#simpleSearch button#searchButton {
- position: absolute;
- width: 10%;
- right: 0;
- top: 0;
- padding: 0;
- padding-top: 0.3em;
- padding-bottom: 0.2em;
- padding-right: 0.4em;
- margin: 0;
- border: none;
- cursor: pointer;
- background-color: transparent;
- background-image: none;
-}
-/* OVERRIDDEN BY COMPLIANT BROWSERS */
-div#simpleSearch button#searchButton img {
- border: none;
- margin: 0;
- margin-top: -3px;
- padding: 0;
-}
-/* IGNORED BY IE6 */
-div#simpleSearch button#searchButton > img {
- margin: 0;
-}
-/* Panel */
-div#mw-panel {
- font-size: @menu-main-font-size;
- position: absolute;
- top: 160px;
- padding-top: 1em;
- width: 10em;
- left: 0;
-}
-div#mw-panel div.portal {
- padding-bottom: 1.5em;
- direction: ltr;
-}
-div#mw-panel div.portal h3 {
- font-weight: normal;
- color: #444;
- padding: @menu-main-heading-padding;
- cursor: default;
- border: none;
- font-size: @menu-main-heading-font-size;
-}
-div#mw-panel div.portal div.body {
- padding-top: 0.5em;
- 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: @menu-main-body-padding;
- margin: 0;
-}
-div#mw-panel div.portal div.body ul li {
- line-height: 1.125em;
- padding: 0;
- padding-bottom: 0.5em;
- margin: 0;
- font-size: @menu-main-body-font-size;
- word-wrap: break-word;
-}
-div#mw-panel div.portal div.body ul li a {
- color: @menu-main-body-link-color;
- &:visited {
- color: @menu-main-body-link-visited-color;
- }
-}
-
-/* Footer */
-div#footer {
- margin-left: 10em;
- margin-top: 0;
- padding: 0.75em;
- direction: ltr;
-}
-div#footer ul {
- list-style-type: none;
- list-style-image: none;
- margin: 0;
- padding: 0;
-}
-div#footer ul li {
- margin: 0;
- padding: 0;
- padding-top: 0.5em;
- padding-bottom: 0.5em;
- color: #333;
- font-size: 0.7em;
-}
-div#footer #footer-icons {
- float: right;
-}
-
-body.ltr div#footer #footer-places {
- /* @noflip */
- float: left;
-}
-div#footer #footer-info li {
- line-height: 1.4em;
-}
-div#footer #footer-icons li {
- float: left;
- margin-left: 0.5em;
- line-height: 2em;
- text-align: right;
-}
-div#footer #footer-places li {
- float: left;
- margin-right: 1em;
- line-height: 2em;
-}
-/* Logo */
-#p-logo {
- position: absolute;
- top: -160px;
- left: 0;
- width: 10em;
- height: 160px;
-}
-#p-logo a {
- display: block;
- width: 10em;
- height: 160px;
- background-repeat: no-repeat;
- background-position: center center;
- text-decoration: none;
-}
-
-ul {
- list-style-type: disc;
- .list-style-image('images/bullet-icon.png');
-}
-
-pre, .mw-code {
- line-height: 1.3em;
-}
-
-/* Site Notice (includes notices from CentralNotice extension) */
-#siteNotice {
- font-size: 0.8em;
-}
-#firstHeading {
- padding-top: 0;
- margin-top: 0;
- font-size: @content-heading-font-size;
-}
-
-/* Icon for Usernames */
-#pt-userpage,
-#pt-anonuserpage,
-#pt-login {
- background-position: left top;
- background-repeat: no-repeat;
- /* SVG support using a transparent gradient to guarantee cross-browser
- * compatibility (browsers able to understand gradient syntax support also SVG) */
- .background-image-svg('images/user-icon.svg', 'images/user-icon.png');
- padding-left: 15px !important;
-}
-
-.redirectText {
- font-size: 140%;
-}
-
-.redirectMsg img {
- vertical-align: text-bottom;
-}
-
-#bodyContent {
- position: relative;
- width: 100%;
- line-height: 1.5em;
- font-size: @content-font-size;
-}
-
-/* mediawiki.notification */
-.skin-vector .mw-notification-area {
- font-size: 0.8em;
-}
-.skin-vector .mw-notification-area-layout {
- top: 7em;
-}
-.skin-vector .mw-notification {
- background-color: #fff;
- background-color: rgba(255, 255, 255, 0.93);
- padding: 0.75em 1.5em;
- border: solid 1px #a7d7f9;
- border-radius: 0.75em;
- -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
- box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
-}
-
-/* Watch/Unwatch Icon Styling */
-#ca-unwatch.icon a,
-#ca-watch.icon a {
- margin: 0;
- padding: 0;
- outline: none;
- display: block;
- width: 26px;
- /* This hides the text but shows the background image */
- padding-top: 3.1em;
- margin-top: 0;
- /* Only applied in IE6 */
- margin-top: -0.8em !ie;
- height: 0;
- overflow: hidden;
- .background-image('images/watch-icons.png');
-}
-#ca-unwatch.icon a {
- background-position: -43px 60%;
-}
-#ca-watch.icon a {
- background-position: 5px 60%;
-}
-#ca-unwatch.icon a:hover,
-#ca-unwatch.icon a:focus {
- background-position: -67px 60%;
-}
-#ca-watch.icon a:hover,
-#ca-watch.icon a:focus {
- background-position: -19px 60%;
-}
-#ca-unwatch.icon a.loading,
-#ca-watch.icon a.loading {
- .background-image('images/watch-icon-loading.gif');
- background-position: 5px 60%;
-}
-#ca-unwatch.icon a span,
-#ca-watch.icon a span {
- display: none;
-}
-div.vectorTabs ul {
- .background-image('images/tab-break.png');
- background-position: right bottom;
- background-repeat: no-repeat;
-}
-
-/* Tooltips are outside of the normal body code, so this helps make the size of the text sensible */
-.tipsy {
- font-size: 0.8em;
-}
-
-/* Animate between standard and high definition layouts */
-body.vector-animateLayout {
- div#content,
- div#footer,
- #left-navigation {
- .transition(margin-left 250ms, padding 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);
- }
-}
@import "variables.less";
@media screen {
- @import "screen.less";
- @import "externalLinks.less";
- @import "collapsibleNav.less";
+ @import "components/common.less";
+ @import "components/navigation.less";
+ @import "components/footer.less";
+ @import 'components/notifications.less';
+ @import "components/externalLinks.less";
}
@media screen and (min-width: 982px) {
dépôts / lhc / web / wiklou.git / commitdiff