MediaWiki:Common.css: Difference between revisions

From Exuvia Wiki
← Older edit

Admin (talk | contribs)

3 user groups
84 edits
No edit summary
No edit summary
 
(27 intermediate revisions by the same user not shown)
Line 1: Line 1:
/*
/* ============================================================
===============================================================================
  TIMELESS DARK MODE
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(
@import url(
Line 50: Line 8:




/*
/* ============================================================
===============================================================================
  COLOR VARIABLES
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 {
:root {
Line 88: Line 28:




/*
/* ============================================================
===============================================================================
  PAGE BACKGROUND
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,
html,
Line 120: Line 39:




/*
/* ============================================================
===============================================================================
  MAIN CONTENT
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 {
#mw-content-container {
Line 156: Line 54:




/*
/* ============================================================
===============================================================================
  HEADER
5. HEADER
  ============================================================ */
===============================================================================
 
The header is the area across the top of the Timeless page.
 
===============================================================================
*/


#mw-header-container {
#mw-header-container {
Line 171: Line 63:




/*
/* ============================================================
===============================================================================
  SIDEBARS
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-site-navigation,
Line 187: Line 71:
     background: var(--content) !important;
     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-site-navigation .portal,
Line 215: Line 77:
     color: var(--text) !important;
     color: var(--text) !important;
}
}
/*
===============================================================================
7. SIDEBAR HEADINGS
===============================================================================
These are the headings above groups of sidebar links.
===============================================================================
*/


#mw-site-navigation .portal h3,
#mw-site-navigation .portal h3,
Line 232: Line 83:
     color: var(--heading) !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 ul,
Line 260: Line 91:
}
}


 
/* ============================================================
/*
  LINKS
===============================================================================
  ============================================================ */
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 {
a {
Line 288: Line 104:




/*
/* ============================================================
===============================================================================
  HEADINGS
10. HEADINGS
  ============================================================ */
===============================================================================
 
These selectors target HTML heading elements.
 
h1 = largest/main heading
h2 = second-level heading
h3 = third-level heading
etc.
 
===============================================================================
*/


h1,
h1,
Line 314: Line 119:




/*
/* ============================================================
===============================================================================
  SEARCH BAR
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 {
#simpleSearch {
Line 339: Line 134:




/*
/* ============================================================
===============================================================================
  SEARCH BUTTON
12. TABLES
  ============================================================ */
===============================================================================
 
.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;
}


.wikitable is MediaWiki's normal wiki table class.
.mw-search-profile-tabs a {
    background: #202020 !important;
    color: #ddd !important;
}


.mw-datatable is used by some MediaWiki-generated tables.
.mw-search-profile-tabs .selected,
.mw-search-profile-tabs .selected a {
    background: #181818 !important;
    color: #fff !important;
}


.mw-metadata is used for metadata tables.
.mw-search-profile-tabs a:hover {
    background: #292929 !important;
    color: #fff !important;
}


The period means these are CLASS selectors.


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


.wikitable,
.wikitable,
Line 362: Line 196:
     border-color: var(--border) !important;
     border-color: var(--border) !important;
}
}
/*
Table headers.
"th" means table header.
"td" means normal table cell.
===============================================================================
*/


.wikitable th,
.wikitable th,
Line 387: Line 211:




/*
/* ============================================================
===============================================================================
  INFOBOXES
13. INFOBOXES
  ============================================================ */
===============================================================================
 
MediaWiki infoboxes normally use the class "infobox".
 
===============================================================================
*/


.infobox {
.infobox {
Line 403: Line 221:




/*
/* ============================================================
===============================================================================
  CODE BLOCKS
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,
pre,
Line 426: Line 234:




/*
/* ============================================================
===============================================================================
  FORM INPUTS
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,
input,
Line 449: Line 247:




/*
/* ============================================================
===============================================================================
  TABLE OF CONTENTS
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,
.toc,
Line 478: Line 268:




/*
/* ============================================================
===============================================================================
  WIKI LOGO
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 {
#p-logo-text {
     display: none !important;
     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 {
#p-logo {
Line 518: Line 281:




/*
/* ============================================================
===============================================================================
  FOOTER
19. FOOTER
  ============================================================ */
===============================================================================
 
The footer is the area at the bottom of the page.
 
===============================================================================
*/


.mw-footer-container,
.mw-footer-container,
Line 534: Line 291:
}
}


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


body {
body {
Line 539: Line 300:
}
}


/*
===============================================================================
DROPDOWN TITLES
===============================================================================


The dropdown title is the link directly inside the <li> that also contains
/* ============================================================
.exuvia-dropdown-menu.
  DROPDOWN LAYER 1 TITLES
  ============================================================ */


This does not depend on JavaScript-added classes.
/*
===============================================================================
* Examples:
*/
*
* Locations
* Religions
* People
* World Building
*
* These are the main dropdown headings.
*/


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


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


/*
/*
===============================================================================
* Examples:
SEARCH BUTTON
*
===============================================================================
* 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;
}


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.
/* ============================================================
===============================================================================
  DROPDOWN ARROWS
*/
  ============================================================ */


#simpleSearch {
.exuvia-dropdown-arrow {
     position: relative !important;
     margin-left: 4px;
     padding-right: 45px !important;
     font-size: 0.8em;
}
}




/*
/* ============================================================
Move the search button back to the right side of the search field.
  DROPDOWN MENUS
*/
  ============================================================ */


#simpleSearch {
.exuvia-dropdown-menu {
     padding-right: 40px !important;
    margin: 0 !important;
     padding: 0 !important;
    background: var(--panel) !important;
}
}


#searchInput {
    box-sizing: border-box !important;
    padding-right: 40px !important;
}


#simpleSearch button {
/* ============================================================
  DROPDOWN MENU ITEMS
  ============================================================ */
 
.exuvia-dropdown-menu li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
     background: transparent !important;
     background: transparent !important;
    border: 0 !important;
}
}


#simpleSearch button svg {
    fill: #bdbdbd !important;
    color: #bdbdbd !important;
}


#simpleSearch button:hover svg {
/* ============================================================
     fill: #eeeeee !important;
  DROPDOWN LINKS
     color: #eeeeee !important;
  ============================================================ */
 
.exuvia-dropdown-menu a {
    display: block !important;
    padding: 8px 12px !important;
     background: transparent !important;
     color: var(--link) !important;
}
}




/*
/* ============================================================
===============================================================================
  DROPDOWN HOVER
SEARCH PAGE TABS
  ============================================================ */
===============================================================================


These are the tabs at the top of Special:Search:
.exuvia-dropdown-menu a:hover {
    background: var(--input) !important;
}


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


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


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


.mw-search-profile-tabs li {
.exuvia-dropdown-level-2 {
     background: #202020 !important;
     padding-left: 10px !important;
    border-color: #444 !important;
}
}


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


/*
/*
The links inside the tabs.
* Normal pages underneath Layer 2 headings remain smaller
*/
* than the Layer 2 heading itself.
*/


.mw-search-profile-tabs a {
.exuvia-dropdown-level-2 li a {
     background: #202020 !important;
     font-size: 16px !important;
    color: #ddd !important;
}
}




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


.mw-search-profile-tabs .selected,
li:has(> .exuvia-dropdown-level-2) > a {
.mw-search-profile-tabs .selected a {
     font-size: 16px !important;
     background: #181818 !important;
     color: #fff !important;
     color: #fff !important;
}
}


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


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


.mw-search-profile-tabs a:hover {
.mw-body-content {
     background: #292929 !important;
     font-size: 17px !important;
    color: #fff !important;
}
}

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;
}
Retrieved from "https://exuviawiki.duckdns.org/index.php?title=MediaWiki:Common.css&oldid=82"