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
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
Remove the opacity filter and indicate a disabled state using the
disabled color for both text and the icon. Add a new disabled icon
variant to accomplish this
Also fixes a small issue where the toast notification was unreadable in
night mode due to using --color-inverted. Switch this to
--color-inverted-fixed, which was added for this purpose
Visual change for the language selector button, when there are no other
languages available
Bug: T361693
Change-Id: Id2f80028d967bf644673f651bb89718fa8723d22
* Update mediawiki.skin.variables to point non-Codex tokens to
Codex token equivalents
* Replace box-shadow-color-drawer with @box-shadow-color-base
* Leave FIXME comments for migrating the last two CSS variables
* Replace direct access to CSS variable with @color-link-new
design token instead since the former may no longer exist.
Bug: T360845
Change-Id: Ie531044d320cde50689064f10ff00db5adcaf859
Required for proper presentation of page issues overlay
and multimedia viewer.
The div rules were unnecessary.
Bug: T205341
Change-Id: I6fea0f2013a11e5248b71619b795d794c8ed18ad
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 '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
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
* Allow multiple notifications to be visible at the same time without
overlapping
* Don't allow notifications to cover the entire screen
* Fix icon placement in post-edit notifications
Bug: T336001
Change-Id: I7b76b0f97bc4b5ca85f4b47bd27ae7568bcbe353
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
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
IE9 on Windows Phone workarounds are of no use any more.
The `right: 0` and `left: 0` properties below are sufficient in
currently supported browsers.
Change-Id: Ibfb29d1b009cb0ea33bc3cb9be39ee579e981b1a
- 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
KSS is no longer in use anywhere. The only official style guide is
at https://design.wikimedia.org/style-guide.
Depends-On: I688a78e9a71a082c499af55bd01e8fd615130486
Change-Id: I21663c7b48465b0f23f1b40520e8cee9be71c4bc
* Drop non-existent pointer-overlay selector
* Drop redundant icon class for arrow
* Drop unnecessary !important
* Drop transparent-shield class
* Reword an existing FIXME about a contensious decision and
add a new FIXME for moving some code to a more appropriate place.
* Move an image into a ResourceLoaderImage module (test with
`mw.notify('error', { type: 'error'} )`)
Change-Id: I6e38f07772afae6f13c4851ca17a67d52ca7d331
* .mw-notification-tag-toast appears to not longer exist anywhere in
mediawiki
* Removed bottom 'counter translate' style. I'm not sure this is needed
now? The comment makes it seem like it was needed for older browsers
that didn't support fixed positioning but I think mobile browser support
for fixed is good now [1]
* The previous animated class was only in effect during the exit of
toasts. I refactored this logic to be easier to read with hopefully the
same animation effect.
[1] https://caniuse.com/#feat=css-fixed
Bug: T234570
Change-Id: I757122758cb0758f9ede5ccb81d9cc82bb92e79b
Per T234570, browser support for animations is solid now so we no longer
need to check for browser support.
However, due to some browsers firing css transitions on page load (see
https://bugs.chromium.org/p/chromium/issues/detail?id=332189), we still
need JS to add this wrapping class after CSS transitions are loaded to
prevent the transitions firing on page load for some components
(DropDownList and MainMenu). See MainMenu.less or DropDownList.less for
an example of how this is used.
MobileFrontend adds an animations class too rn, but that will be removed
in in I58f754740f7146f09c38220a7614285e57684924.
Bug: T234570
Change-Id: If0cf7113b40f7217a22b66a8669138466af2cf5d
minerva.variables.less: added gray color variable
MainMenu.less: added shadow to navigation
NotificationOverlay.less: changed alpha color of shadow
drawers.less: replaced rgba color with the same color variable
Bug: T231205
Change-Id: Ib1e16804b941a8f3b0cc639673baf73dc749a60a
There should be no caching implications for this change, as the main menu
has been server side rendered on all wikis since 10th October.
As Stephen pointed out somewhere, this is a bit of a micro-optimisation
Let's simplify this code by always rendering it in the HTML. MainMenu.js
as a result becomes a controller that just decides when to show it.
The geolocation check for Nearby is removed given the fact that all
grade A browsers for mediawiki have Geolocation support.
ev.preventDefault in onSkinClick is dropped since the link to the '#'
(the default behaviour) is wanted
Additional changes
* Browser support suggests "animations" class is redundant now
* `open` event no longer filed - not being used anywhere
* Transparent shield is now managed by the MainMenu controller not
the skin (which was confusing)
* Test geolocation using a simple feature tests
rather than abstracting it away inside Browser
* The main menu button is always hidden under either a translucent shield
and/or the main menu itself when it has been opened
so so it's not possible to ever click it while the menu is open
- the click handler is thus simplified
removing a check for the class of the button
Bug: T234650
Change-Id: If101eebbdbda1519af922745917237648722820e
Using newly introduced variables instead of fixed values.
Also adding `transition` to property blacklist to ensure using
mediawiki.mixin.
Bug: T236224
Change-Id: I3d2d05f4e50e7b6bba0fe84fae1dde5de5b75492
This reverts commit 111757970e.
Although I cannot replicate the performance issue, the menu doesn't seem to be rendering at all on cached HTML so this is a deal breaker. Back to the drawing board..
Bug: T234599
Change-Id: Idadc5a079340f44ec66d20a38259b6b337d2dcee
As Stephen pointed out somewhere, this is a bit of a micro-optimisation
Let's simplify this code by always rendering it in the HTML. MainMenu.js
as a result becomes a controller that just decides when to show it.
The geolocation check for Nearby is removed given the fact that all
grade A browsers for mediawiki have Geolocation support
Additional changes
* Browser support suggests "animations" class is redundant now
* `open` event no longer filed - not being used anywhere
* Transparent shield is now managed by the MainMenu controller not
the skin (which was confusing)
* Test geolocation using a simple feature tests
rather than abstracting it away inside Browser
* The main menu button is always hidden under either a translucent shield
and/or the main menu itself when it has been opened
so so it's not possible to ever click it while the menu is open
- the click handler is thus simplified
removing a check for the class of the button
Depends-On: I7fd243366cceae780bd46e1aef2c08dae073f647
Change-Id: I3892afb5ed3df628e2845043cf3bbc22a9928921
Rely on css top/transform to center it instead of calculations.
I84fc4224d5107188265d8ec0a26c0388664949a5 should be merged shortly after
this one.
Bug: T233156
Change-Id: I6e00f851ecb4e1ba8c1ef5d90bcc4310d66a820e
* Refactor less variables to make icon touch-area sizes flexible
* Search input is bumped up 1px to an even number
Bug: T233156
Change-Id: I156d09bfca8db9506c0e9cee21e4d6e0a2e91689
The incorrect padding-top was causing overlays with no headers to
always be scrollable. The issue was noticeable e.g. on the search
overlay or the editor loading overlay in MobileFrontend.
Change-Id: I28ece81402041eea10124c2076cff5a1cba049cf
Not necessary or compatible with new icons.
A padding left is needed so that the cancel icon
matches up with the content body.
See "The "X" has too much padding, which is causing two issues:"
in attached issue
Bug: T229440#5490743
Change-Id: If76602436e797f2896004181eb776f049cf52fd5
Includes icon fixes and removal of some CSS overrides.
This causes the following temporary defects to the skin:
* Last modified bar will temporarily be squashed
* clear search icon will be misaligned vertically
Depends-On: Ie811d25595d041c35e6c214190101821f3a5d466
Bug: T229440
Change-Id: I0a3a73421791ad353bbcebaeb8241ad062f67ae4
Before c0f08790ea, this was defined as
`( @iconSize / 2 ) + @headerVerticalPadding`, which computed to 0.9em.
Restore the old value since it looks wrong now: T215426#5486117.
Change-Id: Ib14a148da305d98f2d1ce9b1c71cb8910d665e44
Note: this agitates T230232 again - when merging this please
make sure a merge for I929090848f3e04647a97f4979ec78682623fa070
is pending.
In various places we try to override the default mw-ui-icon behaviours
The hacks need to be removed as part of addressing the core problem.
Changes:
* Wherever we use mw-ui-icon-before in PHP - wrap the label with a span
so that label font-size is altered where needed - not the icon
* Where a small icon is needed us isSmall parameter for the Icon component
* Apply font-size to labels of mw-ui-icon-before elements
* The browser tests need a slight update to access the span element inside
a menu item - in the case of the logout button the label is always hidden,
so we need to check the visibility of the parent element (secondary_action)
Bug: T229440
Depends-On: I3f803ec4c9068b30aa93b803391aa4d65d8310ff
Change-Id: I07e4ae233979636b739f1117dd7703571e0a9366
