Commit graph

95 commits

Author SHA1 Message Date
Bartosz Dziewoński f010a2d8b8 Use exactly calculated value to work around a Chrome bug
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
2018-06-26 21:18:34 +02:00
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
Volker E 0a0ddcc581 Align tabs and search input font-size
Bumping font-size slightly up from 12.8px to 13px and unify it on
Vector tabs and search input.

Change-Id: Ia2e2d623b19fba2566db36b9800102d52130af6b
2018-05-30 01:45:31 +00:00
Volker E 186db29808 Don't crop Burmese language headers
Burmese (Myanmar) language headers get cropped with currently applied
`line-height` setting. Resetting it fixes this.

Bug: T193270
Change-Id: I81c6c1ac9148c122432506be0c1b35f648214d6c
2018-05-24 13:01:05 +02:00
jenkins-bot 9ebc80ec76 Merge "Remove IE 6 specific code" 2018-05-24 00:39:12 +00:00
jenkins-bot e0502f027c Merge "Re-implement and improve mw-jump links with pure CSS" 2018-05-24 00:31:29 +00:00
Volker E 0f7a56e95c Remove IE 6 specific code
Removing further CSS for Internet Explorer 6.
Follow-up to I0f98c61cf9108c0a91769e9b7044023b01f974ed.

Change-Id: I85a7570c97f9b618a7946dc20367b54e72d31b3e
2018-05-24 02:17:30 +02: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 fff89b5352 Lower CSS selector specificity on Vector tabs and menu
Lowering selector specificity, higher specificity is unneeded here.

Change-Id: I36779db2d526e1496d2ddcb70ce86968e0d8ad39
2018-05-23 13:52:41 +02:00
Volker E 73eb37394d Remove special Vector tabs CSS for IE 6
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
2018-05-23 10:44:40 +02:00
Volker E 8e79fee078 Replace #toc selector by .toc
Replacing id CSS selector by lower specific class selector.

Bug: T187808
Depends-on: I7f3a9df7f9fd1178986112b5265b1ae7c991d5b7
Change-Id: If8768278750d49e70a29d993e759f246082fefb0
2018-03-29 00:40:36 +00:00
Volker E 4de3ad227f Lower CSS specificity of #footer rules
Change-Id: Id34ed322bde783a1aaaa843b78191dab2191b4d4
2018-03-17 13:11:37 -07: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
Bartosz Dziewoński 0ee8510ce7 Remove old selectors and JavaScript for dropdown menus
Bug: T168080
Change-Id: I49006314d42a00818464a94412cb63190b59a99b
2018-03-12 23:34:32 +00:00
Bartosz Dziewoński d82e4db35e Make dropdown menus keyboard-accessible without JavaScript
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
2018-01-03 21:58:51 +00:00
Fomafix fb79cd46b3 Restore indicator for menuForceShow of tab menus
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
2017-11-19 19:34:15 +01:00
jenkins-bot 4e990c081f Merge "Use mw-parser-output for content styles, instead of mw-body-content" 2017-11-13 12:44:04 +00:00
Bartosz Dziewoński e4b05ae836 Revert "Fix reversed nav elements when viewing cached HTML"
No longer needed for Wikimedia wikis after the HTML caches expired.
This reverts commit e951a09913.

Change-Id: I5eda153e3368f6a7f9d2f88e336e02b65d01f2b5
2017-11-10 19:17:57 +01:00
Ed Sanders f582645407 Use mw-parser-output for content styles, instead of mw-body-content
Change-Id: Idf0f5f12724d6ce7558102cd4eedc4004e045054
2017-11-10 15:48:18 +00:00
Bartosz Dziewoński ff2f37bc7c Use 'color' to change lightness of "More" menu label rather than 'opacity'
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
2017-11-07 23:37:46 +01:00
Volker E 29c515ae3f Align VectorMenu items and unify padding with tabs
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
2017-11-07 20:46:33 +00:00
Volker E e2c9a585e4 Bring menu tab appearance closer to standard widgets
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
2017-10-19 23:24:15 +00:00
Volker E 0d95e5b6cd simpleSearch: Reduce selector specificity & clean up
Reducing selector specificity and cleaning up CSS as in reducing
properties and putting main colors on top of selectors.

Change-Id: I91959f07404382fcc143607ab4cd5cf0c9aed13e
2017-10-09 17:44:34 -07:00
Volker E 7060ec573f Align simpleSearch border with inputs elsewhere
Aligning
- `border-color`
- `:hover` `border-color`
- `border-radius`
and introducing `transition` to be on par with inputs elsewhere.

Bug: T177808
Change-Id: I41c2719c13935d07f4310c0c752bdfc7377d8670
2017-10-09 17:36:59 -07:00
jenkins-bot f30141fdc3 Merge "Remove fallback color from tabs" 2017-10-09 16:17:46 +00:00
Volker E c163acbdc7 Replace footer text color with WikimediaUI color palette one
Very subtle change from `#333` to tad higher contrast `#222`.

Bug: T153043
Change-Id: I705d03f9c79eafd4569e8ed321939d1044245f59
2017-10-07 20:47:10 -07:00
Volker E 84d1510a38 Remove fallback color from tabs
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
2017-10-07 18:13:19 -07:00
Bartosz Dziewoński 8db5779682 Do not use icon for "Watch" link when it is inside the "More" dropdown
Bug: T177106
Change-Id: Ia50817afe6395d8a52567599d23a232d6f07c0ce
2017-10-01 20:12:11 +02:00
jenkins-bot e56077fc0b Merge "Remove some unnecessary direction-specific CSS" 2017-09-28 14:05:30 +00:00
Bartosz Dziewoński 6b6c6ba762 Remove some unnecessary direction-specific CSS
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
2017-09-28 13:22:53 +00:00
Bartosz Dziewoński ee0cfe1833 Remove stray unnecessary @noflip
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
2017-09-28 04:23:07 +02:00
Bartosz Dziewoński e951a09913 Fix reversed nav elements when viewing cached HTML
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
2017-09-28 04:23:01 +02:00
Rammanoj 5d0a07bf9d Vector: Flip horizontal nav elements with CSS
Flip horizontal nav elements with CSS prperties in RTL(right-to-left) mode

Bug: T48947
Change-Id: I30a5837f84bcdeab205760644bfa40b12cefbece
2017-09-26 10:30:11 -05:00
Mukunda Modell e70a1d38b9 Consolidate duplicate CSS properties
I really should not have merged I30e0642d3cb93c4d9a8b2bdfb7f04912d8ca8649
without getting this fixed first.

Bug: T56919
Change-Id: I870591e63b89f05d7e3714081340c76dcf9f55ac
2017-09-22 21:06:28 +00:00
jenkins-bot 765a143a60 Merge "Tabs (Read / View Source / Search) collapsed under more in resolution < 700px" 2017-09-21 20:21:01 +00:00
Rammanoj f74002b727 Tabs (Read / View Source / Search) collapsed under more in resolution < 700px
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
2017-09-21 20:03:39 +00:00
Bartosz Dziewoński 206efa4c96 Make dropdown menus appear above VisualEditor toolbar
Bug: T171840
Change-Id: I36dc747ec2c41816df371aa5e1d4b81dff24a7dd
2017-08-03 01:27:05 +02:00
Volker E 7a42af066b Remove irritating transition on menu tabs
Removing irritating dropdown arrow position transition
on menu tabs. It is the only place we're using this and it seems obscure
and not helpful to the users from UI Standardization point of view.

Bug: T68698
Change-Id: I8d30108b86b47358349de2ea424c0ba7f67ee7e2
2017-07-20 21:20:59 +00:00
golopot 3f19c24696 Fix misaligned menu tabs
Ensure vertical alignment of menu tabs (for example “More” button) 
with link-only tabs by setting:

* `padding-top: 1.25em;` as on `div.vectorTabs span a`
* `line-height: 1.125em;` as on `div.vectorTabs ul li`

Bug: T171142
Change-Id: Ic4ef86589c6c3d442035f3d768cb9036e1ecc237
2017-07-20 14:14:15 +00: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
Fomafix 56ec1a3c87 Remove <div> inside of the <h3>
The <div> was introduced in aba11a7b but this is not valid in HTML 5.

This change ommits the <div> and attaches the background image to the
existing <span>.

Cached HTML with the <div></div> does not matter for the result.

Bug: T169551
Change-Id: I04f7032b6f6bafe10548fde690f55de66b56f61f
2017-07-12 06:21:51 +02:00
jenkins-bot 40699a9a28 Merge "Remove unused selectors for action menu" 2017-07-11 23:45:36 +00:00
Fomafix 5c363643a7 Remove unused selectors for action menu
This change is a follow-up to aba11a7b1c.
Do not deploy this change until HTML cache from before aba11a7b1c expired.

Change-Id: I631260d58229b1b70e2d4e55f8302f9769de3511
2017-07-11 02:59:14 +00: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
jenkins-bot c3f5aea44b Merge "Use <div> instead of <a> for action menu" 2017-06-21 21:50:52 +00:00
Jack Phoenix d575e3878a Optimization: move styles specific to redirect pages out of common.less
HT MatmaRex

Change-Id: I6169692547378379dbc935976ad83cf4f366eeeb
2017-06-15 16:13:42 +03:00
Fomafix aba11a7b1c Use <div> instead of <a> for action menu
This change prevents that a middle click opens a new tab with the URL "#" and
prevents a wired outline around the button when selected of focused in Chrome.

The selector "> a" will be removed in a separate change which must get
deployed not before the HTML cache has expired.

Bug: T44241
Bug: T68388
Change-Id: I7255552d3bdec9e40727721b91630623ae24a08b
2017-06-06 08:02:49 +02:00
Arlo Breault dcd01fc1e2 Separate some shared layout with Parsoid
* This is in service of T116508.  See
   Id41c1d2840f441eddb14ca66ba545ee7b160088e where .mw-body is being
   removed from Parsoid content.

 * This is only possible since T155863

Change-Id: I60e3cb3e838fa19d321c4eac0a6828bcfddb6f3e
2017-04-17 14:14:36 -04: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 d183c39d06 Allow edit sections outside of mw-body-content
Bug: T160269
Change-Id: Ib4830cde634b6ca0c3ceb0ba06831c3b4ccedfbd
2017-03-12 11:14:37 +00:00