MediaWiki:Common.css: Difference between revisions

Revision as of 00:08, 26 August 2026

/*
===============================================================================
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;
}