MediaWiki:Common.css: Difference between revisions

Revision as of 00:56, 6 December 2022

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

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

  --link: #83adff;
  --link-visited: #cb9bff;
  --link-red: #ff787b;

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

  --accent-color: #ffd187;
}


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


/* 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(--mid-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(--light-bg);
}

#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)
}

#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);
}

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);
}

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(--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%);
}

/* Can't use var() in here for whatever reason. Using --text-faded color*/
li::marker {
 color: #cccccc;
}