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
This is not working as expected - when I view the watchlist
it looks misaligned.
At this stage it is not vital to keep this view identical
with the existing version.
Bug: T109277
Change-Id: I2768a83cdd015867c9d66ded63acfe369629cf52
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
I think they custom design is no longer needed now that the form uses
Codex, and some of the rules are applying incorrectly now and causing
bad rendering.
Depends-On: I3dd4509e8fbe43c8c3fee405d81e1e6efe5ee296
Bug: T364214
Change-Id: I994c1dc6492c39964b21f0ab2e8a0e0ca848cc7a
* 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
* Hide RC filters on AMC -disabled view
* Add margin between tabs and list and full width border
* Hide 3rd and 4th tabs on watchlist view
Bug: T266065
Change-Id: I39a20bb763c6057d65550bdfface0d9156799dac
MobileDiff special page no longer exists so none of this CSS which applies to #mw-mf prefixed code is not applying to anything.
Bug: T360389
Change-Id: I6638850a6e1cd1e27072ecd17dd1524f62f976cd
The changes here only apply to the AMC-disabled mode
and only apply when visiting the watchlist with the
following configuraton:
$wgMFUseDesktopSpecialWatchlistPage = [ 'amc' => true, 'base' => true, ];
This change will allow us eventually to remove the special page
in MobileFrontend.
Bug: T109277
Change-Id: I15e95cbae77edde36ca822345a461d791ea5f29d
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
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
To test you must be using desktop Minerva
This addresses only the problem described in
T353062#9438627.
Bug: T353062
Change-Id: Ia7053b94aae1b6ab48307769de063d825a47c1db
This omitted the important overflow and text-overflow
rules that we use in MobileFrontend. The line height also
needs a slight adjustment.
Bug: T354218
Change-Id: I4b8dee3395603933aba2818725b1f8fbbde0a2a6
The visual diff is sometimes cluttered at narrow widths, but as
we show the switcher on tablet and desktop, and it stores a preference,
users may see the visual diff on phones anyway.
The layout is sometimes cluttered but not completely useless, and
users can always switch back.
As a follow-up we should improve the layout of the visual diff sidebar
on narrow screens.
Bug: T351946
Change-Id: I5533126195331b46040e708b7b35627e74a3001d
Mobile page doesn't traditionally show the full revision under
the diff. If we want to continue to do this it would be better
to find a solution on the server then resort to this CSS hack.
Bug: T350454
Bug: T350650
Change-Id: Ic26c577ca4bcf8793f8678e30d91b0315da4df99
The mediawiki.diff.styles can be loaded on pages other than the diff
page itself, so it is better to move this logic into SkinMinerva and
avoid outputting it for diff pages full stop.
Note this module is loaded on Special:MobileDiff and desktop
Minerva history page (without redirect) so we need to cater
for both cases.
Bug: T350515
Change-Id: If2d908b7cbe257184e0c899f78a04d4d5935ea8c
All other occurrences in this stylesheet already use the new token.
Seems like this one was missed.
Bug: T331403
Change-Id: I1d385275bd2b679d130eb3180ef2fc63a0f37a6b
