MediaWiki:Common.css: Difference between revisions

From Exuvia Wiki
No edit summary
No edit summary
Line 1: Line 1:
/* ============================================================
/* ============================================================
   TIMELESS DARK MODE
   SIDEBAR WIDTH
   ============================================================ */
   ============================================================ */


@import url(
/*
    "https://www.mediawiki.org/wiki/Skin:Timeless-DarkCSS/timeless-dark.css?action=raw&ctype=text/css"
* Timeless normally uses approximately 15em for the
);
* left navigation area.
*
* Increase it by 20%.
*/


 
#mw-site-navigation {
/* ============================================================
     width: 18em !important;
  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
   DROPDOWN LAYER 1
   ============================================================ */
   ============================================================ */


html,
/*
body {
* Examples:
    background: var(--background) !important;
*
    color: var(--text) !important;
* Locations
}
* Religions
* People
* World Building
*
* These remain the larger top-level headings.
*/


 
.exuvia-dropdown-level-1 > li > a {
/* ============================================================
     font-weight: bold !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;
     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
   DROPDOWN LAYER 2
   ============================================================ */
   ============================================================ */


#p-logo-text {
/*
    display: none !important;
* Examples:
}
*
 
* Continents
#p-logo {
* Kingdoms
    background: transparent !important;
* Towns
}
*
* These are the second-level headings.
*/


 
.exuvia-dropdown-level-2 > li > a {
/* ============================================================
     font-size: 16px !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-weight: bold !important;
    font-size: calc(1em + 2px) !important;
     color: #fff !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;
}
}

Revision as of 23:38, 26 August 2026

/* ============================================================
   SIDEBAR WIDTH
   ============================================================ */

/*
 * Timeless normally uses approximately 15em for the
 * left navigation area.
 *
 * Increase it by 20%.
 */

#mw-site-navigation {
    width: 18em !important;
}


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

/*
 * Examples:
 *
 * Locations
 * Religions
 * People
 * World Building
 *
 * These remain the larger top-level headings.
 */

.exuvia-dropdown-level-1 > li > a {
    font-weight: bold !important;
    color: #fff !important;
}


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

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

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