MediaWiki:Common.css

/* 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: #deffff;  /* 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 ) !important; 
  -webkit-filter: invert( 1 ) !important;
}


.skin-theme-clientpref-night #toc h2{
  position: relative;
  color:var(--var-headings-invert);
}





#content-container {
transform: none !important;
}

/* unvisited links       */
.skin-theme-clientpref-night a,
.client-darkmode a,
a{ 
    color: var(--var-link) !important;
} 

.client-darkmode a:link,
.skin-theme-clientpref-night a:link,
a:link{ 
    color: var(--var-link) !important;
} 

/* visited links         */
.skin-theme-clientpref-night a:visited,
a:visited{ 
  color: var(--var-link-visited);
}  
/* user hovers, or focus */
.skin-theme-clientpref-night a:hover,
.skin-theme-clientpref-night a:focus,
a:hover, 
a:focus{ 
  color: var(--var-link-hover); 
}  
/* active links          */
.skin-theme-clientpref-night a:active,
a:active{ 
  color: var(--var-link-active);
}  

/* Hides links in Sidebar - Tools */
#t-whatlinkshere{
  display: none;
}
#t-recentchangeslinked{
  display: none;
}
#t-upload{
  display: none;
}
#t-specialpages{
  display: none;
}
#t-permalink{
  display: none;
}
#t-info{
  display: none;
}
#t-cite{
  display: none;
}

/* Hides links for Page and Discussion */
div#p-namespaces{
  display: none;
}


#content { 
  background-color: var(--var-background-color);
}

.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h6,
.mw-body h5{
color: var(--var-headings);
}

body { 
  color: var(--var-text-color); 
}

#footer{
z-index: 2;
}

table{
  display: block;

  max-width: 100%;
  overflow-x: auto;
  white-space:no-wrap;
}

@media screen and (max-width: 640px) {
#header #p-banner{
  padding: 0 0 0em 0.5em;
  margin: 0.75em 0 1.5em 0.5em;
}

#header #p-search{
  top: auto;
  bottom:0.5em;
  padding:0 1.5em 0.5em 0.5em;
  
}
}
@media screen and (max-width: 420px) {
#page-tools #p-actions{
  display:none;
}
}



.skin-theme-clientpref-night p,
.skin-theme-clientpref-night li{
  filter: invert( 1 ) !important; 
  -webkit-filter: invert( 1 ) !important;
  color:var(--var-text-color);
}

.skin-theme-clientpref-night h1 span,
.skin-theme-clientpref-night h2 span,
.skin-theme-clientpref-night h3 span,
.skin-theme-clientpref-night h4 span,
.skin-theme-clientpref-night h5 span,
.skin-theme-clientpref-night h6 span{
  filter: invert( 1 ) !important; 
  -webkit-filter: invert( 1 ) !important;
  color:var(--var-headings);
}

.skin-theme-clientpref-night .mw-wiki-title{
  filter: invert( 1 ) !important; 
  -webkit-filter: invert( 1 ) !important;
  color:var(--var-headings);
}

.skin-theme-clientpref-night .mw-wiki-title{
  filter: invert( 1 ) !important; 
  -webkit-filter: invert( 1 ) !important;
  color:var(--var-headings);
}


.skin-theme-clientpref-night .mw-echo-notifications-badge{
  filter: invert( 1 ) !important; 
  -webkit-filter: invert( 1 ) !important;
}




.skin-theme-clientpref-night #toc {
  filter: invert( 1 ) !important; 
  -webkit-filter: invert( 1 ) !important;
  color:var(--var-toc-background);
}
.skin-theme-clientpref-night #toc > ul,
.skin-theme-clientpref-night #toc > .toctitle{
  filter: invert( 1 ) !important; 
  -webkit-filter: invert( 1 ) !important;
}

.skin-theme-clientpref-night #toc .toclevel-2 > a > .tocnumber{
  filter: invert( 1 ) !important; 
  -webkit-filter: invert( 1 ) !important;
}

.skin-theme-clientpref-night #toc .tocnumber{
 color: var(--var-text-color);
}