[go: up one dir, main page]

Page MenuHomePhabricator

Use grey text for section numbers in Table of Contents boxes
Closed, ResolvedPublic

Description

I suggest tweaking the mediawiki CSS for .tocnumber to use a grey color.
This would make it easier to read the Table of Contents, by more clearly distinguishing the content (Headings) from the metadata (section numbers). Especially if the Headings start with numbers.

The code I use in my global.css:

/* Tweak Table of Contents boxes, to have grey numbers */
.tocnumber {color:#333 !important;}

Before/After screenshots:

RnBzJcM.png (535×453 px, 31 KB)

fGhuRnd.png (588×272 px, 40 KB)

5SDXw6N.png (617×355 px, 38 KB)


The solution uses:

.tocnumber {
	[…]
	color: #222;
}

from color palette M82 for body copy text.

Event Timeline

Quiddity raised the priority of this task from to Needs Triage.
Quiddity updated the task description. (Show Details)
Quiddity added a project: Design.
Quiddity subscribed.

In the recent T109915 task, we came up with 3 black/gray for text colors that is colorblind-friendly. They were #000, #222, and #949494 (for disabled text, placeholder text).

Screenshot 2016-02-01 17.13.37.png (326×299 px, 37 KB)
#000

Screenshot 2016-02-01 17.13.49.png (325×301 px, 37 KB)
#222

I would use #222 if the point is also to have the numbers to be less emphasized. #000 is too much emphasis on the numbers, although the difference is not extremely obvious.

I would use #222 if the point is also to have the numbers to be less emphasized. #000 is too much emphasis on the numbers, although the difference is not extremely obvious.

Yup, the aim is to reduce the emphasis, and make it easier to ignore the numbers when not needed, but still consult when desired.

For reference...
I believe I picked #333 (many years ago) because that's what the site footer uses. (I think #333 was previously used in additional locations(?), but I can't find any more instances at the moment.)
Looking around a bit more, I see #4d4d4d is currently used for the [[mediawiki:sidebar]] section-headings, and also for the "More ▼" menu text and arrow color.
Lastly, the Wikidata "Edit links" links are using #797979. http://i.imgur.com/tNGgsVU.png

Also, that's a good reminder...

In the recent T109915 task, we came up with 3 black/gray for text colors that is colorblind-friendly. They were #000, #222, and #949494 (for disabled text, placeholder text).

Does this have implications for the current default text color of content #252525 ? (on most but not all wikis, IIRC) If so, is there a task or discussion for that?
(I'd forgotten about that, as I use global.css to override #content to black, hence the #333 I use has more contrast for me, than it would for others... :/ )

Hi, I am new to wikimedia, How can I contribute in solving this issue, I have cloned mediawiki repository, the class "tocnumber" is in the css file content.css in mediawiki/resources/src/mediawiki.skinning/ folder, So do I need to modify that content.css css file and update the patch??

Also, that's a good reminder...

In the recent T109915 task, we came up with 3 black/gray for text colors that is colorblind-friendly. They were #000, #222, and #949494 (for disabled text, placeholder text).

Does this have implications for the current default text color of content #252525 ? (on most but not all wikis, IIRC) If so, is there a task or discussion for that?
(I'd forgotten about that, as I use global.css to override #content to black, hence the #333 I use has more contrast for me, than it would for others... :/ )

Yes definitely impacts #252525. I think we can just make a small change to #222. #222 currently is planned for secondary text, but I think a #000 on #FFF is too high contrast for the Photophobia. There is not a task yet, I think we're still figuring how to best tackle these changes. We've already been working up a base.css that contains these new changes!

@Volker_E, I am new to mediawiki, I have been exposed to front end design and development, I am now studying the source code and working of mediawiki.

@Praveenraj @violetto Absolutely! If you need further specifics on how to write a corresponding patch, please feel free to reach out to me. Here or via IRC: Volker_E

Hello! I've already submitted a patch for this task. Please review it. https://gerrit.wikimedia.org/r/#/c/272708/ .

Hello! I've already submitted a patch for this task. Please review it. https://gerrit.wikimedia.org/r/#/c/272708/ .

Thank you.

Weird, that @gerritbot didn't notify it here...

Yeah. Even I was wondering. Wonder if something's wrong with my commit message.

Change 272708 had a related patch set uploaded (by TheDJ):
Grey text used for section numbers in Table of Contents boxes

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

Hello! I've already submitted a patch for this task. Please review it. https://gerrit.wikimedia.org/r/#/c/272708/ .

Weird, that @gerritbot didn't notify it here...

That's because the Bug: line was not at the bottom of the commit message. That's a safety feature, so that not every single bug you mention get's links to the commit. I've amended the message and it's now reported by gerritbot.

BTW. this seems like a change that could VERY easily be tested on English Wikipedia before we apply it everywhere, by using Common.css. Just an idea.

BTW. this seems like a change that could VERY easily be tested on English Wikipedia before we apply it everywhere, by using Common.css. Just an idea.

Good thought. I've proposed it at https://en.wikipedia.org/wiki/MediaWiki_talk:Common.css#Use_grey_text_for_section_numbers_in_Table_of_Contents_boxes

Change 272708 merged by jenkins-bot:
Change .tocnumber to use grey text for section numbers in Table of Contents boxes

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

Volker_E closed this task as Resolved.
Volker_E updated the task description. (Show Details)