MediaWiki:Common.css: Difference between revisions

From Pummel Party Mod Documentation
Jump to navigation Jump to search
mNo edit summary
m (Moved colors into varibles)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
/* Colors */
:root {
  --text: #eeeeee;
  --border: #eeeeee;
  --link: #768dcc;
  --link-visited: #a18dcc;
 
  --darkest-bg: #141417;
  --mid-bg: #212121;
  --light-bg: #404040;
}


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


.wikitable {
.wikitable {
     background-color: #212121;
     background-color: var(--mid-bg);
     color: #eeeeee;
     color: var(--text);
     margin: 1em 0;
     margin: 1em 0;
     border: 1px solid #a2a9b1;
     border: 1px solid #a2a9b1;
Line 18: Line 36:


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


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


a:visited, #mw-panel .vector-menu-content li a:visited {
a:visited, #mw-panel .vector-menu-content li a:visited {
   color: #a18dcc;
   color: #a18dcc;
}
body {
  background-color: #141417;
}
}


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


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


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


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


.selected.mw-list-item{
.selected.mw-list-item{
   background-color: #212121;
   background-color: var(--mid-bg);
   background-image: none;
   background-image: none;
    
    
Line 57: Line 71:


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


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

Revision as of 00:06, 6 December 2022

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

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

  --link: #768dcc;
  --link-visited: #a18dcc;
  

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

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

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: #a18dcc;
}

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

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

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

.mw-list-item, .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);
}