MediaWiki:Common.css

From WargameChess

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */

/* Edit These Variables! */
:root{
  --light-content-bg: #e7d7c1;
  --light-toc-background:  #e7d7c1;

  --light-text: #735751;
  --light-headings: #735751;
  
  --light-link: #A11B1B ;
  --light-link-visited: #A11B1B ;
  --light-link-hover: #06e;



  --dark-content-bg: #73e3ec;  /* THIS COLOR NEEDS TO BE INVERTED FROM WHAT YOU WANT. (eg. yellow for blue)  (https://www.invertcolors.net/)  */
  --dark-toc-background:  #18283e;

  --dark-text: #E7D7C1;
  --dark-headings: #e7d7c1;

  --dark-link: #A78A7F;
  --dark-link-visited: #A78A7F ;
  --dark-link-hover: #BF4342;
}





/*Careful Below*/

/*LightMode*/
:root{
  --var-background-color: var(--light-content-bg);

  --var-toc-background : var(--light-toc-background);

  --var-text-color: var(--light-text);
  --var-headings : var(--light-headings);
  --var-headings-invert: var(--dark-headings);


  --var-link: var(--light-link);
  --var-link-visited: var(--light-link-visited);
  --var-link-hover: var(--light-link-hover);
  --var-link-active: #000;
}
:root.skin-theme-clientpref-night{
  --var-background-color: var(--dark-content-bg);

  --var-toc-background : var(--dark-toc-background);

  --var-text-color: var(--dark-text);
  --var-headings : var(--dark-headings);
  --var-headings-invert: var(--light-headings);

  --var-link: var(--dark-link);
  --var-link-visited: var(--dark-link-visited);
  --var-link-hover: var(--dark-link-hover);
  --var-link-active: #000;
}

.skin-theme-clientpref-night:not(.mw-invert), 
.client-darkmode:not(.mw-invert), 
.skin-theme-clientpref-night img:not(.mw-invert), 
.client-darkmode img:not(.mw-invert), 
.skin-theme-clientpref-night video:not(.mw-invert), 
.client-darkmode video:not(.mw-invert), 
.skin-theme-clientpref-night svg:not(.mw-invert), 
.client-darkmode svg:not(.mw-invert), 
.skin-theme-clientpref-night iframe:not(.mw-invert), 
.client-darkmode iframe:not(.mw-invert), 
.skin-theme-clientpref-night .mw-no-invert:not(.mw-invert), 
.client-darkmode .mw-no-invert:not(.mw-invert), 
.skin-theme-clientpref-night .cdx-no-invert:not(.mw-invert), 
.client-darkmode .cdx-no-invert:not(.mw-invert), 
.skin-theme-clientpref-night td .diffchange:not(.mw-invert), 
.client-darkmode td .diffchange:not(.mw-invert), 
.skin-theme-clientpref-night .skin-minerva .mw-notification-visible .mw-notification-content:not(.mw-invert), 
.client-darkmode .skin-minerva .mw-notification-visible .mw-notification-content:not(.mw-invert){
filter: invert(1);
  -webkit-filter: invert(1);
}



#footer #footer-icons{
float: left;
}

/* Table of Contents */

#toc {
max-height: calc(60vh - 20px);
float: right; 
margin:0 0 1em 1em; 
position:fixed !important; 
bottom:10px !important; 
right:10px !important;
z-index: 10000000;
padding: 20px;
background-color: var(--var-toc-background);
};

#toc h2{
color: var(--var-text-color) !important;
}

.skin-theme-clientpref-night #toc label{
  filter: invert( 1