Matches the following 6 elements:
1. h3#p-personal-label
Hidden per `#p-personal h3`.
2. h3#p-namespaces-label
3. h3#p-views-label
Hidden per `div.vectorTabs h3`.
4. #p-search h3
Already has its own margin and padding that override
this override.
5. h3#p-variants-label
6. h3#p-cactions-label
Margin overriden by `div#mw-head div.vectorMenu h3`.
Moved padding there as well.
This last one is the one the styles were originally intended for,
because the tabs that the menus align with also don't have padding.
The other instances of an 'h3' within mw-head, however, were not
vector menus and even if they didn't have their own padding
already or weren't display-none, then it's unlikely they would
want to align with the unrelated vectorMenu styles, e.g. the
p-personal area is quite different and just happens to be in
the same parent element as an h3.
Change-Id: Id127ead7a50fcd64821442afd0e781f97756502f
* 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
As we can assume that extensions and gadgets need to involve removed
higher specificity this shouldn't have any influence on working code.
Also merging `list-style` values into one property.
Change-Id: I969a0d265e18a9e94bbd22a2982f8bdd9e6574bc
This was inherited from Monobook (r2881, b52a2a1567).
The #mw-panel (sidebar) was at `top: 160px`.
The #p-logo was at `top: -160px`.
This looks hacky so I set #mw-panel `top: 0`.
Bug: T170053
Change-Id: Ifb99ff36e3a9c530c944df2ea0a6c75759045c1c
We were adding a .first CSS class to the portlet from JavaScript
instead of just using a smarter selector, which caused the incorrectly
styled portlet to visibly flash sometimes.
This was only useful for IE 6 (even IE 7 supports the sibling selector
'+', which we can use here), and we don't serve JavaScript to it
anymore. It would be neater to use ':first-of-type', but that's not as
widely supported.
Bug: T89542
Change-Id: I1904b3899c43bca52a6c996b8ce08c8bdf764aa0
