MediaWiki:Common.css: Difference between revisions

From Pummel Party Mod Documentation
Jump to navigation Jump to search
(Color thumbnails and table of contents)
mNo edit summary
 
(59 intermediate revisions by the same user not shown)
Line 3: Line 3:
/* Colors */
/* Colors */
:root {
:root {
   --text: #eeeeee;
   --text: #DFDFDF;
   --border: #eeeeee;
  --text-faded: #cccccc;
   --border: #314B52;
  --border-faded: #314B52;


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


   --darkest-bg: #141417;
   --table-header: #1b2c31;
   --mid-bg: #212121;
   --mid-bg: #212121;
   --light-bg: #404040;
   --light-bg: #161616;
 
  --accent-color: #314B52;
  --underline: #314B52;
}
}


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


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


/* Override existing classes */
/* 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 {
.wikitable {
     background-color: var(--mid-bg);
     background-color: var(--light-bg);
     color: var(--text);
     color: var(--text);
     margin: 1em 0;
     margin: 1em 0;
     border: 1px solid #a2a9b1;
     border: 1px solid var(--border-faded);
     border-collapse: collapse;
     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 {
#toc, div.thumbinner {
     border: 1px solid var(--border);
     border: 1px solid var(--border-faded);
     background-color: var(--light-bg);
     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 {
.vector-search-box-input {
   background-color: var(--light-bg);
   background-color: var(--light-bg);
  border: 1px solid var(--border-faded);
   color: var(--text);
   color: var(--text);
}
}
Line 48: Line 92:
h1, h2, h3, h4, h5, h6, p {
h1, h2, h3, h4, h5, h6, p {
   color: var(--text);
   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%);
}
}


Line 55: Line 107:


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


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


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


#content {
#content {
Line 70: Line 121:
}
}


.mw-list-item, .vector-menu-tabs li{
.vector-menu-tabs li{
   background-color: var(--mid-bg);
   background-color: var(--mid-bg);
   background-image: linear-gradient(to top, var(--light-bg) 0, var(--mid-bg) 100%);
   background-image: linear-gradient(to top, var(--light-bg) 0, var(--mid-bg) 100%);
Line 82: Line 133:


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


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


.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited {
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited {
   color: var(--link-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) */
}
/* Remove the bullet points added by the section above for some things.*/
#bodyContent .catlinks ul li::before, #bodyContent #toc ul li::before, #bodyContent ul.gallery li::before,  #bodyContent .mw-search-results li::before, #bodyContent .search-types li::before {
  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;
}
.mw-search-profile-tabs {
  color: var(--text);
  background-color: var(--light-bg);
  border: 1px solid var(--border);
}
.search-types .current a {
  color: var(--text);
}
}

Latest revision as of 23:47, 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) */
}

/* Remove the bullet points added by the section above for some things.*/
#bodyContent .catlinks ul li::before, #bodyContent #toc ul li::before, #bodyContent ul.gallery li::before,  #bodyContent .mw-search-results li::before, #bodyContent .search-types li::before {
  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;
}

.mw-search-profile-tabs {
  color: var(--text);
  background-color: var(--light-bg);
  border: 1px solid var(--border);
}

.search-types .current a {
  color: var(--text);
}