Commit graph

9 commits

Author SHA1 Message Date
Timo Tijhof feca6b276b Remove unused margin/padding override for '#mw-head h3'
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
2018-05-31 10:23:30 +00:00
Timo Tijhof b843094a2d 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-24 00:08:02 +00:00
Volker E ceeee2d3d0 Remove IE6 workaround and reduce selector specificity
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
2018-03-14 21:32:10 -07:00
golopot ffc0837bf3 Remove position: absolute from #p-logo element
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
2017-07-13 16:28:08 +08:00
Ed Sanders b85dd78e0f Use same left margin (0.5em/8px) for all sidebar items
Bug: T168598
Change-Id: Ice96ba4b7d0af3312baff69a6bb4c34e6e12c205
2017-06-22 12:08:54 -07:00
Rammanoj 7631b496c0 Proper indentation applied to horizontal links in the vector skin
Bug: T67444
Change-Id: I5dc48995583a0e0bd3d8bee6e698effecc4d3f7f
2017-03-29 17:21:40 +00:00
Ed Sanders f7d8d036ac build: stylelint more files
Change-Id: If62fa6ff9810de253b65feb1f7e312d22e33bfa8
2017-01-23 15:04:05 +00:00
Bartosz Dziewoński 16e16eb075 Don't use JavaScript to style first sidebar portlet
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
2015-02-15 00:43:55 +00:00
Bartosz Dziewoński d28f09df31 Move Vector skin from core
This is the final step of the process described at
<https://www.mediawiki.org/wiki/Separating_skins_from_core_MediaWiki>.

Corresponding core change: Idfc38503.

Change-Id: I84fcf7ce6385b8323544cafe6912a00f1886d20d
2014-08-07 13:38:34 +02:00