MediaWiki talk:Pivot.css

Category banner size and dismissable site notice on mobiles
User:Kmdenmark Please add this code to the end of Pivot.css, it should shrink the banner height where there is a colored banner (eg any potential treatments like ibuprofen), make the dismissable site notice wider/smaller when pivot is used on mobile screens and fix some layout issues with bullet and numbered lists. As usual ignore the "pre" tags. Thank you ~Njt (talk) 23:29, September 2, 2020 (UTC)

/* Mobiles and tablets - smaller category banner */ @media (max-width: 768px) { h1 { font-size: 1.4rem; margin-top: 4px; margin-bottom: 4px; } h1 div, .firstHeading { font-size: 1.25rem; padding: 2px!important; margin-left:0; margin-right: 0; color: #333; text-shadow: none; } /* Mobiles and tablets (cont) - dismissable site notice - remove large gap on left to reduce the space it takes up, shrink top and bottom margins, reduce left margin on numbered lists */ .sitedir-ltr .mw-dismissable-notice-body { margin: 2px 4.5em 2px 0.5em; }  .mw-dismissable-notice { font-size: 90%; }  ul { padding-left: 0.25em; }  ol { margin-left: 2em; } } /* end of mobile code */

Old requests
(Done)

1. User:Kmdenmark User:Pyrrhus Please change the following to fix the extra gap that it caused in the table of contents. Add usual, without the "pre" tags ~Njt (talk) 15:34, November 17, 2019 (EST) 1)

pre, td { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }

to delete the ", td " from the top and change a setting to normal:

pre { padding-left: 2em; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; white-space: -o-pre-wrap; word-wrap: normal; }

2) 2. Please add the code below to the very top, above the existing code.

/* normalize paragraphs, lists and tables to reduce margins */ p { margin: 0 0 1em 0; padding: 0; } table { display: table; overflow-x: visible; margin: 0; padding: 0; } td { display: table-cell; margin: 0; padding: 0; } ul, ol { padding: 0; margin-top: 0.3em; margin-bottom: 0; }

3) 3. Please change this code to allow article message boxes to be wider on small screens. This add a hyphen - to the start of a line to fix an error, and deletes the white-space lines. Thank you. ~Njt (talk) 15:34, November 17, 2019 (EST) From:

@media screen and (max-width: 500px) { td, #mw-content-text li { margin-left: 2px; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }  }

To:

/* mobiles: break crazily long words in lists and tables, using hyphens and keep broken items in same column, put columns closer together */ @media screen and (max-width: 500px) { #mw-content, /* special pages */ td, #mw-content-text li:not(.gallerybox) { margin-left: 2px; overflow-wrap: break-word; word-wrap: break-word; -webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em; -webkit-column-break-inside: avoid; page-break-inside: avoid; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }  }

Color of error class
(Done)

User:Kmdenmark User:Pyrrhus Please change the following code, which changes the error class color. ~Njt (talk) 17:47, November 17, 2019 (EST)
 * ✅ Kmdenmark (talk) 17:25, November 18, 2019 (EST)
 * User:Kmdenmark. Would you be able to do the changes 1-3 above as well? ~Njt (talk) 13:10, November 21, 2019 (EST)
 * ✅Kmdenmark (talk) 17:57, November 21, 2019 (EST)
 * Thanks ~Njt (talk) 19:46, November 22, 2019 (EST)

From:

.error code { color: #FF4444 !important; color: #fff !important; }

to:

.error code { background-color: #fff; color: #FF4444 !important; }

Code request - wanted categories are white
Done

Please add the following code to the end of MediaWiki:Pivot.css, which should make any wanted categories visible at the bottom of pages - currently it's white text on cream. User:Kmdenmark Thanks notjusttired (talk)

color: #BA0000; }
 * 1) mw-normal-catlinks a.new {


 * Thanks notjusttired (talk) 16:06, August 12, 2019 (EDT)

Requested to copy to Pivot.css to set color scheme
(completed May 17, 2019)

Completed request - May 19th
User:Kmdenmark and User:Pyrrhus. Could you also add this onto the bottom of the existing code.

CSS changes? -- Pyrrhus (talk) 19:11, June 8, 2019 (EDT)
Hi User:Notjusttired! I have just returned to the Pivot skin to see how the new CSS is working. I noticed a few things that may be related to the CSS changes: Any idea what may be going on? Thanks! Pyrrhus (talk) 19:11, June 8, 2019 (EDT)
 * 1) The search box on the main page is now left-aligned, which looks funny on large screens because it leaves a large empty space on the right side of the screen.  If centering it causes problems on mobile, maybe we should just make it full-width?
 * 2) I noticed that the text in the “Recent changes” page is now disorganized.
 * 3) Some of the diff pages are running off the right side of the screen, such as here.
 * I will add those to the outstanding issues list.
 * 1 The search box - do you mean the large one by Try Exact Match only on the main page? The whole section around the search box, ie the surrounding boxes in the tables, not just the search box? I think it's when the screen is wide enough for the sidebar to be visible that there are issues. I can't find the exact width what's it goes wrong, I use the quirktools screenfly website but can't really zoom out to tell. Can you check if this is an issue on the Timeless skin too? The issue might be adding  display: block to the wikitable section.
 * 2 I thought recent changes looked messy before? Can you describe how?
 * 3 Will need to check into that code since I haven't done any changes aimed at the Recent Changes page. notjusttired (talk) 19:13, June 9, 2019 (EDT)
 * 1 Sorry, I meant the whole section around the search box, including the “MEpedia’s articles have been viewed..” line. It looks fine on the Timeless skin.
 * 2 Maybe it was messy before and I just didn’t notice! If there has been only one change to a page, it shows up correctly as a single line on the “Recent changes” page.  But, if there have been multiple changes to a page, it shows up broken into 7-8 lines.
 * 3 I only notice that the diff pages run off the right side of the screen on smaller screens, not on my desktop. This has nothing to do with the recent changes page, as it also happens when I select a diff from the page history.  But it only happens with some diffs, not with others.  Again, this may have existed before but I just didn’t notice.
 * Hope this helps! Pyrrhus (talk) 19:43, June 10, 2019 (EDT)
 * Thanks User:Pyrrhus. The first issue should have been sorted by a change to the main page. For the recent changes page layout try the code below. I don't yet have a solution for the history diff issue.
 * First 2 issues should be sorted now. notjusttired (talk) 15:56, August 13, 2019 (EDT)

Recent changes code - done

notjusttired (talk) 20:33, July 27, 2019 (EDT)
 * User:Kmdenmark can you add the code below to the page, without the "pre" bits? Thanks notjusttired (talk) 10:04, August 12, 2019 (EDT)

/* recent changes improvements for small screens */ .mw-enhancedchanges-arrow-space, .mw-enhanced-rc-time, .mw-changeslist-diff-cur { white-space: normal; } .mw-changeslist-line-prefix, .mw-enhanced-rc, .mw-changeslist-line-inner, .mw-enhanced-rc-nested { white-space: pre-line; }

Show poweredby in footer
It may be necessary to remove the following  code from the CSS page to show the MEpedia default image at the bottom of all pages - will have to check once developer changes made. notjusttired (talk) 10:04, August 12, 2019 (EDT) /* removed powered by mediawiki - which has several different names oddly */ .poweredby { display:none; }
 * 1) footer-poweredbyico,
 * 2) footer-poweredby,