Page MenuHomePhabricator

Nicer design for pre elements in Vector
Closed, ResolvedPublic


Author: theevilipaddress


I think that the default style of pre elements in Vector looks a bit deprecated. I noted that after seeing how Commons has customized the display of this, which I believe is worth consideration for the MediaWiki core IMO, too. In the Monobook skin, I think the dashed border is quite ok, but I believe that Commons' way of doing this fits better into the Vector skin than Monobook's implementation of this.

Compare for example and

The original idea comes from Diebuche,

Version: unspecified
Severity: enhancement

attachment css.patch ignored as obsolete



Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:19 PM
bzimport set Reference to bz27047.

*Bulk BZ Change: +Patch to open bugs with patches attached that are missing the keyword*

Reverted in r89712; adds breaking of long words which isn't what's expected in pre sections.

Could you not have just removed the offending line?

Yes, it was reverted in r93912. Apparently because overflow-x: auto; causes the horizontal scrollbar to be placed at the bottom of the page (in Vector) instead of at the bottom of the pree element or browser window. So let's forget about the overflow.

That leaves the styling. Personally, I don't like the Commons styling anyway. Personally, I would change just the 'dashed' to 'dotted' and decrease the padding to 0.5em.

What is the status of this? You had some code already, going back and forth.

The overflow/scrollbar/wrapping part is bug 260.

The styles for the other part should now go into common/commonElements.css instead of vector/screen.css. Current styles are (still the same as in 2011):

border: 1px dashed #2f6fab;
background-color: #f9f9f9;

The proposition here is:

border: 1px solid #ebebeb;
background-color: #f7f7f7;

This is closer to how Modern renders these:

border: solid 1px #3c78b5;
background-color: #f0f0f0;

I'm not sure if it's still a good idea to change these, given for how long they were there; I'll upload some screenshots in a while anyway.

Created attachment 12944
Comparison of the three styles

attachment Comparison.png ignored as obsolete

The proposed looks good and matches the overall vector style.

+1. We've had this on Wikimedia Commons for a while, and it fits very well in the overal Vector design and even as a good default in general (so, Monobook as well).

The old style both has a too prominent border (dark blue) and grabs even more unnecessary attention by also being dashed.

The only thing we may want to adjust in the proposal is which shades of grey we use. Avoid introducing new shades that aren't used anywhere else that are almost the same as an already used shade.

I'd recommend we stick to #f9f9f9 for the background and not change it to the (darker) #f7f7f7. The difference is almost impossible to see, and this way it matches the background of the table of contents.

And for the border, #ddd instead of #ebebeb. Again, almost the same (#ddd is slightly darker) and matches (for example) the thumbborder of the common stylesheet used by both Vector and Monobook.

Change 75641 had a related patch set uploaded by SuchABot:
Bug 27047: COMMONS MAN

Change 75643 had a related patch set uploaded by Krinkle:
skins: Make border style of <pre> more subtle for common skins

Created attachment 12946
Comparison of the four styles

Comparison of the four styles (including Krinkle's proposal).


Comparison.png (800×900 px, 43 KB)

Change 75641 abandoned by Yuvipanda:
Bug 27047: COMMONS MAN

Because Krinkle also fixed this

Change 75643 merged by jenkins-bot:
skins: Make border style of <pre> more subtle for common skins