MediaWiki:Common.css: Difference between revisions

From Exuvia Wiki
← Older editNewer edit →

Admin (talk | contribs)

3 user groups
84 edits
No edit summary
No edit summary
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 261: Line 92:




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




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




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




/*
/* ============================================================
===============================================================================
  SEARCH BUTTON
12. TABLES
  ============================================================ */
===============================================================================
 
#simpleSearch button,
#simpleSearch .mw-ui-icon {
    background: transparent !important;
    border: 0 !important;
}
 
#simpleSearch button svg,
#simpleSearch .mw-ui-icon svg {
    fill: #bdbdbd !important;
    color: #bdbdbd !important;
}
 
#simpleSearch button:hover svg,
#simpleSearch .mw-ui-icon:hover svg {
    fill: #eeeeee !important;
    color: #eeeeee !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 200:
     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 215:




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


.infobox {
.infobox {
Line 403: Line 225:




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




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




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




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




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


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


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


body {
body {
Line 539: Line 304:
}
}


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


The dropdown title is the link directly inside the <li> that also contains
/* ============================================================
.exuvia-dropdown-menu.
  DROPDOWN TITLES
 
  ============================================================ */
This does not depend on JavaScript-added classes.
===============================================================================
*/


li:has(> .exuvia-dropdown-menu) > a {
li:has(> .exuvia-dropdown-menu) > a {
Line 558: Line 316:




/*
/* ============================================================
===============================================================================
  DROPDOWN MENUS
SEARCH BUTTON
  ============================================================ */
===============================================================================


Timeless positions the search button inside/next to the search field.
.exuvia-dropdown-arrow {
The current dark-theme CSS is causing the button to overlap the input.
     margin-left: 4px;
 
     font-size: 0.8em;
Give the search field enough room for the button.
===============================================================================
*/
 
#simpleSearch {
     position: relative !important;
     padding-right: 45px !important;
}
}


 
.exuvia-dropdown-menu {
/*
    margin: 0 !important;
Move the search button back to the right side of the search field.
     padding: 0 !important;
*/
    background: var(--panel) !important;
 
#simpleSearch {
#simpleSearch {
     padding-right: 0 !important;
}
}


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


/*
.exuvia-dropdown-menu a {
===============================================================================
    display: block !important;
SEARCH PAGE TABS
     padding: 8px 12px !important;
===============================================================================
     background: transparent !important;
 
     color: var(--link) !important;
These are the tabs at the top of Special:Search:
 
     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;
}
}


 
.exuvia-dropdown-menu a:hover {
/*
     background: var(--input) !important;
Each individual search tab.
*/
 
.mw-search-profile-tabs li {
    background: #202020 !important;
    border-color: #444 !important;
}
 
 
/*
The links inside the tabs.
*/
 
.mw-search-profile-tabs a {
    background: #202020 !important;
    color: #ddd !important;
}
 
 
/*
The currently selected tab.
*/
 
.mw-search-profile-tabs .selected,
.mw-search-profile-tabs .selected a {
     background: #181818 !important;
    color: #fff !important;
}
 
 
/*
Mouse-over effect.
*/
 
.mw-search-profile-tabs a:hover {
    background: #292929 !important;
    color: #fff !important;
}
}

Revision as of 02:09, 26 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
   ============================================================ */

#simpleSearch button,
#simpleSearch .mw-ui-icon {
    background: transparent !important;
    border: 0 !important;
}

#simpleSearch button svg,
#simpleSearch .mw-ui-icon svg {
    fill: #bdbdbd !important;
    color: #bdbdbd !important;
}

#simpleSearch button:hover svg,
#simpleSearch .mw-ui-icon:hover svg {
    fill: #eeeeee !important;
    color: #eeeeee !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;
}
Retrieved from "https://exuviawiki.duckdns.org/index.php?title=MediaWiki:Common.css&oldid=51"