2017-01-23 14:59:47 +00:00
|
|
|
@import 'mediawiki.mixins';
|
2019-09-29 20:21:41 +00:00
|
|
|
@import 'personalNavigation';
|
2017-01-23 14:59:47 +00:00
|
|
|
@import 'search';
|
|
|
|
|
@import 'tabs';
|
2014-08-07 11:38:34 +00:00
|
|
|
|
|
|
|
|
/* 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;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-07 11:38:34 +00:00
|
|
|
/* Head */
|
|
|
|
|
#mw-page-base {
|
2019-09-26 21:12:01 +00:00
|
|
|
background-position: bottom left;
|
2019-10-02 00:11:37 +00:00
|
|
|
height: 5em;
|
2019-08-06 14:06:08 +00:00
|
|
|
.vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% );
|
2014-08-07 11:38:34 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#mw-head-base {
|
|
|
|
|
margin-top: -5em;
|
|
|
|
|
margin-left: 10em;
|
|
|
|
|
height: 5em;
|
|
|
|
|
}
|
|
|
|
|
|
2018-03-15 04:32:10 +00:00
|
|
|
#mw-head {
|
2014-08-07 11:38:34 +00:00
|
|
|
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 {
|
2019-10-02 00:11:37 +00:00
|
|
|
background-position: center center;
|
|
|
|
|
background-repeat: no-repeat;
|
2014-08-07 11:38:34 +00:00
|
|
|
display: block;
|
|
|
|
|
width: 10em;
|
|
|
|
|
height: 160px;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Panel */
|
2018-03-15 04:32:10 +00:00
|
|
|
#mw-panel {
|
2014-08-07 11:38:34 +00:00
|
|
|
position: absolute;
|
2017-07-08 17:32:57 +00:00
|
|
|
top: 0;
|
2014-08-07 11:38:34 +00:00
|
|
|
width: 10em;
|
|
|
|
|
left: 0;
|
2019-09-29 20:21:41 +00:00
|
|
|
font-size: @font-size-nav-main;
|
2014-08-07 11:38:34 +00:00
|
|
|
|
2018-03-15 04:32:10 +00:00
|
|
|
.portal {
|
2014-08-07 11:38:34 +00:00
|
|
|
margin: 0 0.6em 0 0.7em;
|
|
|
|
|
padding: 0.25em 0;
|
|
|
|
|
direction: ltr;
|
|
|
|
|
|
|
|
|
|
h3 {
|
2019-09-29 20:21:41 +00:00
|
|
|
color: @color-nav-subtle;
|
2014-08-07 11:38:34 +00:00
|
|
|
font-weight: normal;
|
2019-09-29 20:21:41 +00:00
|
|
|
margin: 0.5em 0 0 ( @margin-left-nav-main-body / @font-size-nav-main-heading );
|
2017-06-22 19:06:17 +00:00
|
|
|
padding: 0.25em 0;
|
2014-08-07 11:38:34 +00:00
|
|
|
cursor: default;
|
2017-01-23 14:59:47 +00:00
|
|
|
border: 0;
|
2019-09-29 20:21:41 +00:00
|
|
|
font-size: @font-size-nav-main-heading;
|
2014-08-07 11:38:34 +00:00
|
|
|
}
|
|
|
|
|
|
2018-03-15 04:32:10 +00:00
|
|
|
.body {
|
2019-10-01 02:59:45 +00:00
|
|
|
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+)
|
2017-03-27 18:01:24 +00:00
|
|
|
background-repeat: no-repeat;
|
2019-10-01 02:59:45 +00:00
|
|
|
background-size: 100% @border-width-base;
|
2019-10-02 00:11:37 +00:00
|
|
|
margin-left: @margin-left-nav-main-body;
|
|
|
|
|
padding-top: 0;
|
2014-08-07 11:38:34 +00:00
|
|
|
|
|
|
|
|
ul {
|
2018-03-15 04:32:10 +00:00
|
|
|
list-style: none none;
|
2014-08-07 11:38:34 +00:00
|
|
|
margin: 0;
|
2019-09-28 06:24:34 +00:00
|
|
|
padding-top: 0.3em;
|
2018-03-15 04:32:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0.25em 0;
|
2019-09-29 20:21:41 +00:00
|
|
|
font-size: @font-size-nav-main-body;
|
|
|
|
|
line-height: @line-height-nav;
|
2018-03-15 04:32:10 +00:00
|
|
|
word-wrap: break-word;
|
2014-08-07 11:38:34 +00:00
|
|
|
|
2018-03-15 04:32:10 +00:00
|
|
|
a {
|
2019-09-26 21:12:01 +00:00
|
|
|
color: @color-link;
|
2018-03-15 04:32:10 +00:00
|
|
|
|
|
|
|
|
&:visited {
|
2019-09-30 06:36:58 +00:00
|
|
|
color: @color-link--visited;
|
2014-08-07 11:38:34 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2015-02-14 11:25:17 +00:00
|
|
|
}
|
2014-08-07 11:38:34 +00:00
|
|
|
|
2015-02-14 11:25:17 +00:00
|
|
|
/* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
|
2018-03-15 04:32:10 +00:00
|
|
|
#p-logo + .portal {
|
2015-02-14 11:25:17 +00:00
|
|
|
background-image: none;
|
2017-07-08 17:32:57 +00:00
|
|
|
margin-top: 1em;
|
2018-03-15 04:32:10 +00:00
|
|
|
|
2015-02-14 11:25:17 +00:00
|
|
|
h3 {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2018-03-15 04:32:10 +00:00
|
|
|
|
|
|
|
|
.body {
|
2017-03-27 18:01:24 +00:00
|
|
|
background-image: none;
|
2019-09-29 20:21:41 +00:00
|
|
|
margin-left: @margin-left-nav-main-body;
|
2014-08-07 11:38:34 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|