MediaWiki:Common.css: Difference between revisions

Latest revision as of 00:47, 27 August 2026

/* ============================================================
   TIMELESS DARK MODE
   ============================================================ */

@import url(
    "https://www.mediawiki.org/wiki/Skin:Timeless-DarkCSS/timeless-dark.css?action=raw&ctype=text/css"
);


/* ============================================================
   COLOR VARIABLES
   ============================================================ */

:root {
    --background: #111;
    --content: #181818;
    --panel: #202020;
    --input: #222;
    --border: #444;

    --text: #ddd;
    --heading: #eee;
    --muted-text: #aaa;

    --link: #75aadb;
    --visited-link: #a98bd4;
}


/* ============================================================
   PAGE BACKGROUND
   ============================================================ */

html,
body {
    background: var(--background) !important;
    color: var(--text) !important;
}


/* ============================================================
   MAIN CONTENT
   ============================================================ */

#mw-content-container {
    background: var(--background) !important;
    background-image: none !important;
}

#mw-content {
    background: var(--content) !important;
    color: var(--text) !important;
}


/* ============================================================
   HEADER
   ============================================================ */

#mw-header-container {
    background: var(--content) !important;
}


/* ============================================================
   SIDEBARS
   ============================================================ */

#mw-site-navigation,
#mw-related-navigation {
    background: var(--content) !important;
}

#mw-site-navigation .portal,
#mw-related-navigation .portal {
    background: var(--content) !important;
    color: var(--text) !important;
}

#mw-site-navigation .portal h3,
#mw-related-navigation .portal h3 {
    background: var(--input) !important;
    color: var(--heading) !important;
}

#mw-site-navigation ul,
#mw-site-navigation li,
#mw-related-navigation ul,
#mw-related-navigation li {
    background: transparent !important;
}

/* ============================================================
   LINKS
   ============================================================ */

a {
    color: var(--link) !important;
}

a:visited {
    color: var(--visited-link) !important;
}


/* ============================================================
   HEADINGS
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading) !important;
    border-color: var(--border) !important;
}


/* ============================================================
   SEARCH BAR
   ============================================================ */

#simpleSearch {
    background: var(--input) !important;
    border-color: var(--border) !important;
}

#searchInput {
    background: transparent !important;
    color: var(--heading) !important;
}


/* ============================================================
   SEARCH BUTTON
   ============================================================ */

.mw-searchButton {
    display: none !important;
}


/* ============================================================
   HIDE TIMELESS HEADER SEARCH BUTTON
   ============================================================ */

#p-search button,
#p-search .mw-ui-button,
#p-search input[type="submit"] {
    display: none !important;
}


/* ============================================================
   SEARCH PAGE TABS
   ============================================================ */

.mw-search-profile-tabs {
    background: #181818 !important;
    border-color: #444 !important;
}

.mw-search-profile-tabs li {
    background: #202020 !important;
    border-color: #444 !important;
}

.mw-search-profile-tabs a {
    background: #202020 !important;
    color: #ddd !important;
}

.mw-search-profile-tabs .selected,
.mw-search-profile-tabs .selected a {
    background: #181818 !important;
    color: #fff !important;
}

.mw-search-profile-tabs a:hover {
    background: #292929 !important;
    color: #fff !important;
}


/* ============================================================
   TABLES
   ============================================================ */

.wikitable,
.mw-datatable,
.mw-metadata {
    background: var(--panel) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

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


/* ============================================================
   INFOBOXES
   ============================================================ */

.infobox {
    background: var(--panel) !important;
    color: var(--text) !important;
}


/* ============================================================
   CODE BLOCKS
   ============================================================ */

pre,
code,
.mw-code {
    background: var(--panel) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}


/* ============================================================
   FORM INPUTS
   ============================================================ */

input,
textarea,
select {
    background: var(--input) !important;
    color: var(--heading) !important;
    border-color: #555 !important;
}


/* ============================================================
   TABLE OF CONTENTS
   ============================================================ */

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


/* ============================================================
   WIKI LOGO
   ============================================================ */

#p-logo-text {
    display: none !important;
}

#p-logo {
    background: transparent !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

.mw-footer-container,
.mw-footer {
    background: var(--background) !important;
    color: var(--muted-text) !important;
}


/* ============================================================
   DEFAULT FONT SIZE
   ============================================================ */

body {
    font-size: 16px;
}


/* ============================================================
   DROPDOWN LAYER 1 TITLES
   ============================================================ */

/*
 * Examples:
 *
 * Locations
 * Religions
 * People
 * World Building
 *
 * These are the main dropdown headings.
 */

li:has(> .exuvia-dropdown-level-1) > a {
    font-weight: bold !important;
    font-size: 16px !important;
    color: #fff !important;
}


/* ============================================================
   DROPDOWN LAYER 2 TITLES
   ============================================================ */

/*
 * Examples:
 *
 * Continents
 * Kingdoms
 * Towns
 *
 * These are the second-level dropdown headings.
 */

li:has(> .exuvia-dropdown-level-2) > a {
    font-size: 16px !important;
    font-weight: normal !important;
    color: #fff !important;
}


/* ============================================================
   DROPDOWN ARROWS
   ============================================================ */

.exuvia-dropdown-arrow {
    margin-left: 4px;
    font-size: 0.8em;
}


/* ============================================================
   DROPDOWN MENUS
   ============================================================ */

.exuvia-dropdown-menu {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--panel) !important;
}


/* ============================================================
   DROPDOWN MENU ITEMS
   ============================================================ */

.exuvia-dropdown-menu li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}


/* ============================================================
   DROPDOWN LINKS
   ============================================================ */

.exuvia-dropdown-menu a {
    display: block !important;
    padding: 8px 12px !important;
    background: transparent !important;
    color: var(--link) !important;
}


/* ============================================================
   DROPDOWN HOVER
   ============================================================ */

.exuvia-dropdown-menu a:hover {
    background: var(--input) !important;
}


/* ============================================================
   LAYER 2 INDENTATION
   ============================================================ */

/*
 * Gives second-level dropdowns a visual indentation from
 * their Layer 1 parent.
 */

.exuvia-dropdown-level-2 {
    padding-left: 10px !important;
}


/* ============================================================
   LAYER 2 PAGE LINKS
   ============================================================ */

/*
 * Normal pages underneath Layer 2 headings remain smaller
 * than the Layer 2 heading itself.
 */

.exuvia-dropdown-level-2 li a {
    font-size: 16px !important;
}


/*
 * Re-apply the Layer 2 heading formatting after the
 * normal-link rule above.
 */

li:has(> .exuvia-dropdown-level-2) > a {
    font-size: 16px !important;
    color: #fff !important;
}

/* ============================================================
   GLOBAL NON-SERIF FONT
   ============================================================ */

* {
    font-family: Arial, Helvetica, sans-serif !important;
}
/* ============================================================
   BODY TEXT SIZE
   ============================================================ */

.mw-body-content {
    font-size: 17px !important;
}