diff options
Diffstat (limited to 'skins/vector')
32 files changed, 1450 insertions, 261 deletions
diff --git a/skins/vector/beta/screen.less b/skins/vector/beta/screen.less new file mode 100644 index 00000000..6d56cd5c --- /dev/null +++ b/skins/vector/beta/screen.less @@ -0,0 +1,75 @@ +/* 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; + } +} diff --git a/skins/vector/beta/variables.less b/skins/vector/beta/variables.less new file mode 100644 index 00000000..08e662dc --- /dev/null +++ b/skins/vector/beta/variables.less @@ -0,0 +1,37 @@ +@html-font-size: 90%; + +@body-font-size: inherit; + +// Page content +@content-font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif; +@content-font-color: #252525; +@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; diff --git a/skins/vector/collapsibleNav.js b/skins/vector/collapsibleNav.js new file mode 100644 index 00000000..67313c95 --- /dev/null +++ b/skins/vector/collapsibleNav.js @@ -0,0 +1,121 @@ +/** + * Collapsible navigation for Vector + */ +( function ( mw, $ ) { + 'use strict'; + var map; + + // Use the same function for all navigation headings - don't repeat + function toggle( $element ) { + $.cookie( + 'vector-nav-' + $element.parent().attr( 'id' ), + $element.parent().is( '.collapsed' ), + { 'expires': 30, 'path': '/' } + ); + $element + .parent() + .toggleClass( 'expanded' ) + .toggleClass( 'collapsed' ) + .find( '.body' ) + .slideToggle( 'fast' ); + } + + /* Browser Support */ + + map = { + // Left-to-right languages + ltr: { + // Collapsible Nav is broken in Opera < 9.6 and Konqueror < 4 + opera: [['>=', 9.6]], + konqueror: [['>=', 4.0]], + blackberry: false, + ipod: false, + iphone: false, + ps3: false + }, + // Right-to-left languages + rtl: { + opera: [['>=', 9.6]], + konqueror: [['>=', 4.0]], + blackberry: false, + ipod: false, + iphone: false, + ps3: false + } + }; + if ( !$.client.test( map ) ) { + return true; + } + + $( function ( $ ) { + var $headings, tabIndex; + + /* General Portal Modification */ + + // Always show the first portal + $( '#mw-panel > .portal:first' ).addClass( 'first persistent' ); + // Apply a class to the entire panel to activate styles + $( '#mw-panel' ).addClass( 'collapsible-nav' ); + // Use cookie data to restore preferences of what to show and hide + $( '#mw-panel > .portal:not(.persistent)' ) + .each( function ( i ) { + var id = $(this).attr( 'id' ), + state = $.cookie( 'vector-nav-' + id ); + // Add anchor tag to heading for better accessibility + $( this ).find( 'h3' ).wrapInner( $( '<a href="#"></a>' ).click( false ) ); + // In the case that we are not showing the new version, let's show the languages by default + if ( + state === 'true' || + ( state === null && i < 1 ) || + ( state === null && id === 'p-lang' ) + ) { + $(this) + .addClass( 'expanded' ) + .removeClass( 'collapsed' ) + .find( '.body' ) + .hide() // bug 34450 + .show(); + } else { + $(this) + .addClass( 'collapsed' ) + .removeClass( 'expanded' ); + } + // Re-save cookie + if ( state !== null ) { + $.cookie( 'vector-nav-' + $(this).attr( 'id' ), state, { 'expires': 30, 'path': '/' } ); + } + } ); + + /* Tab Indexing */ + + $headings = $( '#mw-panel > .portal:not(.persistent) > h3' ); + + // Get the highest tab index + tabIndex = $( document ).lastTabIndex() + 1; + + // Fix the search not having a tabindex + $( '#searchInput' ).attr( 'tabindex', tabIndex++ ); + + // Make it keyboard accessible + $headings.attr( 'tabindex', function () { + return tabIndex++; + }); + + // Toggle the selected menu's class and expand or collapse the menu + $( '#mw-panel' ) + .delegate( '.portal:not(.persistent) > h3', 'keydown', function ( e ) { + // Make the space and enter keys act as a click + if ( e.which === 13 /* Enter */ || e.which === 32 /* Space */ ) { + toggle( $(this) ); + } + } ) + .delegate( '.portal:not(.persistent) > h3', 'mousedown', function ( e ) { + if ( e.which !== 3 ) { // Right mouse click + toggle( $(this) ); + $(this).blur(); + } + return false; + } ); + }); + +}( mediaWiki, jQuery ) ); diff --git a/skins/vector/collapsibleNav.less b/skins/vector/collapsibleNav.less new file mode 100644 index 00000000..e6f5c9aa --- /dev/null +++ b/skins/vector/collapsibleNav.less @@ -0,0 +1,91 @@ +/** + * 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; + } + } + } + } +} diff --git a/skins/vector/collapsibleTabs.js b/skins/vector/collapsibleTabs.js new file mode 100644 index 00000000..e3c2c519 --- /dev/null +++ b/skins/vector/collapsibleTabs.js @@ -0,0 +1,210 @@ +/** + * Collapsible tabs jQuery Plugin + */ +( function ( $ ) { + var rtl = $( 'html' ).attr( 'dir' ) === 'rtl'; + $.fn.collapsibleTabs = function ( options ) { + // return if the function is called on an empty jquery object + if ( !this.length ) { + return this; + } + // Merge options into the defaults + var $settings = $.extend( {}, $.collapsibleTabs.defaults, options ); + + this.each( function () { + var $el = $( this ); + // add the element to our array of collapsible managers + $.collapsibleTabs.instances = ( $.collapsibleTabs.instances.length === 0 ? + $el : $.collapsibleTabs.instances.add( $el ) ); + // attach the settings to the elements + $el.data( 'collapsibleTabsSettings', $settings ); + // attach data to our collapsible elements + $el.children( $settings.collapsible ).each( function () { + $.collapsibleTabs.addData( $( this ) ); + } ); + } ); + + // if we haven't already bound our resize hanlder, bind it now + if ( !$.collapsibleTabs.boundEvent ) { + $( window ) + .delayedBind( 500, 'resize', function () { + $.collapsibleTabs.handleResize(); + } ); + } + // call our resize handler to setup the page + $.collapsibleTabs.handleResize(); + return this; + }; + /** + * Returns the amount of horizontal distance between the two tabs groups + * (#left-navigation and #right-navigation), in pixels. If negative, this + * means that the tabs overlap, and the value is the width of overlapping + * parts. + * + * Used in default expandCondition and collapseCondition. + * + * @return {Numeric} distance/overlap in pixels + */ + function calculateTabDistance() { + var $leftTab, $rightTab, leftEnd, rightStart; + + // In RTL, #right-navigation is actually on the left and vice versa. + // Hooray for descriptive naming. + if ( !rtl ) { + $leftTab = $( '#left-navigation' ); + $rightTab = $( '#right-navigation' ); + } else { + $leftTab = $( '#right-navigation' ); + $rightTab = $( '#left-navigation' ); + } + + leftEnd = $leftTab.offset().left + $leftTab.width(); + rightStart = $rightTab.offset().left; + + return rightStart - leftEnd; + } + $.collapsibleTabs = { + instances: [], + boundEvent: null, + defaults: { + expandedContainer: '#p-views ul', + collapsedContainer: '#p-cactions ul', + collapsible: 'li.collapsible', + shifting: false, + expandCondition: function ( eleWidth ) { + // If there's at least eleWidth pixels free space, expand. + return calculateTabDistance() >= eleWidth; + }, + collapseCondition: function () { + // If there's an overlap, collapse. + return calculateTabDistance() < 0; + } + }, + addData: function ( $collapsible ) { + var $settings = $collapsible.parent().data( 'collapsibleTabsSettings' ); + if ( $settings !== null ) { + $collapsible.data( 'collapsibleTabsSettings', { + expandedContainer: $settings.expandedContainer, + collapsedContainer: $settings.collapsedContainer, + expandedWidth: $collapsible.width(), + prevElement: $collapsible.prev() + } ); + } + }, + getSettings: function ( $collapsible ) { + var $settings = $collapsible.data( 'collapsibleTabsSettings' ); + if ( $settings === undefined ) { + $.collapsibleTabs.addData( $collapsible ); + $settings = $collapsible.data( 'collapsibleTabsSettings' ); + } + return $settings; + }, + /** + * @param {jQuery.Event} e + */ + handleResize: function () { + $.collapsibleTabs.instances.each( function () { + var $el = $( this ), + data = $.collapsibleTabs.getSettings( $el ); + + if ( data.shifting ) { + return; + } + + // if the two navigations are colliding + if ( $el.children( data.collapsible ).length > 0 && data.collapseCondition() ) { + + $el.trigger( 'beforeTabCollapse' ); + // move the element to the dropdown menu + $.collapsibleTabs.moveToCollapsed( $el.children( data.collapsible + ':last' ) ); + } + + // if there are still moveable items in the dropdown menu, + // and there is sufficient space to place them in the tab container + if ( $( data.collapsedContainer + ' ' + data.collapsible ).length > 0 && + data.expandCondition( $.collapsibleTabs.getSettings( $( data.collapsedContainer ).children( + data.collapsible + ':first' ) ).expandedWidth ) ) { + //move the element from the dropdown to the tab + $el.trigger( 'beforeTabExpand' ); + $.collapsibleTabs + .moveToExpanded( data.collapsedContainer + ' ' + data.collapsible + ':first' ); + } + } ); + }, + moveToCollapsed: function ( ele ) { + var data, expContainerSettings, target, + $moving = $( ele ); + + data = $.collapsibleTabs.getSettings( $moving ); + if ( !data ) { + return; + } + expContainerSettings = $.collapsibleTabs.getSettings( $( data.expandedContainer ) ); + if ( !expContainerSettings ) { + return; + } + expContainerSettings.shifting = true; + + // Remove the element from where it's at and put it in the dropdown menu + target = data.collapsedContainer; + $moving.css( 'position', 'relative' ) + .css( ( rtl ? 'left' : 'right' ), 0 ) + .animate( { width: '1px' }, 'normal', function () { + var data, expContainerSettings; + $( this ).hide(); + // add the placeholder + $( '<span class="placeholder" style="display: none;"></span>' ).insertAfter( this ); + // XXX: 'data' is undefined here, should the 'data' from the outer scope have + // a different name? + $( this ).detach().prependTo( target ).data( 'collapsibleTabsSettings', data ); + $( this ).attr( 'style', 'display: list-item;' ); + data = $.collapsibleTabs.getSettings( $( ele ) ); + if ( data ) { + expContainerSettings = $.collapsibleTabs.getSettings( $( data.expandedContainer ) ); + if ( expContainerSettings ) { + expContainerSettings.shifting = false; + $.collapsibleTabs.handleResize(); + } + } + } ); + }, + moveToExpanded: function ( ele ) { + var data, expContainerSettings, $target, expandedWidth, + $moving = $( ele ); + + data = $.collapsibleTabs.getSettings( $moving ); + if ( !data ) { + return; + } + expContainerSettings = $.collapsibleTabs.getSettings( $( data.expandedContainer ) ); + if ( !expContainerSettings ) { + return; + } + expContainerSettings.shifting = true; + + // grab the next appearing placeholder so we can use it for replacing + $target = $( data.expandedContainer ).find( 'span.placeholder:first' ); + expandedWidth = data.expandedWidth; + $moving.css( 'position', 'relative' ).css( ( rtl ? 'right' : 'left' ), 0 ).css( 'width', '1px' ); + $target.replaceWith( + $moving + .detach() + .css( 'width', '1px' ) + .data( 'collapsibleTabsSettings', data ) + .animate( { width: expandedWidth + 'px' }, 'normal', function () { + $( this ).attr( 'style', 'display: block;' ); + var data, expContainerSettings; + data = $.collapsibleTabs.getSettings( $( this ) ); + if ( data ) { + expContainerSettings = $.collapsibleTabs.getSettings( $( data.expandedContainer ) ); + if ( expContainerSettings ) { + expContainerSettings.shifting = false; + $.collapsibleTabs.handleResize(); + } + } + } ) + ); + } + }; + +}( jQuery ) ); diff --git a/skins/vector/externalLinks.less b/skins/vector/externalLinks.less new file mode 100644 index 00000000..5b02abbd --- /dev/null +++ b/skins/vector/externalLinks.less @@ -0,0 +1,75 @@ +// 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('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('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('images/mail-icon.png'); + padding-right: 13px; +} +div#content a.external[href ^="news:"] { + background-position: center right; + background-repeat: no-repeat; + .background-image('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('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('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('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('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('images/document-icon.png'); + padding-right: 13px; +} diff --git a/skins/vector/images/arrow-collapsed-ltr.png b/skins/vector/images/arrow-collapsed-ltr.png Binary files differnew file mode 100644 index 00000000..063ac6f7 --- /dev/null +++ b/skins/vector/images/arrow-collapsed-ltr.png diff --git a/skins/vector/images/arrow-collapsed-ltr.svg b/skins/vector/images/arrow-collapsed-ltr.svg new file mode 100644 index 00000000..d0c4729c --- /dev/null +++ b/skins/vector/images/arrow-collapsed-ltr.svg @@ -0,0 +1,37 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="16" + height="16" + id="svg2"> + <defs + id="defs4" /> + <metadata + id="metadata7"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + transform="translate(0,-1036.0288)" + id="layer1"> + <path + d="M 10.028624,3.7729932 8.1976442,6.9443424 6.3666649,3.7729932 z" + transform="matrix(0,-2.7307791,1.576616,0,0.05143855,1066.4148)" + id="path2985" + style="fill:#797979;fill-opacity:1;stroke:none" /> + </g> +</svg> diff --git a/skins/vector/images/arrow-collapsed-rtl.png b/skins/vector/images/arrow-collapsed-rtl.png Binary files differnew file mode 100644 index 00000000..c3462182 --- /dev/null +++ b/skins/vector/images/arrow-collapsed-rtl.png diff --git a/skins/vector/images/arrow-collapsed-rtl.svg b/skins/vector/images/arrow-collapsed-rtl.svg new file mode 100644 index 00000000..8c5e04b9 --- /dev/null +++ b/skins/vector/images/arrow-collapsed-rtl.svg @@ -0,0 +1,37 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="16" + height="16" + id="svg2"> + <defs + id="defs4" /> + <metadata + id="metadata7"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + transform="translate(0,-1036.0288)" + id="layer1"> + <path + d="M 10.028624,3.7729932 8.1976442,6.9443424 6.3666649,3.7729932 z" + transform="matrix(0,2.7307791,-1.576616,0,15.948561,1021.6428)" + id="path2985" + style="fill:#797979;fill-opacity:1;stroke:none" /> + </g> +</svg> diff --git a/skins/vector/images/arrow-down-focus-icon.svg b/skins/vector/images/arrow-down-focus-icon.svg new file mode 100644 index 00000000..f2edf263 --- /dev/null +++ b/skins/vector/images/arrow-down-focus-icon.svg @@ -0,0 +1,37 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="22" + height="16" + id="svg2"> + <defs + id="defs4" /> + <metadata + id="metadata7"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + transform="translate(0,-1036.3622)" + id="layer1"> + <path + d="M 10.028624,3.7729932 8.1976442,6.9443424 6.3666649,3.7729932 z" + transform="matrix(2.7307791,0,0,1.576616,-11.885956,1036.4136)" + id="path2985" + style="fill:#929292;fill-opacity:1;stroke:none" /> + </g> +</svg> diff --git a/skins/vector/images/arrow-down-icon.svg b/skins/vector/images/arrow-down-icon.svg new file mode 100644 index 00000000..9218ff28 --- /dev/null +++ b/skins/vector/images/arrow-down-icon.svg @@ -0,0 +1,37 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="22" + height="16" + id="svg2"> + <defs + id="defs4" /> + <metadata + id="metadata7"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + transform="translate(0,-1036.3622)" + id="layer1"> + <path + d="M 10.028624,3.7729932 8.1976442,6.9443424 6.3666649,3.7729932 z" + transform="matrix(2.7307791,0,0,1.576616,-11.885956,1036.4136)" + id="path2985" + style="fill:#797979;fill-opacity:1;stroke:none" /> + </g> +</svg> diff --git a/skins/vector/images/arrow-expanded.png b/skins/vector/images/arrow-expanded.png Binary files differnew file mode 100644 index 00000000..0221028e --- /dev/null +++ b/skins/vector/images/arrow-expanded.png diff --git a/skins/vector/images/arrow-expanded.svg b/skins/vector/images/arrow-expanded.svg new file mode 100644 index 00000000..60704d27 --- /dev/null +++ b/skins/vector/images/arrow-expanded.svg @@ -0,0 +1,37 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + version="1.1" + width="16" + height="16" + id="svg2"> + <defs + id="defs4" /> + <metadata + id="metadata7"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + transform="translate(0,-1036.3622)" + id="layer1"> + <path + d="M 10.028624,3.7729932 8.1976442,6.9443424 6.3666649,3.7729932 z" + transform="matrix(2.7307791,0,0,1.576616,-14.385956,1036.4136)" + id="path2985" + style="fill:#797979;fill-opacity:1;stroke:none" /> + </g> +</svg> diff --git a/skins/vector/images/edit-icon.png b/skins/vector/images/edit-icon.png Binary files differindex 462ca643..43e46919 100644 --- a/skins/vector/images/edit-icon.png +++ b/skins/vector/images/edit-icon.png diff --git a/skins/vector/images/external-link-ltr-icon.png b/skins/vector/images/external-link-ltr-icon.png Binary files differindex acf260fc..63083831 100644 --- a/skins/vector/images/external-link-ltr-icon.png +++ b/skins/vector/images/external-link-ltr-icon.png diff --git a/skins/vector/images/external-link-rtl-icon.png b/skins/vector/images/external-link-rtl-icon.png Binary files differindex 7d5ee375..5313234e 100644 --- a/skins/vector/images/external-link-rtl-icon.png +++ b/skins/vector/images/external-link-rtl-icon.png diff --git a/skins/vector/images/mail-icon.png b/skins/vector/images/mail-icon.png Binary files differindex 9823d72c..0d93a2f8 100644 --- a/skins/vector/images/mail-icon.png +++ b/skins/vector/images/mail-icon.png diff --git a/skins/vector/images/news-icon.png b/skins/vector/images/news-icon.png Binary files differindex ade1a376..6f27054b 100644 --- a/skins/vector/images/news-icon.png +++ b/skins/vector/images/news-icon.png diff --git a/skins/vector/images/page-fade.png b/skins/vector/images/page-fade.png Binary files differindex 1436cda0..b4a60342 100644 --- a/skins/vector/images/page-fade.png +++ b/skins/vector/images/page-fade.png diff --git a/skins/vector/images/portal-break-ltr.png b/skins/vector/images/portal-break-ltr.png Binary files differindex cec17ea1..20bf3668 100644 --- a/skins/vector/images/portal-break-ltr.png +++ b/skins/vector/images/portal-break-ltr.png diff --git a/skins/vector/images/preferences-break.png b/skins/vector/images/preferences-break.png Binary files differindex e59f5783..b5293082 100644 --- a/skins/vector/images/preferences-break.png +++ b/skins/vector/images/preferences-break.png diff --git a/skins/vector/images/tab-break.png b/skins/vector/images/tab-break.png Binary files differindex c03c72e4..6d37af5b 100644 --- a/skins/vector/images/tab-break.png +++ b/skins/vector/images/tab-break.png diff --git a/skins/vector/images/talk-icon.png b/skins/vector/images/talk-icon.png Binary files differindex c4434351..0332054e 100644 --- a/skins/vector/images/talk-icon.png +++ b/skins/vector/images/talk-icon.png diff --git a/skins/vector/images/user-icon.svg b/skins/vector/images/user-icon.svg new file mode 100644 index 00000000..767d5107 --- /dev/null +++ b/skins/vector/images/user-icon.svg @@ -0,0 +1,424 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1" + width="12" + height="13.837458" + id="svg2108"> + <metadata + id="metadata68"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs3"> + <linearGradient + id="linearGradient4356"> + <stop + id="stop4358" + style="stop-color:#000000;stop-opacity:1" + offset="0" /> + <stop + id="stop4360" + style="stop-color:#000000;stop-opacity:0" + offset="1" /> + </linearGradient> + <linearGradient + id="linearGradient4344"> + <stop + id="stop4346" + style="stop-color:#727e0a;stop-opacity:1" + offset="0" /> + <stop + id="stop4348" + style="stop-color:#5b6508;stop-opacity:1" + offset="1" /> + </linearGradient> + <linearGradient + id="linearGradient4338"> + <stop + id="stop4340" + style="stop-color:#e9b15e;stop-opacity:1" + offset="0" /> + <stop + id="stop4342" + style="stop-color:#966416;stop-opacity:1" + offset="1" /> + </linearGradient> + <linearGradient + id="linearGradient4163"> + <stop + id="stop4165" + style="stop-color:#3b74bc;stop-opacity:1" + offset="0" /> + <stop + id="stop4167" + style="stop-color:#2d5990;stop-opacity:1" + offset="1" /> + </linearGradient> + <linearGradient + id="linearGradient3824"> + <stop + id="stop3826" + style="stop-color:#ffffff;stop-opacity:1" + offset="0" /> + <stop + id="stop3828" + style="stop-color:#c9c9c9;stop-opacity:1" + offset="1" /> + </linearGradient> + <linearGradient + id="linearGradient3816"> + <stop + id="stop3818" + style="stop-color:#000000;stop-opacity:1" + offset="0" /> + <stop + id="stop3820" + style="stop-color:#000000;stop-opacity:0" + offset="1" /> + </linearGradient> + <linearGradient + id="linearGradient3800"> + <stop + id="stop3802" + style="stop-color:#f4d9b1;stop-opacity:1" + offset="0" /> + <stop + id="stop3804" + style="stop-color:#df9725;stop-opacity:1" + offset="1" /> + </linearGradient> + <radialGradient + cx="29.344931" + cy="17.064077" + r="9.1620579" + fx="29.344931" + fy="17.064077" + id="radialGradient3806" + xlink:href="#linearGradient3800" + gradientUnits="userSpaceOnUse" /> + <radialGradient + cx="31.112698" + cy="19.008621" + r="8.6620579" + fx="31.112698" + fy="19.008621" + id="radialGradient3822" + xlink:href="#linearGradient3816" + gradientUnits="userSpaceOnUse" /> + <linearGradient + x1="30.935921" + y1="29.553486" + x2="30.935921" + y2="35.803486" + id="linearGradient3830" + xlink:href="#linearGradient3824" + gradientUnits="userSpaceOnUse" /> + <radialGradient + cx="28.089741" + cy="27.203083" + r="13.56536" + fx="28.089741" + fy="27.203083" + id="radialGradient4169" + xlink:href="#linearGradient4163" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(1.297564,0,0,0.884831,-8.358505,4.940469)" /> + <radialGradient + cx="29.344931" + cy="17.064077" + r="9.1620579" + fx="29.344931" + fy="17.064077" + id="radialGradient4171" + xlink:href="#linearGradient3800" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0.787998,0,0,0.787998,6.221198,3.617627)" /> + <linearGradient + x1="30.935921" + y1="29.553486" + x2="30.935921" + y2="35.803486" + id="linearGradient4175" + xlink:href="#linearGradient3824" + gradientUnits="userSpaceOnUse" + gradientTransform="translate(0.707108,0)" /> + <radialGradient + cx="31.112698" + cy="19.008621" + r="8.6620579" + fx="31.112698" + fy="19.008621" + id="radialGradient4179" + xlink:href="#linearGradient3816" + gradientUnits="userSpaceOnUse" /> + <linearGradient + x1="30.935921" + y1="29.553486" + x2="30.935921" + y2="35.803486" + id="linearGradient4326" + xlink:href="#linearGradient3824" + gradientUnits="userSpaceOnUse" + gradientTransform="translate(-12.41789,-7)" /> + <radialGradient + cx="29.344931" + cy="17.064077" + r="9.1620579" + fx="29.344931" + fy="17.064077" + id="radialGradient4328" + xlink:href="#linearGradient4338" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0.787998,0,0,0.787998,6.221198,3.617627)" /> + <radialGradient + cx="31.112698" + cy="19.008621" + r="8.6620579" + fx="31.112698" + fy="19.008621" + id="radialGradient4330" + xlink:href="#linearGradient3816" + gradientUnits="userSpaceOnUse" /> + <linearGradient + x1="30.935921" + y1="29.553486" + x2="30.935921" + y2="35.803486" + id="linearGradient4332" + xlink:href="#linearGradient3824" + gradientUnits="userSpaceOnUse" + gradientTransform="translate(-13.125,-7)" /> + <radialGradient + cx="31.112698" + cy="19.008621" + r="8.6620579" + fx="31.112698" + fy="19.008621" + id="radialGradient4336" + xlink:href="#linearGradient3816" + gradientUnits="userSpaceOnUse" /> + <radialGradient + cx="16.214741" + cy="19.836468" + r="13.56536" + fx="16.214741" + fy="19.836468" + id="radialGradient4350" + xlink:href="#linearGradient4344" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(1,0,0,0.681917,0,8.233773)" /> + <linearGradient + x1="20.661695" + y1="35.817974" + x2="22.626925" + y2="36.217758" + id="linearGradient4362" + xlink:href="#linearGradient4356" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0.983375,0.181588,-0.181588,0.983375,6.231716,-2.651466)" /> + <linearGradient + x1="22.686766" + y1="36.3904" + x2="21.408455" + y2="35.739632" + id="linearGradient4366" + xlink:href="#linearGradient4356" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(-0.977685,0.210075,0.210075,0.977685,55.1096,-3.945209)" /> + <linearGradient + x1="20.661695" + y1="35.817974" + x2="22.626925" + y2="36.217758" + id="linearGradient4372" + xlink:href="#linearGradient4356" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0.983375,0.181588,-0.181588,0.983375,-7.07212,-9.82492)" /> + <linearGradient + x1="22.686766" + y1="36.3904" + x2="21.408455" + y2="35.739632" + id="linearGradient4374" + xlink:href="#linearGradient4356" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(-0.977685,0.210075,0.210075,0.977685,41.80576,-11.11866)" /> + <linearGradient + x1="22.686766" + y1="36.3904" + x2="21.408455" + y2="35.739632" + id="linearGradient1366" + xlink:href="#linearGradient4356" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(-0.977685,0.210075,0.210075,0.977685,41.80576,-11.11866)" /> + <linearGradient + x1="20.661695" + y1="35.817974" + x2="22.626925" + y2="36.217758" + id="linearGradient1369" + xlink:href="#linearGradient4356" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0.983375,0.181588,-0.181588,0.983375,-7.07212,-9.82492)" /> + <linearGradient + x1="30.935921" + y1="29.553486" + x2="30.935921" + y2="35.803486" + id="linearGradient1372" + xlink:href="#linearGradient3824" + gradientUnits="userSpaceOnUse" + gradientTransform="translate(-12.41789,-7)" /> + <radialGradient + cx="16.214741" + cy="19.836468" + r="13.56536" + fx="16.214741" + fy="19.836468" + id="radialGradient1381" + xlink:href="#linearGradient4344" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(1,0,0,0.681917,0,8.233773)" /> + <radialGradient + cx="31.112698" + cy="19.008621" + r="8.6620579" + fx="31.112698" + fy="19.008621" + id="radialGradient2243" + xlink:href="#linearGradient3816" + gradientUnits="userSpaceOnUse" /> + <radialGradient + cx="28.089741" + cy="27.203083" + r="13.56536" + fx="28.089741" + fy="27.203083" + id="radialGradient2245" + xlink:href="#linearGradient4163" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(1.297564,0,0,0.884831,-8.358505,4.940469)" /> + <linearGradient + x1="30.935921" + y1="29.553486" + x2="30.935921" + y2="35.803486" + id="linearGradient2247" + xlink:href="#linearGradient3824" + gradientUnits="userSpaceOnUse" /> + <radialGradient + cx="31.112698" + cy="19.008621" + r="8.6620579" + fx="31.112698" + fy="19.008621" + id="radialGradient2249" + xlink:href="#linearGradient3816" + gradientUnits="userSpaceOnUse" /> + <radialGradient + cx="29.344931" + cy="17.064077" + r="9.1620579" + fx="29.344931" + fy="17.064077" + id="radialGradient2251" + xlink:href="#linearGradient3800" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0.787998,0,0,0.787998,6.221198,3.617627)" /> + <linearGradient + x1="20.661695" + y1="35.817974" + x2="22.626925" + y2="36.217758" + id="linearGradient2253" + xlink:href="#linearGradient4356" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(0.983375,0.181588,-0.181588,0.983375,6.231716,-2.651466)" /> + <linearGradient + x1="22.686766" + y1="36.3904" + x2="21.408455" + y2="35.739632" + id="linearGradient2255" + xlink:href="#linearGradient4356" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(-0.977685,0.210075,0.210075,0.977685,55.1096,-3.945209)" /> + </defs> + <g + transform="translate(-5.0000039,-32.070112)" + id="layer1" + style="display:inline" /> + <g + transform="translate(-5.0000039,-32.070112)" + id="layer2" + style="display:inline"> + <g + transform="matrix(0.39012793,0,0,0.39012793,-1.0891578,28.22979)" + id="g2230"> + <path + d="m 39.774755,19.008621 a 8.6620579,8.6620579 0 1 1 -17.324115,0 8.6620579,8.6620579 0 1 1 17.324115,0 z" + transform="matrix(1.77551,0,0,0.959183,-24.25322,18.77153)" + id="path4306" + style="color:#000000;fill:url(#radialGradient2243);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible" /> + <path + d="m 25.986174,41.636039 10.606602,0 c 3.005204,0 5.980484,-1.101932 7.071067,-4.242641 1.035639,-2.982476 0.176777,-8.662058 -6.540737,-13.258252 l -12.551146,0 c -6.717514,4.24264 -7.556991,10.044831 -6.010407,13.435028 1.575595,3.45379 4.24264,4.065865 7.424621,4.065865 z" + id="path4308" + style="color:#000000;fill:url(#radialGradient2245);fill-opacity:1;fill-rule:evenodd;stroke:#204a87;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" /> + <path + d="m 26.693281,25.726136 c 3.18198,2.828427 4.596194,13.081476 4.596194,13.081476 0,0 1.414213,-10.253048 3.889087,-13.258252 l -8.485281,0.176776 z" + id="path4310" + style="color:#000000;fill:url(#linearGradient2247);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible" /> + <path + d="m 28.972721,26.786797 c 0,0 -2.151323,1.660335 -1.965991,3.660533 -2.041226,-1.800794 -2.099873,-5.251524 -2.099873,-5.251524 l 4.065864,1.590991 z" + id="path4312" + style="color:#000000;fill:#729fcf;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible" /> + <path + d="m 25.914862,40.593933 10.493447,-0.0221 c 2.639723,0 5.253161,-0.967919 6.211112,-3.726667 0.909689,-2.61976 -0.09472,-7.608614 -5.995279,-11.645837 L 25.099417,24.956264 c -5.900557,3.726667 -7.04262,8.823219 -5.662029,12.044182 1.380592,3.220963 3.395211,3.57139 6.477474,3.593487 z" + id="path4314" + style="opacity:0.21518986;color:#000000;fill:none;stroke:#ffffff;stroke-width:0.99999976px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" /> + <path + d="m 33.410795,26.786797 c 0,0 2.151323,1.660335 1.965991,3.660533 2.041226,-1.800794 2.099873,-5.251524 2.099873,-5.251524 l -4.065864,1.590991 z" + id="path4316" + style="color:#000000;fill:#729fcf;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible" /> + <path + d="m 39.774755,19.008621 a 8.6620579,8.6620579 0 1 1 -17.324115,0 8.6620579,8.6620579 0 1 1 17.324115,0 z" + transform="translate(-0.125,3.5)" + id="path4318" + style="color:#000000;fill:url(#radialGradient2249);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible" /> + <path + d="m 39.774755,19.008621 a 8.6620579,8.6620579 0 1 1 -17.324115,0 8.6620579,8.6620579 0 1 1 17.324115,0 z" + id="path4320" + style="color:#000000;fill:url(#radialGradient2251);fill-opacity:1;fill-rule:evenodd;stroke:#c17d11;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" /> + <path + d="m 39.774755,19.008621 a 8.6620579,8.6620579 0 1 1 -17.324115,0 8.6620579,8.6620579 0 1 1 17.324115,0 z" + transform="matrix(0.877095,0,0,0.877095,3.823927,2.336267)" + id="path4322" + style="opacity:0.19620254;color:#000000;fill:none;stroke:#ffffff;stroke-width:1.14012825px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" /> + <path + d="m 21.85179,40.775197 c -1.247607,-0.544969 -1.805994,-1.858277 -1.805994,-1.858277 0.841281,-4.069136 3.719925,-7.046216 3.719925,-7.046216 0,0 -2.279321,6.411514 -1.913931,8.904493 z" + id="path4354" + style="opacity:0.22784807;color:#000000;fill:url(#linearGradient2253);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible" /> + <path + d="m 40.757497,39.916846 c 1.231251,-0.580978 1.80438,-2.002321 1.80438,-2.002321 -0.95912,-4.042983 -3.976149,-6.842821 -3.976149,-6.842821 0,0 2.464593,6.342602 2.171769,8.845142 z" + id="path4364" + style="opacity:0.22784807;color:#000000;fill:url(#linearGradient2255);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;marker:none;visibility:visible;display:inline;overflow:visible" /> + </g> + </g> +</svg> diff --git a/skins/vector/images/video-icon.png b/skins/vector/images/video-icon.png Binary files differindex e934a0ff..ed852322 100644 --- a/skins/vector/images/video-icon.png +++ b/skins/vector/images/video-icon.png diff --git a/skins/vector/screen-hd.css b/skins/vector/screen-hd.less index b90fd63b..5a1fc055 100644 --- a/skins/vector/screen-hd.css +++ b/skins/vector/screen-hd.less @@ -5,7 +5,7 @@ div#content { padding: 1.25em 1.5em 1.5em 1.5em; } #p-logo { - left: 0.5em; + left: @menu-main-logo-left; } div#footer { margin-left: 11em; @@ -18,7 +18,7 @@ div#footer { margin-right: 1em; } #left-navigation { - left: 11em; + margin-left: 11em; } #p-personal { right: 1em; diff --git a/skins/vector/screen.css b/skins/vector/screen.less index 2e09ee17..bb4be725 100644 --- a/skins/vector/screen.css +++ b/skins/vector/screen.less @@ -1,39 +1,43 @@ /* * 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"; /* 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 */ @@ -45,8 +49,7 @@ div#content { #mw-page-base { height: 5em; background-color: white; - /* @embed */ - background-image: url(images/page-fade.png); + .background-image('images/page-fade.png'); background-position: bottom left; background-repeat: repeat-x; } @@ -61,8 +64,7 @@ div#mw-head { right: 0; width: 100%; } -div#mw-head h3, -div#mw-head h5 { +div#mw-head h3 { margin: 0; padding: 0; } @@ -75,11 +77,10 @@ div.emptyPortlet { position: absolute; top: 0.33em; right: 0.75em; - /* Display on top of page tabs - bug 37158 */ - z-index: 1; + /* Display on top of page tabs - bugs 37158, 48078 */ + z-index: 100; } -#p-personal h3, -#p-personal h5 { +#p-personal h3 { display: none; } #p-personal ul { @@ -88,23 +89,28 @@ div.emptyPortlet { 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 */ #left-navigation { - position: absolute; - left: 10em; - top: 2.5em; + 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; @@ -112,49 +118,41 @@ div.emptyPortlet { } /* Navigation Labels */ div.vectorTabs h3, -div.vectorTabs h5, -div.vectorMenu h3 span, -div.vectorMenu h5 span { +div.vectorMenu h3 span { display: none; } /* Namespaces and Views */ -/* @noflip */ div.vectorTabs { + /* @noflip */ float: left; height: 2.5em; } div.vectorTabs { - /* @embed */ - background-image: url(images/tab-break.png); + .background-image('images/tab-break.png'); background-position: bottom left; 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%; margin: 0; padding: 0; background-color: #f3f3f3; - /* @embed */ - background-image: url(images/tab-normal-fade.png); + .background-image('images/tab-normal-fade.png'); background-position: bottom left; background-repeat: repeat-x; white-space: nowrap; @@ -164,8 +162,7 @@ div.vectorTabs ul > li { display: block; } div.vectorTabs li.selected { - /* @embed */ - background-image: url(images/tab-current-fade.png); + .background-image('images/tab-current-fade.png'); } /* OVERRIDDEN BY COMPLIANT BROWSERS */ div.vectorTabs li a { @@ -173,7 +170,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; } @@ -191,15 +188,14 @@ div.vectorTabs span a { padding-top: 1.25em; } /* IGNORED BY IE6 */ -/* @noflip */ div.vectorTabs span > a { + /* @noflip */ float: left; display: block; } div.vectorTabs span { display: inline-block; - /* @embed */ - background-image: url(images/tab-break.png); + .background-image('images/tab-break.png'); background-position: bottom right; background-repeat: no-repeat; } @@ -213,43 +209,40 @@ div.vectorTabs li.new a:visited{ color: #a55858; } /* Variants and Actions */ -/* @noflip */ div.vectorMenu { + /* @noflip */ direction: ltr; + /* @noflip */ float: left; - /* @embed */ - background-image: url(images/arrow-down-icon.png); + /* 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 { - /* @embed */ - background-image: url(images/arrow-down-focus-icon.png); + /* 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%; } -/* @noflip */ body.rtl div.vectorMenu { + /* @noflip */ direction: rtl; } /* OVERRIDDEN BY COMPLIANT BROWSERS */ -/* @noflip */ -div#mw-head div.vectorMenu h3, -div#mw-head div.vectorMenu h5 { +div#mw-head div.vectorMenu h3 { + /* @noflip */ float: left; - /* @embed */ - background-image: url(images/tab-break.png); + .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, -div#mw-head div.vectorMenu h5 { background-position: bottom left; margin-left: -1px; } /* IGNORED BY IE6 */ -div#mw-head div.vectorMenu > h3, -div#mw-head div.vectorMenu > h5 { +div#mw-head div.vectorMenu > h3 { background-image: none; } div#mw-head div.vectorMenu h4, @@ -263,25 +256,17 @@ div.vectorMenu#p-variants #mw-vector-current-variant { border: none; } /* OVERRIDDEN BY COMPLIANT BROWSERS */ -/* @noflip */ -div.vectorMenu h3 a, -div.vectorMenu h5 a { +div.vectorMenu h3 a { display: inline-block; width: 24px; height: 1.9em; text-decoration: none; - /* @embed */ - background-image: url(images/tab-break.png); + .background-image('images/tab-break.png'); background-repeat: no-repeat; -} -/* This will be flipped - unlike the one above it */ -div.vectorMenu h3 a, -div.vectorMenu h5 a { background-position: bottom right; } /* IGNORED BY IE6 */ -div.vectorMenu h3 > a, -div.vectorMenu h5 > a { +div.vectorMenu h3 > a { display: block; } div.vectorMenu div.menu { @@ -291,20 +276,20 @@ div.vectorMenu div.menu { 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 */ @@ -346,7 +331,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; } @@ -360,12 +345,11 @@ div.vectorMenu li.selected a:visited { text-decoration: none; } /* Search */ -#p-search h3, -#p-search h5 { +#p-search h3 { display: none; } -/* @noflip */ #p-search { + /* @noflip */ float: left; } #p-search { @@ -387,26 +371,15 @@ div#simpleSearch { border: solid 1px #aaa; color: black; background-color: white; - /* @embed */ - background-image: url(images/search-fade.png); + .background-image('images/search-fade.png'); background-position: top left; background-repeat: repeat-x; } -div#simpleSearch label { - /* - * 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; - top: 0.25em; - direction: ltr; +div#simpleSearch input:focus { + outline: none; } div#simpleSearch input { color: black; - direction: ltr; -} -div#simpleSearch input:focus { - outline: none; } div#simpleSearch input.placeholder { color: #999; @@ -468,6 +441,7 @@ div#simpleSearch button#searchButton > img { } /* Panel */ div#mw-panel { + font-size: @menu-main-font-size; position: absolute; top: 160px; padding-top: 1em; @@ -478,30 +452,26 @@ div#mw-panel div.portal { padding-bottom: 1.5em; direction: ltr; } -div#mw-panel div.portal h3, -div#mw-panel div.portal h5 { +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; - /* @embed */ - background-image: url(images/portal-break.png); + 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 { @@ -509,15 +479,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; @@ -542,8 +513,9 @@ div#footer ul li { div#footer #footer-icons { float: right; } -/* @noflip */ + body.ltr div#footer #footer-places { + /* @noflip */ float: left; } div#footer #footer-info li { @@ -592,8 +564,7 @@ div#footer #footer-places li { clear: both; margin: 0 !important; padding: 0 !important; - /* @embed */ - background-image: url(images/preferences-break.png); + .background-image('images/preferences-break.png'); background-position: bottom left; background-repeat: no-repeat; } @@ -607,8 +578,7 @@ div#footer #footer-places li { white-space: nowrap; list-style-type: none; list-style-image: none; - /* @embed */ - background-image: url(images/preferences-break.png); + .background-image('images/preferences-break.png'); background-position: bottom right; background-repeat: no-repeat; } @@ -620,7 +590,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; @@ -631,8 +601,7 @@ div#footer #footer-places li { text-decoration: underline; } #preftoc li.selected a { - /* @embed */ - background-image: url(images/preferences-fade.png); + .background-image('images/preferences-fade.png'); background-position: bottom; background-repeat: repeat-x; color: #333; @@ -678,24 +647,9 @@ 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; -} - -.editsection { - float: right; -} - ul { list-style-type: disc; - /* @embed */ - list-style-image: url(images/bullet-icon.png); + .list-style-image('images/bullet-icon.png'); } pre, .mw-code { @@ -709,82 +663,19 @@ pre, .mw-code { #firstHeading { padding-top: 0; margin-top: 0; - padding-top: 0; - font-size: 1.6em; -} -div#content a.external, -div#content a.external[href ^="gopher://"] { - /* @embed */ - background: url(images/external-link-ltr-icon.png) center right no-repeat; - padding-right: 13px; -} -div#content a.external[href ^="https://"], -.link-https { - /* @embed */ - background: url(images/lock-icon.png) center right no-repeat; - padding-right: 13px; -} -div#content a.external[href ^="mailto:"], -.link-mailto { - /* @embed */ - background: url(images/mail-icon.png) center right no-repeat; - padding-right: 13px; -} -div#content a.external[href ^="news:"] { - /* @embed */ - background: url(images/news-icon.png) center right no-repeat; - padding-right: 13px; -} -div#content a.external[href ^="ftp://"], -.link-ftp { - /* @embed */ - background: url(images/file-icon.png) center right no-repeat; - padding-right: 13px; -} -div#content a.external[href ^="irc://"], -div#content a.external[href ^="ircs://"], -.link-irc { - /* @embed */ - background: url(images/talk-icon.png) center right no-repeat; - 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 { - /* @embed */ - background: url(images/audio-icon.png) center right no-repeat; - 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 { - /* @embed */ - background: url(images/video-icon.png) center right no-repeat; - 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 { - /* @embed */ - background: url(images/document-icon.png) center right no-repeat; - padding-right: 13px; + font-size: @content-heading-font-size; } /* Icon for Usernames */ #pt-userpage, #pt-anonuserpage, #pt-login { - /* @embed */ - background: url(images/user-icon.png) left top no-repeat; + 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; - text-transform: none; } .redirectText { @@ -798,16 +689,17 @@ div#content a.external[href *=".pdf?"], div#content a.external[href *=".PDF?"], #bodyContent { position: relative; width: 100%; -} -div#bodyContent { line-height: 1.5em; + font-size: @content-font-size; } /* mediawiki.notification */ -.skin-vector #mw-notification-area { - top: 7em; +.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); @@ -815,7 +707,6 @@ div#bodyContent { border: solid 1px #a7d7f9; border-radius: 0.75em; -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125); - -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125); } @@ -834,8 +725,7 @@ div#bodyContent { margin-top: -0.8em !ie; height: 0; overflow: hidden; - /* @embed */ - background-image: url(images/watch-icons.png); + .background-image('images/watch-icons.png'); } #ca-unwatch.icon a { background-position: -43px 60%; @@ -853,8 +743,7 @@ div#bodyContent { } #ca-unwatch.icon a.loading, #ca-watch.icon a.loading { - /* @embed */ - background-image: url(images/watch-icon-loading.gif); + .background-image('images/watch-icon-loading.gif'); background-position: 5px 60%; } #ca-unwatch.icon a span, @@ -862,8 +751,7 @@ div#bodyContent { display: none; } div.vectorTabs ul { - /* @embed */ - background-image: url(images/tab-break.png); + .background-image('images/tab-break.png'); background-position: right bottom; background-repeat: no-repeat; } @@ -874,42 +762,30 @@ div.vectorTabs ul { } /* 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); + } -body.vector-animateLayout div#content, -body.vector-animateLayout div#footer { - -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, -body.vector-animateLayout #left-navigation { - -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; + #mw-head-base { + .transition(margin-left 250ms); + } } diff --git a/skins/vector/styles-beta.less b/skins/vector/styles-beta.less new file mode 100644 index 00000000..a76b6394 --- /dev/null +++ b/skins/vector/styles-beta.less @@ -0,0 +1,13 @@ +@import "variables.less"; +@import "beta/variables.less"; + +@media screen { + @import "screen.less"; + @import "beta/screen.less"; + @import "externalLinks.less"; + @import "collapsibleNav.less"; +} + +@media screen and (min-width: 982px) { + @import "screen-hd.less"; +} diff --git a/skins/vector/styles.less b/skins/vector/styles.less new file mode 100644 index 00000000..bd458510 --- /dev/null +++ b/skins/vector/styles.less @@ -0,0 +1,11 @@ +@import "variables.less"; + +@media screen { + @import "screen.less"; + @import "externalLinks.less"; + @import "collapsibleNav.less"; +} + +@media screen and (min-width: 982px) { + @import "screen-hd.less"; +} diff --git a/skins/vector/variables.less b/skins/vector/variables.less new file mode 100644 index 00000000..691e0fd5 --- /dev/null +++ b/skins/vector/variables.less @@ -0,0 +1,37 @@ +@html-font-size: 1em; + +@body-font-size: 1em; + +// Page content +@content-font-family: sans-serif; +@content-font-color: black; +@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; diff --git a/skins/vector/vector.js b/skins/vector/vector.js index 4427d9a3..aa64624a 100644 --- a/skins/vector/vector.js +++ b/skins/vector/vector.js @@ -4,18 +4,52 @@ jQuery( function ( $ ) { $( 'div.vectorMenu' ).each( function () { var $el = $( this ); - $el.find( 'h3:first a:first' ) - // For accessibility, show the menu when the hidden link in the menu is clicked (bug 24298) - .click( function ( e ) { - $el.find( '.menu:first' ).toggleClass( 'menuForceShow' ); - e.preventDefault(); + $el.find( '> h3 > a' ).parent() + .attr( 'tabindex', '0' ) + // For accessibility, show the menu when the h3 is clicked (bug 24298/46486) + .on( 'click keypress', function ( e ) { + if( e.type === 'click' || e.which === 13 ) { + $el.find( '.menu:first' ).toggleClass( 'menuForceShow' ); + e.preventDefault(); + } } ) - // When the hidden link has focus, also set a class that will change the arrow icon + // When the heading has focus, also set a class that will change the arrow icon .focus( function () { - $el.addClass( 'vectorMenuFocus' ); + $el.find( '> a' ).addClass( 'vectorMenuFocus' ); } ) .blur( function () { - $el.removeClass( 'vectorMenuFocus' ); - } ); + $el.find( '> a' ).removeClass( 'vectorMenuFocus' ); + } ) + .find( '> a:first' ) + // As the h3 can already be focused there's no need for the link to be focusable + .attr( 'tabindex', '-1' ); } ); + + /** + * Collapsible tabs for Vector + */ + var $cactions = $( '#p-cactions' ); + + // Bind callback functions to animate our drop down menu in and out + // and then call the collapsibleTabs function on the menu + $( '#p-views ul' ) + .bind( 'beforeTabCollapse', function () { + // If the dropdown was hidden, show it + if ( $cactions.hasClass( 'emptyPortlet' ) ) { + $cactions + .removeClass( 'emptyPortlet' ) + .find( 'h3' ) + .css( 'width', '1px' ).animate( { 'width': '24px' }, 390 ); + } + } ) + .bind( 'beforeTabExpand', function () { + // If we're removing the last child node right now, hide the dropdown + if ( $cactions.find( 'li' ).length === 1 ) { + $cactions.find( 'h3' ).animate( { 'width': '1px' }, 390, function () { + $( this ).attr( 'style', '' ) + .parent().addClass( 'emptyPortlet' ); + }); + } + } ) + .collapsibleTabs(); } ); |
