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
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
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
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 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
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
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
- 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
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
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
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
In Minerva icon only buttons reveal themselves at desktop
resolution, except for any buttons in the header.
Bug: T340262
Change-Id: Iba6c633164a615b96bf19d5fe8f202b925bcace9
This rule was assuming that the ambox is always a table, but that may
not be the case; for instance, it might be a div (using CSS for layout).
So update the selector to target the new mbox-text, in addition to td
elements.
Bug: T339040
Change-Id: I7611e0de92afc4aef5bf56beb52de3f92e6b30c7
Added to core in Ifd4001e312a5fa4b7beaad63ba8c4e79e3201b9b
Applies the border more generally.
Bug: T314097
Change-Id: I884010c6b84b2dcb4dfc55f7b4cab9fefd3f6786
Applying central Codex design tokens in new architecture.
This replaces all existing MN `z-index` tokens and comments on
replacement choice.
Bug: T285592
Change-Id: I23d794566898946a500c10713802d8dfaad993d1
Replacing 'mediawiki.ui/variables.less' @import with
new skin-aware 'mediawiki.skin.variables.less' standard.
Removing calls for 'mediawiki.skin.variables.less' in favor for
'minerva.variables.less' for consistency.
Also
- replacing several static values with new Codex design token featuring
skin variables of `background-color`, `color`, `border-*` and
`transition` categories
- renaming several Less variables to variable naming standard
- moving a small number of MinervaNeue specific variables into
'minderva.variables.less' file. Those should be replaced in mid-future
by Codex design tokens
Please note, that this patch is not replacing all values with
possible Codex tokens. It's just applying them on selected
categories for consistency for now to keep the patch easier reviewable.
Further replacements will be done in follow-up patches.
Bump MediaWiki core required version to >= v1.41.0.
Bug: T319381
Bug: T332541
Depends-On: I98c8cc27527533e2efb3b987ee34bc403e988b75
Change-Id: I86c5a35377541a784552c29456e0b8b507b3ee9c
Per ResourceLoaderSkinModule disabling these styles is not
recommended. Enabling them is also now needed to support IP masking.
Bug: T325768
Change-Id: Ia7f2eb6ba902ebfc9364147ec0692eaae124469e
These styles have drifted away from the HTML structure since they were
written in 2017.
General:
* Add some comments
* Replace complicated selectors with simple class selectors
styles.less:
* Hide section edit links (previously we relied on MobileFrontend
styles, which one handled some cases - removing them in I9a88b80c2a)
* Show print footer, hide Minerva footer
header.less:
* Remove FIXME (resolved in c323c6858a).
* Fix hiding the search box. In 0bee6a1eb6 a <form> for the search box
was added to the header, and these styles (using tag selectors) were
not updated. Use class selectors instead.
* Remove styles for <h1>. The element was changed to <a> in
a905b1c161, styles to override font-size etc. are no longer needed.
* Consolidate 'padding' rules and remove unneeded !important.
article.less:
* Replace the `[ class|='mw-content' ]` selector, which was not
matching anything. It would match elements with `class="mw-content"`
or `class="mw-content-…"`, but the node we're trying to style has
`class="mw-body-content mw-content-ltr"` (since 7cda5b0bf8 in
MediaWiki core). Use a class selector instead.
* Replace the `.mw-body > .content` selector too. While this one
works, it is also needlessly complicated.
footer.less:
* Fix and simplify how last-modified info and license text is unhidden
(while other parts of the footer remain hidden).
* Remove styles for .license. Unused since 1f2b7dff15, use the desktop
footer added in that commit instead.
* Use the desktop footer for last-modified info, since it's more
suitable for "archiving" (it has a date rather than time ago).
Bug: T323636
Change-Id: I21ef26355e3e6dd8b0c34ae933b7f5b0b222655c
On desktop, the "Alert" icon had more white space around it than the
"Notice" icon, and its popup displayed with a different offset.
On mobile, the combined icon jumped around while the page was loading.
Change-Id: Icdd5bc6e8478f3453b6461a35b7fb53e8ab014e9
For consistency with desktop Vector, Minerva should show two
icons. This also removes the duplicate #pt-notifications-alert
element in the skin.
Bug: T313609
Change-Id: I6449f0c29b52fd2092d63fbef23205ed8f57d50f
They reference T160946, but in that task it was explained that the
problem was caused by faulty wikitext (T160946#3230740), so I don't
know why they were added.
Bug: T323640
Change-Id: I73d654d1f9127e22365d94909681c1c5f5f39597
Both of these elements are already hidden by default in the normal
view (.fmbox is used for some edit notices, which aren't shown in the
editor; .tmbox is used in the lede of talk pages, which is hidden by
the talk page interface), and these styles make it more difficult to
display them when they are desirable.
Bug: T257394
Change-Id: Ifb0316256bdec5008acc48544ddd3e2bf71b6d41
Reported in,
https://it.wikipedia.org/w/index.php?title=Wikipedia%3ABar%2FDiscussioni%2FAggiornamento_del_parser_per_le_immagini%3A_vogliamo_testarlo%3F&type=revision&diff=130240855&oldid=130214646
The default styling in core looks like,
.mw-image-border {
> a:first-child,
> span:first-child {
> *:first-child:not( .mw-broken-media ) {
border: @border-thumbborder-screen;
}
}
}
The simplification here recognizes that the border option doesn't apply
to thumbs, so descendent selectors can be dispensed with, there's no
nesting in figcaptions to worry about. That's important because
lazy-loading adds a noscript before the img tag, which would make the
selectors with first-child not apply anyways.
An img tag is used instead of the universal selector. That seems like a
safe assumption for now and can be revisited with T314097 / T318433
Bug: T318300
Change-Id: I25f45ee794300d2ba2a38a0ab6e3741a6b1a18f2
Only thumb and frame have visible captions. This matches core's
mediawiki.skinning/content.media-common.less
Bug: T318300
Change-Id: If5713c8d629ec3c84abdb5c99eedf6f0bb408ddf
The rules in mediawiki.skinning.content.parsoid were made redundant by
25890e3ece. There are some more rules
there that should be audited to see if they're still necessary or can be
moved to a more general location now that wgParserEnableLegacyMediaDOM
is being disabled and they apply more broadly than just when Parsoid
styles are requested.
Missing rules for mw-halign-center and mw-halign-none are added.
Bug: T318300
Change-Id: I34fb1ce76de24eec3b136dc6dc9ab4e07e36b809
Default horizontal alignment based on page content language.
See I1a2cc989c35506172af361cd86a4a378ddf58ecb
Bug: T318300
Change-Id: I7acf07fb22bba6aae97db00e84eddaf78361dfe8
Based on work done in I7b9cf401936be2421d0ad4efe963486404d50e6a
we switch to the standard notifications menu for Echo generation
Bug: T301263
Change-Id: Id611cc07aebfb94e50bde8902cbc0627393fa926
Additional change:
* The animation stylesheet pulled down for the storybook instance
in dev-scripts/setup-storybook.sh is no longer referenced anywhere
in assets so can be removed.
Bug: T306486
Bug: T308351
Bug: T308360
Change-Id: Ia9f2a05cde2724486f7e449261c5d4875388f5ab
This scope is used elsewhere in the skin to limit styles
to parsed output. Confusingly `.content` also applies to
the body area of special/action pages.
Bug: T304148
Change-Id: Id5aa760c8441e589e813c5cc0c12c86469cde714
* Update stylelint-config-wikimedia to 0.13.0
* Ensure eslintrc.js and root files are linted
with server config
Change-Id: I59c49fedd5b0c4c5620f960b78e4f781a6bc5abb
- Remove cached HTML relating to heading change
( I2ffdedd64414ffb3c6e441391a75fd6e744847a4)
- Update invalid instruction for selector in footer (I0bfc7f977cdaf5ce8873103346c64121d704b86c)
It appears this rule cannot yet be removed.
- Update classes for contributions icon on user pages
(I6c908acd70c0dca5bcb1754d1b25d3da2389feb8)
Change-Id: I271abf3d29dfcfd19d654514fb3f6d6e257505ab
This is creating a large gap between search icon and user navigation
icons on the right.
Bug: T302753
Change-Id: Ic24ab36d0a9c394c5c88b375bdfbe529be93ace6
Cached HTML friendly change which works by limiting styles to the new
HTML which is identified by the existence of the
minerva-search-form class
Bug: T301257
Change-Id: I61ba77a349a38e6a05f87f600ec31bcbf36f306a
Now whole area of last edited section (from edge to edge) is tappable
and linked to history page.
Bug: T163853
Depends-Onː I3d1f272a27c5c9b0b0928b5c0eaeb3f6e270532b
Change-Id: I3c35bbaafea3376cd2f9dccfd13bfe4845fd6823
We've changed the selector in MW core to `.mw-parser-output a.external`
a while ago. In order to show the correct image, selector needs to be
amended.
Change-Id: I83d7b4c8be2eda1876959d000e0fb2d493e12cbc
- Move new header styles to header.less
- Remove unnecessary styles
- Update search overlay to be aligned with the heading searchbox on all screen sizes
- Add temporary skin style to ensure no regressions in mobile VE
Bug: T294033
Change-Id: Ib9867d1b76b602f3355e9f2689f137bc84b0c929
After this change, in desktop Minerva the copyright
text in the footer should match desktop Minerva.
In mobile Minerva the copyright text in the footer
is shortened and doesn't contain terms of use.
It should match Vector mobile
?useskin=vector&useformat=mobile
Depends-On: I3473908e08f643b4c60aafc470dd124516955323
Change-Id: I2895975aaa1d09d228f80aff74381e88034a0137
Bug: T289401
* Move method to SkinMinerva
* Turn preparePageContent into a getter that returns the subject
page
* Use getSubjectPage in template
For mobile special pages this now means the page has two .content elements
On those pages I've disabled the initial content element. It also means
various .content <heading> and .content ul rules now apply that need to be
disabled.
While testing several other issues were taken care of - for example
the h2 in errors
Depends-On: I7761396d6a33830f279742be01240796573556a7
Bug: T291871
Change-Id: I13bc4b5dae7aed86eca31ef306212365e1759481
- reserve space for the icons
- break long urls in the ToC
- fix right margin on the ToC
- support without JS
Bug: T292338
Change-Id: Ic279047f297fa132b87b77b6d7127b797015f92a
The 27525d0bff change renamed header to minerva-header, but neglected
the fact that this class was being used in the Overlay as well.
Bug: T292071
Change-Id: I05c1589723b68cf07c874f299f1960548f53e8ff
* Adds alt attribute with a value of the `mobile-frontend-sitename`
(previously called `mobile-frontend-footer-sitename`). The message was
changed because this affects both the footer and the header's logo.
* Adds a `minerva-footer-logo` class to the logo in footer.mustache in
preparation for changing that element from an h2 to a div. Given caching
issues (old CSS with new HTML; new CSS with old HTML are both
possibilities), we need to do this in two separate deploy cycles.
Bug: T288362
Change-Id: I3ecbf8fdcae72a0ded7f60c559259f312b8ef15d
Making Minerva use the `elements` feature is not
practical at the current time. In lieu of that, we
update the link colors to use the core definition.
The red links and external link colors
can come from the "content-links" module.
This also adds support for the underlining user link preference
and better plain link support.
Bug: T274717
Change-Id: I600257e6f4430f166331c4ea4f3a72d87aa377d8
Content using `header` as a CSS class was affected by skin styles
in Minerva being insufficiently specific to the skin‑specific elements.
This changes Minerva to use `class="minerva‑header"`, thus avoiding
the conflict and matching what Vector does.
Bug: T172626
Change-Id: Id8fbe61b2d1d4a89ec11ddfdf7837be797b3bd20
These styles are also applied inside MobileFrontend as they should apply
to all skins, not just Minerva.
Several styles for desktop Minerva are amended with a comment.
Bug: T253370
Change-Id: Ib23024d192f331ef76007dbd9ef54596cc1adb0c
A comment says that the line of code can be removed after cached
HTML is not a problem. This code for ui.less was added in April 2019, so is
not a problem. The code for footer.less was added in April 2020 so is also
not a problem.
Another comment says external link unsetting can be removed after
a ticket has been resolved, which has been resolved and I can confirm
is no longer needed.
The header > div a rule only matches the link wrapping the logo
inside the branding-box. It no longer matches the hamburger or notifications
icon which make use of nav elements, and to make matters worse
interferes with the goal in T282473
Bug: T285261
Change-Id: Ie7777b4b53355cf0dc48d6447f63299156254b6c
This could be made even simpler by not using a LESS varialbe for
hacks.less, but loading it conditionally through the moduel def.
But, as a first step we can merge the two as-is.
Given that the subject and target are always referenced together
in page views, there is no need to keep an alias around. However,
I'm keeping it anyway so as to not produce any
`/* {"skins.foo":"missing"} */` appendix to the stylesheet response
for these cached URLs.
Bug: T266361
Change-Id: I8578faab8ca32bd49be90711cbd5e182763b8065
This styles parser errors, which were previously unstyled.
It removes the need for the clear for the table of contents
on stub pages
Additional change:
* The base styles module increases with this change
* While testing bundlesizes I noticed that the bundlesize for the
content styles is outdated and have updated it (this is unrelated
to the inclusion of the new feature)
Bug: T281228
Change-Id: I8e099b18f0866201cba378f6110913cdab478c4c
Just as before styles for message boxes will be
kept off the critical path of most page views and
loaded on special pages, old revisions and action= URIs,
however unlike before the CSS will come from the definition
in core.
It must also be loaded in JavaScript for compatibility
with the use of warnings in JavaScript, for example
MobileFrontend overlays.
This change will allow us to remove the
mobile.messageBox.styles module in MobileFrontend
I8b6bdfceaf33b9527dbe6790d2a39e335fb692b2
Bug: T233160
Change-Id: I7d8d1d34621c36c26ec03a3773d4d1e67bd14f2e
Removing historically grown code and icon and replace by latest
'search' icon. It is slightly smaller 18x18dp on 20x20dp canvas, and aligns with
icon guidelines of Design Style Guide.
Bug: T213580
Bug: T275563
Depends-On: I752ea81aaff51059af942daa008a1b898dbc2d06
Change-Id: Ia7f50ec7534e303dcfd311b301a764936f7729df
A new rule resetting padding-right and background-image on
a.external inside footer is added.
Additional change:
* Merge all styles relating to the last modified bar into a single
component file for consistency with Vector and easier lookup.
Bug: T267464
Change-Id: I558f0756264e92ca757a99e47a53564c3ecd8b71
`lazy-image-placeholder` is needed only when MobileFrontend is enabled.
So it makes sense to move those styles to mobile.init css. See more details here: T199351#6380240
Bug: T260406
Change-Id: I16ca734af33fb0f3c4c67f20bbca8631279d7778
All images in MinervaNeue skin are vertically aligned `middle`,
so placeholder for them should be consistent.
Bug: T199351
Change-Id: I5fa00bd0c02e67059543389e4bbd07b073a2c5e0
MoveLeadParagraphTransform treats div.infobox the same as table.infobox,
and should be fixed to match any element too.
Fix specificity of tablet overrides.
Bug: T258011
Change-Id: I9ada6d1b8b19b46dba6527f1f66edd2547fa0c88
Use a variable to rely on opacity value close to `#54595d` similar
to icons in the header.
Bug: T251135
Change-Id: Ie3eaad9ac86f8c3827e0a41f0b73b694d8f8f2fc
Use a variable consistent with Wikimedia UI base instead of
a hard-coded opacity value.
Bug: T251135
Change-Id: I883d3b122c3a0206fe83365a7818929d74f86459
Additional changes:
* Address a fixme relating to the overflow icon and move some AMC styles
out of the critical path for non-AMC pages
Note about ellipsis:
The class mf-mw-ui-icon-rotate-clockwise cannot be used as it's part of
MobileFrontend and loaded via JS. Minerva must work without MobileFrontend
and this rotation is needed without JS.
Bug: T244444
Change-Id: Ifd02c50305cf036dd6df640d778678668507e5eb
Reducing (currently) unnecessary `last-modified-bar` context nesting,
which isn't done consistently across stylesheet files.
Additionally adding new `mw-footer` class, but not yet using it
exclusively due to caching.
Change-Id: I6b9caa42c1907ec1a7f8c8b67334fb7f08705848
Removing MinervaNeue's own mixin now that it's possible.
Also unify code instances to use new mixin.
Depends-On: Ia8d6e7229b49598b0f4cb19dff463ffe2f11a43d
Change-Id: Iaffcefcb7a239d5ddecbe17097573d06099de88e
