Commit graph

220 commits

Author SHA1 Message Date
Volker E 7f6f792a3a styles: Replace 'mediawiki.ui/variables' call with skin variables
Replacing 'mediawiki.ui/variables.less' `@import`
with new skin-aware 'mediawiki.skin.variables.less' standard.
Also replacing and removing scattered WikimediaUI Base v0.15.0 variables
with new skin variables.

Also
- replacing several static values with new Codex design tokens featuring
  skin variables for following properties:
  - background-color
  - color
  - border-width, border-style, border-color and border shorthand
  - border-radius
  - box-shadow colors
  - outline-width, outline-style, outline-color and outline shorthand
  - opacity
- replacing equal-value Echo variables with new skin variables
- replacing `opacity: 0` with `opacity: 1px solid transparent`, which
  improves accessibility in Windows High Contrast mode

Bump required MediaWiki core version to >= v1.41.0.

Bug: T332541
Co-Authored-by: Volker E. <volker.e@wikimedia.org>
Depends-On: I04f9e48a1cf9dee915cf51e1e12b17ff0a595a06
Change-Id: If3863f07d7c3a8b58808fb03401c1060a92bc2ab
2023-04-04 01:26:11 -07:00
Umherirrender 03d44330a6 stylelint: Enable selector-pseudo-element-colon-notation
Via stylelint --fix

Change-Id: I14b992b0313f093325c9c6f5109bae9ce26ebc2c
2023-03-30 00:24:47 +02:00
Umherirrender 213f65e19d build: Remove unneeded inline stylelint-disable-next-line
modules/styles/mw.echo.ui.MenuItemWidget.less
 4:1  ✖  Needless disable for "no-descending-specificity"
--report-needless-disables

Change-Id: Ib8467edcd4cfb8f2a11b11872bddeecfdc9e5b04
2023-03-22 21:47:03 +01:00
jenkins-bot a85ab8b7e8 Merge "Fix opacity of focus styles" 2023-02-06 23:42:54 +00:00
jenkins-bot 1d7657f130 Merge "Improve focus styles" 2023-02-06 23:41:39 +00:00
jenkins-bot b037094122 Merge "Avoid hardcoded width for the popup's footer buttons" 2023-02-06 17:50:03 +00:00
Bartosz Dziewoński ed76ff596f Avoid hardcoded width for the popup's footer buttons
Hardcoded width interferes with OOUI's attempts to make the popup
narrower on narrow screens.

Minerva low resolution styles are now applied to all skins at
mobile/tablet breakpoints

Bug: T287132
Change-Id: Ifffe8c6330385356d35b7950ce9803f3a9f01b6f
2023-02-03 11:58:35 -08:00
Volker E 608b4e7266 styles: Replace deprecated Less mixins with CSS unprefixed property
Also remove obsolete vendor prefixes.

Bug: T306486
Bug: T308351
Change-Id: Ie63d2b9d4c9883c2106b74daa03c6c244b32cc78
2023-02-02 14:26:12 -08:00
Ed Sanders 5289d1e8f2 Fix opacity of focus styles
Ensure buttons have full opacity when focused, as when hovered.

Change-Id: Id16e9e3691b7d9b0ebb03ac78bbe86c80568a00b
2023-02-02 17:06:55 +00:00
Ed Sanders 6b0268a758 Improve focus styles
Ensure there is always a 2px outline, and have that
outline cover the outer border where possible.

Change-Id: I3667d01e112f40663bc370ecd5bd6c3bb71ed219
2023-02-02 16:56:25 +00:00
Volker E 2abf220e58 styles: Remove IE 8-9 special way
`background-color: transparent` is the way to go.

Change-Id: I34598d0e543cda3dd711fca88986a663a3a7519b
2022-09-15 19:20:33 -07:00
jenkins-bot f6f1968429 Merge "Echo mobile: add CSS media query class - bug fix" 2022-08-25 15:07:02 +00:00
Bartosz Dziewoński 84843d3619 Standardize dynamic action notification styling
* Remove custom light grey color on the body, on mobile the
  notifications are shown on dark grey background, making them
  unreadable
* Remove increased font size for the title, it looks weird,
  particularly on mobile

Change-Id: I08651d2eab19904c19072f186cd2a96fb44e93ec
2022-08-23 23:42:48 +02:00
essexigyan 0659331111 Echo mobile: add CSS media query class - bug fix
Bug: T280839
Change-Id: Id2b26aab650fbb48c9fe8310e96dae12b354849e
2022-08-17 00:33:47 +00:00
suecarmol f83acdf5d3 Echo mobile: add CSS media query class
Added a new media query to fix an error in the Special:Notification preferences button.

Bug: T280839
Change-Id: I1a4cdc9111c6ada3c79f6ec1f1fa2e40dc240238
2022-07-20 17:51:03 -05:00
Ed Sanders 2af0c6d816 build: Update stylelint-config-wikimedia to 0.13.0
Change-Id: I60f34cb3c3c5c12cf1f9f38426a56c76dcf063fd
2022-05-09 14:05:59 +01:00
Volker E fe766f04ea Replace deprecated Less .box-sizing() mixin with standard CSS
Also remove 'mediawiki.mixins' includes where unused.

Bug: T306488
Change-Id: Ia9a5a1ce1e47c1de2c2197885237f9355f9cc4f2
2022-04-20 17:14:37 +00:00
Sergio Gimeno c815bc64e4 Prevent welcome message partially truncated
Bug: T291100
Change-Id: Ia7d349bd81b45c99eb421b8e69ccdadb3135a67f
2022-01-24 21:44:47 +01:00
Kosta Harlan d21f8d2bb7 Remove uses of .box-shadow() mixin
The .box-shadow() LESS mixin is now obsolete as box-shadow is supported
without any vendor prefix fallbacks, and planned to be removed by the
next MediaWiki release.

Bug: T283352
Change-Id: I3a4f5299b1d6b12e4dbfa68864613f5923957607
2021-09-03 19:21:39 +00:00
jdlrobson 088697a73d Echo notification oo-ui-popupWidget-anchor should point to icon
In Vector, these rules result in the anchor pointing to the wrong
place. They seem to be improve things in Minerva, so these are restricted
to that skin.

Bug: T276566
Change-Id: If871ab59fea519b48568781ffd9ddf6640006385
2021-06-23 08:47:09 -07:00
Ed Sanders 2bbae62aa3 Set icon size in bundle to exactly 20x20
1.5em would render as 21px in Vector and 19.05px in monobook.

Bug: T276114
Change-Id: Ie31f83e849ae5a4b17f28dfe6ccabc8a2005c919
2021-03-03 23:19:44 +00:00
Ed Sanders 7170698d68 Remove padding from popup heading
Fixes regression from OOUI update.

Change-Id: I0f2cca3417a2217f350032b8aed2f517e8ed35b7
2020-12-08 22:05:08 +00:00
arttsymbar 355e171eaa Notification: add skin specific(WikimediaApiPortal) z-index for menu overlay
Bug: T259735
Change-Id: Ib46d77a7d78107282b14e84bedb545886ba182e8
2020-09-07 11:30:26 +03:00
Thiemo Kreuz a5d35141f4 Fix notification popup header always showing a scrollbar
This issue was introduced in patch I41ad96b (T190397). The head
element is set to 44px height. However, the box-sizing is set
to border-box, which means these 44px include the 1px border at
the bottom. This leaves only 43px inside the head. The label is
meant to fit in there. Since the previous 44px don't fit, there
was always a scrollbar.

This could as well be fixed by changing the head to 45px.
However, this would make it different from the footer. I
believe both should have the same size for consistency.

Bug: T190397
Change-Id: Id0946d872a99fb8a1fbb33e6365fd78cd22eddd3
2020-08-10 14:59:06 +00:00
jenkins-bot 6eee04f614 Merge "Fix layout of action buttons use display:flex" 2020-08-04 05:17:04 +00:00
Ed Sanders ee65e8b426 Remove text decoration on whole item widget when focused
Change-Id: I910b4cf3ef5503a4e38195cd588f327870e87d5e
2020-08-03 15:14:36 +01:00
Ed Sanders 5161a2c40e Fix layout of action buttons use display:flex
Bug: T258990
Change-Id: If0ece6e7ff6fef9abfcd4996a9158e86a5ffece0
2020-07-29 14:13:02 +01:00
Ed Sanders 6492fc380d Fix width of buttons-as-option-widgets
Change-Id: I7001815850a829a07c941e94548ea5a65d2fd1d5
2020-07-28 09:51:20 +00:00
Ed Sanders d43ceb8978 Merge in styles from Minerva
Drops some no-JS styles (.mw-echo-notification) which didn't do anything useful.

Bug: T258936
Change-Id: I72bedc3c3d633e8898c93d5e7d570b8ee7b6a1ff
2020-07-27 23:19:51 +00:00
Ed Sanders eb0603c9af Fix layout of NotificationsInboxWidget on narrow screens
Bug: T258939
Change-Id: I17b968297baf630b71e832f6af0b0b534c9c08b4
2020-07-27 16:11:38 +01:00
Ed Sanders bc5b569719 Fix styling of action popup menu
* Fix icon position
* Fix border widths and colour

Change-Id: I06f45baa4c90e43d7e50eed83888d57ede69a517
2020-07-27 16:11:03 +01:00
Ed Sanders d22ca3b44c Fix popup font size in Minerva
Bug: T258937
Change-Id: I91ff2c49cfa7aa0805d7e0444c87599226c79291
2020-07-27 12:56:24 +01:00
jenkins-bot 34b8f1050e Merge "Follow-up I1ed9d3860: Fix ToggleReadCircle in monobook" 2020-07-25 18:08:15 +00:00
jenkins-bot 833fcdfd1e Merge "Fix font size in monobook" 2020-07-25 00:00:11 +00:00
jenkins-bot 407e55dd00 Merge "Remove padding reset from markAllReadButton" 2020-07-24 23:59:51 +00:00
Ed Sanders 34c70f8501 Follow-up I1ed9d3860: Fix ToggleReadCircle in monobook
Dummy icon is not position absolute in monobook, so hide it.

Change-Id: I24edfbc1afcb81da8ef4db6bb685792ee56bc49a
2020-07-24 23:31:45 +00:00
Ed Sanders 5b216bfad3 Fix font size in monobook
Content font size should be 12.7px and this can be achieved
by just applying the 127% from globalWrapper.

This matches the font sizes on Special:Notifications.

Change-Id: I5369231da52343029ea2cdbfc790296c2257807a
2020-07-24 23:31:35 +00:00
Ed Sanders 3ead305c27 Remove padding reset from markAllReadButton
Buttons should be positioned with margin, not padding,
as changing padding breaks hover and focus states.

In this case the position is already fine without
additional adjustment.

Change-Id: I8a7726b2e0988117084a1d0b060b4f649ba4cc75
2020-07-24 23:31:00 +00:00
Ed Sanders 2faa1fe512 Fix hover styles, remove link underline on special page
Change-Id: Ie144eed5295a8c8fa6239c28f7f2a15d493fd775
2020-07-24 20:34:43 +01:00
Ed Sanders ec87876f59 Set min-width on action buttons
Bug: T130109
Change-Id: I0a763aa7d73a84854daf43696d5751c58b3d067d
2020-07-23 18:19:34 +01:00
Ed Sanders e91e0c410b Simplify styling of notification bundles
Bug: T258714
Change-Id: Ia73fe2d2a96c070dacd8d9744242148ab4eca390
2020-07-23 18:19:34 +01:00
Ed Sanders 769d6579f9 Make MenuItemWidgets inherit from ButtonOptionWidgets
This gives them a consistent appearance with the expand/collapse
button. Only requires a small visual tweak to work in the popup
menu.

Bug: T258701
Bug: T258703
Change-Id: Ib3d074d1117e08d11136791354184e2e4b655290
2020-07-23 18:19:32 +01:00
Ed Sanders 3abe6b77bd Make mark as read/unread buttons properly focusable
Bug: T258710
Change-Id: I1ed9d386083d94bf6b5696bb71385169c0ccb807
2020-07-23 15:27:01 +01:00
Ed Sanders 42e2e5efbc Make NotificationItemWidget an <a> tag to fix focus issues
Bug: T258705
Change-Id: Ib44e04dd08e2818eb99ffb0cba73c775256d66d5
2020-07-23 15:27:01 +01:00
Ed Sanders d39d944bf0 Remove light background from dynamic-action hover state
Bug: T258703
Change-Id: I7b306b63c56da11ab7ce0492111f594f8b60593e
2020-07-23 14:02:34 +01:00
Roan Kattouw 7658e151d6 Fix positioning of the secondary actions menu
- Automatically flip the position if there's no room
- Always flip the position in bundled notifications
- Remove menuWidth and related hacks, they didn't work anyway
- Increase maximum label width a bit

Change-Id: I490a925b6265bfbb8bbedae11672fd19d4efba44
2020-06-03 04:41:13 +00:00
Volker E 9ee48977f1 Use '.text-overflow()' mixin from 'mediawiki.mixins'
And remove Echo's own mixin.

Depends-On: Ia8d6e7229b49598b0f4cb19dff463ffe2f11a43d
Change-Id: I68d5726f01484ef5b94a606de9669207944dff54
2020-04-23 18:16:01 -07:00
Volker E e85d881817 Replace static border radius value with var
In a distant future those might be replaced by core WikimediaUI Base
and this is a sane preparation for it.

Change-Id: I8907c8908f3b775be36b16a6782d7e9719e30c4c
2020-04-15 18:09:48 -07:00
Volker E 32c1c8e5f1 Amend Base10 color, add and amend WikimediaUI Base variables notation
Amending Base10 to slightly darker `#202122` to fulfill WCAG
requirements in connection to Accent50.
Also adding and amending WikimediaUI Base variables where in connection
with the color change.

Bug: T248393
Change-Id: I3b0c1666f7f883908a3778aa9e3fcbf51b57fefe
2020-04-15 18:02:21 -07:00
jdlrobson d7cc28fbcb Properly scoped style improvements to Echo OOUI dialog in desktop Minerva
This reverts commit ca5e5c85af and then
scopes the rules.

Bug: T241090
Bug: T242493
Change-Id: I0e6a4f6d235f34dc8f05a5e7ea5272d6465b80aa
2020-02-11 07:41:23 +08:00