MediaWiki:Common.css: Difference between revisions
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 | border-left: 1px solid var(--text); | ||
background-color: | 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: | background-color: var(--mid-bg); | ||
color: | 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: | color: var(--text); | ||
} | } | ||
a, #mw-panel .vector-menu-content li a { | a, #mw-panel .vector-menu-content li a { | ||
color: | 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; | ||
} | } | ||
.mw-body { | .mw-body { | ||
border: 1px solid | border: 1px solid var(--border); | ||
} | } | ||
#mw-head { | body, #mw-head { | ||
background-color: | background-color: var(--darkest-bg); | ||
} | } | ||
#content { | #content { | ||
background-color: | background-color: var(--mid-bg); | ||
} | } | ||
.mw-list-item, .vector-menu-tabs li{ | .mw-list-item, .vector-menu-tabs li{ | ||
background-color: | background-color: var(--mid-bg); | ||
background-image: linear-gradient(to top, | background-image: linear-gradient(to top, var(--light-bg) 0, var(--mid-bg) 100%); | ||
} | } | ||
.selected.mw-list-item{ | .selected.mw-list-item{ | ||
background-color: | 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, | background-image: linear-gradient(to bottom, var(--mid-bg) 0, var(--border) 100%); | ||
} | } | ||
.vector-menu-tabs .selected a { | .vector-menu-tabs .selected a { | ||
color: | 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);
}