Page MenuHomePhabricator

Make mobile wordmark gray again
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT

Description

Description

As part of T246170 the wordmark on the mobile site has gone from gray to black. This was a known side-effect of the change.

beforecurrent

Technical notes

Setting the wordmark to an opacity of 0.65 should result in the desired color.

Developer notes

Work on the assumption all icons are black and add this as a css rule in the global css for Minerva

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 27 2020, 1:55 PM

@Volker_E following up on T250774#6076842. The opacity trick seems to work well. When looking closely the color ends up looking slightly red, as it's missing those blue tones.

Would we consider doing an inline SVG just for the wordmark, so we can have complete control? E.g. https://stackoverflow.com/a/22253046

ovasileva triaged this task as High priority.Apr 28 2020, 2:06 PM
ovasileva changed the subtype of this task from "Task" to "Bug Report".

@alexhollender I don't think that's a viable option, it would mean a monstrous extra effort on development side. We've discussed a similar approach years ago on inlining main SVG icons to provide interaction color changes better (without flickr when loading new icon).
Another option would be to try to apply a filter to the wordmark where supported @supports ( ( -webkit-filter: blur( 20px ) ) or ( filter: blur( 20px ) ) )

Jdlrobson updated the task description. (Show Details)Apr 28 2020, 5:14 PM
Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptApr 28 2020, 5:14 PM
ovasileva set the point value for this task to 2.Apr 28 2020, 5:32 PM

Change 593571 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Changing color of logo from black to gray using opacity.

https://gerrit.wikimedia.org/r/593571

Change 593579 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[operations/mediawiki-config@master] Logo wordmarks should not define fill color - opacity will be used

https://gerrit.wikimedia.org/r/593579

Change 593589 had a related patch set uploaded (by Jdlrobson; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@wmf/1.35.0-wmf.30] Changing color of logo from black to gray using opacity.

https://gerrit.wikimedia.org/r/593589

Change 593571 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Changing color of logo from black to gray using opacity.

https://gerrit.wikimedia.org/r/593571

Change 593579 merged by jenkins-bot:
[operations/mediawiki-config@master] Logo wordmarks should not define fill color - opacity will be used

https://gerrit.wikimedia.org/r/593579

Mentioned in SAL (#wikimedia-operations) [2020-04-30T23:08:52Z] <urbanecm@deploy1001> Synchronized static/images/project-logos/: SWAT: ae1424a: Logo wordmarks should not define fill color - opacity will be used (T251135) (duration: 01m 05s)

Change 593589 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@wmf/1.35.0-wmf.30] Changing color of logo from black to gray using opacity.

https://gerrit.wikimedia.org/r/593589

I was gonna swat this but because the train is blocked it's better to do it in a single change on monday.

Change 594254 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Fix for 27eb9e - "Changing color of logo from black to gray"

https://gerrit.wikimedia.org/r/594254

Change 594254 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Fix for 27eb9e - "Changing color of logo from black to gray"

https://gerrit.wikimedia.org/r/594254

Jdrewniak removed Jdrewniak as the assignee of this task.May 5 2020, 5:08 PM
Jdrewniak added a subscriber: Jdrewniak.

The opacity value should be 0.65, it is currently 0.87

alexhollender removed alexhollender as the assignee of this task.May 12 2020, 7:43 PM

Change 596091 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Change opacity (color) of logo to a subtler gray close to #54595d

https://gerrit.wikimedia.org/r/596091

Change 596091 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Change opacity (color) of logo to a subtler gray close to #54595d

https://gerrit.wikimedia.org/r/596091

ovasileva added a subscriber: ovasileva.

It is gray, but is it smaller than before? @alexhollender

It is gray, but is it smaller than before? @alexhollender

Ah wow, great catch. @Jdlrobson any idea what's going on here? SVG looks correct, width="119" height="18", but it's displaying at width="105" height="18". This seems to be an issue on desktop as well.

ovasileva closed this task as Resolved.May 19 2020, 3:19 PM
ovasileva claimed this task.

Resolving, sizing will be fixed in T252143: Update existing outdated wordmarks