MediaWiki talk:Timeless.css

Please overwrite MediaWiki:Timeless.css code with this instead
User:Kmdenmark can do you this? It should improve color contrast, and restore the layout and the missing user preferences for mobile users, who currently have to change skins back in Special:SpecialPages. It will also remove the Merriweather font since the new default font is much nicer. There will probably may to be a few more changes after this. Thanks notjusttired (talk) User:JenB Can you copy this code below over to MediaWiki:Timeless.css. notjusttired (talk) 18:11, June 1, 2019 (EDT)
 * User:Kmdenmark User:Pyrrhus Can one of you update the Timeless.css code to overwrite it with this? Apart from the changes described above, it also includes Portal colors.
 * Pyrrhus (talk) 22:05, October 20, 2019 (EDT)
 * Great, User:Pyrrhus. Deleting the code that's now live  ~Njt (talk) 19:22, October 23, 2019 (EDT)
 * Great, User:Pyrrhus. Deleting the code that's now live  ~Njt (talk) 19:22, October 23, 2019 (EDT)

Portal code change
User:Pyrrhus please change (overwrite) this code:


 * Pyrrhus (talk) 21:04, October 23, 2019 (EDT)
 * Thanks ~Njt (talk) 11:43, October 27, 2019 (EDT)
 * Thanks ~Njt (talk) 11:43, October 27, 2019 (EDT)

/* Portal box colors */ .boxbackground { background: #333!important; color: #ccc!important; border-color: #222!important; border-width: 2px; }

.boxtitlecolor { color: #eee!important; } /* Color code snippets incl for errors */ code { background-color: transparent; color: #000; font-weight:bold; } .error code { color: #FF4444; } with this new code: /* Portal box colors */ .boxbackground { background: #333!important; color: #ccc!important; border-color: #222!important; border-width: 2px; }

.boxtitlecolor, .whitetext { color: #eee!important; } .whitetext { box-shadow: none; }

.boxtitlebackground { background: #000!important; border-color: #000!important; }

/* Color code snippets incl for errors */ code { background-color: #ccc; color: #000; font-weight:bold; }

.error code { color: #FF4444; }

Note that only some posts have changed. The main difference should be that clicking on a portal will make the portal heading colors better in the timeless skin. Thanks ~Njt (talk) 20:15, October 23, 2019 (EDT)

New code
Please add to the end of existing code. Changes are: Thanks ~Njt (talk) 20:22, October 23, 2019 (EDT)
 * better images (not too much white behind them) eg on main page
 * recent changes page color improvements
 * alert / echo notification color fixes
 * new logo has white background, so the words "Myalgic Encephalomyelitis" are now visible.
 * better colora for source editing eg wikieditor, no more navy text on black background in timeless skin.


 * Pyrrhus (talk) 21:05, October 23, 2019 (EDT)
 * Thanks ~Njt (talk) 11:43, October 27, 2019 (EDT)
 * Thanks ~Njt (talk) 11:43, October 27, 2019 (EDT)

/* transparent logo needs white background to get black text visible */ .mw-wiki-logo img { background-color: #FFF; }

.thumbinner { background-color: transparent; color: #ccc; border-color: #222; }

/* Dark colors for use over colored backgrounds, sets paler text and changes border color of there is a border */ .darkskin { color: #ccc!important; box-shadow: none; border-color: #222!important; }

/* Code editing colors */ .mi, .mh, .kp, .kc { color: #eee!important;} .p, .o { color: #aaa!important;} .k, .ki, .mt { color: lightgreen!important;} .nc, .nt { color: skyblue!important;} .c { color: lightgray!important;} .cp { color: palegoldenrod!important; } .nb, .nn {color: #f5b561!important;} .nd {color: #EE2222!important ;}

/* recent changes colors */ .mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions { color: #ccc; .box; }

.oo-ui-popupWidget { font-size: 95%; width: 95% !important; /* Color gets inverted */ background: #eee; } .mw-echo-ui-notificationItemWidget { /* these colors get inverted */ color: #000!important ; background: #fff !important; width: 100%; }

/* Alerts heading plus body background */ .oo-ui-popupWidget-popup { /* colors get inverted */ background: #eee; color: #333 !important; margin-left: 1rem !important ; width: 95vw !important; max-width: 100vw !important; } .oo-ui-popupWidget-body { background: transparent !important; } /* echo alerts popup heading */ .oo-ui-popupWidget-head > .oo-ui-labelElement-label { color: #ccc!important; } .mw-echo-ui-notificationItemWidget * { color: #000!important; background: transparent!important ; } .mw-echo-ui-notificationItemWidget .oo-ui-clippableElement-clippable { background: transparent; } .oo-ui-popupWidget-footer .oo-ui-labelElement-label { color: #333!important; } .oo-ui-popupWidget-head, .oo-ui-popupWidget-footer { filter: invert(100%); background: #000 !important ; }

Image invert code, no Borders, and logo name spacing
User:Pyrrhus Please change the following to fix the logo make, and add the new code to create classes that inverts any image, and forces a no invert, and removes any border ideally this should go after the thumbinner and thumb css. * Now ready to do * Thanks ~Njt (talk) 11:43, October 27, 2019 (EDT)
 * Pyrrhus (talk) 13:38, October 27, 2019 (EDT)
 * Thanks, that's working well. In the changed code can you set the margin a bit differently though: it's still not quite right - change the line to . User:Pyrrhus  ~Njt (talk) 22:29, October 27, 2019 (EDT)
 * Pyrrhus (talk) 23:58, October 27, 2019 (EDT)
 * Thanks User:Pyrrhus. Can you try deleting the margin-right: -0.15em; and see how it looks on Timeless? Confusingly the special pages don't load the custom font so the siding is different, or just needs testing on the main page. If it's too much of a gap after the # then margin-right: -0.15em; should sort it. ~Njt (talk) 10:33, October 28, 2019 (EDT)
 * Pyrrhus (talk) 23:58, October 27, 2019 (EDT)
 * Thanks User:Pyrrhus. Can you try deleting the margin-right: -0.15em; and see how it looks on Timeless? Confusingly the special pages don't load the custom font so the siding is different, or just needs testing on the main page. If it's too much of a gap after the # then margin-right: -0.15em; should sort it. ~Njt (talk) 10:33, October 28, 2019 (EDT)

Old code: content: "#"; font-family: Oswald, sans-serif; font-style: italic; font-variant: normal; margin-right: -0.3em; } Changed code for #MEpedia so # and MEpedia don't overlap on mobiles / small screens where the name is used instead of the logo: content: "#"; font-family: Oswald, sans-serif; font-style: italic; font-variant: normal; margin-right: -0.15em; } New code for images: .oo-ui-image-invert { /* if it's normally inverted, don't invert image */ filter: invert(0%); } .noinvert { /* don't invert image */ background-color: transparent; filter: invert(0%)!important; border: none; } .invert { /* always invert image */ filter: invert(100%)!important; border: none; } /* no border on images eg for userboxes */ .noborder { border: none; } img.noimgborder, .noborder > img, .noborder table tr td img, .noborder table tr td div, .noimgborder > img { border: none; }
 * 1) p-logo-text a::before {
 * 1) p-logo-text a::before {

/* Brighter icons eg for Done ticks */ .bright { filter: brightness(200%) } .brighter { filter: brightness(350%) } Please check the example in Template:Module rating/doc shows a black alpha symbol, which changes to a white alpha symbol using the Timeless skin ~Njt (talk) 11:43, October 27, 2019 (EDT)

Description of changes
It would be helpful to have the edit summary describing which changes were made, eg add invert class, rather than see talk page. Thanks ~Njt (talk) 10:33, October 28, 2019 (EDT)