Unifying Vector input appearance to follow Design Style Guide and OOUI,
additionally:
- Simplifying LESS code, reducing specificity to minimum needed
- Providing fallbacks where necessary to a wide range of browsers including IE8
- Better positioning and larger click area of search button
Bug: T225331
Change-Id: Iafeddf670a9c087e66acf5463c99351fc2d5d78c
Removing IE 6-8 fallback treatment and only provide SVG as
`list-style-image`. Also updating SVG fill color to use
text color.
Bug: T220327
Bug: T220328
Change-Id: I50ed85e420d6158e9ace5d879b6cf218a6a591b9
Grouping related things, nest selectors in LESS way for easier
readability.
Placing `.vectorTabs li` & `.vectorMenuCheckbox` styles mostly
in its own nested selector to lower specificity.
Change-Id: I8e45af51ffcec618d585a54417e6a7cc3a9b82ad
Unordered lists can be absolute positioned down to IE 7.
Outdated selector `.vectorMenu ul` remains for a release cycle
until HTML cache is renewed.
Bug: T209558
Change-Id: Id18ca9a8d705572b1f7e17920ef52b80e9aec373
Put icons on baseline as good as possible cross-browser. It's
complete waste of time trying. And is partly originated
in different internal text node sizing in various browsers,
biggest browser share difference is Chrome/Yandex/Safari 5 on Windows
against all others. Partly it's a result of us relying on `sans-serif`
generic font family instead of `Arial` – it results in different letter
baseline position within font's virtual letter box, which eats my limited
time on Planet Earth uselessly away.
Also adding and renaming LESS variable for proper code style.
Bug: T207075
Change-Id: I92acb9851a3c0acdbc40a4a4528a91c7332c9293
Updating user avatar icon to overhauled standard WikimediaUI icon.
Also:
- change `line-height` of personal menu to `14px` for better positioning
and introducing corresponding LESS variables
- slightly increase user avatar icon to be on par with ULS one
- putting avatar icon within link on active user, an awful user experience
that has long bugged me.
Bug: T123810
Change-Id: Iabde041090a87968b5f82e36fd81419083f80984
I've tested as far back as Firefox 3.6 on Windows XP and
Firefox 16 on Windows 8 (localhost tunnel via BrowserStack), and
could not find any rendering issue with the menu.
For Firefox 3.6 it is Grade C without JavaScript, so the menu
only appears when logged-in (e.g. as admin) where it contains
Delete, Protect, and Move.
For Firefox 16 it is Grad A with JavaScript, and the menu can
also can be seen by narrowing the browser window when logged-out
until the History tab turns into a menu.
In both cases, the menu rendered without issue both with
and without these two rules.
Change-Id: I4946b115595424fdcf74429b237e0c2ee5715fc3
Height of 3.1em calculates to 40.3px here, which is larger than the
parent element's height of 40px, apparently causing the background-image
to disappear after the rotation animation is removed.
Bug: T196610
Change-Id: I1458be6408699723977ccb589ed8d760f4ac7941
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
Burmese (Myanmar) language headers get cropped with currently applied
`line-height` setting. Resetting it fixes this.
Bug: T193270
Change-Id: I81c6c1ac9148c122432506be0c1b35f648214d6c
Removing further CSS for Internet Explorer 6.
Follow-up to I0f98c61cf9108c0a91769e9b7044023b01f974ed.
Change-Id: I85a7570c97f9b618a7946dc20367b54e72d31b3e
* 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
Removing special CSS for Internet Explorer 6.
It's mid 2018 and users will still be able to read
the content if they have to.
Change-Id: I0f98c61cf9108c0a91769e9b7044023b01f974ed
Replacing id CSS selector by lower specific class selector.
Bug: T187808
Depends-on: I7f3a9df7f9fd1178986112b5265b1ae7c991d5b7
Change-Id: If8768278750d49e70a29d993e759f246082fefb0
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
Instead of implementing keyboard (and mouse click) handling in
JavaScript, put an invisible <input type="checkbox"> into the
dropdown handle. It can be focused and toggled using keyboard
actions like a normal checkbox. This checkbox also takes over
the duties of handling mouse hovering and clicking.
Old JavaScript and CSS are left in place for compatibility with
cached page HTML, to be removed later in a follow-up.
Bug: T168080
Change-Id: I27532140b06c97921f1cfb64e44bff814d99a358
The previous indicator was removed in 7a42af066b because of a position
transition. The new indicator has no animation.
An indicator is useful to distinguish between the hover and the click
actions.
Change-Id: Icf765d4985aea36e4f4f6653e769aafaf3c30d07
No longer needed for Wikimedia wikis after the HTML caches expired.
This reverts commit e951a09913.
Change-Id: I5eda153e3368f6a7f9d2f88e336e02b65d01f2b5
Changing 'opacity' from 1 to other values can cause the browser to use
a different text rendering method, producing unpleasant effects.
We still have to use 'opacity' to change the lightness of the arrow
icon, so move it into an :after pseudoelement.
Bug: T179988
Change-Id: I19c5eafb9ab7e652f2661144abc1e03b381f5ff4
Aligning VectorMenu items horizontally with menu handle and
set `padding` consistently to `8px` – taking into account
different `font-size`.
Also removing unnecessary duplication of `margin-top` as `margin`
is set in same rule.
Bug: T179782
Change-Id: I30e9b4e50589ef09a0e5dcb0e6c4486e7779a39d
Bringing appearance and behaviour closer to standard widget like
DropdownWidget:
- Amending color to be (closest) aligned to WikimediaUI color
palette, but switch normal and `:hover`/`:focus` state in order not
to be too disruptive of a change and align with rest of Vector tabs,
- removing obsolete JS functionality as IE 6 as only major browser
affected does receive the menu items as tabs nonetheless and replacing
with simple CSS selector,
- removing unnecessary and obsolete images and
- Lessifying selector
Bug: T153043
Change-Id: Ia15480162bb8f923d0e9b6e42ca90c2c880978de
Reducing selector specificity and cleaning up CSS as in reducing
properties and putting main colors on top of selectors.
Change-Id: I91959f07404382fcc143607ab4cd5cf0c9aed13e
Aligning
- `border-color`
- `:hover` `border-color`
- `border-radius`
and introducing `transition` to be on par with inputs elsewhere.
Bug: T177808
Change-Id: I41c2719c13935d07f4310c0c752bdfc7377d8670
Removing fallback color from Vector tabs, that isn't part of
WikimediaUI color palette and isn't needed at all resulting
in a worse than necessary appearance.
Bug: T153043
Bug: T168420
Change-Id: Ia9790435dd3ec4df47b70d1a007fca7af79686c9
Both of these survived across many rewrites, I tracked down the
original commits that added them:
* footer.less: Added in 6d5dca5a899d45512c1031c4235f26cc755b933b in
MediaWiki core (rSVN62030) as a workaround for "weirdness" in IE 7.
Users of IE 7 experience much worse weirdnesses when viewing pages
these days.
* tabs.less: Added in 299d1f328c2ad1475c8a1ac19b4fa07fc087d239 in
MediaWiki core (rSVN53247) under a generic label of "RTL fixes".
After change 5d0a07bf9d this is
actually a no-op.
Change-Id: Iac3d2a26438226a3e23e067780c4b2810ac4903f
Follow-up to 5d0a07bf9d.
As it happens, it actually doesn't matter whether this
element has 'float: left' or 'float: right', the
rendering is exactly the same. Let's remove the @noflip
for consistency with .vectorTabs, .vectorMenu etc.
Change-Id: I167c5f6cab7fb85344a558b632b38cbca85fa37c
Follow-up to 5d0a07bf9d.
See T48947#3641618 for a detailed explanation of the
problem this is fixing. Essentially, our CSS has to be
compatible with both new and old HTML to avoid problems
with cached pages on Wikimedia wikis. To do this, we
add a CSS class to the body and make the new CSS only
apply on pages that have this class. This patch should
be reverted when the caches expire.
Bug: T48947
Change-Id: Icf26e6690b59f470765b2634534d18d2df25ee2a
I really should not have merged I30e0642d3cb93c4d9a8b2bdfb7f04912d8ca8649
without getting this fixed first.
Bug: T56919
Change-Id: I870591e63b89f05d7e3714081340c76dcf9f55ac
tabs such as read/view source are collapsed into more in screens
whose resolution is less than 700 px so that they don't wrap to
the next line and cover the content of the page
Bug: T56919
Change-Id: I30e0642d3cb93c4d9a8b2bdfb7f04912d8ca8649
