MediaWiki talk:Timeless.css: Difference between revisions

From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
m (add transparent class)
 
(73 intermediate revisions by 3 users not shown)
Line 2: Line 2:
# The ‘skin’ contains most of the CSS code, and this basic ‘skin’ code can not be changed.  However, an MEpedia user can select from a list of different skins in their user preferences.  For example, a user can select either the “Pivot” skin or the “Vector” skin.
# The ‘skin’ contains most of the CSS code, and this basic ‘skin’ code can not be changed.  However, an MEpedia user can select from a list of different skins in their user preferences.  For example, a user can select either the “Pivot” skin or the “Vector” skin.
# The [[MediaWiki:Common.css]] page contains MEpedia-specific changes to the CSS code that will apply to ALL skins available at MEpedia.
# The [[MediaWiki:Common.css]] page contains MEpedia-specific changes to the CSS code that will apply to ALL skins available at MEpedia.
# Each skin has a page that contains MEpedia-specific changes to the CSS code that will apply to ONLY that skin.  For example, [[MediaWiki:Pivot.css]].}}
# Each skin has a page that contains MEpedia-specific changes to the CSS code that will apply to ONLY that skin.  For example, [[MediaWiki:Pivot.css]].
# When updating check the new code using the [https://jigsaw.w3.org/css-validator/#validate_by_input+with_options w3c css validator], vendor extension and "same color" errors can be ignored.}}


==Please overwrite [[MediaWiki:Timeless.css]] code with this instead ==
==Requests ==
 
==Changes to consider in future==
===Colors to set based on github code===
Needs validating and testing
{{collapse top|See code}}
<pre>
#simpleSearch {
box-shadow: inset 0 2px 4px 0 rgba( 255, 255, 255, 0.05 );
background: #333;
border: solid 1px #000;
}
.suggestions-results {
    color: #ccc; 
    background-color: #333;
}
.tools-inline li:hover, .tools-inline li:selected {
border-bottom-color: #ccc;
}
.tools-inline li a {
    color: #eee;
}
 
.thumbinner .thumbimage,
.thumbborder {
border: solid 1px #000;
}
.tocnumber {
color: #ccc;
}
 
/* screen-desktop.less  */
#p-variants-desktop .dropdown a {
color: #eee;
}
</pre>
{{collapse bottom}}
~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 21:31, October 7, 2020 (UTC)
 
===Colors to be looked into further ===
The github code for the timeless skin sets those colors in addition to those from vector
{{collapse top|'''Not a request for changes...'''}}
<pre>
/* converted to css from mixins.less */
.box {
background: @base90;
border: solid @base80;
border-width: 1px 1px @border;
box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
}
.nav-block h3 {
border-bottom: solid 2px @base70;
}
.dropdown-header:after {
background-image: url( images/arrow-down-grey.svg );
background-position: center center;
background-repeat: no-repeat;
}
.dropdown-menu( @direction: right ) {
background: @background;
box-shadow: 0 2px 3px 1px rgba( 0, 0, 0, 0.05 );
}
.dropdown-pokey:before {
border-bottom: 10px solid @base80;
}
.dropdown-pokey:after {
border-bottom-color: @base100;
}
}
 
/* */
 
</pre>
~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) Njt 00:37, October 2, 2020 (UTC)
{{collapse bottom}}
 
==RedirectMsg code - not working ==
 
{{collapse top}}
/* Redirect arrow icon and redirect links
*/
/* disable while testing
.redirectMsg {
    filter: invert(100%);
    -webkit-filter: invert(100%);
    -moz-filter: invert(100%);
    -o-filter: invert(100%);
    -ms-filter: invert(100%);
}
*/
 
div.redirectMsg ul.redirectText li a
{ /* undo inverted colors for link */
  /*  color: #A94B16; */
/* disable while testing
    filter: none;
*/
}
{{collapse bottom}}
 
Further suggestion:
<pre> /* redirect classes */
div.redirectMsg
a.mw-redirect
</pre>
 
==Done==
 
==Old requests ==
===Sitenotice and Anonnotice line color===
[[User:JaimeS]] Immediately after the lines <pre>hr {
    border-color: #000;
    background-color: #333;
}</pre> please add the new code  (as usual, without the "pre" tags).
<pre>
/* Set ruled line color on [[MediaWiki:Anonnotice]] and [[MediaWiki:Sitenotice]] to white */
.border-notice hr {
  border-color: white;
  background-color: transparent;
}
</pre>
This will affect the Timeless dark skin only. Thank you  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 11:30, August 10, 2022 (UTC)
 
===Fonts and bold in definition lists ===
There is a fault in the current Timeless.css live code, where the headings of definition lists aren't in bold. But also the fonts in the lists are serif fonts which looks really odd. This code fixes both the heading not being in bold and the font change, both vector and pivot skins already keep a consistent font.
 
[[User:Kmdenmark]] Please add this code at the end of the [[MediaWiki:Timeless.css]] skin code<pre>
  /* override serif fonts from @fonts-secondary */
  .mw-body dl, .mw-body dt, .mw-body dd, dl, dt, dd {
  font-family: inherit;
  }
  /* definition lists */
  .mw-body dt { font-weight: bold;}
/* end definition lists */
/* forms */
form {
    background-color: #000;
    color: #ccc;
}
</pre>
Example page code for testing the new code: [[Migraine#Phases]], when using Timeless skin. (The definition lists are rarely used.) Thank you  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 19:37, October 16, 2021 (UTC)
:Done  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 13:56, April 12, 2022 (UTC)
 
===Code editing colors ===
{{collapse top}}
add
<pre>.mf { color: #eee; !important}
</pre>
~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 19:53, October 27, 2020 (UTC)
:Now added  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 17:25, November 18, 2020 (UTC)
{{collapse bottom}}
 
===Logo fixes for different screens sizes ===
{{collapse top}}
[[User:Kmdenmark]] Can you replace the code below, which ends in two lines containing only a single "}". This will do some fixes for different screensizes. The most noticeable change is that the transparent website logo is filled in with white on larger screens, which makes it more readable. Thanks  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 17:46, October 20, 2020 (UTC)
 
<br />
Old code:
<pre>
@media screen and (max-width: 1099px) and (min-width: 851px) {
#mw-related-navigation .sidebar-chunk {
border-color: #333;
box-shadow: 2px 2px 1px rgba(0,0,0,0.5);
}
}
</pre>
New code:
<pre>
/* larger screens only white placeholder behind the MEpedia logo */
@media screen and (min-width: 851px) {
  #p-logo {
    background-color: #fff;
    background-size: contain;
  }
}
@media screen and (max-width: 1099px) and (min-width: 851px) {
#mw-related-navigation .sidebar-chunk  {
  border: 0;
  }
  #mw-header {
    background-color: #000;
  }
.color-bar {
  border-color: transparent;
}
#mw-related-navigation,
#page-tools,
#page-tools h2,
#user-tools,
#personal h3,
.sidebar-chunk,
.pokey {
    background: transparent !important;
    box-shadow: none;
  }
}
</pre>
{{collapse bottom}}
 
===Shade of red ===
{{collapse top}}
[[User:Kmdenmark]] Can you make the shades of red changes below. There are several sections to change, mostly just changing the shade of red used. It's in 5 different sections. I hope it's clear enough.  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 15:43, October 19, 2020 (UTC)<br /><br />
:[[User:Notjusttired|Njt]] Let me know if I did all the changes correctly. Done [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 20:33, November 10, 2020 (UTC)
::All three changes are great, thanks [[User:Kmdenmark]]  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 17:25, November 18, 2020 (UTC)
 
Old code 1
<pre>
/* wanted pages red color */
a.new, a.new:visited,
a.new:link, .new a:visited,
a.new:hover, .new a:hover,
a.new:active, .new a:active {
  color: #FF2000;
  text-shadow: 1px 1px black;
}
</pre>
<br />
New code 1:
<pre>
/* wanted pages red color without text shadow */
.new, a.new,
#p-personal a.new,
#p-personal a.new:visited,
a.new:link, .new a:link,
a.new:visited, .new a:visited,
a.new:hover, .new a:hover,
a.new:active, .new a:active {
  color: #FF5D5D;
  text-shadow: none;
}
</pre>
Old code 2
<pre>
/* red */
.mw-plusminus-neg, .error {
color: #FF2000;
}
</pre>
New code 2:
<pre>
/* red */
.mw-plusminus-neg, .error {
color: #FF5D5D;
}
</pre>
Old code 3:
<pre>
/* Color code snippets incl for errors  */
code {
    background-color: #ccc;
    color: #000;
    font-weight:bold;
}
 
.error code {
    color: #FF2000;
}
</pre>
New code 3:
<pre>
/* Color code snippets incl for errors */
/* red */
.red, .error {
color: #FF5D5D;
}
code {
    background-color: #ccc;
    color: #000;
    font-weight:bold;
}
/* red over white */
.error code {
  background: #fff;
  color: #cc0000!important;
}
</pre>
Old code 4 (at the very bottom)
<pre>
/* text colors */
.green { color: #33cc33;}
.red { color: #FF2000;}
.blue { color: skyblue;}
.gray { color: lightgray;}
</pre>
New code 4 (at the very bottom)
<pre>
/* text colors- red defined higher up */
.green { color: #33cc33;}
/* low vision sky blue */
.blue { color: #56b4e9;}
.gray { color: lightgray;}
</pre>
Old code 5 (2/3 of the way down the page - less important)
<pre>
.oo-ui-flaggedElement-destructive {
background: #000;
border-color: #444;
color: #FF2000!important;
}
.oo-ui-flaggedElement-destructive:hover {
background: #333;
color: #ff0000!important;
}
</pre>
<pre>
.oo-ui-flaggedElement-destructive {
background: #000;
border-color: #444;
color: #FF5D5D!important;
}
.oo-ui-flaggedElement-destructive:hover {
background: #333;
color: #FF5D5D!important;
}
</pre>
:Done [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 20:26, November 10, 2020 (UTC)
::Thanks  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 17:25, November 18, 2020 (UTC)
{{collapse bottom}}
 
===Delete this orange code===
{{collapse top}}
[[User:Kmdenmark]] Can you please find these 4 lines and delete them? They are about halfway down - right after a line of ******.  The last line to be deleted contains just a  } symbol. Thanks  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 16:43, October 17, 2020 (UTC)
<pre>
 
/* orange */
.mw-parser-output a.external {
color: #ff9900;
}
 
</pre>
 
:Done [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 20:24, November 10, 2020 (UTC)
::Thanks  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 17:25, November 18, 2020 (UTC)
{{collapse bottom}}
 
===Yellow/green view source link ===
{{collapse top}}
Non-urgent request: Please delete these 3 lines from about halfway down the page. I think it was originally testing code that should not have been copied across (my mistake). It's part of the code labeled as added in Oct 2020. [[User:Kmdenmark]]
<pre>
#mw-page-header-links li.selected a {
color: #999900;
}
</pre>
This should change the color back to blue/sky blue for pages that can't be edited.  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 00:49, October 15, 2020 (UTC)
 
====Re: Yellow/green view source link -- [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:40, October 15, 2020 (UTC)====
 
:: {{Done}} [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:40, October 15, 2020 (UTC)
 
::[[User:Notjusttired|Njt]], if I have skipped any requests, please flag them and I will do them. I worry that a few may miss being noticed. [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:53, October 15, 2020 (UTC)
:::That can happen when a lot of changes are requested in at once, but so far I'm checking and things are going well. Most of the recent changes have been very small, so easier to spot. Thanks again for your hard work [[User:Kmdenmark]].  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 21:53, October 15, 2020 (UTC)
{{collapse bottom}}
 
===bottom banner info message ===
{{collapse top}}
Non-urgent request: Please change this code [[User:Kmdenmark]]:
<pre>
.custom-bottom-banner {
  background-color: #333 !important;
}
</pre>
to this:
<pre>
/* overwrite lightyellow information disclaimer  */
.custom-bottom-banner {
  background: #111!important;
  color: #eee!important;
}
.custom-bottom-banner p {
    background: inherit;
    color: inherit;
}
</pre>
 
This will affect the dark Timeless skin by making the info message under references "The information provided at this site is not intended to diagnose..." have a black background on dark timeless skin. This can be tested with [https://me-pedia.org/index.php?title=vitamin&useskin=timeless this link].  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 00:40, October 15, 2020 (UTC)
 
====Re: bottom banner info message -- [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:46, October 15, 2020 (UTC)====
 
:: {{Done}} [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:46, October 15, 2020 (UTC)
{{collapse bottom}}
===Correct timeless text color ===
{{collapse top}}
[[User:Kmdenmark]] could you please change this code from
<pre>
.skin-timeless {
    background: #333;
    color:  #000;
}</pre>
to a black background and lighter text color:
<pre>
.skin-timeless {
    background: #000;
    color:  #ccc;
}
</pre>
 
~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 21:31, October 12, 2020 (UTC)
 
====Re: Correct timeless text color -- [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:49, October 15, 2020 (UTC)====
 
:: {{Done}} [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:49, October 15, 2020 (UTC)
 
===Re: Fix simple error -- [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 16:26, October 13, 2020 (UTC)===
 
: Replace this text with your reply
 
===Re: Requests -- [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:53, October 15, 2020 (UTC)===
 
: Replace this text with your reply
{{collapse bottom}}
===Done based on github code ===
{{collapse top|code added...}}
<pre>
/* overwrite screen-common.less colors */
#mw-content {
background: #000;
        color: #ccc;
        border-color: #aaa;
}
#contentSub {
color: #ccc;
}
.mw-datatable, .mw-datatable th, .mw-datatable tr,
.mw-datatable > tr > td, .mw-datatable > * > tr > th,
.mw-datatable > * > tr > td {
        background: #333;
color: #ccc;
}
.mw-datatable, .mw-datatable > tr > th, .mw-datatable > tr > td,
.mw-datatable > * > tr > th, .mw-datatable > * > tr > td,
.wikitable, .wikitable > tr > th, .wikitable > tr > td,
.wikitable > * > tr > th, .wikitable > * > tr > td {
border: 1px solid #000;
}
/* screen-mobile.less */
#menus-cover {
background: #aaa;
}
#mw-content-block {
        background: #333;
        color: #ccc;
}
/* change mw default colors */
/* forms mediawiki/resources/src/mediawiki.ui/components/forms.less */
.mw-ui-vform > label, .mw-ui-label {
color: #ccc;
}
</pre>
 
~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 15:58, October 2, 2020 (UTC)
{{collapse bottom}}
===Fix simple error ===
{{collapse top}}
[[User:Kmdenmark]] Can you please correct this by copying and pasting over the code below with the corrected code - which removes  the extra hyphen after "background". Code now:
 
: {{Done}}[[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]])
 
<pre>
 
/* addthis colors */
.addthis_default_style {
background-: inherit;
border-color: #000;
color: #ccc;
}
 
</pre>
Corrected code:
<pre>
 
/* addthis colors */
.addthis_default_style {
background: inherit;
border-color: #000;
color: #ccc;
}
 
</pre>
~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 22:20, October 7, 2020 (UTC)
{{Thanks}}  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 16:31, October 14, 2020 (UTC)
{{collapse bottom}}
===Colored text for use on pages===
{{collapse top |Done}}
Can this be added to the end of the existing code, it will allow several colors of text that will change to a lighter shade on this skin. [[User:Kmdenmark]]. See related changed at [[MediaWiki_talk:Common.css]]. This will be useful in some tables and for positive / negative symbols, possibly for viruses and bacteria. Thank you  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 01:26, August 22, 2020 (UTC)
:{{Done}} [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 13:26, August 24, 2020 (UTC)
<pre>
 
/* text colors */
.green { color: #33cc33;}
.red { color: #FF2000;}
.blue { color: skyblue;}
.gray { color: lightgray;}
 
/* dark text shadow, for use on light backgrounds */
.shadow { text-shadow: 2px 2px 4px #000;}
 
</pre>
'''This test code will only work when switching to the Timeless dark skin '''
<div>
Background color #33333.<br>
This is <span class="green">green</span>.
This is <span class="red">red</span>.
This is <span class="blue">blue</span>.
This is <span class="gray">gray</span>.
<span style="background:#f8f8f8" class="shadow">Text shadow over a light background.</span>
</div>
:Working nicely now, thanks  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 22:57, September 2, 2020 (UTC)
{{collapse bottom}}
==Done in 2019 or before ==
{{collapse top}}
===Non-urgent change ===
Please remove this code from the first place it appears (it incorrectly appears twice).  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 09:53, November 4, 2019 (EST)
:{{done}}
:[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 13:47, November 4, 2019 (EST)
::Thanks  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 13:14, November 5, 2019 (EST)
<pre>
/* Dropdown box autocomplete must not be navy */
/* Search results suggestion box */
.suggestions-results,
.suggestions-special {
    background-color: #000;
    border: solid 1px #aaa!important;
    color: #ccc;                       
}
</pre>
 
===More colors ===
 
External links are still sometimes orange, please change this code:
:{{done}}
:[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 15:08, November 5, 2019 (EST)
::{{Thank}}. For some reason the a.external is being overwritten, can you amend again with !important (see new code below, which I just edited). Also is there a timeless.css for dark colors on the server, do you know the path to it? I'm wondering if this is the reason for some issues I'm having. [[User:Pyrrhus]]  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 07:40, November 8, 2019 (EST)
:::{{done}}
:::[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 16:06, November 8, 2019 (EST)
{{Thank}}  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 23:36, November 12, 2019 (EST)
 
 
<pre>
/* external links light blue-gray not rapture blue */
.mw-body-content a.external,
.mw-body-content a.interwiki,
.mw-body a.extiw, a.extiw::after,
.mw-body-content a.interwiki:link,
.mw-body-content a.interwiki:visited,
.uls-language-list a,
a.external:visited, a.external:hover,
a.external:active, a.external:active::after {
color: #A7C5DC;
}
</pre>
to:
<pre>
/* external links light blue-gray not rapture blue */
.mw-body-content a.external,
.mw-body-content a.interwiki,
.mw-body a.extiw,
.mw-body-content a.interwiki:link,
.mw-body-content a.interwiki:visited,
.uls-language-list a,
a.external:link, a.external:visited,    a.external:hover, a.external:active {
color: #A7C5DC!important;
}
</pre>
 
===.box syntax error (and legend css hack error)===
 
It seems that a syntax error may be causing some lines not to work. I presume it's valid for 
.less files but not in this css. Can you change this:
<pre>
/* 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;
}
</pre>
to:
<pre>
/* recent changes colors */
.mw-changeslist-legend,
.mw-body .mw-search-profile-tabs,
.mw-body fieldset#mw-searchoptions {
color: #ccc;
}
</pre>
Then also change the legend code from:
<pre>
legend a {
    .current: #eee!important;
    :link: #eee!important;
    :visited: #eee!important;
}
</pre>
to:
<pre>
fieldset, legend, legend a,
legend a.current,
legend a:link, legend a:visited {
    color: #eee!important;
}
</pre>
I am having problems  with both legend and fieldset values not working, although it may need other changes yet. Thanks [[User:Pyrrhus]]  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 21:10, November 9, 2019 (EST)
 
:{{done}}
:[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 12:14, November 12, 2019 (EST)
::Thanks [[User:Pyrrhus]]  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 23:36, November 12, 2019 (EST)
 
===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 [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]])
[[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 [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]])
[[User:JenB]] Can you copy this code below over to [[MediaWiki:Timeless.css]]. [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 18:11, June 1, 2019 (EDT)
[[User:JenB]] Can you copy this code below over to [[MediaWiki:Timeless.css]]. [[User:Notjusttired|notjusttired]] ([[User talk: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.
:[[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.
::{{done}}
::[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 22:05, October 20, 2019 (EDT)
:::Great, {{Thank}} [[User:Pyrrhus]]. Deleting the code that's now live  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 19:22, October 23, 2019 (EDT)
===Portal code change ===
[[User:Pyrrhus]] please change (overwrite) this code:
:{{done}}
:[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 21:04, October 23, 2019 (EDT)
::Thanks  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 11:43, October 27, 2019 (EDT)
<pre>
/* 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;
}
</pre>
with this new code:
<pre>
/* 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;
}
</pre>
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  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 20:15, October 23, 2019 (EDT)
===New code ===
Please add to the end of existing code. Changes are:
* 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.
Thanks  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 20:22, October 23, 2019 (EDT)
:{{done}}
:[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 21:05, October 23, 2019 (EDT)
::Thanks  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 11:43, October 27, 2019 (EDT)


<pre>
<pre>


/* 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 ;
}
</pre>
===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  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 11:43, October 27, 2019 (EDT)
:{{done}}
:[[User:Pyrrhus|Pyrrhus]] ([[User talk: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 <code><nowiki >margin-right: -0.10em;</nowiki></code>. [[User:Pyrrhus]]  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 22:29, October 27, 2019 (EDT)
:::{{done}}
:::[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 23:58, October 27, 2019 (EDT)
:::::Thanks [[User:Pyrrhus]]. Can you try deleting the <nowiki >margin-right: -0.15em;</nowiki > 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 <nowiki >margin-right: -0.15em;</nowiki > should sort it.  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 10:33, October 28, 2019 (EDT)
Old code:
<pre>
#p-logo-text a::before {
  content: "#";
  font-family: Oswald, sans-serif;
  font-style: italic;
  font-variant: normal;
  margin-right: -0.3em;
}
</pre>
Changed code for #MEpedia so # and MEpedia don't overlap on mobiles / small screens where the name is used instead of the logo:
<pre>
#p-logo-text a::before {
  content: "#";
  font-family: Oswald, sans-serif;
  font-style: italic;
  font-variant: normal;
  margin-right: -0.15em;
}
</pre>
New code for images:
<pre>
.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;
}
/* Brighter icons eg for Done ticks */
.bright {
  filter: brightness(200%)
}
.brighter {
  filter: brightness(350%)
}
</pre>
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  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|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  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 10:33, October 28, 2019 (EDT)
===Red and green shade changes===
[[User:Pyrrhus]] Please see my comment above, and edit the live page to change:
* all #FF4444 to #FF2000 (brighter red) - there's about 3 places to change this
* .mw-plusminus-pos color to #33cc33 (was #33aa33)
*  .oo-ui-flaggedElement-destructive:hover color to #ff0000 !important; (was #cc0000 !important;)
and this code:
<pre>
.mw-plusminus-neg {
color: #FF4444;
}
</pre>
to this (including adding the 'red' comment)
<pre>
/* red */
.mw-plusminus-neg {
color: #FF2000;
}
</pre>
Results can be seen in the red and green on the [https://www.me-pedia.org/index.php?title=Special:RecentChanges&useskin=timeless recent changes page, timeless skin] (use this link to avoid changing your preferences). I will be asking for more color changes soon but would rather not do all at once. Thanks  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 14:01, November 2, 2019 (EDT)
:Sure, just post below the new content for this page and I'll overwrite the existing content.  [[User:Notjusttired|Njt]]
:[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 21:03, November 2, 2019 (EDT)
::New code below. I have also added in/changed:
* new page classes for same shade of red
* external link and footer links to light blue-gray
* inherit font color when using strong or em tags
* invert redirect icon color
* talk signature no longer black on black
* tooltip colors
::Please mark as major change, for red, green, blue link color changes  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 18:41, November 3, 2019 (EST)
:::{{done}}
:::[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 19:48, November 3, 2019 (EST)
::::{{Thank}} This looks so much better now!  ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 09:43, November 4, 2019 (EST)
<pre>
/* CSS placed here will affect users of the Timeless skin */
/* CSS placed here will affect users of the Timeless skin */


Line 25: Line 911:
}
}


/* make orange brighter using low vision colors */
/* set background to black for header/footer banners */
a, a:link, a:active {
.custom-top-banner {
/* unvisited links */
  background-color: rgb(0,0,0) !important;
color: #E69F00;
}
.custom-bottom-banner {
  background-color: rgb(0,0,0) !important;
}
 
/* adjust background color for "class=mw-lingo-term"
  tooltips without a lingo definition */
.qtip-content {
  background-color: #333;
}
}
.current, .current a {  
 
/* Content types etc on search results */
/* Sky blue using low vision color */
a, a:link, a:visited, a:hover, a:active,
/* content types etc on search results */
a.current, .current a {  
/* unvisited links use :link */
color: #56b4e9;
}
 
/* Brighter orange */
.orange, .orange a {
   color: #E69F00!important;
   color: #E69F00!important;
}
}
/* wanted pages red color */
/* wanted pages red color */
a.new, a.new:hover, .new a:hover, a.new:visited, .new a:visited {  
a.new, a.new:visited,
   color: #FF4444;
a.new:link, .new a:visited,
a.new:hover, .new a:hover,
a.new:active, .new a:active {  
   color: #FF2000;
  text-shadow: 1px 1px black;
}
}
/* stubs lighter than low vision sky blue */
/* stubs lighter than low vision sky blue */
a.stub {
a.stub, a.stub:link, a.stub:visited,
a.stub:hover, a.stub:active {
   color: #86d4f9 !important;
   color: #86d4f9 !important;
}
}
/* low vision sky blue shade for some headings and visited */
/* low vision sky blue shade for headings */
h2, h3, h4, a:visited, a:hover, a.link:visited {
h2, h3, h4, h5, h6, h7,
/* jump to arrow from references */
.mw-cite-backlink {
   color: #56b4e9;
   color: #56b4e9;
}
/* external links light blue-gray not rapture blue */
.mw-body-content a.external,
.mw-body-content a.interwiki,
.mw-body a.extiw, a.extiw::after,
.mw-body-content a.interwiki:link,
.mw-body-content a.interwiki:visited,
.uls-language-list a,
a.external:visited, a.external:hover,
a.external:active, a.external:active::after {
color: #A7C5DC;
}
}
/* external links rapture blue shade */
/* these are external links but don't use the external class in the footer */
.mw-body-content a.external,
#mw-footer-container a,
a.external:visited {
#mw-footer-container a:link,
color: #83BFCE;
#mw-footer-container a:visited {
  color: #A7C5DC!important;
}
}


Line 73: Line 996:
text-shadow: 1px 1px 1px #000;
text-shadow: 1px 1px 1px #000;
}
}
strong, em {
color: inherit;
}
/* reference redirects image */
.redirectText img {
filter: invert(100%);
}
div.editOptions {
div.editOptions {
border-color: #aaa;
border-color: #aaa;
Line 212: Line 1,144:
   font-style: italic;
   font-style: italic;
   font-variant: normal;
   font-variant: normal;
  margin-right: -0.3em;
}
}


Line 298: Line 1,229:
}
}
.color-bar {
.color-bar {
background: #E7453A ;
background: #E7453A;
}
}


Line 389: Line 1,320:
}  
}  
/* class=transparent available for template icons */
/* class=transparent available for template icons */
.transparent
img.transparent, .transparent img,
{
div.transparent, .mbox-image > img,
background: #transparent;
.transparent .thumbinner, .transparent .image {
background: transparent;
        border: 0!important;
}
}


Line 438: Line 1,371:
/* end of visual editor colors  */
/* end of visual editor colors  */


/* De-Color user signature links (black-on-black) */
a:not([class]) font, a:not([class]) span, a:not([class]) bold {
    background-color:inherit!important;
    color:inherit!important;
}
/* Color explanations with tool tips */
abbr, acronym, .explain {
    border-color: #000;
    color: #ccc;
    background-color: #333;
}
.codeEditor-status {
.codeEditor-status {
color: #555;
color: #555;
Line 467: Line 1,412:
background: #000;
background: #000;
border-color: #444;
border-color: #444;
color: #FF4444 !important;
color: #FF2000!important;
}
}
.oo-ui-flaggedElement-destructive:hover {
.oo-ui-flaggedElement-destructive:hover {
background: #333;
background: #333;
color: #CC0000 !important;
color: #ff0000!important;
}
}
#searchInput {
#searchInput {
Line 515: Line 1,460:
/* green */
/* green */
.mw-plusminus-pos {
.mw-plusminus-pos {
  color: #33aa33;
  color: #33cc33;
  }
  }
/* red */
.mw-plusminus-neg {
.mw-plusminus-neg {
color: #FF0000;
color: #FF2000;
}
}
.autocomment {
.autocomment {
Line 530: Line 1,476:
}
}
.diff-addedline .diffchange {
.diff-addedline .diffchange {
background: #ff4444;
background: #ff2000;
}
}
.oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button, .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
.oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button, .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
Line 591: Line 1,537:
}
}


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


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


Line 693: Line 1,648:


/* end of dark CSS Oct 15 2019*/
/* end of dark CSS Oct 15 2019*/
/* 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 ;
}
.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;
}
.white {
  background: #fff;
  filter: invert(0%);
}
.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;
}
/* Brighter icons eg for Done ticks */
.bright {
  filter: brightness(200%)
}
.brighter {
  filter: brightness(350%)


</pre>
</pre>
{{collapse bottom}}

Latest revision as of 00:55, July 4, 2023


Requests[edit source | reply | new]

Changes to consider in future[edit source | reply | new]

Colors to set based on github code[edit source | reply | new]

Needs validating and testing

See code
#simpleSearch {
	box-shadow: inset 0 2px 4px 0 rgba( 255, 255, 255, 0.05 );
	background: #333;
	border: solid 1px #000;
}
.suggestions-results {
    color: #ccc;   
    background-color: #333;
}
.tools-inline li:hover, .tools-inline li:selected {
	border-bottom-color: #ccc;
}
.tools-inline li a {
     color: #eee;
}

.thumbinner .thumbimage,
.thumbborder {
	border: solid 1px #000;
}
.tocnumber {
	color: #ccc;
}

/* screen-desktop.less  */
#p-variants-desktop .dropdown a {
			color: #eee;
}

~Njt (talk) 21:31, October 7, 2020 (UTC)

Colors to be looked into further[edit source | reply | new]

The github code for the timeless skin sets those colors in addition to those from vector

Not a request for changes...
/* converted to css from mixins.less */
.box {
	background: @base90;
	border: solid @base80;
	border-width: 1px 1px @border;
	box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
}
.nav-block h3 {
		border-bottom: solid 2px @base70;
}
.dropdown-header:after {
		background-image: url( images/arrow-down-grey.svg );
		background-position: center center;
		background-repeat: no-repeat;
}
.dropdown-menu( @direction: right ) {
	background: @background;
	box-shadow: 0 2px 3px 1px rgba( 0, 0, 0, 0.05 );
}
.dropdown-pokey:before {
		border-bottom: 10px solid @base80;
	}
.dropdown-pokey:after {
		border-bottom-color: @base100;
	}
}

/* */

~Njt (talk) Njt 00:37, October 2, 2020 (UTC)

RedirectMsg code - not working[edit source | reply | new]

content hidden

/* Redirect arrow icon and redirect links

  • /

/* disable while testing .redirectMsg {

   filter: invert(100%); 
   -webkit-filter: invert(100%);
   -moz-filter: invert(100%);
   -o-filter: invert(100%);
   -ms-filter: invert(100%);

}

  • /

div.redirectMsg ul.redirectText li a { /* undo inverted colors for link */

 /*   color: #A94B16; */

/* disable while testing

    filter: none; 
  • /

}

Further suggestion:

 /* redirect classes */
div.redirectMsg
a.mw-redirect

Done[edit source | reply | new]

Old requests[edit source | reply | new]

Sitenotice and Anonnotice line color[edit source | reply | new]

User:JaimeS Immediately after the lines

hr {
    border-color: #000;
    background-color: #333;
}

please add the new code (as usual, without the "pre" tags).

/* Set ruled line color on [[MediaWiki:Anonnotice]] and [[MediaWiki:Sitenotice]] to white */
.border-notice hr {
  border-color: white;
  background-color: transparent;
}

This will affect the Timeless dark skin only. Thank you ~Njt (talk) 11:30, August 10, 2022 (UTC)

Fonts and bold in definition lists[edit source | reply | new]

There is a fault in the current Timeless.css live code, where the headings of definition lists aren't in bold. But also the fonts in the lists are serif fonts which looks really odd. This code fixes both the heading not being in bold and the font change, both vector and pivot skins already keep a consistent font.

User:Kmdenmark Please add this code at the end of the MediaWiki:Timeless.css skin code

  /* override serif fonts from @fonts-secondary */
  .mw-body dl, .mw-body dt, .mw-body dd, dl, dt, dd {
   font-family: inherit;
   }
 
  /* definition lists */
 
  .mw-body dt { font-weight: bold;}
 
 /* end definition lists */
 
 /* forms */
 form {
    background-color: #000;
    color: #ccc;
 }

Example page code for testing the new code: Migraine#Phases, when using Timeless skin. (The definition lists are rarely used.) Thank you ~Njt (talk) 19:37, October 16, 2021 (UTC)

Done ~Njt (talk) 13:56, April 12, 2022 (UTC)

Code editing colors[edit source | reply | new]

content hidden

add

.mf { color: #eee; !important}
~Njt (talk) 19:53, October 27, 2020 (UTC)
Now added ~Njt (talk) 17:25, November 18, 2020 (UTC)

Logo fixes for different screens sizes[edit source | reply | new]

content hidden

User:Kmdenmark Can you replace the code below, which ends in two lines containing only a single "}". This will do some fixes for different screensizes. The most noticeable change is that the transparent website logo is filled in with white on larger screens, which makes it more readable. Thanks ~Njt (talk) 17:46, October 20, 2020 (UTC)


Old code:

@media screen and (max-width: 1099px) and (min-width: 851px) {
#mw-related-navigation .sidebar-chunk {
	border-color: #333;
	box-shadow: 2px 2px 1px rgba(0,0,0,0.5);
}
}

New code:

/* larger screens only white placeholder behind the MEpedia logo */
@media screen and (min-width: 851px) {
  #p-logo {
    background-color: #fff;
    background-size: contain;
  }
}
@media screen and (max-width: 1099px) and (min-width: 851px) {
 #mw-related-navigation .sidebar-chunk   {
   border: 0;
   }
  #mw-header {
     background-color: #000;
  }
 .color-bar {
   border-color: transparent;
 }
 #mw-related-navigation,
 #page-tools,
 #page-tools h2,
 #user-tools,
 #personal h3,
 .sidebar-chunk,
 .pokey {
     background: transparent !important;
     box-shadow: none;
   } 
}

Shade of red[edit source | reply | new]

content hidden

User:Kmdenmark Can you make the shades of red changes below. There are several sections to change, mostly just changing the shade of red used. It's in 5 different sections. I hope it's clear enough. ~Njt (talk) 15:43, October 19, 2020 (UTC)

Njt Let me know if I did all the changes correctly. Done Kmdenmark (talk) 20:33, November 10, 2020 (UTC)
All three changes are great, thanks User:Kmdenmark ~Njt (talk) 17:25, November 18, 2020 (UTC)

Old code 1

/* wanted pages red color */
a.new, a.new:visited,
a.new:link, .new a:visited,
a.new:hover, .new a:hover,
a.new:active, .new a:active { 
  color: #FF2000;
  text-shadow: 1px 1px black;
}


New code 1:

/* wanted pages red color without text shadow */
.new, a.new, 
#p-personal a.new,
#p-personal a.new:visited,
a.new:link, .new a:link,
a.new:visited, .new a:visited,
a.new:hover, .new a:hover,
a.new:active, .new a:active { 
  color: #FF5D5D;
  text-shadow: none;
}

Old code 2

/* red */
.mw-plusminus-neg, .error {
	color: #FF2000;
}

New code 2:

/* red */
.mw-plusminus-neg, .error {
	color: #FF5D5D;
}

Old code 3:

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

.error code { 
    color: #FF2000; 
}

New code 3:

/* Color code snippets incl for errors */
/* red */
.red, .error {
 color: #FF5D5D;
}
code { 
    background-color: #ccc; 
    color: #000; 
    font-weight:bold;
}
/* red over white */
.error code { 
   background: #fff;
   color: #cc0000!important;
}

Old code 4 (at the very bottom)

/* text colors */
.green { color: #33cc33;}
.red { color: #FF2000;}
.blue { color: skyblue;}
.gray { color: lightgray;}

New code 4 (at the very bottom)

/* text colors- red defined higher up */
.green { color: #33cc33;}
/* low vision sky blue */
.blue { color: #56b4e9;} 
.gray { color: lightgray;}

Old code 5 (2/3 of the way down the page - less important)

.oo-ui-flaggedElement-destructive {
	background: #000;
	border-color: #444;
	color: #FF2000!important;
}
.oo-ui-flaggedElement-destructive:hover {
	background: #333;
	color: #ff0000!important;
}
.oo-ui-flaggedElement-destructive {
	background: #000;
	border-color: #444;
	color: #FF5D5D!important;
}
.oo-ui-flaggedElement-destructive:hover {
	background: #333;
	color: #FF5D5D!important;
}
Done Kmdenmark (talk) 20:26, November 10, 2020 (UTC)
Thanks ~Njt (talk) 17:25, November 18, 2020 (UTC)

Delete this orange code[edit source | reply | new]

content hidden

User:Kmdenmark Can you please find these 4 lines and delete them? They are about halfway down - right after a line of ******. The last line to be deleted contains just a } symbol. Thanks ~Njt (talk) 16:43, October 17, 2020 (UTC)


/* orange */
.mw-parser-output a.external {
	color: #ff9900;
}

Done Kmdenmark (talk) 20:24, November 10, 2020 (UTC)
Thanks ~Njt (talk) 17:25, November 18, 2020 (UTC)

Yellow/green view source link[edit source | reply | new]

content hidden

Non-urgent request: Please delete these 3 lines from about halfway down the page. I think it was originally testing code that should not have been copied across (my mistake). It's part of the code labeled as added in Oct 2020. User:Kmdenmark

#mw-page-header-links li.selected a {
	color: #999900;
}

This should change the color back to blue/sky blue for pages that can't be edited. ~Njt (talk) 00:49, October 15, 2020 (UTC)

Re: Yellow/green view source link -- Kmdenmark (talk) 17:40, October 15, 2020 (UTC)[edit source | reply | new]

✓ Done Kmdenmark (talk) 17:40, October 15, 2020 (UTC)
Njt, if I have skipped any requests, please flag them and I will do them. I worry that a few may miss being noticed. Kmdenmark (talk) 17:53, October 15, 2020 (UTC)
That can happen when a lot of changes are requested in at once, but so far I'm checking and things are going well. Most of the recent changes have been very small, so easier to spot. Thanks again for your hard work User:Kmdenmark. ~Njt (talk) 21:53, October 15, 2020 (UTC)

bottom banner info message[edit source | reply | new]

content hidden

Non-urgent request: Please change this code User:Kmdenmark:

.custom-bottom-banner {
   background-color: #333 !important;
}

to this:

/* overwrite lightyellow information disclaimer  */
.custom-bottom-banner {
   background: #111!important;
   color: #eee!important;
}
.custom-bottom-banner p {
    background: inherit;
    color: inherit;
}

This will affect the dark Timeless skin by making the info message under references "The information provided at this site is not intended to diagnose..." have a black background on dark timeless skin. This can be tested with this link. ~Njt (talk) 00:40, October 15, 2020 (UTC)

Re: bottom banner info message -- Kmdenmark (talk) 17:46, October 15, 2020 (UTC)[edit source | reply | new]

✓ Done Kmdenmark (talk) 17:46, October 15, 2020 (UTC)

Correct timeless text color[edit source | reply | new]

content hidden

User:Kmdenmark could you please change this code from

.skin-timeless {
    background: #333;
    color:  #000;
}

to a black background and lighter text color:

.skin-timeless {
    background: #000;
    color:  #ccc;
}
~Njt (talk) 21:31, October 12, 2020 (UTC)

Re: Correct timeless text color -- Kmdenmark (talk) 17:49, October 15, 2020 (UTC)[edit source | reply | new]

✓ Done Kmdenmark (talk) 17:49, October 15, 2020 (UTC)

Re: Fix simple error -- Kmdenmark (talk) 16:26, October 13, 2020 (UTC)[edit source | reply | new]

Replace this text with your reply

Re: Requests -- Kmdenmark (talk) 17:53, October 15, 2020 (UTC)[edit source | reply | new]

Replace this text with your reply

Done based on github code[edit source | reply | new]

code added...
/* overwrite screen-common.less colors */
#mw-content {
	background: #000;
        color: #ccc; 
        border-color: #aaa;
}
#contentSub {
	color: #ccc;
}
.mw-datatable, .mw-datatable th, .mw-datatable tr, 
.mw-datatable > tr > td, .mw-datatable > * > tr > th,
 .mw-datatable > * > tr > td {
        background: #333;
	color: #ccc;
}
.mw-datatable, .mw-datatable > tr > th, .mw-datatable > tr > td,
.mw-datatable > * > tr > th, .mw-datatable > * > tr > td,
.wikitable, .wikitable > tr > th, .wikitable > tr > td,
.wikitable > * > tr > th, .wikitable > * > tr > td {
	border: 1px solid #000;
}
/* screen-mobile.less */
#menus-cover {
	background: #aaa;
}
#mw-content-block {
        background: #333;
        color: #ccc;
}
/* change mw default colors */
/* forms mediawiki/resources/src/mediawiki.ui/components/forms.less */
.mw-ui-vform > label, .mw-ui-label {
	color: #ccc;
} 
~Njt (talk) 15:58, October 2, 2020 (UTC)

Fix simple error[edit source | reply | new]

content hidden

User:Kmdenmark Can you please correct this by copying and pasting over the code below with the corrected code - which removes the extra hyphen after "background". Code now:

✓ DoneKmdenmark (talk)

/* addthis colors */
.addthis_default_style {
background-: inherit;
border-color: #000;
color: #ccc;
}

Corrected code:


/* addthis colors */
.addthis_default_style {
background: inherit;
border-color: #000;
color: #ccc;
}

~Njt (talk) 22:20, October 7, 2020 (UTC)

Smiley face Thanks ~Njt (talk) 16:31, October 14, 2020 (UTC)

Colored text for use on pages[edit source | reply | new]

Done

Can this be added to the end of the existing code, it will allow several colors of text that will change to a lighter shade on this skin. User:Kmdenmark. See related changed at MediaWiki_talk:Common.css. This will be useful in some tables and for positive / negative symbols, possibly for viruses and bacteria. Thank you ~Njt (talk) 01:26, August 22, 2020 (UTC)

✓ Done Kmdenmark (talk) 13:26, August 24, 2020 (UTC)

/* text colors */
.green { color: #33cc33;}
.red { color: #FF2000;}
.blue { color: skyblue;}
.gray { color: lightgray;}

/* dark text shadow, for use on light backgrounds */
.shadow { text-shadow: 2px 2px 4px #000;}

This test code will only work when switching to the Timeless dark skin

Background color #33333.
This is green. This is red. This is blue. This is gray. Text shadow over a light background.

Working nicely now, thanks ~Njt (talk) 22:57, September 2, 2020 (UTC)

Done in 2019 or before[edit source | reply | new]

content hidden

Non-urgent change[edit source | reply | new]

Please remove this code from the first place it appears (it incorrectly appears twice). ~Njt (talk) 09:53, November 4, 2019 (EST)

✓ Done
Pyrrhus (talk) 13:47, November 4, 2019 (EST)
Thanks ~Njt (talk) 13:14, November 5, 2019 (EST)
/* Dropdown box autocomplete must not be navy */
/* Search results suggestion box */
.suggestions-results,
 .suggestions-special {
    background-color: #000;
    border: solid 1px #aaa!important;
    color: #ccc;                        
}

More colors[edit source | reply | new]

External links are still sometimes orange, please change this code:

✓ Done
Pyrrhus (talk) 15:08, November 5, 2019 (EST)
Smiley face Thanks. For some reason the a.external is being overwritten, can you amend again with !important (see new code below, which I just edited). Also is there a timeless.css for dark colors on the server, do you know the path to it? I'm wondering if this is the reason for some issues I'm having. User:Pyrrhus ~Njt (talk) 07:40, November 8, 2019 (EST)
✓ Done
Pyrrhus (talk) 16:06, November 8, 2019 (EST)

Smiley face Thanks ~Njt (talk) 23:36, November 12, 2019 (EST)


/* external links light blue-gray not rapture blue */
.mw-body-content a.external,
.mw-body-content a.interwiki,
 .mw-body a.extiw, a.extiw::after,
 .mw-body-content a.interwiki:link,
 .mw-body-content a.interwiki:visited, 
 .uls-language-list a,
 a.external:visited, a.external:hover,
 a.external:active, a.external:active::after {
 color: #A7C5DC;
}

to:

/* external links light blue-gray not rapture blue */
.mw-body-content a.external,
.mw-body-content a.interwiki,
 .mw-body a.extiw,
 .mw-body-content a.interwiki:link,
 .mw-body-content a.interwiki:visited, 
 .uls-language-list a,
 a.external:link, a.external:visited,    a.external:hover, a.external:active {
 color: #A7C5DC!important;
}

.box syntax error (and legend css hack error)[edit source | reply | new]

It seems that a syntax error may be causing some lines not to work. I presume it's valid for .less files but not in this css. Can you change this:

/* 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;
}

to:

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

Then also change the legend code from:

legend a {
    .current: #eee!important;
    :link: #eee!important;
    :visited: #eee!important;
}

to:

fieldset, legend, legend a, 
legend a.current,
legend a:link, legend a:visited {
    color: #eee!important;
}

I am having problems with both legend and fieldset values not working, although it may need other changes yet. Thanks User:Pyrrhus ~Njt (talk) 21:10, November 9, 2019 (EST)

✓ Done
Pyrrhus (talk) 12:14, November 12, 2019 (EST)
Thanks User:Pyrrhus ~Njt (talk) 23:36, November 12, 2019 (EST)

Please overwrite MediaWiki:Timeless.css code with this instead[edit source | reply | new]

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.
✓ Done
Pyrrhus (talk) 22:05, October 20, 2019 (EDT)
Great, Smiley face Thanks User:Pyrrhus. Deleting the code that's now live ~Njt (talk) 19:22, October 23, 2019 (EDT)

Portal code change[edit source | reply | new]

User:Pyrrhus please change (overwrite) this code:

✓ Done
Pyrrhus (talk) 21:04, October 23, 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[edit source | reply | new]

Please add to the end of existing code. Changes are:

  • 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.

Thanks ~Njt (talk) 20:22, October 23, 2019 (EDT)

✓ Done
Pyrrhus (talk) 21:05, October 23, 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[edit source | reply | new]

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)

✓ Done
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 margin-right: -0.10em;. User:Pyrrhus ~Njt (talk) 22:29, October 27, 2019 (EDT)
✓ Done
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:

#p-logo-text a::before { 
  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:

#p-logo-text a::before { 
  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;
}

/* 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[edit source | reply | new]

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)

Red and green shade changes[edit source | reply | new]

User:Pyrrhus Please see my comment above, and edit the live page to change:

  • all #FF4444 to #FF2000 (brighter red) - there's about 3 places to change this
  • .mw-plusminus-pos color to #33cc33 (was #33aa33)
  • .oo-ui-flaggedElement-destructive:hover color to #ff0000 !important; (was #cc0000 !important;)

and this code:

.mw-plusminus-neg {
	color: #FF4444;
}

to this (including adding the 'red' comment)

/* red */
.mw-plusminus-neg {
	color: #FF2000;
}

Results can be seen in the red and green on the recent changes page, timeless skin (use this link to avoid changing your preferences). I will be asking for more color changes soon but would rather not do all at once. Thanks ~Njt (talk) 14:01, November 2, 2019 (EDT)

Sure, just post below the new content for this page and I'll overwrite the existing content. Njt
Pyrrhus (talk) 21:03, November 2, 2019 (EDT)
New code below. I have also added in/changed:
  • new page classes for same shade of red
  • external link and footer links to light blue-gray
  • inherit font color when using strong or em tags
  • invert redirect icon color
  • talk signature no longer black on black
  • tooltip colors
Please mark as major change, for red, green, blue link color changes ~Njt (talk) 18:41, November 3, 2019 (EST)
✓ Done
Pyrrhus (talk) 19:48, November 3, 2019 (EST)
Smiley face Thanks This looks so much better now! ~Njt (talk) 09:43, November 4, 2019 (EST)
/* CSS placed here will affect users of the Timeless skin */

html {
	background: rgb(0,0,0) !important;
	height: 100%;
	filter: brightness(100%) contrast(100%) grayscale(0%) !important;
	-webkit-filter: brightness(100%) contrast(100%) grayscale(0%) !important;
}
body {
	margin: 0;
	background: #000;
	color: #ccc;
}

/* set background to black for header/footer banners */
.custom-top-banner {
   background-color: rgb(0,0,0) !important;
}
.custom-bottom-banner {
   background-color: rgb(0,0,0) !important;
}

/* adjust background color for "class=mw-lingo-term"
   tooltips without a lingo definition */
.qtip-content {
   background-color: #333;
}

/* Sky blue using low vision color */
a, a:link, a:visited, a:hover, a:active,
/* content types etc on search results */
a.current, .current a { 
 /* unvisited links use :link */
 color: #56b4e9;
}

/* Brighter orange */
.orange, .orange a { 
   color: #E69F00!important;
}
/* wanted pages red color */
a.new, a.new:visited,
a.new:link, .new a:visited,
a.new:hover, .new a:hover,
a.new:active, .new a:active { 
  color: #FF2000;
  text-shadow: 1px 1px black;
}
/* stubs lighter than low vision sky blue */
a.stub, a.stub:link, a.stub:visited,
 a.stub:hover, a.stub:active {
  color: #86d4f9 !important;
}
/* low vision sky blue shade for headings */
h2, h3, h4, h5, h6, h7,
/* jump to arrow from references */
.mw-cite-backlink {
  color: #56b4e9;
 }

/* external links light blue-gray not rapture blue */
.mw-body-content a.external,
.mw-body-content a.interwiki,
 .mw-body a.extiw, a.extiw::after,
 .mw-body-content a.interwiki:link,
 .mw-body-content a.interwiki:visited, 
 .uls-language-list a,
 a.external:visited, a.external:hover,
 a.external:active, a.external:active::after {
 color: #A7C5DC;
}
/*  these are external links but don't use the external class in the footer */
#mw-footer-container a,
#mw-footer-container a:link,
#mw-footer-container a:visited {
  color: #A7C5DC!important;
}

/* caption does site visits */
caption {
color: #ccc;
}
caption big {
 color: #bbb;
 font-weight: normal;
}

/* set dark colors where missing*/
h1 {
 color: #fff;
 text-shadow: 1px 1px 1px #000;
}

#personal .dropdown b {
	font-weight: normal;
}
b, strong {
	text-shadow: 1px 1px 1px #000;
}
strong, em {
 color: inherit;
}

/* reference redirects image */
.redirectText img {
 filter: invert(100%);
}

div.editOptions {
	border-color: #aaa;
	background: #555;
}
#mw-header-nav-hack {
	border-top: solid 2px #000;
	background: #333;
}
#mw-site-navigation .sidebar-inner {
	background: #333;
        color: #ccc;
	border: 0;
}

#mw-site-navigation .sidebar-chunk {
	border-color: #aaa;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	border-radius: 2px;
}
/* set dark colors where missing*/
#mw-wrapper, #mw-header, #mw-header-container,
.right-canvas-menu, 
.left-off-canvas-menu,
.off-canvas-list,
.sidebar-chunk,
#mw-content-text,
.toc, #toc,
#p-cactions
{
background-color: #000;
color: #ccc; 
border-color: #aaa;
}
.sidebar-inner {
background-color: #333!important;
color: #ccc;
border-color: #aaa;
}

/* set light colors where missing eg spans */
span, .label  {
  color: #eee;
}

.gallery, .gallerybox, #mw-content-text ul,
table, p, div, table ul, table li
{
	background: #333; 
	color: #ccc; 
        border-color: #000;
}

@media screen and (max-width: 851px) {
#user-tools { 
background-color: #000;
}

#user-tools h2 {
display: block;
}
#user-tools h2 ul {
   background-color: #333;
}

#user-tools { 
position: absolute;
right: 1em;
top: 0;
}

#personal-extra { 
  position: relative;
  left: -12rem;
  top: 0.75rem;
  background-color: transparent;
}
#personal-inner {
  background-color: #333;
}
#pt-notifications-alert,
#pt-notifications-notice { 
filter: invert(100%);
background-color: transparent;
}
} /* end small screen changes */
/**********************************/

/* orange */
.mw-parser-output a.external {
	color: #ff9900;
}
#searchInput-container {
	background: #333;
}
#simpleSearch {
	border-color: #000;
	border-radius: 3px;
}
/* Dropdown box autocomplete must not be navy */
/* Search results suggestion box */
.suggestions-results,
 .suggestions-special {
    background-color: #000;
    border: solid 1px #aaa!important;
    color: #ccc;                        
}

div#simpleSearch,
.suggestions-special .special-label,
.suggestions-result,
.suggestions-special .special-query {
    color: #ccc!important;   
    background-color: #333!important;
}
#searchButton {
  border-color: transparent!important;
}

.mw-notification {
	background: #000;
	border-color: #333;
	border-radius: 5px;
	color: #999;
}
.mw-wiki-logo {
  background-size: contain;
}
#p-logo-text a, #p-logo-text {
  background-color: #000;
  color: #eeeeee;
  font-family: Oswald, sans-serif;
  font-style: italic;
  font-variant: small-caps;
}
#p-logo-text a::before { 
  content: "#";
  font-family: Oswald, sans-serif;
  font-style: italic;
  font-variant: normal;
}

/* Dropdown box autocomplete must not be navy */
/* Search results suggestion box */
.suggestions-results,
 .suggestions-special {
    background-color: #000;
    border: solid 1px #aaa!important;
    color: #ccc;                        
}

/* addthis colors */
.addthis_default_style {
background-color: #000 !important;
border-color: #000;
color: #ccc;
}
#mw-header {
	width: 100%;
	max-width: 100%;
	padding: 0;
	position: static;
}
@media screen and (max-width: 850px) {
#menus-cover {
	background: #000;
}
}

#mw-content-block {
 background: #000;
 border-bottom: #000 solid 2px;
 border: none;
}

	
#footer-container, 
#footer-bottom, #mw-footer {
 background-color: #000;
 border: none;
}

 #mw-content-container {
border-bottom: #E7453A 5px solid;
background: #333;
}
.mw-body {
border: none;
color: #ccc;
}

#mw-site-navigation {
	background: #000;
}
#mw-content {
	background: #333;
	border: solid #000;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}
#mw-page-header-links li.selected a {
	color: #999900;
}
#mw-related-navigation .sidebar-chunk {
	border: outset #333;
	box-shadow: 2px 2px 1px rgba(0,0,0,0.5);
	border-radius: 3px;
}

.color-left, .color-right {
background-color: #333;
}
.color-left-container, 
.color-right-container, 
.color-middle-container,
.color-middle {
background-color: #E7453A;
color: #333;
overflow: hidden;
}
.color-bar {
background: #E7453A;
}


/* Table background colors and allow scroll off side */
table { 
    background-color: #333;
    color: #ccc;
    border-color: #000;
    overflow-x: auto;
}
th {
    background-color: #333;
    color: #ccc;
    border-color: #000;
}
tr, td {
    background-color: #333;
    color: #ccc; 
    border-color: #000;
}

/* Tabular tables - used on main page  */
table.wikitable {
  border-color: #000 !important;
  color: #ccc;
  text-align: center;
  background-color: #000;
  text-shadow: 2px 2px 4px #000;
}
.wikitable tr {
  background-color: #333;
  border-color: #000;
  color: #eee;
}
.wikitable > * > tr > th {
  background-color: #454544!important;
  border-color: #000;
  color: #fff!important;
}

.wikitable tr, .wikitable tr td {
  background-color: #333;
  border-color: #000 !important;
  color: #ccc;
}

/* JQuery white sort arrows  */
table.jquery-tablesorter th.headerSort {
    filter: invert(100%);
}
table.jquery-tablesorter th.headerSortUp {
    filter: invert(100%);
}
table.jquery-tablesorter th.headerSortDown {
    filter: invert(100%);
}
@media screen and (max-width: 1099px) and (min-width: 851px) {
#mw-related-navigation .sidebar-chunk {
	border-color: #333;
	box-shadow: 2px 2px 1px rgba(0,0,0,0.5);
}
}

#personal h2 {
	text-shadow: 1px 1px 0 #333;
}
#personal .dropdown {
 background: #333! important;
	border-color: #000;
}

/* transparent images need white background */
img { 
color: white;
background-color: #333;
border: 0;
}
/* Images - transparent images need white background */
.mw-body img {
    border: 1px solid #000;
    background-color: #FFF;
}

/* gallery image border */
.thumb, .image { 
margin: 0.5rem auto; 
background-color: #333 !important;
border: 1px solid #000 !important;
} 
/* class=transparent available for template icons */
img.transparent, .transparent img,
 div.transparent, .mbox-image > img,
 .transparent .thumbinner, .transparent .image {
	background: transparent;
        border: 0!important;
}

hr {
    border-color: #000;
    background-color: #333;
}

/* bullet points within Portal gallery or Portal table sections */
ul.gallery, .gallerybox > div, td > ul, td > p, td div, div div {
color: #ccc; 
background-color: #333;
border-color: #333;
}

/* Visual editor colors */
.oo-ui-toolbar-bar {
 background: #000;
 color: #000;
 border: 0;
}

.oo-ui-clippableElement-clippable {
 background: #333;
 color: #fff;
}

/* Cite button text */ 
 .oo-ui-tool-title,
 .oo-ui-tool-accel  {
  color: #fff!important ;
}
.oo-ui-tool, .oo-ui-tool-link
 {
  background: #000;
  color: #fff!important;
}
.oo-ui-toolbar-bar {
 border: transparent ;
}
.oo-ui-buttonElement-button {
  background-color: #444; 
  color: #eee;
  border-color: #000;
}
/* end of visual editor colors  */

/* De-Color user signature links (black-on-black) */
a:not([class]) font, a:not([class]) span, a:not([class]) bold {
    background-color:inherit!important;
    color:inherit!important;
}

/* Color explanations with tool tips */
abbr, acronym, .explain {
    border-color: #000;
    color: #ccc;
    background-color: #333;
}
.codeEditor-status {
	color: #555;
}
.oo-ui-labelElement-label {
	text-shadow: 1px 2px #333;
}
#wpSave {
	text-shadow: 1px 1px 1px #000 !important
}
#mw-footer-container {
	background: #000;
}
fieldset {
  background: #333! important;
  border-color: #000;
}
input {
	background: #333;
	border-color: #000!important;
	border-radius: 2px;
	color: #ccc;
}
.mw-ui-button.mw-ui-progressive, .mw-ui-button.mw-ui-progressive:active, .mw-ui-button.mw-ui-progressive.mw-ui-checked, input[type='submit'], input[type='button'], button {
	border-color: #333!important;
	text-shadow: 0 0 0 #000 !important;
}
.oo-ui-flaggedElement-destructive {
	background: #000;
	border-color: #444;
	color: #FF2000!important;
}
.oo-ui-flaggedElement-destructive:hover {
	background: #333;
	color: #ff0000!important;
}
#searchInput {
	border: 0!important;
}
.oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea {
	background-color: #333;
	color: #ccc;
}
#pagehistory li.selected {
	background-color: #555;
}
.warningbox {
	background: #333;
}
.mw-body-text {
  color: #ccc;
}
.mw-indicators {
/* symbols need filter */
 background-color: transparent!important;
 filter: invert(100%);
 border: none;
}

#mw-indicator-mw-helplink a {
 color: #000!important;
}
#mw-indicator-mw-helplink {
 background: inherit!important;
}
.mw-changeslist-legend {
 background: transparent;
 color: #ccc!important;
}

.mw-changeslist-legend-plusminus {
 color: #ccc;
}
.mw-plusminus-null { 
color: #bbb;
 } 
/* green */
.mw-plusminus-pos {
 color: #33cc33;
 }
/* red */
.mw-plusminus-neg {
	color: #FF2000;
}
.autocomment {
  color: #ccc; 
} 
#mw-footer-container a:hover {
	color: #00ffff;
}
#mw-footer-container a:visited {
	color: #56b4e9;
}
.diff-addedline .diffchange {
	background: #ff2000;
}
.oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button, .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
	text-shadow: 0 0 0 #000 !important;
}
.oo-ui-labelElement-label {
	text-shadow: 0 0 0 #000
}
.oo-ui-panelLayout-expanded {
	background: #333;
}
.oo-ui-messageDialog-message {
	color: #999;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
	color: #999;
}
.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
	border-right: 1px solid #000
}
.oo-ui-dialog-content > .oo-ui-window-body {
	outline: 1px solid #000;
}
.oo-ui-messageDialog-content > .oo-ui-window-foot {
	outline: 1px solid #000;
}

textarea[style] {
	background: #000 !important;
	color: #fff;
}
pre, .mw-code {
	background: #222;
	color: #B0B0B0;
	border: 1px solid #444;
}
.oo-ui-iconWidget.oo-ui-iconElement.oo-ui-iconElement-icon {
	background-color: #999;
	border: 1px solid #333;
}

/* search results had defaulted to black, and dark green for date, size under results  */
.searchResults {
  background-color: #333;
  color: #aaa;
}
.results-info, .mw-search-result-data {
  color: #aaa;
}
.shortcutbox { 
 background: #222;
} 

/* 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: #FF2000; 
}

/* wikieditor controls */
.wikiEditor-ui .wikiEditor-ui-view {
	border: 1px solid #000;
}
.wikiEditor-ui .wikiEditor-ui-top {
	border-bottom: 1px solid #000;
}
.wikiEditor-ui,
.wikiEditor-section-main
 {
    background-color: #333!important;
   filter: none;
   color: #ccc ;
  }

/* wikieditor code, bold and italics */
.group-codeeditor-main,
.group.group-format,
.group-size, .group-format span,
.group-insert span
 {
  background-color: #fff!important;
  color: #333!important;
  filter: invert(100%)!important;
}

/* wikieditor background and icons without text */
.group {
  background-color: #000!important;
  color: #fff!important;  
}

.wikiEditor-ui-toolbar div.tabs a:link,
.wikiEditor-ui-toolbar div.tabs a:visited,
.section-characters div.index div {
 background-color: #000;
 color: #fff;
 filter: none!important;
}

.wikiEditor-ui-toolbar,
.toolbar, .sections, .tabs, .tab {
 background-color: #000!important;
 color: #000!important;
 border-color: #000;
}

.oo-ui-widget {
 background: #333;
 color: #eee;
}
/* wikieditor tools end */

/* Recent changes title area */
fieldset {
 background-color: #333;
 color: #fff;
 border-color: #333;
}

/* add to existing mobile section margins */
#mw-body, #mw-content {
 padding-left: 1px;
 padding-right: 1px;
}
legend {
    border-color: #000;
    color: #ccc!important;
    background-color: #333!important;
}
legend a {
    .current: #eee!important;
    :link: #eee!important;
    :visited: #eee!important;
}
/* License images */
.layouttemplate tr td img,
.layouttemplate tr td p img {
 filter: invert(100%);
 background: transparent;
 border-color: transparent;
}

.suggestions-query, .suggestions-special {
 background-color: #222!important;
}

/* end of dark CSS Oct 15 2019*/

/* 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 ;
}

.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;
}
.white {
  background: #fff;
  filter: invert(0%);
}
.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;
}

/* Brighter icons eg for Done ticks */
.bright {
  filter: brightness(200%)
}
.brighter {
  filter: brightness(350%)