MediaWiki:Common.css: Difference between revisions

Revision as of 23:43, 6 December 2022

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

/* Colors */
:root {
  --text: #DFDFDF;
  --text-faded: #cccccc;
  --border: #314B52;
  --border-faded: #314B52;

  --link: #83adff;
  --link-visited: #6A8FAF;
  --link-red: #ff787b;

  --table-header: #1b2c31;
  --mid-bg: #212121;
  --light-bg: #161616;

  --accent-color: #314B52;
  --underline: #314B52;
}


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

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

/* Override existing classes */

/* The [hide] button on the table of contents */
.toctogglecheckbox:not(:checked) + .toctitle .toctogglelabel:after{
  color: var(--text-faded);
}

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

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

/* Table lines */
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
  border: 1px solid var(--border-faded);
}

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

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

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

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

.thumbimage {
  border: none;
}

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

.vector-search-box-input {
  background-color: var(--light-bg);
  border: 1px solid var(--border-faded);
  color: var(--text);
}


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

h1, h2 {
  border-bottom: 1px solid var(--underline);
}

.vector-menu-portal .vector-menu-heading {
  background-image: linear-gradient(to right, rgba(49,75,82,0) 0, var(--underline) 33%, var(--underline) 66%, rgba(49,75,82,0) 100%);
}

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(--accent-color);
  color: var(--text);
}



#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(--accent-color) 100%);
}

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

.vector-menu-tabs li a {
  color: var(--link);
}

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

.skin-vector-legacy a.new, a.new, .skin-vector-legacy .vector-menu-tabs .new a, .vector-menu-tabs .new a {
  color: var(--link-red);
}

/* The borders for the buttons along the top.*/
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
    background-image: linear-gradient(to bottom, var(--mid-bg) 0, var(--accent-color) 100%);
}

/* https://www.w3schools.com/howto/howto_css_bullet_color.asp */
#bodyContent ul {
  list-style: none; /* Remove default bullets */
}

#bodyContent ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: var(--text-faded);
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

#bodyContent .catlinks ul li::before, #bodyContent #toc ul li::before, #bodyContent ul.gallery li::before,  #bodyContent .mw-search-results li {
  content: "";
}

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

pre, code, .mw-code {
    background-color: var(--mid-bg);
    color: var(--text-faded);
    border: 1px solid var(--border);
}

.searchButton[name='go']{
  background-color: var(--border);
}

/*Get rid of a while line that appears one some pages in the top area. */
#mw-page-base {
    background-color: var(--light-bg);
    background-image: none;
}