MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
mNo edit summary |
||
(65 intermediate revisions by the same user not shown) | |||
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: #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 */ | /* Custom classes */ | ||
.main-page-section { | .main-page-section { | ||
border-left: 1px solid | border-left: 1px solid var(--accent-color); | ||
background-color: | 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 */ | |||
/* 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 { | h1, h2, h3, h4, h5, h6, p { | ||
color: | 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 { | 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: | color: var(--link-visited); | ||
} | } | ||
body { | .mw-body { | ||
border: 1px solid var(--accent-color); | |||
color: var(--text); | |||
} | } | ||
#content { | #content { | ||
background-color: | background-color: var(--mid-bg); | ||
} | } | ||
.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; | ||
} | |||
.vector-menu-tabs { | |||
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: # | 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); | |||
} | } |
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); }