Use CSS to target parsed content where a background color is defined
inline without an accompanying text color. Additionally, add an ADR
documenting this decision to the repo
Visual change in night mode only, as the text color will now be correct
Bug: T358797
Change-Id: If375c4c9691462d314e91a74da0fc8365137cd8c
Based on list on [[mw:Recommendations_for_mobile_friendly_articles_on_Wikimedia_wikis]]
and running color contrast checker on every project.
Bug: T358164
Change-Id: I1ecbc1bac060eae4b9d99f461284d15b5da3d576
Adds a rule that makes elements using the .notheme class
inherit black text unless specified otherwise.
This addresses situations where elements relying on
inheritance for color.
Bug: T358528
Change-Id: Ie59c31b5e25684ff5ecad507a273fbe71af4bca0
During the Codex experimental build integration, some non-standard
variable color names were not replaced with standardized ones.
This patch replaced:
--color-link--active -> --color-progressive--active
--color-link--visited -> --color-visited
Bug: T356928
Change-Id: I48925009300565adbd7af815138d150219c7e88a
This (partially)
reverts commit 9f541aafcc.
Reason for revert: Applying in light mode as well as night
mode where it was intending. The [bgcolor] rule is safe in both
modes so can stay.
Bug: T358164
Change-Id: I68c4d81209199d0257b7ba2590d19c258d9152e6
- in main page
- in sideboxes - these only contain over div elements so
use div instead of * selector
Bug: T357722
Change-Id: If0e9eeb9471f3990afd5254b51af8dbe9cb538e0
Target a number of common infobox formats and strip the custom colors of
text and backgrounds, as well as borders. This is explicitly a first
pass, so not overly broad but will hopefully encompass a large portion
of the infoboxes we're concerned with
Visual change in night mode only
Bug: T357453
Change-Id: If57f1b1ef6b86a9e45ca655e2317fc31330d207e
Use the Codex experimental design token build to
providing CSS custom property version of design tokens
for night mode.
The build also provides Less variables which are
references to the CSS custom properties. These are
pulled into the mediawiki.skin.variables.less file
and propagated across core and extensions.
Bug: T358059
Change-Id: I78558f6cc1de91d62fb9f8cbf571f73b51eae8ca
The color-scheme property allows certain elements
to change their appearance based on the system
light/dark mode settings.
Therefore, this property should only be applied if "auto"
night mode is enabled.
Bug: T358814
Change-Id: Ic2b836d9696706ab2c628e78cc2592716963e9a5
Note: You need to enable wgMinervaApplyKnownTemplateHack in LocalSettings.php
for these styles to work.
Editors can opt out of these rules by using the already popularized
"notheme" class.
Bug: T357722
Change-Id: I32f3968b74bded987bb60e85a902e551727db545
This patch promotes a consistent design decision across projects in
MediaWiki core, extensions, and skins. The darker red color meets the
W3C Web Content Accessibility Guidelines (WCAG) at Level AA that text
or images of text must have a contrast ratio of at least 4.5:1 (or 3:1
for large text).
Bug: T343239
Change-Id: I771fec3f567ea7ce5a25f8c63d88c956a27121ef
When content is inverted via CSS filter, this sometimes inverts
CSS variables which have already been themselves inverted. Allowing
markup to explicitly mark itself as invertable would be helpful.
For now, usage is intended only for extensions integrating with
the skin. Since we're not sure this can be considered a stable
interface by editors we intentionally use the `skin-` prefix rather
than `mw-` interface given the note about confusion about what is
stable in [[mw:Stable_interface_policy/Frontend#Writing_code]]
Bug: T356425
Change-Id: I0cd0e36a6abe0bba9e98d1b319e636bef2952301
Add an @import for Codex variables, i.e.
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui.less';
that adds overrides to the variables from
'mediawiki.skin.defaults.less' to CSSCustomProperties.less.
Bug: T356427
Change-Id: I7c2c3a07899b4de735f7e7fd24e003ab69d449bb
Additional changes:
* Separate CSSCustomProperties.less from skin.less so that
we can obtain the unmodified original values for the colors
Depends-On: I363a97d33d85a9033da753f2a8fe730d80206639
Depends-On: I148eaca747352ffdc9d1423f20d34bd5a1d0e447
Bug: T356427
Change-Id: I916450c276cabb0c7c871525c50f95fb87f498ad
This fixes the regression introduced in I6331d88e5b73.
Also un-nesting selector to necessary level.
Bug: T357849
Change-Id: I58ed32e63ad4c37aefd79edac5f1376ce4313ee3
In 1.42.0-wmf.17 these had margin 0 in Minerva.
I incorrectly assumed we had defined an explicit margin in content
and for talk pages but apparently none exists, so I have restored
this rule to the list.less file.
Follow up to I6331d88e5b7301fd13249414350a539738cfae53
Bug: T357742
Change-Id: Ib3062bfbffe35415f479bae46ecf02e8a094958b
Right now visited links in night mode are showing the day mode style for
@color-visited, because --color-link--visited is defined, but never set
to a corresponding night mode style. This defines the night mode
variant in the stylesheet, and sets it to the same value as
--color-visited
Visual change only in night mode, which is behind a feature flag
I also added /coverage/ to the eslintignore, as I was getting failures
on the pre-commit hook due to us linting the coverage report 🙃
Bug: T356825
Change-Id: I96695fe4c094b79385e36aef9e29b8d392c06302
Required for proper presentation of page issues overlay
and multimedia viewer.
The div rules were unnecessary.
Bug: T205341
Change-Id: I6fea0f2013a11e5248b71619b795d794c8ed18ad
Following a discussion in the ticket, update the places where `#eaecf0`
has been hardcoded to reflect whether it is intended to be a border or
background style and replace with CSS variables where applicable. Add
`--border-color-muted` as a CSS custom property, and update the night
mode palette to use it. Lastly, add `--color-error`, to be used in a
subsequent patch
Visual changes, but again gated behind night mode feature flag
Bug: T356825
Change-Id: Icb5741190f3e80a20dcedf9b13d6a34fe619b467
Add a skin-night-mode-page-disabled class to the HTML element when
a page was disabled by the new MinervaNightModeOptions configuration
flag.
Bug: T356653
Change-Id: I7a6582ef8f66e78cc6f07da06bc4d2a3277cfcf0
Update the `night-mode-palette` styles to reflect the updated design
There is definitionally a visual change, but should only be for night
mode (which is currently gated behind a feature flag)
Bug: T356825
Change-Id: Iebe3b91cdf9e5e5effb2bc3ab4ff75859024056f
This reverts commit d33a0423b1.
Reason for revert: CSS variables are currently not compatible
with fill colors
Bug: T356540
Change-Id: I29c92bb2407a5b8ed38e09a0f48ec834c671c912
When defining background we should also define color to avoid mixing
styles provided by editor, and us.
This fixes the black on black in infoboxes on the Paris article
for example in night mode.
Bug: T356074
Change-Id: I5a73f5eaf269cb8f771663a9181a67f9af723b13
Retain the existing font,
margin and padding values as without
these we would trigger a visual regression.
Visual change: Four minor visual regression with this change
relating to the button in the AMC CTA Drawer and suggested
edits overlay heading. All are acceptable.
Bug: T205341
Change-Id: I6331d88e5b7301fd13249414350a539738cfae53
All colors used in Minerva are converted from Less variables
into CSS custom properties. A new file called CSSCustomProperties.less
is created in the skins.minerva.base.styles module to store
these custom properties and an ADR is provided on the rationale for
dropping support for browsers that don't support custom properties.
The new CSS custom properties follow Codex design token conventions
where possible (and noted when not).
Link colors are unique because their styles are defined in core,
so in that case the Less variables values are set to custom properties.
Those values are then fed back into MediaWiki core for core link
styling.
Also adds a temporary night-mode color palette under the
.skin-nightmode-1 class on the <html> element.
Bug: T356074
Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
Converts all Less variable names from CamelCase to snake-case
per the MediaWiki coding conventions.
Removes the following unused Less variables, mostly
related to icons, since those were converted to Codex:
- @icon-touch-area-sm
- @icon-touch-area-md
- @min-size-icon (replaced with @size-icon-medium)
- @icon-glyph-size-sm
- @icon-size-sm
- @icon-padding-sm
- @icon-glyph-size-md
- @icon-size-md
- @margin-icon-md-labelled
Bug: T350581
Change-Id: I1b16e77942d9bea20dcc5636a63d64aa2325a173
The latest update of 'svgo' dependency includes three optimizations on
converting path commands, which
- improves closing paths and how we determine if to use absolute or
relative commands.
- round arc or convert to lines based on the geometric sagitta
- convert cubic Bézier curves to quadratic Bézier curves where possible
Also unifiying npm command to qua standard notation `minify:svg`.
Bug: T354875
Change-Id: Ibf59b3435b82602c5355b6f1c9b03920ea2e8eab
Once the cache has cleared out and all tab links are nested in li
elements (983960), follow up on the fixmes introduced and update the
stylesheet to reflect the single way we will be styling `minerva__tab`s
going forward. This should not be merged until after the break to
ensure the cache has had time to clear
No visual changes on this one as it _should_ effectively be a noop
Bug: T340728
Change-Id: I36be5ab3cacfb5e0c0f056264055509d2ee22271
Currently `mw.util.addPortletLink` cannot properly add a portlet link to
the associated pages tabs, as there is no `p-associated-pages` id on
mobile. This change pulls the id from the page data, and adds the
necessary class for the tab to be styled correctly - since tabs do not
have corresponding icons while most portlet links do, we also branch on
this class (effectively on whether we are in the tab container) to
ensure an icon is not inserted
Finally, I added a few comments and spacing in the sections of code that
I touched to make them more readable and resolve some of the linter
warnings, but happy to hear if these are not helpful!
Bug: T340728
Change-Id: I33fc12611a6238552a3eb47f6ca37f087903a92a
As part of my work on fixing addPortletLink for tabs on mobile (T340728)
we need these tabs to be correctly designated as an unordered list (note,
this is also how they are rendered in Vector). In addition, update the
styles to account for the link being nested in a list item now
There should be no visual change as a result of this, but if there is
please let me know!! I will be testing locally in pixel after pushing
to ensure the change is transparent
Bug: T340728
Change-Id: I922558a59aa909ce76079bab057811d76467f644
Removes a `display: inherit` that was causing issues with the alignment of these two items in the menu. In addition, correctly sets display to none for jsonly-specified list items when client js is disabled and rename the class to make it more specific to the menu items
Note: this will have a visual impact as it is fixing what is currently a visual bug. The jsonly hiding will also not work with cached content, but since it's currently broken we figured this was acceptable
Bug: T346670
Change-Id: I56d2c4fcba09d199a0fd6aad2f1621509bbfaba5
The fragment in a URL like http://example.com/foo#bar#baz doesn't end
when there is another # somewhere. That # is part of the fragment.
I'm not sure since when this issue exists. It's already in the first
version of this codebase from 2017, see Iff1f7e6.
Bug: T332007
Change-Id: I3b0726380d2f385475f5ba53aeab16932d7ccaa7
Add CSS to support new HTML markup for headings with section edit
links, which will soon be used by Parsoid page views (T269630)
and by the old parser (T13555). Keep the old rules to provide
temporary support for cached page HTML and emergency opt-outs,
as well as permanent support for plain headings on special pages
and in Parsoid edit mode HTML.
See documentation page for further explanation:
https://www.mediawiki.org/wiki/Heading_HTML_changes
Depends-On: I44587461582d648b56ef0c9c7ae0c322895c69c2
Bug: T13555
Bug: T269630
Change-Id: Ib97d034ab533124f06441e788c8608fb274dccf0
Nesting these rules inside `h1, h2, h3, h4, h5, h6 { … }` generated
some enormously long selectors (as the whole selector had to be
repeated 6 times). It's not needed, as these elements do not occur
anywhere else.
Change-Id: I1647e37ff9a0c975d9320e4c34857f210a1858c2
The 'edit-page' class is no longer applied to section edit links.
Follow-up to I9f768706c0a0f14f14ee4b3812288218bef36018.
Remove a rule that seems no longer needed.
Bug: T351853
Change-Id: I0891332d613d152374c37f232ed596292d89b583
This method already throws a deprecation warning in production
so there is no need to guard against it here.
Bug: T348807
Change-Id: Iab346822e80dd716c001497c0587b163a49a3265
This restores the previously reverted patchset
If5b76245bf60bfa9cf977cdbf37ee0d6bb65f9d9
Changes since original:
* Added Depends-On to MobileFrontend
* Uses OOUI classes for page issues rather than es6 classes - ES6
classes do not support modifications to class prior to running
super so MobileFrontend's View class is not compatible without
significant refactors.
Depends-On: I24ad75adf8519102ca356d64d99d765ab69180cc
Bug: T348807
Change-Id: I4ff82af0251254c846f2caee330af5af738f6029
This reverts commit 19ea6328b0.
Reason for revert: Breaks page issues and image overlay. I
will break this up into smaller less risky patches.
Change-Id: If5b76245bf60bfa9cf977cdbf37ee0d6bb65f9d9
When $wgReadOnly = true; in LocalSettings.php the edit icons
appear locked and when clicked should show a warning.
This also addresses deprecation warnings in the code and
tidies up the ES6 code.
Note to reviewer: Please use git diff HEAD^ -w
when reviewing this diff. Mostly whitespace changes.
Change-Id: I3fa83cc1dc4da62260fd0ef50ac14805c3e1282b
The line-height value for headings in MinervaNeue was 1.3,
while in Codex and Vector it changed to 1.375.
This patch brings the value in MinervaNeue in line with Codex and
the corresponding change in Vector a while ago.
This also makes future typographic changes more easily handlable.
Bug: T331403
Change-Id: I4320035708d6005388428dfbc90da2ef613841b5
Currently the last modified bar icon appears black rather than
white. This is because the last modified icon shares icon CSS
with the page actions in AMC.
Untie these by giving the icon in this context a different selector,
taking care to support cached HTML.
Change-Id: I98443b0dcb88911a5314092216809387b4fb80dc
Partial revert of I192c6d4235c57f69cf48dcd67aa6c4810df62dfa
The deprecation notice seems incomplete. The two functions are not
equivalent and we have various usages elsewhere in the codebase.
Bug: T346685
Change-Id: I063daa217708c3bebac97af7be9eedab01f5217b
Most of these are captured in other bugs
The anon talk message style doesn't do anything.
Bug: T344022
Change-Id: Iba1fce98ea05931fe07b2b20f07c62d198039d1b
These are newer elements but they have similar user agent defaults to
img/video/audio etc.
This should fix the usage of imagemaps, which use frameless figures
and currently have excessive margin in minerva
Change-Id: If9f995401b771baffe221e474991cf1e3fbc7f76
Fixes "[1.40] Use of PageGateway is a NOOP and deprecated. Please remove this call."
Fixes Use of "navigate" is deprecated. use navigateTo instead
Change-Id: I192c6d4235c57f69cf48dcd67aa6c4810df62dfa
- Removes 'mw-ui-icon-with-label-desktop' as that is now the default behavior for icon only buttons in Minerva
- Removes icon flushing classes, use codex mixins instead
80 Visual changes relating to minor icon/button subpixel changes in the heading, edit section links, and page actions
Bug: T319260
Change-Id: I503b643d33e43196483af4b5f9dd312237322ac8
In I1ccda3878a658d4251429ae65ebee04c09d81243, core decided
to technically allow temp. users to have watchlist access,
but have it disabled on permission level
(viewmywatchlist / editmywatchlist) instead of by isNamed() checks.
Minerva expects the watchlist permissions to be assigned to everyone,
but actual watchlist access to be available only to named user.
This is an incorrect assumption. Make a clear difference between
"page is watchable" concept (watch icon should show) and "user has
permission to watch" (if not, CTA to log in should show).
There is one additional step to fix, which is ensure
temp users receive the T330518 drawer. That is not a bug
in MinervaNeue, but in core -- mediawiki.page.watch.ajax.js uses
e.stopPropagating(), which means Minerva's CtaDrawer doesn't get
a say. Ideally, mediawiki.page.watch.ajax.js would know whether
the user has permissions to edit their watchlist. Alternatively,
it could have an interface to allow extensions to add their own
error handling. See T344925 for details.
Bug: T344870
Change-Id: Id1757fb4fb433fe39cf4d5c6e1e9c65ab5abae14
Legacy icons shouldn't have the minerva-icon class as this is meant
to be reserved for Icon template (Codex icons)
Bug: T342908
Change-Id: I63556fe42c8650bc5f0d6e5a0c5328b3f29d75f3
The current implementation enforces the size to be part of the
icon name. It would be preferable to have a specific class for
controlling size given we don't want to have to update all the
names of our icons.
Bug: T342908
Change-Id: I84407fb562c288bafe02e97ba7f3366de7f61611
This reverts commit 3474a0b90f.
Reason for revert: The after pseudo element appears to be needed
for the notification circle unfortunately. This is not a requirement
for this train so I suggest we tackle this later.
Change-Id: Id6d073435155bb1b0f9a2306c88de7fcf1f7ece5
Follow up to e86f197cfa
This apparently will become a problem when we switch to Codex
Bug: T343920
Change-Id: I796856a8c2c5e9d0677552d63a730834021bbeee
Use the Button.mustache partial in the
PageActionsMenu.mustache template.
This converts the page actions menu to use the Button
template in a way that doesn't change the existing HTML.
The mw-ui-icon-element and mw-ui-icon-with-label-desktop
classes are placed onto the Button.mustache markup.
Bug: T342908
Change-Id: Ib5dadd929eea2e72a24e061c4174348615890617
Reverts the change to flushing for notification icons in
I55c18cf723a32f80b93a01dd0687e005162c4e93
Bug: T343908
Change-Id: I1c9b9969c822f90f8edeb90ce8b27d79d378cf64
This reverts commit e78d6a5216.
Reason for revert: Completely truncates the user popup menu.
Bug: T343908
Change-Id: I320103bb7563c9265afb9956b9375d2a96b37172
Changes
* Update FIXME in userMenu.less to merge selectors
* We replace minerva-user-notifications class with minerva-notifications
to short-circuit Echo's code so that it no longer replaces the Minerva
notification badge with its own.
* We update resources/skins.minerva.scripts/initMobile.js to introduce
our own wire up code - this is responsible for opening Echo overlay
and reseting the counter. The code in Echo will be removed in a follow
up (see <I2f923e509d24524a2375ffbe6b3ef336487574bb>)
* We update skinStyles/ext.echo.styles.badge.less with styles from Vector 2022
so that Minerva desktop remains consistent with desktop Vector 2022 experience.
* We clearly mark technical debt relating to the special mobile version.
Testing:
* Pixel.js has a group echo that covers all the different variants.
Make sure to update to latest main branch before running these.
* Desktop should behave the same for Minerva as Echo.
* On mobile only when a user has unseen notifications a red circle
is shown. Otherwise a bell icon is shown, never with number.
* On mobile a single button is visible that combines alert and count
numbers.
* With Echo disabled a bell shows that links to the user talk page
Visual changes:
* Previously the red circle became a transparent/gray circle on click. Now
it will always be red.
* Minor aligment changes to red circle and bell icon are expected as
the change prevents MobileFrontend/Echo updating the icon to use
Codex.
Bug: T342907
Change-Id: I55c18cf723a32f80b93a01dd0687e005162c4e93
This reverts commit 7856f79d11.
Reason for revert: This version of the instrument isn't in use. It was
enabled on the Beta Cluster but then superseded in I39adbce1f2c8.
Change-Id: I273a6f21a881f69298d6219e435639ced0fe8afe
Creates a new Icon.mustache file in favour of using
MinervaUI::iconClass.
Add a new icons.less file and the following icons:
- history
- expand (next) arrow.
These icons are used exclusively in the history
status bar at the bottom of most pages.
Bug: T319260
Change-Id: If81186418fe758d7be9c3e57cf5d2aa889517f2d
