summaryrefslogtreecommitdiff
path: root/skins/Vector/components
diff options
context:
space:
mode:
authorPierre Schmitz <pierre@archlinux.de>2014-12-27 15:41:37 +0100
committerPierre Schmitz <pierre@archlinux.de>2014-12-31 11:43:28 +0100
commitc1f9b1f7b1b77776192048005dcc66dcf3df2bfb (patch)
tree2b38796e738dd74cb42ecd9bfd151803108386bc /skins/Vector/components
parentb88ab0086858470dd1f644e64cb4e4f62bb2be9b (diff)
Update to MediaWiki 1.24.1
Diffstat (limited to 'skins/Vector/components')
-rw-r--r--skins/Vector/components/animations.less28
-rw-r--r--skins/Vector/components/common.less134
-rw-r--r--skins/Vector/components/externalLinks.less10
-rw-r--r--skins/Vector/components/footer.less57
-rw-r--r--skins/Vector/components/navigation.less144
-rw-r--r--skins/Vector/components/personalMenu.less40
-rw-r--r--skins/Vector/components/search.less111
-rw-r--r--skins/Vector/components/tabs.less245
-rw-r--r--skins/Vector/components/watchstar.less48
9 files changed, 817 insertions, 0 deletions
diff --git a/skins/Vector/components/animations.less b/skins/Vector/components/animations.less
new file mode 100644
index 00000000..ab273dc0
--- /dev/null
+++ b/skins/Vector/components/animations.less
@@ -0,0 +1,28 @@
+/* Animate between standard and high definition layouts */
+body.vector-animateLayout {
+ .mw-body,
+ 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);
+ }
+}
diff --git a/skins/Vector/components/common.less b/skins/Vector/components/common.less
new file mode 100644
index 00000000..ac4b8509
--- /dev/null
+++ b/skins/Vector/components/common.less
@@ -0,0 +1,134 @@
+/*
+ * 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: @menu-background-color;
+}
+
+/* Content */
+.mw-body {
+ margin-left: 10em;
+ padding: @content-padding;
+ /* Border on top, left, and bottom side */
+ border: 1px solid @content-border-color;
+ border-right-width: 0;
+ /* Merge the border with tabs' one (in their background image) */
+ margin-top: -1px;
+ background-color: @body-background-color;
+ color: @content-font-color;
+ direction: ltr;
+
+ .mw-editsection,
+ .mw-editsection-like {
+ font-family: @content-font-family;
+ }
+
+ p {
+ line-height: inherit;
+ margin: 0.5em 0;
+ }
+
+ h1,
+ h2,
+ #firstHeading {
+ font-family: @content-heading-font-family;
+ line-height: @heading-line-height;
+ margin-bottom: 0.25em;
+ padding: 0;
+ }
+
+ h1,
+ #firstHeading {
+ font-size: @content-heading-font-size;
+ }
+
+ h2 {
+ font-size: 1.5em;
+ margin-top: 1em;
+ }
+
+ h3,
+ h4,
+ h5,
+ h6 {
+ line-height: @content-line-height;
+ margin-top: 0.3em;
+ margin-bottom: 0;
+ padding-bottom: 0;
+ }
+
+ h3 {
+ font-size: 1.17em;
+ }
+
+ h3,
+ h4 {
+ font-weight: bold;
+ }
+
+ h4,
+ h5,
+ h6 {
+ font-size: 100%; /* (reset) */
+ }
+
+ #toc h2,
+ .toc h2 {
+ font-size: 100%; /* (reset) */
+ font-family: @content-font-family;
+ }
+}
+
+/* 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;
+}
+
+.redirectText {
+ font-size: 140%;
+}
+
+.redirectMsg img {
+ vertical-align: text-bottom;
+}
+
+.mw-body-content {
+ position: relative;
+ line-height: @content-line-height;
+ font-size: @content-font-size;
+}
diff --git a/skins/Vector/components/externalLinks.less b/skins/Vector/components/externalLinks.less
new file mode 100644
index 00000000..4cf8f0a5
--- /dev/null
+++ b/skins/Vector/components/externalLinks.less
@@ -0,0 +1,10 @@
+@import "mediawiki.mixins.less";
+// External links
+.mw-body {
+ .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;
+ }
+}
diff --git a/skins/Vector/components/footer.less b/skins/Vector/components/footer.less
new file mode 100644
index 00000000..3d61b669
--- /dev/null
+++ b/skins/Vector/components/footer.less
@@ -0,0 +1,57 @@
+/* Footer */
+div#footer {
+ margin-left: 10em;
+ margin-top: 0;
+ padding: 0.75em;
+ direction: ltr;
+
+ ul {
+ list-style-type: none;
+ list-style-image: none;
+ margin: 0;
+ padding: 0;
+
+ li {
+ margin: 0;
+ padding: 0;
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
+ color: #333;
+ font-size: 0.7em;
+ }
+ }
+
+ #footer-icons {
+ float: right;
+
+ li {
+ float: left;
+ margin-left: 0.5em;
+ line-height: 2em;
+ text-align: right;
+ }
+ }
+
+ #footer-info {
+ li {
+ line-height: 1.4em;
+ }
+ }
+
+ #footer-places {
+ li {
+ float: left;
+ margin-right: 1em;
+ line-height: 2em;
+ }
+ }
+}
+
+body.ltr {
+ div#footer {
+ #footer-places {
+ /* @noflip */
+ float: left;
+ }
+ }
+}
diff --git a/skins/Vector/components/navigation.less b/skins/Vector/components/navigation.less
new file mode 100644
index 00000000..8b384acf
--- /dev/null
+++ b/skins/Vector/components/navigation.less
@@ -0,0 +1,144 @@
+@import "mediawiki.mixins";
+@import "personalMenu";
+@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-position: bottom left;
+ background-repeat: repeat-x;
+ /* This image is only a fallback (for IE 6-9), so we do not @embed it. */
+ background-image: url('images/page-fade.png');
+ .vertical-gradient(@body-background-color, @menu-background-color, 50%, 100%);
+ background-color: @body-background-color;
+}
+
+#mw-head-base {
+ margin-top: -5em;
+ margin-left: 10em;
+ height: 5em;
+}
+
+div#mw-head {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 100%;
+
+ 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;
+
+ 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.portal {
+ margin: 0 0.6em 0 0.7em;
+ padding: 0.25em 0;
+ direction: ltr;
+ background-position: top left;
+ background-repeat: no-repeat;
+ .background-image('images/portal-break.png');
+
+ h3 {
+ font-size: @menu-main-heading-font-size;
+ color: @menu-main-heading-color;
+ font-weight: normal;
+ margin: 0;
+ padding: @menu-main-heading-padding;
+ cursor: default;
+ border: none;
+ }
+
+ div.body {
+ margin: @menu-main-body-margin;
+ padding-top: 0;
+
+ ul {
+ list-style-type: none;
+ list-style-image: none;
+ margin: 0;
+ padding: @menu-main-body-padding;
+
+ li {
+ line-height: 1.125em;
+ margin: 0;
+ padding: 0.25em 0;
+ font-size: @menu-main-body-font-size;
+ word-wrap: break-word;
+
+ a {
+ color: @menu-main-body-link-color;
+ &:visited {
+ color: @menu-main-body-link-visited-color;
+ }
+ }
+ }
+ }
+ }
+
+ &.first {
+ background-image: none;
+ margin-top: 0;
+ h3 {
+ display: none;
+ }
+ div.body {
+ margin-left: 0.5em;
+ }
+ }
+ }
+}
diff --git a/skins/Vector/components/personalMenu.less b/skins/Vector/components/personalMenu.less
new file mode 100644
index 00000000..bec2cb5c
--- /dev/null
+++ b/skins/Vector/components/personalMenu.less
@@ -0,0 +1,40 @@
+/* Personal */
+#p-personal {
+ position: absolute;
+ top: 0.33em;
+ right: 0.75em;
+ /* Display on top of page tabs - bugs 37158, 48078 */
+ z-index: 100;
+
+ h3 {
+ display: none;
+ }
+
+ ul {
+ list-style-type: none;
+ list-style-image: none;
+ margin: 0;
+ padding-left: 10em; /* Keep from overlapping logo */
+ }
+
+ 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 {
+ 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;
+}
diff --git a/skins/Vector/components/search.less b/skins/Vector/components/search.less
new file mode 100644
index 00000000..925205ce
--- /dev/null
+++ b/skins/Vector/components/search.less
@@ -0,0 +1,111 @@
+/* Search */
+#p-search {
+ /* @noflip */
+ float: left;
+ margin-right: 0.5em;
+ margin-left: 0.5em;
+
+ h3 {
+ display: none;
+ }
+
+ form,
+ input {
+ margin: 0;
+ margin-top: 0.4em;
+ }
+}
+
+div#simpleSearch {
+ display: block;
+ width: 12.6em;
+ padding-right: 1.4em;
+ 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;
+
+ // Styles for both the search input and the button
+ input {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background-color: transparent;
+ color: black;
+ }
+
+ // The search input
+ #searchInput {
+ width: 100%;
+ padding: 0.2em 0 0.2em 0.2em;
+ font-size: 13px;
+ direction: ltr;
+
+ &:focus {
+ outline: none;
+ }
+
+ // These rules MAY NOT be merged because of how CSS requires browsers
+ // to parse unrecognized selectors!
+ // Note these rules ensure that placeholder text can be distinguished from
+ // standard text. In browsers which make this distinction clear these rules
+ // are not necessary.
+ // For inputs that use jquery.placeholder.js e.g. IE9-
+ &.placeholder {
+ color: #999;
+ }
+ // Distinguish placeholder text in IE10+
+ &:-ms-input-placeholder {
+ color: #999;
+ }
+ // Distinguish placeholder text in Firefox 18-
+ &:-moz-placeholder {
+ color: #999;
+ }
+
+ // Undo the styles Webkit browsers apply to type=search fields,
+ // we provide our own
+ -webkit-appearance: textfield;
+
+ &::-webkit-search-decoration,
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-results-button,
+ &::-webkit-search-results-decoration {
+ -webkit-appearance: textfield;
+ }
+ }
+
+ // The buttons. They are displayed in the same position, and if both are
+ // present the fulltext search one obscures the 'Go' one.
+ #searchButton,
+ #mw-searchButton {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 1.65em;
+ height: 100%;
+ cursor: pointer;
+ /* Hide button text and replace it with the image. */
+ text-indent: -99999px;
+ /* Needed to make IE6 respect the text-indent. */
+ line-height: 1;
+ /* Opera 12 on RTL flips the text in a funny way without this. */
+ /* @noflip */
+ direction: ltr;
+ white-space: nowrap;
+ overflow: hidden;
+ .background-image-svg('images/search-ltr.svg', 'images/search-ltr.png');
+ background-position: center center;
+ background-repeat: no-repeat;
+ }
+
+ #mw-searchButton {
+ z-index: 1;
+ }
+}
diff --git a/skins/Vector/components/tabs.less b/skins/Vector/components/tabs.less
new file mode 100644
index 00000000..a5647345
--- /dev/null
+++ b/skins/Vector/components/tabs.less
@@ -0,0 +1,245 @@
+/*
+Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
+*/
+
+/* Navigation Labels */
+div.vectorTabs h3 {
+ display: none;
+}
+
+/* Namespaces and Views */
+div.vectorTabs {
+ /* @noflip */
+ float: left;
+ height: 2.5em;
+ .background-image('images/tab-break.png');
+ background-position: bottom left;
+ background-repeat: no-repeat;
+ padding-left: 1px;
+
+ ul {
+ /* @noflip */
+ float: left;
+ height: 100%;
+ list-style-type: none;
+ list-style-image: none;
+ margin: 0;
+ padding: 0;
+ .background-image('images/tab-break.png');
+ background-position: right bottom;
+ background-repeat: no-repeat;
+
+ li {
+ /* @noflip */
+ float: left;
+ line-height: 1.125em;
+ /* For IE6, overridden later to display:block by modern browsers */
+ 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 which doesn't support child selector */
+ > li {
+ display: block;
+ }
+ }
+
+ li {
+ &.new {
+ a,
+ a:visited{
+ color: #a55858;
+ }
+ }
+
+ &.selected {
+ .background-image('images/tab-current-fade.png');
+ a,
+ a:visited{
+ color: #333;
+ text-decoration: none;
+ }
+ }
+
+ &.icon {
+ a {
+ background-position: bottom right;
+ background-repeat: no-repeat;
+ }
+ }
+
+ a {
+ /* For IE6, overridden later to display:block by modern browsers */
+ 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 which doesn't support child selector */
+ > a {
+ display: block;
+ }
+ }
+
+ span {
+ display: inline-block;
+ .background-image('images/tab-break.png');
+ background-position: bottom right;
+ background-repeat: no-repeat;
+
+ a {
+ /* For IE6, overridden later to display:block by modern browsers */
+ display: inline-block;
+ padding-top: 1.25em;
+ }
+
+ /* Ignored by IE6 which doesn't support child selector */
+ > a {
+ /* @noflip */
+ float: left;
+ display: block;
+ }
+ }
+}
+
+/* Variants and Actions */
+div.vectorMenu {
+ /* @noflip */
+ direction: ltr;
+ /* @noflip */
+ float: left;
+ cursor: pointer;
+ position: relative;
+}
+
+body.rtl div.vectorMenu {
+ /* @noflip */
+ direction: rtl;
+}
+
+div#mw-head div.vectorMenu h3 {
+ /* @noflip */
+ float: left;
+ .background-image('images/tab-break.png');
+ background-repeat: no-repeat;
+ background-position: bottom right;
+ margin-left: -1px;
+ font-size: 1em;
+ height: 2.5em;
+ // This effectively moves the "background border" outside of the element to act like a real
+ // border. It is necessary for the dropdown (div.vectorMenu div.menu) to align well.
+ padding-right: 1px;
+ margin-right: -1px;
+}
+
+div.vectorMenu h3 span {
+ display: block;
+ font-size: 0.8em;
+ padding-left: 0.7em;
+ padding-top: 1.375em;
+ margin-right: 20px;
+ font-weight: normal;
+ color: @menu-main-heading-color;
+}
+
+div.vectorMenu h3 a {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 20px;
+ height: 2.5em;
+ .background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
+ background-position: 100% 70%;
+ background-repeat: no-repeat;
+ .transition(background-position 250ms);
+}
+
+div.vectorMenu.menuForceShow h3 a {
+ background-position: 100% 100%;
+}
+
+div.vectorMenuFocus h3 a {
+ .background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
+}
+
+div.vectorMenu div.menu {
+ // Match the width of the dropdown "heading" (the tab)
+ min-width: 100%;
+ position: absolute;
+ top: 2.5em;
+ left: -1px;
+ background-color: white;
+ border: solid 1px silver;
+ border-top-width: 0;
+ clear: both;
+ text-align: left;
+ display: none;
+}
+
+/* Enable forcing showing of the menu for accessibility */
+div.vectorMenu:hover div.menu,
+div.vectorMenu.menuForceShow div.menu {
+ display: block;
+}
+
+div.vectorMenu ul {
+ list-style-type: none;
+ list-style-image: none;
+ padding: 0;
+ margin: 0;
+ 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;
+}
+
+@import 'watchstar.less';
diff --git a/skins/Vector/components/watchstar.less b/skins/Vector/components/watchstar.less
new file mode 100644
index 00000000..a389ed6d
--- /dev/null
+++ b/skins/Vector/components/watchstar.less
@@ -0,0 +1,48 @@
+@import "mediawiki.mixins.rotation"
+
+/* Watch/Unwatch Icon Styling */
+#ca-unwatch.icon a,
+#ca-watch.icon a {
+ margin: 0;
+ padding: 0;
+ 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-position: 5px 60%;
+}
+#ca-unwatch.icon a {
+ .background-image-svg('images/unwatch-icon.svg', 'images/unwatch-icon.png');
+}
+#ca-watch.icon a {
+ .background-image-svg('images/watch-icon.svg', 'images/watch-icon.png');
+}
+#ca-unwatch.icon a:hover,
+#ca-unwatch.icon a:focus {
+ .background-image-svg('images/unwatch-icon-hl.svg', 'images/unwatch-icon-hl.png');
+}
+#ca-watch.icon a:hover,
+#ca-watch.icon a:focus {
+ .background-image-svg('images/watch-icon-hl.svg', 'images/watch-icon-hl.png');
+}
+#ca-unwatch.icon a.loading,
+#ca-watch.icon a.loading {
+ .background-image-svg('images/watch-icon-loading.svg', 'images/watch-icon-loading.png');
+ .rotation(700ms);
+ /* Suppress the hilarious rotating focus outline on Firefox */
+ outline: none;
+ cursor: default;
+ pointer-events: none;
+ background-position: 50% 60%;
+ -webkit-transform-origin: 50% 57%;
+ transform-origin: 50% 57%;
+}
+#ca-unwatch.icon a span,
+#ca-watch.icon a span {
+ display: none;
+}