mediawiki-skins-Vector/components/navigation.less

139 lines
2.7 KiB
Plaintext
Raw Normal View History

@import 'mediawiki.mixins';
@import 'personalNavigation';
@import 'search';
@import 'tabs';
/* Hide, but keep accessible for screen-readers */
#mw-navigation h2 {
position: absolute;
top: -9999px;
}
Re-implement and improve mw-jump links with pure CSS * Improve their accessibility by giving both links a full label "Jump to x" and "Jump to y" instead of "Jump to: ", "x", "y". This also makes things much better for localisation, for which we generally discourage use of concatenation. * Use pure CSS for the toggling of the visibility on focus, instead of relying on JavaScript. Especially given the JS comes form core's 'jquery.mw-jump' module, which is considered technical debt per T195256. Alternatively, that could be copied to vector.js, but pure CSS is possible, so why not. * Use plain <a> links in the HTML instead of wrapped in a <div>. This solves the long-standing problem whereby the margin between #contentSub and #mw-content-text had to be awkwardly negated and overridden in core and on various to make sure that the wrapper itself would become visible as needed, in a way that has margin around this. This whole problem doesn't apply when simply using inline links that aren't part of the regular flow with .mixin-screen-reader-text. On focus, the individually focussed link appears in regular flow, without the need for any custom styles. * This uses :not(:focus) to naturally make it render in the default way on focus, and visibibly hidden/clipped otherwise. This is supported in IE9+ and Android 2+. There is a way to make it work with CSS2 for IE7-8, by applying the mixin to '.mw-jump-link' only and then undoing all of 'position', 'width', 'height', 'clip', and 'margin' on :focus. But I'm not sure that's worth it here. The fallback in IE7-8 for not supporting ":not(:focus)" is that the accessibility link is simply visible always, which seems like a good fallback for accessibility, and doesn't hurt anything. Bug: T195256 Change-Id: Icaadb290f692b3617688d32cbb66dfb007f1c82c
2018-05-21 16:28:07 +00:00
.mw-jump-link:not( :focus ) {
.mixin-screen-reader-text;
}
/* Head */
#mw-page-base {
background-position: bottom left;
height: 5em;
.vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% );
}
#mw-head-base {
margin-top: -5em;
margin-left: 10em;
height: 5em;
}
#mw-head {
position: absolute;
top: 0;
right: 0;
width: 100%;
}
/* 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;
}
#right-navigation {
float: right;
margin-top: 2.5em;
}
/* Logo */
#p-logo {
width: 10em;
height: 160px;
a {
background-position: center center;
background-repeat: no-repeat;
display: block;
width: 10em;
height: 160px;
text-decoration: none;
}
}
/* Panel */
#mw-panel {
position: absolute;
top: 0;
width: 10em;
left: 0;
font-size: @font-size-nav-main;
.portal {
margin: 0 0.6em 0 0.7em;
padding: 0.25em 0;
direction: ltr;
h3 {
color: @color-nav-subtle;
font-weight: normal;
margin: 0.5em 0 0 ( @margin-left-nav-main-body / @font-size-nav-main-heading );
padding: 0.25em 0;
cursor: default;
border: 0;
font-size: @font-size-nav-main-heading;
}
.body {
background-image: url( images/portal-separator.png ); // Support: IE 8 & 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25
background-image: linear-gradient( to right, transparent 0, #c8ccd1 35%, #c8ccd1 70%, transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
background-repeat: no-repeat;
background-size: 100% @border-width-base;
margin-left: @margin-left-nav-main-body;
padding-top: 0;
ul {
list-style: none none;
margin: 0;
padding-top: 0.3em;
}
li {
margin: 0;
padding: 0.25em 0;
font-size: @font-size-nav-main-body;
line-height: @line-height-nav;
word-wrap: break-word;
a {
color: @color-link;
&:visited {
color: @color-link--visited;
}
}
}
}
}
/* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
#p-logo + .portal {
background-image: none;
margin-top: 1em;
h3 {
display: none;
}
.body {
background-image: none;
margin-left: @margin-left-nav-main-body;
}
}
}