MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

/* Edit These Variables! */
:root{
    --light-text: #735751;
    --light-headings: #735751;
    --light-content-bg: #e7d7c1;

    --light-link: #A11B1B ;
    --light-link-visited: #A11B1B ;
    --light-link-hover: #06e;

    --dark-text: #E7D7C1;
    --dark-headings: #e7d7c1;
    --dark-content-bg: #3D2E2A;

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

/*Careful Below*/

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

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

/*DarkMode - invert text and background (can add darkMode variables)*/
:root.client-darkmode{
    --var-text-color: var(--dark-text);
    --var-background-color: var(--dark-content-bg);

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

}
.client-darkmode #content{
     filter: invert( 1 ) hue-rotate( 180deg ) !important; 
     -webkit-filter: invert( 1 ) hue-rotate( 180deg ) !important;
}






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

/* Table of Contents */
#toc {
  max-height: calc(60vh - 20px);
  overflow-y: auto;
  float: right; 
  margin:0 0 1em 1em; 
  position:fixed; 
  bottom:10px; 
  right:10px;
  display:flex;
  flex-direction: column;
  z-index: 10000000;
  padding: 20px;
  transition: all 0.5s;
};


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