Commit Graph

139 Commits

Author SHA1 Message Date
Volker E 9fc3d8d684 Remove IE 6 & 7 hasLayout hacks
Bug: T234582
Change-Id: I43b2feb6941769524dfe2c728dfb62f999d5f65b
2019-10-03 20:00:54 -07:00
Volker E 9bc73009cb Remove IE 6 & 7 specific star hack
Internet Explorer 6 & 7 support. Gone.

Bug: T234582
Change-Id: I0878fa73146596362c88a0c4cbfd6121440bbde3
2019-10-03 18:10:51 -07:00
Volker E a10382b144 Lighten up search input background slightly
Increasing contrast by ligthened search input background and moving
properties to search input alone.

Bug: T225331
Change-Id: If888d32b829b01b2457f3f5c727fb59a6219f940
2019-10-02 00:24:25 -07:00
Volker E 7446c28f79 Re-order `background*` properties to unify across files
Orienting on https://www.mediawiki.org/wiki/Topic:Tv3wddg7n9nz8ft8

Change-Id: I4504600fcc0c54f684eddde9c66cbc6b4d419846
2019-10-01 17:14:30 -07:00
jenkins-bot 60c59736da Merge "Replace raster image gradients with CSS where easily applicable" 2019-10-01 21:52:23 +00:00
Volker E 0e0d77fef3 Replace raster image gradients with CSS where easily applicable
Replace raster image gradients (before base64 embedded) for modern
browsers by CSS gradients. Only relying on conventional image URLs
in browsers that don't support linear-gradient.
Also
- adding a darkened border for inactive tabs to harmonize visual
  perception of border as one continuous line and
- DRYing tab separator selectors, saving ~8 bytes gzipped.

Bug: T63099
Bug: T121730
Change-Id: I76d32b84ddff06a2c7ef983e6f89ca6e74257a67
2019-10-01 14:24:07 -07:00
Volker E 5ed9bf8be6 Replace portal break image by SVG gradient
Replace raster image gradients (before base64 embedded) for modern
browsers by CSS gradients. Only relying on conventional image URLs
in browsers that don't support linear-gradient.
Also updating color to Wikimedia Design Style Guide color and
removing obsolete *-ltr/*-rtl images that have been introduced in
MW core 1.16.0beta1 but have been replaced by unified 'portal-break'
image afterwards.

Bug: T63099
Bug: T121730
Change-Id: Id0ab5eb7d4a5751316ce750aff2dffbda62f6b09
2019-10-01 19:39:34 +01:00
Volker E 0175a2be2e Remove unneeded portal background properties.
Have been in since before Idfc38503d8397ffe where 'portal-break.png'
was still applied on `div.portal` and not ever after on `.portal .body`.

Change-Id: Icbaed3f9d41a46a0f5d17266c29703024ffc1412
2019-09-30 19:09:38 -07:00
Volker E 7227e50b0a Simplify watch link selectors
Change-Id: I51b1f66900dbc4982156b5356783a69a7025ebe7
2019-09-30 14:05:31 -07:00
Volker E 190d9830ca Reduce specificity by using classes without element selector addition
That's not only good practice, it also allows to widely simplify
'watchstar.less' selectors.

Change-Id: Ic31452f985e99d60f6fc71473be7de08bdc16148
2019-09-30 00:36:32 -07:00
Volker E 1d7c3fac99 Remove unneeded selector
Has been added in 8db5779682, but there's no `span` as direct child
of the watchstar `a` (any more).

Change-Id: I989cfd0c1fe30a0b4821f79e1d9377b8d888c24b
2019-09-30 00:07:17 -07:00
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