MediaWiki:Ommoncay.cssay

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

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

li:has(> .exuvia-dropdown-menu) > a {
    font-weight: bold !important;
    font-size: calc(1em + 2px) !important;
    color: #fff !important;
}


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

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

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

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

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

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