MediaWiki:Common.css
From Exuvia Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/*
===============================================================================
TIMELESS DARK MODE
===============================================================================
This file controls the appearance of the Timeless skin.
The basic structure of CSS is:
selector {
property: value;
}
For example:
body {
background: black;
}
This means:
selector = body
property = background
value = black
The selector tells CSS WHAT to change.
The property tells CSS WHICH aspect to change.
The value tells CSS HOW to change it.
===============================================================================
*/
/*
===============================================================================
1. LOAD THE TIMELESS DARK THEME
===============================================================================
@import tells the browser to load another CSS file.
The file below is MediaWiki's Timeless DarkCSS stylesheet. Our rules below
it can override parts of that stylesheet.
===============================================================================
*/
@import url(
"https://www.mediawiki.org/wiki/Skin:Timeless-DarkCSS/timeless-dark.css?action=raw&ctype=text/css"
);
/*
===============================================================================
2. DEFINE OUR COLORS
===============================================================================
These are CSS variables.
A variable lets a color be defined once and reused throughout the stylesheet.
For example:
var(--background)
means:
"use whatever color was assigned to --background"
This makes changing the entire theme much easier.
===============================================================================
*/
:root {
--background: #111;
--content: #181818;
--panel: #202020;
--input: #222;
--border: #444;
--text: #ddd;
--heading: #eee;
--muted-text: #aaa;
--link: #75aadb;
--visited-link: #a98bd4;
}
/*
===============================================================================
3. PAGE BACKGROUND AND TEXT
===============================================================================
html and body are the two outermost elements of the page.
A comma means:
"apply this rule to BOTH selectors"
So:
html,
body
means the following rules apply to both <html> and <body>.
background controls the background color.
color controls the default text color.
===============================================================================
*/
html,
body {
background: var(--background) !important;
color: var(--text) !important;
}
/*
===============================================================================
4. MAIN TIMELESS CONTENT AREA
===============================================================================
# means an element is being selected by its ID.
For example:
#mw-content
selects:
<div id="mw-content">
IDs are normally unique on a page.
The !important declaration tells the browser that this rule should take
priority over competing rules with lower priority.
Timeless has its own CSS, so !important is useful here when overriding it.
===============================================================================
*/
#mw-content-container {
background: var(--background) !important;
background-image: none !important;
}
#mw-content {
background: var(--content) !important;
color: var(--text) !important;
}
/*
===============================================================================
5. HEADER
===============================================================================
The header is the area across the top of the Timeless page.
===============================================================================
*/
#mw-header-container {
background: var(--content) !important;
}
/*
===============================================================================
6. SIDEBARS
===============================================================================
These are the navigation areas on the left/right side of Timeless.
The comma means the same rules apply to both navigation areas.
===============================================================================
*/
#mw-site-navigation,
#mw-related-navigation {
background: var(--content) !important;
}
/*
A period means a CLASS selector.
For example:
.portal
selects every element whose class contains "portal".
Combining selectors like this:
#mw-site-navigation .portal
means:
"Find elements with class 'portal' that are inside the element
with ID 'mw-site-navigation'."
===============================================================================
*/
#mw-site-navigation .portal,
#mw-related-navigation .portal {
background: var(--content) !important;
color: var(--text) !important;
}
/*
===============================================================================
7. SIDEBAR HEADINGS
===============================================================================
These are the headings above groups of sidebar links.
===============================================================================
*/
#mw-site-navigation .portal h3,
#mw-related-navigation .portal h3 {
background: var(--input) !important;
color: var(--heading) !important;
}
/*
===============================================================================
8. SIDEBAR LISTS
===============================================================================
<ul> = unordered list
<li> = list item
The sidebar is largely made from lists.
"transparent" means:
"don't draw a background here"
This allows the darker sidebar background to show through.
===============================================================================
*/
#mw-site-navigation ul,
#mw-site-navigation li,
#mw-related-navigation ul,
#mw-related-navigation li {
background: transparent !important;
}
/*
===============================================================================
9. LINKS
===============================================================================
a selects hyperlinks.
:visited is a pseudo-class.
It means:
"a link the browser knows the user has visited"
This allows normal and visited links to have different colors.
===============================================================================
*/
a {
color: var(--link) !important;
}
a:visited {
color: var(--visited-link) !important;
}
/*
===============================================================================
10. HEADINGS
===============================================================================
These selectors target HTML heading elements.
h1 = largest/main heading
h2 = second-level heading
h3 = third-level heading
etc.
===============================================================================
*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--heading) !important;
border-color: var(--border) !important;
}
/*
===============================================================================
11. SEARCH BOX
===============================================================================
The search box is made of a container and an input field.
The container gets the dark background.
The input itself gets light text.
===============================================================================
*/
#simpleSearch {
background: var(--input) !important;
border-color: var(--border) !important;
}
#searchInput {
background: transparent !important;
color: var(--heading) !important;
}
/*
===============================================================================
12. TABLES
===============================================================================
.wikitable is MediaWiki's normal wiki table class.
.mw-datatable is used by some MediaWiki-generated tables.
.mw-metadata is used for metadata tables.
The period means these are CLASS selectors.
===============================================================================
*/
.wikitable,
.mw-datatable,
.mw-metadata {
background: var(--panel) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
/*
Table headers.
"th" means table header.
"td" means normal table cell.
===============================================================================
*/
.wikitable th,
.mw-datatable th {
background: #292929 !important;
color: var(--heading) !important;
}
.wikitable td,
.mw-datatable td {
background: var(--panel) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
/*
===============================================================================
13. INFOBOXES
===============================================================================
MediaWiki infoboxes normally use the class "infobox".
===============================================================================
*/
.infobox {
background: var(--panel) !important;
color: var(--text) !important;
}
/*
===============================================================================
14. CODE BLOCKS
===============================================================================
<pre> is normally used for blocks of preformatted text.
<code> is normally used for code.
.mw-code is a MediaWiki-specific code class.
===============================================================================
*/
pre,
code,
.mw-code {
background: var(--panel) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
/*
===============================================================================
15. FORM INPUTS
===============================================================================
This affects text boxes, text areas, and dropdown menus.
input = text boxes and other input controls
textarea = larger multi-line text boxes
select = dropdown menus
===============================================================================
*/
input,
textarea,
select {
background: var(--input) !important;
color: var(--heading) !important;
border-color: #555 !important;
}
/*
===============================================================================
16. TABLE OF CONTENTS
===============================================================================
.toc is the class MediaWiki uses for the automatic "Contents" box.
.toccolours is another class sometimes used by MediaWiki for similar boxes.
===============================================================================
*/
.toc,
.toccolours {
background: var(--panel) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
.toc a {
color: var(--link) !important;
}
.mw-body .toctitle {
color: var(--heading) !important;
border-color: var(--border) !important;
}
/*
===============================================================================
17. TIMELESS LOGO / WIKI TITLE
===============================================================================
Timeless normally displays the wiki name as a large "Exuvia Wiki" link.
#p-logo-text is the element containing that text.
display: none means:
"Do not display this element."
This removes the large wiki title completely.
===============================================================================
*/
#p-logo-text {
display: none !important;
}
/*
===============================================================================
18. LOGO BACKGROUND
===============================================================================
The actual logo container is separate from the text above.
transparent means that the element itself has no background color.
===============================================================================
*/
#p-logo {
background: transparent !important;
}
/*
===============================================================================
19. FOOTER
===============================================================================
The footer is the area at the bottom of the page.
===============================================================================
*/
.mw-footer-container,
.mw-footer {
background: var(--background) !important;
color: var(--muted-text) !important;
}
body {
font-size: 16px;
}
/*
===============================================================================
DROPDOWN TITLES
===============================================================================
The dropdown title is the link directly inside the <li> that also contains
.exuvia-dropdown-menu.
This does not depend on JavaScript-added classes.
===============================================================================
*/
li:has(> .exuvia-dropdown-menu) > a {
font-weight: bold !important;
font-size: calc(1em + 2px) !important;
color: #fff !important;
}
/*
===============================================================================
SEARCH BUTTON
===============================================================================
Timeless positions the search button inside/next to the search field.
The current dark-theme CSS is causing the button to overlap the input.
Give the search field enough room for the button.
===============================================================================
*/
#simpleSearch {
position: relative !important;
padding-right: 45px !important;
}
/*
Move the search button back to the right side of the search field.
*/
#simpleSearch {
#simpleSearch {
padding-right: 0 !important;
}
#searchInput {
padding-right: 0 !important;
}
/*
===============================================================================
SEARCH PAGE TABS
===============================================================================
These are the tabs at the top of Special:Search:
Content pages
Multimedia
Everything
Advanced
Timeless gives them a light/white background by default.
===============================================================================
*/
.mw-search-profile-tabs {
background: #181818 !important;
border-color: #444 !important;
}
/*
Each individual search tab.
*/
.mw-search-profile-tabs li {
background: #202020 !important;
border-color: #444 !important;
}
/*
The links inside the tabs.
*/
.mw-search-profile-tabs a {
background: #202020 !important;
color: #ddd !important;
}
/*
The currently selected tab.
*/
.mw-search-profile-tabs .selected,
.mw-search-profile-tabs .selected a {
background: #181818 !important;
color: #fff !important;
}
/*
Mouse-over effect.
*/
.mw-search-profile-tabs a:hover {
background: #292929 !important;
color: #fff !important;
}
