Commit graph

134 commits

Author SHA1 Message Date
ksarabia 5ef5694fbf Update Minerva skin to use Codex icons
- Define icon size variables in icons.less
- Update icon classes to use
  .cdx-mixin-css-icon()
- Remove temporary fixes in icons.less
- Add 'codex.styles' dependency in skin.json
- Set 'useMaskImage' to true in skin.json

Bug: T374145
Depends-On: Ia8f770aec365da77b39cb0258f546df7894e6ba4
Change-Id: I87b060cf98194d81679da2610944f58e8d941389
2024-09-27 21:53:55 +00:00
Jon Robson cef7b1f7bb Bottom margin not applying to Parsoid H2s
Bug: T375822
Change-Id: I99ce2b7640d738457495b57a16cbbbf082066217
2024-09-27 15:48:05 +00:00
Jon Robson 1d966ce00b Restore heading margin for Parsoid content
Bug: T373646
Change-Id: I3d20456695229cb203e6d1a125587f367fffe696
2024-09-03 20:48:25 +00:00
libraryupgrader 842a91590a build: Updating npm dependencies
* eslint-config-wikimedia: 0.27.0 → 0.28.2
  The following rules are failing and were disabled:
  * tests/selenium:
    * implicit-arrow-linebreak
    * no-mixed-spaces-and-tabs
* grunt-banana-checker: 0.11.1 → 0.13.0
* stylelint-config-wikimedia: 0.16.1 → 0.17.2
  The following rules no longer exist and were removed:
  * stylistic/selector-list-comma-newline-after
* braces: 3.0.2 → 3.0.3
  * https://github.com/advisories/GHSA-grv7-fg5c-xmjg

Change-Id: Ia94454c1da778f241085714e1601a0233d547570
2024-08-01 15:27:33 +01:00
Saint Johann 514f26ff5e Fix float issues with headings in Minerva
Bug: T316670
Change-Id: I531bbced68a2a9cbf75ffe44321beef05eee47c6
2024-06-21 00:10:49 +00:00
Bartosz Dziewoński 2a44123f3f Fix styles for new heading HTML
Do not apply 'display: flex' to all 'h1, h2, h3, h4, h5, h6' elements,
because it results in bad text layout within modern headings.

However, to support desktop Minerva with legacy headings, and avoid
incorrect styles being applied to unwrapper headings, we must
apply it to 'h1, h2, h3, h4, h5, h6' elements that may contain a
'.mw-headline'. Add a separate rule for that.

Bug: T367468
Change-Id: I87372907c38aa64b296634f6a5583a890f7fe9b2
2024-06-14 21:33:12 +00:00
jenkins-bot 91fd8a977b Merge "Improve Minerva drop-shadows in dark-mode" 2024-06-12 16:02:29 +00:00
Jan Drewniak 98eaa00cd5 Improve Minerva drop-shadows in dark-mode
Converts several drop-shadows to use standard Codex values:
- `.search-box .search` uses `@box-shadow-drop-small`
- `.drawer, .toast` uses `@box-shadow-drop-xx-large`
- `.toggle-list__list--drop-down` uses `@border-color-base`

Bug: T364425
Change-Id: Id00e525655d3a7138aa65f424fd6ab2ff82290c8
2024-06-12 04:05:30 +00:00
Steph Toyofuku 6f98cc6460 (Almost) no more CSS variables in minerva
Remove direct usage of CSS variables in Minerva, and replace them with
codex design tokens again.  Document this decision in the original ADR

Note: there are still a small number of CSS variables in use, including
most notably the --color-link-red fix, which broke when I removed it,
but this change takes care of all the ones that could be easily replaced

Bug: T363743
Change-Id: I7d3a9dceb908167078987de1733774c8bd4bea2f
2024-06-11 11:44:47 -07:00
Volker E dd154b4ea7 styles: Replace deprecated breakpoints
The values have slightly changed:
- Tablet breakpoint is decreased by 80px,
  pushing lesser devices into a mobile only experience but
  should make barely a difference to vast majority of our users.
- Biggest difference is in `min-width-breakpoint-desktop`,
  which is increased by 120px in comparison to
  `@width-breakpoint-desktop: 1000px`

Also removing one out-dated feature phone clause.

TECHNICAL CHANGES:
* The previous breakpoint was tied to the maximum content width.
The previous maximum content width is preserved, and several media
queries are adjusted to make use of it.
* The header (logo) is not optimized for  640px-720px. For now
a temporary fix is but in place which will be investigated as part
of T366859

VISUAL CHANGES:
* 6 visual changes which improve alignment in language and
visual editor overlay and diffs (where wikidiff2 is not
installed)

Bug: T349793
Depends-On: I3afba8c51f60de9271054499bfa3ffbcc1a9d779
Change-Id: I9552d8ad7509aae90e15edda26e786465773d3ac
2024-06-07 12:52:39 -07:00
Jon Robson 70e68aedd8 Remove the rest of the reset
VISUAL CHANGE:
* Improves top margin on User common.js for code

Bug: T205341
Change-Id: Ia402fd069341da14532d332fab7c109d34c7208d
2024-02-15 19:56:46 +00:00
Steph Toyofuku 91c9e68afb Fix borders in night mode palette
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
2024-02-14 16:18:21 -05:00
Jon Robson ea6c55f925 Reset: Further simplify the reset
* Move pre to content/text.less
* Move heading styles to text.less
* Move search input styles to ui.less

Bug: T205341
Change-Id: I333918089af1c20e9467ad57596dd9dd6925869a
2024-02-13 18:23:28 -08:00
Jon Robson 3224b026e4 Font size for search input and overlay search should be consistent
Follow up to: I6331d88e5b7301fd13249414350a539738cfae53

Bug: T205341
Change-Id: I344be341bff06212e911a6935cca4b7551bcf227
2024-02-09 00:01:11 +00:00
Jan Drewniak 59fd0cd5dc Convert all color related Less variables to CSS custom properties
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
2024-02-02 17:57:27 +00:00
Jan Drewniak be0b43042e Convert Less variable names from camelCase to snake-case
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
2024-01-31 15:24:31 -08:00
Derk-Jan Hartman 33797c9a02 Replace page-list with mw-mf-page-list
This class was renamed in Ia33d199b84c978bf26bbaa1645515ae186bd26be

Bug: T337741
Change-Id: I508d8947b6091c216fab13fa608090b894929dad
2024-01-27 23:38:53 +01:00
Ed Sanders 8ef144f936 build: Update linters
Change-Id: I5aa3ab891890b52057a5fc855315e5b1b2203037
2024-01-24 22:02:12 +00:00
Bartosz Dziewoński 97aed1ad86 Add styles for new heading HTML
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
2023-11-27 20:03:16 +00:00
Bartosz Dziewoński 6294ca7196 Reduce CSS size & specificity for headings
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
2023-11-27 18:31:54 +00:00
Bartosz Dziewoński d3c5b8a6b2 Restore section edit link styles
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
2023-11-27 19:29:31 +01:00
Bartosz Dziewoński 5f17c89649 Remove unused CSS for cached HTML
Searched for /fixme.*remove/.

Follow-up to:
* I55a25dfb8aba3d1b589a36ba4cba3bba0fe710a1
* I98443b0dcb88911a5314092216809387b4fb80dc
* I3c9d59f49f1b939981a7b2b450448db6736d5958
* Ie24c0215d07d5e4605d8479ed9e950a3d9c9b086

Change-Id: Id52487f6f5e4802ea2700c51e87e63565f340f5d
2023-11-17 18:52:27 +01:00
Jon Robson 0c8caebfc6 Generate section edit links via SkinMustache
Bug: T346944
Depends-On: Ief6a6ee03ada8207fc5c60ea438412fa2d529022
Change-Id: I9f768706c0a0f14f14ee4b3812288218bef36018
2023-10-23 23:17:43 +00:00
bwang 9e9c1292e4 Ensure header edit icons are the same size
Bug: T345969
Change-Id: Ica191284df74610c958ad8808dcd1c03839b1a5d
2023-09-11 18:37:31 -05:00
Jon Robson 952789bc17 Switch Minerva button template to use Codex and remove mw-ui-button
- 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
2023-08-24 15:57:01 -05:00
Jon Robson 0c6ac2926d Edit icon uses template parser
Bug: T344007
Change-Id: I772f2c8be7e4f48e9d67a5d1d7d3ef9e6af17851
2023-08-10 22:04:11 +00:00
bwang e6511ebe8f Add option for different icon sizes, reduce size of arrow icon in last modified bar
Change-Id: I494a02e5ba08cc7849cf1973f8f9163c672fccff
2023-07-31 14:18:49 -05:00
Jan Drewniak 11e09ea7b3 [Icons] Convert history/next status bar icons to Codex
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
2023-07-28 16:56:24 -07:00
Jon Robson 6dad2802f3 Handle icon only labels with Codex in Minerva
In Minerva icon only buttons reveal themselves at desktop
resolution, except for any buttons in the header.

Bug: T340262
Change-Id: Iba6c633164a615b96bf19d5fe8f202b925bcace9
2023-07-27 23:23:44 +00:00
Ed Sanders d09600aa51 build: Update linters
Change-Id: Iaa1c41ab1af4802fd71896b471eda8dd8852a323
2023-06-13 13:56:14 +01:00
Volker E 38ca243e39 styles: Replace 'mediawiki.ui/variables' call with skin variables
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
2023-04-24 16:08:27 +00:00
Bartosz Dziewoński 8c0f0c578e Remove talk page tools
Bug: T319145
Change-Id: Ib432564e1049f18334653e5eb3981f0f051582b3
2023-03-13 18:21:52 +00:00
Bartosz Dziewoński bf9f3972d8 Remove unneeded CSS rule
This has no effect. I don't know why I added it in 2690ea3a9.

Change-Id: I078267dfef5fbe66abd6f632fe644e34769d5f1e
2023-02-08 20:36:58 +01:00
Jon Robson 64fb00e237 Use standard subtitle markup
Bug: T324876
Depends-On: I8e538939a6d7d4474f2e96b93040f3c68c2f98ec
Depends-On: I4b178f67b6718fa9a84827e1804ec4eb1483f735
Change-Id: Ie24c0215d07d5e4605d8479ed9e950a3d9c9b086
2022-12-13 01:32:37 +00:00
Ed Sanders d926771bd8 Remove deprecated vendor prefixes and their mixins
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
2022-05-23 23:18:43 +00:00
Ed Sanders 86caa17713 build: Update linters and linter config
* Update stylelint-config-wikimedia to 0.13.0
* Ensure eslintrc.js and root files are linted
  with server config

Change-Id: I59c49fedd5b0c4c5620f960b78e4f781a6bc5abb
2022-05-18 14:33:23 +01:00
Bartosz Dziewoński 2690ea3a9c Style section headings using flexbox
Bug: T305971
Change-Id: I383971a1bebafd1af1e971ad02648bd943b0c5ee
2022-04-14 22:16:01 +02:00
Jon Robson 0fe451b23a FIXME cleanup
- 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
2022-04-06 20:17:22 +00:00
Jon Robson fade8ad2c2 Search icon should be part of search form for grade C browsers
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
2022-02-22 08:40:55 -08:00
bwang e5cb874ea2 Move header styles into header.less
Change-Id: Ia68745a74e988fe10fbb77ccfbc10ee347899d77
2021-11-12 11:56:49 -06:00
bwang f1c828e19d Refactor Minerva header and overlay headers to use flexbox
- 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
2021-11-04 15:50:00 -05:00
jdlrobson 1f2b7dff15 Minerva uses desktop footer for license
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
2021-11-03 18:38:44 +00:00
bwang b4fd1498bc Add yellow talk page message warning to non-main namespace pages
Bug: T284642
Change-Id: I2895975efe1d09d228f80aff74381e88034a0137
2021-10-26 10:44:28 -05:00
jdlrobson d990f99b9e list-header styles should be specific enough to override h2 styles
Change-Id: I83e6992b0a63f456e1c2f7d17c87cbfc903d9c60
2021-10-06 23:56:37 +00:00
Jdlrobson e09a336500 Search header should be vertically centered, not top aligned(take 2)
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
2021-09-29 16:21:34 +00:00
jdlrobson ca18ad75d3 minerva-header class is now in cached HTML, remove old header class
This completes the migration from header to minerva-header

Bug: T172626
Change-Id: Ibb86359e683e08d86091f855e3813a99e0ad2cee
2021-07-20 18:36:39 +00:00
ExE Boss 27525d0bff Fix style conflict with content using class="header"
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
2021-07-16 20:39:24 +00:00
jdlrobson 4f2f1bb349 Drop duplicate styles in Minerva
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
2021-06-28 12:26:12 -07:00
jdlrobson 18ad3fa457 Address some FIXMEs in styles
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
2021-06-21 17:56:48 +00:00
mainframe98 87934a3034 Use content-body skin feature
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
2021-05-14 15:42:19 +00:00