Commit graph

128 commits

Author SHA1 Message Date
Volker E e3f9cdcf70 Variablize all color property values
Also going with `--modifier` naming scheme when direct pseudo-class
modifying variable. And fixing small typo.

Change-Id: Ife2f9dc9cb57c063a43e4b3dfad3c737aaf3b72b
2019-09-29 23:36:58 -07:00
Volker E 2b0a28cdcb Unify on variables and file names on 'navigation'
Navigation is the appropriate, general term – settling on it and
unifying file name and common abbreviation 'nav' for variable names.

Change-Id: I237b56320544de15e3b97c4806f6e2387bc54ca0
2019-09-29 13:27:15 -07:00
Volker E daa3611bce Unify LESS variable naming scheme for remaining @color-* variable
Unifying remaining navigation variable.

Change-Id: I9ff7f1d33e06d175c6e2fdd1ec5b58306d63e737
2019-09-28 01:16:24 -07:00
Volker E f29a1eba0a Unify LESS variable naming scheme for @border-* variables
Unifying variable naming to property-identifier-modifier scheme and
use already existing variables out of mediawiki.ui variables file,
which gets imported by Vector and its variables (like
`@border-width-base`) are already in use in a few places.

Change-Id: Ic25b1517bf180a9bce437215c1309bb9f4dd15be
2019-09-28 00:35:16 -07:00
Volker E 62560debb9 Unify LESS variable naming scheme for @margin-*/@padding-* variables
Unifying variable naming to property-identifier-modifier scheme.
Also removing `@padding` variable with only one single usage, instead of
extracting it from its place of application enable simpler readability.

Change-Id: I602fe645b233000bcecaeee6cf19d20e49a64c78
2019-09-27 23:24:34 -07:00
Volker E 0a2aa9f683 Unify heading font size variable naming
Follow-up to I378e8a2af91fe079

Change-Id: Ib1affae440f23e7d9b648ce4b8b85cf2d3a2e1d2
2019-09-27 22:45:01 -07:00
Volker E 83fbe68b5f Unify LESS variable naming scheme for @line-height-* variables
Unifying variable naming to property-identifier-modifier scheme.
Settling on non-em-based `line-height` values with one exception
of Vector tabs, where removing `em` would lead to different
calculation.
Also removing unneeded `inherit` assignment on content paragraphs
that has been part since Ic5ba836364.

Bug: T4013
Change-Id: I514467e4065d27de8d0ea82cdd3d23ccef6cffe3
2019-09-27 21:41:23 -07:00
Timo Tijhof 9cf7901ec9 Remove @embed page load delays (and misc optimisations)
* page-fade:
  Remove redundant 'background-image' PNG fallback for
  IE6-8 in '#mw-page-base' because the vertical-gradient() already
  creates a solid fallback color which seems good enough for IE6-8.

  Remove the 'background-color' rule which was only there to fill
  the gap above the the IE6-8 PNG image fallback, which in turn
  overrode the background-color rule from vertical-gradient.
  The background-repeat rule is also redundant with background-image
  gone.

* watch-icon-loading:
  This is only used when the JS code is active and the user
  clicks the watch star. It does not need a PNG fallback, as it
  is only needed in Grade A browsers where the JS executes,
  which are expected to support SVG.
  Also removed the embedding as the rendering of article text
  on page load should not be delayed by an icon that might
  be used if and when the user clicks on the watchstar (and
  irrelevant to logged-out users).

Bug: T121730
Change-Id: Ief4b80432fbe2ce7ebddf429f02c161048ed61d1
2019-09-27 18:03:25 +01:00
Volker E 9055676640 Unify LESS variable naming scheme for @font-size-* variables
Unifying variable naming to property-identifier-modifier scheme, while
also collecting all non-print values variables in corresponding file.
We will amend the `em` based values to calculations that will enable
rendered full pixel values and also fix some connected
usability issues in the future.

Change-Id: I378e8a2af91fe0790708e6fb2d2e7a5718ce93c5
2019-09-26 18:53:00 -07:00
Volker E 258fdde8bf Update LESS variable naming scheme for @font-family* variables
Reyling only on base font family variables. It's debatable if
something like `@font-family-base` would make sense, but with only
3 variables the abstraction would seem over-engineered for the time being.

Change-Id: I294ef8753dd3c73f4ed3fd89d43978dfaf6e0f06
2019-09-26 15:54:46 -07:00
Volker E 66aaf36bf6 Align LESS color variables to naming scheme, combine and cleanup
Merging similar value applications in generalized variables,
and aligning to property-identifier-modifier scheme.

Change-Id: I274ef24140a36e285c67b33a41ab6afe7c98676b
2019-09-26 15:39:25 -07:00
jenkins-bot dca6da5767 Merge "Increase distance of button to container" 2019-09-26 22:12:09 +00:00
Volker E 484077de01 Increase distance of button to container
Increasing the distance of the button slightly changes the position
from end, putting the icon in a more appropriate place (harmonized
whitespace of input value and icon).
Also simplifying `font-size` calculations readability and equalling
their values in search input and button.

Bug: T225331
Change-Id: I57f7efc61f3b770d7470d820402e2ea533364238
2019-09-26 12:15:38 -07:00
jenkins-bot 0f4c3f1197 Merge "Reduce footer selector specificity and clean up CSS" 2019-09-20 22:40:57 +00:00
Volker E 606365367f Reduce footer selector specificity and clean up CSS
Reducing specificity, simplifying output and merging `padding`
in one place into one shorthand attribute.

Change-Id: Ida96f18e9d90d55492ea114a7b5e3e1b8020c71f
2019-09-18 22:37:22 -07:00
Volker E b11b5d44f9 Remove obsolete .vectorMenu ul selector
Has been made obsolete in I8e45af51ffc.

Change-Id: I23c69b5615199899be9bc16ba012ed21e920f317
2019-09-18 15:37:36 -07:00
Volker E f4e6acb206 Remove falesly introduced RTL version of 'search' icon
It's not useful to mirror it for RTL languages, as it's a real world
object metaphor and is held in right hand for most users, no matter
what language. Sorry, left-hand users. Unify with Design Style Guide
search icon treatment.

Bug: T228435
Change-Id: I9ff688e4be801779a84b1026ca57cfb50209b53d
2019-07-18 11:22:31 -07:00
jenkins-bot 7d46396dc1 Merge "Move DataAfterContent outside of main content block" 2019-07-08 21:18:34 +00:00
Volker E 0c77e4f223 SimpleSearch: Standardize input appearance
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
2019-07-02 00:18:47 +00:00
Isarra 411a015ec5 Move DataAfterContent outside of main content block
Bug: T226199
Change-Id: Ie04d8d2bb1d44ec8a1c03fcc6f807668bab0377c
2019-06-20 17:55:55 +00:00
Volker E 835bfa785f Update list bullet icon
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
2019-04-07 23:08:38 -07:00
Volker E ec6b201456 Remove re-definition of default list-style-type value
Bug: T220317
Change-Id: I5bc0668011ee0ae553391888de35208acb8105b3
2019-04-07 17:42:39 -07:00
jenkins-bot b4355e039f Merge "Use opacity for a WikimediaUI aligned transition on opening menu" 2019-01-10 07:04:38 +00:00
Volker E 0e089a0d4c build: Update 'stylelint-config-wikimedia' and make pass
Change-Id: I147ea18307c58c5091c5ad79585b5acec9d46235
2018-12-02 14:40:28 -08:00
Volker E 85cce3dcaa Use opacity for a WikimediaUI aligned transition on opening menu
Replacing `display` with `visibility` and add a transition to
overflow menu.

Change-Id: Iaef15dcd342c15410c56e00988f130056fe269e2
2018-11-26 20:08:53 -08:00
Volker E d0360d0b04 Vector menu: Simplify and cleanup LESS structure
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
2018-11-26 10:21:42 -08:00
Volker E da6d4eb280 Remove unnecessary div wrapper on overflow menu
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
2018-11-14 20:41:08 -08:00
Volker E 6c3e0b62f2 Use list-style shorthand with x-browser compatible values
Change-Id: I6e47cb2dc406b9cfa3e2ca9b63f8cecce7c59ce1
2018-10-15 19:13:07 -07:00
Volker E f42faabb49 Bring personal tools' icons on baseline with label
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
2018-10-15 19:02:18 -07:00
Volker E 6c924b9475 Replace anon user message color to standard palette
Replacing anon user message color and align with newly
changed user avatar icon.

Change-Id: Iac8ad86221f48c49be90ab001cd080b8b0460a24
2018-10-09 13:58:51 -07:00
Volker E 7cbccd37a6 Update user avatar icon
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
2018-10-09 12:39:35 -07:00
Volker E 2476fe7775 Improve keyboard focus outline appearance
Change-Id: Iaa141bbd434acbe501a08a09b4eaba7084a6bea7
2018-09-06 23:06:16 +00:00
Timo Tijhof 8795cee025 Remove min-width/-moz-any-link hack for vectorMenu in old Firefox
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
2018-09-04 03:47:25 +01:00
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