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