MediaWiki:Common.css: Difference between revisions

Revision as of 00:24, 6 December 2022

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

/* Colors */
:root {
  --text: #eeeeee;
  --text-faded: #cccccc;
  --border: #eeeeee;

  --link: #96b0ff;
  --link-visited: #c2b2ff;

  --darkest-bg: #141417;
  --mid-bg: #212121;
  --light-bg: #404040;
}


/* Custom classes */
.main-page-section {
  border-left: 1px solid var(--text); 
  background-color: var(--darkest-bg); 
  padding: 0.5em 1em; 
  margin-bottom: 1em;
}


/* Override existing classes */

#catlinks {
  background-color: var(--light-bg);
}

.wikitable {
    background-color: var(--mid-bg);
    color: var(--text);
    margin: 1em 0;
    border: 1px solid #a2a9b1;
    border-collapse: collapse;
}

/*Table header*/
.wikitable > tr > th, .wikitable > * > tr > th{
  background-color: var(--light-bg);
}

#toc, div.thumbinner {
    border: 1px solid var(--border);
    background-color: var(--light-bg);
}

#toc .tocnumber {
  color: var(--text-faded);
}

div.thumbinner .thumbcaption {
  color: var(--text-faded)
}

.footer-info-lastmod {
  color: var(--text-faded)
}

.vector-search-box-input {
  background-color: var(--light-bg);
  color: var(--text);
}


h1, h2, h3, h4, h5, h6, p {
  color: var(--text);
}

a, #mw-panel .vector-menu-content li a {
  color: var(--link);
}

a:visited, #mw-panel .vector-menu-content li a:visited {
  color: var(--link-visited);
}

.mw-body {
  border: 1px solid var(--border);
}

body, #mw-head {
  background-color: var(--darkest-bg);
}

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

.vector-menu-tabs li{
  background-color: var(--mid-bg);
  background-image: linear-gradient(to top, var(--light-bg) 0, var(--mid-bg) 100%);
}

.selected.mw-list-item{
  background-color: var(--mid-bg);
  background-image: none;
  
}

.vector-menu-tabs {
  background-image: linear-gradient(to bottom, var(--mid-bg) 0, var(--border) 100%);
}

.vector-menu-tabs .selected a {
  color: var(--text);
}

.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited {
  color: var(--link-visited);
}